react-msaview 6.5.0 → 8.0.0

package/dist/wuss.js

@@ -0,0 +1,55 @@
+// WUSS notation (Rfam's `#=GC SS_cons`) names a consensus secondary structure
+// by pairing columns. Nested helices use bracket pairs -- <>, (), [], {} --
+// each type kept on its own stack, and a pseudoknot, which by definition
+// crosses a helix it cannot nest inside, uses a letter pair instead: `A` opens
+// and `a` closes, `B`/`b` for a second one. Everything else (. , _ - : ~) is
+// unpaired.
+const closeToOpen = {
+    '>': '<',
+    ')': '(',
+    ']': '[',
+    '}': '{',
+};
+const opens = new Set(Object.values(closeToOpen));
+/**
+ * The base pairs a WUSS string encodes, as 0-based column indexes. Unmatched
+ * brackets are dropped rather than throwing: a hand-edited or truncated
+ * alignment should still draw the helices it does close.
+ */
+export function parseWuss(ss) {
+    const stacks = new Map();
+    const pairs = [];
+    const push = (key, col) => {
+        const stack = stacks.get(key);
+        if (stack) {
+            stack.push(col);
+        }
+        else {
+            stacks.set(key, [col]);
+        }
+    };
+    const pop = (key, col, pseudoknot) => {
+        const start = stacks.get(key)?.pop();
+        if (start !== undefined) {
+            pairs.push({ start, end: col, pseudoknot });
+        }
+    };
+    for (let col = 0; col < ss.length; col++) {
+        const ch = ss[col];
+        const opener = closeToOpen[ch];
+        if (opens.has(ch)) {
+            push(ch, col);
+        }
+        else if (opener) {
+            pop(opener, col, false);
+        }
+        else if (ch >= 'A' && ch <= 'Z') {
+            push(ch, col);
+        }
+        else if (ch >= 'a' && ch <= 'z') {
+            pop(ch.toUpperCase(), col, true);
+        }
+    }
+    return pairs.sort((a, b) => a.start - b.start);
+}
+//# sourceMappingURL=wuss.js.map

