@jbrowse/plugin-variants 3.2.0 → 3.3.0

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

@@ -14,56 +14,49 @@ const useStyles = makeStyles()({
 });
 export default 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] = 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 (_jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(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 (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
+    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',
+                    headerName: 'Color',
+                    renderCell: params => {
+                        const { value, id } = params;
+                        return (_jsx(ColorPicker, { 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: measureGridWidth(rows.map(r => r.label)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
-                        width: 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 = getStr(a[field]);
-                            const bb = getStr(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }) }));
-    }
-    else {
-        return _jsx("div", { children: "No rows, check sample metadata configuration" });
-    }
+                },
+                {
+                    field: 'label',
+                    headerName: 'Name',
+                    width: measureGridWidth(rows.map(r => r.label)),
+                },
+                ...Object.keys(rest).map(val => ({
+                    field: val,
+                    renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
+                    width: 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 = getStr(a[field]);
+                        const bb = getStr(b[field]);
+                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
+                    })
+                    : rows);
+            } }) }));
 }

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/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/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.2.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.2.0",
-    "@jbrowse/plugin-circular-view": "^3.2.0",
-    "@jbrowse/plugin-linear-genome-view": "^3.2.0",
-    "@jbrowse/sv-core": "^3.2.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": "c750e3f56706a490c19ba75abd807fec5e38aebf"
+  "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;

package/dist/MultiLinearVariantDisplay/components/Crosshair.js

@@ -1,35 +0,0 @@
-"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 mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const MultiVariantTooltip_1 = __importDefault(require("../../shared/components/MultiVariantTooltip"));
-const useStyles = (0, mui_1.makeStyles)()({
-    rel: {
-        position: 'relative',
-    },
-    cursor: {
-        pointerEvents: 'none',
-        zIndex: 800,
-        position: 'absolute',
-    },
-    color: {
-        width: 10,
-        height: 10,
-    },
-});
-const Crosshair = (0, mobx_react_1.observer)(function ({ mouseX, mouseY, model, }) {
-    const { classes } = useStyles();
-    const { hoveredGenotype, height, scrollTop, rowHeight, sources } = model;
-    const { width } = (0, util_1.getContainingView)(model);
-    const source = sources === null || sources === void 0 ? void 0 : sources[Math.floor(mouseY / rowHeight)];
-    const y = mouseY - scrollTop;
-    return source ? ((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: "black" }), (0, jsx_runtime_1.jsx)("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })] }), (0, jsx_runtime_1.jsx)(MultiVariantTooltip_1.default, { source: { ...source, hoveredGenotype } })] })) : null;
-});
-exports.default = Crosshair;

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

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

package/dist/MultiLinearVariantMatrixDisplay/components/Crosshair.js

@@ -1,28 +0,0 @@
-"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 mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const MultiVariantTooltip_1 = __importDefault(require("../../shared/components/MultiVariantTooltip"));
-const useStyles = (0, mui_1.makeStyles)()({
-    cursor: {
-        pointerEvents: 'none',
-        zIndex: 800,
-        position: 'relative',
-    },
-});
-const Crosshair = (0, mobx_react_1.observer)(function ({ mouseX, mouseY, model, }) {
-    const { classes } = useStyles();
-    const { hoveredGenotype, lineZoneHeight, totalHeight, rowHeight, sources } = model;
-    const { width } = (0, util_1.getContainingView)(model);
-    const source = sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - lineZoneHeight) / rowHeight)];
-    const yoff = mouseY - lineZoneHeight;
-    return source ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: classes.cursor, width: width, height: totalHeight, style: {
-                    top: lineZoneHeight,
-                }, children: [(0, jsx_runtime_1.jsx)("line", { x1: 0, x2: width, y1: yoff, y2: yoff, stroke: "black" }), (0, jsx_runtime_1.jsx)("line", { x1: mouseX, x2: mouseX, y1: 0, y2: totalHeight, stroke: "black" })] }), (0, jsx_runtime_1.jsx)(MultiVariantTooltip_1.default, { source: { ...source, hoveredGenotype } })] })) : null;
-});
-exports.default = Crosshair;

package/dist/MultiLinearVariantMatrixRenderer/components/LinearVariantMatrixRendering.d.ts

@@ -1,7 +0,0 @@
-declare const LinearVariantMatrixRendering: (props: {
-    width: number;
-    height: number;
-    displayModel: any;
-    arr: string[];
-}) => import("react/jsx-runtime").JSX.Element;
-export default LinearVariantMatrixRendering;

package/dist/MultiLinearVariantMatrixRenderer/components/LinearVariantMatrixRendering.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const mobx_react_1 = require("mobx-react");
-const LinearVariantMatrixRendering = (0, mobx_react_1.observer)(function (props) {
-    const { arr, width, height, displayModel } = props;
-    const ref = (0, react_1.useRef)(null);
-    function getFeatureUnderMouse(eventClientX, eventClientY) {
-        var _a, _b;
-        let offsetX = 0;
-        let offsetY = 0;
-        if (ref.current) {
-            const r = ref.current.getBoundingClientRect();
-            offsetX = eventClientX - r.left;
-            offsetY = eventClientY - r.top;
-        }
-        const dimY = arr.length;
-        const dimX = ((_a = arr[0]) === null || _a === void 0 ? void 0 : _a.length) || 0;
-        return (_b = arr[Math.floor((offsetX / width) * dimY)]) === null || _b === void 0 ? void 0 : _b[Math.floor((offsetY / height) * dimX)];
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onMouseMove: e => {
-            var _a;
-            return (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, getFeatureUnderMouse(e.clientX, e.clientY));
-        }, onMouseLeave: () => {
-            var _a;
-            (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, undefined);
-        }, onMouseOut: () => {
-            var _a;
-            (_a = displayModel.setHoveredGenotype) === null || _a === void 0 ? void 0 : _a.call(displayModel, undefined);
-        }, style: {
-            overflow: 'visible',
-            position: 'relative',
-            height,
-        }, children: (0, jsx_runtime_1.jsx)(ui_1.PrerenderedCanvas, { ...props }) }));
-});
-exports.default = LinearVariantMatrixRendering;