@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/shared/components/BaseSetColorDialog.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
+import { useLocalStorage } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import ClearTreeWarningDialog from "./ClearTreeWarningDialog.js";
+import SetColorDialogBulkEditPanel from "./SetColorDialogBulkEditPanel.js";
+import SetColorDialogHelpfulTips from "./SetColorDialogHelpfulTips.js";
+import SetColorDialogRowPalettizer from "./SetColorDialogRowPalettizer.js";
+const useStyles = makeStyles()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+        display: 'flex',
+        gap: 8,
+    },
+});
+export default function SetColorDialog({ model, handleClose, title = 'Color/arrangement editor', enableBulkEdit = false, enableRowPalettizer = false, showTipsStorageKey = 'setColorDialog-showTips', SourcesGridComponent, }) {
+    const { classes } = useStyles();
+    const { sources } = model;
+    const [showBulkEditor, setShowBulkEditor] = useState(false);
+    const [currLayout, setCurrLayout] = useState(structuredClone(sources || []));
+    const [showTips, setShowTips] = useLocalStorage(showTipsStorageKey, false);
+    const [showWarning, setShowWarning] = useState(false);
+    return (_jsxs(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: title, children: [showBulkEditor && enableBulkEdit ? (_jsx(SetColorDialogBulkEditPanel, { currLayout: currLayout, onClose: arg => {
+                    if (arg) {
+                        setCurrLayout(arg);
+                    }
+                    setShowBulkEditor(false);
+                } })) : (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { className: classes.content, children: [_jsxs("div", { className: classes.fr, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                            setShowTips(!showTips);
+                                        }, children: showTips ? 'Hide tips' : 'Show tips' }), enableBulkEdit ? (_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
+                                            setShowBulkEditor(!showBulkEditor);
+                                        }, children: "Show Bulk row editor" })) : null] }), showTips ? _jsx(SetColorDialogHelpfulTips, {}) : null, enableRowPalettizer ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SetColorDialogRowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout })] })) : null, _jsx(SourcesGridComponent, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                                    model.clearLayout();
+                                    setCurrLayout(model.sources || []);
+                                }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                    handleClose();
+                                    setCurrLayout([...(model.sources || [])]);
+                                }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                                    const { sources, clusterTree } = model;
+                                    const orderChanged = clusterTree &&
+                                        sources?.length === currLayout.length &&
+                                        sources.some((source, idx) => source.name !== currLayout[idx]?.name);
+                                    if (orderChanged) {
+                                        setShowWarning(true);
+                                    }
+                                    else {
+                                        model.setLayout(currLayout);
+                                        handleClose();
+                                    }
+                                }, children: "Submit" })] })] })), showWarning ? (_jsx(ClearTreeWarningDialog, { handleClose: () => {
+                    setShowWarning(false);
+                }, onConfirm: () => {
+                    model.setLayout(currLayout);
+                    handleClose();
+                } })) : null] }));
+}

package/esm/shared/components/ClearTreeWarningDialog.d.ts

@@ -0,0 +1,4 @@
+export default function ClearTreeWarningDialog({ handleClose, onConfirm, }: {
+    handleClose: () => void;
+    onConfirm: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/ClearTreeWarningDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
+export default function ClearTreeWarningDialog({ handleClose, onConfirm, }) {
+    return (_jsxs(Dialog, { open: true, title: "Clear cluster tree?", onClose: handleClose, children: [_jsx(DialogContent, { children: _jsx(DialogContentText, { children: "You have changed the row order. This will clear the cluster tree visualization. Do you want to continue?" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleClose, color: "primary", children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            onConfirm();
+                            handleClose();
+                        }, children: "Continue" })] })] }));
+}

package/esm/shared/components/MAFFilterDialog.d.ts

