react-msaview 4.4.2 → 4.4.4

package/dist/components/Minimap.js.map

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

package/dist/components/MinimapSVG.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const MinimapSVG: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default MinimapSVG;

package/dist/components/MinimapSVG.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+const MinimapSVG = observer(function ({ model }) {
+    const { scrollX, msaAreaWidth: W, minimapHeight: H, colWidth, numColumns, } = model;
+    const BAR_HEIGHT = 12;
+    const H2 = H - 12;
+    const unit = W / numColumns / colWidth;
+    const left = -scrollX;
+    const right = left + W;
+    const s = left * unit;
+    const e = right * unit;
+    const fill = 'rgba(66, 119, 127, 0.3)';
+    return (React.createElement(React.Fragment, null,
+        React.createElement("rect", { x: 0, y: 0, width: W, height: BAR_HEIGHT, stroke: "#555", fill: "none" }),
+        React.createElement("rect", { x: Math.max(0, s), y: 0, width: e - s, height: BAR_HEIGHT, fill: fill, stroke: "#555" }),
+        React.createElement("g", { transform: `translate(0 ${BAR_HEIGHT})` },
+            React.createElement("polygon", { fill: fill, points: [
+                    [e, 0],
+                    [s, 0],
+                    [0, H2],
+                    [W, H2],
+                ].toString() }))));
+});
+export default MinimapSVG;
+//# sourceMappingURL=MinimapSVG.js.map

package/dist/components/MinimapSVG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapSVG.js","sourceRoot":"","sources":["../../src/components/MinimapSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACtE,MAAM,EACJ,OAAO,EACP,YAAY,EAAE,CAAC,EACf,aAAa,EAAE,CAAC,EAChB,QAAQ,EACR,UAAU,GACX,GAAG,KAAK,CAAA;IAET,MAAM,UAAU,GAAG,EAAE,CAAA;IACrB,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,CAAA;IAEjB,MAAM,IAAI,GAAG,CAAC,GAAG,UAAU,GAAG,QAAQ,CAAA;IACtC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAA;IACrB,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAA;IACtB,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,CAAA;IACrB,MAAM,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;IACtB,MAAM,IAAI,GAAG,yBAAyB,CAAA;IAEtC,OAAO,CACL;QACE,8BACE,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,UAAU,EAClB,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,GACX;QACF,8BACE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACjB,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,CAAC,GAAG,CAAC,EACZ,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,MAAM,GACb;QACF,2BAAG,SAAS,EAAE,eAAe,UAAU,GAAG;YACxC,iCACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;oBACN,CAAC,CAAC,EAAE,CAAC,CAAC;oBACN,CAAC,CAAC,EAAE,CAAC,CAAC;oBACN,CAAC,CAAC,EAAE,EAAE,CAAC;oBACP,CAAC,CAAC,EAAE,EAAE,CAAC;iBACR,CAAC,QAAQ,EAAE,GACZ,CACA,CACH,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/components/MultiAlignmentSelector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const MultiAlignmentSelector: ({ model, }: {
+    model: MsaViewModel;
+}) => React.JSX.Element | null;
+export default MultiAlignmentSelector;

package/dist/components/MultiAlignmentSelector.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Select } from '@mui/material';
+const MultiAlignmentSelector = observer(function ({ model, }) {
+    const { currentAlignment, alignmentNames } = model;
+    return alignmentNames.length > 0 ? (React.createElement(Select, { native: true, value: currentAlignment, size: "small", onChange: event => {
+            model.setCurrentAlignment(+event.target.value);
+            model.setScrollX(0);
+            model.setScrollY(0);
+        } }, alignmentNames.map((option, index) => (React.createElement("option", { key: `${option}-${index}`, value: index }, option))))) : null;
+});
+export default MultiAlignmentSelector;
+//# sourceMappingURL=MultiAlignmentSelector.js.map

package/dist/components/MultiAlignmentSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiAlignmentSelector.js","sourceRoot":"","sources":["../../src/components/MultiAlignmentSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAKtC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,UAAU,EAChD,KAAK,GAGN;IACC,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAA;IAClD,OAAO,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjC,oBAAC,MAAM,IACL,MAAM,QACN,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,KAAK,CAAC,mBAAmB,CAAC,CAAE,KAAK,CAAC,MAAM,CAAC,KAAgB,CAAC,CAAA;YAC1D,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;YACnB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC,IAEA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,gCAAQ,GAAG,EAAE,GAAG,MAAM,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,IAC5C,MAAM,CACA,CACV,CAAC,CACK,CACV,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AACF,eAAe,sBAAsB,CAAA"}

