diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx index fdd0963fd31..b551435e979 100644 --- 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 index bff396c5abd..86b46c331e2 100644 --- 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 ({ ) : null} {validSelect ? ( diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx index 5cfd4f2862d..7156f688f0a 100644 --- a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx +++ b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx @@ -194,7 +194,7 @@ const LinearSyntenyRendering = observer(function ({ height={height} /> {model.mouseoverId && tooltip && currX && currY ? ( - + ) : null} ) diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx index c3874ae2016..9bbf33ea03f 100644 --- 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 index 68e4ad55477..2a07cb0c7ee 100644 --- 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 index 2c51db0b25b..e563cd7c564 100644 --- 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 ? ( <> @@ -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', }}