@jbrowse/plugin-wiggle 4.1.3 → 4.1.4

package/esm/MultiLinearWiggleDisplay/components/TreeSidebar.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { getContainingView } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Menu, MenuItem, alpha } from '@mui/material';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import { SIDEBAR_BACKGROUND_OPACITY } from "./constants.js";
+const useStyles = makeStyles()(theme => ({
+    resizeHandle: {
+        position: 'absolute',
+        top: 0,
+        height: '100%',
+        width: 4,
+        zIndex: 101,
+        background: 'transparent',
+        '&:hover': {
+            background: theme.palette.divider,
+        },
+    },
+    treeBackground: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        background: alpha(theme.palette.background.paper, SIDEBAR_BACKGROUND_OPACITY),
+    },
+}));
+function getDescendantNames(node) {
+    if (!node.children?.length) {
+        return [node.data.name];
+    }
+    return node.children.flatMap(child => getDescendantNames(child));
+}
+const TreeSidebar = observer(function TreeSidebar({ model, }) {
+    const { classes } = useStyles();
+    const { width: viewWidth } = getContainingView(model);
+    const [nodeIndex, setNodeIndex] = useState(null);
+    const [nodeData, setNodeData] = useState([]);
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const { hierarchy, treeAreaWidth, height, scrollTop, showTree, sources } = model;
+    const treeCanvasRef = useCallback((ref) => {
+        model.setTreeCanvasRef(ref);
+    }, [model, treeAreaWidth, height]);
+    const mouseoverCanvasRef = useCallback((ref) => {
+        model.setMouseoverCanvasRef(ref);
+    }, [model, viewWidth, height]);
+    useEffect(() => {
+        return autorun(function treeSpatialIndexAutorun() {
+            const { treeAreaWidth: _t, hierarchy: h, totalHeight: th } = model;
+            th;
+            if (!h) {
+                setNodeIndex(null);
+                setNodeData([]);
+                return;
+            }
+            const nodes = h.descendants().filter(node => node.children?.length);
+            const index = new Flatbush(nodes.length);
+            const hitRadius = 8;
+            for (const node of nodes) {
+                const x = node.y;
+                const y = node.x;
+                index.add(x - hitRadius, y - hitRadius, x + hitRadius, y + hitRadius);
+            }
+            index.finish();
+            setNodeIndex(index);
+            setNodeData(nodes);
+        }, { name: 'TreeSpatialIndex' });
+    }, [model]);
+    const handleMouseMove = useCallback((event) => {
+        if (!hierarchy || !nodeIndex) {
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top + scrollTop;
+        const results = nodeIndex.search(x, y, x, y);
+        const node = results.length > 0 ? nodeData[results[0]] : undefined;
+        if (node) {
+            const descendantNames = getDescendantNames(node);
+            model.setHoveredTreeNode({
+                node,
+                descendantNames,
+            });
+        }
+        else {
+            model.setHoveredTreeNode(undefined);
+        }
+    }, [hierarchy, nodeIndex, nodeData, scrollTop, model]);
+    const handleMouseLeave = useCallback(() => {
+        model.setHoveredTreeNode(undefined);
+    }, [model]);
+    const handleClick = useCallback((event) => {
+        if (!hierarchy || !nodeIndex) {
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top + scrollTop;
+        const results = nodeIndex.search(x, y, x, y);
+        const node = results.length > 0 ? nodeData[results[0]] : undefined;
+        if (node) {
+            const descendantNames = getDescendantNames(node);
+            setMenuAnchor({
+                x: event.clientX,
+                y: event.clientY,
+                names: descendantNames,
+            });
+        }
+    }, [hierarchy, nodeIndex, nodeData, scrollTop]);
+    const handleCloseMenu = useCallback(() => {
+        setMenuAnchor(null);
+    }, []);
+    if (!hierarchy || !showTree || !sources?.length) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                    position: 'sticky',
+                    top: 0,
+                    left: 0,
+                    height: 0,
+                    zIndex: 100,
+                }, children: [_jsx("div", { className: classes.treeBackground, style: {
+                            width: treeAreaWidth,
+                            height,
+                        } }), _jsx("canvas", { ref: treeCanvasRef, width: treeAreaWidth * 2, height: height * 2, style: {
+                            width: treeAreaWidth,
+                            height,
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            pointerEvents: 'none',
+                        } }), _jsx("canvas", { ref: mouseoverCanvasRef, width: viewWidth, height: height, style: {
+                            width: viewWidth,
+                            height,
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            zIndex: 1,
+                            pointerEvents: 'none',
+                        } }), _jsx("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: treeAreaWidth,
+                            height,
+                            zIndex: 2,
+                            cursor: 'pointer',
+                        } })] }), _jsx(ResizeHandle, { onDrag: distance => {
+                    model.setTreeAreaWidth(Math.max(50, treeAreaWidth + distance));
+                    return undefined;
+                }, className: classes.resizeHandle, style: {
+                    left: treeAreaWidth,
+                }, vertical: true }), _jsxs(Menu, { open: !!menuAnchor, onClose: handleCloseMenu, anchorReference: "anchorPosition", anchorPosition: menuAnchor ? { top: menuAnchor.y, left: menuAnchor.x } : undefined, children: [model.subtreeFilter?.length ? (_jsx(MenuItem, { onClick: () => {
+                            model.setSubtreeFilter(undefined);
+                            handleCloseMenu();
+                        }, children: "Clear subtree filter" })) : null, _jsxs(MenuItem, { onClick: () => {
+                            if (menuAnchor) {
+                                model.setSubtreeFilter(menuAnchor.names);
+                            }
+                            handleCloseMenu();
+                        }, children: ["Show only subtree (", menuAnchor?.names.length, " samples)"] })] })] }));
+});
+export default TreeSidebar;

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogAuto.js

