From 0b0046ebf9a1a2394090de7d4db2459d5b5f06f2 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 1 Dec 2023 12:42:55 -0500 Subject: [PATCH] Simplify with placement:right --- .../DotplotView/components/DotplotTooltip.tsx | 16 ++-------------- .../src/DotplotView/components/DotplotView.tsx | 3 --- .../components/LinearSyntenyRendering.tsx | 2 +- .../components/SyntenyTooltip.tsx | 14 ++------------ .../src/BaseLinearDisplay/components/Tooltip.tsx | 6 ++---- .../__snapshots__/LinearGenomeView.test.tsx.snap | 2 +- plugins/wiggle/src/Tooltip.tsx | 11 +++++------ 7 files changed, 13 insertions(+), 41 deletions(-) diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx index fdd0963fd3..b551435e97 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 bff396c5ab..64cc02b9a6 100644 --- 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 ({ ) : 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 5cfd4f2862..7156f688f0 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 c3874ae201..9bbf33ea03 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 68e4ad5547..2a07cb0c7e 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/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap index d802081bf0..b52fc9e819 100644 --- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.tsx.snap +++ b/plugins/linear-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 index 2c51db0b25..f408d19f5e 100644 --- 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 ? ( <> @@ -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', }}