Simplify with placement:right

GMOD · Dec 1, 2023 · 0b0046e · 0b0046e
1 parent 4f440c9
commit 0b0046e
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 41 deletions.
diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx
@@ -38,25 +38,17 @@ type Coord = [number, number] | undefined
 export const TooltipWhereMouseovered = observer(function ({
   model,
   mouserect,
-  mouserectClient,
   xdistance,
-  ydistance,
 }: {
   model: DotplotViewModel
   mouserect: Coord
-  mouserectClient: Coord
   xdistance: number
-  ydistance: number
 }) {
   const { classes } = useStyles()
   const { hview, vview, viewHeight } = model
   const theme = useTheme()
-  const x = (mouserectClient?.[0] || 0) - (xdistance < 0 ? 0 : 0)
-  const y = (mouserectClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
 
   const { refs, floatingStyles, context } = useFloating({
-    open: true,
-    onOpenChange: () => {},
     placement: xdistance < 0 ? 'left' : 'right',
   })
 
@@ -72,7 +64,6 @@ export const TooltipWhereMouseovered = observer(function ({
         ref={refs.setFloating}
         style={{
           ...floatingStyles,
-          transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
           zIndex: 100000,
           pointerEvents: 'none',
         }}
@@ -107,12 +98,10 @@ export const TooltipWhereClicked = observer(function ({
   const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
 
   const { refs, floatingStyles, context } = useFloating({
-    open: true,
-    onOpenChange: () => {},
-    placement: xdistance < 0 ? 'left' : 'right',
+    placement: xdistance < 0 ? 'right' : 'left',
   })
 
-  const clientPoint = useClientPoint(context)
+  const clientPoint = useClientPoint(context, { x, y })
   const { getFloatingProps } = useInteractions([clientPoint])
 
   const popperTheme = theme?.components?.MuiPopper
@@ -123,7 +112,6 @@ export const TooltipWhereClicked = observer(function ({
         ref={refs.setFloating}
         style={{
           ...floatingStyles,
-          transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
           zIndex: 100000,
           pointerEvents: 'none',
         }}

diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx
@@ -110,7 +110,6 @@ const DotplotViewInternal = observer(function ({
   const mousedown = getOffset(mousedownClient, svg)
   const mousecurr = getOffset(mousecurrClient, svg)
   const mouseup = getOffset(mouseupClient, svg)
-  const mouserectClient = mouseupClient || mousecurrClient
   const mouserect = mouseup || mousecurr
   const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0
   const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0
@@ -245,9 +244,7 @@ const DotplotViewInternal = observer(function ({
               <TooltipWhereMouseovered
                 model={model}
                 mouserect={mouserect}
-                mouserectClient={mouserectClient}
                 xdistance={xdistance}
-                ydistance={ydistance}
               />
             ) : null}
             {validSelect ? (

diff --git a/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
@@ -194,7 +194,7 @@ const LinearSyntenyRendering = observer(function ({
         height={height}
       />
       {model.mouseoverId && tooltip && currX && currY ? (
-        <SyntenyTooltip x={currX} y={currY} title={tooltip} />
+        <SyntenyTooltip title={tooltip} />
       ) : null}
     </div>
   )

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx
@@ -31,21 +31,12 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const SyntenyTooltip = observer(function ({
-  x,
-  y,
-  title,
-}: {
-  x: number
-  y: number
-  title: string
-}) {
+const SyntenyTooltip = observer(function ({ title }: { title: string }) {
   const theme = useTheme()
   const { classes } = useStyles()
 
   const { refs, floatingStyles, context } = useFloating({
-    open: true,
-    onOpenChange: () => {},
+    placement: 'right',
   })
 
   const clientPoint = useClientPoint(context)
@@ -60,7 +51,6 @@ const SyntenyTooltip = observer(function ({
         ref={refs.setFloating}
         style={{
           ...floatingStyles,
-          transform: `translate(${Math.round(x + 15)}px,${Math.round(y)}px)`,
           zIndex: 100000,
           pointerEvents: 'none',
         }}

diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
@@ -65,11 +65,10 @@ const Tooltip = observer(function ({
   const y = clientMouseCoord[1]
 
   const { refs, floatingStyles, context } = useFloating({
-    open: true,
-    onOpenChange: () => {},
+    placement: 'right',
   })
 
-  const clientPoint = useClientPoint(context)
+  const clientPoint = useClientPoint(context, { x, y })
   const { getFloatingProps } = useInteractions([clientPoint])
 
   const contents = featureUnderMouse
@@ -84,7 +83,6 @@ const Tooltip = observer(function ({
         ref={refs.setFloating}
         style={{
           ...floatingStyles,
-          transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
           zIndex: 100000,
           pointerEvents: 'none',
         }}

diff --git a/...-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/...-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap
@@ -749,7 +749,7 @@ exports[`renders two tracks, two regions 1`] = `
                     autocapitalize="none"
                     autocomplete="off"
                     class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-19qh8xo-MuiInputBase-input-MuiOutlinedInput-input"
-                    id=":r9:"
+                    id=":ra:"
                     placeholder="Search for location"
                     role="combobox"
                     spellcheck="false"

diff --git a/plugins/wiggle/src/Tooltip.tsx b/plugins/wiggle/src/Tooltip.tsx
@@ -70,16 +70,16 @@ const Tooltip = observer(function Tooltip({
   const { featureUnderMouse } = model
   const { classes } = useStyles()
   const { refs, floatingStyles, context } = useFloating({
-    open: true,
-    onOpenChange: () => {},
+    placement: 'right',
   })
 
-  const clientPoint = useClientPoint(context)
+  const x = clientMouseCoord[0] + 5
+  const y = useClientY ? clientMouseCoord[1] : clientRect?.top || 0
+  const clientPoint = useClientPoint(context, { x, y })
   const { getFloatingProps } = useInteractions([clientPoint])
 
   const popperTheme = theme?.components?.MuiPopper
-  const x = clientMouseCoord[0] + 5
-  const y = useClientY ? clientMouseCoord[1] : clientRect?.top || 0
+
   return featureUnderMouse ? (
     <>
       <Portal container={popperTheme?.defaultProps?.container}>
@@ -88,7 +88,6 @@ const Tooltip = observer(function Tooltip({
           ref={refs.setFloating}
           style={{
             ...floatingStyles,
-            transform: `translate(${Math.round(x)}px,${Math.round(y)}px)`,
             zIndex: 100000,
             pointerEvents: 'none',
           }}