@jbrowse/plugin-linear-genome-view 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -47,6 +47,7 @@
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^3.0.0",
     "normalize-wheel": "^1.0.1",
+    "react-error-boundary": "^3.0.0",
     "react-popper": "^2.0.0"
   },
   "peerDependencies": {
@@ -55,15 +56,13 @@
     "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-error-boundary": "^3.0.0",
-    "tss-react": "^3.0.0"
+    "tss-react": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "abbc00e8feedbc58de84a7a3e735ec0224909b29"
+  "gitHead": "a85b280a8af4d1a11e81ab42913f5f6049e6e580"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -7,6 +7,7 @@ import { Menu } from '@jbrowse/core/ui'
 
 // locals
 import Tooltip from './Tooltip'
+import BlockMsg from './BlockMsg'
 import LinearBlocks from './LinearBlocks'
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel'
 
@@ -21,94 +22,95 @@ const useStyles = makeStyles()({
 })
 
 type Coord = [number, number]
-const BaseLinearDisplay = observer(
-  (props: { model: BaseLinearDisplayModel; children?: React.ReactNode }) => {
-    const { classes } = useStyles()
-    const theme = useTheme()
-    const ref = useRef<HTMLDivElement>(null)
-    const [clientRect, setClientRect] = useState<DOMRect>()
-    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,
-      DisplayMessageComponent,
-      contextMenuItems,
-      height,
-      setContextMenuFeature,
-    } = model
+const BaseLinearDisplay = observer(function (props: {
+  model: BaseLinearDisplayModel
+  children?: React.ReactNode
+}) {
+  const { classes } = useStyles()
+  const theme = useTheme()
+  const ref = useRef<HTMLDivElement>(null)
+  const [clientRect, setClientRect] = useState<DOMRect>()
+  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,
+    DisplayMessageComponent,
+    contextMenuItems,
+    height,
+    setContextMenuFeature,
+  } = model
 
-    return (
-      <div
-        ref={ref}
-        data-testid={`display-${getConf(model, 'displayId')}`}
-        className={classes.display}
-        onContextMenu={event => {
-          event.preventDefault()
-          if (contextCoord) {
-            // There's already a context menu open, so close it
-            setContextCoord(undefined)
-          } else if (ref.current) {
-            setContextCoord([event.clientX, event.clientY])
-          }
-        }}
-        onMouseMove={event => {
-          if (!ref.current) {
-            return
-          }
-          const rect = ref.current.getBoundingClientRect()
-          const { left, top } = rect
-          setOffsetMouseCoord([event.clientX - left, event.clientY - top])
-          setClientMouseCoord([event.clientX, event.clientY])
-          setClientRect(rect)
-        }}
-      >
-        {DisplayMessageComponent ? (
-          <DisplayMessageComponent model={model} />
-        ) : (
-          <LinearBlocks {...props} />
-        )}
-        {children}
+  return (
+    <div
+      ref={ref}
+      data-testid={`display-${getConf(model, 'displayId')}`}
+      className={classes.display}
+      onContextMenu={event => {
+        event.preventDefault()
+        if (contextCoord) {
+          // There's already a context menu open, so close it
+          setContextCoord(undefined)
+        } else if (ref.current) {
+          setContextCoord([event.clientX, event.clientY])
+        }
+      }}
+      onMouseMove={event => {
+        if (!ref.current) {
+          return
+        }
+        const rect = ref.current.getBoundingClientRect()
+        const { left, top } = rect
+        setOffsetMouseCoord([event.clientX - left, event.clientY - top])
+        setClientMouseCoord([event.clientX, event.clientY])
+        setClientRect(rect)
+      }}
+    >
+      {DisplayMessageComponent ? (
+        <DisplayMessageComponent model={model} />
+      ) : (
+        <LinearBlocks {...props} />
+      )}
+      {children}
 
-        <TooltipComponent
-          model={model}
-          height={height}
-          offsetMouseCoord={offsetMouseCoord}
-          clientMouseCoord={clientMouseCoord}
-          clientRect={clientRect}
-          mouseCoord={offsetMouseCoord}
-        />
+      <TooltipComponent
+        model={model}
+        height={height}
+        offsetMouseCoord={offsetMouseCoord}
+        clientMouseCoord={clientMouseCoord}
+        clientRect={clientRect}
+        mouseCoord={offsetMouseCoord}
+      />
 
-        <Menu
-          open={Boolean(contextCoord) && Boolean(contextMenuItems().length)}
-          onMenuItemClick={(_, callback) => {
-            callback()
-            setContextCoord(undefined)
-          }}
-          onClose={() => {
+      <Menu
+        open={Boolean(contextCoord) && Boolean(contextMenuItems().length)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setContextCoord(undefined)
+        }}
+        onClose={() => {
+          setContextCoord(undefined)
+          setContextMenuFeature(undefined)
+        }}
+        TransitionProps={{
+          onExit: () => {
             setContextCoord(undefined)
             setContextMenuFeature(undefined)
-          }}
-          TransitionProps={{
-            onExit: () => {
-              setContextCoord(undefined)
-              setContextMenuFeature(undefined)
-            },
-          }}
-          anchorReference="anchorPosition"
-          anchorPosition={
-            contextCoord
-              ? { top: contextCoord[1], left: contextCoord[0] }
-              : undefined
-          }
-          style={{ zIndex: theme.zIndex.tooltip }}
-          menuItems={contextMenuItems()}
-        />
-      </div>
-    )
-  },
-)
+          },
+        }}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextCoord
+            ? { top: contextCoord[1], left: contextCoord[0] }
+            : undefined
+        }
+        style={{ zIndex: theme.zIndex.tooltip }}
+        menuItems={contextMenuItems()}
+      />
+    </div>
+  )
+})
 
 export default BaseLinearDisplay
