@jbrowse/plugin-variants 3.1.0 → 3.3.0

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

@@ -25,8 +25,8 @@ function SourcesDataGrid({ rows, onChange, setSelected, }) {
         idx: 0,
         field: null,
     });
-    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);
+    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',

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

@@ -28,12 +28,12 @@ function SourcesGridHeader({ selected, onChange, rows, showTips, }) {
                     onChange((0, sourcesGridUtils_1.moveDown)([...rows], selected, rows.length));
                 }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowDown_1.default, {}), showTips ? 'Move selected items to bottom' : null] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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/dist/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/dist/shared/drawAlleleCount.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawColorAlleleCount = drawColorAlleleCount;
 const colord_1 = require("@jbrowse/core/util/colord");
 const constants_1 = require("./constants");
-function getColorAlleleCount(alleles, mostFrequentAlt) {
+function getColorAlleleCount(alleles, mostFrequentAlt, drawReference = true) {
     const total = alleles.length;
     let alt = 0;
     let uncalled = 0;
@@ -24,7 +24,7 @@ function getColorAlleleCount(alleles, mostFrequentAlt) {
         }
     }
     if (ref === total) {
-        return `#ccc`;
+        return drawReference ? '#ccc' : undefined;
     }
     else {
         let a1;
@@ -42,7 +42,31 @@ function getColorAlleleCount(alleles, mostFrequentAlt) {
         return (a1 === null || a1 === void 0 ? void 0 : a1.toHex()) || 'black';
     }
 }
-function drawColorAlleleCount(alleles, ctx, x, y, w, h, mostFrequentAlt) {
-    ctx.fillStyle = getColorAlleleCount(alleles, mostFrequentAlt);
-    ctx.fillRect(x - constants_1.f2, y - constants_1.f2, w + constants_1.f2, h + constants_1.f2);
+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 ? (0, colord_1.colord)(c).alpha(alpha).toHex() : c;
+        if (featureType === 'inversion') {
+            if (featureStrand === 1) {
+                ctx.beginPath();
+                ctx.moveTo(x - constants_1.f2, y - constants_1.f2);
+                ctx.lineTo(x - constants_1.f2, y + h + constants_1.f2);
+                ctx.lineTo(x + w + constants_1.f2, y + h / 2);
+                ctx.closePath();
+                ctx.fill();
+            }
+            else {
+                ctx.beginPath();
+                ctx.moveTo(x + w + constants_1.f2, y - constants_1.f2);
+                ctx.lineTo(x + w + constants_1.f2, y + h + constants_1.f2);
+                ctx.lineTo(x - constants_1.f2, y + h / 2);
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+        else {
+            ctx.fillRect(x - constants_1.f2, y - constants_1.f2, w + constants_1.f2, h + constants_1.f2);
+        }
+    }
+    return c;
 }

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

@@ -2,20 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawPhased = drawPhased;
 const colors_1 = require("@jbrowse/core/ui/colors");
+const colord_1 = require("@jbrowse/core/util/colord");
 const constants_1 = require("./constants");
 const util_1 = require("./util");
-function getColorPhased(alleles, HP) {
+function getColorPhased(alleles, HP, drawReference = true) {
     const c = +alleles[HP];
-    return c ? colors_1.set1[c - 1] || 'black' : '#ccc';
+    return c ? colors_1.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 ? (0, util_1.colorify)(+PS) || 'black' : '#ccc';
+    return c ? (0, util_1.colorify)(+PS) || 'black' : drawReference ? '#ccc' : undefined;
 }
-function drawPhased(alleles, ctx, x, y, w, h, HP, PS) {
-    ctx.fillStyle =
-        PS !== undefined
-            ? getColorPhasedWithPhaseSet(alleles, HP, PS)
-            : getColorPhased(alleles, HP);
-    ctx.fillRect(x - constants_1.f2, y - constants_1.f2, w + constants_1.f2, h + constants_1.f2);
+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 ? (0, colord_1.colord)(c).alpha(alpha).toHex() : c;
+        ctx.fillRect(x - constants_1.f2, y - constants_1.f2, w + constants_1.f2, h + constants_1.f2);
+    }
+    return c;
 }

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSources = getSources;
+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/dist/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/dist/shared/minorAlleleFrequencyUtils.js

@@ -47,21 +47,20 @@ function getMostFrequentAlt(alleleCounts) {
     }
     return mostFrequentAlt;
 }
-function getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter, lengthCutoffFilter = 10) {
+function getFeaturesThatPassMinorAlleleFrequencyFilter({ features, minorAlleleFrequencyFilter, lengthCutoffFilter, stopToken, }) {
     const results = [];
-    for (const feature of feats) {
+    (0, util_1.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/dist/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/esm/MultiLinearVariantDisplay/components/VariantDisplayComponent.js

@@ -2,8 +2,8 @@ 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 './Crosshair';
-import LegendBar from '../../shared/components/LegendBar';
+import Crosshair from '../../shared/components/MultiVariantCrosshairs';
+import LegendBar from '../../shared/components/MultiVariantLegendBar';
 const MultiLinearVariantDisplayComponent = observer(function (props) {
     const { model } = props;
     const ref = useRef(null);

package/esm/MultiLinearVariantDisplay/index.js

@@ -7,7 +7,7 @@ export default function MultiLinearVariantDisplayF(pluginManager) {
         const configSchema = configSchemaFactory(pluginManager);
         return new DisplayType({
             name: 'MultiLinearVariantDisplay',
-            displayName: 'Multi-variant display (regular)',
+            displayName: 'Multi-sample variant display (regular)',
             configSchema,
             stateModel: modelFactory(configSchema),
             trackType: 'VariantTrack',

package/esm/MultiLinearVariantDisplay/model.d.ts

@@ -89,11 +89,13 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderingMode: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     rowHeightSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     autoHeight: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    lengthCutoffFilter: import("mobx-state-tree").IType<number | undefined, number, number>;
+    jexlFilters: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>>;
+    referenceDrawingMode: import("mobx-state-tree").IType<string | undefined, string, string>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"MultiLinearVariantDisplay">;
     rowHeightSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
     minorAlleleFrequencyFilter: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    autoHeight: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -237,19 +239,28 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderProps(): any;
 } & {
     sourcesLoadingStopToken: string | undefined;
+    simplifiedFeaturesStopToken: string | undefined;
     featureUnderMouseVolatile: import("@jbrowse/core/util").Feature | undefined;
     sourcesVolatile: import("../shared/types").Source[] | undefined;
     featuresVolatile: import("@jbrowse/core/util").Feature[] | undefined;
     hasPhased: boolean;
     sampleInfo: undefined | Record<string, import("../shared/types").SampleInfo>;
-    hoveredGenotype: string | undefined;
+    hoveredGenotype: {
+        genotype: string;
+        name: string;
+    } | undefined;
 } & {
+    setJexlFilters(f?: string[]): void;
     setRowHeight(arg: number): void;
-    setHoveredGenotype(arg: string): void;
+    setHoveredGenotype(arg?: {
+        genotype: string;
+        name: string;
+    }): void;
     setFeatures(f: import("@jbrowse/core/util").Feature[]): void;
     setLayout(layout: import("../shared/types").Source[]): void;
     clearLayout(): void;
     setSourcesLoading(str: string): void;
+    setSimplifiedFeaturesLoading(str: string): void;
     setSources(sources: import("../shared/types").Source[]): void;
     setMafFilter(arg: number): void;
     setShowSidebarLabels(arg: boolean): void;
@@ -257,8 +268,19 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     setAutoHeight(arg: boolean): void;
     setHasPhased(arg: boolean): void;
     setSampleInfo(arg: Record<string, import("../shared/types").SampleInfo>): void;
+    setReferenceDrawingMode(arg: string): void;
 } & {
+    readonly activeFilters: any;
     readonly preSources: import("../shared/types").Source[] | undefined;
+    readonly sourcesWithoutLayout: {
+        label: string;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
     readonly sources: {
         label: string;
         id: string;
@@ -269,6 +291,17 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         HP?: number;
     }[] | undefined;
 } & {
+    readonly sourceMap: {
+        [k: string]: {
+            label: string;
+            id: string;
+            baseUri?: string;
+            name: string;
+            color?: string;
+            group?: string;
+            HP?: number;
+        };
+    } | undefined;
     readonly rowHeight: number;
     adapterProps(): any;
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
@@ -322,6 +355,18 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        type: string;
+        subMenu: {
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+        }[];
+        icon?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
@@ -334,10 +379,20 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
 } & {
     readonly canDisplayLabels: boolean;
     readonly totalHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
 } & {

package/esm/MultiLinearVariantDisplay/model.js

@@ -7,7 +7,6 @@ export function stateModelFactory(configSchema) {
         type: types.literal('MultiLinearVariantDisplay'),
         rowHeightSetting: types.optional(types.number, 11),
         minorAlleleFrequencyFilter: types.optional(types.number, 0),
-        autoHeight: false,
     }))
         .views(() => ({
         get rendererTypeName() {

package/esm/MultiLinearVariantDisplay/renderSvg.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
-import LegendBar from '../shared/components/LegendBar';
+import LegendBar from '../shared/components/MultiVariantLegendBar';
 export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.regionCannotBeRenderedText);
     const { offsetPx } = getContainingView(self);