package/dist/components/TreePanel/TreeBranchMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+interface Node {
+    x: number;
+    y: number;
+    name: string;
+    id: string;
+}
+declare const TreeBranchMenu: ({ node, model, onClose, }: {
+    node: Node;
+    model: MsaViewModel;
+    onClose: () => void;
+}) => React.JSX.Element;
+export default TreeBranchMenu;

package/dist/components/TreePanel/TreeBranchMenu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Menu, MenuItem } from '@mui/material';
+import { observer } from 'mobx-react';
+const TreeBranchMenu = observer(function ({ node, model, onClose, }) {
+    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+            left: node.x,
+            top: node.y,
+        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
+        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                model.toggleCollapsed(node.id);
+                onClose();
+            } }, model.collapsed.includes(node.id)
+            ? 'Expand this node'
+            : 'Collapse this node'),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                model.showOnly === node.id
+                    ? model.setShowOnly(undefined)
+                    : model.setShowOnly(node.id);
+                onClose();
+            } }, model.showOnly === node.id
+            ? 'Disable show only this node'
+            : 'Show only this node')));
+});
+export default TreeBranchMenu;
+//# sourceMappingURL=TreeBranchMenu.js.map

package/dist/components/TreePanel/TreeBranchMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeBranchMenu.js","sourceRoot":"","sources":["../../../src/components/TreePanel/TreeBranchMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAYrC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,OAAO,CACL,oBAAC,IAAI,IACH,eAAe,EAAC,gBAAgB,EAChC,cAAc,EAAE;YACd,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,GAAG,EAAE,IAAI,CAAC,CAAC;SACZ,EACD,kBAAkB,EAAE,CAAC,EACrB,WAAW,QACX,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,OAAO;QAEhB,oBAAC,QAAQ,IAAC,KAAK,QAAC,QAAQ,UACrB,IAAI,CAAC,IAAI,CACD;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC9B,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,CAAC,CAAC,kBAAkB;YACpB,CAAC,CAAC,oBAAoB,CACf;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE;oBACxB,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC;oBAC9B,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAC9B,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE;YACzB,CAAC,CAAC,6BAA6B;YAC/B,CAAC,CAAC,qBAAqB,CAChB,CACN,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/components/TreePanel/TreeCanvas.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const TreeCanvas: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default TreeCanvas;

