@jbrowse/plugin-variants 3.1.0 → 3.3.0

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { 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 => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+const ClusterDialogManuals = observer(function ({ model, handleClose, children, }) {
+    const { classes } = useStyles();
+    const [paste, setPaste] = useState('');
+    const [ret, setRet] = useState();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const [showAdvanced, setShowAdvanced] = useLocalStorage('cluster-showAdvanced', false);
+    const [clusterMethod, setClusterMethod] = useState('single');
+    useEffect(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                setRet(undefined);
+                setLoading(true);
+                const view = getContainingView(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = getSession(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,
+                }));
+                setRet(ret);
+            }
+            catch (e) {
+                if (!isAbortException(e) && isAlive(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model]);
+    const results = ret
+        ? `inputMatrix<-matrix(c(${Object.values(ret)
+            .map(val => val.join(','))
+            .join(',\n')}
+),nrow=${Object.values(ret).length},byrow=TRUE)
+rownames(inputMatrix)<-c(${Object.keys(ret)
+            .map(key => `'${key}'`)
+            .join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
+cat(resultClusters$order,sep='\\n')`
+        : undefined;
+    const resultsTsv = ret
+        ? Object.entries(ret)
+            .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", { 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: {
+                                                classes: {
+                                                    input: classes.textAreaFont,
+                                                },
+                                            },
+                                        } })] })] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => {
+                            const { sourcesWithoutLayout } = model;
+                            if (sourcesWithoutLayout) {
+                                try {
+                                    model.setLayout(paste
+                                        .split('\n')
+                                        .map(t => t.trim())
+                                        .filter(f => !!f)
+                                        .map(r => +r)
+                                        .map(idx => {
+                                        const ret = sourcesWithoutLayout[idx - 1];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    getSession(model).notifyError(`${e}`, e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+export default ClusterDialogManuals;

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

@@ -0,0 +1,10 @@
+import type { Source } from '../../types';
+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;

package/esm/shared/components/SourcesDataGrid.js

@@ -19,8 +19,8 @@ export default function SourcesDataGrid({ rows, onChange, setSelected, }) {
         idx: 0,
         field: null,
     });
-    return (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                setSelected(arg);
+    return (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { checkboxSelection: true, onRowSelectionModelChange: arg => {
+                setSelected([...arg.ids]);
             }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
                 {
                     field: 'color',

package/esm/shared/components/SourcesGrid.js

@@ -4,6 +4,6 @@ import SourcesDataGrid from './SourcesDataGrid';
 import SourcesGridHeader from './SourcesGridHeader';
 function SourcesGrid({ rows, onChange, showTips, }) {
     const [selected, setSelected] = useState([]);
-    return (_jsxs("div", { children: [_jsx(SourcesGridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), _jsx(SourcesDataGrid, { rows: rows, onChange: onChange, setSelected: setSelected })] }));
+    return (_jsxs("div", { children: [_jsx(SourcesGridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }), rows.length ? (_jsx(SourcesDataGrid, { rows: rows, onChange: onChange, setSelected: setSelected })) : (_jsx("div", { children: "No rows" }))] }));
 }
 export default SourcesGrid;

package/esm/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/esm/shared/components/SourcesGridHeader.js

@@ -22,12 +22,12 @@ export default function SourcesGridHeader({ selected, onChange, rows, showTips,
                     onChange(moveDown([...rows], selected, rows.length));
                 }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowDownIcon, {}), showTips ? 'Move selected items to bottom' : null] }), _jsx(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
                     setWidgetColor(c);
-                    selected.forEach(id => {
+                    for (const id of selected) {
                         const elt = rows.find(f => f.name === id);
                         if (elt) {
                             elt.color = c;
                         }
-                    });
+                    }
                     onChange([...rows]);
                 }, onClose: () => {
                     setAnchorEl(null);

package/esm/shared/drawAlleleCount.d.ts

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

package/esm/shared/drawAlleleCount.js

@@ -1,6 +1,6 @@
 import { colord } from '@jbrowse/core/util/colord';
 import { f2 } from './constants';
-function getColorAlleleCount(alleles, mostFrequentAlt) {
+function getColorAlleleCount(alleles, mostFrequentAlt, drawReference = true) {
     const total = alleles.length;
     let alt = 0;
     let uncalled = 0;
@@ -21,7 +21,7 @@ function getColorAlleleCount(alleles, mostFrequentAlt) {
         }
     }
     if (ref === total) {
-        return `#ccc`;
+        return drawReference ? '#ccc' : undefined;
     }
     else {
         let a1;
@@ -39,7 +39,31 @@ function getColorAlleleCount(alleles, mostFrequentAlt) {
         return (a1 === null || a1 === void 0 ? void 0 : a1.toHex()) || 'black';
     }
 }
-export function drawColorAlleleCount(alleles, ctx, x, y, w, h, mostFrequentAlt) {
-    ctx.fillStyle = getColorAlleleCount(alleles, mostFrequentAlt);
-    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+export function drawColorAlleleCount(alleles, ctx, x, y, w, h, mostFrequentAlt, drawReference = true, featureType = '', featureStrand, alpha = 1) {
+    const c = getColorAlleleCount(alleles, mostFrequentAlt, drawReference);
+    if (c) {
+        ctx.fillStyle = alpha !== 1 ? colord(c).alpha(alpha).toHex() : c;
+        if (featureType === 'inversion') {
+            if (featureStrand === 1) {
+                ctx.beginPath();
+                ctx.moveTo(x - f2, y - f2);
+                ctx.lineTo(x - f2, y + h + f2);
+                ctx.lineTo(x + w + f2, y + h / 2);
+                ctx.closePath();
+                ctx.fill();
+            }
+            else {
+                ctx.beginPath();
+                ctx.moveTo(x + w + f2, y - f2);
+                ctx.lineTo(x + w + f2, y + h + f2);
+                ctx.lineTo(x - f2, y + h / 2);
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        else {
+            ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+        }
+    }
+    return c;
 }

package/esm/shared/drawPhased.d.ts

@@ -1 +1 @@
-export declare function drawPhased(alleles: string[], ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, HP: number, PS?: string): void;
+export declare function drawPhased(alleles: string[], ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, HP: number, PS?: string, drawReference?: boolean, alpha?: number): string | undefined;

package/esm/shared/drawPhased.js

@@ -1,18 +1,22 @@
 import { set1 } from '@jbrowse/core/ui/colors';
+import { colord } from '@jbrowse/core/util/colord';
 import { f2 } from './constants';
 import { colorify } from './util';
-function getColorPhased(alleles, HP) {
+function getColorPhased(alleles, HP, drawReference = true) {
     const c = +alleles[HP];
-    return c ? set1[c - 1] || 'black' : '#ccc';
+    return c ? set1[c - 1] || 'black' : drawReference ? '#ccc' : undefined;
 }
-function getColorPhasedWithPhaseSet(alleles, HP, PS) {
+function getColorPhasedWithPhaseSet(alleles, HP, PS, drawReference = true) {
     const c = +alleles[HP];
-    return c ? colorify(+PS) || 'black' : '#ccc';
+    return c ? colorify(+PS) || 'black' : drawReference ? '#ccc' : undefined;
 }
-export function drawPhased(alleles, ctx, x, y, w, h, HP, PS) {
-    ctx.fillStyle =
-        PS !== undefined
-            ? getColorPhasedWithPhaseSet(alleles, HP, PS)
-            : getColorPhased(alleles, HP);
-    ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+export function drawPhased(alleles, ctx, x, y, w, h, HP, PS, drawReference = true, alpha = 1) {
+    const c = PS !== undefined
+        ? getColorPhasedWithPhaseSet(alleles, HP, PS, drawReference)
+        : getColorPhased(alleles, HP, drawReference);
+    if (c) {
+        ctx.fillStyle = alpha !== 1 ? colord(c).alpha(alpha).toHex() : c;
+        ctx.fillRect(x - f2, y - f2, w + f2, h + f2);
+    }
+    return c;
 }

package/esm/shared/getSources.d.ts

@@ -0,0 +1,15 @@
+import type { SampleInfo, Source } from './types';
+export declare function getSources({ sources, layout, renderingMode, sampleInfo, }: {
+    sources: Source[];
+    layout?: Source[];
+    renderingMode: string;
+    sampleInfo?: Record<string, SampleInfo>;
+}): {
+    label: string;
+    id: string;
+    baseUri?: string;
+    name: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+}[];

package/esm/shared/getSources.js

@@ -0,0 +1,31 @@
+export function getSources({ sources, layout = sources, renderingMode, sampleInfo, }) {
+    const rows = [];
+    const sourceMap = Object.fromEntries(sources.map(s => [s.name, s]));
+    for (const row of layout) {
+        if (renderingMode === 'phased') {
+            const info = sampleInfo === null || sampleInfo === void 0 ? void 0 : sampleInfo[row.name];
+            if (info === null || info === void 0 ? void 0 : info.isPhased) {
+                const ploidy = info.maxPloidy;
+                for (let i = 0; i < ploidy; i++) {
+                    const id = `${row.name} HP${i}`;
+                    rows.push({
+                        ...sourceMap[row.name],
+                        ...row,
+                        label: id,
+                        HP: i,
+                        id: id,
+                    });
+                }
+            }
+        }
+        else {
+            rows.push({
+                ...sourceMap[row.name],
+                ...row,
+                label: row.name,
+                id: row.name,
+            });
+        }
+    }
+    return rows;
+}

package/esm/shared/minorAlleleFrequencyUtils.d.ts

@@ -2,7 +2,12 @@ import type { Feature } from '@jbrowse/core/util';
 export declare function findSecondLargestNumber(arr: Iterable<number>): number;
 export declare function calculateAlleleCounts(feat: Feature): Map<any, any>;
 export declare function calculateMinorAlleleFrequency(alleleCounts: Map<string, number>): number;
-export declare function getFeaturesThatPassMinorAlleleFrequencyFilter(feats: Iterable<Feature>, minorAlleleFrequencyFilter: number, lengthCutoffFilter?: number): {
+export declare function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, stopToken, }: {
+    features: Iterable<Feature>;
+    minorAlleleFrequencyFilter: number;
+    lengthCutoffFilter: number;
+    stopToken?: string;
+}): {
     feature: Feature;
     mostFrequentAlt: string;
     alleleCounts: Map<string, number>;

package/esm/shared/minorAlleleFrequencyUtils.js

@@ -1,4 +1,4 @@
-import { sum } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, sum } from '@jbrowse/core/util';
 export function findSecondLargestNumber(arr) {
     let firstMax = 0;
     let secondMax = 0;
@@ -41,21 +41,20 @@ function getMostFrequentAlt(alleleCounts) {
     }
     return mostFrequentAlt;
 }
-export function getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter, lengthCutoffFilter = 10) {
+export function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, stopToken, }) {
     const results = [];
-    for (const feature of feats) {
+    forEachWithStopTokenCheck(features, stopToken, feature => {
         if (feature.get('end') - feature.get('start') <= lengthCutoffFilter) {
             const alleleCounts = calculateAlleleCounts(feature);
             if (calculateMinorAlleleFrequency(alleleCounts) >=
                 minorAlleleFrequencyFilter) {
-                const mostFrequentAlt = getMostFrequentAlt(alleleCounts);
                 results.push({
                     feature,
-                    mostFrequentAlt,
+                    mostFrequentAlt: getMostFrequentAlt(alleleCounts),
                     alleleCounts,
                 });
             }
         }
-    }
+    });
     return results;
 }

package/esm/shared/sourcesGridUtils.d.ts

@@ -1,10 +1,11 @@
+import type { GridRowId } from '@mui/x-data-grid';
 export declare function moveUp(arr: {
     name: string;
-}[], sel: string[], by?: number): {
+}[], sel: GridRowId[], by?: number): {
     name: string;
 }[];
 export declare function moveDown(arr: {
     name: string;
-}[], sel: string[], by?: number): {
+}[], sel: GridRowId[], by?: number): {
     name: string;
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -40,13 +40,14 @@
     "@gmod/bgzf-filehandle": "^2.0.1",
     "@gmod/tabix": "^2.0.0",
     "@gmod/vcf": "^6.0.8",
-    "@jbrowse/core": "^3.1.0",
-    "@jbrowse/plugin-circular-view": "^3.1.0",
-    "@jbrowse/plugin-linear-genome-view": "^3.1.0",
-    "@jbrowse/sv-core": "^3.1.0",
-    "@mui/icons-material": "^6.0.0",
-    "@mui/material": "^6.0.0",
-    "@mui/x-data-grid": "^7.0.0",
+    "@jbrowse/core": "^3.3.0",
+    "@jbrowse/plugin-circular-view": "^3.3.0",
+    "@jbrowse/plugin-linear-genome-view": "^3.3.0",
+    "@jbrowse/sv-core": "^3.3.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^8.0.0",
+    "escape-html": "^1.0.3",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -62,5 +63,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "91492049ddea0aed90eb24d3c066c2d9f5a6b189"
+  "gitHead": "0bb64d8cc7ecdd167515308b31eec3d9acbc59e4"
 }

package/dist/MultiLinearVariantDisplay/components/Crosshair.d.ts

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