@jbrowse/plugin-variants 2.18.0 → 3.0.1

package/dist/shared/SourcesGrid.js

@@ -1,143 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const ui_1 = require("@jbrowse/core/ui");
-const ColorPicker_1 = __importStar(require("@jbrowse/core/ui/ColorPicker"));
-const util_1 = require("@jbrowse/core/util");
-const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
-const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
-const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
-const material_1 = require("@mui/material");
-const x_data_grid_1 = require("@mui/x-data-grid");
-const mui_1 = require("tss-react/mui");
-const util_2 = require("./util");
-const useStyles = (0, mui_1.makeStyles)()({
-    cell: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
-});
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SourcesDataGrid_1 = __importDefault(require("./SourcesDataGrid"));
+const SourcesGridHeader_1 = __importDefault(require("./SourcesGridHeader"));
 function SourcesGrid({ rows, onChange, showTips, }) {
-    const { classes } = useStyles();
     const [selected, setSelected] = (0, react_1.useState)([]);
-    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
-    const [currSort, setCurrSort] = (0, react_1.useState)({
-        idx: 0,
-        field: null,
-    });
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(GridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }),
-        react_1.default.createElement("div", { style: { height: 400, width: '100%' } },
-            react_1.default.createElement(x_data_grid_1.DataGrid, { getRowId: row => row.name, 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 (react_1.default.createElement(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
-                    },
-                    {
-                        field: 'name',
-                        headerName: 'Name',
-                        width: (0, util_1.measureGridWidth)(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (react_1.default.createElement("div", { className: classes.cell },
-                            react_1.default.createElement(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);
-                } }))));
-}
-function GridHeader({ selected, onChange, rows, showTips, }) {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const [widgetColor, setWidgetColor] = (0, react_1.useState)('blue');
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { disabled: !selected.length, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }, "Change color of selected items"),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveUp)([...rows], selected));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowUp_1.default, null),
-            showTips ? 'Move selected items up' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveDown)([...rows], selected));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowDown_1.default, null),
-            showTips ? 'Move selected items down' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveUp)([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowUp_1.default, null),
-            showTips ? 'Move selected items to top' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveDown)([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowDown_1.default, null),
-            showTips ? 'Move selected items to bottom' : null),
-        react_1.default.createElement(ColorPicker_1.ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
-                setWidgetColor(c);
-                selected.forEach(id => {
-                    const elt = rows.find(f => f.name === id);
-                    if (elt) {
-                        elt.color = c;
-                    }
-                });
-                onChange([...rows]);
-            }, onClose: () => {
-                setAnchorEl(null);
-            } })));
+    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 })] }));
 }
 exports.default = SourcesGrid;

package/dist/shared/SourcesGridHeader.d.ts

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

package/dist/shared/SourcesGridHeader.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SourcesGridHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ColorPicker_1 = require("@jbrowse/core/ui/ColorPicker");
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
+const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
+const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
+const material_1 = require("@mui/material");
+const util_1 = require("./util");
+function SourcesGridHeader({ selected, onChange, rows, showTips, }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [widgetColor, setWidgetColor] = (0, react_1.useState)('blue');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !selected.length, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: "Change color of selected items" }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_1.moveUp)([...rows], selected));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardArrowUp_1.default, {}), showTips ? 'Move selected items up' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_1.moveDown)([...rows], selected));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, {}), showTips ? 'Move selected items down' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_1.moveUp)([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowUp_1.default, {}), showTips ? 'Move selected items to top' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_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 => {
+                        const elt = rows.find(f => f.name === id);
+                        if (elt) {
+                            elt.color = c;
+                        }
+                    });
+                    onChange([...rows]);
+                }, onClose: () => {
+                    setAnchorEl(null);
+                } })] }));
+}

package/dist/shared/multiVariantColor.d.ts

@@ -0,0 +1,3 @@
+export declare function getColorAlleleCount(alleles: string[]): string;
+export declare function getColorPhased(alleles: string[], HP: number): string;
+export declare function getColorPhasedWithPhaseSet(alleles: string[], HP: number, PS: string): string;

