react-msaview 7.0.0 → 8.0.0

package/dist/components/tree/TreeCanvasBlock.js

@@ -2,27 +2,13 @@ import React, { useState } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { createPortal } from 'react-dom';
 import { useCanvasAutorun } from '../../useCanvasAutorun.js';
+import PortalTooltip from '../PortalTooltip.js';
 import TreeBranchMenu from './TreeBranchMenu.js';
 import TreeNodeMenu from './TreeNodeMenu.js';
 import { renderTreeCanvas } from './renderTreeCanvas.js';
 import { useTreeHover } from './useTreeHover.js';
-const useStyles = makeStyles()(theme => ({
-    tooltip: {
-        position: 'fixed',
-        pointerEvents: 'none',
-        zIndex: 10000,
-        backgroundColor: theme.palette.grey[700],
-        color: theme.palette.common.white,
-        padding: '4px 8px',
-        borderRadius: 4,
-        fontSize: 12,
-        whiteSpace: 'nowrap',
-        maxWidth: 300,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
+const useStyles = makeStyles()(() => ({
     hover: {
         position: 'absolute',
         pointerEvents: 'none',
@@ -37,8 +23,7 @@ const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
     const [nodeMenu, setNodeMenu] = useState();
     const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } = useTreeHover({ model, offsetY });
     const { treeAreaWidth, blockSize, highResScaleFactor } = model;
-    // TreePanel clips to treeAreaWidth, so anything wider is backing store the
-    // viewer never sees -- it was 600px of it per block, at dpr squared
+    // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
     const width = treeAreaWidth;
     const height = blockSize;
     const canvasWidth = width * highResScaleFactor;
@@ -100,9 +85,7 @@ const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
                 width: hovered.maxX - hovered.minX,
                 height: hovered.maxY - hovered.minY,
             } })) : null,
-        hovered
-            ? createPortal(React.createElement("div", { className: classes.tooltip, style: { left: hovered.clientX + 12, top: hovered.clientY + 12 } }, hovered.name), document.body)
-            : null));
+        hovered ? (React.createElement(PortalTooltip, { clientX: hovered.clientX, clientY: hovered.clientY }, hovered.name)) : null));
 });
 export default TreeCanvasBlock;
 //# sourceMappingURL=TreeCanvasBlock.js.map

package/dist/components/tree/TreeCanvasBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeCanvasBlock.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvasBlock.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeCanvasBlock.js","sourceRoot":"","sources":["../../../src/components/tree/TreeCanvasBlock.tsx"],"names":[],"mappings":"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"}

package/dist/components/tree/TreeOverview.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MsaViewModel } from '../../model.ts';
+/**
+ * The brush on the row scale: the whole tree drawn small above the tree panel,
+ * with the focused subtree boxed. A click focuses the subtree under the
+ * pointer, and a click inside the box clears the focus.
+ *
+ * The tree itself comes off a cached offscreen canvas, so the frames a pointer
+ * moving across it costs are a blit and two boxes.
+ */
+declare const TreeOverview: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default TreeOverview;

