Workaround for tooltips appearing at coord 0

Use BaseTooltip Shorten build names
GMOD · Sep 5, 2024 · f19ad87 · f19ad87
1 parent f95f0b9
commit f19ad87
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 304 deletions.
diff --git a/packages/core/ui/BaseTooltip.tsx b/packages/core/ui/BaseTooltip.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { alpha, Portal, useTheme } from '@mui/material'
+
+import {
+  useClientPoint,
+  useFloating,
+  useInteractions,
+} from '@floating-ui/react'
+
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+
+const useStyles = makeStyles()(theme => ({
+  // these styles come from
+  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+  tooltip: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    backgroundColor: alpha(theme.palette.grey[700], 0.9),
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.common.white,
+    fontFamily: theme.typography.fontFamily,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(12),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+  },
+}))
+
+export default function BaseTooltip({
+  clientPoint: clientPointCoords,
+  children,
+  placement = 'right',
+}: {
+  placement?: 'left' | 'right'
+  clientPoint?: { x: number; y: number }
+  children: React.ReactNode
+}) {
+  const theme = useTheme()
+  const popperTheme = theme.components?.MuiPopper
+  const { classes } = useStyles()
+  const { refs, floatingStyles, context } = useFloating({
+    placement,
+    strategy: 'fixed',
+  })
+
+  const clientPoint = useClientPoint(context, clientPointCoords)
+  const { getFloatingProps } = useInteractions([clientPoint])
+  return (
+    <Portal container={popperTheme?.defaultProps?.container}>
+      <div
+        className={classes.tooltip}
+        ref={refs.setFloating}
+        style={{
+          ...floatingStyles,
+          zIndex: 100000,
+          // workaround for tooltips flashing at top left corner of screen
+          // when first appearing
+          visibility:
+            floatingStyles.transform === 'translate(0px, 0px)'
+              ? 'hidden'
+              : undefined,
+          pointerEvents: 'none',
+        }}
+        {...getFloatingProps()}
+      >
+        {children}
+      </div>
+    </Portal>
+  )
+}
diff --git a/plugins/arc/src/ArcTooltip.tsx b/plugins/arc/src/ArcTooltip.tsx
@@ -1,33 +1,7 @@
 import React from 'react'
 import { SanitizedHTML } from '@jbrowse/core/ui'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { observer } from 'mobx-react'
