react-msaview 6.5.0 → 8.0.0

package/dist/components/tree/TreeCanvas.js

@@ -4,11 +4,11 @@ import { observer } from 'mobx-react';
 import { useCanvasAutorun } from '../../useCanvasAutorun.js';
 import { useWheelScroll } from '../../useWheelScroll.js';
 import { referenceColor, treeHoverColor } from '../overlayColors.js';
+import CladeLabels from './CladeLabels.js';
 import TreeCanvasBlock from './TreeCanvasBlock.js';
-import { padding } from './renderTreeCanvas.js';
 const TreeCanvas = observer(function ({ model }) {
     const ref = useRef(null);
-    const { treeWidth, height, blocksY, treeAreaWidth, scrollY } = model;
+    const { height, blocksY, treeAreaWidth, scrollY } = model;
     const onScrollY = useCallback((d) => {
         model.doScrollY(d);
     }, [model]);
@@ -48,7 +48,7 @@ const TreeCanvas = observer(function ({ model }) {
         }, style: {
             height,
             position: 'relative',
-            width: treeWidth + padding,
+            width: treeAreaWidth,
         } },
         React.createElement("div", { style: {
                 position: 'absolute',
@@ -56,7 +56,9 @@ const TreeCanvas = observer(function ({ model }) {
                 left: 0,
                 transform: `translateY(${scrollY}px)`,
                 willChange: 'transform',
-            } }, blocksY.map(block => (React.createElement(TreeCanvasBlock, { key: block, model: model, offsetY: block })))),
+            } },
+            blocksY.map(block => (React.createElement(TreeCanvasBlock, { key: block, model: model, offsetY: block }))),
+            React.createElement(CladeLabels, { model: model })),
         React.createElement("canvas", { ref: mouseoverRef, width: treeAreaWidth, height: height, style: {
                 position: 'absolute',
                 top: 0,

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

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

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 { padding, renderTreeCanvas } from './renderTreeCanvas.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,7 +23,8 @@ const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
     const [nodeMenu, setNodeMenu] = useState();
     const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } = useTreeHover({ model, offsetY });
     const { treeAreaWidth, blockSize, highResScaleFactor } = model;
-    const width = treeAreaWidth + padding;
+    // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
+    const width = treeAreaWidth;
     const height = blockSize;
     const canvasWidth = width * highResScaleFactor;
     const canvasHeight = height * highResScaleFactor;
@@ -98,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,11 +1,17 @@
 import React from 'react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-// 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.
+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 } = model;
-    return (React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth + resizeHandleWidth } }));
+    const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model;
+    const theme = useTheme();
+    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,YAAY,CAAA;AAIrC,+EAA+E;AAC/E,8EAA8E;AAC9E,sEAAsE;AACtE,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,iBAAiB,EAAE,GAAI,CAC5E,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.d.ts

@@ -3,7 +3,6 @@ import type { MsaViewModel } from '../../model.ts';
 import type { RenderCtx } from '../renderCtx.ts';
 import type { ClickMapIndex } from './clickMap.ts';
 import type { Theme } from '@mui/material';
-export declare const padding = 600;
 export declare function getNodeX(node: HierarchyNode, showBranchLen: boolean, tipX: number, maxDepthToLeaf: number): number | undefined;
 export declare function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highResScaleFactorOverride, blockSizeYOverride, }: {
     model: MsaViewModel;