@jbrowse/plugin-variants 3.2.0 → 3.4.0

package/dist/shared/components/AddFiltersDialog.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    dialogContent: {
+        width: '80em',
+    },
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+function checkJexl(code) {
+    (0, jexlStrings_1.stringToJexlExpression)(code);
+}
+const AddFiltersDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const { activeFilters } = model;
+    const [data, setData] = (0, react_1.useState)(activeFilters.join('\n'));
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Add track filters", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'name')=='BRCA1'" }), " - show only feature where the name attribute is BRCA1"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'type')=='gene'" }), " - show only gene type features in a GFF that has many other feature types"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'score') > 400" }), " - show only features that have a score greater than 400"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("code", { children: "jexl:get(feature,'end') - get(feature,'start') < 1000000" }), ' ', "- show only features with length less than 1Mbp"] })] })] }), error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsx)(material_1.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,
+                                },
+                            },
+                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !!error, onClick: () => {
+                            model.setJexlFilters(data.split('\n'));
+                            handleClose();
+                        }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = AddFiltersDialog;

package/dist/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/dist/shared/components/MultiVariantBaseDisplayComponent.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const mobx_react_1 = require("mobx-react");
+const MultiVariantCrosshairs_1 = __importDefault(require("./MultiVariantCrosshairs"));
+const MultiVariantLegendBar_1 = __importDefault(require("./MultiVariantLegendBar"));
+const MultiVariantBaseDisplayComponent = (0, mobx_react_1.observer)(function (props) {
+    const { model } = props;
+    const ref = (0, react_1.useRef)(null);
+    const [mouseY, setMouseY] = (0, react_1.useState)();
+    const [mouseX, setMouseX] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }), (0, jsx_runtime_1.jsx)(MultiVariantLegendBar_1.default, { model: model }), mouseX && mouseY ? ((0, jsx_runtime_1.jsx)(MultiVariantCrosshairs_1.default, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
+});
+exports.default = MultiVariantBaseDisplayComponent;

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

@@ -12,8 +12,8 @@ const ClusterDialogAuto_1 = __importDefault(require("./ClusterDialogAuto"));
 const ClusterDialogManual_1 = __importDefault(require("./ClusterDialogManual"));
 function Header({ activeMode, setActiveMode, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { marginBottom: 30 }, children: "This procedure will cluster the visible genotype data using hierarchical clustering" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
-                    auto: ((0, jsx_runtime_1.jsx)("div", { children: "Run in-app clustering (slow for large data, built in JS clustering)" })),
-                    manual: ((0, jsx_runtime_1.jsx)("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+                    auto: ((0, jsx_runtime_1.jsx)("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
+                    manual: ((0, jsx_runtime_1.jsx)("div", { children: "Download R script to run clustering (faster, uses R implementation of hclust)" })),
                 }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: activeMode === key, onChange: () => {
                             setActiveMode(key);
                         } }), label: val }, key))) })] }));

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

@@ -11,19 +11,22 @@ const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children, handleClose, }) {
     const [progress, setProgress] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)();
     const [stopToken, setStopToken] = (0, react_1.useState)('');
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { children: [progress ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { width: 400 }, children: ["Progress: ", progress] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsx)("span", { children: progress || 'Loading...' }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
                                             (0, stopToken_1.stopStopToken)(stopToken);
-                                        }, children: "Stop" })] })) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: async () => {
+                                        }, children: "Stop" })] })) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", disabled: loading, onClick: async () => {
                             try {
                                 setError(undefined);
+                                setProgress('Initializing');
+                                setLoading(true);
                                 const view = (0, util_1.getContainingView)(model);
                                 if (!view.initialized) {
                                     return;
                                 }
                                 const { rpcManager } = (0, util_1.getSession)(model);
-                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                                 if (sourcesWithoutLayout) {
                                     const sessionId = (0, tracks_1.getRpcSessionId)(model);
                                     const stopToken = (0, stopToken_1.createStopToken)();
@@ -32,6 +35,7 @@ const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children
                                         regions: view.dynamicBlocks.contentBlocks,
                                         sources: sourcesWithoutLayout,
                                         minorAlleleFrequencyFilter,
+                                        lengthCutoffFilter,
                                         sessionId,
                                         adapterConfig,
                                         stopToken,
@@ -56,6 +60,7 @@ const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children
                                 }
                             }
                             finally {
+                                setLoading(false);
                                 setProgress('');
                                 setStopToken('');
                             }

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