package/dist/components/tree/TreeOverview.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
+import { useCanvasAutorun } from '../../useCanvasAutorun.js';
+import { drawTreeOverview, drawTreeOverviewBox, treeOverviewImage, } from './renderTreeOverview.js';
+/**
+ * The brush on the row scale: the whole tree drawn small above the tree panel,
+ * with the focused subtree boxed. A click focuses the subtree under the
+ * pointer, and a click inside the box clears the focus.
+ *
+ * The tree itself comes off a cached offscreen canvas, so the frames a pointer
+ * moving across it costs are a blit and two boxes.
+ */
+const TreeOverview = observer(function ({ model }) {
+    const { treeAreaWidth, overviewHeight, highResScaleFactor } = model;
+    const theme = useTheme();
+    const [hover, setHover] = useState();
+    const width = Math.round(treeAreaWidth * highResScaleFactor);
+    const height = Math.round(overviewHeight * highResScaleFactor);
+    const ref = useCanvasAutorun({
+        draw: ctx => {
+            ctx.resetTransform();
+            ctx.clearRect(0, 0, width, height);
+            const image = treeOverviewImage({
+                model,
+                theme,
+                width: treeAreaWidth,
+                height: overviewHeight,
+                scale: highResScaleFactor,
+            });
+            ctx.scale(highResScaleFactor, highResScaleFactor);
+            const box = { model, ctx, width: treeAreaWidth, height: overviewHeight };
+            if (image) {
+                ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, box.width, box.height);
+            }
+            else {
+                drawTreeOverview({ ...box, theme });
+            }
+            if (hover) {
+                drawTreeOverviewBox({
+                    ...box,
+                    rows: hover.rows,
+                    color: theme.palette.text.secondary,
+                });
+            }
+            const focus = model.treeOverviewFocusRows;
+            if (focus) {
+                drawTreeOverviewBox({
+                    ...box,
+                    rows: focus,
+                    color: theme.palette.text.primary,
+                });
+            }
+        },
+        width,
+        height,
+        deps: [model, theme, hover],
+    });
+    return (React.createElement("canvas", { "data-testid": "tree_overview", ref: ref, width: width, height: height, style: {
+            display: 'block',
+            flexShrink: 0,
+            cursor: 'pointer',
+            width: treeAreaWidth,
+            height: overviewHeight,
+        }, onMouseMove: event => {
+            const hit = model.treeOverviewHit(event.nativeEvent.offsetY);
+            setHover(prev => (prev?.id === hit?.id ? prev : hit));
+        }, onMouseLeave: () => {
+            setHover(undefined);
+        }, onClick: event => {
+            model.treeOverviewClick(event.nativeEvent.offsetY);
+        } }));
+});
+export default TreeOverview;
+//# sourceMappingURL=TreeOverview.js.map

package/dist/components/tree/TreeOverview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeOverview.js","sourceRoot":"","sources":["../../../src/components/tree/TreeOverview.tsx"],"names":[],"mappings":"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"}

package/dist/components/tree/TreeRuler.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { scaleBarLength } from './scaleBar.js';
-const BAR_HEIGHT = 22;
-// The gutter above the tree panel. It spans the resize handle too, so whatever
-// follows it in the top row starts exactly where the alignment canvas does --
-// MainArea has TreePanel + VerticalResizeHandle before the alignment. A
-// phylogram fills it with a scale bar: without one the branch lengths are drawn
-// to a scale nothing states.
+import { treeScaleBarHeight as h } from '../../constants.js';
+// The gutter above the tree panel, the width of the tree area, so the strip
+// headers beside it start where the strips do. A phylogram fills it with a
+// scale bar: without one the branch lengths are drawn to a scale nothing
+// states.
 const TreeRuler = observer(({ model }) => {
-    const { treeAreaWidth, resizeHandleWidth, marginLeft, pxPerBranchLength } = model;
+    const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model;
     const theme = useTheme();
-    const width = treeAreaWidth + resizeHandleWidth;
-    const bar = scaleBarLength(pxPerBranchLength, treeAreaWidth - marginLeft * 2);
-    return (React.createElement("div", { style: { flexShrink: 0, width } }, bar ? (React.createElement("svg", { width: width, height: BAR_HEIGHT, style: { display: 'block' }, color: theme.palette.text.primary },
-        React.createElement("text", { x: marginLeft, y: BAR_HEIGHT - 9, fontSize: 10, fill: "currentColor" }, bar.label),
-        React.createElement("path", { d: `M${marginLeft} ${BAR_HEIGHT - 7} v6 h${bar.px} v-6`, fill: "none", stroke: "currentColor" }))) : null));
+    return (React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } }, bar ? (React.createElement("svg", { width: treeAreaWidth, height: h, style: { display: 'block' }, color: theme.palette.text.primary },
+        React.createElement("text", { x: marginLeft, y: h - 9, fontSize: 10, fill: "currentColor" }, bar.label),
+        React.createElement("path", { d: `M${marginLeft} ${h - 7} v6 h${bar.px} v-6`, fill: "none", stroke: "currentColor" }))) : null));
 });
 export default TreeRuler;
 //# sourceMappingURL=TreeRuler.js.map

