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

package.json

@@ -37,7 +37,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.10.17",
     "@mui/system": "^5.14.4",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "@node-oauth/express-oauth-server": "^4.0.0",
     "@oclif/test": "^3.2.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

packages/core/ReExports/modules.tsx

@@ -364,11 +364,7 @@ const DataGridEntries: Record<string, LazyExoticComponent<any>> = {
       default: module.GridPanelWrapper,
     })),
   ),
-  GridPreferencesPanel: lazy(() =>
-    import('@mui/x-data-grid').then(module => ({
-      default: module.GridPreferencesPanel,
-    })),
-  ),
+
   GridRemoveIcon: lazy(() =>
     import('@mui/x-data-grid').then(module => ({
       default: module.GridRemoveIcon,

packages/core/package.json

@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",

packages/core/ui/ResizeBar.tsx

@@ -89,10 +89,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

@@ -5,11 +5,12 @@ 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
 import { ucscProcessedTranscript } from '../util'
 
 function isUCSC(f: Feature) {

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/data-management/package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@gmod/ucsc-hub": "^0.3.0",
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-vtree": "^3.0.0-beta.1",
     "react-window": "^1.8.6"

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/dotplot-view/package.json

@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.3",
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",

plugins/grid-bookmark/package.json

@@ -46,7 +46,7 @@
     "@jbrowse/plugin-config": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "next",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",