Volatile-ize spreadsheet view

Remove

[skip ci] Volatile

[skip ci] Parse out INFO field

[skip ci] Misc

Misc

Restyling

Refactoring

More misc

Misc

Misc

Misc

Misc

New

Refname renaming fix for breakpoint split view

Breakpoint split view

Misc

[skip ci] Refactors

Use 7.0.0

Updates

Misc

Misc

packages/core/ui/ResizeBar.tsx

@@ -24,6 +24,7 @@ const useStyles = makeStyles()(theme => ({
     width: 5,
   },
 }))
+const clickAreaWidth = 5
 
 function Tick({
   left,
@@ -48,6 +49,7 @@ function Tick({
       onDrag(lastFrameDistance, totalDistance, idx),
     [idx, onDrag],
   )
+  const l = left - scrollLeft
 
   // has an invisible wider than tick mark (1px) clickable area (5px)
   return (
@@ -57,9 +59,9 @@ function Tick({
         onMouseDown={onMouseDown}
         vertical
         className={classes.hiddenTick}
-        style={{ left: left - scrollLeft - 2.5 }}
+        style={{ left: l - clickAreaWidth / 2 }}
       />
-      <div style={{ left: left - scrollLeft }} className={classes.tick} />
+      <div style={{ left: l }} className={classes.tick} />
     </>
   )
 }
@@ -89,10 +91,8 @@ export default function ResizeBar({
     <div className={classes.resizeBar}>
       {offsets.map((left, i) => (
         <Tick
-          key={i}
-          onMouseDown={() => {
-            setInitial([...widths])
-          }}
+          key={`${left}-${i}`}
+          onMouseDown={() => setInitial([...widths])}
           left={i === offsets.length - 1 ? left - 3 : left}
           onDrag={(_: number, totalDistance: number, idx: number) => {
             const newWidths = [...widths]

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
   },
 })
 

packages/core/ui/index.ts

@@ -14,5 +14,6 @@ export { default as PrerenderedCanvas } from './PrerenderedCanvas'
 export { default as Tooltip } from './Tooltip'
 export { default as ReturnToImportFormDialog } from './ReturnToImportFormDialog'
 export { default as ResizeHandle } from './ResizeHandle'
+export { default as ResizeBar } from './ResizeBar'
 export { default as SanitizedHTML } from './SanitizedHTML'
 export * from './Menu'

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

@@ -84,20 +84,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/data-management/src/HierarchicalTrackSelectorWidget/facetedModel.ts

@@ -199,18 +199,20 @@ export function facetedStateTreeF() {
       setWidths(args: Record<string, number | undefined>) {
         self.widths = args
       },
+    }))
+    .actions(self => ({
       afterAttach() {
         addDisposer(
           self,
           autorun(() => {
-            this.setVisible(Object.fromEntries(self.fields.map(c => [c, true])))
+            self.setVisible(Object.fromEntries(self.fields.map(c => [c, true])))
           }),
         )
 
         addDisposer(
           self,
           autorun(() => {
-            this.setWidths({
+            self.setWidths({
               name:
                 measureGridWidth(
                   self.rows.map(r => r.name),

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

@@ -44,10 +44,9 @@ export async function renderToSvg(model: LSV, opts: ExportSvgOptions) {
   const { width, views, middleComparativeHeight: synH, tracks } = model
   const shift = 50
   const offset = headerHeight + rulerHeight
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { createRootFn } = getRoot<any>(model)
   const heights = views.map(
-    v => totalHeight(v.tracks, textHeight, trackLabels) + offset,
+    view => totalHeight(view.tracks, textHeight, trackLabels) + offset,
   )
   const totalHeightSvg = sum(heights) + synH + 100
   const displayResults = await Promise.all(
@@ -93,18 +92,18 @@ 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
+    ) + padding
   const trackLabelOffset = trackLabels === 'left' ? trackLabelMaxLen : 0
   const w = width + trackLabelOffset
-
   const t = createJBrowseTheme(theme)
 
   // the xlink namespace is used for rendering <image> tag

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)
     },
   )
 }