From 648d4f96de6fcf15ebc9665efd32863b10ceaa7c Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Thu, 5 Sep 2024 11:26:05 -0400
Subject: [PATCH] Workaround for tooltips appearing at coord 0

Use BaseTooltip

Shorten build names
---
 packages/core/ui/BaseTooltip.tsx              |  74 ++++++++++++
 plugins/arc/src/ArcTooltip.tsx                |  56 +--------
 .../DotplotView/components/DotplotTooltip.tsx | 113 ++++--------------
 .../components/SyntenyTooltip.tsx             |  60 +---------
 .../BaseLinearDisplay/components/Tooltip.tsx  |  57 +--------
 plugins/wiggle/src/Tooltip.tsx                |  56 ++-------
 6 files changed, 113 insertions(+), 303 deletions(-)
 create mode 100644 packages/core/ui/BaseTooltip.tsx

diff --git a/packages/core/ui/BaseTooltip.tsx b/packages/core/ui/BaseTooltip.tsx
new file mode 100644
index 0000000000..7e1f164fbf
--- /dev/null
+++ 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
index 635cc30687..ab7d1d8585 100644
--- 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
index 8c51a3b88f..e3955a781d 100644
--- 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
index 86fd4b7128..47c20ca09c 100644
--- 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
 })
 
diff --git a/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx b/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
index 4f77525dfc..fda9244cb5 100644
--- a/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
+++ b/plugins/linear-genome-view/src/BaseLinearDisplay/components/Tooltip.tsx
@@ -1,38 +1,11 @@
 import React from 'react'
 import { getConf } from '@jbrowse/core/configuration'
 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'
-
 // locals
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-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
 }
@@ -58,40 +31,18 @@ const Tooltip = observer(function ({
   model: BaseLinearDisplayModel
   clientMouseCoord: Coord
 }) {
-  const { theme, classes } = useStyles()
   const { featureUnderMouse } = model
-
   const x = clientMouseCoord[0] + 15
   const y = clientMouseCoord[1]
 
-  const { refs, floatingStyles, context } = useFloating({
-    placement: 'right',
-    strategy: 'fixed',
-  })
-
-  const clientPoint = useClientPoint(context, { x, y })
-  const { getFloatingProps } = useInteractions([clientPoint])
-
   const contents = featureUnderMouse
     ? getConf(model, 'mouseover', { feature: featureUnderMouse })
     : undefined
 
-  const popperTheme = theme.components?.MuiPopper
   return featureUnderMouse && 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 clientPoint={{ x, y }}>
+      <TooltipContents message={contents} />
+    </BaseTooltip>
   ) : null
 })
 
diff --git a/plugins/wiggle/src/Tooltip.tsx b/plugins/wiggle/src/Tooltip.tsx
index b132b0aac5..bf7ef62d55 100644
--- a/plugins/wiggle/src/Tooltip.tsx
+++ b/plugins/wiggle/src/Tooltip.tsx
@@ -1,33 +1,12 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { alpha, Portal, useTheme } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { Feature } from '@jbrowse/core/util'
-import {
-  useClientPoint,
-  useFloating,
-  useInteractions,
-} from '@floating-ui/react'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 // locals
-import { YSCALEBAR_LABEL_OFFSET, round } from './util'
-
-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 { YSCALEBAR_LABEL_OFFSET } from './util'
 
+const useStyles = makeStyles()({
   hoverVertical: {
     background: '#333',
     border: 'none',
@@ -38,7 +17,7 @@ const useStyles = makeStyles()(theme => ({
     position: 'absolute',
     pointerEvents: 'none',
   },
-}))
+})
 
 type Coord = [number, number]
 
@@ -65,37 +44,16 @@ const Tooltip = observer(function Tooltip({
   clientRect?: DOMRect
   TooltipContents: TooltipContentsComponent
 }) {
-  const theme = useTheme()
   const { featureUnderMouse } = model
   const { classes } = useStyles()
-  const { refs, floatingStyles, context } = useFloating({
-    placement: 'right',
-    strategy: 'fixed',
-  })
 
   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
-
   return featureUnderMouse ? (
     <>
-      <Portal container={popperTheme?.defaultProps?.container}>
-        <div
-          className={classes.tooltip}
-          ref={refs.setFloating}
-          style={{
-            ...floatingStyles,
-            zIndex: 100000,
-            pointerEvents: 'none',
-          }}
-          {...getFloatingProps()}
-        >
-          <TooltipContents model={model} feature={featureUnderMouse} />
-        </div>
-      </Portal>
+      <BaseTooltip clientPoint={{ x, y }}>
+        <TooltipContents model={model} feature={featureUnderMouse} />
+      </BaseTooltip>
 
       <div
         className={classes.hoverVertical}