@@ -30,8 +30,8 @@ const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handl
     const [ret, setRet] = (0, react_1.useState)();
     const [error, setError] = (0, react_1.useState)();
     const [loading, setLoading] = (0, react_1.useState)(false);
-    const [showAdvanced, setShowAdvanced] = (0, react_1.useState)(false);
-    const [clusterMethod, setClusterMethod] = (0, util_1.useLocalStorage)('cluster-clusterMethod', 'single');
+    const [showAdvanced, setShowAdvanced] = (0, util_1.useLocalStorage)('cluster-showAdvanced', false);
+    const [clusterMethod, setClusterMethod] = (0, react_1.useState)('single');
     (0, react_1.useEffect)(() => {
         ;
         (async () => {
@@ -44,12 +44,13 @@ const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handl
                     return;
                 }
                 const { rpcManager } = (0, util_1.getSession)(model);
-                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, lengthCutoffFilter, adapterConfig, } = model;
                 const sessionId = (0, tracks_1.getRpcSessionId)(model);
                 const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
                     regions: view.dynamicBlocks.contentBlocks,
                     sources: sourcesWithoutLayout,
                     minorAlleleFrequencyFilter,
+                    lengthCutoffFilter,
                     sessionId,
                     adapterConfig,
                 }));
@@ -82,31 +83,31 @@ cat(resultClusters$order,sep='\\n')`
             .map(([key, val]) => [key, ...val].join('\t'))
             .join('\n')
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 16 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    gap: '8px',
-                                    flexWrap: 'wrap',
-                                    marginBottom: '16px',
-                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                                            (0, file_saver_1.saveAs)(new Blob([results || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'cluster.R');
-                                        }, children: "Download Rscript" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                                            (0, copy_to_clipboard_1.default)(results || '');
-                                        }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                                            (0, file_saver_1.saveAs)(new Blob([resultsTsv || ''], {
-                                                type: 'text/plain;charset=utf-8',
-                                            }), 'genotypes.tsv');
-                                        }, children: "Download TSV" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                                                    setShowAdvanced(!showAdvanced);
-                                                }, children: showAdvanced
-                                                    ? 'Hide advanced options'
-                                                    : 'Show advanced options' }), showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Advanced options" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
-                                                            single: 'Single',
-                                                            complete: 'Complete',
-                                                        }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
-                                                                    setClusterMethod(key);
-                                                                } }), label: val }, key))) })] })) : null] }), results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 16 }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            flexWrap: 'wrap',
+                                            marginBottom: '16px',
+                                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, file_saver_1.saveAs)(new Blob([results || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'cluster.R');
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, copy_to_clipboard_1.default)(results || '');
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    (0, file_saver_1.saveAs)(new Blob([resultsTsv || ''], {
+                                                        type: 'text/plain;charset=utf-8',
+                                                    }), 'genotypes.tsv');
+                                                }, children: "Download TSV" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    }, children: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options' }) })] }), showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Advanced options" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                                                    single: 'Single',
+                                                    complete: 'Complete',
+                                                }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
+                                                            setClusterMethod(key);
+                                                        } }), label: val }, key))) })] })) : null, results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.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/dist/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/dist/shared/components/MultiVariantClusterDialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/{esm/shared/components/ColorLegend.d.ts → dist/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/dist/shared/components/{ColorLegend.js → MultiVariantColorLegend.js}

@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const RectBg_1 = __importDefault(require("./RectBg"));
-const ColorLegend = (0, mobx_react_1.observer)(function ({ model, labelWidth, }) {
+const MultiVariantColorLegend = (0, mobx_react_1.observer)(function ({ model, labelWidth, }) {
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = (0, util_1.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 = (0, material_1.useTheme)();
     return sources ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [canDisplayLabels ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => {
                 const { color, name, label } = source;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null, canDisplayLabels ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, children: label || name })) : null] }, `${label}-${idx}`));
+                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null, canDisplayLabels ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + svgFontSize, x: color ? colorBoxWidth + 2 : 0, fontSize: svgFontSize, ...(0, util_1.getFillProps)(theme.palette.text.primary), children: label || name })) : null] }, `${label}-${idx}`));
             })] })) : null;
 });
-exports.default = ColorLegend;
+exports.default = MultiVariantColorLegend;

package/dist/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/dist/shared/components/MultiVariantCrosshairs.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const MultiVariantTooltip_1 = __importDefault(require("./MultiVariantTooltip"));
+const useStyles = (0, mui_1.makeStyles)()({
+    rel: {
+        position: 'relative',
+    },
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 800,
+        position: 'absolute',
+    },
+    color: {
+        width: 10,
+        height: 10,
+    },
+});
+const MultiVariantCrosshairs = (0, mobx_react_1.observer)(function ({ mouseX, mouseY, model, }) {
+    const { classes } = useStyles();
+    const theme = (0, material_1.useTheme)();
+    const { hoveredGenotype, height, scrollTop, sourceMap } = model;
+    const { width } = (0, util_1.getContainingView)(model);
+    const source = hoveredGenotype ? sourceMap === null || sourceMap === void 0 ? void 0 : sourceMap[hoveredGenotype.name] : undefined;
+    const y = mouseY - scrollTop;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [(0, jsx_runtime_1.jsxs)("svg", { className: classes.cursor, width: width, height: height, style: {
+                    top: scrollTop,
+                }, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: width, y1: y, y2: y, stroke: theme.palette.text.primary }), (0, jsx_runtime_1.jsx)("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: theme.palette.text.primary })] }), source ? ((0, jsx_runtime_1.jsx)(MultiVariantTooltip_1.default, { source: {
+                    ...source,
+                    ...hoveredGenotype,
+                } })) : null] }));
+});
+exports.default = MultiVariantCrosshairs;

package/dist/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/dist/shared/components/{LegendBar.js → MultiVariantLegendBar.js}

@@ -7,7 +7,7 @@ exports.LegendBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-const ColorLegend_1 = __importDefault(require("./ColorLegend"));
+const MultiVariantColorLegend_1 = __importDefault(require("./MultiVariantColorLegend"));
 const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
     const { id, scrollTop, height } = model;
     const clipid = `legend-${id}`;
@@ -25,7 +25,7 @@ exports.LegendBar = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
     const { canDisplayLabels, rowHeight, sources } = model;
     const svgFontSize = (0, util_1.clamp)(rowHeight, 8, 12);
-    return sources ? ((0, jsx_runtime_1.jsx)(Wrapper, { ...props, children: (0, jsx_runtime_1.jsx)(ColorLegend_1.default, { model: model, labelWidth: (0, util_1.max)(sources
+    return sources ? ((0, jsx_runtime_1.jsx)(Wrapper, { ...props, children: (0, jsx_runtime_1.jsx)(MultiVariantColorLegend_1.default, { model: model, labelWidth: (0, util_1.max)(sources
                 .map(s => (0, util_1.measureText)(s.label, svgFontSize) + 10)
                 .map(width => (canDisplayLabels ? width : 20)), 0) }) })) : null;
 });

package/dist/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/dist/shared/components/MultiVariantTooltip.js

@@ -7,6 +7,7 @@ exports.default = MultiVariantTooltip;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
+const escape_html_1 = __importDefault(require("escape-html"));
 function MultiVariantTooltip({ source, }) {
     return ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { children: [source.color ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     width: 10,
@@ -14,10 +15,10 @@ function MultiVariantTooltip({ source, }) {
                     backgroundColor: source.color,
                 } })) : null, (0, jsx_runtime_1.jsx)(ui_1.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}:${(0, escape_html_1.default)(`${value}`)}`)
                     .join('<br/>') })] }));
 }

