Misc

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

@@ -97,7 +97,7 @@ const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
           >
             Cancel
           </Button>
-        ) : null}{' '}
+        ) : null}
         <Button
           disabled={!!err}
           variant="contained"

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

@@ -50,8 +50,7 @@ const SpreadsheetContainer = observer(function ({
 }: {
   model: SpreadsheetViewModel
 }) {
-  const { spreadsheet } = model
-  return !spreadsheet.data ? (
+  return !model.initialized ? (
     <Suspense fallback={null}>
       <ImportWizard model={model.importWizard} />
     </Suspense>

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

@@ -53,18 +53,20 @@ function stateModelFactory() {
       loading: false,
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
       get isReadyToOpen() {
         const { error, fileSource } = self
         return (
           !error &&
           (fileSource?.blobId || fileSource?.localPath || fileSource?.uri)
         )
       },
-      get canCancel() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return getParent<any>(self).readyToDisplay
-      },
 
+      /**
+       * #getter
+       */
       get fileName() {
         const { fileSource } = self
         return fileSource
@@ -73,11 +75,15 @@ function stateModelFactory() {
               (fileSource.blobId && fileSource.name)
           : undefined
       },
-
+      /**
+       * #getter
+       */
       get requiresUnzip() {
         return this.fileName.endsWith('gz')
       },
-
+      /**
+       * #method
+       */
       isValidRefName(refName: string, assemblyName?: string) {
         const { assemblyManager } = getSession(self)
         if (!assemblyName) {
@@ -87,9 +93,15 @@ function stateModelFactory() {
       },
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
       setSelectedAssemblyName(s: string) {
         self.selectedAssemblyName = s
       },
+      /**
+       * #action
+       */
       setFileSource(newSource: unknown) {
         self.fileSource = newSource
         self.error = undefined
@@ -109,40 +121,32 @@ function stateModelFactory() {
           }
         }
       },
-
-      toggleHasColumnNameLine() {
-        self.hasColumnNameLine = !self.hasColumnNameLine
-      },
-
-      setColumnNameLineNumber(newnumber: number) {
-        if (newnumber > 0) {
-          self.columnNameLineNumber = newnumber
-        }
-      },
-
+      /**
+       * #action
+       */
       setFileType(typeName: string) {
         self.fileType = typeName
       },
-
+      /**
+       * #action
+       */
       setError(error: unknown) {
         console.error(error)
         self.loading = false
         self.error = error
       },
-
+      /**
+       * #action
+       */
       setLoaded() {
         self.loading = false
         self.error = undefined
       },
-
-      cancelButton() {
-        self.error = undefined
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        getParent<any>(self).setDisplayMode()
-      },
-
-      // fetch and parse the file, make a new Spreadsheet model for it,
-      // then set the parent to display it
+      /**
+       * #action
+       * fetch and parse the file, make a new Spreadsheet model for it,
+       * then set the parent to display it
+       */
       async import(assemblyName: string) {
         if (!self.fileSource) {
           return

plugins/spreadsheet-view/src/SpreadsheetView/models/Spreadsheet.tsx

@@ -40,9 +40,7 @@ function stateModelFactory() {
        * #getter
        */
       get initialized() {
-        const session = getSession(self)
-        const name = self.assemblyName
-        return name ? session.assemblyManager.get(name)?.initialized : false
+        return !!self.data
       },
     }))
     .actions(self => ({
@@ -96,7 +94,9 @@ function stateModelFactory() {
           }
         })
       },
-
+      /**
+       * #getter
+       */
       get widthList() {
         return Object.values(self.widths).map(f => f ?? 100)
       },

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

@@ -31,10 +31,6 @@ function stateModelFactory() {
          * #property
          */
         type: types.literal('SpreadsheetView'),
-        /**
-         * #property
-         */
-        offsetPx: 0,
         /**
          * #property
          */
@@ -57,11 +53,17 @@ function stateModelFactory() {
       width: 400,
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
+      get initialized() {
+        return self.spreadsheet.initialized
+      },
       /**
        * #getter
        */
       get assembly() {
-        const name = self.spreadsheet?.assemblyName
+        const name = self.spreadsheet.assemblyName
         return name ? getSession(self).assemblyManager.get(name) : undefined
       },
     }))

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { ResizeHandle } from '@jbrowse/core/ui'
@@ -41,33 +41,42 @@ const SvInspectorView = observer(function ({
   const {
     SpreadsheetViewReactComponent,
     CircularViewReactComponent,
+    spreadsheetView,
+    circularView,
     showCircularView,
   } = model
+  const [initialCircWidth, setInitialCircWidth] = useState(0)
+  const [initialSpreadsheetWidth, setInitialSpreadsheetWidth] = useState(0)
+  console.log({ showCircularView })
 
   return (
     <div className={classes.container}>
       <div className={classes.viewsContainer}>
         <div
-          style={{ width: model.spreadsheetView.width }}
+          style={{ width: spreadsheetView.width }}
           className={classes.container}
         >
-          <SpreadsheetViewReactComponent model={model.spreadsheetView} />
+          <SpreadsheetViewReactComponent model={spreadsheetView} />
         </div>
 
         {showCircularView ? (
           <>
             <ResizeHandle
-              onDrag={distance => {
-                const ret1 = model.circularView.resizeWidth(-distance)
-                return model.spreadsheetView.resizeWidth(-ret1)
+              onDrag={(_, total) => {
+                circularView.resizeWidth(initialCircWidth - total)
+                spreadsheetView.resizeWidth(initialSpreadsheetWidth + total)
+              }}
+              onMouseDown={() => {
+                setInitialSpreadsheetWidth(spreadsheetView.width)
+                setInitialCircWidth(circularView.width)
               }}
               vertical
               flexbox
               className={classes.resizeHandleVert}
             />
-            <div style={{ width: model.circularView.width }}>
+            <div style={{ width: circularView.width }}>
               <CircularViewOptions svInspector={model} />
-              <CircularViewReactComponent model={model.circularView} />
+              <CircularViewReactComponent model={circularView} />
             </div>
           </>
         ) : null}

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

@@ -114,8 +114,7 @@ function SvInspectorViewF(pluginManager: PluginManager) {
        * #getter
        */
       get showCircularView() {
-        // @ts-expect-error
-        return self.spreadsheetView.mode === 'display'
+        return self.spreadsheetView.initialized
       },
 
       /**