@jbrowse/plugin-linear-genome-view 1.6.4 → 1.6.7

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 {
@@ -138,11 +137,11 @@ export function stateModelFactory(pluginManager: PluginManager) {
         ),
         showCenterLine: types.optional(types.boolean, () => {
           const setting = localStorageGetItem('lgv-showCenterLine')
-          return setting !== undefined ? !!setting : false
+          return setting !== undefined && setting !== null ? !!+setting : false
         }),
         showCytobandsSetting: types.optional(types.boolean, () => {
           const setting = localStorageGetItem('lgv-showCytobands')
-          return setting !== undefined ? !!setting : true
+          return setting !== undefined && setting !== null ? !!+setting : true
         }),
       }),
     )
@@ -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]
@@ -1220,127 +1144,128 @@ export function stateModelFactory(pluginManager: PluginManager) {
           : 0
       },
     }))
-    .views(self => {
-      let currentlyCalculatedStaticBlocks: BlockSet | undefined
-      let stringifiedCurrentlyCalculatedStaticBlocks = ''
-      return {
-        menuItems(): MenuItem[] {
-          const { canShowCytobands, showCytobands } = self
-
-          const menuItems: MenuItem[] = [
-            {
-              label: 'Return to import form',
-              onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
-                  ReturnToImportFormDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
-              icon: FolderOpenIcon,
-            },
-            {
-              label: 'Export SVG',
-              icon: PhotoCameraIcon,
-              onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
-                  ExportSvgDlg,
-                  { model: self, handleClose: doneCallback },
-                ])
-              },
-            },
-            {
-              label: 'Open track selector',
-              onClick: self.activateTrackSelector,
-              icon: TrackSelectorIcon,
-            },
-            {
-              label: 'Horizontally flip',
-              icon: SyncAltIcon,
-              onClick: self.horizontallyFlip,
-            },
-            { type: 'divider' },
-            {
-              label: 'Show all regions in assembly',
-              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,
+    .views(self => ({
+      menuItems(): MenuItem[] {
+        const { canShowCytobands, showCytobands } = self
+
+        const menuItems: MenuItem[] = [
+          {
+            label: 'Return to import form',
+            onClick: () => {
+              getSession(self).queueDialog(handleClose => [
+                ReturnToImportFormDialog,
+                { model: self, handleClose },
+              ])
             },
-            {
-              label: 'Show header overview',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: !self.hideHeaderOverview,
-              onClick: self.toggleHeaderOverview,
-              disabled: self.hideHeader,
+            icon: FolderOpenIcon,
+          },
+          {
+            label: 'Export SVG',
+            icon: PhotoCameraIcon,
+            onClick: () => {
+              getSession(self).queueDialog(handleClose => [
+                ExportSvgDlg,
+                { model: self, handleClose },
+              ])
             },
-            {
-              label: 'Track labels',
-              icon: LabelIcon,
-              subMenu: [
-                {
-                  label: 'Overlapping',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'overlapping',
-                  onClick: () => self.setTrackLabels('overlapping'),
-                },
-                {
-                  label: 'Offset',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'offset',
-                  onClick: () => self.setTrackLabels('offset'),
-                },
+          },
+          {
+            label: 'Open track selector',
+            onClick: self.activateTrackSelector,
+            icon: TrackSelectorIcon,
+          },
+          {
+            label: 'Horizontally flip',
+            icon: SyncAltIcon,
+            onClick: self.horizontallyFlip,
+          },
+          { type: 'divider' },
+          {
+            label: 'Show all regions in assembly',
+            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: 'Track labels',
+            icon: LabelIcon,
+            subMenu: [
+              {
+                label: 'Overlapping',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'overlapping',
+                onClick: () => self.setTrackLabels('overlapping'),
+              },
+              {
+                label: 'Offset',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'offset',
+                onClick: () => self.setTrackLabels('offset'),
+              },
+              {
+                label: 'Hidden',
+                icon: VisibilityIcon,
+                type: 'radio',
+                checked: self.trackLabels === 'hidden',
+                onClick: () => self.setTrackLabels('hidden'),
+              },
+            ],
+          },
+          ...(canShowCytobands
+            ? [
                 {
-                  label: 'Hidden',
-                  icon: VisibilityIcon,
-                  type: 'radio',
-                  checked: self.trackLabels === 'hidden',
-                  onClick: () => self.setTrackLabels('hidden'),
-                },
-              ],
-            },
-            ...(canShowCytobands
-              ? [
-                  {
-                    label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
-                    onClick: () => {
-                      self.setShowCytobands(!showCytobands)
-                    },
+                  label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+                  onClick: () => {
+                    self.setShowCytobands(!showCytobands)
                   },
-                ]
-              : []),
-          ]
+                },
+              ]
+            : []),
+        ]
 
-          // add track's view level menu options
-          for (const [key, value] of self.trackTypeActions.entries()) {
-            if (value.length) {
-              menuItems.push(
-                { type: 'divider' },
-                { type: 'subHeader', label: key },
-              )
-              value.forEach(action => {
-                menuItems.push(action)
-              })
-            }
+        // add track's view level menu options
+        for (const [key, value] of self.trackTypeActions.entries()) {
+          if (value.length) {
+            menuItems.push(
+              { type: 'divider' },
+              { type: 'subHeader', label: key },
+            )
+            value.forEach(action => {
+              menuItems.push(action)
+            })
           }
+        }
 
-          return menuItems
-        },
-
+        return menuItems
+      },
+    }))
+    .views(self => {
+      let currentlyCalculatedStaticBlocks: BlockSet | undefined
+      let stringifiedCurrentlyCalculatedStaticBlocks = ''
+      return {
         get staticBlocks() {
           const ret = calculateStaticBlocks(self)
           const sret = JSON.stringify(ret)

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)