@@ -59,7 +59,8 @@ const WiggleClusterDialogAuto = observer(function WiggleClusterDialogAuto({ mode
                                             ...sourceItem,
                                             ...sourcesByName[sourceItem.name],
                                         };
-                                    }));
+                                    }), false);
+                                    model.setClusterTree(ret.tree);
                                 }
                                 handleClose();
                             }

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/types.d.ts

@@ -4,5 +4,6 @@ export interface ReducedModel {
     sourcesWithoutLayout?: Source[];
     layout?: Source[];
     adapterConfig: AnyConfigurationModel;
-    setLayout: (arg: Source[]) => void;
+    setLayout: (arg: Source[], clearTree?: boolean) => void;
+    setClusterTree: (tree?: string) => void;
 }

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
+import MultiWiggleLegendBar from "./MultiWiggleLegendBar.js";
+import TreeSidebar from "./TreeSidebar.js";
 import YScaleBars from "./YScaleBars.js";
 const MultiLinearWiggleDisplayComponent = observer(function MultiLinearWiggleDisplayComponent(props) {
     const { model } = props;
-    return (_jsxs("div", { children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(YScaleBars, { model: model })] }));
+    const { isMultiRow } = model;
+    return (_jsxs("div", { children: [isMultiRow ? (_jsxs(_Fragment, { children: [_jsx(TreeSidebar, { model: model }), _jsx(MultiWiggleLegendBar, { model: model })] })) : null, _jsx(BaseLinearDisplayComponent, { ...props }), _jsx(YScaleBars, { model: model })] }));
 });
 export default MultiLinearWiggleDisplayComponent;

package/esm/MultiLinearWiggleDisplay/components/constants.d.ts

@@ -0,0 +1 @@
+export declare const SIDEBAR_BACKGROUND_OPACITY = 0.8;

package/esm/MultiLinearWiggleDisplay/components/constants.js

@@ -0,0 +1 @@
+export const SIDEBAR_BACKGROUND_OPACITY = 0.8;

package/esm/MultiLinearWiggleDisplay/components/treeTypes.d.ts

