@jbrowse/plugin-linear-genome-view 1.7.9 → 2.0.0

package/esm/index.js

@@ -0,0 +1,127 @@
+import { lazy } from 'react';
+import { when } from 'mobx';
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { createBaseTrackConfig, createBaseTrackModel, } from '@jbrowse/core/pluggableElementTypes/models';
+import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import Plugin from '@jbrowse/core/Plugin';
+import { isAbstractMenuManager } from '@jbrowse/core/util';
+import LineStyleIcon from '@mui/icons-material/LineStyle';
+import { BaseLinearDisplay, BaseLinearDisplayComponent, baseLinearDisplayConfigSchema, } from './BaseLinearDisplay';
+import { configSchemaFactory as linearBareDisplayConfigSchemaFactory, stateModelFactory as LinearBareDisplayStateModelFactory, } from './LinearBareDisplay';
+import { stateModelFactory as linearGenomeViewStateModelFactory, renderToSvg, RefNameAutocomplete, SearchBox, } from './LinearGenomeView';
+import { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';
+export default class LinearGenomeViewPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'LinearGenomeViewPlugin';
+        this.exports = {
+            BaseLinearDisplayComponent,
+            BaseLinearDisplay,
+            baseLinearDisplayConfigSchema,
+        };
+    }
+    install(pluginManager) {
+        pluginManager.addTrackType(() => {
+            const configSchema = ConfigurationSchema('FeatureTrack', {}, {
+                baseConfiguration: createBaseTrackConfig(pluginManager),
+                explicitIdentifier: 'trackId',
+            });
+            return new TrackType({
+                name: 'FeatureTrack',
+                configSchema,
+                stateModel: createBaseTrackModel(pluginManager, 'FeatureTrack', configSchema),
+            });
+        });
+        pluginManager.addTrackType(() => {
+            const configSchema = ConfigurationSchema('BasicTrack', {}, {
+                baseConfiguration: createBaseTrackConfig(pluginManager),
+                explicitIdentifier: 'trackId',
+            });
+            return new TrackType({
+                name: 'BasicTrack',
+                configSchema,
+                stateModel: createBaseTrackModel(pluginManager, 'BasicTrack', configSchema),
+            });
+        });
+        pluginManager.addDisplayType(() => {
+            const configSchema = linearBareDisplayConfigSchemaFactory(pluginManager);
+            return new DisplayType({
+                name: 'LinearBareDisplay',
+                configSchema,
+                stateModel: LinearBareDisplayStateModelFactory(configSchema),
+                trackType: 'BasicTrack',
+                viewType: 'LinearGenomeView',
+                ReactComponent: BaseLinearDisplayComponent,
+            });
+        });
+        pluginManager.addDisplayType(() => {
+            const configSchema = linearBasicDisplayConfigSchemaFactory(pluginManager);
+            return new DisplayType({
+                name: 'LinearBasicDisplay',
+                configSchema,
+                stateModel: linearBasicDisplayModelFactory(configSchema),
+                trackType: 'FeatureTrack',
+                viewType: 'LinearGenomeView',
+                ReactComponent: BaseLinearDisplayComponent,
+            });
+        });
+        pluginManager.addViewType(() => new ViewType({
+            name: 'LinearGenomeView',
+            stateModel: linearGenomeViewStateModelFactory(pluginManager),
+            ReactComponent: lazy(() => import('./LinearGenomeView/components/LinearGenomeView')),
+        }));
+        pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
+        // @ts-ignore
+        async ({ session, assembly, loc, tracks = [], }) => {
+            try {
+                const { assemblyManager } = session;
+                const view = session.addView('LinearGenomeView', {});
+                await when(() => !!view.volatileWidth);
+                if (!assembly) {
+                    throw new Error('No assembly provided when launching linear genome view');
+                }
+                const asm = await assemblyManager.waitForAssembly(assembly);
+                if (!asm) {
+                    throw new Error(`Assembly "${assembly}" not found when launching linear genome view`);
+                }
+                view.navToLocString(loc, assembly);
+                const idsNotFound = [];
+                tracks.forEach(track => {
+                    try {
+                        view.showTrack(track);
+                    }
+                    catch (e) {
+                        if (`${e}`.match('Could not resolve identifier')) {
+                            idsNotFound.push(track);
+                        }
+                        else {
+                            throw e;
+                        }
+                    }
+                });
+                if (idsNotFound.length) {
+                    throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
+                }
+            }
+            catch (e) {
+                session.notify(`${e}`, 'error');
+                throw e;
+            }
+        });
+    }
+    configure(pluginManager) {
+        if (isAbstractMenuManager(pluginManager.rootModel)) {
+            pluginManager.rootModel.appendToSubMenu(['Add'], {
+                label: 'Linear genome view',
+                icon: LineStyleIcon,
+                onClick: (session) => {
+                    session.addView('LinearGenomeView', {});
+                },
+            });
+        }
+    }
+}
+export { baseLinearDisplayConfigSchema, linearBareDisplayConfigSchemaFactory, linearBasicDisplayConfigSchemaFactory, linearBasicDisplayModelFactory, renderToSvg, BaseLinearDisplayComponent, BaseLinearDisplay, RefNameAutocomplete, SearchBox, };
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.7.9",
+  "version": "2.0.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -16,46 +16,54 @@
   },
   "author": "JBrowse Team",
   "distMain": "dist/index.js",
