react-msaview-cli 8.0.0 → 8.1.0

package/dist/index.js

@@ -50325,7 +50325,7 @@ var init_legendRows = __esm({
 });
 
 // ../lib/dist/constants.js
-var defaultRowHeight, defaultColWidth, defaultHeight, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, labelReferenceFontSize, minColWidth, minRowHeight, maxCellSize, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, defaultTreeAreaWidth, defaultTreeWidth, defaultShowBranchLen, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
+var defaultRowHeight, defaultColWidth, defaultHeight, defaultScrollX, defaultScrollY, defaultCurrentAlignment, defaultShowDomains, defaultShowDomainLegend, defaultHideGaps, defaultAllowedGappyness, defaultSubFeatureRows, subFeatureRowHeight, domainUnderlineHeight, segmentFeatureTypes, segmentShades, defaultDrawMsaLetters, defaultScrollZoom, scrollZoomAxes, defaultScrollZoomAxis, minLetterRowHeight, minLetterColWidth, minFeatureLabelHeight, labelReferenceFontSize, minColWidth, minRowHeight, maxCellSize, defaultBgColor, defaultColorSchemeName, defaultShowColumnStats, defaultDrawLabels, defaultLabelsAlignRight, defaultTreeAreaWidth, defaultTreeWidth, defaultShowBranchLen, defaultDrawTree, defaultDrawNodeBubbles, defaultDrawNodeLabels, defaultShowTreeOverview, defaultOverviewHeight, maxNeighborJoiningRows, rowTintAlpha, cladeHighlightColor, cladeHighlightAlpha, maxInlineSnapshotBytes, rowPanelHeaderHeight, treeScaleBarHeight, defaultFeaturePanelWidth, msaOverlayZIndex, legendZIndex;
 var init_constants = __esm({
   "../lib/dist/constants.js"() {
     "use strict";
@@ -50357,6 +50357,7 @@ var init_constants = __esm({
     defaultScrollZoomAxis = "both";
     minLetterRowHeight = 8;
     minLetterColWidth = 5;
+    minFeatureLabelHeight = 9;
     labelReferenceFontSize = 16;
     minColWidth = 0.2;
     minRowHeight = 1;
@@ -50746,9 +50747,13 @@ function spanRows(leaves2, bandsByRow) {
   return rows;
 }
 function drawFeatureSpans({ ctx, rows, layout, xOf, colors: colors2, labelOf, labelDrawn, contrastText, xMin, xMax }) {
+  const placed = [];
   for (const { y: y2, bands } of rows) {
     const h2 = layout.height(bands[0].laneCount);
     const headLen = layout.headLength(h2);
+    const rise = layout.headRise?.(h2) ?? 0;
+    const labelled = labelOf !== void 0 && h2 >= minFeatureLabelHeight;
+    placed.length = 0;
     for (const band of bands) {
       const [xStart, xEnd] = xOf(band);
       const w2 = xEnd - xStart;
@@ -50760,37 +50765,54 @@ function drawFeatureSpans({ ctx, rows, layout, xOf, colors: colors2, labelOf, la
       ctx.fillStyle = fill;
       ctx.strokeStyle = stroke;
       const { strand } = band.annotation;
+      const head = strand === void 0 ? 0 : Math.min(headLen, w2);
       if (strand === void 0) {
         ctx.fillRect(xStart, t3, w2, h2);
         ctx.strokeRect(xStart, t3, w2, h2);
       } else {
-        drawGeneArrow({ ctx, x: xStart, t: t3, w: w2, h: h2, headLen, strand });
+        drawGeneArrow({ ctx, x: xStart, t: t3, w: w2, h: h2, head, rise, strand });
+      }
+      if (labelled) {
+        placed.push({ band, xStart, w: w2, t: t3, head, fill });
       }
-      const label = labelOf?.(band);
-      if (label !== void 0) {
-        const fontSize2 = Math.min(h2 - 2, 11);
-        ctx.font = `${fontSize2}px sans-serif`;
-        if (ctx.measureText(label).width + 2 <= w2) {
+    }
+    if (placed.length > 0) {
+      ctx.font = `${Math.min(h2 - 2, 11)}px sans-serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      for (const { band, xStart, w: w2, t: t3, head, fill } of placed) {
+        const label = labelOf(band);
+        if (label !== void 0 && ctx.measureText(label).width + 2 <= w2 - head / 2) {
           labelDrawn?.(band);
           ctx.fillStyle = contrastText(fill);
-          ctx.textAlign = "center";
-          ctx.textBaseline = "middle";
           ctx.fillText(label, xStart + w2 / 2, t3 + h2 / 2);
         }
       }
     }
   }
 }
-function drawGeneArrow({ ctx, x: x2, t: t3, w: w2, h: h2, headLen, strand }) {
-  const dir = strand > 0 ? 1 : -1;
-  const bodyStart = strand > 0 ? x2 : x2 + w2;
-  const bodyEnd = strand > 0 ? x2 + w2 : x2;
+function drawGeneArrow({ ctx, x: x2, t: t3, w: w2, h: h2, head, rise, strand }) {
+  const tip = strand > 0 ? x2 + w2 : x2;
+  const tail = strand > 0 ? x2 : x2 + w2;
+  const flange = strand > 0 ? tip - head : tip + head;
+  const bottom2 = t3 + h2;
+  const crown = t3 - rise;
+  const point = (crown + bottom2) / 2;
   ctx.beginPath();
-  ctx.moveTo(bodyStart, t3);
-  ctx.lineTo(bodyEnd, t3);
-  ctx.lineTo(bodyEnd + dir * headLen, t3 + h2 / 2);
-  ctx.lineTo(bodyEnd, t3 + h2);
-  ctx.lineTo(bodyStart, t3 + h2);
+  if (head >= w2) {
+    ctx.moveTo(tail, crown);
+    ctx.lineTo(tip, point);
+    ctx.lineTo(tail, bottom2);
+  } else {
+    ctx.moveTo(tail, t3);
+    ctx.lineTo(flange, t3);
+    if (rise > 0) {
+      ctx.lineTo(flange, crown);
+    }
+    ctx.lineTo(tip, point);
+    ctx.lineTo(flange, bottom2);
+    ctx.lineTo(tail, bottom2);
+  }
   ctx.closePath();
   ctx.fill();
   ctx.stroke();
@@ -50798,6 +50820,7 @@ function drawGeneArrow({ ctx, x: x2, t: t3, w: w2, h: h2, headLen, strand }) {
 var init_drawFeatureSpans = __esm({
   "../lib/dist/components/msa/drawFeatureSpans.js"() {
     "use strict";
+    init_constants();
   }
 });
 
@@ -50814,9 +50837,8 @@ function renderBoxFeatureCanvasBlock({ model: model2, theme, offsetX, offsetY, c
   ctx.scale(k2, k2);
   ctx.translate(-offsetX, rowHeight / 2 - offsetY);
   const barHeight = domainUnderline ? Math.min(domainUnderlineHeight, rowHeight) : rowHeight;
-  const drawSegmentLabels = !featureLabels && !showMsaLetters && !subFeatureRows && barHeight >= 9;
+  const drawSegmentLabels = !featureLabels && !showMsaLetters && !subFeatureRows;
   const labelled = drawSegmentLabels ? /* @__PURE__ */ new Set() : void 0;
-  const cull = rowHeight + colWidth;
   drawFeatureSpans({
     ctx,
     rows: spanRows(getVisibleLeaves({ model: model2, offsetY, blockSizeY: by }), domainBands),
@@ -50825,17 +50847,19 @@ function renderBoxFeatureCanvasBlock({ model: model2, theme, offsetX, offsetY, c
       // shares out the row height between them instead
       height: (laneCount) => subFeatureRows ? Math.min(subFeatureRowHeight, rowHeight / laneCount) : barHeight,
       top: (y2, lane, h2) => y2 - rowHeight + (subFeatureRows ? lane * h2 : domainUnderline ? rowHeight - h2 : 0),
-      // the head keeps its full size on an underline bar, since a head as short
-      // as the bar reads as a nub rather than as a direction
-      headLength: (h2) => domainUnderline ? rowHeight / 2 : h2
+      headLength: (h2) => domainUnderline ? rowHeight / 2 : h2,
+      // a head only as tall as an underline bar tapers over ten pixels of
+      // three, which reads as nothing; it takes the lower two fifths of the
+      // row instead, leaving the letters above it
+      headRise: (h2) => domainUnderline ? Math.max(0, rowHeight * 0.4 - h2) : 0
     },
     xOf: (band) => [band.startCol * colWidth, band.endCol * colWidth],
     colors: featureColors,
     labelOf: (band) => featureLabels?.get(band.annotation) ?? (labelled && !labelled.has(band.annotation.accession) ? segmentLabels.get(band.annotation.accession) : void 0),
     labelDrawn: (band) => labelled?.add(band.annotation.accession),
     contrastText: contrastTextFn(theme),
-    xMin: offsetX - cull,
-    xMax: offsetX + bx + cull
+    xMin: offsetX,
+    xMax: offsetX + bx
   });
 }
 var init_renderBoxFeatureCanvasBlock = __esm({
@@ -51070,16 +51094,15 @@ function renderMSABlock({ model: model2, offsetX, offsetY, ctx, theme, highResSc
   ctx.resetTransform();
 }
 function drawTilesAndText({ model: model2, ctx, theme, visibleLeaves, xStart, xEnd, referenceSeq, drawTiles, rasterTiles }) {
-  const { bgColor, columns, colWidth, rowHeight, relativeTo, showMsaLetters, subFeatureRows, domainUnderline, domainBandsByStart } = model2;
+  const { bgColor, columns, colWidth, rowHeight, fontSize: fontSize2, relativeTo, showMsaLetters, subFeatureRows, domainUnderline, domainBandsByStart, featureColors } = model2;
   const tiles = drawTiles && bgColor;
   const paintTiles = tiles && !rasterTiles;
   if (paintTiles || showMsaLetters) {
-    const needsColor = paintTiles || showMsaLetters;
     const tileColor = tileColorFn(model2);
     const contrastText = contrastTextFn(theme);
     const offsetXAligned = xStart * colWidth;
     const halfColWidth = colWidth / 2;
-    const quarterRowHeight = rowHeight / 4;
+    const baselineOffset = rowHeight / 2 - fontSize2 / 4;
     const overDomains = !drawTiles && !subFeatureRows && !domainUnderline;
     for (let i2 = 0, l1 = visibleLeaves.length; i2 < l1; i2++) {
       const node2 = visibleLeaves[i2];
@@ -51088,14 +51111,14 @@ function drawTilesAndText({ model: model2, ctx, theme, visibleLeaves, xStart, xE
       const str = columns.get(name)?.slice(xStart, xEnd);
       if (str) {
         const tileY = y2 - rowHeight;
-        const textY = y2 - quarterRowHeight;
+        const textY = y2 - baselineOffset;
         const bandAt = domainBandCursor(overDomains ? domainBandsByStart.get(name) : void 0);
         for (let j2 = 0, l2 = str.length; j2 < l2; j2++) {
           const col = xStart + j2;
           const letter = str[j2];
           const x2 = j2 * colWidth + offsetXAligned;
           const isMatchingReference = referenceSeq && name !== relativeTo && letter === referenceSeq[j2];
-          const color2 = needsColor ? tileColor(col, letter) : void 0;
+          const color2 = tileColor(col, letter);
           if (paintTiles) {
             ctx.fillStyle = isMatchingReference ? theme.palette.action.hover : color2 || theme.palette.background.default;
             ctx.fillRect(x2, tileY, colWidth, rowHeight);
@@ -51104,7 +51127,7 @@ function drawTilesAndText({ model: model2, ctx, theme, visibleLeaves, xStart, xE
             const covering = bandAt(col);
             ctx.fillStyle = covering ? (
               // on top of a domain box: contrast against the box fill
-              contrastText(model2.fillPalette[covering.annotation.accession])
+              contrastText(featureColors.get(covering.annotation)?.fill)
             ) : isMatchingReference ? (
               // the dot sits on the faint reference-match wash, which is
               // the theme's background with a little of its text color in it
@@ -51593,7 +51616,7 @@ function drawSequenceLogo({ ctx, colStats, colorScheme, maxBits, textColor, colW
   }
 }
 function drawTrackBlock({ model: model2, ctx, track, offsetX, offsetY = 0, theme, blockSizeXOverride, highResScaleFactorOverride }) {
-  const { blockSize, bgColor, colWidth, colStats, colorScheme: modelColorScheme, fontSize: fontSize2, rowHeight, showMsaLetters, alphabetMaxBits, highResScaleFactor } = model2;
+  const { blockSize, colWidth, highResScaleFactor } = model2;
   const { id, kind, height: trackHeight, barColor, arcColor, arcs, customColorScheme, data } = track.model;
   const blockSizeX = blockSizeXOverride ?? blockSize;
   const k2 = highResScaleFactorOverride ?? highResScaleFactor;
@@ -51629,9 +51652,9 @@ function drawTrackBlock({ model: model2, ctx, track, offsetX, offsetY = 0, theme
     case "logo": {
       drawSequenceLogo({
         ctx,
-        colStats,
-        colorScheme: modelColorScheme,
-        maxBits: alphabetMaxBits,
+        colStats: model2.colStats,
+        colorScheme: model2.colorScheme,
+        maxBits: model2.alphabetMaxBits,
         textColor,
         colWidth,
         trackHeight,
@@ -51659,13 +51682,14 @@ function drawTrackBlock({ model: model2, ctx, track, offsetX, offsetY = 0, theme
       break;
     }
     case "text": {
+      const { bgColor, fontSize: fontSize2, rowHeight, showMsaLetters } = model2;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       setFontSize(ctx, fontSize2);
       drawTextTrackContent({
         ctx,
         data,
-        colorScheme: customColorScheme ?? modelColorScheme,
+        colorScheme: customColorScheme ?? model2.colorScheme,
         contrastText: contrastTextFn(theme),
         bgColor,
         drawLetters: showMsaLetters,
@@ -75836,7 +75860,7 @@ function createMakeStyles(params) {
   function makeStyles2() {
     return function(cssObjectByRuleNameOrGetCssObjectByRuleName) {
       const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function" ? cssObjectByRuleNameOrGetCssObjectByRuleName : () => cssObjectByRuleNameOrGetCssObjectByRuleName;
-      return function useStyles26(_params, muiStyleOverridesParams) {
+      return function useStyles25(_params, muiStyleOverridesParams) {
         const theme = useTheme5();
         const { css: css2, cx: cx2 } = useCssAndCx();
         const classes2 = (0, import_react14.useMemo)(() => {
@@ -83864,10 +83888,6 @@ function useWheelScroll({ ref, onScrollX, onScrollY, onZoom, scrollZoom }) {
     };
   }, [mouseDragging, onScrollX, onScrollY]);
   function onMouseDown(event) {
-    const target = event.target;
-    if (target.draggable || target.dataset.resizer) {
-      return;
-    }
     if (event.button === 0) {
       prevX.current = event.clientX;
       prevY.current = event.clientY;
@@ -84198,7 +84218,7 @@ var init_Track = __esm({
         } }, drawLabels ? name : ""),
         import_react37.default.createElement(
           IconButton_default,
-          { className: classes2.button, style: {
+          { className: classes2.button, "aria-label": `${name} track menu`, style: {
             width: trackLabelHeight,
             height: trackLabelHeight,
             flexShrink: 0
@@ -84215,7 +84235,7 @@ var init_Track = __esm({
           import_react37.default.createElement(MenuItem_default, { dense: true, onClick: () => {
             model2.toggleTrack(track.model.id);
             closeMenu();
-          } }, "Close"),
+          } }, "Hide track"),
           import_react37.default.createElement(MenuItem_default, { dense: true, onClick: () => {
             model2.queueDialog((onClose) => [
               TrackInfoDialog2,
@@ -84838,10 +84858,15 @@ var init_FeatureDialog = __esm({
       );
     });
     FeatureTable = (0, import_mobx_react12.observer)(function({ model: model2 }) {
-      const { annotationTypes, annotations, fillPalette } = model2;
+      const { annotationTypes, annotations, featureColors, fillPalette } = model2;
       const counts = /* @__PURE__ */ new Map();
+      const swatches = /* @__PURE__ */ new Map();
       for (const annot of annotations) {
-        counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1);
+        const { accession } = annot;
+        counts.set(accession, (counts.get(accession) ?? 0) + 1);
+        if (!swatches.has(accession)) {
+          swatches.set(accession, featureColors.get(annot)?.fill ?? fillPalette[accession]);
+        }
       }
       return import_react40.default.createElement(
         import_react40.default.Fragment,
@@ -84880,7 +84905,7 @@ var init_FeatureDialog = __esm({
               import_react40.default.createElement("div", { style: {
                 width: 20,
                 height: 20,
-                background: fillPalette[accession]
+                background: swatches.get(accession)
               } })
             ),
             import_react40.default.createElement(TableCell_default, null, accession),
@@ -85470,6 +85495,9 @@ function parseAll(text2, opts) {
   for (const line2 of lines) {
     let match2;
     if (formatStartRegex.test(line2)) {
+      if (stock) {
+        db.push(stock);
+      }
       stock = createStockholm();
       treeContinues = false;
     } else if (formatEndRegex.test(line2)) {
@@ -86068,7 +86096,7 @@ var init_AnnotationFileDialog = __esm({
         import_react41.default.createElement(
           DialogActions_default,
           null,
-          import_react41.default.createElement(Button_default, { variant: "contained", color: "primary", disabled: loading, onClick: () => {
+          import_react41.default.createElement(Button_default, { variant: "contained", color: "primary", disabled: loading || (choice === "file" ? !file : !url.trim()), onClick: () => {
             ;
             (async () => {
               setLoading(true);
@@ -86085,7 +86113,10 @@ var init_AnnotationFileDialog = __esm({
                 setLoading(false);
               }
             })();
-          } }, "Open annotations")
+          } }, "Open annotations"),
+          import_react41.default.createElement(Button_default, { variant: "contained", color: "secondary", onClick: () => {
+            handleClose();
+          } }, "Cancel")
         )
       );
     });
@@ -90835,13 +90866,13 @@ function measureScrollbarSize(element, scrollbarSize) {
   if (cached !== void 0 && cached.devicePixelRatio === devicePixelRatio2 && cached.measuredDirectly) {
     return cached.size;
   }
-  const computed2 = view?.getComputedStyle(htmlElement);
-  const canScrollY = computed2?.overflowY === "auto" || computed2?.overflowY === "scroll";
-  const canScrollX = computed2?.overflowX === "auto" || computed2?.overflowX === "scroll";
+  const computed3 = view?.getComputedStyle(htmlElement);
+  const canScrollY = computed3?.overflowY === "auto" || computed3?.overflowY === "scroll";
+  const canScrollX = computed3?.overflowX === "auto" || computed3?.overflowX === "scroll";
   const hasScrollY = canScrollY && htmlElement.scrollHeight > htmlElement.clientHeight;
   const hasScrollX = canScrollX && htmlElement.scrollWidth > htmlElement.clientWidth;
-  const borderWidth = parseCSSPixelValue(computed2?.borderLeftWidth) + parseCSSPixelValue(computed2?.borderRightWidth);
-  const borderHeight = parseCSSPixelValue(computed2?.borderTopWidth) + parseCSSPixelValue(computed2?.borderBottomWidth);
+  const borderWidth = parseCSSPixelValue(computed3?.borderLeftWidth) + parseCSSPixelValue(computed3?.borderRightWidth);
+  const borderHeight = parseCSSPixelValue(computed3?.borderTopWidth) + parseCSSPixelValue(computed3?.borderBottomWidth);
   const directSize = Math.max(hasScrollY ? htmlElement.offsetWidth - htmlElement.clientWidth - borderWidth : 0, hasScrollX ? htmlElement.offsetHeight - htmlElement.clientHeight - borderHeight : 0);
   if (hasScrollY || hasScrollX) {
     const size6 = Math.max(0, directSize);
@@ -90860,8 +90891,8 @@ function measureScrollbarSize(element, scrollbarSize) {
   scrollDiv.style.height = "99px";
   scrollDiv.style.position = "absolute";
   scrollDiv.style.overflow = "scroll";
-  if (computed2?.scrollbarWidth) {
-    scrollDiv.style.scrollbarWidth = computed2.scrollbarWidth;
+  if (computed3?.scrollbarWidth) {
+    scrollDiv.style.scrollbarWidth = computed3.scrollbarWidth;
   }
   scrollDiv.className = "scrollDiv";
   element.appendChild(scrollDiv);
@@ -121076,8 +121107,7 @@ var init_SequenceTextArea = __esm({
       },
       dialogContent: {
         background: theme.palette.action.selected,
-        margin: 4,
-        minWidth: "80em"
+        margin: 4
       }
     }));
   }
@@ -121223,7 +121253,7 @@ function ExportSVGDialog({ model: model2, onClose }) {
             });
           });
         }
-      }, exporting ? "Exporting\u2026" : "Submit"),
+      }, exporting ? "Exporting\u2026" : "Export"),
       import_react53.default.createElement(Button_default, { variant: "contained", color: "secondary", onClick: () => {
         onClose();
       } }, "Cancel")
@@ -121444,44 +121474,25 @@ var init_Warning = __esm({
 });
 
 // ../lib/dist/components/header/LoadWarnings.js
-var import_react58, import_mobx_react19, useStyles22, LoadWarnings, LoadWarnings_default;
+var import_react58, import_mobx_react19, LoadWarnings, LoadWarnings_default;
 var init_LoadWarnings = __esm({
   "../lib/dist/components/header/LoadWarnings.js"() {
     "use strict";
     import_react58 = __toESM(require_react(), 1);
-    init_tss_react();
     init_Warning();
     init_material();
     import_mobx_react19 = __toESM(require_dist3(), 1);
-    useStyles22 = makeStyles()((theme) => ({
-      warning: {
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-        margin: "auto",
-        marginLeft: 10,
-        whiteSpace: "nowrap",
-        color: theme.palette.warning.main,
-        cursor: "pointer"
-      }
-    }));
     LoadWarnings = (0, import_mobx_react19.observer)(function({ model: model2 }) {
       const { warnings } = model2;
-      const { classes: classes2 } = useStyles22();
       if (warnings.length === 0) {
         return null;
       }
       return import_react58.default.createElement(
         Tooltip_default,
         { title: `${warnings.join(" ")} (click to dismiss)` },
-        import_react58.default.createElement(
-          Typography_default,
-          { component: "div", className: classes2.warning, onClick: () => {
-            model2.clearWarnings();
-          } },
-          import_react58.default.createElement(Warning_default, { fontSize: "small" }),
-          warnings.length > 1 ? `${warnings.length} warnings` : "Warning"
-        )
+        import_react58.default.createElement(Button_default, { "aria-label": "Dismiss warnings", color: "warning", size: "small", startIcon: import_react58.default.createElement(Warning_default, { fontSize: "small" }), style: { margin: "auto", marginLeft: 10, whiteSpace: "nowrap" }, onClick: () => {
+          model2.clearWarnings();
+        } }, warnings.length > 1 ? `${warnings.length} warnings` : "Warning")
       );
     });
     LoadWarnings_default = LoadWarnings;
@@ -121534,10 +121545,10 @@ function msaSettingsMenuItems(model2) {
       model2.setDrawMsaLetters(arg2);
     }),
     // inverted: bgColor colors the tile, and off colors the letter
-    toggle("Color letters instead of background of tiles", !bgColor, (arg2) => {
+    toggle("Color letters, not cells", !bgColor, (arg2) => {
       model2.setBgColor(!arg2);
     }),
-    toggle("Enable hiding gappy columns?", hideGaps, (arg2) => {
+    toggle("Hide gappy columns", hideGaps, (arg2) => {
       model2.setHideGaps(arg2);
     })
   ];
@@ -121695,7 +121706,7 @@ var init_LinkOff = __esm({
 function size4(bytes) {
   return bytes < 1e6 ? `${Math.round(bytes / 1e3)} kB` : `${(bytes / 1e6).toFixed(1)} MB`;
 }
-var import_react62, import_mobx_react23, useStyles23, UnshareableDataWarning, UnshareableDataWarning_default;
+var import_react62, import_mobx_react23, useStyles22, UnshareableDataWarning, UnshareableDataWarning_default;
 var init_UnshareableDataWarning = __esm({
   "../lib/dist/components/header/UnshareableDataWarning.js"() {
     "use strict";
@@ -121704,7 +121715,7 @@ var init_UnshareableDataWarning = __esm({
     init_LinkOff();
     init_material();
     import_mobx_react23 = __toESM(require_dist3(), 1);
-    useStyles23 = makeStyles()((theme) => ({
+    useStyles22 = makeStyles()((theme) => ({
       warning: {
         display: "flex",
         alignItems: "center",
@@ -121718,7 +121729,7 @@ var init_UnshareableDataWarning = __esm({
     }));
     UnshareableDataWarning = (0, import_mobx_react23.observer)(function({ model: model2 }) {
       const { unshareableData } = model2;
-      const { classes: classes2 } = useStyles23();
+      const { classes: classes2 } = useStyles22();
       if (unshareableData.length === 0) {
         return null;
       }
@@ -121948,7 +121959,7 @@ var version3;
 var init_version3 = __esm({
   "../lib/dist/version.js"() {
     "use strict";
-    version3 = "8.0.0";
+    version3 = "8.1.0";
   }
 });
 
@@ -121972,7 +121983,7 @@ function AboutDialog({ onClose }) {
         "MSAView ",
         version3,
         " (",
-        import_react66.default.createElement(Link_default, { href: "https://github.com/gmod/react-msaview" }, "Github"),
+        import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "https://github.com/gmod/react-msaview" }, "Github"),
         ")"
       ),
       import_react66.default.createElement(
@@ -121986,11 +121997,11 @@ function AboutDialog({ onClose }) {
             null,
             "We use some color schemes from the",
             " ",
-            import_react66.default.createElement(Link_default, { href: "https://github.com/biotite-dev/biotite" }, "biotite"),
+            import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "https://github.com/biotite-dev/biotite" }, "biotite"),
             " ",
             "project, and their license is reproduced",
             " ",
-            import_react66.default.createElement(Link_default, { href: "https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst" }, "here")
+            import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst" }, "here")
           )
         ),
         import_react66.default.createElement(
@@ -122001,7 +122012,7 @@ function AboutDialog({ onClose }) {
             null,
             "See this page for some information on jalview colorings",
             " ",
-            import_react66.default.createElement(Link_default, { href: "https://www.jalview.org/help/html/colourSchemes/" }, "here")
+            import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "https://www.jalview.org/help/html/colourSchemes/" }, "here")
           )
         ),
         import_react66.default.createElement(
@@ -122012,7 +122023,7 @@ function AboutDialog({ onClose }) {
             null,
             "See this page for some info on the clustal, cinema, maeditor, and lesk color schemes",
             " ",
-            import_react66.default.createElement(Link_default, { href: "http://www.bioinformatics.nl/~berndb/aacolour.html" }, "here")
+            import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "http://www.bioinformatics.nl/~berndb/aacolour.html" }, "here")
           )
         ),
         import_react66.default.createElement(
@@ -122023,7 +122034,7 @@ function AboutDialog({ onClose }) {
             null,
             "See this paper about the flower color scheme",
             " ",
-            import_react66.default.createElement(Link_default, { href: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/" }, "here")
+            import_react66.default.createElement(Link_default, { target: "_blank", rel: "noopener", href: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/" }, "here")
           )
         )
       )
@@ -122077,7 +122088,7 @@ var init_Header = __esm({
       }, [model2]);
       return import_react67.default.createElement(
         "div",
-        { ref, style: { display: "flex" } },
+        { ref, style: { display: "flex", flexWrap: "wrap" } },
         import_react67.default.createElement(FileMenu_default, { model: model2 }),
         import_react67.default.createElement(ColorSchemeMenu_default, { model: model2 }),
         import_react67.default.createElement(TreeSettingsMenu_default, { model: model2 }),
@@ -122479,9 +122490,7 @@ var init_MSACanvas = __esm({
         onZoom,
         scrollZoom
       });
-      return import_react74.default.createElement("div", { ref, "data-testid": "msa_canvas", onMouseDown, onMouseUp, onMouseLeave: (event) => {
-        event.preventDefault();
-      }, style: {
+      return import_react74.default.createElement("div", { ref, "data-testid": "msa_canvas", onMouseDown, onMouseUp, style: {
         position: "relative",
         height: height2,
         width: msaCanvasWidth,
@@ -122664,17 +122673,17 @@ var init_featureFields = __esm({
 
 // ../lib/dist/components/PortalTooltip.js
 function PortalTooltip({ clientX, clientY, children }) {
-  const { classes: classes2 } = useStyles24();
+  const { classes: classes2 } = useStyles23();
   return (0, import_react_dom4.createPortal)(import_react78.default.createElement("div", { className: classes2.tooltip, style: { left: clientX + 12, top: clientY + 12 } }, children), document.body);
 }
-var import_react78, import_react_dom4, useStyles24;
+var import_react78, import_react_dom4, useStyles23;
 var init_PortalTooltip = __esm({
   "../lib/dist/components/PortalTooltip.js"() {
     "use strict";
     import_react78 = __toESM(require_react(), 1);
     init_tss_react();
     import_react_dom4 = __toESM(require_react_dom(), 1);
-    useStyles24 = makeStyles()((theme) => ({
+    useStyles23 = makeStyles()((theme) => ({
       tooltip: {
         position: "fixed",
         pointerEvents: "none",
@@ -122954,7 +122963,7 @@ var init_TreeBranchMenu = __esm({
         { anchorReference: "anchorPosition", anchorPosition: {
           left: node2.x,
           top: node2.y
-        }, transitionDuration: 0, keepMounted: true, open: Boolean(node2), onClose },
+        }, transitionDuration: 0, open: true, onClose },
         import_react83.default.createElement(MenuItem_default, { dense: true, disabled: true }, node2.name),
         import_react83.default.createElement(MenuItem_default, { dense: true, onClick: () => {
           model2.toggleCollapsed(node2.id);
@@ -123038,7 +123047,7 @@ var init_TreeNodeMenu = __esm({
         { anchorReference: "anchorPosition", anchorPosition: {
           top: node2.y,
           left: node2.x
-        }, transitionDuration: 0, keepMounted: true, open: Boolean(node2), onClose },
+        }, transitionDuration: 0, open: true, onClose },
         import_react85.default.createElement(MenuItem_default, { dense: true, disabled: true }, name),
         import_react85.default.createElement(MenuItem_default, { dense: true, onClick: () => {
           model2.queueDialog((onClose2) => [
@@ -123657,7 +123666,7 @@ var init_useTreeHover = __esm({
 });
 
 // ../lib/dist/components/tree/TreeCanvasBlock.js
-var import_react87, import_mobx_react41, useStyles25, TreeCanvasBlock, TreeCanvasBlock_default;
+var import_react87, import_mobx_react41, useStyles24, TreeCanvasBlock, TreeCanvasBlock_default;
 var init_TreeCanvasBlock = __esm({
   "../lib/dist/components/tree/TreeCanvasBlock.js"() {
     "use strict";
@@ -123671,16 +123680,16 @@ var init_TreeCanvasBlock = __esm({
     init_TreeNodeMenu();
     init_renderTreeCanvas();
     init_useTreeHover();
-    useStyles25 = makeStyles()(() => ({
+    useStyles24 = makeStyles()((theme) => ({
       hover: {
         position: "absolute",
         pointerEvents: "none",
         zIndex: 100,
-        background: "rgba(0,0,0,0.1)"
+        background: theme.palette.action.hover
       }
     }));
     TreeCanvasBlock = (0, import_mobx_react41.observer)(function({ model: model2, offsetY }) {
-      const { classes: classes2 } = useStyles25();
+      const { classes: classes2 } = useStyles24();
       const theme = useTheme4();
       const [branchMenu, setBranchMenu] = (0, import_react87.useState)();
       const [nodeMenu, setNodeMenu] = (0, import_react87.useState)();
@@ -123803,9 +123812,7 @@ var init_TreeCanvas = __esm({
       });
       return import_react88.default.createElement(
         "div",
-        { ref, onMouseDown, onMouseUp, onMouseLeave: (event) => {
-          event.preventDefault();
-        }, style: {
+        { ref, onMouseDown, onMouseUp, style: {
           height: height2,
           position: "relative",
           width: treeAreaWidth
@@ -124162,7 +124169,7 @@ var init_ImportForm = __esm({
           { style: { width: "50%" } },
           error ? import_react93.default.createElement(ErrorMessage, { error }) : null,
           import_react93.default.createElement(Typography_default, null, "Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or a tree file (Newick format)."),
-          import_react93.default.createElement(Typography_default, { color: "error" }, "Note: you can open up just an MSA or just a tree, both are not required. Some MSA files e.g. stockholm format have an embedded tree also and this is fine, and opening a separate tree file is not required.")
+          import_react93.default.createElement(Typography_default, { color: "text.secondary" }, "An MSA alone or a tree alone is enough, and a Stockholm file with an embedded tree needs no separate tree file.")
         ),
         import_react93.default.createElement(
           "div",
@@ -124236,16 +124243,7 @@ var init_Loading2 = __esm({
       return import_react94.default.createElement(
         "div",
         { style: { display: "flex", alignItems: "center", gap: 12, padding: 20 } },
-        import_react94.default.createElement(
-          "svg",
-          { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-          import_react94.default.createElement("style", null, `@keyframes spinner { to { transform: rotate(360deg); } }`),
-          import_react94.default.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "#ccc", strokeWidth: "3", fill: "none" }),
-          import_react94.default.createElement("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"
-          } })
-        ),
+        import_react94.default.createElement(CircularProgress_default, { size: 24 }),
         import_react94.default.createElement(Typography_default, { variant: "h6" }, status?.msg ?? "Loading..."),
         status?.onCancel ? import_react94.default.createElement(Button_default, { variant: "outlined", size: "small", onClick: () => status.onCancel?.() }, "Cancel") : null
       );
@@ -124272,8 +124270,9 @@ var init_Loading2 = __esm({
 // ../lib/dist/calculateBlocks.js
 function calculateBlocks({ mapSize, blockSize, viewportPos, viewportSize }) {
   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++) {
     blocks.push(tile * blockSize);
@@ -125675,9 +125674,30 @@ function featureLabelMap(annotations, field) {
   }
   return labels;
 }
-function featurePanelSpans({ panel, width: width3, rowHeight, colWidth, domainBands, annotationsByRow, shifts }) {
+function strandpileLanes(rows) {
+  const piled = rows.map(([name, bands]) => {
+    const reverse = packDomainLanes(bands.filter((b2) => b2.annotation.strand === -1));
+    const forward = packDomainLanes(bands.filter((b2) => b2.annotation.strand !== -1));
+    return { name, forward, reverse };
+  });
+  const up = Math.max(0, ...piled.map((p2) => p2.forward[0]?.laneCount ?? 0));
+  const down = Math.max(0, ...piled.map((p2) => p2.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((b2) => ({ ...b2, lane: up - 1 - b2.lane, laneCount })),
+      ...reverse.map((b2) => ({ ...b2, lane: up + b2.lane, laneCount }))
+    ]
+  ]));
+}
+function panelLanes(panel, rows) {
+  return panel.position === "strandpile" ? strandpileLanes(rows) : new Map(rows.map(([name, bands]) => [name, packDomainLanes(bands)]));
+}
+function featurePanelSpans({ panel, width: width3, colWidth, domainBands, annotationsByRow, shifts }) {
   if (panel.x === "column") {
-    return new Map([...domainBands].map(([name, bands]) => [
+    return panelLanes(panel, [...domainBands].map(([name, bands]) => [
       name,
       bands.map((band) => ({
         ...band,
@@ -125705,17 +125725,17 @@ function featurePanelSpans({ panel, width: width3, rowHeight, colWidth, domainBa
       max3 = Math.max(max3, end);
     }
   }
-  const drawable = Math.max(1, width3 - rowHeight);
+  const drawable = Math.max(1, width3 - 1);
   const scale = max3 > min3 ? drawable / (max3 - min3) : 0;
-  return new Map(shifted.map(([name, features]) => [
+  return panelLanes(panel, shifted.map(([name, features]) => [
     name,
-    packDomainLanes(features.map(({ annotation, start, end }) => ({
+    features.map(({ annotation, start, end }) => ({
       annotation,
       xStart: (start - min3) * scale,
       xEnd: (end - min3) * scale,
       startCol: start,
       endCol: end - (end - start) * laneOverlap
-    })))
+    }))
   ]));
 }
 function resolveFeatureScale(field, scale, annotations) {
@@ -125975,11 +125995,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
      * the user's explicit hide choices per annotation accession, keyed by
@@ -126216,10 +126232,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) {
-      self.warnings = [...self.warnings, warning];
+      if (!self.warnings.includes(warning)) {
+        self.warnings = [...self.warnings, warning];
+      }
     },
     /**
      * #action
@@ -126827,7 +126845,7 @@ function stateModelFactory() {
      */
     get insertionPositions() {
       const { blanks, rows } = this;
-      if (blanks.length === 0 || !self.hideGapsEffective) {
+      if (blanks.length === 0) {
         return /* @__PURE__ */ new Map();
       }
       const result = /* @__PURE__ */ new Map();
@@ -127048,7 +127066,7 @@ function stateModelFactory() {
      * cladogram mode. The tree's scale bar uses it.
      */
     get pxPerBranchLength() {
-      const max3 = maxLength(this.root);
+      const max3 = this.rootToTipLength;
       return this.showBranchLenEffective && max3 ? self.treeWidth / max3 : 0;
     },
     /**
@@ -127091,7 +127109,107 @@ function stateModelFactory() {
     get showTreeText() {
       return self.drawLabels && self.rowHeight >= minLetterRowHeight;
     }
-  })).views((self) => ({
+  })).views((self) => {
+    const columnTrackModels = /* @__PURE__ */ new WeakMap();
+    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 width3 = MSA?.getWidth() ?? 0;
+        const project = (track, items, fill) => {
+          if (!track.row) {
+            return items;
+          }
+          const out = Array.from({ length: width3 }, () => fill);
+          const index3 = self.seqPosIndex(track.row);
+          items.forEach((item, seqPos) => {
+            const col = index3?.[seqPos];
+            if (col !== void 0) {
+              out[col] = item;
+            }
+          });
+          return out;
+        };
+        const skip2 = (items) => hideGapsEffective ? dropBlanks(blanks, items) : items;
+        const resolve = (track, pos) => {
+          const col = track.row ? self.seqPosIndex(track.row)?.[pos - 1] : pos - 1;
+          if (col === void 0 || col < 0 || col >= width3) {
+            return void 0;
+          }
+          return hideGapsEffective ? visibleColsBefore(blanks, col) : col;
+        };
+        return new Map(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 !== void 0 && end !== void 0 && start < end ? { start, end, color: arc.color } : void 0;
+            }).filter(notEmpty);
+            return [track.id, { arcs }];
+          }
+          if (track.kind === "bar") {
+            const max3 = track.max ?? 1;
+            const values4 = skip2(project(track, track.values ?? [], 0)).map((v2) => Math.min(1, Math.max(0, v2 / max3)));
+            return [track.id, { values: values4 }];
+          }
+          const data = skip2(project(track, (track.data ?? "").split(""), " "));
+          return [track.id, { data: data.join("") }];
+        }));
+      },
+      /**
+       * #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, heightKey = kind, given) {
+        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) {
+        let computedModel = columnTrackModels.get(track);
+        if (!computedModel) {
+          computedModel = (0, import_mobx5.computed)(() => {
+            const heightKey = resizableKinds.has(track.kind) ? ownHeightKey(track.id) : void 0;
+            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_default
+            };
+          });
+          columnTrackModels.set(track, computedModel);
+        }
+        return computedModel.get();
+      },
+      /**
+       * #getter
+       */
+      get columnTrackModels() {
+        return self.columnTracks.map((track) => this.columnTrackModel(track));
+      }
+    };
+  }).views((self) => ({
     /**
      * #getter
      */
@@ -127172,87 +127290,6 @@ function stateModelFactory() {
         ReactComponent: TrackBlocks_default
       }));
     },
-    /**
-     * #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 width3 = MSA?.getWidth() ?? 0;
-      const project = (track, items, fill) => {
-        if (!track.row) {
-          return items;
-        }
-        const out = Array.from({ length: width3 }, () => fill);
-        const index3 = self.seqPosIndex(track.row);
-        items.forEach((item, seqPos) => {
-          const col = index3?.[seqPos];
-          if (col !== void 0) {
-            out[col] = item;
-          }
-        });
-        return out;
-      };
-      const skip2 = (items) => hideGapsEffective ? dropBlanks(blanks, items) : items;
-      const resolve = (track, pos) => {
-        const col = track.row ? self.seqPosIndex(track.row)?.[pos - 1] : pos - 1;
-        if (col === void 0 || col < 0 || col >= width3) {
-          return void 0;
-        }
-        return hideGapsEffective ? visibleColsBefore(blanks, col) : col;
-      };
-      return new Map(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 !== void 0 && end !== void 0 && start < end ? { start, end, color: arc.color } : void 0;
-          }).filter(notEmpty);
-          return [track.id, { arcs }];
-        }
-        if (track.kind === "bar") {
-          const max3 = track.max ?? 1;
-          const values4 = skip2(project(track, track.values ?? [], 0)).map((v2) => Math.min(1, Math.max(0, v2 / max3)));
-          return [track.id, { values: values4 }];
-        }
-        const data = skip2(project(track, (track.data ?? "").split(""), " "));
-        return [track.id, { data: data.join("") }];
-      }));
-    },
-    /**
-     * #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, heightKey = kind, given) {
-      return self.trackHeights.get(heightKey) ?? given ?? defaultTrackHeights[kind] ?? self.rowHeight;
-    },
-    /**
-     * #getter
-     */
-    get columnTrackModels() {
-      return self.columnTracks.map((track) => {
-        const heightKey = resizableKinds.has(track.kind) ? ownHeightKey(track.id) : void 0;
-        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_default
-        };
-      });
-    },
     /**
      * #getter
      * the consensus secondary structure as a track, when there is one. A
@@ -127268,7 +127305,7 @@ function stateModelFactory() {
             name: "Base pairs",
             kind: "arc",
             heightKey: "arc",
-            height: this.trackHeight("arc"),
+            height: self.trackHeight("arc"),
             arcs
           },
           ReactComponent: TrackBlocks_default
@@ -127313,7 +127350,7 @@ function stateModelFactory() {
         model: {
           ...model2,
           heightKey: resizableKinds.has(model2.kind) ? model2.kind : void 0,
-          height: this.trackHeight(model2.kind)
+          height: self.trackHeight(model2.kind)
         },
         ReactComponent: TrackBlocks_default
       }));
@@ -127322,7 +127359,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 : []
@@ -128063,12 +128100,6 @@ function stateModelFactory() {
       const categorical = createPaletteMap(this.categoricalDomainTypes.map((d3) => d3.accession));
       return { ...segments, ...categorical };
     },
-    get strokePalette() {
-      return transform(this.fillPalette, ([key, val]) => [
-        key,
-        outlineColor2(val)
-      ]);
-    },
     /**
      * #getter
      * the encoding coloring the overlay's spans, undefined when none does,
@@ -128310,20 +128341,6 @@ function stateModelFactory() {
         propertyConservation
       });
     },
-    /**
-     * #getter
-     * `columnStatsAt` for the hovered column, undefined when nothing is
-     * hovered
-     */
-    get mouseOverColumnStats() {
-      const { mouseCol, colStats, conservation, propertyConservation } = self;
-      return mouseCol === void 0 ? void 0 : columnStats({
-        col: mouseCol,
-        colStats,
-        conservation,
-        propertyConservation
-      });
-    },
     /**
      * #method
      */
@@ -128379,7 +128396,6 @@ function stateModelFactory() {
             spans: featurePanelSpans({
               panel,
               width: width3,
-              rowHeight: self.rowHeight,
               colWidth: self.colWidth,
               domainBands: this.domainBands,
               annotationsByRow: self.annotationsByRow,
@@ -128625,7 +128641,7 @@ function stateModelFactory() {
       }
       let cladesSeeded = false;
       addDisposer(self, (0, import_mobx5.autorun)(() => {
-        if (cladesSeeded || !self.dataInitialized || self.clades.length === 0) {
+        if (cladesSeeded || !self.dataInitialized || self.treeFilehandle && !self.data.tree || self.clades.length === 0) {
           return;
         }
         cladesSeeded = true;
@@ -128751,6 +128767,12 @@ function stateModelFactory() {
           self.setAnnotations([]);
         }
       }));
+      addDisposer(self, (0, import_mobx5.autorun)(() => {
+        const { annotations, rowNamesSet } = self;
+        if (annotations.length > 0 && rowNamesSet.size > 0 && !annotations.some((a3) => rowNamesSet.has(a3.id))) {
+          self.addWarning(`0 of ${annotations.length} annotations name a row in this alignment`);
+        }
+      }));
       loadOnFilehandleChange({
         what: "annotations",
         optional: true,
@@ -129768,6 +129790,37 @@ async function runGeneStructure(options2) {
 init_src2();
 import * as fs4 from "node:fs";
 
+// src/fetchWithRetry.ts
+var RETRYABLE = /* @__PURE__ */ new Set([408, 425, 429, 500, 502, 503, 504]);
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function retryAfterMs(response) {
+  const header = response.headers.get("retry-after");
+  const seconds = header ? Number(header) : Number.NaN;
+  return Number.isFinite(seconds) && seconds > 0 ? Math.min(seconds, 60) * 1e3 : void 0;
+}
+async function fetchWithRetry(url, { attempts = 4, baseDelayMs = 1e3 } = {}) {
+  let lastError;
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    let wait = baseDelayMs * 2 ** attempt;
+    try {
+      const response = await fetch(url);
+      if (!RETRYABLE.has(response.status)) {
+        return response;
+      }
+      lastError = new Error(`${response.status} ${response.statusText}`);
+      wait = retryAfterMs(response) ?? wait;
+    } catch (e3) {
+      lastError = e3;
+    }
+    if (attempt < attempts - 1) {
+      await delay(wait);
+    }
+  }
+  throw new Error(`${url} failed after ${attempts} attempts: ${lastError}`);
+}
+
 // src/interpro-cache.ts
 import * as fs3 from "node:fs";
 import * as os from "node:os";
@@ -129807,35 +129860,6 @@ function writeCached(release, database, accession, value) {
 function cacheLocation() {
   return CACHE_DIR;
 }
-var RETRYABLE = /* @__PURE__ */ new Set([408, 425, 429, 500, 502, 503, 504]);
-function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-function retryAfterMs(response) {
-  const header = response.headers.get("retry-after");
-  const seconds = header ? Number(header) : Number.NaN;
-  return Number.isFinite(seconds) && seconds > 0 ? Math.min(seconds, 60) * 1e3 : void 0;
-}
-async function fetchWithRetry(url, { attempts = 4, baseDelayMs = 1e3 } = {}) {
-  let lastError;
-  for (let attempt = 0; attempt < attempts; attempt++) {
-    let wait = baseDelayMs * 2 ** attempt;
-    try {
-      const response = await fetch(url);
-      if (!RETRYABLE.has(response.status)) {
-        return response;
-      }
-      lastError = new Error(`${response.status} ${response.statusText}`);
-      wait = retryAfterMs(response) ?? wait;
-    } catch (e3) {
-      lastError = e3;
-    }
-    if (attempt < attempts - 1) {
-      await delay(wait);
-    }
-  }
-  throw new Error(`${url} failed after ${attempts} attempts: ${lastError}`);
-}
 
 // src/interpro-precomputed.ts
 var API2 = "https://www.ebi.ac.uk/interpro/api";
@@ -129865,12 +129889,27 @@ async function fetchRelease() {
   const json = await res.json();
   return json.databases.interpro.version;
 }
+async function fetchNotFoundRetried(url, attempts = 3) {
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    const res = await fetchWithRetry(url);
+    if (res.status !== 404) {
+      return res;
+    }
+    if (attempt < attempts - 1) {
+      await new Promise((resolve) => setTimeout(resolve, 1e3 * 2 ** attempt));
+    }
+  }
+  return void 0;
+}
 async function fetchEntries(accession, database) {
   const results = [];
   let url = `${API2}/entry/${database}/protein/uniprot/${accession}/?page_size=200`;
   while (url) {
-    const res = await fetchWithRetry(url);
-    if (res.status === 204 || res.status === 404) {
+    const res = await fetchNotFoundRetried(url);
+    if (!res) {
+      return void 0;
+    }
+    if (res.status === 204) {
       break;
     }
     if (!res.ok) {
@@ -129894,6 +129933,7 @@ async function runInterProPrecomputed(options2) {
     `InterPro release ${release}; reading precomputed ${database} matches...`
   );
   const entriesByAccession = /* @__PURE__ */ new Map();
+  const unresolved = [];
   let fetched = 0;
   let cached = 0;
   for (const [i2, accession] of distinct.entries()) {
@@ -129911,14 +129951,23 @@ async function runInterProPrecomputed(options2) {
 ${i2} of ${distinct.length} accessions are cached; re-run to resume from ${accession}.`
         );
       }
-      writeCached(release, database, accession, entries3);
-      fetched++;
+      if (entries3) {
+        writeCached(release, database, accession, entries3);
+        fetched++;
+      } else {
+        unresolved.push(accession);
+      }
     }
-    entriesByAccession.set(accession, entries3);
+    entriesByAccession.set(accession, entries3 ?? []);
+    const count2 = entries3 ? `${entries3.length} ${database} entries` : "no answer";
     console.log(
-      `  [${i2 + 1}/${distinct.length}] ${accession}: ${entries3.length} ${database} entries${hit ? " (cached)" : ""}`
+      `  [${i2 + 1}/${distinct.length}] ${accession}: ${count2}${hit ? " (cached)" : ""}`
     );
-    if (entries3.length === 0) {
+    if (!entries3) {
+      console.warn(
+        `    the API answered 404 for ${accession} every time; it carries no domains in the GFF, and a re-run tries it again`
+      );
+    } else if (entries3.length === 0) {
       console.warn(
         `    no ${database} matches for ${accession}; check it is a UniProtKB accession and that --database is the right member database`
       );
@@ -129939,6 +129988,11 @@ ${i2} of ${distinct.length} accessions are cached; re-run to resume from ${acces
     )
   );
   console.log(`${fetched} fetched, ${cached} from ${cacheLocation()}`);
+  if (unresolved.length > 0) {
+    console.warn(
+      `${unresolved.length} of ${distinct.length} accessions did not resolve: ${unresolved.join(", ")}. Re-run to try them again.`
+    );
+  }
   if (options2.msaFile) {
     checkLengths(
       options2.msaFile,
@@ -129998,14 +130052,14 @@ ${sequence.seq}`,
   return response.text();
 }
 async function checkStatus(jobId) {
-  const response = await fetch(`${BASE_URL}/status/${jobId}`);
+  const response = await fetchWithRetry(`${BASE_URL}/status/${jobId}`);
   if (!response.ok) {
     throw new Error(`Failed to check status: ${response.statusText}`);
   }
   return response.text();
 }
 async function getResults(jobId) {
-  const response = await fetch(`${BASE_URL}/result/${jobId}/json`);
+  const response = await fetchWithRetry(`${BASE_URL}/result/${jobId}/json`);
   if (!response.ok) {
     throw new Error(`Failed to get results: ${response.statusText}`);
   }
@@ -130494,6 +130548,19 @@ function readFormat(format2) {
   }
   return format2;
 }
+function readNumber(name, value, integer2 = false) {
+  const n2 = integer2 ? Number.parseInt(value, 10) : Number.parseFloat(value);
+  if (Number.isNaN(n2)) {
+    throw new Error(`--${name} must be a number, got "${value}"`);
+  }
+  return n2;
+}
+function readInt(name, value) {
+  return readNumber(name, value, true);
+}
+function readList(value) {
+  return value.split(",").map((s2) => s2.trim());
+}
 async function main() {
   const { values: values4, positionals } = parseArgs({ allowPositionals: true, options });
   if (values4.help || positionals.length === 0) {
@@ -130515,13 +130582,13 @@ async function main() {
       gffFile: values4.gff,
       outputFile,
       colorScheme: values4["color-scheme"],
-      width: parseInt(values4.width, 10),
-      height: parseInt(values4.height, 10),
-      treeAreaWidth: values4["tree-area-width"] !== void 0 ? parseInt(values4["tree-area-width"], 10) : void 0,
-      colWidth: values4["col-width"] !== void 0 ? parseFloat(values4["col-width"]) : void 0,
-      rowHeight: values4["row-height"] !== void 0 ? parseFloat(values4["row-height"]) : void 0,
+      width: readInt("width", values4.width),
+      height: readInt("height", values4.height),
+      treeAreaWidth: values4["tree-area-width"] !== void 0 ? readInt("tree-area-width", values4["tree-area-width"]) : void 0,
+      colWidth: values4["col-width"] !== void 0 ? readNumber("col-width", values4["col-width"]) : void 0,
+      rowHeight: values4["row-height"] !== void 0 ? readNumber("row-height", values4["row-height"]) : void 0,
       format: format2,
-      tracks: values4.tracks?.split(",").map((s2) => s2.trim()),
+      tracks: values4.tracks !== void 0 ? readList(values4.tracks) : void 0,
       viewport: values4.viewport,
       minimap: values4.minimap
     });
@@ -130542,7 +130609,7 @@ async function main() {
       dockerImage: values4["docker-image"],
       interproscanPath: values4["interproscan-path"],
       dataDir: values4["interproscan-data"],
-      programs: values4.programs.split(","),
+      programs: readList(values4.programs),
       email: values4.email,
       format: format2
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-msaview-cli",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -20,8 +20,8 @@
     "@types/node": "^26.5.1",
     "esbuild": "^0.28.2",
     "mobx-react": "^10.0.2",
-    "msa-parsers": "8.0.0",
-    "react-msaview": "8.0.0"
+    "msa-parsers": "8.1.0",
+    "react-msaview": "8.1.0"
   },
   "dependencies": {
     "jsdom": "^30.0.1"