@jbrowse/plugin-variants 2.18.0 → 3.0.0

package/esm/MultiLinearVariantDisplay/model.d.ts

@@ -1,10 +1,7 @@
-import { type ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
-import type { Source } from '../util';
-import type PluginManager from '@jbrowse/core/PluginManager';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
-import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 import type { Instance } from 'mobx-state-tree';
-export declare function stateModelFactory(pluginManager: PluginManager, configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
+export declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<string>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -24,7 +21,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
         stopToken: string | undefined;
         filled: boolean;
         reactElement: React.ReactElement | undefined;
-        features: Map<string, Feature> | undefined;
+        features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
         layout: any;
         status: string;
         error: unknown;
@@ -39,7 +36,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -83,12 +80,20 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearBareDisplay">;
     configuration: AnyConfigurationSchemaType;
+} & {
+    type: import("mobx-state-tree").ISimpleType<"LinearVariantMatrixDisplay">;
+    layout: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("../types").Source[], import("../types").Source[], import("../types").Source[]>, [undefined]>;
+    configuration: AnyConfigurationSchemaType;
+    minorAlleleFrequencyFilter: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+    showSidebarLabelsSetting: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    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>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"MultiLinearVariantDisplay">;
-    layout: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<Source[], Source[], Source[]>, [undefined]>;
     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>;
-    showSidebarLabelsSetting: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -180,32 +185,32 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
 } & {
     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;
+    contextMenuFeature: undefined | import("@jbrowse/core/util").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;
-    readonly TooltipComponent: AnyReactComponentType;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
     readonly selectedFeatureId: string | undefined;
 } & {
-    readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
-    readonly featureUnderMouse: Feature | undefined;
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
+    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
     getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
     searchFeatureByID(id: string): [number, number, number, number] | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
-    selectFeature(feature: Feature): void;
-    navToFeature(feature: Feature): void;
+    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
+    navToFeature(feature: import("@jbrowse/core/util").Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
-    setContextMenuFeature(feature?: Feature): void;
+    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
 } & {
     reload(): Promise<void>;
 } & {
@@ -213,7 +218,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     readonly rendererConfig: {
@@ -232,46 +237,114 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     renderProps(): any;
 } & {
     sourcesLoadingStopToken: string | undefined;
-    featureUnderMouseVolatile: Feature | undefined;
-    sourcesVolatile: Source[] | undefined;
+    featureUnderMouseVolatile: import("@jbrowse/core/util").Feature | undefined;
+    sourcesVolatile: import("../types").Source[] | undefined;
+    featuresVolatile: import("@jbrowse/core/util").Feature[] | undefined;
+    hasPhased: boolean;
+    sampleInfo: undefined | Record<string, import("../types").SampleInfo>;
+    hoveredGenotype: string | undefined;
 } & {
-    setSourcesLoading(str: string): void;
-    setLayout(layout: Source[]): void;
-    clearLayout(): void;
-    setSources(sources: Source[]): void;
-    setFeatureUnderMouse(f?: Feature): void;
     setRowHeight(arg: number): void;
-    setAutoHeight(arg: boolean): void;
+    setHoveredGenotype(arg: string): void;
+    setFeatures(f: import("@jbrowse/core/util").Feature[]): void;
+    setLayout(layout: import("../types").Source[]): void;
+    clearLayout(): void;
+    setSourcesLoading(str: string): void;
+    setSources(sources: import("../types").Source[]): void;
+    setMafFilter(arg: number): void;
     setShowSidebarLabels(arg: boolean): void;
+    setPhasedMode(arg: string): void;
+    setAutoHeight(arg: boolean): void;
+    setHasPhased(arg: boolean): void;
+    setSampleInfo(arg: Record<string, import("../types").SampleInfo>): void;
 } & {
-    readonly featureUnderMouse: Feature | undefined;
-    readonly TooltipComponent: AnyReactComponentType;
-} & {
-    readonly rendererTypeName: string;
+    readonly preSources: import("../types").Source[] | undefined;
     readonly sources: {
-        color: string;
+        label: string;
+        id: string;
         baseUri?: string;
         name: string;
+        color?: string;
         group?: string;
+        HP?: number;
     }[] | undefined;
 } & {
     readonly rowHeight: number;
-} & {
-    readonly canDisplayLabels: boolean;
-    readonly totalHeight: number;
     adapterProps(): any;
-} & {
-    renderProps(): 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 | {
         label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
         type: string;
         checked: boolean;
         onClick: () => void;
+        subMenu?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: ({
+            label: string;
+            disabled: boolean;
+            onClick: () => void;
+            type?: undefined;
+            checked?: undefined;
+        } | {
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+            disabled?: undefined;
+        })[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: ({
+            label: string;
+            type: string;
+            checked: boolean;
+            onClick: () => void;
+            disabled?: undefined;
+        } | {
+            label: string;
+            disabled: boolean;
+            checked: boolean;
+            type: string;
+            onClick: () => void;
+        })[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
+        type?: undefined;
+        checked?: undefined;
+        onClick?: undefined;
     })[];
+} & {
+    readonly canDisplayLabels: boolean;
+    readonly totalHeight: number;
+} & {
+    renderProps(): any;
+} & {
+    readonly rendererTypeName: string;
 } & {
     afterAttach(): void;
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type MultiLinearVariantDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type MultiLinearVariantDisplayModel = Instance<MultiLinearVariantDisplayStateModel>;

package/esm/MultiLinearVariantDisplay/model.js

@@ -1,183 +1,19 @@
-import { lazy } from 'react';
-import { set1 } from '@jbrowse/core/ui/colors';
 import { getSession } from '@jbrowse/core/util';
-import { stopStopToken } from '@jbrowse/core/util/stopToken';
-import { linearBareDisplayStateModelFactory, } from '@jbrowse/plugin-linear-genome-view';
-import deepEqual from 'fast-deep-equal';
 import { isAlive, types } from 'mobx-state-tree';
-import { randomColor } from '../util';
-const Tooltip = lazy(() => import('../shared/Tooltip'));
-const SetColorDialog = lazy(() => import('../shared/SetColorDialog'));
-const ClusterDialog = lazy(() => import('../shared/ClusterDialog'));
-export function stateModelFactory(pluginManager, configSchema) {
+import MultiVariantBaseModelF from '../shared/MultiVariantBaseModel';
+export function stateModelFactory(configSchema) {
     return types
-        .compose('MultiLinearVariantDisplay', linearBareDisplayStateModelFactory(configSchema), types.model({
+        .compose('MultiLinearVariantDisplay', MultiVariantBaseModelF(configSchema), types.model({
         type: types.literal('MultiLinearVariantDisplay'),
-        layout: types.optional(types.frozen(), []),
         rowHeightSetting: types.optional(types.number, 11),
+        minorAlleleFrequencyFilter: types.optional(types.number, 0),
         autoHeight: false,
-        showSidebarLabelsSetting: true,
     }))
-        .volatile(() => ({
-        sourcesLoadingStopToken: undefined,
-        featureUnderMouseVolatile: undefined,
-        sourcesVolatile: undefined,
-    }))
-        .actions(self => ({
-        setSourcesLoading(str) {
-            if (self.sourcesLoadingStopToken) {
-                stopStopToken(self.sourcesLoadingStopToken);
-            }
-            self.sourcesLoadingStopToken = str;
-        },
-        setLayout(layout) {
-            self.layout = layout;
-        },
-        clearLayout() {
-            self.layout = [];
-        },
-        setSources(sources) {
-            if (!deepEqual(sources, self.sourcesVolatile)) {
-                self.sourcesVolatile = sources;
-            }
-        },
-        setFeatureUnderMouse(f) {
-            self.featureUnderMouseVolatile = f;
-        },
-        setRowHeight(arg) {
-            self.rowHeightSetting = arg;
-        },
-        setAutoHeight(arg) {
-            self.autoHeight = arg;
-        },
-        setShowSidebarLabels(arg) {
-            self.showSidebarLabelsSetting = arg;
-        },
-    }))
-        .views(self => ({
-        get featureUnderMouse() {
-            return self.featureUnderMouseVolatile;
-        },
-        get TooltipComponent() {
-            return Tooltip;
-        },
-    }))
-        .views(self => ({
+        .views(() => ({
         get rendererTypeName() {
             return 'MultiVariantRenderer';
         },
-        get sources() {
-            var _a;
-            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
-            const iter = self.layout.length ? self.layout : self.sourcesVolatile;
-            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
-                ...sources[s.name],
-                ...s,
-            })).map((s, i) => ({
-                ...s,
-                color: s.color || set1[i] || randomColor(s.name),
-            }));
-        },
-    }))
-        .views(self => ({
-        get rowHeight() {
-            const { autoHeight, sources, rowHeightSetting, height } = self;
-            return autoHeight ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : rowHeightSetting;
-        },
     }))
-        .views(self => {
-        const { renderProps: superRenderProps } = self;
-        return {
-            get canDisplayLabels() {
-                return self.rowHeight > 8 && self.showSidebarLabelsSetting;
-            },
-            get totalHeight() {
-                var _a;
-                return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
-            },
-            adapterProps() {
-                const superProps = superRenderProps();
-                return {
-                    ...superProps,
-                    displayModel: self,
-                    config: self.rendererConfig,
-                    rpcDriverName: self.rpcDriverName,
-                    sources: self.sources,
-                };
-            },
-        };
-    })
-        .views(self => ({
-        renderProps() {
-            const superProps = self.adapterProps();
-            return {
-                ...superProps,
-                notReady: superProps.notReady || !self.sources,
-                displayModel: self,
-                rpcDriverName: self.rpcDriverName,
-                height: self.height,
-                totalHeight: self.totalHeight,
-                rowHeight: self.rowHeight,
-                scrollTop: self.scrollTop,
-                onMouseMove: (_, f) => {
-                    self.setFeatureUnderMouse(f);
-                },
-                onMouseLeave: () => {
-                    self.setFeatureUnderMouse(undefined);
-                },
-            };
-        },
-    }))
-        .views(self => {
-        const { trackMenuItems: superTrackMenuItems } = self;
-        return {
-            trackMenuItems() {
-                return [
-                    ...superTrackMenuItems(),
-                    {
-                        label: 'Adjust to height of display?',
-                        type: 'checkbox',
-                        checked: self.autoHeight,
-                        onClick: () => {
-                            self.setAutoHeight(!self.autoHeight);
-                        },
-                    },
-                    {
-                        label: 'Show sidebar labels',
-                        type: 'checkbox',
-                        checked: self.showSidebarLabelsSetting,
-                        onClick: () => {
-                            self.setShowSidebarLabels(!self.showSidebarLabelsSetting);
-                        },
-                    },
-                    {
-                        label: 'Cluster by genotype',
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                ClusterDialog,
-                                {
-                                    model: self,
-                                    handleClose,
-                                },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Edit colors/arrangement...',
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                SetColorDialog,
-                                {
-                                    model: self,
-                                    handleClose,
-                                },
-                            ]);
-                        },
-                    },
-                ];
-            },
-        };
-    })
         .actions(self => {
         const { renderSvg: superRenderSvg } = self;
         return {
@@ -186,7 +22,9 @@ export function stateModelFactory(pluginManager, configSchema) {
                 (async () => {
                     try {
                         const { getMultiVariantSourcesAutorun } = await import('../getMultiVariantSourcesAutorun');
+                        const { getMultiVariantFeaturesAutorun } = await import('../getMultiVariantFeaturesAutorun');
                         getMultiVariantSourcesAutorun(self);
+                        getMultiVariantFeaturesAutorun(self);
                     }
                     catch (e) {
                         if (isAlive(self)) {

package/esm/MultiLinearVariantDisplay/renderSvg.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MultiLinearVariantDisplayModel } from './model';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
-export declare function renderSvg(self: MultiLinearVariantDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<React.JSX.Element>;
+export declare function renderSvg(self: MultiLinearVariantDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/MultiLinearVariantDisplay/renderSvg.js

@@ -1,12 +1,9 @@
-import React from 'react';
+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/LegendBar';
 export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.regionCannotBeRenderedText);
     const { offsetPx } = getContainingView(self);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", null, await superRenderSvg(opts)),
-        React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            React.createElement(LegendBar, { model: self, orientation: "left", exportSVG: true }))));
+    return (_jsxs(_Fragment, { children: [_jsx("g", { children: await superRenderSvg(opts) }), _jsx("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: _jsx(LegendBar, { model: self, orientation: "left", exportSVG: true }) })] }));
 }

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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()({
+    cursor: {
+        pointerEvents: 'none',
+        zIndex: 1000,
+        position: 'relative',
+    },
+});
+const Crosshair = observer(function ({ mouseX, mouseY, model, }) {
+    const { classes } = useStyles();
+    const { hoveredGenotype, lineZoneHeight, totalHeight, rowHeight, sources } = model;
+    const { width } = getContainingView(model);
+    const source = sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - lineZoneHeight) / rowHeight)];
+    const yoff = mouseY - lineZoneHeight;
+    return source ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: classes.cursor, width: width, height: totalHeight, style: {
+                    top: lineZoneHeight,
+                }, children: [_jsx("line", { x1: 0, x2: width, y1: yoff, y2: yoff, stroke: "black" }), _jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: totalHeight, stroke: "black" })] }), _jsx(MultiVariantTooltip, { source: { ...source, hoveredGenotype } })] })) : null;
+});
+export default Crosshair;

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { MultiLinearVariantMatrixDisplayModel } from '../model';
 declare const LinesConnectingMatrixToGenomicPosition: ({ model, exportSVG, }: {
     model: MultiLinearVariantMatrixDisplayModel;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default LinesConnectingMatrixToGenomicPosition;

package/esm/MultiLinearVariantMatrixDisplay/components/LinesConnectingMatrixToGenomicPosition.js

@@ -1,37 +1,37 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 const Wrapper = observer(function ({ children, model, exportSVG, }) {
     const { height } = model;
     const { width, offsetPx } = getContainingView(model);
     const left = Math.max(0, -offsetPx);
-    return exportSVG ? (React.createElement("g", { transform: `translate(${left})` }, children)) : (React.createElement("svg", { style: {
+    return exportSVG ? (_jsx("g", { transform: `translate(${left})`, children: children })) : (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
             left,
             pointerEvents: 'none',
             height,
             width,
-        } }, children));
+        }, children: children }));
 });
 const LinesConnectingMatrixToGenomicPosition = observer(function ({ model, exportSVG, }) {
     var _a;
     const { assemblyManager } = getSession(model);
     const view = getContainingView(model);
-    const { featuresVolatile } = model;
+    const { lineZoneHeight, featuresVolatile } = model;
     const { offsetPx, assemblyNames, dynamicBlocks } = view;
     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);
     const l = Math.max(offsetPx, 0);
-    return assembly && featuresVolatile ? (React.createElement(Wrapper, { exportSVG: exportSVG, model: model }, featuresVolatile.map((f, i) => {
-        var _a;
-        const ref = f.get('refName');
-        const c = (((_a = view.bpToPx({
-            refName: assembly.getCanonicalRefName(ref) || ref,
-            coord: f.get('start'),
-        })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
-        return (React.createElement("line", { stroke: "black", key: f.id(), x1: i * w + w / 2, x2: c, y1: 20, y2: 0 }));
-    }))) : null;
+    return assembly && featuresVolatile ? (_jsx(Wrapper, { exportSVG: exportSVG, model: model, children: featuresVolatile.map((f, i) => {
+            var _a;
+            const ref = f.get('refName');
+            const c = (((_a = view.bpToPx({
+                refName: assembly.getCanonicalRefName(ref) || ref,
+                coord: f.get('start'),
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - l;
+            return (_jsx("line", { stroke: "#0004", x1: i * w + w / 2, x2: c, y1: lineZoneHeight, y2: 0 }, f.id()));
+        }) })) : null;
 });
 export default LinesConnectingMatrixToGenomicPosition;

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

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

package/esm/MultiLinearVariantMatrixDisplay/components/VariantDisplayComponent.js

@@ -1,28 +1,17 @@
-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 LinesConnectingMatrixToGenomicPosition from './LinesConnectingMatrixToGenomicPosition';
 import LegendBar from '../../shared/LegendBar';
-const useStyles = makeStyles()({
-    cursor: {
-        pointerEvents: 'none',
-        zIndex: 1000,
-        position: 'relative',
-    },
-});
 const MultiLinearVariantMatrixDisplayComponent = observer(function (props) {
-    const { classes } = useStyles();
     const { model } = props;
-    const { height, sources, rowHeight } = model;
+    const { lineZoneHeight } = 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;
@@ -32,22 +21,6 @@ const MultiLinearVariantMatrixDisplayComponent = observer(function (props) {
         }, onMouseLeave: () => {
             setMouseY(undefined);
             setMouseX(undefined);
-        } },
-        React.createElement("div", { style: { position: 'relative' } },
-            React.createElement(LinesConnectingMatrixToGenomicPosition, { model: model }),
-            React.createElement("div", { style: { position: 'absolute', top: 20 } },
-                React.createElement(LegendBar, { model: model }),
-                React.createElement(BaseLinearDisplayComponent, { ...props }))),
-        mouseY &&
-            mouseY > 20 &&
-            (sources === null || sources === void 0 ? void 0 : sources[Math.floor((mouseY - 20) / rowHeight)]) ? (React.createElement(React.Fragment, null,
-            React.createElement("svg", { className: classes.cursor, width: width, height: height },
-                React.createElement("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, 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 - 20) / rowHeight)] || {})
-                        .filter(([key]) => key !== 'color')
-                        .map(([key, value]) => `${key}:${value}`)
-                        .join('\n') })))) : null));
+        }, children: [_jsxs("div", { style: { position: 'relative' }, children: [_jsx(LinesConnectingMatrixToGenomicPosition, { model: model }), _jsxs("div", { style: { position: 'absolute', top: lineZoneHeight }, children: [_jsx(LegendBar, { model: model }), _jsx(BaseLinearDisplayComponent, { ...props })] })] }), mouseX && mouseY && mouseY > lineZoneHeight ? (_jsx(Crosshair, { mouseX: mouseX, mouseY: mouseY, model: model })) : null] }));
 });
 export default MultiLinearVariantMatrixDisplayComponent;