@jbrowse/plugin-linear-genome-view 1.6.5 → 1.6.8

package/src/LinearGenomeView/index.test.ts

@@ -11,6 +11,7 @@ import { LinearGenomeViewStateModel, stateModelFactory } from '.'
 import { BaseLinearDisplayComponent } from '..'
 import { stateModelFactory as LinearBasicDisplayStateModelFactory } from '../LinearBareDisplay'
 import hg38DisplayedRegions from './hg38DisplayedRegions.json'
+import volvoxDisplayedRegions from './volvoxDisplayedRegions.json'
 
 // use initializer function to avoid having console.warn jest.fn in a global
 function initialize() {
@@ -54,22 +55,7 @@ function initialize() {
   const Assembly = types
     .model({})
     .volatile(() => ({
-      regions: [
-        {
-          assemblyName: 'volvox',
-          start: 0,
-          end: 50001,
-          refName: 'ctgA',
-          reversed: false,
-        },
-        {
-          assemblyName: 'volvox',
-          start: 0,
-          end: 6079,
-          refName: 'ctgB',
-          reversed: false,
-        },
-      ],
+      regions: volvoxDisplayedRegions,
     }))
     .views(() => ({
       getCanonicalRefName(refName: string) {
@@ -79,6 +65,19 @@ function initialize() {
         return refName
       },
     }))
+
+  const AssemblyManager = types
+    .model({
+      assemblies: types.map(Assembly),
+    })
+    .actions(self => ({
+      isValidRefName(str: string) {
+        return !str.includes(':')
+      },
+      get(str: string) {
+        return self.assemblies.get(str)
+      },
+    }))
   const LinearGenomeModel = stateModelFactory(stubManager)
   const Session = types
     .model({
@@ -86,6 +85,13 @@ function initialize() {
       rpcManager: 'rpcManagerExists',
       view: types.maybe(LinearGenomeModel),
       configuration: types.map(types.string),
+      assemblyManager: types.optional(AssemblyManager, {
+        assemblies: {
+          volvox: {
+            regions: volvoxDisplayedRegions,
+          },
+        },
+      }),
     })
     .actions(self => ({
       setView(view: Instance<LinearGenomeViewStateModel>) {
@@ -93,9 +99,6 @@ function initialize() {
         return view
       },
     }))
-    .volatile((/* self */) => ({
-      assemblyManager: new Map([['volvox', Assembly.create({})]]),
-    }))
 
   return { Session, LinearGenomeModel, Assembly }
 }
@@ -294,29 +297,6 @@ test('can navToMultiple', () => {
   ])
   expect(model.offsetPx).toBe(2799)
   expect(model.bpPerPx).toBeCloseTo(12.531)
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgB', start: 5000, end: 10000 },
-      { refName: 'ctgC', start: 5000, end: 10000 },
-    ]),
-  ).toThrow('Start of region ctgC:5,001..10,000 should be 1, but it is not')
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgB', start: 0, end: 5000 },
-      { refName: 'ctgC', start: 0, end: 5000 },
-    ]),
-  ).toThrow('End of region ctgB:1..5,000 should be 10,000, but it is not')
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgA', start: 5000, end: 10000 },
-      { refName: 'ctgA', start: 0, end: 5000 },
-    ]),
-  ).toThrow(
-    'Entered location ctgA:1..5,000 does not match with displayed regions',
-  )
 })
 
 describe('Zoom to selected displayed regions', () => {
@@ -992,3 +972,25 @@ test('navToLocString with human assembly', () => {
   expect(model.view.offsetPx).toBe(9914777550)
   model.view.navToLocString('chr3:-1,100,000,000..-1,000,000,000')
 })
+
+test('multi region', () => {
+  const { Session, LinearGenomeModel } = initialize()
+  const model = Session.create({
+    configuration: {},
+  }).setView(
+    LinearGenomeModel.create({
+      type: 'LinearGenomeView',
+      tracks: [{ name: 'foo track', type: 'BasicTrack' }],
+    }),
+  )
+  model.setWidth(800)
+  model.setDisplayedRegions(volvoxDisplayedRegions.slice(0, 1))
+
+  model.navToLocString('ctgA ctgB')
+  expect(model.displayedRegions[0].refName).toBe('ctgA')
+  expect(model.displayedRegions[1].refName).toBe('ctgB')
+  // [
+  //   { refName: 'ctgA', start: 0, end: 50001 },
+  //   { refName: 'ctgB', start: 0, end: 6079 },
+  // ])
+})

package/src/LinearGenomeView/index.tsx

@@ -1,4 +1,4 @@
-import { getConf } from '@jbrowse/core/configuration'
+import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { Region } from '@jbrowse/core/util/types'
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst'
@@ -35,7 +35,6 @@ import {
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 import PluginManager from '@jbrowse/core/PluginManager'
 import clone from 'clone'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import { saveAs } from 'file-saver'
 
 // icons
@@ -53,7 +52,7 @@ import { renderToSvg } from './components/LinearGenomeViewSvg'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
 import SearchBox from './components/SearchBox'
 import ExportSvgDlg from './components/ExportSvgDialog'
-import ReturnToImportFormDlg from './components/ReturnToImportFormDialog'
+import { ReturnToImportFormDialog } from '@jbrowse/core/ui'
 
 export interface BpOffset {
   refName?: string
@@ -86,7 +85,7 @@ function calculateVisibleLocStrings(contentBlocks: BaseBlock[]) {
       assemblyName: isSingleAssemblyName ? undefined : block.assemblyName,
     }),
   )
-  return locs.join(';')
+  return locs.join(' ')
 }
 
 export interface NavLocation {
@@ -672,101 +671,63 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
 
       navToLocString(locString: string, optAssemblyName?: string) {
+        const { assemblyNames } = self
         const { assemblyManager } = getSession(self)
         const { isValidRefName } = assemblyManager
-        const locStrings = locString.split(';')
-        if (self.displayedRegions.length > 1) {
-          const locations = locStrings.map(ls =>
-            parseLocString(ls, isValidRefName),
-          )
-          this.navToMultiple(locations)
-          return
-        }
-        let assemblyName = optAssemblyName
-        let defaultRefName = ''
-        if (self.displayedRegions.length !== 0) {
-          // defaults
-          assemblyName = self.displayedRegions[0].assemblyName
-          defaultRefName = self.displayedRegions[0].refName
-        }
-        let assembly = assemblyName && assemblyManager.get(assemblyName)
-        if (!assembly) {
-          throw new Error(`Could not find assembly ${assemblyName}`)
-        }
-        let { regions } = assembly
-        if (!regions) {
-          throw new Error(`Regions for assembly ${assemblyName} not yet loaded`)
-        }
-        if (locStrings.length > 1) {
-          throw new Error(
-            'Navigating to multiple locations is not allowed when viewing a whole chromosome',
-          )
-        }
-        const parsedLocString = parseLocString(locStrings[0], refName =>
-          isValidRefName(refName, assemblyName),
-        )
-        let changedAssembly = false
-        if (
-          parsedLocString.assemblyName &&
-          parsedLocString.assemblyName !== assemblyName
-        ) {
-          const newAssembly = assemblyManager.get(parsedLocString.assemblyName)
-          if (!newAssembly) {
-            throw new Error(
-              `Could not find assembly ${parsedLocString.assemblyName}`,
-            )
+        const assemblyName = optAssemblyName || assemblyNames[0]
+
+        const parsedLocStrings = locString
+          .split(' ')
+          .filter(f => !!f.trim())
+          .map(l => parseLocString(l, ref => isValidRefName(ref, assemblyName)))
+
+        const locations = parsedLocStrings.map(region => {
+          const asmName = region.assemblyName || assemblyName
+          const asm = assemblyManager.get(asmName)
+          const { refName } = region
+          if (!asm) {
+            throw new Error(`assembly ${asmName} not found`)
           }
-          assembly = newAssembly
-          changedAssembly = true
-          const newRegions = newAssembly.regions
-          if (!newRegions) {
-            throw new Error(
-              `Regions for assembly ${parsedLocString.assemblyName} not yet loaded`,
-            )
+          const { regions } = asm
+          if (!regions) {
+            throw new Error(`regions not loaded yet for ${asmName}`)
           }
-          regions = newRegions
-        }
-        const canonicalRefName = assembly.getCanonicalRefName(
-          parsedLocString.refName,
-        )
-
-        if (!canonicalRefName) {
-          throw new Error(
-            `Could not find refName ${parsedLocString.refName} in ${assembly.name}`,
-          )
-        }
-        if (changedAssembly || canonicalRefName !== defaultRefName) {
-          const newDisplayedRegion = regions.find(
+          const canonicalRefName = asm.getCanonicalRefName(region.refName)
+          if (!canonicalRefName) {
+            throw new Error(`Could not find refName ${refName} in ${asm.name}`)
+          }
+          const parentRegion = regions.find(
             region => region.refName === canonicalRefName,
           )
-          if (newDisplayedRegion) {
-            this.setDisplayedRegions([newDisplayedRegion])
-          } else {
-            throw new Error(
-              `Could not find refName ${parsedLocString.refName} in ${assembly.name}`,
-            )
+          if (!parentRegion) {
+            throw new Error(`Could not find refName ${refName} in ${asmName}`)
           }
-        }
-        const displayedRegion = regions.find(
-          region => region.refName === canonicalRefName,
-        )
-        if (displayedRegion) {
-          const start = clamp(
-            parsedLocString?.start ?? 0,
-            0,
-            displayedRegion.end,
-          )
-          const end = clamp(
-            parsedLocString?.end ?? displayedRegion.end,
-            0,
-            displayedRegion.end,
-          )
+
+          return {
+            ...region,
+            assemblyName: asmName,
+            parentRegion,
+          }
+        })
+
+        if (locations.length === 1) {
+          const loc = locations[0]
+          this.setDisplayedRegions([
+            { reversed: loc.reversed, ...loc.parentRegion },
+          ])
+          const { start, end, parentRegion } = loc
 
           this.navTo({
-            ...parsedLocString,
-            start,
-            end,
+            ...loc,
+            start: clamp(start ?? 0, 0, parentRegion.end),
+            end: clamp(end ?? parentRegion.end, 0, parentRegion.end),
           })
+        } else {
+          this.setDisplayedRegions(
+            // @ts-ignore
+            locations.map(r => (r.start === undefined ? r.parentRegion : r)),
+          )
+          this.showAllRegions()
         }
       },
 
@@ -889,43 +850,6 @@ export function stateModelFactory(pluginManager: PluginManager) {
                   )} does not match with displayed regions`,
                 )
               }
-              if (locationIndex > 0) {
-                // does it reach the left side?
-                const matchesLeft = region.reversed
-                  ? locationEnd === region.end
-                  : locationStart === region.start
-                if (!matchesLeft) {
-                  throw new Error(
-                    `${
-                      region.reversed ? 'End' : 'Start'
-                    } of region ${assembleLocString(
-                      location,
-                    )} should be ${(region.reversed
-                      ? region.end
-                      : region.start + 1
-                    ).toLocaleString('en-US')}, but it is not`,
-                  )
-                }
-              }
-              const isLast = locationIndex === locations.length - 1
-              if (!isLast) {
-                // does it reach the right side?
-                const matchesRight = region.reversed
-                  ? locationStart === region.start
-                  : locationEnd === region.end
-                if (!matchesRight) {
-                  throw new Error(
-                    `${
-                      region.reversed ? 'Start' : 'End'
-                    } of region ${assembleLocString(
-                      location,
-                    )} should be ${(region.reversed
-                      ? region.start + 1
-                      : region.end
-                    ).toLocaleString('en-US')}, but it is not`,
-                  )
-                }
-              }
             }
             locationIndex -= 1
             const startDisplayedRegion = self.displayedRegions[index]
@@ -1228,9 +1152,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
           {
             label: 'Return to import form',
             onClick: () => {
-              getSession(self).queueDialog((doneCallback: Function) => [
-                ReturnToImportFormDlg,
-                { model: self, handleClose: doneCallback },
+              getSession(self).queueDialog(handleClose => [
+                ReturnToImportFormDialog,
+                { model: self, handleClose },
               ])
             },
             icon: FolderOpenIcon,
@@ -1239,9 +1163,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
             label: 'Export SVG',
             icon: PhotoCameraIcon,
             onClick: () => {
-              getSession(self).queueDialog((doneCallback: Function) => [
+              getSession(self).queueDialog(handleClose => [
                 ExportSvgDlg,
-                { model: self, handleClose: doneCallback },
+                { model: self, handleClose },
               ])
             },
           },

package/src/LinearGenomeView/volvoxDisplayedRegions.json

@@ -0,0 +1,16 @@
+[
+  {
+    "assemblyName": "volvox",
+    "start": 0,
+    "end": 50001,
+    "refName": "ctgA",
+    "reversed": false
+  },
+  {
+    "assemblyName": "volvox",
+    "start": 0,
+    "end": 6079,
+    "refName": "ctgB",
+    "reversed": false
+  }
+]

package/dist/LinearGenomeView/components/ReturnToImportFormDialog.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-declare function ReturnToImportFormDialog({ model, handleClose, }: {
-    model: {
-        clearView: Function;
-    };
-    handleClose: () => void;
-}): JSX.Element;
-declare const _default: typeof ReturnToImportFormDialog;
-export default _default;

package/src/LinearGenomeView/components/ReturnToImportFormDialog.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { makeStyles } from '@material-ui/core/styles'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Typography,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
-
-const useStyles = makeStyles(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
-function ReturnToImportFormDialog({
-  model,
-  handleClose,
-}: {
-  model: { clearView: Function }
-  handleClose: () => void
-}) {
-  const classes = useStyles()
-  return (
-    <Dialog maxWidth="xl" open onClose={handleClose}>
-      <DialogTitle>
-        Reference sequence
-        {handleClose ? (
-          <IconButton
-            className={classes.closeButton}
-            onClick={() => {
-              handleClose()
-            }}
-          >
-            <CloseIcon />
-          </IconButton>
-        ) : null}
-      </DialogTitle>
-      <Divider />
-
-      <DialogContent>
-        <Typography>
-          Are you sure you want to return to the import form? This will lose
-          your current view
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => {
-            model.clearView()
-            handleClose()
-          }}
-          variant="contained"
-          color="primary"
-          autoFocus
-        >
-          OK
-        </Button>
-        <Button
-          onClick={() => {
-            handleClose()
-          }}
-          color="secondary"
-          variant="contained"
-          autoFocus
-        >
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(ReturnToImportFormDialog)