-export { Tooltip }
+export { Tooltip, BlockMsg }

package/src/BaseLinearDisplay/components/Block.tsx

@@ -28,17 +28,21 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const ContentBlock = observer(
-  ({ block, children }: { block: BaseBlock; children: React.ReactNode }) => {
-    const { classes } = useStyles()
-    const { widthPx } = block
-    return (
-      <div style={{ width: widthPx }} className={classes.contentBlock}>
-        {children}
-      </div>
-    )
-  },
-)
+const ContentBlock = observer(function ({
+  block,
+  children,
+}: {
+  block: BaseBlock
+  children: React.ReactNode
+}) {
+  const { classes } = useStyles()
+  const { widthPx } = block
+  return (
+    <div style={{ width: widthPx }} className={classes.contentBlock}>
+      {children}
+    </div>
+  )
+})
 
 function ElidedBlock({ width }: { width: number }) {
   const { classes } = useStyles()

package/src/BaseLinearDisplay/components/BlockMsg.tsx

@@ -29,14 +29,14 @@ export default function BlockMsg({
     </Button>
   ) : null
   return (
-    <Tooltip title={message}>
-      <Alert
-        severity={severity}
-        action={button}
-        classes={{ message: classes.ellipses }}
-      >
-        {message}
-      </Alert>
-    </Tooltip>
+    <Alert
+      severity={severity}
+      action={button}
+      classes={{ message: classes.ellipses }}
+    >
+      <Tooltip title={message}>
+        <div>{message}</div>
+      </Tooltip>
+    </Alert>
   )
 }

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -16,6 +16,8 @@ import {
 } from './Block'
 import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
+type LGV = LinearGenomeViewModel
+
 const useStyles = makeStyles()({
   linearBlocks: {
     whiteSpace: 'nowrap',
@@ -37,70 +39,72 @@ const useStyles = makeStyles()({
     boxSizing: 'border-box',
   },
 })
-const RenderedBlocks = observer(
-  ({ model }: { model: BaseLinearDisplayModel }) => {
-    const { classes } = useStyles()
-    const { blockDefinitions, blockState } = model
-    return (
-      <>
-        {blockDefinitions.map(block => {
-          if (block instanceof ContentBlock) {
-            const state = blockState.get(block.key)
 
-            return (
-              <ContentBlockComponent
-                block={block}
-                key={`${model.id}-${block.key}`}
-              >
-                {state && state.ReactComponent ? (
-                  <state.ReactComponent model={state} />
-                ) : null}
-                {state && state.maxHeightReached ? (
-                  <div
-                    className={classes.heightOverflowed}
-                    style={{
-                      top: state.layout.getTotalHeight() - 16,
-                      pointerEvents: 'none',
-                      height: 16,
-                    }}
-                  >
-                    Max height reached
-                  </div>
-                ) : null}
-              </ContentBlockComponent>
-            )
-          }
-          if (block instanceof ElidedBlock) {
-            return (
-              <ElidedBlockComponent
-                key={`${model.id}-${block.key}`}
-                width={block.widthPx}
-              />
-            )
-          }
-          if (block instanceof InterRegionPaddingBlock) {
-            return (
-              <InterRegionPaddingBlockComponent
-                key={block.key}
-                width={block.widthPx}
-                style={{ background: 'none' }}
-                boundary={block.variant === 'boundary'}
-              />
-            )
-          }
-          throw new Error(`invalid block type ${typeof block}`)
-        })}
-      </>
-    )
-  },
-)
+const RenderedBlocks = observer(function ({
+  model,
+}: {
+  model: BaseLinearDisplayModel
+}) {
+  const { classes } = useStyles()
+  const { blockDefinitions, blockState } = model
+  return (
+    <>
+      {blockDefinitions.map(block => {
+        if (block instanceof ContentBlock) {
+          const state = blockState.get(block.key)
+
+          return (
+            <ContentBlockComponent
+              block={block}
+              key={`${model.id}-${block.key}`}
+            >
+              {state && state.ReactComponent ? (
+                <state.ReactComponent model={state} />
+              ) : null}
+              {state && state.maxHeightReached ? (
+                <div
+                  className={classes.heightOverflowed}
+                  style={{
+                    top: state.layout.getTotalHeight() - 16,
+                    pointerEvents: 'none',
+                    height: 16,
+                  }}
+                >
+                  Max height reached
+                </div>
+              ) : null}
+            </ContentBlockComponent>
+          )
+        }
+        if (block instanceof ElidedBlock) {
+          return (
+            <ElidedBlockComponent
+              key={`${model.id}-${block.key}`}
+              width={block.widthPx}
+            />
+          )
+        }
+        if (block instanceof InterRegionPaddingBlock) {
+          return (
+            <InterRegionPaddingBlockComponent
+              key={block.key}
+              width={block.widthPx}
+              style={{ background: 'none' }}
+              boundary={block.variant === 'boundary'}
+            />
+          )
+        }
+        throw new Error(`invalid block type ${typeof block}`)
+      })}
+    </>
+  )
+})
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   const { classes } = useStyles()
   const { blockDefinitions } = model
-  const viewModel = getContainingView(model) as LinearGenomeViewModel
+  const viewModel = getContainingView(model) as LGV
   return (
     <div
-      data-testid="Blockset"
       className={classes.linearBlocks}
       style={{
         left: blockDefinitions.offsetPx - viewModel.offsetPx,

package/src/BaseLinearDisplay/index.ts

@@ -1,4 +1,4 @@
-export { baseLinearDisplayConfigSchema } from './models/baseLinearDisplayConfigSchema'
+export { default as baseLinearDisplayConfigSchema } from './models/configSchema'
 export { BaseLinearDisplay } from './models/BaseLinearDisplayModel'
 export type { BlockModel } from './models/serverSideRenderedBlock'
 export type {
@@ -8,4 +8,5 @@ export type {
 export {
   default as BaseLinearDisplayComponent,
   Tooltip,
+  BlockMsg,
 } from './components/BaseLinearDisplay'

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -11,12 +11,13 @@ import {
   getViewParams,
   isSelectionContainer,
   isSessionModelWithWidgets,
+  isFeature,
+  Feature,
 } from '@jbrowse/core/util'
 import { Stats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
 import { Region } from '@jbrowse/core/util/types'
 import CompositeMap from '@jbrowse/core/util/compositeMap'
-import { Feature, isFeature } from '@jbrowse/core/util/simpleFeature'
 import {
   getParentRenderProps,
   getRpcSessionId,
@@ -28,9 +29,9 @@ import { addDisposer, isAlive, types, Instance } from 'mobx-state-tree'
 import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 
 // locals
-import TooLargeMessage from './TooLargeMessage'
 import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
+import TooLargeMessage from '../components/TooLargeMessage'
 import BlockState, { renderBlockData } from './serverSideRenderedBlock'
 
 type LGV = LinearGenomeViewModel
@@ -104,10 +105,10 @@ function stateModelFactory() {
     )
     .volatile(() => ({
       currBpPerPx: 0,
+      scrollTop: 0,
       message: '',
       featureIdUnderMouse: undefined as undefined | string,
       contextMenuFeature: undefined as undefined | Feature,
-      scrollTop: 0,
       estimatedRegionStatsP: undefined as undefined | Promise<Stats>,
       estimatedRegionStats: undefined as undefined | Stats,
     }))

package/src/BaseLinearDisplay/models/{baseLinearDisplayConfigSchema.ts → configSchema.ts}

@@ -2,13 +2,13 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
 
 /**
  * #config BaseLinearDisplay
- * BaseLinearDisplay is a "base" config that is extended by classes like
- * "LinearBasicDisplay" (used for feature tracks, etc) and "LinearBareDisplay"
+ * `BaseLinearDisplay` is a "base" config that is extended by classes like
+ * `LinearBasicDisplay` (used for feature tracks, etc) and `LinearBareDisplay`
  * (more stripped down than even the basic display, not commonly used)
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
-export const baseLinearDisplayConfigSchema = ConfigurationSchema(
+const baseLinearDisplayConfigSchema = ConfigurationSchema(
   'BaseLinearDisplay',
   {
     /**
@@ -37,3 +37,5 @@ export const baseLinearDisplayConfigSchema = ConfigurationSchema(
     explicitIdentifier: 'displayId',
   },
 )
+
+export default baseLinearDisplayConfigSchema

package/src/BaseLinearDisplay/models/util.ts

@@ -0,0 +1,24 @@
+export interface RenderProps {
+  rendererType: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  renderArgs: { [key: string]: any } // eslint-disable-line @typescript-eslint/no-explicit-any
+  renderProps: { [key: string]: any } // eslint-disable-line @typescript-eslint/no-explicit-any
+  displayError: unknown
+  rpcManager: { call: Function }
+  cannotBeRenderedReason: string
+}
+
+export interface ErrorProps {
+  displayError: string
+}
+
+export function getDisplayStr(totalBytes: number) {
+  let displayBp
+  if (Math.floor(totalBytes / 1000000) > 0) {
+    displayBp = `${parseFloat((totalBytes / 1000000).toPrecision(3))} Mb`
+  } else if (Math.floor(totalBytes / 1000) > 0) {
+    displayBp = `${parseFloat((totalBytes / 1000).toPrecision(3))} Kb`
+  } else {
+    displayBp = `${Math.floor(totalBytes)} bytes`
+  }
+  return displayBp
+}

package/src/FeatureTrack/index.ts

@@ -5,17 +5,14 @@ import {
 import PluginManager from '@jbrowse/core/PluginManager'
 import configSchemaF from './configSchema'
 
-export default (pluginManager: PluginManager) => {
-  pluginManager.addTrackType(() => {
-    const configSchema = configSchemaF(pluginManager)
+export default (pm: PluginManager) => {
+  pm.addTrackType(() => {
+    const configSchema = configSchemaF(pm)
     return new TrackType({
       name: 'FeatureTrack',
+      displayName: 'Feature track',
       configSchema,
-      stateModel: createBaseTrackModel(
-        pluginManager,
-        'FeatureTrack',
-        configSchema,
-      ),
+      stateModel: createBaseTrackModel(pm, 'FeatureTrack', configSchema),
     })
   })
 }

package/src/LinearBareDisplay/index.ts

@@ -1,8 +1,10 @@
-import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
 import PluginManager from '@jbrowse/core/PluginManager'
-import { BaseLinearDisplayComponent } from '../BaseLinearDisplay'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+
+// locals
 import { configSchemaFactory } from './configSchema'
 import { stateModelFactory } from './model'
+import { BaseLinearDisplayComponent } from '../BaseLinearDisplay/'
 
 export default (pluginManager: PluginManager) => {
   pluginManager.addDisplayType(() => {

package/src/LinearBasicDisplay/index.ts

@@ -11,6 +11,7 @@ export default (pluginManager: PluginManager) => {
     const config = configSchema(pluginManager)
     return new DisplayType({
       name: 'LinearBasicDisplay',
+      displayName: 'Basic deature display',
       configSchema: config,
       stateModel: modelFactory(config),
       trackType: 'FeatureTrack',

package/src/LinearGenomeView/README.md

@@ -1,6 +1,7 @@
 # Key LinearGenomeView state fields
 
-- displayedRegions - array of { refName, start, end }, tiled in the display left to right
+- displayedRegions - array of { refName, start, end }, tiled in the display left
+  to right
 - offsetPx - the offset in px of the left edge of the view
 - bpPerPx - ratio of basepairs to screen pixels
 - width - width in px of the view

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -82,6 +82,8 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     try {
       if (option?.getDisplayString() === input && option.hasLocation()) {
         await navToOption(option)
+      } else if (option?.results?.length) {
+        model.setSearchResults(option.results, option.getLabel())
       } else {
         const [ref, rest] = splitLast(input, ':')
         const allRefs = assembly?.allRefNamesWithLowerCase || []
@@ -144,6 +146,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
                     setSelectedAsm(val)
                     setValue('')
                   }}
+                  localStorageKey="lgv"
                   session={session}
                   selected={selectedAsm}
                 />