react-msaview 8.4.0 → 9.0.0

package/dist/tipLabels.d.ts

@@ -0,0 +1,8 @@
+import type { NodeWithIds } from './types.ts';
+/** the leaf names of a tree, and its depth in levels from the root */
+export declare function treeTips(tree: NodeWithIds): {
+    names: string[];
+    depth: number;
+};
+/** the width of the widest label at `fontSize`, measuring the longest few */
+export declare function widestLabel(labels: string[], fontSize: number): number;

package/dist/tipLabels.js

@@ -0,0 +1,46 @@
+import { measureTextCanvas } from './measureTextCanvas.js';
+// A label's width follows its length closely enough that the widest one is
+// among the longest few, so a 230k-tip tree measures this many strings.
+const measuredLabels = 100;
+/** the leaf names of a tree, and its depth in levels from the root */
+export function treeTips(tree) {
+    const names = [];
+    let depth = 0;
+    const stack = [[tree, 0]];
+    for (let entry = stack.pop(); entry; entry = stack.pop()) {
+        const [node, level] = entry;
+        const { children } = node;
+        if (children.length > 0) {
+            for (const child of children) {
+                stack.push([child, level + 1]);
+            }
+        }
+        else {
+            names.push(node.name);
+            depth = Math.max(depth, level);
+        }
+    }
+    return { names, depth };
+}
+/** the width of the widest label at `fontSize`, measuring the longest few */
+export function widestLabel(labels, fontSize) {
+    const counts = [];
+    for (const label of labels) {
+        counts[label.length] = (counts[label.length] ?? 0) + 1;
+    }
+    let shortest = counts.length;
+    for (let seen = 0; shortest > 0 && seen < measuredLabels;) {
+        shortest--;
+        seen += counts[shortest] ?? 0;
+    }
+    let widest = 0;
+    let ties = 0;
+    for (const label of labels) {
+        if (label.length > shortest ||
+            (label.length === shortest && ties++ < measuredLabels)) {
+            widest = Math.max(widest, measureTextCanvas(label, fontSize));
+        }
+    }
+    return widest;
+}
+//# sourceMappingURL=tipLabels.js.map

package/dist/tipLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tipLabels.js","sourceRoot":"","sources":["../src/tipLabels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAI1D,2EAA2E;AAC3E,wEAAwE;AACxE,MAAM,cAAc,GAAG,GAAG,CAAA;AAE1B,sEAAsE;AACtE,MAAM,UAAU,QAAQ,CAAC,IAAiB;IACxC,MAAM,KAAK,GAAa,EAAE,CAAA;IAC1B,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,MAAM,KAAK,GAA4B,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAClD,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,CAAC;QACzD,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,CAAA;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QACzB,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACxB,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;gBAC7B,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACrB,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IACD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;AACzB,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,WAAW,CAAC,MAAgB,EAAE,QAAgB;IAC5D,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;IACxD,CAAC;IACD,IAAI,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,KAAK,IAAI,IAAI,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,IAAI,IAAI,GAAG,cAAc,GAAG,CAAC;QAC1D,QAAQ,EAAE,CAAA;QACV,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC/B,CAAC;IACD,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,IAAI,IAAI,GAAG,CAAC,CAAA;IACZ,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IACE,KAAK,CAAC,MAAM,GAAG,QAAQ;YACvB,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,EAAE,GAAG,cAAc,CAAC,EACtD,CAAC;YACD,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;QAC/D,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "8.4.0";
+export declare const version = "9.0.0";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '8.4.0';
+export const version = '9.0.0';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "8.4.0",
+  "version": "9.0.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -37,11 +37,11 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@jbrowse/core": "file:vendor-jbrowse/jbrowse-core.tgz",
-    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@jbrowse/core": "^5.0.0-beta.9",
+    "@jbrowse/mobx-state-tree": "^6.6.1",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.2",
     "esbuild": "^0.28.2",
     "mobx": "^7.0.3",
     "mobx-react": "^10.0.2",
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@gmod/newick": "^1.0.3",
-    "@jbrowse/svgcanvas": "8.4.0",
+    "@jbrowse/svgcanvas": "9.0.0",
     "colord": "^2.10.0",
     "flatbush": "^4.6.2",
-    "msa-parsers": "8.4.0"
+    "msa-parsers": "9.0.0"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/MSAView.tsx

