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

package/src/BasicTrack/index.ts

@@ -5,18 +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: 'BasicTrack',
       configSchema,
-      stateModel: createBaseTrackModel(
-        pluginManager,
-        'BasicTrack',
-        configSchema,
-      ),
+      stateModel: createBaseTrackModel(pm, 'BasicTrack', configSchema),
     })
   })
 }

package/src/LinearGenomeView/components/ImportForm.tsx

@@ -11,6 +11,8 @@ import {
 } from '@mui/material'
 import { ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
+
+// icons
 import CloseIcon from '@mui/icons-material/Close'
 
 // locals
@@ -39,7 +41,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   const { assemblyNames, assemblyManager, textSearchManager } = session
   const { rankSearchResults, isSearchDialogDisplayed, error } = model
   const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0])
-  const [importError, setImportError] = useState(error)
   const [option, setOption] = useState<BaseResult>()
 
   const searchScope = model.searchScope(selectedAsm)
@@ -49,15 +50,17 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
     ? assembly?.error
     : 'No configured assemblies'
   const regions = assembly?.regions || []
-  const err = assemblyError || importError
+  const displayError = assemblyError || error
   const [value, setValue] = useState('')
   const r0 = regions[0]?.refName
 
   // useEffect resets to an "initial state" of displaying first region from assembly