@@ -1,8 +1,7 @@
-declare const MAFFilterDialog: ({ model, handleClose, }: {
+export default function MAFFilterDialog({ model, handleClose, }: {
     model: {
         minorAlleleFrequencyFilter?: number;
         setMafFilter: (arg: number) => void;
     };
     handleClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export default MAFFilterDialog;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/MAFFilterDialog.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Dialog, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     root: {
         width: 500,
     },
 });
-const MAFFilterDialog = observer(function ({ model, handleClose, }) {
+export default function MAFFilterDialog({ model, handleClose, }) {
     const { minorAlleleFrequencyFilter = '' } = model;
     const { classes } = useStyles();
     const [maf, setMaf] = useState(`${minorAlleleFrequencyFilter}`);
@@ -19,8 +18,5 @@ const MAFFilterDialog = observer(function ({ model, handleClose, }) {
                                     model.setMafFilter(+maf);
                                 }
                                 handleClose();
-                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                                handleClose();
-                            }, children: "Cancel" })] })] }) }));
-});
-export default MAFFilterDialog;
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }) }));
+}

package/esm/shared/components/MultiVariantBaseDisplayComponent.d.ts

@@ -1,4 +1,4 @@
-import type { MultiVariantBaseModel } from '../MultiVariantBaseModel';
+import type { MultiVariantBaseModel } from '../MultiVariantBaseModel.ts';
 declare const MultiVariantBaseDisplayComponent: (props: {
     model: MultiVariantBaseModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/MultiVariantBaseDisplayComponent.js

@@ -1,24 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
-import Crosshair from './MultiVariantCrosshairs';
-import LegendBar from './MultiVariantLegendBar';
-const MultiVariantBaseDisplayComponent = observer(function (props) {
+import Crosshair from "./MultiVariantCrosshairs.js";
+import LegendBar from "./MultiVariantLegendBar.js";
+import TreeSidebar from "./TreeSidebar.js";
+import { useMouseTracking } from "../hooks/useMouseTracking.js";
+const MultiVariantBaseDisplayComponent = observer(function MultiVariantBaseDisplayComponent(props) {
     const { model } = props;
     const ref = useRef(null);
-    const [mouseY, setMouseY] = useState();
-    const [mouseX, setMouseX] = useState();
-    return (_jsxs("div", { ref: ref, onMouseMove: event => {
-            var _a;
-            const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const top = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
-            const left = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
-            setMouseY(event.clientY - top);
-            setMouseX(event.clientX - left);
-        }, onMouseLeave: () => {
-            setMouseY(undefined);
-            setMouseX(undefined);
-        }, children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(LegendBar, { model: model }), mouseX && mouseY ? (_jsx(Crosshair, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
+    const { mouseState, handleMouseMove, handleMouseLeave } = useMouseTracking(ref);
+    return (_jsxs("div", { ref: ref, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(TreeSidebar, { model: model }), _jsx(LegendBar, { model: model }), mouseState ? (_jsx(Crosshair, { mouseX: mouseState.x, mouseY: mouseState.y, offsetX: mouseState.offsetX, offsetY: mouseState.offsetY, model: model })) : null] }));
 });
 export default MultiVariantBaseDisplayComponent;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialog.d.ts

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const ClusterDialog: ({ model, handleClose, }: {
     model: ReducedModel;
     handleClose: () => void;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialog.js

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import ClusterDialogAuto from './ClusterDialogAuto';
-import ClusterDialogManual from './ClusterDialogManual';
+import ClusterDialogAuto from "./ClusterDialogAuto.js";
+import ClusterDialogManual from "./ClusterDialogManual.js";
 function Header({ activeMode, setActiveMode, }) {
     return (_jsxs("div", { children: [_jsx(Typography, { style: { marginBottom: 30 }, children: "This procedure will cluster the visible genotype data using hierarchical clustering" }), _jsx(RadioGroup, { children: Object.entries({
                     auto: (_jsx("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
@@ -13,7 +13,7 @@ function Header({ activeMode, setActiveMode, }) {
                             setActiveMode(key);
                         } }), label: val }, key))) })] }));
 }
-const ClusterDialog = observer(function ({ model, handleClose, }) {
+const ClusterDialog = observer(function ClusterDialog({ model, handleClose, }) {
     const [activeMode, setActiveMode] = useState('auto');
     return (_jsx(Dialog, { open: true, title: "Cluster by genotype", onClose: (_, reason) => {
             if (reason !== 'backdropClick') {

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogAuto.d.ts

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const ClusterDialogAuto: ({ model, children, handleClose, }: {
     model: ReducedModel;
     children: React.ReactNode;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogAuto.js

@@ -4,17 +4,19 @@ import { ErrorMessage } from '@jbrowse/core/ui';
 import { getContainingView, getSession, isAbortException, } from '@jbrowse/core/util';
 import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Button, DialogActions, DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isAlive } from 'mobx-state-tree';
-const ClusterDialogAuto = observer(function ({ model, children, handleClose, }) {
+const ClusterDialogAuto = observer(function ClusterDialogAuto({ model, children, handleClose, }) {
     const [progress, setProgress] = useState('');
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
-    const [stopToken, setStopToken] = useState('');
+    const [stopToken, setStopToken] = useState();
+    const { rpcManager } = getSession(model);
+    const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
     return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs("div", { children: [loading ? (_jsxs("div", { style: { padding: 50 }, children: [_jsx("span", { children: progress || 'Loading...' }), _jsx(Button, { onClick: () => {
                                             stopStopToken(stopToken);
-                                        }, children: "Stop" })] })) : null, error ? _jsx(ErrorMessage, { error: error }) : null] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", disabled: loading, onClick: async () => {
+                                        }, children: "Stop" })] })) : null, error ? _jsx(ErrorMessage, { error: error }) : null] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", disabled: loading || !model.sourcesWithoutLayout, onClick: async () => {
                             try {
                                 setError(undefined);
                                 setProgress('Initializing');
@@ -23,8 +25,6 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                 if (!view.initialized) {
                                     return;
                                 }
-                                const { rpcManager } = getSession(model);
-                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                                 if (sourcesWithoutLayout) {
                                     const sessionId = getRpcSessionId(model);
                                     const stopToken = createStopToken();
@@ -41,13 +41,8 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                             setProgress(arg);
                                         },
                                     }));
-                                    model.setLayout(ret.order.map(idx => {
-                                        const ret = sourcesWithoutLayout[idx];
-                                        if (!ret) {
-                                            throw new Error(`out of bounds at ${idx}`);
-                                        }
-                                        return ret;
-                                    }));
+                                    model.setLayout(ret.order.map(idx => sourcesWithoutLayout[idx]), false);
+                                    model.setClusterTree(ret.tree);
                                 }
                                 handleClose();
                             }
@@ -60,7 +55,7 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                             finally {
                                 setLoading(false);
                                 setProgress('');
-                                setStopToken('');
+                                setStopToken(undefined);
                             }
                         }, children: "Run clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
                             handleClose();

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogManual.d.ts

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const ClusterDialogManuals: ({ model, handleClose, children, }: {
     model: ReducedModel;
     handleClose: () => void;

package/esm/shared/components/MultiVariantClusterDialog/ClusterDialogManual.js

@@ -3,23 +3,16 @@ import { useEffect, useState } from 'react';
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { getContainingView, getSession, isAbortException, useLocalStorage, } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 import { Button, DialogActions, DialogContent, FormControlLabel, Paper, Radio, RadioGroup, TextField, Typography, } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import { saveAs } from 'file-saver';
 import { observer } from 'mobx-react';
-import { isAlive } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()(theme => ({
+const useStyles = makeStyles()({
     textAreaFont: {
         fontFamily: 'Courier New',
     },
-    mgap: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(4),
-    },
-}));
-const ClusterDialogManuals = observer(function ({ model, handleClose, children, }) {
+});
+const ClusterDialogManuals = observer(function ClusterDialogManuals({ model, handleClose, children, }) {
     const { classes } = useStyles();
     const [paste, setPaste] = useState('');
     const [ret, setRet] = useState();
@@ -83,13 +76,16 @@ cat(resultClusters$order,sep='\n')`
                                             gap: '8px',
                                             flexWrap: 'wrap',
                                             marginBottom: '16px',
-                                        }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                        }, children: [_jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { saveAs } = await import('file-saver-es');
                                                     saveAs(new Blob([results || ''], {
                                                         type: 'text/plain;charset=utf-8',
                                                     }), 'cluster.R');
-                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { default: copy } = await import('copy-to-clipboard');
                                                     copy(results || '');
-                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { saveAs } = await import('file-saver-es');
                                                     saveAs(new Blob([resultsTsv || ''], {
                                                         type: 'text/plain;charset=utf-8',
                                                     }), 'genotypes.tsv');

package/esm/shared/components/MultiVariantClusterDialog/types.d.ts

@@ -1,10 +1,11 @@
-import type { Source } from '../../types';
+import type { Source } from '../../types.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface ReducedModel {
     sourcesWithoutLayout?: Source[];
     minorAlleleFrequencyFilter?: number;
     lengthCutoffFilter: number;
     adapterConfig: AnyConfigurationModel;
-    setLayout: (arg: Source[]) => void;
+    setClusterTree: (arg?: string) => void;
+    setLayout: (arg: Source[], clearTree?: boolean) => void;
     clearLayout: () => void;
 }

package/esm/shared/components/MultiVariantColorLegend.d.ts

@@ -1,4 +1,4 @@
-import type { Source } from '../types';
+import type { Source } from '../types.ts';
 declare const MultiVariantColorLegend: ({ model, labelWidth, }: {
     model: {
         canDisplayLabels: boolean;

package/esm/shared/components/MultiVariantColorLegend.js

@@ -1,19 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { clamp, getFillProps } from '@jbrowse/core/util';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { getFillProps } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import RectBg from './RectBg';
-const MultiVariantColorLegend = observer(function ({ model, labelWidth, }) {
+import RectBg from "./RectBg.js";
+const LegendItem = function ({ source, idx, rowHeight, }) {
+    const { color } = source;
+    const colorBoxWidth = 15;
+    return color ? (_jsx(RectBg, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null;
+};
+const LegendItemText = function ({ source, idx, rowHeight, textFillProps, }) {
+    const { color, name, label } = source;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const colorBoxWidth = 15;
+    return (_jsx("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, ...textFillProps, children: label || name }));
+};
+const MultiVariantColorLegend = observer(function MultiVariantColorLegend({ model, labelWidth, }) {
     const { canDisplayLabels, rowHeight, sources } = model;
-    const svgFontSize = clamp(rowHeight, 8, 12);
     const colorBoxWidth = 15;
-    const hasColors = sources === null || sources === void 0 ? void 0 : sources.some(s => s.color);
-    const legendWidth = labelWidth + (hasColors ? colorBoxWidth + 5 : 0);
     const theme = useTheme();
-    return sources ? (_jsxs(_Fragment, { children: [canDisplayLabels ? (_jsx(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => {
-                const { color, name, label } = source;
-                return (_jsxs(Fragment, { children: [color ? (_jsx(RectBg, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null, canDisplayLabels ? (_jsx("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, ...getFillProps(theme.palette.text.primary), children: label || name })) : null] }, `${label}-${idx}`));
-            })] })) : null;
+    const hasColors = useMemo(() => sources?.some(s => s.color) ?? false, [sources]);
+    const legendWidth = labelWidth + (hasColors ? colorBoxWidth + 5 : 0);
+    const textFillProps = useMemo(() => getFillProps(theme.palette.text.primary), [theme.palette.text.primary]);
+    return sources ? (_jsxs(_Fragment, { children: [canDisplayLabels ? (_jsx(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, rowHeight: rowHeight }, `${source.label}-${idx}`))), canDisplayLabels
+                ? sources.map((source, idx) => (_jsx(LegendItemText, { source: source, idx: idx, rowHeight: rowHeight, textFillProps: textFillProps }, `${source.label}-text-${idx}`)))
+                : null] })) : null;
 });
 export default MultiVariantColorLegend;

package/esm/shared/components/MultiVariantCrosshairs.d.ts

@@ -1,7 +1,9 @@
-import type { MultiVariantBaseModel } from '../MultiVariantBaseModel';
-declare const MultiVariantCrosshairs: ({ mouseX, mouseY, model, }: {
+import type { MultiVariantBaseModel } from '../MultiVariantBaseModel.ts';
+declare const MultiVariantCrosshairs: ({ mouseX, mouseY, model, offsetX, offsetY, }: {
     mouseX: number;
     mouseY: number;
     model: MultiVariantBaseModel;
+    offsetX: number;
+    offsetY: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MultiVariantCrosshairs;

package/esm/shared/components/MultiVariantCrosshairs.js

@@ -1,35 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { getContainingView } from '@jbrowse/core/util';
-import { useTheme } from '@mui/material';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import MultiVariantTooltip from './MultiVariantTooltip';
-const useStyles = makeStyles()({
-    rel: {
-        position: 'relative',
-    },
-    cursor: {
+import MultiVariantTooltip from "./MultiVariantTooltip.js";
+const useStyles = makeStyles()(theme => ({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
         pointerEvents: 'none',
         zIndex: 800,
+    },
+    horizontalLine: {
         position: 'absolute',
+        left: 0,
+        height: 1,
+        backgroundColor: theme.palette.text.primary,
+        pointerEvents: 'none',
     },
-    color: {
-        width: 10,
-        height: 10,
+    verticalLine: {
+        position: 'absolute',
+        top: 0,
+        width: 1,
+        backgroundColor: theme.palette.text.primary,
+        pointerEvents: 'none',
     },
-});
-const MultiVariantCrosshairs = observer(function ({ mouseX, mouseY, model, }) {
+}));
+const MultiVariantCrosshairs = observer(function MultiVariantCrosshairs({ mouseX, mouseY, model, offsetX, offsetY, }) {
     const { classes } = useStyles();
-    const theme = useTheme();
-    const { hoveredGenotype, height, scrollTop, sourceMap } = model;
+    const { hoveredGenotype, height, sourceMap } = model;
     const { width } = getContainingView(model);
-    const source = hoveredGenotype ? sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap[hoveredGenotype.name] : undefined;
-    const y = mouseY - scrollTop;
-    return (_jsxs("div", { className: classes.rel, children: [_jsxs("svg", { className: classes.cursor, width: width, height: height, style: {
-                    top: scrollTop,
-                }, children: [_jsx("line", { x1: 0, x2: width, y1: y, y2: y, stroke: theme.palette.text.primary }), _jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: theme.palette.text.primary })] }), source ? (_jsx(MultiVariantTooltip, { source: {
-                    ...source,
-                    ...hoveredGenotype,
-                } })) : null] }));
+    const tooltipSource = useMemo(() => {
+        if (!hoveredGenotype) {
+            return undefined;
+        }
+        const source = sourceMap?.[hoveredGenotype.name];
+        return source ? { ...source, ...hoveredGenotype } : undefined;
+    }, [hoveredGenotype, sourceMap]);
+    return (_jsxs("div", { className: classes.container, style: { width, height }, children: [_jsx("div", { className: classes.horizontalLine, style: { transform: `translateY(${mouseY}px)`, width } }), _jsx("div", { className: classes.verticalLine, style: { transform: `translateX(${mouseX}px)`, height } }), tooltipSource ? (_jsx(MultiVariantTooltip, { source: tooltipSource, x: offsetX + mouseX, y: offsetY + mouseY })) : null] }));
 });
 export default MultiVariantCrosshairs;

package/esm/shared/components/MultiVariantLegendBar.d.ts

@@ -1,7 +1,7 @@
-import type { MultiVariantBaseModel } from '../MultiVariantBaseModel';
-export declare const LegendBar: (props: {
-    model: MultiVariantBaseModel;
+import type { LegendBarModel } from './types.ts';
+declare const MultiVariantLegendBar: (props: {
+    model: LegendBarModel;
     orientation?: string;
     exportSVG?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export default LegendBar;
+export default MultiVariantLegendBar;

package/esm/shared/components/MultiVariantLegendBar.js

@@ -1,26 +1,28 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { clamp, getContainingView, max, measureText } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import ColorLegend from './MultiVariantColorLegend';
-const Wrapper = observer(function ({ children, model, exportSVG, }) {
-    const { id, scrollTop, height } = model;
-    const clipid = `legend-${id}`;
-    return exportSVG ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: 1000, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipid})`, children: _jsx("g", { transform: `translate(0,${-scrollTop})`, children: children }) })] })) : (_jsx("svg", { style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: 100,
-            pointerEvents: 'none',
-            height: model.totalHeight,
-            width: getContainingView(model).width,
-        }, children: children }));
-});
-export const LegendBar = observer(function (props) {
+import ColorLegend from "./MultiVariantColorLegend.js";
+import MultiVariantLegendBarWrapper from "./MultiVariantLegendBarWrapper.js";
+const MultiVariantLegendBar = observer(function MultiVariantLegendBar(props) {
     const { model } = props;
     const { canDisplayLabels, rowHeight, sources } = model;
-    const svgFontSize = clamp(rowHeight, 8, 12);
-    return sources ? (_jsx(Wrapper, { ...props, children: _jsx(ColorLegend, { model: model, labelWidth: max(sources
-                .map(s => measureText(s.label, svgFontSize) + 10)
-                .map(width => (canDisplayLabels ? width : 20)), 0) }) })) : null;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const labelWidth = useMemo(() => {
+        if (!sources) {
+            return 0;
+        }
+        let maxWidth = 0;
+        for (const s of sources) {
+            const width = canDisplayLabels
+                ? measureText(s.label, svgFontSize) + 10
+                : 20;
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+        }
+        return maxWidth;
+    }, [sources, svgFontSize, canDisplayLabels]);
+    return sources ? (_jsx(MultiVariantLegendBarWrapper, { ...props, children: _jsx(ColorLegend, { model: model, labelWidth: labelWidth }) })) : null;
 });
-export default LegendBar;
+export default MultiVariantLegendBar;

package/esm/shared/components/MultiVariantLegendBarWrapper.d.ts

@@ -0,0 +1,7 @@
+import type { LegendBarModel } from './types.ts';
+declare const MultiVariantLegendBarWrapper: ({ children, model, exportSVG, }: {
+    model: LegendBarModel;
+    children: React.ReactNode;
+    exportSVG?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiVariantLegendBarWrapper;

package/esm/shared/components/MultiVariantLegendBarWrapper.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+const MultiVariantLegendBarWrapper = observer(function MultiVariantLegendBarWrapper({ children, model, exportSVG, }) {
+    const { id, scrollTop, height, hierarchy, treeAreaWidth, showTree } = model;
+    const clipid = `legend-${typeof jest === 'undefined' ? id : 'test'}`;
+    const leftOffset = hierarchy && showTree ? treeAreaWidth : 0;
+    return exportSVG ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipid, children: _jsx("rect", { x: 0, y: 0, width: 1000, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipid})`, children: _jsx("g", { transform: `translate(0,${-scrollTop})`, children: children }) })] })) : (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: leftOffset,
+            zIndex: 100,
+            pointerEvents: 'none',
+            height: model.totalHeight,
+            width: getContainingView(model).width,
+        }, children: children }));
+});
+export default MultiVariantLegendBarWrapper;

package/esm/shared/components/MultiVariantTooltip.d.ts

@@ -1,10 +1,9 @@
-export default function MultiVariantTooltip({ source, }: {
+declare const MultiVariantTooltip: import("react").NamedExoticComponent<{
     source: {
         color?: string;
-        hoveredGenotype?: {
-            genotype: string;
-            name: string;
-        };
         [key: string]: unknown;
     };
-}): import("react/jsx-runtime").JSX.Element;
+    x: number;
+    y: number;
+}>;
+export default MultiVariantTooltip;