package/dist/components/tree/TreeRuler.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeRuler.js","sourceRoot":"","sources":["../../../src/components/tree/TreeRuler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI9C,MAAM,UAAU,GAAG,EAAE,CAAA;AAErB,+EAA+E;AAC/E,8EAA8E;AAC9E,wEAAwE;AACxE,gFAAgF;AAChF,6BAA6B;AAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GACvE,KAAK,CAAA;IACP,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,aAAa,GAAG,iBAAiB,CAAA;IAC/C,MAAM,GAAG,GAAG,cAAc,CAAC,iBAAiB,EAAE,aAAa,GAAG,UAAU,GAAG,CAAC,CAAC,CAAA;IAE7E,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,IACjC,GAAG,CAAC,CAAC,CAAC,CACL,6BACE,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QAEjC,8BACE,CAAC,EAAE,UAAU,EACb,CAAC,EAAE,UAAU,GAAG,CAAC,EACjB,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,cAAc,IAElB,GAAG,CAAC,KAAK,CACL;QACP,8BACE,CAAC,EAAE,IAAI,UAAU,IAAI,UAAU,GAAG,CAAC,QAAQ,GAAG,CAAC,EAAE,MAAM,EACvD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,GACrB,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"TreeRuler.js","sourceRoot":"","sources":["../../../src/components/tree/TreeRuler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,kBAAkB,IAAI,CAAC,EAAE,MAAM,oBAAoB,CAAA;AAI5D,4EAA4E;AAC5E,2EAA2E;AAC3E,yEAAyE;AACzE,UAAU;AACV,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,KAAK,CAAA;IAC9D,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAChD,GAAG,CAAC,CAAC,CAAC,CACL,6BACE,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC3B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;QAEjC,8BAAM,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAC,cAAc,IAC7D,GAAG,CAAC,KAAK,CACL;QACP,8BACE,CAAC,EAAE,IAAI,UAAU,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC,EAAE,MAAM,EAC9C,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,GACrB,CACE,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/tree/cladeBrackets.d.ts

@@ -0,0 +1,25 @@
+import type { ResolvedClade } from '../../types.ts';
+export declare const bracketBarWidth = 3;
+export declare const bracketGap = 4;
+export declare const maxCladeGutterWidth = 140;
+/** whether a clade draws in the gutter: a bracket, or a highlight with a label */
+export declare function cladeInGutter(clade: ResolvedClade): boolean;
+/** the pixel height of the rows a clade covers */
+export declare function cladeHeight(clade: ResolvedClade, rowHeight: number): number;
+/**
+ * Whether a label reads across the rows. It does where they are taller than the
+ * font, and runs up the bar where they are not.
+ */
+export declare function cladeLabelHorizontal(clade: ResolvedClade, rowHeight: number, fontSize: number): boolean;
+/** the px between the left edge of the gutter and the label's own column */
+export declare function cladeLabelOffset(clade: ResolvedClade): number;
+/**
+ * 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.
+ */
+export declare function cladeGutterWidth({ clades, rowHeight, fontSize, }: {
+    clades: ResolvedClade[];
+    rowHeight: number;
+    fontSize: number;
+}): number;

package/dist/components/tree/cladeBrackets.js

@@ -0,0 +1,51 @@
+import { measureTextCanvas } from '../../measureTextCanvas.js';
+// The bar of the bracket mark and the space around it, in px.
+export const bracketBarWidth = 3;
+export const bracketGap = 4;
+// The widest gutter the bracket mark takes. A longer label is clipped, so one
+// long name cannot squeeze the tree it annotates.
+export const maxCladeGutterWidth = 140;
+/** whether a clade draws in the gutter: a bracket, or a highlight with a label */
+export function cladeInGutter(clade) {
+    return (clade.mark === 'bracket' || (clade.mark === 'highlight' && !!clade.label));
+}
+/** the pixel height of the rows a clade covers */
+export function cladeHeight(clade, rowHeight) {
+    return (clade.rows[1] - clade.rows[0] + 1) * rowHeight;
+}
+/**
+ * Whether a label reads across the rows. It does where they are taller than the
+ * font, and runs up the bar where they are not.
+ */
+export function cladeLabelHorizontal(clade, rowHeight, fontSize) {
+    return cladeHeight(clade, rowHeight) >= fontSize;
+}
+/** the px between the left edge of the gutter and the label's own column */
+export function cladeLabelOffset(clade) {
+    return clade.mark === 'bracket'
+        ? bracketGap + bracketBarWidth + bracketGap
+        : bracketGap;
+}
+/**
+ * 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.
+ */
+export function cladeGutterWidth({ clades, rowHeight, fontSize, }) {
+    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
+            : 0;
+        widest = Math.max(widest, cladeLabelOffset(clade) + text + bracketGap);
+    }
+    // a whole pixel, so the room the renderers measure against covers the label
+    // the measurement here sized the gutter for
+    return Math.min(maxCladeGutterWidth, Math.ceil(widest));
+}
+//# sourceMappingURL=cladeBrackets.js.map