package/dist/shared/components/RectBg.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
-const RectBg = ({ x, y, width, height, color = 'rgba(255,255,255,0.5)', }) => {
-    return ((0, jsx_runtime_1.jsx)("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...(0, util_1.getFillProps)(color) }));
+const material_1 = require("@mui/material");
+const RectBg = ({ x, y, width, height, color, }) => {
+    const theme = (0, material_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...(0, util_1.getFillProps)(color || (0, material_1.alpha)(theme.palette.background.paper, 0.3)) }));
 };
 exports.default = RectBg;

package/dist/shared/components/SetColorDialog.js

@@ -33,7 +33,7 @@ function SetColorDialog({ model, handleClose, }) {
     const [showBulkEditor, setShowBulkEditor] = (0, react_1.useState)(false);
     const [currLayout, setCurrLayout] = (0, react_1.useState)(sources || []);
     const [showTips, setShowTips] = (0, util_1.useLocalStorage)('multivariant-showTips', false);
-    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-variant color/arrangement editor", children: showBulkEditor ? ((0, jsx_runtime_1.jsx)(BulkEditPanel_1.default, { currLayout: currLayout, onClose: arg => {
+    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-sample variant display - Color/arrangement editor", children: showBulkEditor ? ((0, jsx_runtime_1.jsx)(BulkEditPanel_1.default, { currLayout: currLayout, onClose: arg => {
                 if (arg) {
                     setCurrLayout(arg);
                 }

package/dist/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;

package/dist/shared/components/SourcesDataGrid.js

@@ -20,56 +20,49 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 function SourcesDataGrid({ rows, onChange, setSelected, }) {
     const { classes } = useStyles();
+    const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
     const [currSort, setCurrSort] = (0, react_1.useState)({
         idx: 0,
         field: null,
     });
-    if (rows.length) {
-        const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
-        return ((0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                    setSelected(arg);
-                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                    {
-                        field: 'color',
-                        headerName: 'Color',
-                        renderCell: params => {
-                            const { value, id } = params;
-                            return ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { checkboxSelection: true, onRowSelectionModelChange: arg => {
+                setSelected([...arg.ids]);
+            }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                {
+                    field: 'color',
+                    headerName: 'Color',
+                    renderCell: params => {
+                        const { value, id } = params;
+                        return ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
+                                const elt = rows.find(f => f.name === id);
+                                if (elt) {
+                                    elt.color = c;
+                                }
+                                onChange([...rows]);
+                            } }));
                     },
-                    {
-                        field: 'label',
-                        headerName: 'Name',
-                        width: (0, util_1.measureGridWidth)(rows.map(r => r.label)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
-                        width: (0, util_1.measureGridWidth)(rows.map(r => `${r[val]}`)),
-                    })),
-                ], sortModel: [], onSortModelChange: args => {
-                    const sort = args[0];
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = sort.field || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            const aa = (0, util_1.getStr)(a[field]);
-                            const bb = (0, util_1.getStr)(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }) }));
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)("div", { children: "No rows, check sample metadata configuration" });
-    }
+                },
+                {
+                    field: 'label',
+                    headerName: 'Name',
+                    width: (0, util_1.measureGridWidth)(rows.map(r => r.label)),
+                },
+                ...Object.keys(rest).map(val => ({
+                    field: val,
+                    renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
+                    width: (0, util_1.measureGridWidth)(rows.map(r => `${r[val]}`)),
+                })),
+            ], sortModel: [], onSortModelChange: args => {
+                const sort = args[0];
+                const idx = (currSort.idx + 1) % 2;
+                const field = sort.field || currSort.field;
+                setCurrSort({ idx, field });
+                onChange(field
+                    ? [...rows].sort((a, b) => {
+                        const aa = (0, util_1.getStr)(a[field]);
+                        const bb = (0, util_1.getStr)(b[field]);
+                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
+                    })
+                    : rows);
+            } }) }));
 }