package/dist/components/TreePanel/TreeCanvas.js

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef, useState } from 'react';
+import normalizeWheel from 'normalize-wheel';
+import { observer } from 'mobx-react';
+import TreeCanvasBlock from './TreeCanvasBlock';
+import { padding } from './renderTreeCanvas';
+const TreeCanvas = observer(function ({ model }) {
+    const ref = useRef(null);
+    const scheduled = useRef(false);
+    const deltaY = useRef(0);
+    const prevY = useRef(0);
+    const { treeWidth, height, blocksY } = model;
+    const [mouseDragging, setMouseDragging] = useState(false);
+    useEffect(() => {
+        const curr = ref.current;
+        if (!curr) {
+            return;
+        }
+        function onWheel(origEvent) {
+            const event = normalizeWheel(origEvent);
+            deltaY.current += event.pixelY;
+            if (!scheduled.current) {
+                scheduled.current = true;
+                requestAnimationFrame(() => {
+                    model.doScrollY(-deltaY.current);
+                    deltaY.current = 0;
+                    scheduled.current = false;
+                });
+            }
+            origEvent.preventDefault();
+        }
+        curr.addEventListener('wheel', onWheel);
+        return () => {
+            curr.removeEventListener('wheel', onWheel);
+        };
+    }, [model]);
+    useEffect(() => {
+        let cleanup = () => { };
+        function globalMouseMove(event) {
+            event.preventDefault();
+            const currY = event.clientY;
+            const distanceY = currY - prevY.current;
+            if (distanceY) {
+                // use rAF to make it so multiple event handlers aren't fired per-frame
+                // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(() => {
+                        model.doScrollY(distanceY);
+                        scheduled.current = false;
+                        prevY.current = event.clientY;
+                    });
+                }
+            }
+        }
+        function globalMouseUp() {
+            prevY.current = 0;
+            if (mouseDragging) {
+                setMouseDragging(false);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove, true);
+            window.addEventListener('mouseup', globalMouseUp, true);
+            cleanup = () => {
+                window.removeEventListener('mousemove', globalMouseMove, true);
+                window.removeEventListener('mouseup', globalMouseUp, true);
+            };
+        }
+        return cleanup;
+    }, [model, mouseDragging]);
+    function mouseDown(event) {
+        // check if clicking a draggable element or a resize handle
+        const target = event.target;
+        if (target.draggable || target.dataset.resizer) {
+            return;
+        }
+        // otherwise do click and drag scroll
+        if (event.button === 0) {
+            prevY.current = event.clientY;
+            setMouseDragging(true);
+        }
+    }
+    // this local mouseup is used in addition to the global because sometimes
+    // the global add/remove are not called in time, resulting in issue #533
+    function mouseUp(event) {
+        event.preventDefault();
+        setMouseDragging(false);
+    }
+    function mouseLeave(event) {
+        event.preventDefault();
+    }
+    return (React.createElement("div", { ref: ref, onMouseDown: mouseDown, onMouseUp: mouseUp, onMouseLeave: mouseLeave, style: {
+            height,
+            position: 'relative',
+            overflow: 'hidden',
+            width: treeWidth + padding,
+        } }, blocksY.map(block => (React.createElement(TreeCanvasBlock, { key: block, model: model, offsetY: block })))));
+});
+export default TreeCanvas;
+//# sourceMappingURL=TreeCanvas.js.map

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

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

package/dist/components/TreePanel/TreeCanvasBlock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const TreeCanvasBlock: ({ model, offsetY, }: {
+    model: MsaViewModel;
+    offsetY: number;
+}) => React.JSX.Element;
+export default TreeCanvasBlock;

package/dist/components/TreePanel/TreeCanvasBlock.js

@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import { useTheme } from '@mui/material';
+import RBush from 'rbush';
+import TreeNodeMenu from './TreeNodeMenu';
+import TreeBranchMenu from './TreeBranchMenu';
+import { padding, renderTreeCanvas } from './renderTreeCanvas';
+const TreeCanvasBlock = observer(function ({ model, offsetY, }) {
+    const theme = useTheme();
+    const ref = useRef();
+    const clickMap = useRef(new RBush());
+    const mouseoverRef = useRef(null);
+    const [branchMenu, setBranchMenu] = useState();
+    const [toggleNodeMenu, setToggleNodeMenu] = useState();
+    const [hoverElt, setHoverElt] = useState();
+    const { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model;
+    const width = treeAreaWidth + padding;
+    const height = blockSize;
+    const w2 = width * highResScaleFactor;
+    const h2 = height * highResScaleFactor;
+    const vref = useCallback((arg) => {
+        model.incrementRef();
+        ref.current = arg;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width]);
+    useEffect(() => {
+        const ctx = ref.current?.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        return autorun(() => {
+            renderTreeCanvas({
+                ctx,
+                model,
+                offsetY,
+                clickMap: clickMap.current,
+                theme,
+            });
+        });
+    }, [model, offsetY, theme]);
+    useEffect(() => {
+        const ctx = mouseoverRef.current?.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize);
+        ctx.translate(0, -offsetY);
+        if (hoverElt) {
+            const { minX, maxX, minY, maxY } = hoverElt;
+            ctx.fillStyle = 'rgba(0,0,0,0.1)';
+            ctx.fillRect(minX, minY, maxX - minX, maxY - minY);
+        }
+    }, [hoverElt, offsetY, blockSize, treeAreaWidth]);
+    function hoverBranchClickMap(event) {
+        const x = event.nativeEvent.offsetX;
+        const y = event.nativeEvent.offsetY;
+        const [entry] = clickMap.current.search({
+            minX: x,
+            maxX: x + 1,
+            minY: y + offsetY,
+            maxY: y + 1 + offsetY,
+        });
+        return entry && entry.branch
+            ? { ...entry, x: event.clientX, y: event.clientY }
+            : undefined;
+    }
+    function hoverNameClickMap(event) {
+        const x = event.nativeEvent.offsetX;
+        const y = event.nativeEvent.offsetY;
+        const [entry] = clickMap.current.search({
+            minX: x,
+            maxX: x + 1,
+            minY: y + offsetY,
+            maxY: y + 1 + offsetY,
+        });
+        return entry && !entry.branch
+            ? { ...entry, x: event.clientX, y: event.clientY }
+            : undefined;
+    }
+    const style = {
+        width,
+        height,
+        top: scrollY + offsetY,
+        left: 0,
+        position: 'absolute',
+    };
+    return (React.createElement(React.Fragment, null,
+        branchMenu?.id ? (React.createElement(TreeBranchMenu, { node: branchMenu, model: model, onClose: () => setBranchMenu(undefined) })) : null,
+        toggleNodeMenu?.id ? (React.createElement(TreeNodeMenu, { node: toggleNodeMenu, model: model, onClose: () => setToggleNodeMenu(undefined) })) : null,
+        React.createElement("canvas", { width: w2, height: h2, style: style, onMouseMove: event => {
+                if (!ref.current) {
+                    return;
+                }
+                const ret = hoverNameClickMap(event) || hoverBranchClickMap(event);
+                ref.current.style.cursor = ret ? 'pointer' : 'default';
+                setHoverElt(hoverNameClickMap(event));
+            }, onClick: event => {
+                const { clientX: x, clientY: y } = event;
+                const data = hoverBranchClickMap(event);
+                if (data?.id) {
+                    setBranchMenu({ ...data, x, y });
+                }
+                const data2 = hoverNameClickMap(event);
+                if (data2?.id) {
+                    setToggleNodeMenu({ ...data2, x, y });
+                }
+            }, onMouseLeave: () => setHoverElt(undefined), ref: vref }),
+        React.createElement("canvas", { style: {
+                ...style,
+                pointerEvents: 'none',
+                zIndex: 100,
+            }, width: width, height: height, ref: mouseoverRef })));
+});
+export default TreeCanvasBlock;
+//# sourceMappingURL=TreeCanvasBlock.js.map

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

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

