@jbrowse/plugin-wiggle 2.0.1 → 2.1.0

package/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { observer } from 'mobx-react'
 import {
   Button,
   Dialog,
@@ -12,7 +13,7 @@ import {
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import CloseIcon from '@mui/icons-material/Close'
-import { CompactPicker, Color, RGBColor } from 'react-color'
+import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
 
 const useStyles = makeStyles()(theme => ({
   closeButton: {
@@ -23,22 +24,14 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-// this is needed because passing a entire color object into the react-color
-// for alpha, can't pass in an rgba string for example
-function serialize(color: Color) {
-  if (color instanceof Object) {
-    const { r, g, b } = color as RGBColor
-    return `rgb(${r},${g},${b})`
-  }
-  return color
-}
-
-export default function SetColorDialog({
+function SetColorDialog({
   model,
   handleClose,
 }: {
   model: {
-    color: number
+    color?: string
+    posColor?: string
+    negColor?: string
     setColor: (arg?: string) => void
     setPosColor: (arg?: string) => void
     setNegColor: (arg?: string) => void
@@ -78,17 +71,19 @@ export default function SetColorDialog({
         {posneg ? (
           <>
             <Typography>Positive color</Typography>
-            <CompactPicker
+            <ColorPicker
+              color={model.posColor || 'black'}
               onChange={event => {
-                model.setPosColor(serialize(event.rgb))
+                model.setPosColor(event)
                 model.setColor(undefined)
               }}
             />
             <Typography>Negative color</Typography>
 
-            <CompactPicker
+            <ColorPicker
+              color={model.negColor || 'black'}
               onChange={event => {
-                model.setNegColor(serialize(event.rgb))
+                model.setNegColor(event)
                 model.setColor(undefined)
               }}
             />
@@ -96,8 +91,9 @@ export default function SetColorDialog({
         ) : (
           <>
             <Typography>Overall color</Typography>
-            <CompactPicker
-              onChange={event => model.setColor(serialize(event.rgb))}
+            <ColorPicker
+              color={model.color || 'black'}
+              onChange={event => model.setColor(event)}
             />
           </>
         )}
@@ -127,3 +123,5 @@ export default function SetColorDialog({
     </Dialog>
   )
 }
+
+export default observer(SetColorDialog)

package/src/LinearWiggleDisplay/components/Tooltip.tsx

@@ -1,55 +1,15 @@
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
-import { alpha, Portal } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-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')
@@ -79,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 }
@@ -163,6 +46,7 @@ const WiggleTooltip = observer(
     offsetMouseCoord: Coord
     clientMouseCoord: Coord
     clientRect?: DOMRect
+    TooltipContents?: TooltipContentsComponent
   }) => {
     return <Tooltip TooltipContents={TooltipContents} {...props} />
   },

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 }