Spreadsheet view refactor to use @mui/x-data-grid component and volatile storage

packages/core/ui/ResizeHandle.tsx

@@ -12,11 +12,14 @@ const useStyles = makeStyles()({
   },
   flexbox_verticalHandle: {
     cursor: 'col-resize',
-    alignSelf: 'stretch', // the height: 100% is actually unable to function inside flexbox
+    alignSelf: 'stretch',
+    // uses alignSelf:stretch with flexbox as the height: 100% is actually
+    // unable to function inside flexbox
   },
   flexbox_horizontalHandle: {
     cursor: 'row-resize',
-    alignSelf: 'stretch', // similar to above
+    alignSelf: 'stretch',
+    // similar to above
   },
 })
 

plugins/bed/src/BigBedAdapter/BigBedAdapter.ts

@@ -4,10 +4,9 @@ import {
   BaseFeatureDataAdapter,
   BaseOptions,
 } from '@jbrowse/core/data_adapters/BaseAdapter'
-import { Region } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import SimpleFeature, { Feature } from '@jbrowse/core/util/simpleFeature'
+import { SimpleFeature, Feature, Region } from '@jbrowse/core/util'
 import { map, mergeAll } from 'rxjs/operators'
 
 // locals

plugins/breakpoint-split-view/src/BreakpointSplitView/BreakpointSplitView.ts

@@ -1,23 +1,20 @@
-import { getSession, Feature, Region } from '@jbrowse/core/util'
+import { Feature, AbstractSessionModel } from '@jbrowse/core/util'
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
 import { parseBreakend } from '@gmod/vcf'