package/dist/components/TreePanel/TreeNodeMenu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const TreeMenu: ({ node, onClose, model, }: {
+    node: {
+        x: number;
+        y: number;
+        name: string;
+        id: string;
+    };
+    model: MsaViewModel;
+    onClose: () => void;
+}) => React.JSX.Element;
+export default TreeMenu;

package/dist/components/TreePanel/TreeNodeMenu.js

@@ -0,0 +1,74 @@
+import React, { lazy } from 'react';
+import { Menu, MenuItem } from '@mui/material';
+import { observer } from 'mobx-react';
+// lazies
+const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'));
+const TreeMenu = observer(function ({ node, onClose, model, }) {
+    const { selectedStructures, collapsed, collapsed2, structures } = model;
+    const nodeDetails = node ? model.getRowData(node.name) : undefined;
+    return (React.createElement(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+            top: node.y,
+            left: node.x,
+        }, transitionDuration: 0, keepMounted: true, open: Boolean(node), onClose: onClose },
+        React.createElement(MenuItem, { dense: true, disabled: true }, node.name),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                model.queueDialog(onClose => [
+                    TreeNodeInfoDialog,
+                    {
+                        info: model.getRowData(node.name),
+                        model,
+                        nodeName: node.name,
+                        onClose,
+                    },
+                ]);
+                onClose();
+            } }, "More info..."),
+        React.createElement(MenuItem, { dense: true, onClick: () => {
+                if (collapsed.includes(node.id)) {
+                    model.toggleCollapsed(node.id);
+                }
+                else {
+                    if (node.id.endsWith('-leafnode')) {
+                        model.toggleCollapsed2(`${node.id}`);
+                    }
+                    else {
+                        model.toggleCollapsed2(`${node.id}-leafnode`);
+                    }
+                }
+                onClose();
+            } }, collapsed.includes(node.id) || collapsed2.includes(node.id)
+            ? 'Show node'
+            : 'Hide node'),
+        structures[node.name]?.map(entry => !selectedStructures.some(n => n.id === node.name) ? (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: () => {
+                model.addStructureToSelection({
+                    structure: entry,
+                    id: node.name,
+                });
+                onClose();
+            } },
+            "Add PDB to selection (",
+            entry.pdb,
+            ")")) : (React.createElement(MenuItem, { key: JSON.stringify(entry), dense: true, onClick: () => {
+                model.removeStructureFromSelection({
+                    structure: entry,
+                    id: node.name,
+                });
+                onClose();
+            } },
+            "Remove PDB from selection (",
+            entry.pdb,
+            ")"))), // @ts-expect-error
+        nodeDetails?.data.accession?.map(accession => (React.createElement(MenuItem, { dense: true, key: accession, onClick: () => {
+                model.addUniprotTrack({
+                    // @ts-expect-error
+                    name: nodeDetails?.data.name,
+                    accession,
+                });
+                onClose();
+            } },
+            "Open UniProt track (",
+            accession,
+            ")")))));
+});
+export default TreeMenu;
+//# sourceMappingURL=TreeNodeMenu.js.map

