Simplify with placement:right

GMOD · Dec 1, 2023 · 782b2b8 · 782b2b8
1 parent 4f440c9
commit 782b2b8
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 37 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
@@ -245,9 +245,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/plugins/wiggle/src/Tooltip.tsx b/plugins/wiggle/src/Tooltip.tsx
@@ -72,14 +72,16 @@ const Tooltip = observer(function Tooltip({
   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 +90,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',
           }}