package/dist/shared/multiVariantColor.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorAlleleCount = getColorAlleleCount;
+exports.getColorPhased = getColorPhased;
+exports.getColorPhasedWithPhaseSet = getColorPhasedWithPhaseSet;
+const colors_1 = require("@jbrowse/core/ui/colors");
+const colord_1 = require("@jbrowse/core/util/colord");
+const util_1 = require("../util");
+function getColorAlleleCount(alleles) {
+    const total = alleles.length;
+    let alt = 0;
+    let uncalled = 0;
+    let alt2 = 0;
+    let ref = 0;
+    for (const allele of alleles) {
+        if (allele === '1') {
+            alt++;
+        }
+        else if (allele === '0') {
+            ref++;
+        }
+        else if (allele === '.') {
+            uncalled++;
+        }
+        else {
+            alt2++;
+        }
+    }
+    if (ref === total) {
+        return `#ccc`;
+    }
+    else {
+        let a1 = (0, colord_1.colord)(`hsl(200,50%,${80 - (alt / total) * 50}%)`);
+        if (alt2) {
+            a1 = a1.mix(`hsla(0,100%,20%,${alt2 / total})`);
+        }
+        if (uncalled) {
+            a1 = a1.mix(`hsla(50,50%,50%,${uncalled / total / 2})`);
+        }
+        return a1.toHex();
+    }
+}
+function getColorPhased(alleles, HP) {
+    const c = +alleles[HP];
+    return c ? colors_1.set1[c - 1] || 'black' : '#ccc';
+}
+function getColorPhasedWithPhaseSet(alleles, HP, PS) {
+    const c = +alleles[HP];
+    return c ? (0, util_1.colorify)(+PS) || 'black' : '#ccc';
+}

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+export interface Source {
+    baseUri?: string;
+    name: string;
+    label?: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+    id?: string;
+    [key: string]: unknown;
+}
+export interface SampleInfo {
+    isPhased: boolean;
+    maxPloidy: number;
+}

package/dist/types.js

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

package/dist/util.d.ts

@@ -1,11 +1,8 @@
-export interface Source {
-    baseUri?: string;
-    name: string;
-    color?: string;
-    group?: string;
-    [key: string]: unknown;
-}
+import type { Feature } from '@jbrowse/core/util';
 export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, color?: string): void;
-export declare function getCol(gt: string): "#ccc" | "teal" | "blue" | "#CBC3E3";
-export declare const colorPaletteDefault: string[];
+export declare function getCol(gt: string): "blue" | "teal" | "#ccc" | "#CBC3E3";
 export declare function randomColor(str: string): string;
+export declare function colorify(n: number): string;
+export declare function findSecondLargest(arr: Iterable<number>): number;
+export declare function calculateMinorAlleleFrequency(feat: Feature): number;
+export declare function getFeaturesThatPassMinorAlleleFrequencyFilter(feats: Iterable<Feature>, minorAlleleFrequencyFilter: number): Feature[];

package/dist/util.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorPaletteDefault = void 0;
 exports.fillRectCtx = fillRectCtx;
 exports.getCol = getCol;
 exports.randomColor = randomColor;
+exports.colorify = colorify;
+exports.findSecondLargest = findSecondLargest;
+exports.calculateMinorAlleleFrequency = calculateMinorAlleleFrequency;
+exports.getFeaturesThatPassMinorAlleleFrequencyFilter = getFeaturesThatPassMinorAlleleFrequencyFilter;
+const util_1 = require("@jbrowse/core/util");
 function fillRectCtx(x, y, width, height, ctx, color) {
     if (width < 0) {
         x += width;
@@ -32,22 +36,51 @@ function getCol(gt) {
         return '#CBC3E3';
     }
 }
-exports.colorPaletteDefault = [
-    'red',
-    'blue',
-    'green',
-    'orange',
-    'purple',
-    'cyan',
-    'pink',
-    'darkblue',
-    'darkred',
-    'pink',
-];
 function randomColor(str) {
     let sum = 0;
     for (let i = 0; i < str.length; i++) {
         sum += str.charCodeAt(i);
     }
-    return `hsl(${sum * 10}, 20%, 50%)`;
+    return `hsl(${colorify(sum * 10)}, 50%, 50%)`;
+}
+function colorify(n) {
+    return `hsl(${n % 255}, 50%, 50%)`;
+}
+function findSecondLargest(arr) {
+    let firstMax = 0;
+    let secondMax = 0;
+    for (const num of arr) {
+        if (num > firstMax) {
+            secondMax = firstMax;
+            firstMax = num;
+        }
+        else if (num > secondMax && num !== firstMax) {
+            secondMax = num;
+        }
+    }
+    return secondMax;
+}
+function calculateMinorAlleleFrequency(feat) {
+    if (feat.get('end') - feat.get('start') <= 10) {
+        const samp = feat.get('genotypes');
+        const alleleCounts = new Map();
+        for (const val of Object.values(samp)) {
+            const alleles = val.split(/[/|]/);
+            for (const allele of alleles) {
+                alleleCounts.set(allele, (alleleCounts.get(allele) || 0) + 1);
+            }
+        }
+        return (findSecondLargest(alleleCounts.values()) /
+            ((0, util_1.sum)(alleleCounts.values()) || 1));
+    }
+    return -1;
+}
+function getFeaturesThatPassMinorAlleleFrequencyFilter(feats, minorAlleleFrequencyFilter) {
+    const mafs = [];
+    for (const feat of feats) {
+        if (calculateMinorAlleleFrequency(feat) >= minorAlleleFrequencyFilter) {
+            mafs.push(feat);
+        }
+    }
+    return mafs;
 }

package/esm/ChordVariantDisplay/models/stateModelFactory.d.ts

@@ -107,7 +107,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
 } & {
     renderSvg(opts: import("@jbrowse/plugin-circular-view/src/CircularView/model").ExportSvgOptions & {
         theme?: import("@mui/material").ThemeOptions;
-    }): Promise<import("react").JSX.Element>;
+    }): Promise<import("react/jsx-runtime").JSX.Element>;
 } & {
     readonly rendererTypeName: any;
     renderProps(): Record<string, unknown>;

package/esm/LinearVariantDisplay/model.d.ts

@@ -36,7 +36,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -179,13 +179,13 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -212,7 +212,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     readonly activeFilters: any;

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

@@ -0,0 +1,7 @@
+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/esm/MultiLinearVariantDisplay/components/Crosshair.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import MultiVariantTooltip from '../../shared/MultiVariantTooltip';
+const useStyles = makeStyles()({
+    rel: {
+        position: 'relative',
+    },
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 1000,
+        position: 'absolute',
+    },
+    color: {
+        width: 10,
+        height: 10,
+    },
+});
+const Crosshair = observer(function ({ mouseX, mouseY, model, }) {
+    const { classes } = useStyles();
+    const { hoveredGenotype, height, scrollTop, rowHeight, sources } = model;
+    const { width } = getContainingView(model);
+    const source = sources === null || sources === void 0 ? void 0 : sources[Math.floor(mouseY / rowHeight)];
+    const y = mouseY - scrollTop;
+    return source ? (_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: "black" }), _jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })] }), _jsx(MultiVariantTooltip, { source: { ...source, hoveredGenotype } })] })) : null;
+});
+export default Crosshair;