package/dist/components/TreePanel/TreeNodeMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeMenu.js","sourceRoot":"","sources":["../../../src/components/TreePanel/TreeNodeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAKrC,SAAS;AACT,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,8BAA8B,CAAC,CAAC,CAAA;AAE7E,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAClC,IAAI,EACJ,OAAO,EACP,KAAK,GAKN;IACC,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IACvE,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAElE,OAAO,CACL,oBAAC,IAAI,IACH,eAAe,EAAC,gBAAgB,EAChC,cAAc,EAAE;YACd,GAAG,EAAE,IAAI,CAAC,CAAC;YACX,IAAI,EAAE,IAAI,CAAC,CAAC;SACb,EACD,kBAAkB,EAAE,CAAC,EACrB,WAAW,QACX,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,OAAO;QAEhB,oBAAC,QAAQ,IAAC,KAAK,QAAC,QAAQ,UACrB,IAAI,CAAC,IAAI,CACD;QAEX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBAC3B,kBAAkB;oBAClB;wBACE,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;wBACjC,KAAK;wBACL,QAAQ,EAAE,IAAI,CAAC,IAAI;wBACnB,OAAO;qBACR;iBACF,CAAC,CAAA;gBACF,OAAO,EAAE,CAAA;YACX,CAAC,mBAGQ;QACX,oBAAC,QAAQ,IACP,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;oBAChC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;gBAChC,CAAC;qBAAM,CAAC;oBACN,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;wBAClC,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;oBACtC,CAAC;yBAAM,CAAC;wBACN,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,EAAE,WAAW,CAAC,CAAA;oBAC/C,CAAC;gBACH,CAAC;gBACD,OAAO,EAAE,CAAA;YACX,CAAC,IAEA,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1D,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,WAAW,CACN;QAEV,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAClC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAClD,oBAAC,QAAQ,IACP,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAC1B,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,uBAAuB,CAAC;oBAC5B,SAAS,EAAE,KAAK;oBAChB,EAAE,EAAE,IAAI,CAAC,IAAI;iBACd,CAAC,CAAA;gBACF,OAAO,EAAE,CAAA;YACX,CAAC;;YAEsB,KAAK,CAAC,GAAG;gBACvB,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAC1B,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,4BAA4B,CAAC;oBACjC,SAAS,EAAE,KAAK;oBAChB,EAAE,EAAE,IAAI,CAAC,IAAI;iBACd,CAAC,CAAA;gBACF,OAAO,EAAE,CAAA;YACX,CAAC;;YAE2B,KAAK,CAAC,GAAG;gBAC5B,CACZ,CACF,EAEA,mBAAmB;QACpB,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAC5C,oBAAC,QAAQ,IACP,KAAK,QACL,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,eAAe,CAAC;oBACpB,mBAAmB;oBACnB,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,IAAI;oBAC5B,SAAS;iBACV,CAAC,CAAA;gBACF,OAAO,EAAE,CAAA;YACX,CAAC;;YAEoB,SAAS;gBACrB,CACZ,CAAC,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/TreePanel/TreeRuler.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const TreeRuler: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default TreeRuler;