package/dist/shared/components/SourcesGrid.js

@@ -9,6 +9,6 @@ const SourcesDataGrid_1 = __importDefault(require("./SourcesDataGrid"));
 const SourcesGridHeader_1 = __importDefault(require("./SourcesGridHeader"));
 function SourcesGrid({ rows, onChange, showTips, }) {
     const [selected, setSelected] = (0, react_1.useState)([]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SourcesGridHeader_1.default, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), (0, jsx_runtime_1.jsx)(SourcesDataGrid_1.default, { rows: rows, onChange: onChange, setSelected: setSelected })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(SourcesGridHeader_1.default, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), rows.length ? ((0, jsx_runtime_1.jsx)(SourcesDataGrid_1.default, { rows: rows, onChange: onChange, setSelected: setSelected })) : ((0, jsx_runtime_1.jsx)("div", { children: "No rows" }))] }));
 }
 exports.default = SourcesGrid;

package/dist/shared/components/SourcesGridHeader.d.ts

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

package/dist/shared/drawAlleleCount.d.ts

@@ -1 +1,2 @@
-export declare function drawColorAlleleCount(alleles: string[], ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, mostFrequentAlt: string): void;
+export declare function getColorAlleleCount(ref: number, alt: number, alt2: number, uncalled: number, total: number, drawReference?: boolean): any;
+export declare function drawColorAlleleCount(c: string, ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, featureType?: string, featureStrand?: number, alpha?: number): void;