@jbrowse/plugin-variants 3.2.0 → 3.4.0

package/esm/shared/MultiVariantBaseModel.js

@@ -1,5 +1,6 @@
 import { lazy } from 'react';
-import { ConfigurationReference } from '@jbrowse/core/configuration';
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 import { getSession } from '@jbrowse/core/util';
 import { stopStopToken } from '@jbrowse/core/util/stopToken';
 import { linearBareDisplayStateModelFactory } from '@jbrowse/plugin-linear-genome-view';
@@ -9,11 +10,12 @@ import HeightIcon from '@mui/icons-material/Height';
 import SplitscreenIcon from '@mui/icons-material/Splitscreen';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import deepEqual from 'fast-deep-equal';
-import { types } from 'mobx-state-tree';
+import { cast, types } from 'mobx-state-tree';
 import { getSources } from './getSources';
 const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
 const MAFFilterDialog = lazy(() => import('./components/MAFFilterDialog'));
-const ClusterDialog = lazy(() => import('./components/ClusterDialog/ClusterDialog'));
+const AddFiltersDialog = lazy(() => import('./components/AddFiltersDialog'));
+const ClusterDialog = lazy(() => import('./components/MultiVariantClusterDialog/ClusterDialog'));
 const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'));
 export default function MultiVariantBaseModelF(configSchema) {
     return types
@@ -21,14 +23,18 @@ export default function MultiVariantBaseModelF(configSchema) {
         type: types.literal('LinearVariantMatrixDisplay'),
         layout: types.optional(types.frozen(), []),
         configuration: ConfigurationReference(configSchema),
-        minorAlleleFrequencyFilter: types.optional(types.number, 0.1),
+        minorAlleleFrequencyFilter: types.optional(types.number, 0),
         showSidebarLabelsSetting: true,
         renderingMode: types.optional(types.string, 'alleleCount'),
         rowHeightSetting: types.optional(types.number, 8),
         autoHeight: true,
+        lengthCutoffFilter: Number.MAX_SAFE_INTEGER,
+        jexlFilters: types.maybe(types.array(types.string)),
+        referenceDrawingMode: 'skip',
     }))
         .volatile(() => ({
         sourcesLoadingStopToken: undefined,
+        simplifiedFeaturesStopToken: undefined,
         featureUnderMouseVolatile: undefined,
         sourcesVolatile: undefined,
         featuresVolatile: undefined,
@@ -37,6 +43,9 @@ export default function MultiVariantBaseModelF(configSchema) {
         hoveredGenotype: undefined,
     }))
         .actions(self => ({
+        setJexlFilters(f) {
+            self.jexlFilters = cast(f);
+        },
         setRowHeight(arg) {
             self.rowHeightSetting = arg;
         },
@@ -58,6 +67,12 @@ export default function MultiVariantBaseModelF(configSchema) {
             }
             self.sourcesLoadingStopToken = str;
         },
+        setSimplifiedFeaturesLoading(str) {
+            if (self.simplifiedFeaturesStopToken) {
+                stopStopToken(self.simplifiedFeaturesStopToken);
+            }
+            self.simplifiedFeaturesStopToken = str;
+        },
         setSources(sources) {
             if (!deepEqual(sources, self.sourcesVolatile)) {
                 self.sourcesVolatile = sources;
@@ -83,8 +98,15 @@ export default function MultiVariantBaseModelF(configSchema) {
                 self.sampleInfo = arg;
             }
         },
+        setReferenceDrawingMode(arg) {
+            self.referenceDrawingMode = arg;
+        },
     }))
         .views(self => ({
+        get activeFilters() {
+            var _a;
+            return ((_a = self.jexlFilters) !== null && _a !== void 0 ? _a : getConf(self, 'jexlFilters').map((r) => `jexl:${r}`));
+        },
         get preSources() {
             return self.layout.length ? self.layout : self.sourcesVolatile;
         },
@@ -113,6 +135,11 @@ export default function MultiVariantBaseModelF(configSchema) {
         .views(self => {
         const { trackMenuItems: superTrackMenuItems, renderProps: superRenderProps, } = self;
         return {
+            get sourceMap() {
+                return self.sources
+                    ? Object.fromEntries(self.sources.map(source => [source.name, source]))
+                    : undefined;
+            },
             get rowHeight() {
                 const { sources, autoHeight, rowHeightSetting, height } = self;
                 return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
@@ -190,6 +217,28 @@ export default function MultiVariantBaseModelF(configSchema) {
                             },
                         ],
                     },
+                    {
+                        label: 'Reference mode',
+                        type: 'subMenu',
+                        subMenu: [
+                            {
+                                label: 'Fill background grey, skip reference allele mouseovers (helps with large overlapping SVs)',
+                                type: 'radio',
+                                checked: self.referenceDrawingMode === 'skip',
+                                onClick: () => {
+                                    self.setReferenceDrawingMode('skip');
+                                },
+                            },
+                            {
+                                label: "Don't fill background grey, only draw actual reference alleles as grey",
+                                type: 'radio',
+                                checked: self.referenceDrawingMode === 'draw',
+                                onClick: () => {
+                                    self.setReferenceDrawingMode('draw');
+                                },
+                            },
+                        ],
+                    },
                     {
                         label: 'Filter by',
                         icon: FilterListIcon,
@@ -206,6 +255,18 @@ export default function MultiVariantBaseModelF(configSchema) {
                                     ]);
                                 },
                             },
+                            {
+                                label: 'Edit filters',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        AddFiltersDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
                         ],
                     },
                     {
@@ -239,7 +300,7 @@ export default function MultiVariantBaseModelF(configSchema) {
     })
         .views(self => ({
         get canDisplayLabels() {
-            return self.rowHeight > 8 && self.showSidebarLabelsSetting;
+            return self.rowHeight >= 8 && self.showSidebarLabelsSetting;
         },
         get totalHeight() {
             var _a;
@@ -259,9 +320,14 @@ export default function MultiVariantBaseModelF(configSchema) {
                 totalHeight: self.totalHeight,
                 renderingMode: self.renderingMode,
                 minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                lengthCutoffFilter: self.lengthCutoffFilter,
                 rowHeight: self.rowHeight,
                 sources: self.sources,
                 scrollTop: self.scrollTop,
+                referenceDrawingMode: self.referenceDrawingMode,
+                filters: new SerializableFilterChain({
+                    filters: self.activeFilters,
+                }),
             };
         },
     }));

package/esm/shared/SharedVariantMixin.d.ts

@@ -193,7 +193,7 @@ export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaT
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
-    selectFeature(feature: Feature): void;
+    selectFeature(feature: Feature): Promise<void>;
     navToFeature(feature: Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;

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

@@ -0,0 +1,9 @@
+declare const AddFiltersDialog: ({ model, handleClose, }: {
+    model: {
+        jexlFilters?: string[];
+        activeFilters: string[];
+        setJexlFilters: (arg?: string[]) => void;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AddFiltersDialog;

package/esm/shared/components/AddFiltersDialog.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    dialogContent: {
+        width: '80em',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+function checkJexl(code) {
+    stringToJexlExpression(code);
+}
+const AddFiltersDialog = observer(function ({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { activeFilters } = model;
+    const [data, setData] = useState(activeFilters.join('\n'));
+    const [error, setError] = useState();
+    useEffect(() => {
+        try {
+            data
+                .split('\n')
+                .map(line => line.trim())
+                .filter(line => !!line)
+                .map(line => {
+                checkJexl(line.trim());
+            });
+            setError(undefined);
+        }
+        catch (e) {
+            console.error(e);
+            setError(e);
+        }
+    }, [data]);
+    return (_jsxs(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [_jsxs(DialogContent, { children: [_jsxs("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), _jsxs("li", { children: [_jsx("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsx(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+                            setData(event.target.value);
+                        }, slotProps: {
+                            input: {
+                                classes: {
+                                    input: classes.textAreaFont,
+                                },
+                            },
+                        } })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
+                            model.setJexlFilters(data.split('\n'));
+                            handleClose();
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+export default AddFiltersDialog;

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

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

package/esm/shared/components/MultiVariantBaseDisplayComponent.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } 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) {
+    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] }));
+});
+export default MultiVariantBaseDisplayComponent;

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialog.js

@@ -7,8 +7,8 @@ import ClusterDialogAuto from './ClusterDialogAuto';
 import ClusterDialogManual from './ClusterDialogManual';
 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 (slow for large data, built in JS clustering)" })),
-                    manual: (_jsx("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+                    auto: (_jsx("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
+                    manual: (_jsx("div", { children: "Download R script to run clustering (faster, uses R implementation of hclust)" })),
                 }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: activeMode === key, onChange: () => {
                             setActiveMode(key);
                         } }), label: val }, key))) })] }));

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialogAuto.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { getContainingView, getSession, isAbortException, } from '@jbrowse/core/util';
@@ -9,19 +9,22 @@ import { observer } from 'mobx-react';
 import { isAlive } from 'mobx-state-tree';
 const ClusterDialogAuto = observer(function ({ model, children, handleClose, }) {
     const [progress, setProgress] = useState('');
+    const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
     const [stopToken, setStopToken] = useState('');
-    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs("div", { children: [progress ? (_jsxs("div", { style: { padding: 50 }, children: [_jsxs("span", { style: { width: 400 }, children: ["Progress: ", progress] }), _jsx(Button, { onClick: () => {
+    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", onClick: async () => {
+                                        }, children: "Stop" })] })) : null, error ? _jsx(ErrorMessage, { error: error }) : null] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", disabled: loading, onClick: async () => {
                             try {
                                 setError(undefined);
+                                setProgress('Initializing');
+                                setLoading(true);
                                 const view = getContainingView(model);
                                 if (!view.initialized) {
                                     return;
                                 }
                                 const { rpcManager } = getSession(model);
-                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                                 if (sourcesWithoutLayout) {
                                     const sessionId = getRpcSessionId(model);
                                     const stopToken = createStopToken();
@@ -30,6 +33,7 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                         regions: view.dynamicBlocks.contentBlocks,
                                         sources: sourcesWithoutLayout,
                                         minorAlleleFrequencyFilter,
+                                        lengthCutoffFilter,
                                         sessionId,
                                         adapterConfig,
                                         stopToken,
@@ -54,6 +58,7 @@ const ClusterDialogAuto = observer(function ({ model, children, handleClose, })
                                 }
                             }
                             finally {
+                                setLoading(false);
                                 setProgress('');
                                 setStopToken('');
                             }

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/ClusterDialogManual.js

@@ -25,8 +25,8 @@ const ClusterDialogManuals = observer(function ({ model, handleClose, children,
     const [ret, setRet] = useState();
     const [error, setError] = useState();
     const [loading, setLoading] = useState(false);
-    const [showAdvanced, setShowAdvanced] = useState(false);
-    const [clusterMethod, setClusterMethod] = useLocalStorage('cluster-clusterMethod', 'single');
+    const [showAdvanced, setShowAdvanced] = useLocalStorage('cluster-showAdvanced', false);
+    const [clusterMethod, setClusterMethod] = useState('single');
     useEffect(() => {
         ;
         (async () => {
@@ -39,12 +39,13 @@ const ClusterDialogManuals = observer(function ({ model, handleClose, children,
                     return;
                 }
                 const { rpcManager } = getSession(model);
-                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                 const sessionId = getRpcSessionId(model);
                 const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources: sourcesWithoutLayout,
                     minorAlleleFrequencyFilter,
+                    lengthCutoffFilter,
                     sessionId,
                     adapterConfig,
                 }));
@@ -77,31 +78,31 @@ cat(resultClusters$order,sep='\\n')`
             .map(([key, val]) => [key, ...val].join('\t'))
             .join('\n')
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs(Paper, { style: { padding: 16 }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    gap: '8px',
-                                    flexWrap: 'wrap',
-                                    marginBottom: '16px',
-                                }, children: [_jsx(Button, { variant: "contained", onClick: () => {
-                                            saveAs(new Blob([results || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'cluster.R');
-                                        }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
-                                            copy(results || '');
-                                        }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
-                                            saveAs(new Blob([resultsTsv || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'genotypes.tsv');
-                                        }, children: "Download TSV" }), _jsxs("div", { children: [_jsx(Button, { variant: "contained", onClick: () => {
-                                                    setShowAdvanced(!showAdvanced);
-                                                }, children: showAdvanced
-                                                    ? 'Hide advanced options'
-                                                    : 'Show advanced options' }), showAdvanced ? (_jsxs("div", { children: [_jsx(Typography, { variant: "h6", children: "Advanced options" }), _jsx(RadioGroup, { children: Object.entries({
-                                                            single: 'Single',
-                                                            complete: 'Complete',
-                                                        }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
-                                                                    setClusterMethod(key);
-                                                                } }), label: val }, key))) })] })) : null] }), results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs(Paper, { style: { padding: 16 }, children: [_jsxs("div", { children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            flexWrap: 'wrap',
+                                            marginBottom: '16px',
+                                        }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                                    saveAs(new Blob([results || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'cluster.R');
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                    copy(results || '');
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                    saveAs(new Blob([resultsTsv || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'genotypes.tsv');
+                                                }, children: "Download TSV" }), _jsx("div", { children: _jsx(Button, { variant: "contained", onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    }, children: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options' }) })] }), showAdvanced ? (_jsxs("div", { children: [_jsx(Typography, { variant: "h6", children: "Advanced options" }), _jsx(RadioGroup, { children: Object.entries({
+                                                    single: 'Single',
+                                                    complete: 'Complete',
+                                                }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
+                                                            setClusterMethod(key);
+                                                        } }), label: val }, key))) })] })) : null, results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
                                             setPaste(event.target.value);
                                         }, slotProps: {
                                             input: {

package/esm/shared/components/{ClusterDialog → MultiVariantClusterDialog}/types.d.ts

@@ -3,6 +3,7 @@ import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface ReducedModel {
     sourcesWithoutLayout?: Source[];
     minorAlleleFrequencyFilter?: number;
+    lengthCutoffFilter: number;
     adapterConfig: AnyConfigurationModel;
     setLayout: (arg: Source[]) => void;
     clearLayout: () => void;

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

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

package/{dist/shared/components/ColorLegend.d.ts → esm/shared/components/MultiVariantColorLegend.d.ts}

@@ -1,5 +1,5 @@
 import type { Source } from '../types';
-declare const ColorLegend: ({ model, labelWidth, }: {
+declare const MultiVariantColorLegend: ({ model, labelWidth, }: {
     model: {
         canDisplayLabels: boolean;
         rowHeight: number;
@@ -7,4 +7,4 @@ declare const ColorLegend: ({ model, labelWidth, }: {
     };
     labelWidth: number;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export default ColorLegend;
+export default MultiVariantColorLegend;

package/esm/shared/components/{ColorLegend.js → MultiVariantColorLegend.js}

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { clamp } from '@jbrowse/core/util';
+import { clamp, getFillProps } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import RectBg from './RectBg';
-const ColorLegend = observer(function ({ model, labelWidth, }) {
+const MultiVariantColorLegend = observer(function ({ 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, children: label || name })) : null] }, `${label}-${idx}`));
+                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;
 });
-export default ColorLegend;
+export default MultiVariantColorLegend;

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

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

package/esm/shared/components/MultiVariantCrosshairs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import MultiVariantTooltip from './MultiVariantTooltip';
+const useStyles = makeStyles()({
+    rel: {
+        position: 'relative',
+    },
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 800,
+        position: 'absolute',
+    },
+    color: {
+        width: 10,
+        height: 10,
+    },
+});
+const MultiVariantCrosshairs = observer(function ({ mouseX, mouseY, model, }) {
+    const { classes } = useStyles();
+    const theme = useTheme();
+    const { hoveredGenotype, height, scrollTop, 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] }));
+});
+export default MultiVariantCrosshairs;

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

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

package/esm/shared/components/{LegendBar.js → MultiVariantLegendBar.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { clamp, getContainingView, max, measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import ColorLegend from './ColorLegend';
+import ColorLegend from './MultiVariantColorLegend';
 const Wrapper = observer(function ({ children, model, exportSVG, }) {
     const { id, scrollTop, height } = model;
     const clipid = `legend-${id}`;

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

@@ -1,6 +1,10 @@
 export default function MultiVariantTooltip({ source, }: {
     source: {
         color?: string;
+        hoveredGenotype?: {
+            genotype: string;
+            name: string;
+        };
         [key: string]: unknown;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/esm/shared/components/MultiVariantTooltip.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import escapeHTML from 'escape-html';
 export default function MultiVariantTooltip({ source, }) {
     return (_jsxs(BaseTooltip, { children: [source.color ? (_jsx("div", { style: {
                     width: 10,
@@ -8,10 +9,10 @@ export default function MultiVariantTooltip({ source, }) {
                     backgroundColor: source.color,
                 } })) : null, _jsx(SanitizedHTML, { html: Object.entries(source)
                     .filter(([key, val]) => key !== 'color' &&
-                    key !== 'name' &&
                     key !== 'HP' &&
+                    key !== 'name' &&
                     key !== 'id' &&
                     val !== undefined)
-                    .map(([key, value]) => `${key}:${value}`)
+                    .map(([key, value]) => `${key}:${escapeHTML(`${value}`)}`)
                     .join('<br/>') })] }));
 }

package/esm/shared/components/RectBg.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
-const RectBg = ({ x, y, width, height, color = 'rgba(255,255,255,0.5)', }) => {
-    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color) }));
+import { alpha, useTheme } from '@mui/material';
+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.3)) }));
 };
 export default RectBg;

package/esm/shared/components/SetColorDialog.js

@@ -27,7 +27,7 @@ export default function SetColorDialog({ model, handleClose, }) {
     const [showBulkEditor, setShowBulkEditor] = useState(false);
     const [currLayout, setCurrLayout] = useState(sources || []);
     const [showTips, setShowTips] = useLocalStorage('multivariant-showTips', false);
-    return (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant color/arrangement editor", children: showBulkEditor ? (_jsx(BulkEditPanel, { currLayout: currLayout, onClose: arg => {
+    return (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-sample variant display - Color/arrangement editor", children: showBulkEditor ? (_jsx(BulkEditPanel, { currLayout: currLayout, onClose: arg => {
                 if (arg) {
                     setCurrLayout(arg);
                 }

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

@@ -1,6 +1,7 @@
 import type { Source } from '../types';
+import type { GridRowId } from '@mui/x-data-grid';
 export default function SourcesDataGrid({ rows, onChange, setSelected, }: {
     rows: Source[];
     onChange: (arg: Source[]) => void;
-    setSelected: (arg: string[]) => void;
+    setSelected: (arg: GridRowId[]) => void;
 }): import("react/jsx-runtime").JSX.Element;