@jbrowse/plugin-linear-genome-view 1.3.4 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.3.4",
+  "version": "1.5.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@material-ui/icons": "^4.9.1",
+    "@popperjs/core": "^2.9.3",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
@@ -43,6 +44,7 @@
     "is-object": "^1.0.1",
     "json-stable-stringify": "^1.0.1",
     "normalize-wheel": "^1.0.1",
+    "react-popper": "^2.0.0",
     "react-sizeme": "^2.6.7"
   },
   "peerDependencies": {
@@ -59,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4e2fcbbfd682edc3132f372fb72bffc513248d63"
+  "gitHead": "542025578a39bd170c8a166f2568ee7edbd54072"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,13 +1,19 @@
+import React, { useState, useRef, useMemo } from 'react'
+import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { useTheme, makeStyles } from '@material-ui/core/styles'
 import { observer } from 'mobx-react'
-import React, { useState, useRef } from 'react'
-import MUITooltip from '@material-ui/core/Tooltip'
+import { usePopper } from 'react-popper'
+
+// locals
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-const useStyles = makeStyles({
+function round(value: number) {
+  return Math.round(value * 1e5) / 1e5
+}
+
+const useStyles = makeStyles(theme => ({
   display: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -15,26 +21,89 @@ const useStyles = makeStyles({
     width: '100%',
     minHeight: '100%',
   },
+
+  // 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(10),
+    lineHeight: `${round(14 / 10)}em`,
+    maxWidth: 300,
+    wordWrap: 'break-word',
+    fontWeight: theme.typography.fontWeightMedium,
+  },
+}))
+
+const TooltipContents = React.forwardRef<
+  HTMLDivElement,
+  { message: React.ReactNode | string }
+>(({ message }: { message: React.ReactNode | string }, ref) => {
+  return <div ref={ref}>{message}</div>
 })
+
 const Tooltip = observer(
-  (props: { model: BaseLinearDisplayModel; mouseCoord: [number, number] }) => {
-    const { model, mouseCoord } = props
+  ({
+    model,
+    clientMouseCoord,
+  }: {
+    model: BaseLinearDisplayModel
+    clientMouseCoord: Coord
+  }) => {
+    const classes = useStyles()
     const { featureUnderMouse } = model
-    const mouseover = featureUnderMouse
+    const [width, setWidth] = useState(0)
+
+    const [popperElt, setPopperElt] = useState<HTMLDivElement | null>(null)
+
+    // 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 = clientMouseCoord[1]
+          return {
+            top: y,
+            left: x,
+            bottom: y,
+            right: x,
+            width: 0,
+            height: 0,
+            x,
+            y,
+            toJSON() {},
+          }
+        },
+      }),
+      [clientMouseCoord, width],
+    )
+    const { styles, attributes } = usePopper(virtElement, popperElt)
+
+    const contents = featureUnderMouse
       ? getConf(model, 'mouseover', { feature: featureUnderMouse })
       : undefined
-    return mouseover ? (
-      <MUITooltip title={mouseover} open placement="right">
+
+    return featureUnderMouse && contents ? (
+      <Portal>
         <div
-          style={{
-            position: 'absolute',
-            left: mouseCoord[0],
-            top: mouseCoord[1],
-          }}
+          ref={setPopperElt}
+          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)
+            }
+            message={contents}
+          />
         </div>
-      </MUITooltip>
+      </Portal>
     ) : null
   },
 )
