react-msaview 7.0.0 → 8.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "7.0.0",
+  "version": "8.1.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -27,26 +27,33 @@
     "node": ">=18"
   },
   "peerDependencies": {
-    "@jbrowse/core": ">=2.0.0",
-    "@jbrowse/mobx-state-tree": ">=5.0.0",
-    "@mui/icons-material": ">=5.0.0",
-    "@mui/material": ">=5.0.0",
-    "mobx": ">=6.0.0",
-    "mobx-react": ">=9.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": ">=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.3",
-    "@jbrowse/svgcanvas": "7.0.0",
-    "colord": "^2.9.3",
+    "@jbrowse/svgcanvas": "8.1.0",
+    "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "7.0.0"
+    "msa-parsers": "8.1.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/calculateBlocks.ts

@@ -1,7 +1,8 @@
 // Returns the block offsets (in pixels) needed to cover the viewport along one
 // axis. mapSize/viewportPos/viewportSize are all in pixels. The clamp pins the
-// block set to the content edge so an over-scroll past the end still fills the
-// viewport rather than leaving a gap.
+// block set to the content edge, so an over-scroll past the end still fills
+// the viewport, and content smaller than the viewport mounts only the blocks
+// it covers: none for a tree-only figure with zero columns.
 export function calculateBlocks({
   mapSize,
   blockSize,
@@ -14,8 +15,9 @@ export function calculateBlocks({
   viewportSize: number
 }) {
   const clamped = Math.max(0, Math.min(viewportPos, mapSize - viewportSize))
+  const end = Math.min(clamped + viewportSize, mapSize)
   const minTile = Math.floor(clamped / blockSize)
-  const maxTile = Math.floor((clamped + viewportSize - 1) / blockSize)
+  const maxTile = Math.ceil(end / blockSize) - 1
 
   const blocks = []
   for (let tile = minTile; tile <= maxTile; tile++) {

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

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
 import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
-import { Button, Typography } from '@mui/material'
+import { Button, CircularProgress, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import MSAView from './MSAView.tsx'
@@ -16,35 +16,7 @@ const LoadingSpinner = observer(function ({ model }: { model: MsaViewModel }) {
     <div
       style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 20 }}
     >
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <style>
-          {`@keyframes spinner { to { transform: rotate(360deg); } }`}
-        </style>
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="#ccc"
-          strokeWidth="3"
-          fill="none"
-        />
-        <path
-          d="M12 2a10 10 0 0 1 10 10"
-          stroke="#1976d2"
-          strokeWidth="3"
-          fill="none"
-          strokeLinecap="round"
-          style={{
-            animation: 'spinner 1s linear infinite',
-            transformOrigin: 'center',
-          }}
-        />
-      </svg>
+      <CircularProgress size={24} />
       <Typography variant="h6">{status?.msg ?? 'Loading...'}</Typography>
       {status?.onCancel ? (
         <Button
@@ -109,12 +81,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} />