react-msaview 8.0.0 → 8.1.0

package/src/components/tree/TreeCanvas.tsx

@@ -71,9 +71,6 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       ref={ref}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
-      onMouseLeave={event => {
-        event.preventDefault()
-      }}
       style={{
         height,
         position: 'relative',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -13,12 +13,12 @@ import { useTreeHover } from './useTreeHover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()(theme => ({
   hover: {
     position: 'absolute',
     pointerEvents: 'none',
     zIndex: 100,
-    background: 'rgba(0,0,0,0.1)',
+    background: theme.palette.action.hover,
   },
 }))
 

package/src/components/tree/TreeNodeMenu.tsx

@@ -35,8 +35,7 @@ const TreeMenu = observer(function ({
         left: node.x,
       }}
       transitionDuration={0}
-      keepMounted
-      open={Boolean(node)}
+      open
       onClose={onClose}
     >
       <MenuItem dense disabled>

package/src/components/tree/renderTreeCanvas.ts

@@ -402,7 +402,8 @@ function renderTreeLabels({
     // label when the "name" is just the auto-generated internal-node id
     const isAnonymousCollapsed = collapsedSet.has(id) && name === id
     if (!isAnonymousCollapsed && inYBlock(y, offsetY, by, pad)) {
-      // note: +rowHeight/4 matches with -rowHeight/4 in msa
+      // fontSize/4 below the row center, the baseline the alignment letters
+      // share
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {

package/src/constants.ts

@@ -48,6 +48,11 @@ export const defaultScrollZoomAxis: ScrollZoomAxis = 'both'
 export const minLetterRowHeight = 8
 export const minLetterColWidth = 5
 
+// A feature span draws its label at two pixels under its height, capped at 11,
+// so a span shorter than this holds no readable text: an underline bar, a
+// sub-row band or a features panel over small rows
+export const minFeatureLabelHeight = 9
+
 // Tree labels are measured once at this size and scaled to the current font
 // size, so a vertical zoom never re-measures the tree.
 export const labelReferenceFontSize = 16

package/src/model.ts

@@ -9,7 +9,7 @@ import {
   isAlive,
   types,
 } from '@jbrowse/mobx-state-tree'
-import { autorun, transaction } from 'mobx'
+import { autorun, computed, transaction } from 'mobx'
 import {
   generateNodeIds,
   gffToAnnotations,
@@ -111,7 +111,6 @@ import {
   len,
   outlineColor,
   skipBlanks,
-  transform,
   withAlpha,
 } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
@@ -156,6 +155,7 @@ import type {
 } from './types.ts'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
+import type { IComputedValue } from 'mobx'
 import type { InterProScanResults } from 'msa-parsers'
 
 function parseTreeText(text: string) {
@@ -257,6 +257,56 @@ function featureLabelMap(annotations: Annotation[], field: string) {
   return labels
 }
 
+/** what `packDomainLanes` needs to lay a row out, before it has its lane */
+type Unlaned = Omit<RowPanelSpan, 'lane' | 'laneCount'> & {
+  startCol: number
+  endCol: number
+}
+
+/**
+ * Lanes for `position: "strandpile"`, gggenomes' `position_strandpile`: the
+ * forward features stack above the line and the reverse below it, each strand
+ * packing on its own. The deepest row on each side sets the grid every row lays
+ * out on, so the line between the strands sits at one height down the panel and
+ * a reader can scan it. A feature with no strand piles with the forward ones.
+ */
+function strandpileLanes(
+  rows: [string, Unlaned[]][],
+): Map<string, RowPanelSpan[]> {
+  const piled = rows.map(([name, bands]) => {
+    const reverse = packDomainLanes(
+      bands.filter(b => b.annotation.strand === -1),
+    )
+    const forward = packDomainLanes(
+      bands.filter(b => b.annotation.strand !== -1),
+    )
+    return { name, forward, reverse }
+  })
+  const up = Math.max(0, ...piled.map(p => p.forward[0]?.laneCount ?? 0))
+  const down = Math.max(0, ...piled.map(p => p.reverse[0]?.laneCount ?? 0))
+  const laneCount = up + down
+  return new Map(
+    piled.map(({ name, forward, reverse }) => [
+      name,
+      [
+        // forward level 0 is the lane just above the line, stacking upward
+        ...forward.map(b => ({ ...b, lane: up - 1 - b.lane, laneCount })),
+        ...reverse.map(b => ({ ...b, lane: up + b.lane, laneCount })),
+      ],
+    ]),
+  )
+}
+
+/** one row's spans laid out by the panel's `position` */
+function panelLanes(
+  panel: RowFeaturesSpec,
+  rows: [string, Unlaned[]][],
+): Map<string, RowPanelSpan[]> {
+  return panel.position === 'strandpile'
+    ? strandpileLanes(rows)
+    : new Map(rows.map(([name, bands]) => [name, packDomainLanes(bands)]))
+}
+
 /**
  * The spans a `features` panel draws, keyed by row name and measured in the
  * panel's own pixels. `column` takes the bands the overlay draws, at the
@@ -268,7 +318,6 @@ function featureLabelMap(annotations: Annotation[], field: string) {
 function featurePanelSpans({
   panel,
   width,
-  rowHeight,
   colWidth,
   domainBands,
   annotationsByRow,
@@ -276,14 +325,14 @@ function featurePanelSpans({
 }: {
   panel: RowFeaturesSpec
   width: number
-  rowHeight: number
   colWidth: number
   domainBands: Map<string, DomainBand[]>
   annotationsByRow: Record<string, Annotation[]>
   shifts: Map<string, number> | undefined
 }): Map<string, RowPanelSpan[]> {
   if (panel.x === 'column') {
-    return new Map(
+    return panelLanes(
+      panel,
       [...domainBands].map(([name, bands]) => [
         name,
         bands.map(band => ({
@@ -315,26 +364,25 @@ function featurePanelSpans({
       max = Math.max(max, end)
     }
   }
-  // the arrowhead on the rightmost feature reaches a row height past its end,
-  // so the extent maps onto the panel less that much
-  const drawable = Math.max(1, width - rowHeight)
+  // a gene arrow ends where its feature does, so the extent maps onto the whole
+  // panel less the pixel the rightmost stroke needs
+  const drawable = Math.max(1, width - 1)
   const scale = max > min ? drawable / (max - min) : 0
   // a lane opens where a span covers more than a tenth of the one before it,
   // which keeps the genes of an operon on one lane: adjacent genes commonly
   // share a few bases, and a stop codon overlapping the next start reads as a
   // second lane over the whole row
-  return new Map(
+  return panelLanes(
+    panel,
     shifted.map(([name, features]) => [
       name,
-      packDomainLanes(
-        features.map(({ annotation, start, end }) => ({
-          annotation,
-          xStart: (start - min) * scale,
-          xEnd: (end - min) * scale,
-          startCol: start,
-          endCol: end - (end - start) * laneOverlap,
-        })),
-      ),
+      features.map(({ annotation, start, end }) => ({
+        annotation,
+        xStart: (start - min) * scale,
+        xEnd: (end - min) * scale,
+        startCol: start,
+        endCol: end - (end - start) * laneOverlap,
+      })),
     ]),
   )
 }
@@ -798,11 +846,7 @@ function stateModelFactory() {
          * data from the loaded tree/msa/treeMetadata, generally loaded by
          * autorun
          */
-        data: types.optional(DataModelF(), {
-          tree: '',
-          msa: '',
-          treeMetadata: '',
-        }),
+        data: types.optional(DataModelF(), {}),
 
         /**
          * #property
@@ -1064,10 +1108,12 @@ function stateModelFactory() {
       /**
        * #action
        * record a non-fatal load problem: a layer that failed to load, a file
-       * that failed to parse
+       * that failed to parse. A message already on the list is not added again
        */
       addWarning(warning: string) {
-        self.warnings = [...self.warnings, warning]
+        if (!self.warnings.includes(warning)) {
+          self.warnings = [...self.warnings, warning]
+        }
       },
 
       /**
@@ -1776,7 +1822,7 @@ function stateModelFactory() {
        */
       get insertionPositions() {
         const { blanks, rows } = this
-        if (blanks.length === 0 || !self.hideGapsEffective) {
+        if (blanks.length === 0) {
           return new Map<string, { pos: number; letters: string }[]>()
         }
         const result = new Map<string, { pos: number; letters: string }[]>()
@@ -2039,7 +2085,7 @@ function stateModelFactory() {
        * cladogram mode. The tree's scale bar uses it.
        */
       get pxPerBranchLength() {
-        const max = maxLength(this.root)
+        const max = this.rootToTipLength
         return this.showBranchLenEffective && max ? self.treeWidth / max : 0
       },
 
@@ -2094,6 +2140,140 @@ function stateModelFactory() {
         return self.drawLabels && self.rowHeight >= minLetterRowHeight
       },
     }))
+    .views(self => {
+      // a spec is a frozen value, so it keys its computed until setColumnTracks
+      // replaces it
+      const columnTrackModels = new WeakMap<
+        ColumnTrackSpec,
+        IComputedValue<BasicTrack>
+      >()
+      return {
+        /**
+         * #getter
+         * a data track's values or string, projected from its row's residues
+         * onto alignment columns when it names a row
+         */
+        get columnTrackContent() {
+          const { MSA, blanks, hideGapsEffective } = self
+          const width = MSA?.getWidth() ?? 0
+          const project = <T>(track: ColumnTrackSpec, items: T[], fill: T) => {
+            if (!track.row) {
+              return items
+            }
+            const out = Array.from({ length: width }, () => fill)
+            const index = self.seqPosIndex(track.row)
+            items.forEach((item, seqPos) => {
+              const col = index?.[seqPos]
+              if (col !== undefined) {
+                out[col] = item
+              }
+            })
+            return out
+          }
+          const skip = <T>(items: T[]) =>
+            hideGapsEffective ? dropBlanks(blanks, items) : items
+          // an arc endpoint maps row residue -> column -> visible column.
+          // visibleColsBefore, not globalColToVisibleCol, so an endpoint in a
+          // hidden column moves to the neighboring visible one and the arc stays
+          const resolve = (track: ColumnTrackSpec, pos: number) => {
+            const col = track.row
+              ? self.seqPosIndex(track.row)?.[pos - 1]
+              : pos - 1
+            if (col === undefined || col < 0 || col >= width) {
+              return undefined
+            }
+            return hideGapsEffective ? visibleColsBefore(blanks, col) : col
+          }
+          return new Map<
+            string,
+            { values?: number[]; data?: string; arcs?: Arc[] }
+          >(
+            self.columnTracks.map(track => {
+              if (track.kind === 'arc') {
+                const arcs = (track.arcs ?? [])
+                  .map(arc => {
+                    const start = resolve(track, Math.min(arc.start, arc.end))
+                    const end = resolve(track, Math.max(arc.start, arc.end))
+                    return start !== undefined &&
+                      end !== undefined &&
+                      start < end
+                      ? { start, end, color: arc.color }
+                      : undefined
+                  })
+                  .filter(notEmpty)
+                return [track.id, { arcs }] as const
+              }
+              if (track.kind === 'bar') {
+                const max = track.max ?? 1
+                const values = skip(project(track, track.values ?? [], 0)).map(
+                  v => Math.min(1, Math.max(0, v / max)),
+                )
+                return [track.id, { values }] as const
+              }
+              const data = skip(
+                project(track, (track.data ?? '').split(''), ' '),
+              )
+              return [track.id, { data: data.join('') }] as const
+            }),
+          )
+        },
+        /**
+         * #method
+         * the height a track draws at: what the user dragged its divider to,
+         * then the height its snapshot asked for, then its kind's default. Only
+         * a text track falls through to rowHeight
+         */
+        trackHeight(kind: TrackKind, heightKey: string = kind, given?: number) {
+          return (
+            self.trackHeights.get(heightKey) ??
+            given ??
+            defaultTrackHeights[kind] ??
+            self.rowHeight
+          )
+        },
+        /**
+         * #method
+         * the track a column track spec draws as, computed once per spec. A
+         * text track's height falls through to rowHeight, and its own computed
+         * confines the vertical zoom to it, so a sibling keeps its object and
+         * its canvas skips the redraw
+         */
+        columnTrackModel(track: ColumnTrackSpec): BasicTrack {
+          let computedModel = columnTrackModels.get(track)
+          if (!computedModel) {
+            computedModel = computed(() => {
+              const heightKey = resizableKinds.has(track.kind)
+                ? ownHeightKey(track.id)
+                : undefined
+              const content = this.columnTrackContent.get(track.id)
+              return {
+                model: {
+                  id: track.id,
+                  name: track.name,
+                  kind: track.kind,
+                  heightKey,
+                  height: this.trackHeight(track.kind, heightKey, track.height),
+                  barColor: track.color,
+                  arcColor: track.color,
+                  customColorScheme: track.colors,
+                  data: content?.data,
+                  arcs: content?.arcs,
+                },
+                ReactComponent: TrackBlocks,
+              }
+            })
+            columnTrackModels.set(track, computedModel)
+          }
+          return computedModel.get()
+        },
+        /**
+         * #getter
+         */
+        get columnTrackModels(): BasicTrack[] {
+          return self.columnTracks.map(track => this.columnTrackModel(track))
+        },
+      }
+    })
     .views(self => ({
       /**
        * #getter
@@ -2199,111 +2379,6 @@ function stateModelFactory() {
         }))
       },
 
-      /**
-       * #getter
-       * a data track's values or string, projected from its row's residues
-       * onto alignment columns when it names a row
-       */
-      get columnTrackContent() {
-        const { MSA, blanks, hideGapsEffective } = self
-        const width = MSA?.getWidth() ?? 0
-        const project = <T>(track: ColumnTrackSpec, items: T[], fill: T) => {
-          if (!track.row) {
-            return items
-          }
-          const out = Array.from({ length: width }, () => fill)
-          const index = self.seqPosIndex(track.row)
-          items.forEach((item, seqPos) => {
-            const col = index?.[seqPos]
-            if (col !== undefined) {
-              out[col] = item
-            }
-          })
-          return out
-        }
-        const skip = <T>(items: T[]) =>
-          hideGapsEffective ? dropBlanks(blanks, items) : items
-        // an arc endpoint maps row residue -> column -> visible column.
-        // visibleColsBefore, not globalColToVisibleCol, so an endpoint in a
-        // hidden column moves to the neighboring visible one and the arc stays
-        const resolve = (track: ColumnTrackSpec, pos: number) => {
-          const col = track.row
-            ? self.seqPosIndex(track.row)?.[pos - 1]
-            : pos - 1
-          if (col === undefined || col < 0 || col >= width) {
-            return undefined
-          }
-          return hideGapsEffective ? visibleColsBefore(blanks, col) : col
-        }
-        return new Map<
-          string,
-          { values?: number[]; data?: string; arcs?: Arc[] }
-        >(
-          self.columnTracks.map(track => {
-            if (track.kind === 'arc') {
-              const arcs = (track.arcs ?? [])
-                .map(arc => {
-                  const start = resolve(track, Math.min(arc.start, arc.end))
-                  const end = resolve(track, Math.max(arc.start, arc.end))
-                  return start !== undefined && end !== undefined && start < end
-                    ? { start, end, color: arc.color }
-                    : undefined
-                })
-                .filter(notEmpty)
-              return [track.id, { arcs }] as const
-            }
-            if (track.kind === 'bar') {
-              const max = track.max ?? 1
-              const values = skip(project(track, track.values ?? [], 0)).map(
-                v => Math.min(1, Math.max(0, v / max)),
-              )
-              return [track.id, { values }] as const
-            }
-            const data = skip(project(track, (track.data ?? '').split(''), ' '))
-            return [track.id, { data: data.join('') }] as const
-          }),
-        )
-      },
-      /**
-       * #method
-       * the height a track draws at: what the user dragged its divider to,
-       * then the height its snapshot asked for, then its kind's default. Only
-       * a text track falls through to rowHeight, and `??` short-circuits
-       * before reading it, so vertical zoom does not rebuild the other tracks
-       */
-      trackHeight(kind: TrackKind, heightKey = kind as string, given?: number) {
-        return (
-          self.trackHeights.get(heightKey) ??
-          given ??
-          defaultTrackHeights[kind] ??
-          self.rowHeight
-        )
-      },
-      /**
-       * #getter
-       */
-      get columnTrackModels(): BasicTrack[] {
-        return self.columnTracks.map(track => {
-          const heightKey = resizableKinds.has(track.kind)
-            ? ownHeightKey(track.id)
-            : undefined
-          return {
-            model: {
-              id: track.id,
-              name: track.name,
-              kind: track.kind,
-              heightKey,
-              height: this.trackHeight(track.kind, heightKey, track.height),
-              barColor: track.color,
-              arcColor: track.color,
-              customColorScheme: track.colors,
-              data: this.columnTrackContent.get(track.id)?.data,
-              arcs: this.columnTrackContent.get(track.id)?.arcs,
-            },
-            ReactComponent: TrackBlocks,
-          }
-        })
-      },
       /**
        * #getter
        * the consensus secondary structure as a track, when there is one. A
@@ -2320,7 +2395,7 @@ function stateModelFactory() {
                   name: 'Base pairs',
                   kind: 'arc' as const,
                   heightKey: 'arc',
-                  height: this.trackHeight('arc'),
+                  height: self.trackHeight('arc'),
                   arcs,
                 },
                 ReactComponent: TrackBlocks,
@@ -2369,7 +2444,7 @@ function stateModelFactory() {
           model: {
             ...model,
             heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
-            height: this.trackHeight(model.kind),
+            height: self.trackHeight(model.kind),
           },
           ReactComponent: TrackBlocks,
         }))
@@ -2379,7 +2454,7 @@ function stateModelFactory() {
         return [
           ...this.adapterTrackModels,
           ...this.basePairTrackModels,
-          ...this.columnTrackModels,
+          ...self.columnTrackModels,
           // every computed track reads the alignment's columns, and a tree, a
           // GFF and a features panel draw a figure with none
           ...(self.numColumns > 0 ? this.computedTrackModels : []),
@@ -3275,13 +3350,6 @@ function stateModelFactory() {
         )
         return { ...segments, ...categorical }
       },
-      get strokePalette() {
-        return transform(this.fillPalette, ([key, val]) => [
-          key,
-          outlineColor(val),
-        ])
-      },
-
       /**
        * #getter
        * the encoding coloring the overlay's spans, undefined when none does,
@@ -3600,23 +3668,6 @@ function stateModelFactory() {
         })
       },
 
-      /**
-       * #getter
-       * `columnStatsAt` for the hovered column, undefined when nothing is
-       * hovered
-       */
-      get mouseOverColumnStats(): ColumnStats | undefined {
-        const { mouseCol, colStats, conservation, propertyConservation } = self
-        return mouseCol === undefined
-          ? undefined
-          : columnStats({
-              col: mouseCol,
-              colStats,
-              conservation,
-              propertyConservation,
-            })
-      },
-
       /**
        * #method
        */
@@ -3683,7 +3734,6 @@ function stateModelFactory() {
               spans: featurePanelSpans({
                 panel,
                 width,
-                rowHeight: self.rowHeight,
                 colWidth: self.colWidth,
                 domainBands: this.domainBands,
                 annotationsByRow: self.annotationsByRow,
@@ -4002,7 +4052,9 @@ function stateModelFactory() {
         // alignment all read. The tree arrives with the model for inline data
         // and later for a filehandle, so the seeding waits for it and then runs
         // once: expanding a seeded clade sticks, and the record collapses it
-        // again only on reload.
+        // again only on reload. `dataInitialized` is true once the MSA alone
+        // has loaded, when the tree is still the flat stub, so a tree
+        // filehandle holds the seeding until its text lands.
         let cladesSeeded = false
         addDisposer(
           self,
@@ -4010,6 +4062,7 @@ function stateModelFactory() {
             if (
               cladesSeeded ||
               !self.dataInitialized ||
+              (self.treeFilehandle && !self.data.tree) ||
               self.clades.length === 0
             ) {
               return
@@ -4193,6 +4246,24 @@ function stateModelFactory() {
           }),
         )
 
+        // a GFF whose first column names rows of some other alignment parses
+        // without error and draws nothing
+        addDisposer(
+          self,
+          autorun(() => {
+            const { annotations, rowNamesSet } = self
+            if (
+              annotations.length > 0 &&
+              rowNamesSet.size > 0 &&
+              !annotations.some(a => rowNamesSet.has(a.id))
+            ) {
+              self.addWarning(
+                `0 of ${annotations.length} annotations name a row in this alignment`,
+              )
+            }
+          }),
+        )
+
         // gffFilehandle loads into data.gff, which the autorun above parses
         loadOnFilehandleChange({
           what: 'annotations',

package/src/types.ts

@@ -131,6 +131,8 @@ export interface RowFeaturesSpec {
   header?: string
   encoding?: FeatureEncodingSpec
   transform?: AlignTransform[]
+  /** how overlapping features share the row's height; see docs/layers.md */
+  position?: 'identity' | 'strandpile'
 }
 
 /**

package/src/useWheelScroll.ts

@@ -147,10 +147,6 @@ export function useWheelScroll({
   }, [mouseDragging, onScrollX, onScrollY])
 
   function onMouseDown(event: React.MouseEvent) {
-    const target = event.target as HTMLElement
-    if (target.draggable || target.dataset.resizer) {
-      return
-    }
     if (event.button === 0) {
       prevX.current = event.clientX
       prevY.current = event.clientY

package/src/version.ts

@@ -1 +1 @@
-export const version = '8.0.0'
+export const version = '8.1.0'