SV inspector working

packages/core/assemblyManager/assembly.ts

@@ -294,6 +294,12 @@ export default function assemblyFactory(
           self.refNameAliases[refName] || self.lowerCaseRefNameAliases[refName]
         )
       },
+      /**
+       * #method
+       */
+      getCanonicalRefNameOrDefault(refName: string) {
+        return this.getCanonicalRefName(refName) || refName
+      },
       /**
        * #method
        */

plugins/circular-view/src/CircularView/components/CircularView.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-const Slices = observer(({ model }: { model: CircularViewModel }) => {
+const Slices = observer(function ({ model }: { model: CircularViewModel }) {
   return (
     <>
       {model.staticSlices.map(slice => (
@@ -49,7 +49,11 @@ const Slices = observer(({ model }: { model: CircularViewModel }) => {
   )
 })
 
-const CircularView = observer(({ model }: { model: CircularViewModel }) => {
+const CircularView = observer(function ({
+  model,
+}: {
+  model: CircularViewModel
+}) {
   const initialized =
     !!model.displayedRegions.length &&
     !!model.figureWidth &&

plugins/circular-view/src/CircularView/components/Controls.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import React, { lazy } from 'react'
 import { observer } from 'mobx-react'
 import { IconButton } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import { getSession } from '@jbrowse/core/util'
 
 // icons
 import ZoomOutIcon from '@mui/icons-material/ZoomOut'
@@ -17,8 +18,9 @@ import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 
 // locals
 import { CircularViewModel } from '../models/model'
-import { getSession } from '@jbrowse/core/util'
-import ExportSvgDialog from './ExportSvgDialog'
+
+// lazies
+const ExportSvgDialog = lazy(() => import('./ExportSvgDialog'))
 
 const useStyles = makeStyles()(theme => ({
   controls: {
@@ -32,7 +34,6 @@ const useStyles = makeStyles()(theme => ({
 
 const Controls = observer(function ({ model }: { model: CircularViewModel }) {
   const { classes } = useStyles()
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   return (
     <div className={classes.controls}>
       <IconButton
@@ -77,13 +78,22 @@ const Controls = observer(function ({ model }: { model: CircularViewModel }) {
         {model.lockedFitToWindow ? <LockIcon /> : <LockOpenIcon />}
       </IconButton>
 
-      <IconButton
-        onClick={event => {
-          setAnchorEl(event.currentTarget)
-        }}
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Export SVG',
+            icon: PhotoCamera,
+            onClick: () => {
+              getSession(model).queueDialog(handleClose => [
+                ExportSvgDialog,
+                { model, handleClose },
+              ])
+            },
+          },
+        ]}
       >
         <MoreVert />
-      </IconButton>
+      </CascadingMenuButton>
 
       {model.hideTrackSelectorButton ? null : (
         <IconButton
@@ -94,32 +104,6 @@ const Controls = observer(function ({ model }: { model: CircularViewModel }) {
           <TrackSelectorIcon />
         </IconButton>
       )}
-
-      {anchorEl ? (
-        <JBrowseMenu
-          anchorEl={anchorEl}
-          menuItems={[
-            {
-              label: 'Export SVG',
-              icon: PhotoCamera,
-              onClick: () => {
-                getSession(model).queueDialog(handleClose => [
-                  ExportSvgDialog,
-                  { model, handleClose },
-                ])
-              },
-            },
-          ]}
-          onMenuItemClick={(_event, callback) => {
-            callback()
-            setAnchorEl(null)
-          }}
-          open={Boolean(anchorEl)}
-          onClose={() => {
-            setAnchorEl(null)
-          }}
-        />
-      ) : null}
     </div>
   )
 })

plugins/spreadsheet-view/src/SpreadsheetView/components/ImportWizard.tsx

@@ -39,20 +39,29 @@ function FormControl2({ children }: { children: React.ReactNode }) {
   )
 }
 
-const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
+const ImportWizard = observer(function ({
+  model,
+}: {
+  model: ImportWizardModel
+}) {
   const session = getSession(model)
   const { classes } = useStyles()
   const { assemblyNames, assemblyManager } = session
   const { fileTypes, error, loading } = model
-  const [selected, setSelected] = useState(assemblyNames[0])
-  const err = assemblyManager.get(selected || '')?.error || error
+  const a0 = assemblyNames[0] || ''
+  const [selectedAssemblyName, setSelectedAssemblyName] = useState(a0)
+  const err = assemblyManager.get(selectedAssemblyName || '')?.error || error
   const rootModel = getRoot<AbstractRootModel>(model)
   const [tmp, setTmp] = useState<FileLocation>()
   const [fileType, setFileType] = useState(getFileType(tmp))
   useEffect(() => {
     setFileType(getFileType(tmp))
   }, [tmp])
 
+  useEffect(() => {
+    setSelectedAssemblyName(a0)
+  }, [a0])
+
   return (
     <div className={classes.container}>
       {err ? <ErrorMessage error={err} /> : null}
@@ -89,9 +98,9 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
       <div>
         <AssemblySelector
           session={session}
-          selected={selected}
+          selected={selectedAssemblyName}
           onChange={val => {
-            setSelected(val)
+            setSelectedAssemblyName(val)
           }}
         />
       </div>
@@ -102,6 +111,7 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
         onClick={() => {
           model.setFileType(fileType)
           model.setSpreadsheetFilehandle(tmp)
+          model.setSelectedAssemblyName(selectedAssemblyName)
         }}
       >
         Open

plugins/spreadsheet-view/src/SpreadsheetView/models/ImportWizard.ts

@@ -131,22 +131,22 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(async () => {
-            const { spreadsheetFilehandle } = self
-            if (!spreadsheetFilehandle) {
-              return
-            }
+            try {
+              const { spreadsheetFilehandle } = self
+              if (!spreadsheetFilehandle) {
+                return
+              }
 
-            this.setLoading(true)
-            const typeParser =
-              await fileTypeParsers[
-                self.fileType as keyof typeof fileTypeParsers
-              ]()
+              this.setLoading(true)
+              const typeParser =
+                await fileTypeParsers[
+                  self.fileType as keyof typeof fileTypeParsers
+                ]()
 
-            const { unzip } = await import('@gmod/bgzf-filehandle')
-            const { pluginManager } = getEnv(self)
-            const f = openLocation(spreadsheetFilehandle, pluginManager)
-            const stat = await maybeStat(f)
-            try {
+              const { unzip } = await import('@gmod/bgzf-filehandle')
+              const { pluginManager } = getEnv(self)
+              const f = openLocation(spreadsheetFilehandle, pluginManager)
+              const stat = await maybeStat(f)
               if (stat && stat.size > IMPORT_SIZE_LIMIT) {
                 throw new Error(
                   `File is too big. Tabular files are limited to at most ${(

plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Suspense, useState } from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { ResizeHandle } from '@jbrowse/core/ui'
@@ -73,7 +73,9 @@ const SvInspectorView = observer(function ({
         />
         <div style={{ width: circularView.width }}>
           <CircularViewOptions svInspector={model} />
-          <CircularViewReactComponent model={circularView} />
+          <Suspense fallback={null}>
+            <CircularViewReactComponent model={circularView} />
+          </Suspense>
         </div>
       </div>
       <ResizeHandle

plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts

@@ -264,33 +264,31 @@ function SvInspectorViewF(pluginManager: PluginManager) {
               featureRefNames,
             } = self
             try {
-              if (!circularView.initialized) {
-                return
-              }
               const { tracks } = circularView
               const { assemblyManager } = getSession(self)
-              if (!assemblyName) {
-                return
-              }
-              const asm = assemblyManager.get(assemblyName)
-              if (!asm) {
+              const asm = assemblyName
+                ? assemblyManager.get(assemblyName)
+                : undefined
+              if (circularView.volatileWidth === undefined) {
                 return
               }
-              const { regions = [] } = asm
-              if (onlyDisplayRelevantRegionsInCircularView) {
-                if (tracks.length === 1) {
-                  // canonicalize the store's ref names if necessary
-                  const refSet = new Set(
-                    featureRefNames?.map(
-                      r => asm.getCanonicalRefName(r) || r,
-                    ) || [],
-                  )
-                  circularView.setDisplayedRegions(
-                    clone(regions.filter(r => refSet.has(r.refName))),
-                  )
+              if (asm) {
+                const { regions = [] } = asm || {}
+                if (onlyDisplayRelevantRegionsInCircularView) {
+                  if (tracks.length === 1) {
+                    // canonicalize the store's ref names if necessary
+                    const refSet = new Set(
+                      featureRefNames?.map(r =>
+                        asm.getCanonicalRefNameOrDefault(r),
+                      ),
+                    )
+                    circularView.setDisplayedRegions(
+                      clone(regions.filter(r => refSet.has(r.refName))),
+                    )
+                  }
+                } else {
+                  circularView.setDisplayedRegions(regions)
                 }
-              } else {
-                circularView.setDisplayedRegions(regions)
               }
             } catch (e) {
               console.error(e)