@@ -0,0 +1,39 @@
+import type { Source } from '../../util.ts';
+import type { HierarchyNode } from 'd3-hierarchy';
+export interface ClusterNodeData {
+    name: string;
+    height: number;
+    children?: ClusterNodeData[];
+}
+export type ClusterHierarchyNode = HierarchyNode<ClusterNodeData>;
+export interface HoveredTreeNode {
+    node: ClusterHierarchyNode;
+    descendantNames: string[];
+}
+export interface TreeSidebarModel {
+    totalHeight: number;
+    hierarchy?: ClusterHierarchyNode;
+    treeAreaWidth: number;
+    height: number;
+    scrollTop: number;
+    showTree: boolean;
+    sources?: Source[];
+    subtreeFilter?: string[];
+    setTreeCanvasRef: (ref: HTMLCanvasElement | null) => void;
+    setMouseoverCanvasRef: (ref: HTMLCanvasElement | null) => void;
+    setHoveredTreeNode: (node?: HoveredTreeNode) => void;
+    setTreeAreaWidth: (width: number) => void;
+    setSubtreeFilter: (names?: string[]) => void;
+}
+export interface LegendBarModel {
+    id: string;
+    scrollTop: number;
+    height: number;
+    hierarchy?: ClusterHierarchyNode;
+    treeAreaWidth: number;
+    totalHeight: number;
+    canDisplayLegendLabels: boolean;
+    rowHeight: number;
+    sources?: Source[];
+    showTree: boolean;
+}

package/esm/MultiLinearWiggleDisplay/components/treeTypes.js

@@ -0,0 +1 @@
+export {};

package/esm/MultiLinearWiggleDisplay/configSchema.d.ts

@@ -1,22 +1,22 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-export default function WiggleConfigFactory(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+export default function WiggleConfigFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     defaultRendering: {
         type: string;
         model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
     };
-    renderers: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         MultiXYPlotRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiDensityRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiRowXYPlotRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiLineRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiRowLineRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     height: {
         type: string;
         defaultValue: number;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     autoscale: {
         type: string;
         defaultValue: string;
@@ -54,7 +54,7 @@ export default function WiggleConfigFactory(pluginManager: PluginManager): impor
         description: string;
         defaultValue: boolean;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -81,4 +81,4 @@ export default function WiggleConfigFactory(pluginManager: PluginManager): impor
         description: string;
         defaultValue: never[];
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;

package/esm/MultiLinearWiggleDisplay/makeSidebarSvg.d.ts

@@ -0,0 +1,9 @@
+import type { LegendBarModel } from './components/treeTypes.ts';
+interface Model extends LegendBarModel {
+    hierarchy: any;
+    totalHeight: number;
+    treeAreaWidth: number;
+    isMultiRow: boolean;
+}
+export declare function makeSidebarSvg(self: Model): Promise<import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/esm/MultiLinearWiggleDisplay/makeSidebarSvg.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import MultiWiggleLegendBar from "./components/MultiWiggleLegendBar.js";
+import RectBg from "./components/RectBg.js";
+import SvgTree from "./components/SvgTree.js";
+export async function makeSidebarSvg(self) {
+    const { offsetPx } = getContainingView(self);
+    const { hierarchy, showTree, treeAreaWidth, height, isMultiRow } = self;
+    if (!isMultiRow) {
+        return null;
+    }
+    return (_jsxs("g", { id: "tree-layer", "data-testid": "tree-layer", transform: `translate(${Math.max(-offsetPx, 0)})`, clipPath: "url(#sidebarClip)", children: [_jsx("clipPath", { id: "sidebarClip", children: _jsx("rect", { x: "0", y: "0", width: "100%", height: height }) }), _jsx("g", { id: "legend-layer", transform: `translate(${showTree && hierarchy ? treeAreaWidth : 0})`, children: _jsx(MultiWiggleLegendBar, { model: self, orientation: "left", exportSVG: true }) }), showTree && hierarchy ? (_jsxs(_Fragment, { children: [_jsx(RectBg, { x: 0, y: 0, width: treeAreaWidth, height: height }), _jsx(SvgTree, { model: self })] })) : null] }));
+}