package/dist/components/TreePanel/TreeRuler.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+const TreeRuler = observer(({ model }) => {
+    const { treeAreaWidth } = model;
+    return React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } });
+});
+export default TreeRuler;
+//# sourceMappingURL=TreeRuler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeRuler.js","sourceRoot":"","sources":["../../../src/components/TreePanel/TreeRuler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAKrC,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,GAAI,CAAA;AAChE,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/TreePanel/dialogs/TreeNodeInfoDialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MsaViewModel } from '../../../model';
+declare const _default: ({ info, model, nodeName, onClose, }: {
+    info: Record<string, unknown>;
+    model: MsaViewModel;
+    nodeName: string;
+    onClose: () => void;
+}) => React.JSX.Element;
+export default _default;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { DialogContent } from '@mui/material';
+import { observer } from 'mobx-react';
+import { Attributes, BaseCard, } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+export default observer(function ({ info, model, nodeName, onClose, }) {
+    const { treeMetadata } = model;
+    const metadata = treeMetadata[nodeName];
+    return (React.createElement(Dialog, { onClose: () => onClose(), open: true, title: "Tree node info" },
+        React.createElement(DialogContent, null,
+            React.createElement(BaseCard, { title: "Attributes" },
+                React.createElement(Attributes, { attributes: { nodeName, ...info } })),
+            metadata ? (React.createElement(BaseCard, { title: "Extra metadata" },
+                React.createElement(Attributes, { attributes: metadata }))) : null)));
+});
+//# sourceMappingURL=TreeNodeInfoDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeNodeInfoDialog.js","sourceRoot":"","sources":["../../../../src/components/TreePanel/dialogs/TreeNodeInfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,UAAU,EACV,QAAQ,GACT,MAAM,mDAAmD,CAAA;AAG1D,eAAe,QAAQ,CAAC,UAAU,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,GAMR;IACC,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAC9B,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAA;IACvC,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,IAAI,QAAC,KAAK,EAAC,gBAAgB;QAC3D,oBAAC,aAAa;YACZ,oBAAC,QAAQ,IAAC,KAAK,EAAC,YAAY;gBAC1B,oBAAC,UAAU,IAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAI,CACxC;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"}

package/dist/components/TreePanel/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const TreePanel: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default TreePanel;

package/dist/components/TreePanel/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import TreeCanvas from './TreeCanvas';
+const TreePanel = observer(function ({ model }) {
+    const { treeAreaWidth } = model;
+    return (React.createElement("div", { style: { flexShrink: 0, width: treeAreaWidth } },
+        React.createElement(TreeCanvas, { model: model })));
+});
+export default TreePanel;
+//# sourceMappingURL=index.js.map

package/dist/components/TreePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TreePanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACrE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC/B,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE;QACjD,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/TreePanel/renderTreeCanvas.d.ts

@@ -0,0 +1,46 @@
+import RBush from 'rbush';
+import { Theme } from '@mui/material';
+import { MsaViewModel } from '../../model';
+export declare const padding = 600;
+interface ClickEntry {
+    name: string;
+    id: string;
+    branch?: boolean;
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+export declare function renderTree({ offsetY, ctx, model, theme, blockSizeYOverride, }: {
+    offsetY: number;
+    ctx: CanvasRenderingContext2D;
+    model: MsaViewModel;
+    theme: Theme;
+    blockSizeYOverride?: number;
+}): void;
+export declare function renderNodeBubbles({ ctx, clickMap, offsetY, model, blockSizeYOverride, }: {
+    ctx: CanvasRenderingContext2D;
+    clickMap?: RBush<ClickEntry>;
+    offsetY: number;
+    model: MsaViewModel;
+    theme: Theme;
+    blockSizeYOverride?: number;
+}): void;
+export declare function renderTreeLabels({ theme, model, offsetY, ctx, clickMap, blockSizeYOverride, }: {
+    model: MsaViewModel;
+    offsetY: number;
+    ctx: CanvasRenderingContext2D;
+    clickMap?: RBush<ClickEntry>;
+    theme: Theme;
+    blockSizeYOverride?: number;
+}): void;
+export declare function renderTreeCanvas({ model, clickMap, ctx, offsetY, theme, highResScaleFactorOverride, blockSizeYOverride, }: {
+    model: MsaViewModel;
+    offsetY: number;
+    ctx: CanvasRenderingContext2D;
+    clickMap?: RBush<ClickEntry>;
+    theme: Theme;
+    highResScaleFactorOverride?: number;
+    blockSizeYOverride?: number;
+}): void;
+export {};