@jbrowse/plugin-variants 3.2.0 → 3.3.0

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 @@
-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/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,7 +268,9 @@ 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;
@@ -278,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 | {
@@ -331,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">> & {

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);

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ResizeHandle } from '@jbrowse/core/ui';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement, useState } from 'react';
+import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
@@ -35,15 +36,21 @@ const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, expor
     const assembly = assemblyManager.get(assemblyNames[0]);
     const b0 = ((_a = dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.widthPx) || 0;
     const w = b0 / ((featuresVolatile === null || featuresVolatile === void 0 ? void 0 : featuresVolatile.length) || 1);
-    return assembly && featuresVolatile ? (_jsxs(_Fragment, { children: [_jsxs(Wrapper, { exportSVG: exportSVG, model: model, children: [_jsx(AllLines, { model: model, setMouseOverLine: setMouseOverLine }), mouseOverLine ? (_jsx("line", { stroke: "#f00c", strokeWidth: 2, style: {
-                            pointerEvents: 'none',
-                        }, x1: mouseOverLine.idx * w + w / 2, x2: mouseOverLine.c, y1: lineZoneHeight, y2: 0, onMouseLeave: () => {
-                            setMouseOverLine(undefined);
-                        } })) : null] }), !exportSVG ? (_jsx(ResizeHandle, { style: {
+    return assembly && featuresVolatile ? (_jsxs(_Fragment, { children: [_jsxs(Wrapper, { exportSVG: exportSVG, model: model, children: [_jsx(AllLines, { model: model, setMouseOverLine: setMouseOverLine }), mouseOverLine ? (_jsxs(_Fragment, { children: [_jsx("line", { stroke: "#f00c", strokeWidth: 2, style: {
+                                    pointerEvents: 'none',
+                                }, x1: mouseOverLine.idx * w + w / 2, x2: mouseOverLine.c, y1: lineZoneHeight, y2: 0, onMouseLeave: () => {
+                                    setMouseOverLine(undefined);
+                                } }), _jsx(LineTooltip, { contents: mouseOverLine.f.get('name') })] })) : null] }), !exportSVG ? (_jsx(ResizeHandle, { style: {
                     position: 'absolute',
                     top: lineZoneHeight - 4,
                 }, onDrag: n => model.setLineZoneHeight(lineZoneHeight + n), className: classes.resizeHandle })) : null] })) : null;
 });
+const TooltipContents = forwardRef(function TooltipContents2({ message }, ref) {
+    return (_jsx("div", { ref: ref, children: isValidElement(message) ? (message) : message ? (_jsx(SanitizedHTML, { html: String(message) })) : null }));
+});
+const LineTooltip = observer(function ({ contents }) {
+    return contents ? (_jsx(BaseTooltip, { children: _jsx(TooltipContents, { message: contents }) })) : null;
+});
 const AllLines = observer(function ({ model, setMouseOverLine, }) {
     var _a;
     const { assemblyManager } = getSession(model);

package/esm/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.js

@@ -2,9 +2,9 @@ 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 LinesConnectingMatrixToGenomicPosition from './LinesConnectingMatrixToGenomicPosition';
-import LegendBar from '../../shared/components/LegendBar';
+import Crosshair from '../../shared/components/MultiVariantCrosshairs';
+import LegendBar from '../../shared/components/MultiVariantLegendBar';
 const MultiLinearVariantMatrixDisplayComponent = observer(function (props) {
     const { model } = props;
     const { lineZoneHeight } = model;

package/esm/MultiLinearVariantMatrixDisplay/index.js

@@ -7,7 +7,7 @@ export default function LinearVariantMatrixDisplayF(pluginManager) {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearVariantMatrixDisplay',
-            displayName: 'Multi-variant display (matrix)',
+            displayName: 'Multi-sample variant display (matrix)',
             configSchema,
             stateModel: stateModelFactory(configSchema),
             trackType: 'VariantTrack',

package/esm/MultiLinearVariantMatrixDisplay/model.d.ts

@@ -89,6 +89,9 @@ export default 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<"LinearVariantMatrixDisplay">;
     rowHeightSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -236,19 +239,28 @@ export default 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;
@@ -256,7 +268,9 @@ export default 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;
@@ -277,6 +291,17 @@ export default 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 | {
@@ -330,6 +355,18 @@ export default 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">> & {

package/esm/MultiLinearVariantMatrixDisplay/model.js

@@ -38,6 +38,7 @@ export default function stateModelFactory(configSchema) {
                 notReady: superProps.notReady || !self.sources || !self.featuresReady,
                 renderingMode: self.renderingMode,
                 minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
+                lengthCutoffFilter: self.lengthCutoffFilter,
                 height: self.totalHeight,
                 sources: self.sources,
             };

package/esm/MultiLinearVariantMatrixDisplay/renderSvg.js

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

package/esm/MultiLinearVariantMatrixRenderer/{LinearVariantMatrixRenderer.d.ts → MultiLinearVariantMatrixRenderer.d.ts}

@@ -1,30 +1,34 @@
 import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+import { SimpleFeature } from '@jbrowse/core/util';
 import type { RenderArgsDeserialized } from './types';
 import type { Feature } from '@jbrowse/core/util';
 export default class LinearVariantMatrixRenderer extends BoxRendererType {
     supportsSVG: boolean;
     render(renderProps: RenderArgsDeserialized): Promise<{
         features: Map<any, any>;
-        simplifiedFeatures: any;
+        simplifiedFeatures: SimpleFeature[];
         height: number;
         width: number;
+        arr: string[][];
         canvasRecordedData: any;
         layout: import("@jbrowse/core/util/layouts").BaseLayout<Feature>;
         reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<any, any>;
-        simplifiedFeatures: any;
+        simplifiedFeatures: SimpleFeature[];
         height: number;
         width: number;
+        arr: string[][];
         reactElement: import("react/jsx-runtime").JSX.Element;
         layout: import("@jbrowse/core/util/layouts").BaseLayout<Feature>;
         html?: string;
     } | {
         features: Map<any, any>;
-        simplifiedFeatures: any;
+        simplifiedFeatures: SimpleFeature[];
         height: number;
         width: number;
+        arr: string[][];
         imageData: any;
         layout: import("@jbrowse/core/util/layouts").BaseLayout<Feature>;
         reactElement?: React.ReactElement;

package/esm/MultiLinearVariantMatrixRenderer/components/MultiLinearVariantMatrixRendering.d.ts

@@ -0,0 +1,8 @@
+import type { MultiVariantBaseModel } from '../../shared/MultiVariantBaseModel';
+declare const MultiLinearVariantMatrixRendering: (props: {
+    width: number;
+    height: number;
+    displayModel: MultiVariantBaseModel;
+    arr: string[][];
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiLinearVariantMatrixRendering;