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

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/serverSideRenderedBlock.ts

@@ -173,7 +173,7 @@ const blockState = types
         const { rpcManager } = getSession(self)
         const { rendererType } = display
         const { renderArgs } = renderBlockData(cast(self))
-        // renderArgs can be undefined if an error occured in this block
+        // renderArgs can be undefined if an error occurred in this block
         if (renderArgs) {
           rendererType
             .freeResourcesInClient(

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/LaunchLinearGenomeView/index.ts

@@ -0,0 +1,66 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel, when } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '../LinearGenomeView'
+
+type LGV = LinearGenomeViewModel
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-LinearGenomeView',
+    // @ts-ignore
+    async ({
+      session,
+      assembly,
+      loc,
+      tracks = [],
+    }: {
+      session: AbstractSessionModel
+      assembly?: string
+      loc: string
+      tracks?: string[]
+    }) => {
+      try {
+        const { assemblyManager } = session
+        const view = session.addView('LinearGenomeView', {}) as LGV
+
+        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`,
+          )
+        }
+
+        await view.navToLocString(loc, assembly)
+
+        const idsNotFound = [] as string[]
+        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
+      }
+    },
+  )
+}

package/src/LinearBareDisplay/index.ts

@@ -1,2 +1,23 @@
-export { configSchemaFactory } from './configSchema'
-export { stateModelFactory } from './model'
+import PluginManager from '@jbrowse/core/PluginManager'
+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(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearBareDisplay',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'BasicTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}
+
+export { configSchemaFactory, stateModelFactory }

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -1,29 +1,20 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
+import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  IconButton,
   Typography,
   TextField,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
-import CloseIcon from '@mui/icons-material/Close'
-
 const useStyles = makeStyles()(theme => ({
   root: {
     width: 500,
   },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
+
   field: {
     margin: theme.spacing(2),
   },
@@ -44,23 +35,7 @@ function SetMaxHeightDlg({
   const [max, setMax] = useState(`${maxHeight}`)
 
   return (
-    <Dialog
-      open
-      onClose={handleClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-    >
-      <DialogTitle id="alert-dialog-title">
-        Filter options
-        <IconButton
-          aria-label="close"
-          className={classes.closeButton}
-          onClick={handleClose}
-          size="large"
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Set max height">
       <DialogContent className={classes.root}>
         <Typography>
           Set max height for the track. For example, you can increase this if

package/src/LinearBasicDisplay/index.ts

@@ -1,2 +1,24 @@
-export { default as modelFactory } from './model'
-export { default as configSchema } from './configSchema'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import { BaseLinearDisplayComponent } from '../BaseLinearDisplay'
+
+// locals
+import configSchema from './configSchema'
+import modelFactory from './model'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const config = configSchema(pluginManager)
+    return new DisplayType({
+      name: 'LinearBasicDisplay',
+      displayName: 'Basic deature display',
+      configSchema: config,
+      stateModel: modelFactory(config),
+      trackType: 'FeatureTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}
+
+export { modelFactory, configSchema }

package/src/LinearBasicDisplay/model.ts

@@ -18,7 +18,8 @@ const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
 
 /**
  * #stateModel LinearBasicDisplay
- * used by `FeatureTrack`, has simple settings like "show/hide feature labels", etc.
+ * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
+ * etc.
  */
 function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
   return types

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/ExportSvgDialog.tsx

@@ -1,31 +1,17 @@
 import React, { useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
 import {
   Button,
   Checkbox,
   CircularProgress,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
   FormControlLabel,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
-import { ErrorMessage } from '@jbrowse/core/ui'
-import CloseIcon from '@mui/icons-material/Close'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import { ExportSvgOptions } from '..'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
 function LoadingMessage() {
   return (
     <div>
@@ -48,15 +34,8 @@ export default function ExportSvgDlg({
   const [loading, setLoading] = useState(false)
   const [filename, setFilename] = useState('jbrowse.svg')
   const [error, setError] = useState<unknown>()
-  const { classes } = useStyles()
   return (
-    <Dialog open onClose={handleClose}>
-      <DialogTitle>
-        Export SVG
-        <IconButton className={classes.closeButton} onClick={handleClose}>
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} title="Export SVG">
       <DialogContent>
         {error ? (
           <ErrorMessage error={error} />

package/src/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -4,12 +4,8 @@ import {
   Button,
   CircularProgress,
   Container,
-  Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
   TextField,
   Typography,
 } from '@mui/material'
@@ -17,31 +13,25 @@ import { observer } from 'mobx-react'
 import { saveAs } from 'file-saver'
 import { getConf } from '@jbrowse/core/configuration'
 import copy from 'copy-to-clipboard'
+import { Dialog } from '@jbrowse/core/ui'
 import { getSession, Feature, Region } from '@jbrowse/core/util'
 import { formatSeqFasta } from '@jbrowse/core/util/formatFastaStrings'
 
 // icons
 import { ContentCopy as ContentCopyIcon } from '@jbrowse/core/ui/Icons'
-import CloseIcon from '@mui/icons-material/Close'
 import GetAppIcon from '@mui/icons-material/GetApp'
 
 // locals
 import { LinearGenomeViewModel } from '..'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
+const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
   textAreaFont: {
     fontFamily: 'Courier New',
   },
-}))
+})
 
 type LGV = LinearGenomeViewModel
 
@@ -106,6 +96,7 @@ function SequenceDialog({
     let active = true
     const controller = new AbortController()
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         if (regionsSelected.length > 0) {
@@ -157,24 +148,15 @@ function SequenceDialog({
   const sequenceTooLarge = sequence ? sequence.length > 1_000_000 : false
 
   return (
-    <Dialog maxWidth="xl" open onClose={handleClose}>
-      <DialogTitle>
-        Reference sequence
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-              model.setOffsets(undefined, undefined)
-            }}
-            size="large"
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
-
+    <Dialog
+      maxWidth="xl"
+      open
+      onClose={() => {
+        handleClose()
+        model.setOffsets(undefined, undefined)
+      }}
+      title="Reference sequence"
+    >
       <DialogContent>
         {error ? <Typography color="error">{`${error}`}</Typography> : null}
         {loading && !error ? (

package/src/LinearGenomeView/components/Header.tsx

@@ -16,7 +16,7 @@ import {
   SPACING,
   HEADER_BAR_HEIGHT,
 } from '..'
-import OverviewScaleBar from './OverviewScaleBar'
+import OverviewScalebar from './OverviewScalebar'
 import ZoomControls from './ZoomControls'
 import SearchBox from './SearchBox'
 
@@ -123,9 +123,9 @@ const LinearGenomeViewHeader = observer(({ model }: { model: LGV }) => {
     model.hideHeaderOverview ? (
       <Controls model={model} />
     ) : (
-      <OverviewScaleBar model={model}>
+      <OverviewScalebar model={model}>
         <Controls model={model} />
-      </OverviewScaleBar>
+      </OverviewScalebar>
     )
   ) : null
 })