package/esm/MultiLinearVariantDisplay/components/VariantDisplayComponent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { MultiLinearVariantDisplayModel } from '../model';
 declare const MultiLinearVariantDisplayComponent: (props: {
     model: MultiLinearVariantDisplayModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MultiLinearVariantDisplayComponent;

package/esm/MultiLinearVariantDisplay/components/VariantDisplayComponent.js

@@ -1,25 +1,15 @@
-import React, { useRef, useState } from 'react';
-import { SanitizedHTML } from '@jbrowse/core/ui';
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
-import { getContainingView } from '@jbrowse/core/util';
+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 { makeStyles } from 'tss-react/mui';
+import Crosshair from './Crosshair';
 import LegendBar from '../../shared/LegendBar';
-const useStyles = makeStyles()({
-    cursor: {
-        pointerEvents: 'none',
-    },
-});
 const MultiLinearVariantDisplayComponent = observer(function (props) {
     const { model } = props;
-    const { classes } = useStyles();
-    const { height, sources, rowHeight, scrollTop } = model;
     const ref = useRef(null);
     const [mouseY, setMouseY] = useState();
     const [mouseX, setMouseX] = useState();
-    const { width } = getContainingView(model);
-    return (React.createElement("div", { ref: ref, onMouseMove: event => {
+    return (_jsxs("div", { ref: ref, onMouseMove: event => {
             var _a;
             const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             const top = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
@@ -29,17 +19,6 @@ const MultiLinearVariantDisplayComponent = observer(function (props) {
         }, onMouseLeave: () => {
             setMouseY(undefined);
             setMouseX(undefined);
-        } },
-        React.createElement(BaseLinearDisplayComponent, { ...props }),
-        React.createElement(LegendBar, { model: model }),
-        mouseY && sources ? (React.createElement("div", { style: { position: 'relative' } },
-            React.createElement("svg", { className: classes.cursor, width: width, height: height, style: { position: 'absolute', top: scrollTop } },
-                React.createElement("line", { x1: 0, x2: width, y1: mouseY - scrollTop, y2: mouseY - scrollTop, stroke: "black" }),
-                React.createElement("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "black" })),
-            React.createElement(BaseTooltip, null,
-                React.createElement(SanitizedHTML, { html: Object.entries(sources[Math.floor(mouseY / rowHeight)] || {})
-                        .filter(([key]) => key !== 'color')
-                        .map(([key, value]) => `${key}:${value}`)
-                        .join('\n') })))) : null));
+        }, children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(LegendBar, { model: model }), mouseX && mouseY ? (_jsx(Crosshair, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
 });
 export default MultiLinearVariantDisplayComponent;

package/esm/MultiLinearVariantDisplay/index.js

@@ -9,7 +9,7 @@ export default function MultiLinearVariantDisplayF(pluginManager) {
             name: 'MultiLinearVariantDisplay',
             displayName: 'Multi-variant display (regular)',
             configSchema,
-            stateModel: modelFactory(pluginManager, configSchema),
+            stateModel: modelFactory(configSchema),
             trackType: 'VariantTrack',
             viewType: 'LinearGenomeView',
             ReactComponent: lazy(() => import('./components/VariantDisplayComponent')),