-import { Portal, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  useClientPoint,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react'
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-const useStyles = makeStyles()(theme => ({
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
 
 interface Props {
   message: React.ReactNode | string
@@ -47,32 +21,10 @@ const TooltipContents = React.forwardRef<HTMLDivElement, Props>(
 )
 
 const ArcTooltip = observer(function ({ contents }: { contents?: string }) {
-  const { theme, classes } = useStyles()
-
-  const { refs, floatingStyles, context } = useFloating({
-    placement: 'right',
-    strategy: 'fixed',
-  })
-
-  const clientPoint = useClientPoint(context)
-  const { getFloatingProps } = useInteractions([clientPoint])
-
-  const popperTheme = theme.components?.MuiPopper
   return contents ? (
-    <Portal container={popperTheme?.defaultProps?.container}>
-      <div
-        className={classes.tooltip}
-        ref={refs.setFloating}
-        style={{
-          ...floatingStyles,
-          zIndex: 100000,
-          pointerEvents: 'none',
-        }}
-        {...getFloatingProps()}
-      >
-        <TooltipContents message={contents} />
-      </div>
-    </Portal>
+    <BaseTooltip>
+      <TooltipContents message={contents} />
+    </BaseTooltip>
   ) : null
 })
 

diff --git a/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx b/plugins/dotplot-view/src/DotplotView/components/DotplotTooltip.tsx
@@ -1,37 +1,10 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 
 // locals
 import { DotplotViewModel } from '../model'
 import { locstr } from './util'
-import { Portal, alpha, useTheme } from '@mui/material'
-import {
-  useFloating,
-  useClientPoint,
-  useInteractions,
-} from '@floating-ui/react'
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-const useStyles = makeStyles()(theme => ({
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
 
 type Coord = [number, number] | undefined
 
@@ -46,46 +19,21 @@ export const TooltipWhereMouseovered = observer(function ({
   mouserectClient: Coord
   xdistance: number
 }) {
-  const { classes } = useStyles()
   const { hview, vview, viewHeight } = model
-  const theme = useTheme()
-
-  const { refs, floatingStyles, context } = useFloating({
-    placement: xdistance < 0 ? 'left' : 'right',
-    strategy: 'fixed',
-  })
-
-  const clientPoint = useClientPoint(
-    context,
-    mouserectClient
-      ? {
-          x: mouserectClient[0],
-          y: mouserectClient[1],
-        }
-      : undefined,
-  )
-  const { getFloatingProps } = useInteractions([clientPoint])
-
-  const popperTheme = theme.components?.MuiPopper
-
   return mouserect ? (
-    <Portal container={popperTheme?.defaultProps?.container}>
-      <div
-        className={classes.tooltip}
-        ref={refs.setFloating}
-        style={{
-          ...floatingStyles,
-          zIndex: 100000,
-          pointerEvents: 'none',
-        }}
-        {...getFloatingProps()}
-      >
-        {`x - ${locstr(mouserect[0], hview)}`}
-        <br />
-        {`y - ${locstr(viewHeight - mouserect[1], vview)}`}
-        <br />
-      </div>
-    </Portal>
+    <BaseTooltip
+      placement={xdistance < 0 ? 'left' : 'right'}
+      clientPoint={
+        mouserectClient
+          ? { x: mouserectClient[0], y: mouserectClient[1] }
+          : undefined
+      }
+    >
+      {`x - ${locstr(mouserect[0], hview)}`}
+      <br />
+      {`y - ${locstr(viewHeight - mouserect[1], vview)}`}
+      <br />
+    </BaseTooltip>
   ) : null
 })
 
@@ -102,37 +50,16 @@ export const TooltipWhereClicked = observer(function ({
   xdistance: number
   ydistance: number
 }) {
-  const { classes } = useStyles()
   const { hview, vview, viewHeight } = model
-  const theme = useTheme()
   const x = (mousedownClient?.[0] || 0) - (xdistance < 0 ? 0 : 0)
   const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0)
 
-  const { refs, floatingStyles, context } = useFloating({
-    placement: xdistance < 0 ? 'right' : 'left',
-  })
-
-  const clientPoint = useClientPoint(context, { x, y })
-  const { getFloatingProps } = useInteractions([clientPoint])
-
-  const popperTheme = theme.components?.MuiPopper
   return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (
-    <Portal container={popperTheme?.defaultProps?.container}>
-      <div
-        className={classes.tooltip}
-        ref={refs.setFloating}
-        style={{
-          ...floatingStyles,
-          zIndex: 100000,
-          pointerEvents: 'none',
-        }}
-        {...getFloatingProps()}
-      >
-        {`x - ${locstr(mousedown[0], hview)}`}
-        <br />
-        {`y - ${locstr(viewHeight - mousedown[1], vview)}`}
-        <br />
-      </div>
-    </Portal>
+    <BaseTooltip clientPoint={{ x, y }}>
+      {`x - ${locstr(mousedown[0], hview)}`}
+      <br />
+      {`y - ${locstr(viewHeight - mousedown[1], vview)}`}
+      <br />
+    </BaseTooltip>
   ) : null
 })
diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/components/SyntenyTooltip.tsx
@@ -1,65 +1,13 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { Portal, useTheme, alpha } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import {
-  useClientPoint,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react'
 import { SanitizedHTML } from '@jbrowse/core/ui'
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-
-const useStyles = makeStyles()(theme => ({
-  // these styles come from
-  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-  tooltip: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    backgroundColor: alpha(theme.palette.grey[700], 0.9),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
-    fontFamily: theme.typography.fontFamily,
-    padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 
 const SyntenyTooltip = observer(function ({ title }: { title: string }) {
-  const theme = useTheme()
-  const { classes } = useStyles()
-
-  const { refs, floatingStyles, context } = useFloating({
-    placement: 'right',
-    strategy: 'fixed',
-  })
-
-  const clientPoint = useClientPoint(context)
-  const { getFloatingProps } = useInteractions([clientPoint])
-
-  const popperTheme = theme.components?.MuiPopper
-
   return title ? (
-    <Portal container={popperTheme?.defaultProps?.container}>
-      <div
-        className={classes.tooltip}
-        ref={refs.setFloating}
-        style={{
-          ...floatingStyles,
-          zIndex: 100000,
-          pointerEvents: 'none',
-        }}
-        {...getFloatingProps()}
-      >
-        <SanitizedHTML html={title} />
-      </div>
-    </Portal>
+    <BaseTooltip>
+      <SanitizedHTML html={title} />
+    </BaseTooltip>
   ) : null
 })