@jbrowse/plugin-wiggle 1.7.11 → 2.1.0

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -1,54 +1,15 @@
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles, alpha, Portal } from '@material-ui/core'
-import { Feature } from '@jbrowse/core/util/simpleFeature'
+import { Feature } from '@jbrowse/core/util'
 
 // locals
-import { YSCALEBAR_LABEL_OFFSET } from '../models/model'
-import { usePopper } from 'react-popper'
-
-// convert to number, apply shortened precision, and render
-function toP(s = 0) {
-  return +(+s).toPrecision(6)
-}
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
+import Tooltip, { TooltipContentsComponent } from '../../Tooltip'
+import { toP } from '../../util'
 
 const en = (n: number) => n.toLocaleString('en-US')
 
-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',
-  },
-
-  hoverVertical: {
-    background: '#333',
-    border: 'none',
-    width: 1,
-    height: '100%',
-    top: YSCALEBAR_LABEL_OFFSET,
-    cursor: 'default',
-    position: 'absolute',
-    pointerEvents: 'none',
-  },
-}))
-
 const TooltipContents = React.forwardRef<HTMLDivElement, { feature: Feature }>(
-  ({ feature }: { feature: Feature }, ref) => {
+  ({ feature }, ref) => {
     const start = feature.get('start')
     const end = feature.get('end')
     const name = feature.get('refName')
@@ -78,83 +39,6 @@ const TooltipContents = React.forwardRef<HTMLDivElement, { feature: Feature }>(
 
 type Coord = [number, number]
 
-const Tooltip = observer(
-  ({
-    model,
-    height,
-    clientMouseCoord,
-    offsetMouseCoord,
-    clientRect,
-    TooltipContents,
-  }: {
-    model: { featureUnderMouse: Feature }
-    height: number
-    clientMouseCoord: Coord
-    offsetMouseCoord: Coord
-    clientRect?: DOMRect
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    TooltipContents: React.FC<any>
-  }) => {
-    const { featureUnderMouse } = model
-    const [width, setWidth] = useState(0)
-    const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
-    const classes = useStyles()
-
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = useMemo(
-      () => ({
-        getBoundingClientRect: () => {
-          const x = clientMouseCoord[0] + width / 2 + 20
-          const y = clientRect?.top || 0
-          return {
-            top: y,
-            left: x,
-            bottom: y,
-            right: x,
-            width: 0,
-            height: 0,
-            x,
-            y,
-            toJSON() {},
-          }
-        },
-      }),
-      [clientRect?.top, clientMouseCoord, width],
-    )
-    const { styles, attributes } = usePopper(virtElement, anchorEl)
-
-    return featureUnderMouse ? (
-      <>
-        <Portal>
-          <div
-            ref={setAnchorEl}
-            className={classes.tooltip}
-            // zIndex needed to go over widget drawer
-            style={{ ...styles.popper, zIndex: 100000 }}
-            {...attributes.popper}
-          >
-            <TooltipContents
-              ref={(elt: HTMLDivElement) => {
-                setWidth(elt?.getBoundingClientRect().width || 0)
-              }}
-              feature={featureUnderMouse}
-            />
-          </div>
-        </Portal>
-
-        <div
-          className={classes.hoverVertical}
-          style={{
-            left: offsetMouseCoord[0],
-            height: height - YSCALEBAR_LABEL_OFFSET * 2,
-          }}
-        />
-      </>
-    ) : null
-  },
-)
-
 const WiggleTooltip = observer(
   (props: {
     model: { featureUnderMouse: Feature }
@@ -162,6 +46,7 @@ const WiggleTooltip = observer(
     offsetMouseCoord: Coord
     clientMouseCoord: Coord
     clientRect?: DOMRect
+    TooltipContents?: TooltipContentsComponent
   }) => {
     return <Tooltip TooltipContents={TooltipContents} {...props} />
   },

package/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx

@@ -5,20 +5,25 @@ import {
   getContainingTrack,
 } from '@jbrowse/core/util'
 import { getConf } from '@jbrowse/core/configuration'
-import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+import {
+  BaseLinearDisplayComponent,
+  LinearGenomeViewModel,
+} from '@jbrowse/plugin-linear-genome-view'
 import { observer } from 'mobx-react'
 import { WiggleDisplayModel } from '../models/model'
 import YScaleBar from './YScaleBar'
 
+type LGV = LinearGenomeViewModel
+
 const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
   const { stats, height, needsScalebar } = model
 
-  // @ts-ignore
-  const { trackLabels } = getContainingView(model)
+  const { trackLabels } = getContainingView(model) as LGV
+  const track = getContainingTrack(model)
   const left =
     trackLabels === 'overlapping'
-      ? measureText(getConf(getContainingTrack(model), 'name'), 12.8) + 100
+      ? measureText(getConf(track, 'name'), 12.8) + 100
       : 50
   return (
     <div>

package/src/LinearWiggleDisplay/index.ts

@@ -1,3 +1,24 @@
-export { default as configSchemaFactory } from './models/configSchema'
-export { default as modelFactory, YSCALEBAR_LABEL_OFFSET } from './models/model'
-export { default as ReactComponent } from './components/WiggleDisplayComponent'
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+
+import configSchemaFactory from './models/configSchema'
+import modelFactory from './models/model'
+import ReactComponent from './components/WiggleDisplayComponent'
+import Tooltip from './components/Tooltip'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    const stateModel = modelFactory(pluginManager, configSchema)
+    return new DisplayType({
+      name: 'LinearWiggleDisplay',
+      configSchema,
+      stateModel,
+      trackType: 'QuantitativeTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent,
+    })
+  })
+}
+
+export { ReactComponent, modelFactory, Tooltip }