@jbrowse/plugin-variants 3.1.0 → 3.3.0

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,8 +268,19 @@ 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;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
     readonly sources: {
         label: string;
         id: string;
@@ -268,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 | {
@@ -321,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">> & {
@@ -333,10 +379,20 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
 } & {
     readonly canDisplayLabels: boolean;
     readonly totalHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
 } & {
@@ -344,6 +400,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     readonly blockType: string;
     readonly totalHeight: number;
     readonly rowHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
     readonly canDisplayLabels: boolean;

package/esm/MultiLinearVariantMatrixDisplay/model.js

@@ -26,15 +26,19 @@ export default function stateModelFactory(configSchema) {
                 ? self.totalHeight / this.nrow
                 : self.rowHeightSetting;
         },
+        get featuresReady() {
+            return !!self.featuresVolatile;
+        },
     }))
         .views(self => ({
         renderProps() {
             const superProps = self.adapterProps();
             return {
                 ...superProps,
-                notReady: superProps.notReady || !self.sources || !self.featuresVolatile,
+                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;

package/esm/MultiLinearVariantMatrixRenderer/components/MultiLinearVariantMatrixRendering.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const MultiLinearVariantMatrixRendering = observer(function (props) {
+    const { arr, width, height, displayModel } = props;
+    const ref = useRef(null);
+    function getFeatureUnderMouse(eventClientX, eventClientY) {
+        var _a, _b, _c;
+        if (!ref.current) {
+            return;
+        }
+        const r = ref.current.getBoundingClientRect();
+        const offsetX = eventClientX - r.left;
+        const offsetY = eventClientY - r.top;
+        const dimY = arr.length;
+        const dimX = ((_a = arr[0]) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const name = (_b = displayModel.sources[Math.floor((offsetY / height) * dimX)]) === null || _b === void 0 ? void 0 : _b.name;
+        const genotype = (_c = arr[Math.floor((offsetX / width) * dimY)]) === null || _c === void 0 ? void 0 : _c[Math.floor((offsetY / height) * dimX)];
+        return genotype && name
+            ? {
+                name,
+                genotype,
+            }
+            : undefined;
+    }
+    return (_jsx("div", { ref: ref, onMouseMove: e => {
+            displayModel.setHoveredGenotype(getFeatureUnderMouse(e.clientX, e.clientY));
+        }, onMouseLeave: () => {
+            displayModel.setHoveredGenotype(undefined);
+        }, onMouseOut: () => {
+            displayModel.setHoveredGenotype(undefined);
+        }, style: {
+            overflow: 'visible',
+            position: 'relative',
+            height,
+        }, children: _jsx(PrerenderedCanvas, { ...props }) }));
+});
+export default MultiLinearVariantMatrixRendering;

package/esm/MultiLinearVariantMatrixRenderer/index.js

@@ -1,12 +1,12 @@
-import LinearVariantMatrixRenderer from './LinearVariantMatrixRenderer';
-import PrerenderedCanvas from './components/LinearVariantMatrixRendering';
+import MultiLinearVariantMatrixRenderer from './MultiLinearVariantMatrixRenderer';
+import ReactComponent from './components/MultiLinearVariantMatrixRendering';
 import configSchema from './configSchema';
 export default function LinearVariantMatrixRendererF(pluginManager) {
     pluginManager.addRendererType(() => {
-        return new LinearVariantMatrixRenderer({
+        return new MultiLinearVariantMatrixRenderer({
             name: 'LinearVariantMatrixRenderer',
             displayName: 'Linear variant matrix renderer',
-            ReactComponent: PrerenderedCanvas,
+            ReactComponent,
             configSchema,
             pluginManager,
         });

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.d.ts

@@ -1,9 +1,9 @@
-import type { RenderArgsDeserializedWithFeaturesAndLayout } from './types';
+import type { RenderArgsDeserialized } from './types';
 export declare function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }: {
     ctx: CanvasRenderingContext2D;
     canvasWidth: number;
     canvasHeight: number;
-    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+    renderArgs: RenderArgsDeserialized;
 }): Promise<{
     mafs: {
         feature: import("@jbrowse/core/util").Feature;

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.js

@@ -1,25 +1,32 @@
-import { updateStatus } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, updateStatus } from '@jbrowse/core/util';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
 import { f2 } from '../shared/constants';
 import { drawColorAlleleCount } from '../shared/drawAlleleCount';
 import { drawPhased } from '../shared/drawPhased';
 import { getFeaturesThatPassMinorAlleleFrequencyFilter } from '../shared/minorAlleleFrequencyUtils';
 export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }) {
-    const { renderingMode: renderingMode, minorAlleleFrequencyFilter, sources, features, } = renderArgs;
+    const { renderingMode, minorAlleleFrequencyFilter, sources, features, stopToken, lengthCutoffFilter, } = renderArgs;
     const { statusCallback = () => { } } = renderArgs;
     const h = canvasHeight / sources.length;
-    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(features.values(), minorAlleleFrequencyFilter);
+    checkStopToken(stopToken);
+    const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter({
+        stopToken,
+        features: features.values(),
+        minorAlleleFrequencyFilter,
+        lengthCutoffFilter,
+    });
+    checkStopToken(stopToken);
     const arr = [];
     const m = mafs.length;
     const w = canvasWidth / m;
     await updateStatus('Drawing variant matrix', statusCallback, () => {
-        var _a, _b, _c;
-        for (let i = 0; i < m; i++) {
+        forEachWithStopTokenCheck(mafs, stopToken, ({ feature, mostFrequentAlt }, idx) => {
+            var _a, _b, _c;
             const arr2 = [];
-            const { feature, mostFrequentAlt } = mafs[i];
             const hasPhaseSet = (_a = feature.get('FORMAT')) === null || _a === void 0 ? void 0 : _a.includes('PS');
             if (hasPhaseSet) {
                 const samp = feature.get('samples');
-                const x = (i / mafs.length) * canvasWidth;
+                const x = (idx / mafs.length) * canvasWidth;
                 const sln = sources.length;
                 for (let j = 0; j < sln; j++) {
                     const y = (j / sln) * canvasHeight;
@@ -51,7 +58,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
             }
             else {
                 const samp = feature.get('genotypes');
-                const x = (i / mafs.length) * canvasWidth;
+                const x = (idx / mafs.length) * canvasWidth;
                 const sln = sources.length;
                 for (let j = 0; j < sln; j++) {
                     const y = (j / sln) * canvasHeight;
@@ -78,7 +85,7 @@ export async function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs
                 }
             }
             arr.push(arr2);
-        }
+        });
     });
     return {
         mafs,

package/esm/MultiLinearVariantMatrixRenderer/types.d.ts

@@ -6,11 +6,9 @@ export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
     minorAlleleFrequencyFilter: number;
     highResolutionScaling: number;
     height: number;
-    renderingMode: string;
-}
-export interface RenderArgsDeserializedWithFeaturesAndLayout extends RenderArgsDeserialized {
-    sources: Source[];
     features: Map<string, Feature>;
     renderingMode: string;
     statusCallback?: (arg: string) => void;
+    lengthCutoffFilter: number;
+    stopToken: string;
 }

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.d.ts

@@ -8,6 +8,16 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         canvasRecordedData: any;
         reactElement?: React.ReactElement;
         html?: string;
@@ -16,6 +26,16 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
@@ -23,9 +43,18 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
         height: number;
         width: number;
         containsNoTransferables: boolean;
+        rbush: any;
+        featureGenotypeMap: {
+            [k: string]: {
+                alt: any;
+                ref: any;
+                name: any;
+                description: any;
+                length: number;
+            };
+        };
         imageData: any;
         reactElement?: React.ReactElement;
         html?: string;
     }>;
 }
-export type { RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';

package/esm/MultiLinearVariantRenderer/MultiVariantRenderer.js

@@ -7,14 +7,20 @@ export default class MultiVariantBaseRenderer extends FeatureRendererType {
     }
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
-        const { height, regions, bpPerPx } = renderProps;
+        const { height, referenceDrawingMode, regions, bpPerPx } = renderProps;
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
         const { makeImageData } = await import('./makeImageData');
-        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData(ctx, {
-            ...renderProps,
-            features,
-        }));
+        const rest = await renderToAbstractCanvas(width, height, renderProps, ctx => {
+            if (referenceDrawingMode === 'skip') {
+                ctx.fillStyle = '#ccc';
+                ctx.fillRect(0, 0, width, height);
+            }
+            return makeImageData(ctx, {
+                ...renderProps,
+                features,
+            });
+        });
         const results = await super.render({
             ...renderProps,
             ...rest,

package/esm/MultiLinearVariantRenderer/components/{MultiVariantRendering.d.ts → MultiLinearVariantRendering.d.ts}

@@ -1,7 +1,14 @@
-import RBush from 'rbush';
 import type { Source } from '../../shared/types';
 import type { Feature } from '@jbrowse/core/util';
 import type { Region } from '@jbrowse/core/util/types';
+type SerializedRBush = any;
+interface MinimizedVariantRecord {
+    alt: string[];
+    ref: string;
+    name: string;
+    description: string;
+    length: number;
+}
 declare const MultiVariantRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
@@ -10,10 +17,9 @@ declare const MultiVariantRendering: (props: {
     height: number;
     sources: Source[];
     scrollTop: number;
+    featureGenotypeMap: Record<string, MinimizedVariantRecord>;
     totalHeight: number;
-    rbush: RBush<{
-        genotype: string;
-    }>;
+    rbush: SerializedRBush;
     displayModel: any;
     onMouseLeave?: (event: React.MouseEvent) => void;
     onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void;

package/esm/MultiLinearVariantRenderer/components/{MultiVariantRendering.js → MultiLinearVariantRendering.js}

@@ -1,29 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import RBush from 'rbush';
+import { minElt } from './util';
+import { makeSimpleAltString } from '../../VcfFeature/util';
 const MultiVariantRendering = observer(function (props) {
-    const { totalHeight, scrollTop } = props;
+    const { featureGenotypeMap, totalHeight, scrollTop } = props;
     const { rbush, displayModel } = props;
     const ref = useRef(null);
     const rbush2 = useMemo(() => new RBush().fromJSON(rbush), [rbush]);
     function getFeatureUnderMouse(eventClientX, eventClientY) {
-        var _a;
         let offsetX = 0;
         let offsetY = 0;
         if (ref.current) {
             const r = ref.current.getBoundingClientRect();
             offsetX = eventClientX - r.left;
-            offsetY = eventClientY - r.top;
+            offsetY = eventClientY - r.top - ((displayModel === null || displayModel === void 0 ? void 0 : displayModel.scrollTop) || 0);
         }
-        const ret = rbush2.search({
+        const x = rbush2.search({
             minX: offsetX,
-            maxX: offsetX + 3,
+            maxX: offsetX + 1,
             minY: offsetY,
-            maxY: offsetY + 3,
+            maxY: offsetY + 1,
         });
-        return (_a = ret[0]) === null || _a === void 0 ? void 0 : _a.genotype;
+        if (x.length) {
+            const { minX, minY, maxX, maxY, genotype, featureId, ...rest } = minElt(x, elt => elt.maxX - elt.minX);
+            const ret = featureGenotypeMap[featureId];
+            if (ret) {
+                const { ref, alt, name, description, length } = ret;
+                const alleles = makeSimpleAltString(genotype, ref, alt);
+                return {
+                    ...rest,
+                    genotype,
+                    alleles,
+                    featureName: name,
+                    description: alt.length >= 3 ? 'multiple ALT alleles' : description,
+                    length: getBpDisplayStr(length),
+                };
+            }
+        }
+        return undefined;
     }
     return (_jsx("div", { ref: ref, onMouseMove: e => {
             var _a;

package/esm/MultiLinearVariantRenderer/components/util.d.ts

@@ -0,0 +1 @@
+export declare function minElt<T>(arr: Iterable<T>, cb: (arg: T) => number): T | undefined;

package/esm/MultiLinearVariantRenderer/components/util.js

@@ -0,0 +1,12 @@
+export function minElt(arr, cb) {
+    let min = Infinity;
+    let minElement;
+    for (const entry of arr) {
+        const val = cb(entry);
+        if (val < min) {
+            min = val;
+            minElement = entry;
+        }
+    }
+    return minElement;
+}

package/esm/MultiLinearVariantRenderer/index.js

@@ -1,5 +1,5 @@
 import MultiVariantRenderer from './MultiVariantRenderer';
-import ReactComponent from './components/MultiVariantRendering';
+import ReactComponent from './components/MultiLinearVariantRendering';
 import configSchema from './configSchema';
 export default function MultiVariantRendererF(pluginManager) {
     pluginManager.addRendererType(() => {

package/esm/MultiLinearVariantRenderer/makeImageData.d.ts

@@ -1,4 +1,13 @@
 import type { MultiRenderArgsDeserialized } from './types';
 export declare function makeImageData(ctx: CanvasRenderingContext2D, props: MultiRenderArgsDeserialized): Promise<{
     rbush: any;
+    featureGenotypeMap: {
+        [k: string]: {
+            alt: any;
+            ref: any;
+            name: any;
+            description: any;
+            length: number;
+        };
+    };
 }>;