package/dist/wuss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wuss.js","sourceRoot":"","sources":["../src/wuss.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,4EAA4E;AAC5E,yEAAyE;AACzE,+EAA+E;AAC/E,6EAA6E;AAC7E,YAAY;AAEZ,MAAM,WAAW,GAA2B;IAC1C,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAA;AACD,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;AAWjD;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EAAU;IAClC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoB,CAAA;IAC1C,MAAM,KAAK,GAAe,EAAE,CAAA;IAC5B,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,EAAE;QACxC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAC7B,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACjB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,CAAA;IACD,MAAM,GAAG,GAAG,CAAC,GAAW,EAAE,GAAW,EAAE,UAAmB,EAAE,EAAE;QAC5D,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAA;QACpC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAA;QAC7C,CAAC;IACH,CAAC,CAAA;IAED,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC;QACzC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAE,CAAA;QACnB,MAAM,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,CAAA;QAC9B,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA;QACf,CAAC;aAAM,IAAI,MAAM,EAAE,CAAC;YAClB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;QACzB,CAAC;aAAM,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,CAAC;YAClC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA;QACf,CAAC;aAAM,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,CAAC;YAClC,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAA;AAChD,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "6.5.0",
+  "version": "8.0.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -19,32 +19,41 @@
   "files": [
     "dist",
     "bundle",
-    "src"
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "peerDependencies": {
-    "@jbrowse/core": ">=2.0.0",
-    "@jbrowse/mobx-state-tree": "^6.0.0",
-    "@mui/icons-material": ">=5.0.0",
-    "@mui/material": ">=5.0.0",
+    "@jbrowse/core": ">=5.0.0-0",
+    "@jbrowse/mobx-state-tree": ">=6.0.0",
+    "@mui/icons-material": ">=9.0.0",
+    "@mui/material": ">=9.0.0",
     "mobx": ">=7.0.0",
-    "mobx-react": ">=9.0.0",
+    "mobx-react": ">=10.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@jbrowse/core": "file:vendor-jbrowse/jbrowse-core.tgz",
-    "@types/node": "^26.1.2",
-    "esbuild": "^0.28.1"
+    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "@types/node": "^26.5.1",
+    "esbuild": "^0.28.2",
+    "mobx": "^7.0.3",
+    "mobx-react": "^10.0.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "dependencies": {
-    "@gmod/newick": "^1.0.0",
-    "@jbrowse/svgcanvas": "6.5.0",
-    "colord": "^2.9.3",
+    "@gmod/newick": "^1.0.3",
+    "@jbrowse/svgcanvas": "8.0.0",
+    "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "6.5.0"
+    "msa-parsers": "8.0.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/colorSchemes.ts

@@ -16,8 +16,7 @@ const dna = {
   U: red[500],
 }
 
-// annotated rather than asserted: the wide type is what lets a free-string
-// scheme name index this, and an annotation still checks the literal against it
+// Record<string, ...> so a free-string scheme name can index it
 const colorSchemes: Record<string, Record<string, string>> = {
   none: {},
   nucleotide: dna,

package/src/columnStats.ts

@@ -0,0 +1,58 @@
+import type { ColumnCounts } from './columnCounts.ts'
+
+export interface ColumnStats {
+  col: number
+  total: number
+  gaps: number
+  gapFraction: number
+  conservation: number
+  propertyConservation: number | undefined
+  consensusLetter: string
+  consensusCount: number
+  consensusFraction: number
+  distribution: [string, number][]
+}
+
+/**
+ * Summarize one column: consensus residue and its identity fraction, the two
+ * conservation scores, gap fraction, and the non-gap residue distribution
+ * sorted by count. undefined past the end of the alignment or for a column with
+ * no sequences.
+ *
+ * A module-level function: a getter that reached the method through `this` made
+ * TypeScript infer the whole views object to type it, and fell back to `any`.
+ */
+export function columnStats({
+  col,
+  colStats,
+  conservation,
+  propertyConservation,
+}: {
+  col: number
+  colStats: ColumnCounts
+  conservation: number[]
+  propertyConservation: number[]
+}): ColumnStats | undefined {
+  if (col >= colStats.numColumns) {
+    return undefined
+  }
+  const total = colStats.total(col)
+  if (!total) {
+    return undefined
+  }
+  const gaps = colStats.gapCount(col)
+  const distribution = colStats.residueEntries(col).sort((a, b) => b[1] - a[1])
+  const consensus = distribution[0]
+  return {
+    col,
+    total,
+    gaps,
+    gapFraction: gaps / total,
+    conservation: conservation[col] ?? 0,
+    propertyConservation: propertyConservation[col],
+    consensusLetter: consensus?.[0] ?? '',
+    consensusCount: consensus?.[1] ?? 0,
+    consensusFraction: consensus ? consensus[1] / total : 0,
+    distribution,
+  }
+}

package/src/components/DragHandle.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
 
+import { useTheme } from '@mui/material'
+
 import { useDragScroll } from '../useDragScroll.ts'
 
+import type { Theme } from '@mui/material'
+
 export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
 
 // The scroll thumbs (minimap, vertical scrollbar) and the resize dividers are
@@ -11,23 +15,29 @@ export const scrollbarThumbFill = 'rgba(66,119,127,0.3)'
 const variants: Record<
   'thumb' | 'resizer',
   {
-    fill: string
-    fillHovered: string
+    fill: (theme: Theme) => string
+    fillHovered: (theme: Theme) => string
     cursor: (axis: 'x' | 'y') => string
     position: React.CSSProperties['position']
     zIndex?: number
   }
 > = {
   thumb: {
-    fill: scrollbarThumbFill,
-    fillHovered: 'rgba(66,119,127,0.6)',
+    fill: () => scrollbarThumbFill,
+    fillHovered: () => 'rgba(66,119,127,0.6)',
     cursor: () => 'pointer',
     position: 'absolute',
     zIndex: 100,
   },
   resizer: {
-    fill: 'rgba(200,200,200)',
-    fillHovered: 'rgba(150,150,150)',
+    fill: theme =>
+      theme.palette.mode === 'dark'
+        ? theme.palette.grey[800]
+        : 'rgba(200,200,200)',
+    fillHovered: theme =>
+      theme.palette.mode === 'dark'
+        ? theme.palette.grey[600]
+        : 'rgba(150,150,150)',
     cursor: axis => (axis === 'x' ? 'ew-resize' : 'ns-resize'),
     position: 'relative',
   },
@@ -54,6 +64,7 @@ export default function DragHandle({
   onDrag: (delta: number, startValue: number) => void
   style: React.CSSProperties
 }) {
+  const theme = useTheme()
   const [hovered, setHovered] = useState(false)
   const { startDrag } = useDragScroll(axis, onDrag)
   const { fill, fillHovered, cursor, position, zIndex } = variants[variant]
@@ -73,7 +84,7 @@ export default function DragHandle({
         position,
         zIndex,
         cursor: cursor(axis),
-        background: hovered ? fillHovered : fill,
+        background: hovered ? fillHovered(theme) : fill(theme),
         ...style,
       }}
     />

package/src/components/Loading.tsx

@@ -83,13 +83,23 @@ const Reset = observer(function ({
 })
 
 const Loading = observer(function ({ model }: { model: MsaViewModel }) {
-  const { isLoading, dataInitialized, error, msaFilehandle, treeFilehandle } =
-    model
+  const {
+    isLoading,
+    dataInitialized,
+    error,
+    resetCount,
+    msaFilehandle,
+    treeFilehandle,
+  } = model
   const hasPendingFilehandle = !!(msaFilehandle || treeFilehandle)
 
   return (
     <div>
+      {/* keyed on the reset counter: the boundary holds the error it caught
+          until it is remounted, so without this "Return to import form" put
+          the model back and left the error screen up */}
       <ErrorBoundary
+        key={resetCount}
         FallbackComponent={e => <Reset model={model} error={e.error} />}
       >
         {dataInitialized ? (
@@ -99,12 +109,8 @@ const Loading = observer(function ({ model }: { model: MsaViewModel }) {
             <MSAView model={model} />
           )
         ) : error ? (
-          // Ahead of the spinner, because a failed load KEEPS its filehandle --
-          // only an abort clears it. So hasPendingFilehandle stays true, this
-          // fell to the spinner below, and the ImportForm that renders
-          // `model.error` was never reached: the reader got "Downloading file"
-          // and a Cancel button for as long as they were willing to watch it.
-          // Found on AlphaFold's files/msa/ prefix answering 403 to every key.
+          // checked before the spinner: a failed load keeps its filehandle
+          // (only an abort clears it), so hasPendingFilehandle stays true
           <Reset model={model} error={error} />
         ) : hasPendingFilehandle || isLoading ? (
           <LoadingSpinner model={model} />

package/src/components/MSAView.tsx

@@ -12,16 +12,27 @@ import Header from './header/Header.tsx'
 import Minimap from './minimap/Minimap.tsx'
 import MSAPanel from './msa/MSAPanel.tsx'
 import { clickColor, hoverColor } from './overlayColors.ts'
+import RowPanelHeaders from './rowpanels/RowPanelHeaders.tsx'
+import RowPanels from './rowpanels/RowPanels.tsx'
+import TreeOverview from './tree/TreeOverview.tsx'
 import TreePanel from './tree/TreePanel.tsx'
 import TreeRuler from './tree/TreeRuler.tsx'
 
 import type { MsaViewModel } from '../model.ts'
 
+// The band above the panels: the tree overview and scale bar, the strip
+// headers, and the minimap over the alignment. The spacer stands in for the
+// resize handle, so the minimap starts exactly where the alignment canvas does.
 const TopArea = observer(function ({ model }: { model: MsaViewModel }) {
-  const { showHorizontalScrollbar } = model
+  const { showHorizontalScrollbar, showTreeOverview, resizeHandleWidth } = model
   return (
     <div style={{ display: 'flex' }}>
-      <TreeRuler model={model} />
+      <div style={{ flexShrink: 0 }}>
+        {showTreeOverview ? <TreeOverview model={model} /> : null}
+        <TreeRuler model={model} />
+      </div>
+      <RowPanelHeaders model={model} />
+      <div style={{ width: resizeHandleWidth, flexShrink: 0 }} />
       {showHorizontalScrollbar ? <Minimap model={model} /> : null}
     </div>
   )
@@ -38,6 +49,7 @@ const TrackColumnIndicator = observer(function ({
     colWidth,
     scrollX,
     treeAreaWidth,
+    rowPanelsWidth,
     resizeHandleWidth,
     totalTrackAreaHeight,
     msaCanvasWidth,
@@ -53,7 +65,7 @@ const TrackColumnIndicator = observer(function ({
     <div
       style={{
         position: 'absolute',
-        left: treeAreaWidth + resizeHandleWidth,
+        left: treeAreaWidth + rowPanelsWidth + resizeHandleWidth,
         top: 0,
         width: msaCanvasWidth,
         height: totalTrackAreaHeight,
@@ -102,6 +114,7 @@ const MainArea = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div style={{ display: 'flex' }}>
       <TreePanel model={model} />
+      <RowPanels model={model} />
       <VerticalResizeHandle model={model} />
       <MSAPanel model={model} />
       {showVerticalScrollbar ? <VerticalScrollbar model={model} /> : null}
@@ -120,14 +133,15 @@ const View = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
-  const { height, viewInitialized, DialogComponent, DialogProps } = model
+  const { height, hideHeader, viewInitialized, DialogComponent, DialogProps } =
+    model
 
   return (
     <div>
       {viewInitialized ? (
         <>
           <div style={{ height, overflow: 'hidden' }}>
-            <Header model={model} />
+            {hideHeader ? null : <Header model={model} />}
             <View model={model} />
           </div>
           <HorizontalResizeHandle model={model} />