-  // after assembly change
+  // after assembly change. needs to react to selectedAsm as well as r0 because changing
+  // assembly will run setValue('') and then r0 may not change if assembly names are the
+  // same across assemblies, but it still needs to be reset
   useEffect(() => {
     setValue(r0)
-  }, [r0])
+  }, [r0, selectedAsm])
 
   function navToOption(option: BaseResult) {
     const location = option.getLocation()
@@ -116,7 +119,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
   // having this wrapped in a form allows intuitive use of enter key to submit
   return (
     <div className={classes.container}>
-      {err ? <ErrorMessage error={err} /> : null}
+      {displayError ? <ErrorMessage error={displayError} /> : null}
       <Container className={classes.importFormContainer}>
         <form
           onSubmit={event => {
@@ -137,7 +140,6 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
               <FormControl>
                 <AssemblySelector
                   onChange={val => {
-                    setImportError('')
                     setSelectedAsm(val)
                     setValue('')
                   }}
@@ -148,7 +150,7 @@ const ImportForm = observer(({ model }: { model: LGV }) => {
             </Grid>
             <Grid item>
               {selectedAsm ? (
-                err ? (
+                assemblyError ? (
                   <CloseIcon style={{ color: 'red' }} />
                 ) : value ? (
                   <FormControl>

package/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import { ErrorBoundary } from 'react-error-boundary'
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-import { LoadingEllipses, ErrorMessage } from '@jbrowse/core/ui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
 // locals
@@ -76,12 +75,7 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           </Paper>
         ) : (
           tracks.map(track => (
-            <ErrorBoundary
-              key={track.id}
-              FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-            >
-              <TrackContainer model={model} track={track} />
-            </ErrorBoundary>
+            <TrackContainer key={track.id} model={model} track={track} />
           ))
         )}
       </TracksContainer>

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -5,7 +5,8 @@ import { observer } from 'mobx-react'
 import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
-import { ResizeHandle } from '@jbrowse/core/ui'
+import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui'
+import { ErrorBoundary } from 'react-error-boundary'
 import { useDebouncedCallback } from '@jbrowse/core/util'
 
 // locals
@@ -92,6 +93,7 @@ function TrackContainer({
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
+  const minimized = track.minimized
   const debouncedOnDragEnter = useDebouncedCallback(() => {
     if (isAlive(display) && dimmed) {
       moveTrack(draggingTrackId, track.id)
@@ -109,36 +111,45 @@ function TrackContainer({
   return (
     <Paper className={classes.root} variant="outlined">
       <TrackContainerLabel model={track} view={model} />
-      <div
-        className={classes.trackRenderingContainer}
-        style={{ height }}
-        onScroll={event => display.setScrollTop(event.currentTarget.scrollTop)}
-        onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
+      <ErrorBoundary
+        key={track.id}
+        FallbackComponent={({ error }) => <ErrorMessage error={error} />}
       >
         <div
-          ref={ref}
-          className={classes.renderingComponentContainer}
-          style={{ transform: `scaleX(${model.scaleFactor})` }}
+          className={classes.trackRenderingContainer}
+          style={{ height: minimized ? 20 : height }}
+          onScroll={evt => display.setScrollTop(evt.currentTarget.scrollTop)}
+          onDragEnter={debouncedOnDragEnter}
+          data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         >
-          <RenderingComponent
-            model={display}
-            onHorizontalScroll={horizontalScroll}
-          />
-        </div>
+          {!minimized ? (
+            <>
+              <div
+                ref={ref}
+                className={classes.renderingComponentContainer}
+                style={{ transform: `scaleX(${model.scaleFactor})` }}
+              >
+                <RenderingComponent
+                  model={display}
+                  onHorizontalScroll={horizontalScroll}
+                />
+              </div>
 
-        {DisplayBlurb ? (
-          <div
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: display.height - 20,
-            }}
-          >
-            <DisplayBlurb model={display} />
-          </div>
-        ) : null}
-      </div>
+              {DisplayBlurb ? (
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: display.height - 20,
+                  }}
+                >
+                  <DisplayBlurb model={display} />
+                </div>
+              ) : null}
+            </>
+          ) : null}
+        </div>
+      </ErrorBoundary>
       <div
         className={classes.overlay}
         style={{

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -18,6 +18,8 @@ import {
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import DragIcon from '@mui/icons-material/DragIndicator'
 import CloseIcon from '@mui/icons-material/Close'
+import MinimizeIcon from '@mui/icons-material/Minimize'
+import AddIcon from '@mui/icons-material/Add'
 
 import { LinearGenomeViewModel } from '..'
 
@@ -64,6 +66,7 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     const view = getContainingView(track) as LGV
     const session = getSession(track)
     const trackConf = track.configuration
+    const minimized = track.minimized
     const trackId = getConf(track, 'trackId')
     const trackName = getTrackName(trackConf, session)
 
@@ -73,6 +76,11 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
     })
 
     const items = [
+      {
+        label: minimized ? 'Restore track' : 'Minimize track',
+        icon: minimized ? AddIcon : MinimizeIcon,
+        onClick: () => track.setMinimized(!minimized),
+      },
       ...(session.getTrackActionMenuItems?.(trackConf) || []),
       ...track.trackMenuItems(),
     ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
@@ -103,12 +111,13 @@ const TrackLabel = React.forwardRef<HTMLDivElement, Props>(
         >
           <CloseIcon fontSize="small" />
         </IconButton>
+
         <Typography
           variant="body1"
           component="span"
           className={classes.trackName}
         >
-          {trackName}
+          {trackName + (minimized ? ' (minimized)' : '')}
         </Typography>
         <IconButton
           {...bindTrigger(popupState)}

package/src/LinearGenomeView/index.tsx

@@ -59,6 +59,7 @@ import Header from './components/Header'
 import ZoomControls from './components/ZoomControls'
 import LinearGenomeView from './components/LinearGenomeView'
 
+// lazies
 const SequenceSearchDialog = lazy(
   () => import('./components/SequenceSearchDialog'),
 )
@@ -136,8 +137,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         /**
          * #property
+         * this is a string instead of the const literal 'LinearGenomeView' to reduce some
+         * typescripting strictness, but you should pass the string 'LinearGenomeView' to
+         * the model explicitly
          */
-        type: types.literal('LinearGenomeView'),
+        type: types.literal('LinearGenomeView') as unknown as string,
 
         /**
          * #property
@@ -274,16 +278,25 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .views(self => ({
+      /**
+       * #method
+       */
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       MiniControlsComponent(): React.FC<any> {
         return MiniControls
       },
 
+      /**
+       * #method
+       */
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       HeaderComponent(): React.FC<any> {
         return Header
       },
 
+      /**
+       * #getter
+       */
       get assemblyErrors() {
         const { assemblyManager } = getSession(self)
         const { assemblyNames } = self
@@ -293,23 +306,46 @@ export function stateModelFactory(pluginManager: PluginManager) {
           .join(', ')
       },
 
+      /**
+       * #getter
+       */
       get assembliesInitialized() {
         const { assemblyManager } = getSession(self)
         const { assemblyNames } = self
         return assemblyNames.every(a => assemblyManager.get(a)?.initialized)
       },
+
+      /**
+       * #getter
+       */
       get initialized() {
         return self.volatileWidth !== undefined && this.assembliesInitialized
       },
+
+      /**
+       * #getter
+       */
       get hasDisplayedRegions() {
         return self.displayedRegions.length > 0
       },
+
+      /**
+       * #getter
+       */
       get isSearchDialogDisplayed() {
         return self.searchResults !== undefined
       },
+
+      /**
+       * #getter
+       */
       get scaleBarHeight() {
         return SCALE_BAR_HEIGHT + RESIZE_HANDLE_HEIGHT
       },
+
+      /**
+       * #getter
+       */
       get headerHeight() {
         if (self.hideHeader) {
           return 0
@@ -319,15 +355,26 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
         return HEADER_BAR_HEIGHT + HEADER_OVERVIEW_HEIGHT
       },
+
+      /**
+       * #getter
+       */
       get trackHeights() {
         return self.tracks
           .map(t => t.displays[0].height)
           .reduce((a, b) => a + b, 0)
       },
 
+      /**
+       * #getter
+       */
       get trackHeightsWithResizeHandles() {
         return this.trackHeights + self.tracks.length * RESIZE_HANDLE_HEIGHT
       },
+
+      /**
+       * #getter
+       */
       get height() {
         return (
           this.trackHeightsWithResizeHandles +
@@ -335,38 +382,63 @@ export function stateModelFactory(pluginManager: PluginManager) {
           this.scaleBarHeight
         )
       },
+
+      /**
+       * #getter
+       */
       get totalBp() {
         return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0)
       },
 
+      /**
+       * #getter
+       */
       get maxBpPerPx() {
         return this.totalBp / (self.width * 0.9)
       },
 
+      /**
+       * #getter
+       */
       get minBpPerPx() {
         return 1 / 50
       },
 
+      /**
+       * #getter
+       */
       get error() {
         return self.volatileError || this.assemblyErrors
       },
 
+      /**
+       * #getter
+       */
       get maxOffset() {
         // objectively determined to keep the linear genome on the main screen
         const leftPadding = 10
         return this.displayedRegionsTotalPx - leftPadding
       },
 
+      /**
+       * #getter
+       */
       get minOffset() {
         // objectively determined to keep the linear genome on the main screen
         const rightPadding = 30
         return -self.width + rightPadding
       },
 
+      /**
+       * #getter
+       */
       get displayedRegionsTotalPx() {
         return this.totalBp / self.bpPerPx
       },
 
+      /**
+       * #method
+       */
       renderProps() {
         return {
           ...getParentRenderProps(self),
@@ -378,6 +450,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
       },
 
+      /**
+       * #method
+       */
       searchScope(assemblyName: string) {
         return {
           assemblyName,
@@ -386,10 +461,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
       },
 
+      /**
+       * #method
+       */
       getTrack(id: string) {
         return self.tracks.find(t => t.configuration.trackId === id)
       },
 
+      /**
+       * #method
+       */
       rankSearchResults(results: BaseResult[]) {
         // order of rank
         const openTrackIds = self.tracks.map(
@@ -403,7 +484,10 @@ export function stateModelFactory(pluginManager: PluginManager) {
         return results
       },
 
-      // modifies view menu action onClick to apply to all tracks of same type
+      /**
+       * #method
+       * modifies view menu action onClick to apply to all tracks of same type
+       */
       rewriteOnClicks(trackType: string, viewMenuActions: MenuItem[]) {
         viewMenuActions.forEach(action => {
           // go to lowest level menu
@@ -422,7 +506,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
           }
         })
       },
-
+      /**
+       * #getter
+       */
       get trackTypeActions() {
         const allActions: Map<string, MenuItem[]> = new Map()
         self.tracks.forEach(track => {
@@ -609,7 +695,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
         }
         return t[0]
       },
-
+      /**
+       * #action
+       */
       hideTrack(trackId: string) {
         const schema = pluginManager.pluggableConfigSchemaType('track')
         const conf = resolveIdentifier(schema, getRoot(self), trackId)
@@ -814,7 +902,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
        * this "clears the view" and makes the view return to the import form
        */
       clearView() {
-        this.setDisplayedRegions([])
+        self.displayedRegions.clear()
         self.tracks.clear()
         // it is necessary to run these after setting displayed regions empty
         // or else model.offsetPx gets set to Infinity and breaks
@@ -973,59 +1061,57 @@ export function stateModelFactory(pluginManager: PluginManager) {
             icon: SyncAltIcon,
             onClick: self.horizontallyFlip,
           },
-          { type: 'divider' },
           {
-            label: 'Show all regions in assembly',
+            label: 'Show...',
             icon: VisibilityIcon,
-            onClick: self.showAllRegionsInAssembly,
-          },
-          {
-            label: 'Show center line',
-            icon: VisibilityIcon,
-            type: 'checkbox',
-            checked: self.showCenterLine,
-            onClick: self.toggleCenterLine,
-          },
-          {
-            label: 'Show header',
-            icon: VisibilityIcon,
-            type: 'checkbox',
-            checked: !self.hideHeader,
-            onClick: self.toggleHeader,
-          },
-          {
-            label: 'Show header overview',
-            icon: VisibilityIcon,
-            type: 'checkbox',
-            checked: !self.hideHeaderOverview,
-            onClick: self.toggleHeaderOverview,
-            disabled: self.hideHeader,
-          },
-          {
-            label: 'Show no tracks active button',
-            icon: VisibilityIcon,
-            type: 'checkbox',
-            checked: !self.hideNoTracksActive,
-            onClick: self.toggleNoTracksActive,
-          },
-          {
-            label: 'Show guidelines',
-            icon: VisibilityIcon,
-            type: 'checkbox',
-            checked: self.showGridlines,
-            onClick: self.toggleShowGridlines,
+            subMenu: [
+              {
+                label: 'Show all regions in assembly',
+                onClick: self.showAllRegionsInAssembly,
+              },
+              {
+                label: 'Show center line',
+                type: 'checkbox',
+                checked: self.showCenterLine,
+                onClick: self.toggleCenterLine,
+              },
+              {
+                label: 'Show header',
+                type: 'checkbox',
+                checked: !self.hideHeader,
+                onClick: self.toggleHeader,
+              },
+              {
+                label: 'Show header overview',
+                type: 'checkbox',
+                checked: !self.hideHeaderOverview,
+                onClick: self.toggleHeaderOverview,
+                disabled: self.hideHeader,
+              },
+              {
+                label: 'Show no tracks active button',
+                type: 'checkbox',
+                checked: !self.hideNoTracksActive,
+                onClick: self.toggleNoTracksActive,
+              },
+              {
+                label: 'Show guidelines',
+                type: 'checkbox',
+                checked: self.showGridlines,
+                onClick: self.toggleShowGridlines,
+              },
+              ...(canShowCytobands
+                ? [
+                    {
+                      label: 'Show ideogram',
+                      type: 'checkbox' as const,
+                      checked: self.showCytobands,
+                      onClick: () => self.setShowCytobands(!showCytobands),
+                    },
+                  ]
+                : []),
+            ],
           },
-          ...(canShowCytobands
-            ? [
-                {
-                  label: 'Show ideogram',
-                  icon: VisibilityIcon,
-                  type: 'checkbox' as const,
-                  checked: self.showCytobands,
-                  onClick: () => self.setShowCytobands(!showCytobands),
-                },
-              ]
-            : []),
           {
             label: 'Track labels',
             icon: LabelIcon,
@@ -1375,18 +1461,14 @@ export function stateModelFactory(pluginManager: PluginManager) {
               )
               return
             }
-            let locationIndex = 0
-            let locationStart = 0
-            let locationEnd = 0
-            for (
-              locationIndex;
-              locationIndex < locations.length;
-              locationIndex++
-            ) {
-              const location = locations[locationIndex]
-              const region = self.displayedRegions[index + locationIndex]
-              locationStart = location.start || region.start
-              locationEnd = location.end || region.end
+            let idx = 0
+            let start = 0
+            let end = 0
+            for (idx; idx < locations.length; idx++) {
+              const location = locations[idx]
+              const region = self.displayedRegions[index + idx]
+              start = location.start || region.start
+              end = location.end || region.end
               if (location.refName !== region.refName) {
                 throw new Error(
                   `Entered location ${assembleLocString(
@@ -1395,10 +1477,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
                 )
               }
             }
-            locationIndex -= 1
+            idx -= 1
             const startDisplayedRegion = self.displayedRegions[index]
-            const endDisplayedRegion =
-              self.displayedRegions[index + locationIndex]
+            const endDisplayedRegion = self.displayedRegions[index + idx]
             this.moveTo(
               {
                 index,
@@ -1407,10 +1488,10 @@ export function stateModelFactory(pluginManager: PluginManager) {
                   : s - startDisplayedRegion.start,
               },
               {
-                index: index + locationIndex,
+                index: index + idx,
                 offset: endDisplayedRegion.reversed
-                  ? endDisplayedRegion.end - locationStart
-                  : locationEnd - endDisplayedRegion.start,
+                  ? endDisplayedRegion.end - start
+                  : end - endDisplayedRegion.start,
               },
             )
             return