@jbrowse/plugin-variants 4.1.1 → 4.1.4

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/esm/shared/minorAlleleFrequencyUtils.d.ts

@@ -3,11 +3,11 @@ import type { Feature, LastStopTokenCheck } from '@jbrowse/core/util';
 export declare function calculateAlleleCountsFast(feature: VcfFeature): Record<string, number>;
 export declare function calculateAlleleCounts(genotypes: Record<string, string>, cacheSplit: Record<string, string[]>): Record<string, number>;
 export declare function calculateMinorAlleleFrequency(alleleCounts: Record<string, number>): number;
-export declare function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, lastCheck, genotypesCache, splitCache, }: {
+export declare function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, stopTokenCheck, genotypesCache, splitCache, }: {
     features: Iterable<Feature>;
     minorAlleleFrequencyFilter: number;
     lengthCutoffFilter: number;
-    lastCheck?: LastStopTokenCheck;
+    stopTokenCheck?: LastStopTokenCheck;
     genotypesCache?: Map<string, Record<string, string>>;
     splitCache?: Record<string, string[]>;
 }): {

package/esm/shared/minorAlleleFrequencyUtils.js

@@ -275,7 +275,7 @@ function getMostFrequentAlt(alleleCounts) {
     }
     return mostFrequentAlt;
 }
-export function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, lastCheck, genotypesCache, splitCache = {}, }) {
+export function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, stopTokenCheck, genotypesCache, splitCache = {}, }) {
     const results = [];
     for (const feature of features) {
         if (feature.get('end') - feature.get('start') <= lengthCutoffFilter) {
@@ -301,7 +301,7 @@ export function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorA
                 });
             }
         }
-        checkStopToken2(lastCheck);
+        checkStopToken2(stopTokenCheck);
     }
     return results;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "4.1.1",
+  "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/core": "^4.1.1",
-    "@jbrowse/plugin-linear-genome-view": "^4.1.1",
-    "@jbrowse/sv-core": "^4.1.1",
-    "@jbrowse/plugin-circular-view": "^4.1.1"
+    "@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"