+  "distModule": "esm/index.js",
   "srcMain": "src/index.ts",
+  "srcModule": "src/index.ts",
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "prebuild": "npm run clean",
+    "build": "npm-run-all build:*",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo",
     "test": "cd ../..; jest plugins/linear-genome-view",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "useSrc": "node ../../scripts/useSrc.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.0.1",
     "@popperjs/core": "^2.11.0",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
+    "material-ui-popup-state": "^3.0.0",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/lab": "^4.0.0-alpha.45",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
+  "module": "esm/index.js",
+  "gitHead": "ecc7f5d47351a5ea04bc00f3a6eb6dfb607342e6"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -1,19 +1,16 @@
-import React, { useState, useRef, useMemo } from 'react'
+import React, { useState, useRef } from 'react'
 import { observer } from 'mobx-react'
-import { Portal, alpha, useTheme, makeStyles } from '@material-ui/core'
+import { useTheme } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { getConf } from '@jbrowse/core/configuration'
 import { Menu } from '@jbrowse/core/ui'
-import { usePopper } from 'react-popper'
 
 // locals
+import Tooltip from './Tooltip'
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5
-}
-
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()({
   display: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -21,93 +18,12 @@ const useStyles = makeStyles(theme => ({
     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(12),
-    lineHeight: `${round(14 / 10)}em`,
-    maxWidth: 300,
-    wordWrap: 'break-word',
-  },
-}))
-
-const TooltipContents = React.forwardRef<
-  HTMLDivElement,
-  { message: React.ReactNode | string }
->(({ message }: { message: React.ReactNode | string }, ref) => {
-  return <div ref={ref}>{message}</div>
 })
 
-const Tooltip = observer(
-  ({
-    model,
-    clientMouseCoord,
-  }: {
-    model: BaseLinearDisplayModel
-    clientMouseCoord: Coord
-  }) => {
-    const classes = useStyles()
-    const { featureUnderMouse } = model
-    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 featureUnderMouse && contents ? (
-      <Portal>
-        <div
-          ref={setPopperElt}
-          className={classes.tooltip}
-          // zIndex needed to go over widget drawer
-          style={{ ...styles.popper, zIndex: 100000 }}
-          {...attributes.popper}
-        >
-          <TooltipContents
-            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
-            message={contents}
-          />
-        </div>
-      </Portal>
-    ) : null
-  },
-)
-
 type Coord = [number, number]
 const BaseLinearDisplay = observer(
   (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const theme = useTheme()
     const ref = useRef<HTMLDivElement>(null)
     const [clientRect, setClientRect] = useState<DOMRect>()

package/src/BaseLinearDisplay/components/Block.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   contentBlock: {
     position: 'relative',
     minHeight: '100%',
@@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({
 
 const ContentBlock = observer(
   ({ block, children }: { block: BaseBlock; children: React.ReactNode }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { widthPx } = block
     return (
       <div style={{ width: widthPx }} className={classes.contentBlock}>
@@ -41,7 +41,7 @@ const ContentBlock = observer(
 )
 
 function ElidedBlock({ width }: { width: number }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return <div className={classes.elidedBlock} style={{ width }} />
 }
 
@@ -54,7 +54,7 @@ function InterRegionPaddingBlock({
   width: number
   style?: React.CSSProperties
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div
       style={{

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import {
@@ -16,7 +16,7 @@ import {
 } from './Block'
 import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   linearBlocks: {
     whiteSpace: 'nowrap',
     textAlign: 'left',
@@ -39,7 +39,7 @@ const useStyles = makeStyles({
 })
 const RenderedBlocks = observer(
   ({ model }: { model: BaseLinearDisplayModel }) => {
-    const classes = useStyles()
+    const { classes } = useStyles()
     const { blockDefinitions, blockState } = model
     return (
       <>
@@ -95,7 +95,7 @@ const RenderedBlocks = observer(
   },
 )
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { blockDefinitions } = model
   const viewModel = getContainingView(model) as LinearGenomeViewModel
   return (

package/src/BaseLinearDisplay/components/ServerSideRenderedBlockContent.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
+import { Typography, Button } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getParent } from 'mobx-state-tree'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-import Button from '@material-ui/core/Button'
-import RefreshIcon from '@material-ui/icons/Refresh'
+import RefreshIcon from '@mui/icons-material/Refresh'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   loading: {
     paddingLeft: '0.6em',
     backgroundColor: theme.palette.action.disabledBackground,
@@ -73,7 +72,7 @@ function Repeater({ children }: { children: React.ReactNode }) {
 const LoadingMessage = observer(({ model }: { model: any }) => {
   // only show the loading message after 300ms to prevent excessive flickering
   const [shown, setShown] = useState(false)
-  const classes = useStyles()
+  const { classes } = useStyles()
   useEffect(() => {
     let killed = false
     const timeout = setTimeout(() => {
@@ -108,7 +107,7 @@ function BlockMessage({
 }: {
   messageContent: string | React.ReactNode
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return React.isValidElement(messageContent) ? (
     <div className={classes.blockReactNodeMessage}>{messageContent}</div>
@@ -128,7 +127,7 @@ function BlockError({
   reload: () => void
   displayHeight: number
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   return (
     <div className={classes.blockError} style={{ height: displayHeight }}>
       {reload ? (

package/src/BaseLinearDisplay/components/Tooltip.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useMemo } from 'react'
+import { getConf } from '@jbrowse/core/configuration'
+import { SanitizedHTML } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+import { Portal, alpha } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { usePopper } from 'react-popper'
+
+// 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',
+  },
+}))
+
+const TooltipContents = React.forwardRef<
+  HTMLDivElement,
+  { message: React.ReactNode | string }
+>(({ message }: { message: React.ReactNode | string }, ref) => {
+  return (
+    <div ref={ref}>
+      {React.isValidElement(message) ? (
+        message
+      ) : message ? (
+        <SanitizedHTML html={String(message)} />
+      ) : null}
+    </div>
+  )
+})
+
+type Coord = [number, number]
+const Tooltip = observer(
+  ({
+    model,
+    clientMouseCoord,
+  }: {
+    model: BaseLinearDisplayModel
+    clientMouseCoord: Coord
+  }) => {
+    const { classes } = useStyles()
+    const { featureUnderMouse } = model
+    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 featureUnderMouse && contents ? (
+      <Portal>
+        <div
+          ref={setPopperElt}
+          className={classes.tooltip}
+          // zIndex needed to go over widget drawer
+          style={{ ...styles.popper, zIndex: 100000 }}
+          {...attributes.popper}
+        >
+          <TooltipContents
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
+            message={contents}
+          />
+        </div>
+      </Portal>
+    ) : null
+  },
+)
+
+export default Tooltip

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react'
-import { Button, Typography } from '@material-ui/core'
+import { Button, Typography } from '@mui/material'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
 import {
   isAbortException,
   getContainingView,
+  getContainingTrack,
   getSession,
   getViewParams,
   isSelectionContainer,
@@ -24,7 +25,7 @@ import {
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
 // icons
-import MenuOpenIcon from '@material-ui/icons/MenuOpen'
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
@@ -333,8 +334,13 @@ export const BaseLinearDisplay = types
         const featureWidget = session.addWidget(
           'BaseFeatureWidget',
           'baseFeature',
-          { featureData: feature.toJSON(), view: getContainingView(self) },
+          {
+            view: getContainingView(self),
+            track: getContainingTrack(self),
+            featureData: feature.toJSON(),
+          },
         )
+
         session.showWidget(featureWidget)
       }
       if (isSelectionContainer(session)) {
@@ -546,12 +552,12 @@ export const BaseLinearDisplay = types
     renderProps() {
       const view = getContainingView(self) as LGV
       return {
-        ...getParentRenderProps(self),
+        ...(getParentRenderProps(self) as any),
         notReady:
           self.currBpPerPx !== view.bpPerPx || !self.estimatedRegionStats,
         rpcDriverName: self.rpcDriverName,
         displayModel: self,
-        onFeatureClick(_: unknown, featureId: string | undefined) {
+        onFeatureClick(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -566,7 +572,7 @@ export const BaseLinearDisplay = types
           self.clearFeatureSelection()
         },
         // similar to click but opens a menu with further options
-        onFeatureContextMenu(_: unknown, featureId: string | undefined) {
+        onFeatureContextMenu(_: unknown, featureId?: string) {
           const f = featureId || self.featureIdUnderMouse
           if (!f) {
             self.clearFeatureSelection()
@@ -576,7 +582,7 @@ export const BaseLinearDisplay = types
           }
         },
 
-        onMouseMove(_: unknown, featureId: string | undefined) {
+        onMouseMove(_: unknown, featureId?: string) {
           self.setFeatureIdUnderMouse(featureId)
         },
 
@@ -673,7 +679,9 @@ export const BaseLinearDisplay = types
     },
   }))
   .postProcessSnapshot(self => {
-    const { blockState, ...rest } = self
+    // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+    const r = self as Omit<typeof self, symbol>
+    const { blockState, ...rest } = r
     return rest
   })
 

package/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -163,7 +163,7 @@ const blockState = types
         self.maxHeightReached = false
         self.ReactComponent = ServerSideRenderedBlockContent
         self.renderProps = undefined
-        getParent(self, 2).reload()
+        getParent<any>(self, 2).reload()
       },
       beforeDestroy() {
         if (renderInProgress && !renderInProgress.signal.aborted) {