package/dist/components/tree/cladeBrackets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cladeBrackets.js","sourceRoot":"","sources":["../../../src/components/tree/cladeBrackets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAI9D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAA;AAChC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAA;AAE3B,8EAA8E;AAC9E,kDAAkD;AAClD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAEtC,kFAAkF;AAClF,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,OAAO,CACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAC1E,CAAA;AACH,CAAC;AAED,kDAAkD;AAClD,MAAM,UAAU,WAAW,CAAC,KAAoB,EAAE,SAAiB;IACjE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAA;AACxD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAoB,EACpB,SAAiB,EACjB,QAAgB;IAEhB,OAAO,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,QAAQ,CAAA;AAClD,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,gBAAgB,CAAC,KAAoB;IACnD,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS;QAC7B,CAAC,CAAC,UAAU,GAAG,eAAe,GAAG,UAAU;QAC3C,CAAC,CAAC,UAAU,CAAA;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,QAAQ,GAKT;IACC,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,SAAQ;QACV,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK;YACtB,CAAC,CAAC,oBAAoB,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,CAAC;gBAChD,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC;gBAC1C,CAAC,CAAC,QAAQ;YACZ,CAAC,CAAC,CAAC,CAAA;QACL,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,UAAU,CAAC,CAAA;IACxE,CAAC;IACD,4EAA4E;IAC5E,4CAA4C;IAC5C,OAAO,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AACzD,CAAC"}

package/dist/components/tree/dialogs/TreeNodeInfoDialog.js