-import { IStateTreeNode } from 'mobx-state-tree'
 
 export default class BreakpointSplitViewType extends ViewType {
-  snapshotFromBreakendFeature(
+  async snapshotFromBreakendFeature(
     feature: Feature,
-    view: { displayedRegions: Region[] } & IStateTreeNode,
+    assemblyName: string,
+    session: AbstractSessionModel,
   ) {
     const alt = feature.get('ALT')?.[0]
     const bnd = alt ? parseBreakend(alt) : undefined
     const startPos = feature.get('start')
     let endPos
     const bpPerPx = 10
-
-    // TODO: Figure this out for multiple assembly names
-    const { assemblyName } = view.displayedRegions[0]
-    const { assemblyManager } = getSession(view)
-    const assembly = assemblyManager.get(assemblyName)
+    const { assemblyManager } = session
+    const assembly = await assemblyManager.waitForAssembly(assemblyName)
 
     if (!assembly) {
       throw new Error(`assembly ${assemblyName} not found`)

plugins/breakpoint-split-view/src/BreakpointSplitView/components/AlignmentConnections.tsx

@@ -81,20 +81,15 @@ const AlignmentConnections = observer(function ({
           if (!showIntraviewLinks && level1 === level2) {
             return null
           }
-          const f1ref = assembly.getCanonicalRefName(f1.get('refName'))
-          const f2ref = assembly.getCanonicalRefName(f2.get('refName'))
-
-          if (!f1ref || !f2ref) {
-            throw new Error(`unable to find ref for ${f1ref || f2ref}`)
-          }
-
+          const f1ref = f1.get('refName')
+          const f2ref = f2.get('refName')
           const s1 = f1.get('strand')
           const s2 = f2.get('strand')
           const p1 = c1[s1 === -1 ? LEFT : RIGHT]
           const sn1 = s2 === -1
           const p2 = hasPaired ? c2[sn1 ? LEFT : RIGHT] : c2[sn1 ? RIGHT : LEFT]
-          const x1 = getPxFromCoordinate(views[level1], f1ref, p1)
-          const x2 = getPxFromCoordinate(views[level2], f2ref, p2)
+          const x1 = getPxFromCoordinate(views[level1], f1ref, p1, assembly)
+          const x2 = getPxFromCoordinate(views[level2], f2ref, p2, assembly)
           const reversed1 = views[level1].pxToBp(x1).reversed
           const reversed2 = views[level2].pxToBp(x2).reversed
           const tracks = views.map(v => v.getTrack(trackId))

plugins/breakpoint-split-view/src/BreakpointSplitView/components/Breakends.tsx

@@ -37,19 +37,15 @@ const Breakends = observer(function ({
   const [mouseoverElt, setMouseoverElt] = useState<string>()
   const snap = getSnapshot(model)
   useNextFrame(snap)
-  const assembly = assemblyManager.get(views[0].assemblyNames[0])
-
-  if (!assembly) {
-    return null
-  }
+  const asm = assemblyManager.get(views[0].assemblyNames[0])
 
   let yoff = 0
   if (ref.current) {
     const rect = ref.current.getBoundingClientRect()
     yoff = rect.top
   }
 
-  return (
+  return asm ? (
     <g
       stroke="green"
       strokeWidth={5}
@@ -69,15 +65,10 @@ const Breakends = observer(function ({
           if (!c1 || !c2) {
             return null
           }
-          const f1origref = f1.get('refName')
-          const f2origref = f2.get('refName')
-          const f1ref = assembly.getCanonicalRefName(f1origref)
-          const f2ref = assembly.getCanonicalRefName(f2origref)
-          if (!f1ref || !f2ref) {
-            throw new Error(`unable to find ref for ${f1ref || f2ref}`)
-          }
-          const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT])
-          const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT])
+          const f1ref = f1.get('refName')
+          const f2ref = f2.get('refName')
+          const x1 = getPxFromCoordinate(views[level1], f1ref, c1[LEFT], asm)
+          const x2 = getPxFromCoordinate(views[level2], f2ref, c2[LEFT], asm)
           const reversed1 = views[level1].pxToBp(x1).reversed
           const reversed2 = views[level2].pxToBp(x2).reversed
 
@@ -136,7 +127,7 @@ const Breakends = observer(function ({
         return ret
       })}
     </g>
-  )
+  ) : null
 })
 
 export default Breakends

plugins/breakpoint-split-view/src/BreakpointSplitView/components/Translocations.tsx

@@ -50,10 +50,6 @@ const Translocations = observer(function ({
   useNextFrame(snap)
 
   const assembly = assemblyManager.get(views[0].assemblyNames[0])
-  if (!assembly) {
-    return null
-  }
-
   let yOffset = 0
   if (ref.current) {
     const rect = ref.current.getBoundingClientRect()
@@ -64,10 +60,8 @@ const Translocations = observer(function ({
   // just return null here note: would need to do processing of the INFO
   // CHR2/END and see which view could contain those coordinates to really do
   // it properly
-  if (views.length < 2) {
-    return null
-  }
-  return (
+
+  return !assembly || views.length < 2 ? null : (
     <g
       fill="none"
       stroke="green"
@@ -91,13 +85,14 @@ const Translocations = observer(function ({
           const res = info.STRANDS?.[0]?.split('') // not all files have STRANDS
           const [myDirection, mateDirection] = res ?? ['.', '.']
 
-          const r = getPxFromCoordinate(views[level2], chr2, end2)
+          const r = getPxFromCoordinate(views[level2], chr2, end2, assembly)
           if (r) {
             const c2: LayoutRecord = [r, 0, r + 1, 0]
             const x1 = getPxFromCoordinate(
               views[level1],
               f1.get('refName'),
               c1[LEFT],
+              assembly,
             )
             const x2 = r
             const reversed1 = views[level1].pxToBp(x1).reversed

plugins/breakpoint-split-view/src/BreakpointSplitView/util.ts

@@ -4,6 +4,7 @@ import { clamp } from '@jbrowse/core/util'
 
 // locals
 import { LayoutRecord } from './model'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
 
 type LGV = LinearGenomeViewModel
 
@@ -34,8 +35,18 @@ function heightFromSpecificLevel(
     : views[level].trackRefs[trackId]?.getBoundingClientRect().top || 0
 }
 
-export function getPxFromCoordinate(view: LGV, refName: string, coord: number) {
-  return (view.bpToPx({ refName, coord })?.offsetPx || 0) - view.offsetPx
+export function getPxFromCoordinate(
+  view: LGV,
+  refName: string,
+  coord: number,
+  asm: Assembly,
+) {
+  return (
+    (view.bpToPx({
+      refName: asm.getCanonicalRefName(refName) || refName,
+      coord,
+    })?.offsetPx || 0) - view.offsetPx
+  )
 }
 
 // get's the yposition of a layout record in a track

plugins/linear-comparative-view/src/LinearSyntenyView/svgcomponents/SVGLinearSyntenyView.tsx

@@ -97,12 +97,13 @@ export async function renderToSvg(model: LSV, opts: ExportSvgOptions) {
     }),
   )
 
+  const padding = 40
   const trackLabelMaxLen =
     max(
       views.flatMap(view =>
-        view.tracks.map(t =>
-          measureText(getTrackName(t.configuration, session), fontSize),
-        ),
+        view.tracks
+          .map(track => getTrackName(track.configuration, session))
+          .map(label => measureText(label, fontSize)),
       ),
       0,
     ) + 40

plugins/spreadsheet-view/src/LaunchSpreadsheetView/index.ts

@@ -22,19 +22,12 @@ export default function LaunchSpreadsheetViewF(pluginManager: PluginManager) {
       if (!view) {
         throw new Error('Failed to initialize view')
       }
-      const exts = uri.split('.')
-      let ext = exts?.pop()?.toUpperCase()
-      if (ext === 'GZ') {
-        ext = exts?.pop()?.toUpperCase()
-      }
 
-      view.importWizard.setFileType(fileType || ext || '')
       view.importWizard.setSelectedAssemblyName(assembly)
-      view.importWizard.setFileSource({
+      view.importWizard.setSpreadsheetFilehandle({
         uri,
         locationType: 'UriLocation',
       })
-      await view.importWizard.import(assembly)
     },
   )
 }