@@ -44,10 +113,11 @@ const BaseLinearDisplay = observer(
   (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {
     const classes = useStyles()
     const theme = useTheme()
-
-    const [mouseCoord, setMouseCoord] = useState<Coord>([0, 0])
-    const [contextCoord, setContextCoord] = useState<Coord>()
     const ref = useRef<HTMLDivElement>(null)
+    const [clientRect, setClientRect] = useState<ClientRect>()
+    const [offsetMouseCoord, setOffsetMouseCoord] = useState<Coord>([0, 0])
+    const [clientMouseCoord, setClientMouseCoord] = useState<Coord>([0, 0])
+    const [contextCoord, setContextCoord] = useState<Coord>()
     const { model, children } = props
     const {
       TooltipComponent,
@@ -74,7 +144,12 @@ const BaseLinearDisplay = observer(
         onMouseMove={event => {
           if (ref.current) {
             const rect = ref.current.getBoundingClientRect()
-            setMouseCoord([event.clientX - rect.left, event.clientY - rect.top])
+            setOffsetMouseCoord([
+              event.clientX - rect.left,
+              event.clientY - rect.top,
+            ])
+            setClientMouseCoord([event.clientX, event.clientY])
+            setClientRect(rect)
           }
         }}
         role="presentation"
@@ -85,10 +160,14 @@ const BaseLinearDisplay = observer(
           <LinearBlocks {...props} />
         )}
         {children}
+
         <TooltipComponent
           model={model}
           height={height}
-          mouseCoord={mouseCoord}
+          offsetMouseCoord={offsetMouseCoord}
+          clientMouseCoord={clientMouseCoord}
+          clientRect={clientRect}
+          mouseCoord={offsetMouseCoord}
         />
 
         <Menu

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -88,7 +88,7 @@ export const BaseLinearDisplay = types
     },
 
     get TooltipComponent(): React.FC<any> {
-      return (Tooltip as unknown) as React.FC
+      return Tooltip as unknown as React.FC
     },
 
     /**
@@ -97,8 +97,7 @@ export const BaseLinearDisplay = types
      */
     get selectedFeatureId() {
       if (isAlive(self)) {
-        const session = getSession(self)
-        const { selection } = session
+        const { selection } = getSession(self)
         // does it quack like a feature?
         if (isFeature(selection)) {
           return selection.id()
@@ -140,7 +139,12 @@ export const BaseLinearDisplay = types
         return self.blockState.get(blockKey)?.layout?.getByCoord(x, y)
       },
 
-      getFeatureByID(id: string): [number, number, number, number] | undefined {
+      getFeatureByID(blockKey: string, id: string): LayoutRecord | undefined {
+        return self.blockState.get(blockKey)?.layout?.getByID(id)
+      },
+
+      // if block key is not supplied, can look at all blocks
+      searchFeatureByID(id: string): LayoutRecord | undefined {
         let ret
         self.blockState.forEach(block => {
           const val = block?.layout?.getByID(id)
@@ -383,12 +387,8 @@ export const BaseLinearDisplay = types
             }
           }
 
-          const {
-            rpcManager,
-            renderArgs,
-            renderProps,
-            rendererType,
-          } = renderBlockData(blockState, self)
+          const { rpcManager, renderArgs, renderProps, rendererType } =
+            renderBlockData(blockState, self)
 
           return rendererType.renderInClient(rpcManager, {
             ...renderArgs,

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -3,7 +3,10 @@ import { types, getParent, isAlive, cast, Instance } from 'mobx-state-tree'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
 import { Region } from '@jbrowse/core/util/types/mst'
-import { AbstractDisplayModel } from '@jbrowse/core/util/types'
+import {
+  AbstractDisplayModel,
+  isRetryException,
+} from '@jbrowse/core/util/types'
 import React from 'react'
 
 import {
@@ -36,7 +39,7 @@ const blockState = types
     features: undefined as Map<string, Feature> | undefined,
     layout: undefined as any,
     status: '',
-    error: undefined as Error | undefined,
+    error: undefined as unknown,
     message: undefined as string | undefined,
     maxHeightReached: false,
     ReactComponent: ServerSideRenderedBlockContent,
@@ -128,7 +131,7 @@ const blockState = types
         self.renderProps = renderProps
         renderInProgress = undefined
       },
-      setError(error: Error) {
+      setError(error: Error | unknown) {
         console.error(error)
         if (renderInProgress && !renderInProgress.signal.aborted) {
           renderInProgress.abort()
@@ -143,6 +146,9 @@ const blockState = types
         self.error = error
         self.renderProps = undefined
         renderInProgress = undefined
+        if (isRetryException(error as Error)) {
+          this.reload()
+        }
       },
       reload() {
         self.renderInProgress = undefined
@@ -286,16 +292,12 @@ async function renderBlockEffect(
     return undefined
   }
 
-  const {
-    reactElement,
-    features,
-    layout,
-    maxHeightReached,
-  } = await rendererType.renderInClient(rpcManager, {
-    ...renderArgs,
-    ...renderProps,
-    signal,
-  })
+  const { reactElement, features, layout, maxHeightReached } =
+    await rendererType.renderInClient(rpcManager, {
+      ...renderArgs,
+      ...renderProps,
+      signal,
+    })
   return {
     reactElement,
     features,

package/src/LinearBasicDisplay/model.ts

@@ -17,6 +17,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       types.model({
         type: types.literal('LinearBasicDisplay'),
         trackShowLabels: types.maybe(types.boolean),
+        trackShowDescriptions: types.maybe(types.boolean),
         trackDisplayMode: types.maybe(types.string),
         trackMaxHeight: types.maybe(types.number),
         configuration: ConfigurationReference(configSchema),
@@ -34,6 +35,13 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
           : showLabels
       },
 
+      get showDescriptions() {
+        const showDescriptions = getConf(self, ['renderer', 'showLabels'])
+        return self.trackShowDescriptions !== undefined
+          ? self.trackShowDescriptions
+          : showDescriptions
+      },
+
       get maxHeight() {
         const maxHeight = getConf(self, ['renderer', 'maxHeight'])
         return self.trackMaxHeight !== undefined
@@ -54,6 +62,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
           {
             ...configBlob,
             showLabels: this.showLabels,
+            showDescriptions: this.showDescriptions,
             displayMode: this.displayMode,
             maxHeight: this.maxHeight,
           },
@@ -66,6 +75,9 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
       toggleShowLabels() {
         self.trackShowLabels = !self.showLabels
       },
+      toggleShowDescriptions() {
+        self.trackShowDescriptions = !self.showDescriptions
+      },
       setDisplayMode(val: string) {
         self.trackDisplayMode = val
       },
@@ -100,6 +112,15 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
                 self.toggleShowLabels()
               },
             },
+            {
+              label: 'Show descriptions',
+              icon: VisibilityIcon,
+              type: 'checkbox',
+              checked: self.showDescriptions,
+              onClick: () => {
+                self.toggleShowDescriptions()
+              },
+            },
             {
               label: 'Display mode',
               icon: VisibilityIcon,
@@ -118,9 +139,10 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).setDialogComponent(SetMaxHeightDlg, {
-                  model: self,
-                })
+                getSession(self).queueDialog((doneCallback: Function) => [
+                  SetMaxHeightDlg,
+                  { model: self, handleClose: doneCallback },
+                ])
               },
             },
           ]

package/src/LinearGenomeView/components/ExportSvgDialog.tsx

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import {
   Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -30,11 +31,11 @@ export default function ExportSvgDlg({
   model: LGV
   handleClose: () => void
 }) {
-  const [rasterizeLayers, setRasterizeLayers] = useState(
-    typeof OffscreenCanvas !== 'undefined',
-  )
+  // @ts-ignore
+  const offscreenCanvas = typeof OffscreenCanvas !== 'undefined'
+  const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas)
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<Error>()
+  const [error, setError] = useState<unknown>()
   const classes = useStyles()
   return (
     <Dialog open onClose={handleClose}>
@@ -53,8 +54,7 @@ export default function ExportSvgDlg({
             <Typography display="inline">Creating SVG</Typography>
           </div>
         ) : null}
-
-        {typeof OffscreenCanvas !== 'undefined' ? (
+        {offscreenCanvas ? (
           <FormControlLabel
             control={
               <Checkbox
@@ -70,7 +70,15 @@ export default function ExportSvgDlg({
             size may be large
           </Typography>
         )}
-
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
         <Button
           variant="contained"
           color="primary"
@@ -82,6 +90,7 @@ export default function ExportSvgDlg({
               await model.exportSvg({ rasterizeLayers })
               handleClose()
             } catch (e) {
+              console.error(e)
               setError(e)
             } finally {
               setLoading(false)
@@ -90,7 +99,7 @@ export default function ExportSvgDlg({
         >
           Submit
         </Button>
-      </DialogContent>
+      </DialogActions>
     </Dialog>
   )
 }