@@ -6,8 +6,8 @@ import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
 import SequenceTextArea from '../../SequenceTextArea.js';
 const TreeNodeInfoDialog = observer(function ({ info, model, nodeName, onClose, }) {
-    const { treeMetadata, rows } = model;
-    const metadata = treeMetadata[nodeName];
+    const { rows } = model;
+    const metadata = model.rowDataOf(nodeName);
     const res = rows.find(f => f[0] === nodeName);
     return (React.createElement(Dialog, { onClose: () => {
             onClose();

package/dist/components/tree/dialogs/TreeNodeInfoDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNodeInfoDialog.js","sourceRoot":"","sources":["../../../../src/components/tree/dialogs/TreeNodeInfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,UAAU,MAAM,8DAA8D,CAAA;AACrF,OAAO,QAAQ,MAAM,4DAA4D,CAAA;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,gBAAgB,MAAM,2BAA4B,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,GAMR;IACC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;IACvC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAA;IAC7C,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,CAAA;QACX,CAAC,EACD,IAAI,QACJ,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,IAAI;QAEb,oBAAC,aAAa;YACZ,oBAAC,QAAQ,IAAC,KAAK,EAAC,YAAY;gBAC1B,oBAAC,UAAU,IAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAI,CACxC;YACX,oBAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,IACvB,GAAG,CAAC,CAAC,CAAC,CACL,oBAAC,gBAAgB,IAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAI,CACjC,CAAC,CAAC,CAAC,CACF,sDAA6B,CAC9B,CACQ;YACV,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB;gBAC9B,oBAAC,UAAU,IAAC,UAAU,EAAE,QAAQ,GAAI,CAC3B,CACZ,CAAC,CAAC,CAAC,IAAI,CACM,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"TreeNodeInfoDialog.js","sourceRoot":"","sources":["../../../../src/components/tree/dialogs/TreeNodeInfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,UAAU,MAAM,8DAA8D,CAAA;AACrF,OAAO,QAAQ,MAAM,4DAA4D,CAAA;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,gBAAgB,MAAM,2BAA4B,CAAA;AAIzD,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,GAMR;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAA;IAC7C,OAAO,CACL,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,CAAA;QACX,CAAC,EACD,IAAI,QACJ,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAC,IAAI;QAEb,oBAAC,aAAa;YACZ,oBAAC,QAAQ,IAAC,KAAK,EAAC,YAAY;gBAC1B,oBAAC,UAAU,IAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAI,CACxC;YACX,oBAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,IACvB,GAAG,CAAC,CAAC,CAAC,CACL,oBAAC,gBAAgB,IAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAI,CACjC,CAAC,CAAC,CAAC,CACF,sDAA6B,CAC9B,CACQ;YACV,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB;gBAC9B,oBAAC,UAAU,IAAC,UAAU,EAAE,QAAQ,GAAI,CAC3B,CACZ,CAAC,CAAC,CAAC,IAAI,CACM,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/tree/renderTreeCanvas.js

@@ -1,7 +1,8 @@
-import { calcDepthToLeaf } from '../../hierarchy.js';
+import { calcDepthToLeaf, nodeCoveringRows } from '../../hierarchy.js';
 import { setFontSize } from '../../setFontSize.js';
 import { getVisibleLeaves } from '../getVisibleLeaves.js';
 import { drawHighlightLabel, highlightLabelHeight, highlightRowFill, } from '../msa/renderHighlights.js';
+import { bracketBarWidth, bracketGap } from './cladeBrackets.js';
 const radius = 2.5;
 const d = radius * 2;
 // How far outside a block a node's row-center can sit and still draw into it: a
@@ -17,12 +18,12 @@ function inYBlock(y, offsetY, by, pad) {
 }
 /**
  * Every node whose subtree reaches into the block, skipping the subtrees that
- * do not. A subtree's leaves are one contiguous run of rows -- clusterLayout
- * records the run as xMin/xMax -- so a block of a 200k-tip tree visits a few
- * dozen nodes instead of every one of them, three times over.
+ * do not. A subtree's leaves are one contiguous run of rows, recorded by
+ * clusterLayout as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
+ * nodes.
  *
- * A link out of a visited node is still drawn even when the child it reaches is
- * pruned, which is what keeps a branch that crosses the block from vanishing.
+ * A link out of a visited node is drawn even when its child is pruned, so a
+ * branch crossing the block stays visible.
  */
 function forEachNodeInBlock(root, offsetY, by, pad, cb) {
     const top = offsetY - pad;
@@ -57,9 +58,10 @@ export function getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) {
     return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * tipX;
 }
 function renderTree({ offsetY, ctx, model, theme, tipX, maxDepthToLeaf, blockSizeYOverride, }) {
-    const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model;
+    const { hierarchy, showBranchLenEffective: showBranchLen, blockSize, branchColors, } = model;
     const by = blockSizeYOverride ?? blockSize;
-    ctx.strokeStyle = theme.palette.text.primary;
+    const defaultStroke = theme.palette.text.primary;
+    ctx.strokeStyle = defaultStroke;
     forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), source => {
         const sy = source.x;
         const sx = getNodeX(source, showBranchLen, tipX, maxDepthToLeaf);
@@ -78,6 +80,10 @@ function renderTree({ offsetY, ctx, model, theme, tipX, maxDepthToLeaf, blockSiz
             // optimization that allows us to skip drawing most tree links outside the
             // block
             if (offsetY + by >= y1 && y2 >= offsetY) {
+                // the edge belongs to the child, whose id the branch channel colors
+                if (branchColors) {
+                    ctx.strokeStyle = branchColors.get(target.data.id) ?? defaultStroke;
+                }
                 ctx.beginPath();
                 ctx.moveTo(sx, sy);
                 ctx.lineTo(sx, ty);
@@ -86,9 +92,10 @@ function renderTree({ offsetY, ctx, model, theme, tipX, maxDepthToLeaf, blockSiz
             }
         }
     });
+    ctx.strokeStyle = defaultStroke;
 }
 function renderCollapsedTriangles({ ctx, clickMap, offsetY, model, theme, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet, }) {
-    const { hierarchy, showBranchLenEffective: showBranchLen, blockSize, rowHeight, fontSize, marginLeft: ml, } = model;
+    const { hierarchy, showBranchLenEffective: showBranchLen, blockSize, rowHeight, fontSize, marginLeft: ml, branchColors, } = model;
     // nothing collapsed is the common case, and the traversal below visits every
     // node in the tree on every block of every redraw
     if (collapsedSet.size === 0) {
@@ -111,7 +118,7 @@ function renderCollapsedTriangles({ ctx, clickMap, offsetY, model, theme, tipX,
                 ctx.lineTo(baseX, y - halfHeight);
                 ctx.lineTo(baseX, y + halfHeight);
                 ctx.closePath();
-                ctx.fillStyle = theme.palette.action.disabled;
+                ctx.fillStyle = branchColors?.get(id) ?? theme.palette.action.disabled;
                 ctx.fill();
                 ctx.strokeStyle = theme.palette.text.primary;
                 ctx.stroke();
@@ -141,7 +148,7 @@ function renderCollapsedTriangles({ ctx, clickMap, offsetY, model, theme, tipX,
 }
 // the bubbles are click targets whether or not they are painted, so this pass
 // always runs and `draw` only decides whether it also strokes the circles
-function renderNodeBubbles({ ctx, clickMap, offsetY, model, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet, draw, }) {
+function renderNodeBubbles({ ctx, theme, clickMap, offsetY, model, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet, draw, }) {
     const { hierarchy, showBranchLenEffective: showBranchLen, blockSize, marginLeft: ml, } = model;
     const by = blockSizeYOverride ?? blockSize;
     forEachNodeInBlock(hierarchy, offsetY, by, blockPad(model), node => {
@@ -155,8 +162,10 @@ function renderNodeBubbles({ ctx, clickMap, offsetY, model, tipX, maxDepthToLeaf
         if (node.height >= 1 && inYBlock(y, offsetY, by, blockPad(model))) {
             const isCollapsed = collapsedSet.has(id);
             if (draw) {
-                ctx.strokeStyle = 'black';
-                ctx.fillStyle = isCollapsed ? 'black' : 'white';
+                ctx.strokeStyle = theme.palette.text.primary;
+                ctx.fillStyle = isCollapsed
+                    ? theme.palette.text.primary
+                    : theme.palette.background.default;
                 ctx.beginPath();
                 ctx.arc(x, y, radius, 0, 2 * Math.PI);
                 ctx.fill();
@@ -178,8 +187,33 @@ function renderNodeBubbles({ ctx, clickMap, offsetY, model, tipX, maxDepthToLeaf
         }
     });
 }
+// The label a newick file puts on an internal node, which is where a bootstrap
+// or posterior support value lands: ((A,B)95,(C,D)80);. withId falls back to the
+// path-derived id for an unnamed node, so a node whose name is its id has no
+// label of its own and an ungated pass prints node-0-1-1 across the tree.
+function renderNodeLabels({ ctx, theme, offsetY, model, tipX, maxDepthToLeaf, blockSizeYOverride, }) {
+    const { hierarchy, showBranchLenEffective: showBranchLen, blockSize, fontSize, } = model;
+    const by = blockSizeYOverride ?? blockSize;
+    const pad = blockPad(model);
+    setFontSize(ctx, Math.max(6, fontSize - 3));
+    ctx.fillStyle = theme.palette.text.primary;
+    ctx.textAlign = 'right';
+    forEachNodeInBlock(hierarchy, offsetY, by, pad, node => {
+        const { id, name } = node.data;
+        if (node.height < 1 || name === id) {
+            return;
+        }
+        const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf);
+        const y = node.x;
+        if (x !== undefined && inYBlock(y, offsetY, by, pad)) {
+            ctx.fillText(name, x - radius - 1, y - radius - 1);
+        }
+    });
+    ctx.textAlign = 'start';
+    setFontSize(ctx, fontSize);
+}
 function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepthToLeaf, blockSizeYOverride, collapsedSet, }) {
-    const { fontSize, showBranchLenEffective: showBranchLen, treeMetadata, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree, labelWidthMap, labelWidthScale, } = model;
+    const { fontSize, showBranchLenEffective: showBranchLen, tipLabelColors, blockSize, labelsAlignRight, drawTree, treeAreaWidthMinusMargin, marginLeft, noTree, labelWidthMap, labelWidthScale, } = model;
     const by = blockSizeYOverride ?? blockSize;
     // labels only exist for leaves, which are laid out top to bottom, so take the
     // same slice the MSA renderer uses instead of walking every tip per block
@@ -197,7 +231,7 @@ function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepth
     for (const node of visibleLeaves) {
         const { data: { name, id }, } = node;
         const y = node.x;
-        const displayName = treeMetadata[name]?.genome || name;
+        const displayName = model.rowDataOf(name)?.genome || name;
         // a collapsed clade is drawn as a triangle + tip count; suppress its leaf
         // label when the "name" is just the auto-generated internal-node id
         const isAnonymousCollapsed = collapsedSet.has(id) && name === id;
@@ -212,7 +246,7 @@ function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepth
             const width = measured === undefined
                 ? ctx.measureText(displayName).width
                 : measured * labelWidthScale;
-            ctx.fillStyle = theme.palette.text.primary;
+            ctx.fillStyle = tipLabelColors?.get(name) ?? theme.palette.text.primary;
             if (labelsAlignRight) {
                 const smallPadding = 2;
                 const offset = treeAreaWidthMinusMargin - smallPadding;
@@ -254,22 +288,101 @@ function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, tipX, maxDepth
     }
     ctx.setLineDash([]);
 }
-// the row sets of `highlights`, tinted across the tree area under the labels
-// with the label in the gutter at the first row of each set
+// the first row of a set, as a loop: spreading into Math.min passes one
+// argument per row, and the ~125k argument limit throws RangeError on a set
+// covering the 230k-tip COVID tree
+function firstRow(rowIndices) {
+    let min = Infinity;
+    for (const index of rowIndices) {
+        if (index < min) {
+            min = index;
+        }
+    }
+    return min;
+}
+// the highlight mark of the `clades` layer: a translucent rectangle from the
+// clade's common ancestor to the right edge of the tree area, under the
+// branches. A clade spanning hundreds of rows crosses several blocks, so each
+// block draws the whole rectangle and the canvas takes the part that is its.
+function renderCladeHighlights({ ctx, model, offsetY, tipX, maxDepthToLeaf, blockSizeYOverride, }) {
+    const { resolvedClades, hierarchy, showBranchLenEffective: showBranchLen, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    const by = blockSizeYOverride ?? blockSize;
+    const right = treeAreaWidth - marginLeft;
+    for (const { rows, color, mark } of resolvedClades) {
+        if (mark !== 'highlight') {
+            continue;
+        }
+        const top = rows[0] * rowHeight;
+        const bottom = (rows[1] + 1) * rowHeight;
+        if (bottom < offsetY || top > offsetY + by) {
+            continue;
+        }
+        const node = nodeCoveringRows(hierarchy, top + rowHeight / 2, bottom - rowHeight / 2);
+        const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0;
+        ctx.fillStyle = color;
+        ctx.fillRect(x, top, right - x, bottom - top);
+    }
+}
+// the bar of the bracket mark, in the gutter `cladeGutterWidth` reserves at the
+// right of the tree area. The label beside it is DOM text on screen and a
+// <text> in the export, since the canvas layer has no rotation.
+function renderCladeBrackets({ ctx, model, theme, offsetY, blockSizeYOverride, }) {
+    const { resolvedClades, cladeGutterWidth, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    if (cladeGutterWidth === 0) {
+        return;
+    }
+    const by = blockSizeYOverride ?? blockSize;
+    const x = treeAreaWidth -
+        marginLeft -
+        cladeGutterWidth +
+        bracketGap +
+        bracketBarWidth / 2;
+    ctx.lineWidth = bracketBarWidth;
+    for (const { rows, mark, markColor } of resolvedClades) {
+        const top = rows[0] * rowHeight + 1;
+        const bottom = (rows[1] + 1) * rowHeight - 1;
+        if (mark !== 'bracket' || bottom < offsetY || top > offsetY + by) {
+            continue;
+        }
+        ctx.strokeStyle = markColor ?? theme.palette.text.primary;
+        ctx.beginPath();
+        ctx.moveTo(x, top);
+        ctx.lineTo(x, bottom);
+        ctx.stroke();
+    }
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = theme.palette.text.primary;
+}
+// the `rowTint` encoding and the row sets of `highlights`, washed across the
+// tree area under the labels, with each set's label in the gutter at its first
+// row
 function renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride, }) {
-    const { resolvedHighlights, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
+    const { resolvedHighlights, rowTints, rowHeight, treeAreaWidth, marginLeft, blockSize, } = model;
     const by = blockSizeYOverride ?? blockSize;
     const pad = blockPad(model);
     const placed = [];
+    const fillRow = (index) => {
+        ctx.fillRect(-marginLeft, index * rowHeight, treeAreaWidth, rowHeight);
+    };
+    if (rowTints) {
+        const top = Math.max(0, Math.floor((offsetY - pad) / rowHeight));
+        const bottom = Math.min(rowTints.length - 1, Math.ceil((offsetY + by + pad) / rowHeight));
+        for (let index = top; index <= bottom; index++) {
+            const color = rowTints[index];
+            if (color) {
+                ctx.fillStyle = color;
+                fillRow(index);
+            }
+        }
+    }
     for (const { rowIndices, label, color } of resolvedHighlights) {
         ctx.fillStyle = color ?? highlightRowFill;
         for (const index of rowIndices) {
-            const y = index * rowHeight;
-            if (inYBlock(y + rowHeight / 2, offsetY, by, pad)) {
-                ctx.fillRect(-marginLeft, y, treeAreaWidth, rowHeight);
+            if (inYBlock(index * rowHeight + rowHeight / 2, offsetY, by, pad)) {
+                fillRow(index);
             }
         }
-        const first = Math.min(...rowIndices);
+        const first = firstRow(rowIndices);
         if (label &&
             rowIndices.length &&
             inYBlock(first * rowHeight, offsetY, by, pad)) {
@@ -289,7 +402,7 @@ function renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride, }
 export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highResScaleFactorOverride, blockSizeYOverride, }) {
     clickMap?.clear();
     // Defer the finish call until after all inserts are done
-    const { noTree, drawTree, drawNodeBubbles, highResScaleFactor, fontSize, showTreeText, marginLeft, 
+    const { noTree, drawTree, drawNodeBubbles, drawNodeLabels, highResScaleFactor, fontSize, showTreeText, marginLeft, 
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     rowHeight: _rowHeight, // read so the draw autorun re-fires after a zoom change
      } = model;
@@ -310,6 +423,14 @@ export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highRes
     // built once for all three passes: each of them asks about a different node on
     // every block of every redraw, and `collapsed` is a list
     const collapsedSet = new Set(model.collapsed);
+    renderCladeHighlights({
+        ctx,
+        model,
+        offsetY,
+        tipX,
+        maxDepthToLeaf,
+        blockSizeYOverride,
+    });
     renderRowHighlights({ ctx, model, theme, offsetY, blockSizeYOverride });
     setFontSize(ctx, fontSize);
     if (!noTree && drawTree) {
@@ -335,6 +456,7 @@ export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highRes
         });
         renderNodeBubbles({
             ctx,
+            theme,
             offsetY,
             clickMap,
             model,
@@ -344,6 +466,17 @@ export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highRes
             collapsedSet,
             draw: drawNodeBubbles,
         });
+        if (drawNodeLabels) {
+            renderNodeLabels({
+                ctx,
+                theme,
+                offsetY,
+                model,
+                tipX,
+                maxDepthToLeaf,
+                blockSizeYOverride,
+            });
+        }
     }
     if (showTreeText) {
         renderTreeLabels({
@@ -358,6 +491,7 @@ export function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highRes
             collapsedSet,
         });
     }
+    renderCladeBrackets({ ctx, model, theme, offsetY, blockSizeYOverride });
     // Finish the index so it's ready for queries
     clickMap?.finish();
 }