@jbrowse/plugin-variants 4.1.3 → 4.1.4

package/esm/shared/components/RectBg.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 import { alpha, useTheme } from '@mui/material';
+import { SIDEBAR_BACKGROUND_OPACITY } from "../constants.js";
 const RectBg = ({ x, y, width, height, color, }) => {
     const theme = useTheme();
-    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color || alpha(theme.palette.background.paper, 0.8)) }));
+    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color ||
+            alpha(theme.palette.background.paper, SIDEBAR_BACKGROUND_OPACITY)) }));
 };
 export default RectBg;

package/esm/shared/components/TreeSidebar.js

@@ -4,9 +4,10 @@ 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 { alpha } from '@mui/material';
+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',
@@ -23,7 +24,7 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
         top: 0,
         left: 0,
-        background: alpha(theme.palette.background.paper, 0.8),
+        background: alpha(theme.palette.background.paper, SIDEBAR_BACKGROUND_OPACITY),
     },
 }));
 function getDescendantNames(node) {
@@ -37,6 +38,7 @@ const TreeSidebar = observer(function TreeSidebar({ model, }) {
     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);
@@ -47,7 +49,7 @@ const TreeSidebar = observer(function TreeSidebar({ model, }) {
     useEffect(() => {
         return autorun(function treeSpatialIndexAutorun() {
             const { treeAreaWidth: _t, hierarchy: h, totalHeight: th } = model;
-            void th;
+            th;
             if (!h) {
                 setNodeIndex(null);
                 setNodeData([]);
@@ -88,6 +90,27 @@ const TreeSidebar = observer(function TreeSidebar({ 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;
     }
@@ -108,12 +131,14 @@ const TreeSidebar = observer(function TreeSidebar({ model, }) {
                             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, style: {
+                        } }), _jsx("div", { onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick, style: {
                             position: 'absolute',
                             top: 0,
                             left: 0,
@@ -126,6 +151,14 @@ const TreeSidebar = observer(function TreeSidebar({ model, }) {
                     return undefined;
                 }, className: classes.resizeHandle, style: {
                     left: treeAreaWidth,
-                }, vertical: true })] }));
+                }, 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/shared/components/types.d.ts

@@ -18,10 +18,12 @@ export interface TreeSidebarModel {
     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;

package/esm/shared/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const f2 = 0.3;
+export declare const SIDEBAR_BACKGROUND_OPACITY = 0.8;
 export declare const REFERENCE_COLOR = "#ccc";
 export declare const NO_CALL_COLOR = "hsl(50,50%,50%)";
 export declare const UNPHASED_COLOR = "black";

package/esm/shared/constants.js

@@ -1,4 +1,5 @@
 export const f2 = 0.3;
+export const SIDEBAR_BACKGROUND_OPACITY = 0.8;
 export const REFERENCE_COLOR = '#ccc';
 export const NO_CALL_COLOR = 'hsl(50,50%,50%)';
 export const UNPHASED_COLOR = 'black';

package/esm/shared/makeSidebarSvg.js

@@ -1,9 +1,10 @@
-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 { getContainingView } from '@jbrowse/core/util';
+import RectBg from "./components/RectBg.js";
 import SvgTree from "./components/SvgTree.js";
 import LegendBar from "../shared/components/MultiVariantLegendBar.js";
 export async function makeSidebarSvg(self) {
     const { offsetPx } = getContainingView(self);
     const { hierarchy, showTree, treeAreaWidth, availableHeight } = self;
-    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: availableHeight }) }), _jsx("g", { id: "legend-layer", transform: `translate(${showTree && hierarchy ? treeAreaWidth : 0})`, children: _jsx(LegendBar, { model: self, orientation: "left", exportSVG: true }) }), showTree ? _jsx(SvgTree, { model: self }) : 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: availableHeight }) }), _jsx("g", { id: "legend-layer", transform: `translate(${showTree && hierarchy ? treeAreaWidth : 0})`, children: _jsx(LegendBar, { model: self, orientation: "left", exportSVG: true }) }), showTree && hierarchy ? (_jsxs(_Fragment, { children: [_jsx(RectBg, { x: 0, y: 0, width: treeAreaWidth, height: availableHeight }), _jsx(SvgTree, { model: self })] })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "type": "module",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
@@ -26,10 +26,10 @@
     "@gmod/tabix": "^3.2.2",
     "@gmod/vcf": "^7.0.0",
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/material": "^7.3.7",
+    "@mui/icons-material": "^7.3.8",
+    "@mui/material": "^7.3.8",
     "@mui/x-charts-vendor": "^8.26.0",
-    "@mui/x-data-grid": "^8.26.0",
+    "@mui/x-data-grid": "^8.27.1",
     "@types/file-saver-es": "^2.0.3",
     "copy-to-clipboard": "^3.3.3",
     "escape-html": "^1.0.3",
@@ -38,10 +38,10 @@
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
     "rxjs": "^7.8.2",
-    "@jbrowse/plugin-linear-genome-view": "^4.1.3",
-    "@jbrowse/core": "^4.1.3",
-    "@jbrowse/plugin-circular-view": "^4.1.3",
-    "@jbrowse/sv-core": "^4.1.3"
+    "@jbrowse/plugin-circular-view": "^4.1.4",
+    "@jbrowse/core": "^4.1.4",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.4",
+    "@jbrowse/sv-core": "^4.1.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0"