@@ -48,7 +48,7 @@ const TrackColumnIndicator = observer(function ({
     mouseClickCol,
     colWidth,
     scrollX,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     rowPanelsWidth,
     resizeHandleWidth,
     totalTrackAreaHeight,
@@ -72,7 +72,7 @@ const TrackColumnIndicator = observer(function ({
     <div
       style={{
         position: 'absolute',
-        left: treeAreaWidth + rowPanelsWidth + resizeHandleWidth,
+        left: effectiveTreeAreaWidth + rowPanelsWidth + resizeHandleWidth,
         top: 0,
         width: msaCanvasWidth,
         height: totalTrackAreaHeight,

package/src/components/MSAViewer.tsx

@@ -105,10 +105,8 @@ export interface MSAViewerProps {
   rowPanels?: RowPanelSpec[]
   /** draw the phylogenetic tree (default true); false leaves a labels-only gutter */
   drawTree?: boolean
-  /** fixed width (px) of the tree/label area */
+  /** fixed width (px) of the tree/label area; unset fits it to the labels and the tree */
   treeAreaWidth?: number
-  /** auto-size the tree/label area to the labels (used when drawTree is false) */
-  autoTreeAreaWidth?: boolean
   /** draw branch lengths (default true); false draws a cladogram */
   showBranchLen?: boolean
   /**
@@ -254,7 +252,6 @@ function Viewer({
   drawTree,
   residueEncoding,
   treeAreaWidth,
-  autoTreeAreaWidth,
   showBranchLen,
   treeOrder,
   treeRoot,
@@ -303,7 +300,6 @@ function Viewer({
       ...(rowPanels ? { rowPanels } : {}),
       ...(drawTree !== undefined ? { drawTree } : {}),
       ...(treeAreaWidth ? { treeAreaWidth } : {}),
-      ...(autoTreeAreaWidth ? { autoTreeAreaWidth } : {}),
       ...(showBranchLen !== undefined ? { showBranchLen } : {}),
       ...(treeOrder ? { treeOrder } : {}),
       ...(treeRoot ? { treeRoot } : {}),

package/src/components/ResizeHandles.tsx

@@ -22,7 +22,7 @@ export const VerticalResizeHandle = observer(function ({
     <DragHandle
       axis="x"
       variant="resizer"
-      getStart={() => model.treeAreaWidth}
+      getStart={() => model.effectiveTreeAreaWidth}
       onDrag={onDrag}
       style={{ width: model.resizeHandleWidth }}
     />

package/src/components/Track.tsx

@@ -44,7 +44,7 @@ const TrackLabel = observer(function TrackLabel({
   const closeMenu = () => {
     setAnchorEl(undefined)
   }
-  const { drawLabels, fontSize, treeAreaWidth: width } = model
+  const { drawLabels, fontSize, effectiveTreeAreaWidth: width } = model
   const {
     model: { name, height },
   } = track

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -49,7 +49,7 @@ const ExportSVGDialog = observer(function ({
   const {
     totalWidth,
     totalHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     rowPanelsWidth,
     turnedOnTracks,
     totalTrackAreaHeight,
@@ -59,7 +59,7 @@ const ExportSVGDialog = observer(function ({
     treeOverviewHeight,
   } = model
   const hasTracks = turnedOnTracks.length > 0
-  const entireWidth = totalWidth + treeAreaWidth + rowPanelsWidth
+  const entireWidth = totalWidth + effectiveTreeAreaWidth + rowPanelsWidth
   const entireHeight =
     totalHeight +
     (includeTracks ? totalTrackAreaHeight : 0) +

package/src/components/header/GoToBox.tsx

@@ -6,9 +6,26 @@ import { observer } from 'mobx-react'
 import { findableRowNames, goTo, rowNameSuggestions } from './goTo.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { AutocompleteRenderInputParams } from '@mui/material'
 
 const label = 'Go to row or column'
 
+// MUI 9 hands renderInput `slotProps`; MUI 7, which every released JBrowse host
+// serves, hands it `inputProps` and no `slotProps` at all
+export function labelledInput(params: AutocompleteRenderInputParams) {
+  const { slotProps, inputProps } = params as Partial<
+    AutocompleteRenderInputParams & { inputProps: object }
+  >
+  return slotProps
+    ? {
+        slotProps: {
+          ...slotProps,
+          htmlInput: { ...slotProps.htmlInput, 'aria-label': label },
+        },
+      }
+    : { inputProps: { ...inputProps, 'aria-label': label } }
+}
+
 const GoToBox = observer(function ({ model }: { model: MsaViewModel }) {
   const [missed, setMissed] = useState(false)
   const names = findableRowNames(model)
@@ -37,10 +54,7 @@ const GoToBox = observer(function ({ model }: { model: MsaViewModel }) {
           error={missed}
           placeholder={label}
           title="A row name, a column number, or name:residue"
-          slotProps={{
-            ...params.slotProps,
-            htmlInput: { ...params.slotProps.htmlInput, 'aria-label': label },
-          }}
+          {...labelledInput(params)}
         />
       )}
     />

package/src/components/header/settingsMenuItems.ts

@@ -76,6 +76,7 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     drawNodeBubbles,
     drawNodeLabels,
     drawLabels,
+    treeAreaWidth,
     showTreeOverview,
     treeOrder,
     treeRoot,
@@ -145,5 +146,12 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     toggle('Draw labels', drawLabels, arg => {
       model.setDrawLabels(arg)
     }),
+    toggle(
+      'Fit tree area to labels and tree',
+      treeAreaWidth === undefined,
+      arg => {
+        model.setTreeAreaWidth(arg ? undefined : model.effectiveTreeAreaWidth)
+      },
+    ),
   ]
 }

package/src/components/tree/CladeLabels.tsx

@@ -24,14 +24,14 @@ const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
     resolvedClades,
     cladeGutterWidth,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     fontSize,
   } = model
   const theme = useTheme()
   if (cladeGutterWidth === 0) {
     return null
   }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
   return (
     <>
       {resolvedClades.map((clade, index) => {
@@ -49,7 +49,7 @@ const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
               position: 'absolute',
               left,
               top: rows[0] * rowHeight,
-              width: treeAreaWidth - left - bracketGap,
+              width: effectiveTreeAreaWidth - left - bracketGap,
               height: cladeHeight(clade, rowHeight),
               display: 'flex',
               alignItems: 'center',

package/src/components/tree/TreeCanvas.tsx

@@ -13,7 +13,13 @@ import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { height, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model
+  const {
+    height,
+    blocksY,
+    effectiveTreeAreaWidth,
+    scrollY,
+    highResScaleFactor,
+  } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -22,7 +28,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  const canvasWidth = treeAreaWidth * highResScaleFactor
+  const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const mouseoverRef = useCanvasAutorun({
     draw: ctx => {
@@ -43,7 +49,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         height,
         position: 'relative',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
       }}
     >
       {/* one transform for the whole block set, matching MSACanvas: the tree
@@ -70,7 +76,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
           position: 'absolute',
           top: 0,
           left: 0,
-          width: treeAreaWidth,
+          width: effectiveTreeAreaWidth,
           height,
           zIndex: 1000,
           pointerEvents: 'none',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -37,9 +37,9 @@ const TreeCanvasBlock = observer(function ({
   )
   const hovered = anchor?.value
 
-  const { treeAreaWidth, blockSize, highResScaleFactor } = model
-  // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
-  const width = treeAreaWidth
+  const { effectiveTreeAreaWidth, blockSize, highResScaleFactor } = model
+  // TreePanel clips to the tree area, so a wider canvas is wasted backing store
+  const width = effectiveTreeAreaWidth
   const height = blockSize
 
   const canvasWidth = width * highResScaleFactor
@@ -121,7 +121,7 @@ const TreeCanvasBlock = observer(function ({
 
       {anchor ? (
         <BaseTooltip clientPoint={anchor.clientPoint}>
-          {anchor.value.name}
+          {anchor.value.label ?? anchor.value.name}
         </BaseTooltip>
       ) : null}
     </>

package/src/components/tree/TreeOverview.tsx

@@ -21,10 +21,10 @@ import type { MsaViewModel } from '../../model.ts'
  * moving across it costs are a blit and two boxes.
  */
 const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth, overviewHeight, highResScaleFactor } = model
+  const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model
   const theme = useTheme()
   const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
-  const width = Math.round(treeAreaWidth * highResScaleFactor)
+  const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor)
   const height = Math.round(overviewHeight * highResScaleFactor)
 
   const ref = useCanvasAutorun({
@@ -34,12 +34,17 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
       const image = treeOverviewImage({
         model,
         theme,
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
         scale: highResScaleFactor,
       })
       ctx.scale(highResScaleFactor, highResScaleFactor)
-      const box = { model, ctx, width: treeAreaWidth, height: overviewHeight }
+      const box = {
+        model,
+        ctx,
+        width: effectiveTreeAreaWidth,
+        height: overviewHeight,
+      }
       if (image) {
         ctx.drawImage(
           image,
@@ -86,7 +91,7 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
         display: 'block',
         flexShrink: 0,
         cursor: 'pointer',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
       }}
       onMouseMove={event => {

package/src/components/tree/TreePanel.tsx

@@ -7,9 +7,15 @@ import TreeCanvas from './TreeCanvas.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth } = model
+  const { effectiveTreeAreaWidth } = model
   return (
-    <div style={{ overflow: 'hidden', flexShrink: 0, width: treeAreaWidth }}>
+    <div
+      style={{
+        overflow: 'hidden',
+        flexShrink: 0,
+        width: effectiveTreeAreaWidth,
+      }}
+    >
       <TreeCanvas model={model} />
     </div>
   )

package/src/components/tree/TreeRuler.tsx

@@ -13,13 +13,17 @@ import type { MsaViewModel } from '../../model.ts'
 // scale bar: without one the branch lengths are drawn to a scale nothing
 // states.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model
+  const { effectiveTreeAreaWidth, marginLeft, treeScaleBar: bar } = model
   const theme = useTheme()
 
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+    <div style={{ flexShrink: 0, width: effectiveTreeAreaWidth }}>
       {bar ? (
-        <svg width={treeAreaWidth} height={h} style={{ display: 'block' }}>
+        <svg
+          width={effectiveTreeAreaWidth}
+          height={h}
+          style={{ display: 'block' }}
+        >
           <ScaleBarSVG
             bar={bar}
             marginLeft={marginLeft}

package/src/components/tree/cladeBrackets.ts

@@ -1,6 +1,7 @@
+import { labelFitFontSize } from '../../constants.ts'
 import { measureTextCanvas } from '../../measureTextCanvas.ts'
 
-import type { ResolvedClade } from '../../types.ts'
+import type { Clade, ResolvedClade } from '../../types.ts'
 
 // The bar of the bracket mark and the space around it, in px.
 export const bracketBarWidth = 3
@@ -11,7 +12,7 @@ export const bracketGap = 4
 export const maxCladeGutterWidth = 140
 
 /** whether a clade draws in the gutter: a bracket, or a highlight with a label */
-export function cladeInGutter(clade: ResolvedClade) {
+export function cladeInGutter(clade: Pick<Clade, 'mark' | 'label'>) {
   return (
     clade.mark === 'bracket' || (clade.mark === 'highlight' && !!clade.label)
   )
@@ -35,7 +36,7 @@ export function cladeLabelHorizontal(
 }
 
 /** the px between the left edge of the gutter and the label's own column */
-export function cladeLabelOffset(clade: ResolvedClade) {
+export function cladeLabelOffset(clade: Pick<Clade, 'mark'>) {
   return clade.mark === 'bracket'
     ? bracketGap + bracketBarWidth + bracketGap
     : bracketGap
@@ -43,27 +44,19 @@ export function cladeLabelOffset(clade: ResolvedClade) {
 
 /**
  * The gutter the bracket mark needs at the right of the tree area: the bar plus
- * the widest label at the tree font, zero where no clade draws there, and at
- * most maxCladeGutterWidth.
+ * the widest label read across at labelFitFontSize, zero where no clade draws
+ * there, and at most maxCladeGutterWidth. The records size it, so a zoom, a
+ * collapse or a focus leaves it as it is, and a renderer clips a label that
+ * outgrows it.
  */
-export function cladeGutterWidth({
-  clades,
-  rowHeight,
-  fontSize,
-}: {
-  clades: ResolvedClade[]
-  rowHeight: number
-  fontSize: number
-}) {
+export function cladeGutterWidth(clades: Pick<Clade, 'mark' | 'label'>[]) {
   let widest = 0
   for (const clade of clades) {
     if (!cladeInGutter(clade)) {
       continue
     }
     const text = clade.label
-      ? cladeLabelHorizontal(clade, rowHeight, fontSize)
-        ? measureTextCanvas(clade.label, fontSize)
-        : fontSize
+      ? measureTextCanvas(clade.label, labelFitFontSize)
       : 0
     widest = Math.max(widest, cladeLabelOffset(clade) + text + bracketGap)
   }

package/src/components/tree/clickMap.ts

@@ -2,6 +2,8 @@ import Flatbush from 'flatbush'
 
 export interface ClickEntry {
   name: string
+  /** the text a tip label draws, which may be cut short */
+  label?: string
   id: string
   branch?: boolean
   minX: number

package/src/components/tree/ellipsize.ts

@@ -0,0 +1,24 @@
+const ellipsis = '…'
+
+/**
+ * the longest prefix of `text`, plus an ellipsis, that measures at most
+ * `room` px
+ */
+export function ellipsize(
+  measure: (text: string) => number,
+  text: string,
+  room: number,
+) {
+  const width = measure(text)
+  if (width <= room) {
+    return { text, width }
+  }
+  for (let n = Math.floor((text.length * room) / width); n > 0; n--) {
+    const truncated = text.slice(0, n).trimEnd() + ellipsis
+    const truncatedWidth = measure(truncated)
+    if (truncatedWidth <= room) {
+      return { text: truncated, width: truncatedWidth }
+    }
+  }
+  return { text: '', width: 0 }
+}