@jbrowse/plugin-variants 3.7.0 → 4.0.0

package/esm/MultiLinearVariantMatrixDisplay/model.js

@@ -1,33 +1,18 @@
-import { clamp, getSession } from '@jbrowse/core/util';
-import { isAlive, types } from 'mobx-state-tree';
-import MultiVariantBaseModelF from '../shared/MultiVariantBaseModel';
+import { clamp } from '@jbrowse/core/util';
+import { types } from '@jbrowse/mobx-state-tree';
+import MultiVariantBaseModelF from "../shared/MultiVariantBaseModel.js";
 export default function stateModelFactory(configSchema) {
     return types
         .compose('LinearVariantMatrixDisplay', MultiVariantBaseModelF(configSchema), types.model({
         type: types.literal('LinearVariantMatrixDisplay'),
-        rowHeightSetting: types.optional(types.number, 1),
-        lineZoneHeight: 20,
+        lineZoneHeight: types.optional(types.number, 20),
     }))
-        .views(self => ({
-        get nrow() {
-            var _a;
-            return ((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1;
-        },
+        .views(() => ({
         get blockType() {
             return 'dynamicBlocks';
         },
-        get totalHeight() {
-            return self.autoHeight
-                ? self.height - self.lineZoneHeight
-                : this.nrow * self.rowHeightSetting;
-        },
-        get rowHeight() {
-            return self.autoHeight
-                ? self.totalHeight / this.nrow
-                : self.rowHeightSetting;
-        },
-        get featuresReady() {
-            return !!self.featuresVolatile;
+        get prefersOffset() {
+            return true;
         },
     }))
         .views(self => ({
@@ -39,13 +24,13 @@ export default function stateModelFactory(configSchema) {
                 renderingMode: self.renderingMode,
                 minorAlleleFrequencyFilter: self.minorAlleleFrequencyFilter,
                 lengthCutoffFilter: self.lengthCutoffFilter,
-                height: self.totalHeight,
+                height: self.autoHeight ? self.totalHeight : self.availableHeight,
+                totalHeight: self.totalHeight,
+                rowHeight: self.rowHeight,
+                scrollTop: self.scrollTop,
                 sources: self.sources,
             };
         },
-        get canDisplayLabels() {
-            return self.rowHeight > 8 && self.showSidebarLabelsSetting;
-        },
     }))
         .actions(self => ({
         setLineZoneHeight(n) {
@@ -56,31 +41,20 @@ export default function stateModelFactory(configSchema) {
         .actions(self => {
         const { renderSvg: superRenderSvg } = self;
         return {
-            setLineZoneHeight(n) {
-                self.lineZoneHeight = clamp(n, 10, 1000);
-                return self.lineZoneHeight;
-            },
-            afterAttach() {
-                ;
-                (async () => {
-                    try {
-                        const { getMultiVariantSourcesAutorun } = await import('../getMultiVariantSourcesAutorun');
-                        const { getMultiVariantFeaturesAutorun } = await import('../getMultiVariantFeaturesAutorun');
-                        getMultiVariantSourcesAutorun(self);
-                        getMultiVariantFeaturesAutorun(self);
-                    }
-                    catch (e) {
-                        if (isAlive(self)) {
-                            console.error(e);
-                            getSession(self).notifyError(`${e}`, e);
-                        }
-                    }
-                })();
-            },
             async renderSvg(opts) {
-                const { renderSvg } = await import('./renderSvg');
+                const { renderSvg } = await import("./renderSvg.js");
                 return renderSvg(self, opts, superRenderSvg);
             },
         };
+    })
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { lineZoneHeight, ...rest } = snap;
+        return {
+            ...rest,
+            ...(lineZoneHeight !== 20 ? { lineZoneHeight } : {}),
+        };
     });
 }

package/esm/MultiLinearVariantMatrixDisplay/renderSvg.d.ts

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

package/esm/MultiLinearVariantMatrixDisplay/renderSvg.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
-import LinesConnectingMatrixToGenomicPosition from './components/LinesConnectingMatrixToGenomicPosition';
-import LegendBar from '../shared/components/MultiVariantLegendBar';
+import LinesConnectingMatrixToGenomicPosition from "./components/LinesConnectingMatrixToGenomicPosition.js";
+import { makeSidebarSvg } from "../shared/makeSidebarSvg.js";
 export async function renderSvg(model, opts, superRenderSvg) {
     await when(() => !!model.regionCannotBeRenderedText);
     const { offsetPx } = getContainingView(model);
     const { lineZoneHeight } = model;
-    return (_jsx(_Fragment, { children: _jsxs("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: [_jsx(LinesConnectingMatrixToGenomicPosition, { exportSVG: true, model: model }), _jsxs("g", { transform: `translate(0,${lineZoneHeight})`, children: [_jsx("g", { children: await superRenderSvg(opts) }), _jsx(LegendBar, { model: model, orientation: "left", exportSVG: true })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: [_jsx(LinesConnectingMatrixToGenomicPosition, { exportSVG: true, model: model }), _jsxs("g", { transform: `translate(0,${lineZoneHeight})`, children: [_jsx("g", { children: await superRenderSvg(opts) }), await makeSidebarSvg(model)] })] }) }));
 }

package/esm/MultiLinearVariantMatrixRenderer/MultiLinearVariantMatrixRenderer.d.ts

@@ -1,37 +1,6 @@
-import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { SimpleFeature } from '@jbrowse/core/util';
-import type { RenderArgsDeserialized } from './types';
-export default class LinearVariantMatrixRenderer extends BoxRendererType {
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { RenderArgsDeserialized } from './types.ts';
+export default class LinearVariantMatrixRenderer extends FeatureRendererType {
     supportsSVG: boolean;
-    render(renderProps: RenderArgsDeserialized): Promise<{
-        features: Map<any, any>;
-        simplifiedFeatures: SimpleFeature[];
-        height: number;
-        width: number;
-        arr: string[][];
-        canvasRecordedData: Record<string, unknown>;
-        layout: import("@jbrowse/core/util/layouts/BaseLayout").BaseLayout<import("@jbrowse/core/util").Feature>;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        features: Map<any, any>;
-        simplifiedFeatures: SimpleFeature[];
-        height: number;
-        width: number;
-        arr: string[][];
-        imageData: any;
-        layout: import("@jbrowse/core/util/layouts/BaseLayout").BaseLayout<import("@jbrowse/core/util").Feature>;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        features: Map<any, any>;
-        simplifiedFeatures: SimpleFeature[];
-        height: number;
-        width: number;
-        arr: string[][];
-        reactElement: React.ReactElement;
-        layout: import("@jbrowse/core/util/layouts/BaseLayout").BaseLayout<import("@jbrowse/core/util").Feature>;
-        html?: string;
-    }>;
+    render(renderProps: RenderArgsDeserialized): Promise<import("librpc-web-mod").RpcResult>;
 }
-export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/esm/MultiLinearVariantMatrixRenderer/MultiLinearVariantMatrixRenderer.js

@@ -1,48 +1,34 @@
-import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { SimpleFeature, renderToAbstractCanvas } from '@jbrowse/core/util';
-export default class LinearVariantMatrixRenderer extends BoxRendererType {
-    constructor() {
-        super(...arguments);
-        this.supportsSVG = true;
-    }
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import { renderToAbstractCanvas } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+export default class LinearVariantMatrixRenderer extends FeatureRendererType {
+    supportsSVG = true;
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
-        const { height, sources, regions, bpPerPx } = renderProps;
+        const { height, regions, bpPerPx, scrollTop, rowHeight } = renderProps;
         const region = regions[0];
-        const { end, start } = region;
-        const width = (end - start) / bpPerPx;
-        const { makeImageData } = await import('./makeImageData');
+        const width = (region.end - region.start) / bpPerPx;
+        const { makeImageData } = await import("./makeImageData.js");
         const { mafs, ...rest } = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
             ctx,
             canvasWidth: width,
             canvasHeight: height,
-            renderArgs: {
-                ...renderProps,
-                features,
-                sources,
-            },
+            renderArgs: { ...renderProps, features },
         }));
-        const results = await super.render({
-            ...renderProps,
-            ...rest,
-            features,
-            height,
-            width,
-        });
-        return {
-            ...results,
+        const serialized = {
             ...rest,
-            features: new Map(),
-            simplifiedFeatures: mafs.map(({ feature }) => new SimpleFeature({
-                id: feature.id(),
-                data: {
-                    start: feature.get('start'),
-                    end: feature.get('end'),
-                    refName: feature.get('refName'),
-                },
+            simplifiedFeatures: mafs.map(({ feature }) => ({
+                uniqueId: feature.id(),
+                start: feature.get('start'),
+                end: feature.get('end'),
+                refName: feature.get('refName'),
             })),
             height,
             width,
+            origScrollTop: scrollTop,
+            rowHeight,
         };
+        return rpcResult(serialized, collectTransferables(rest));
     }
 }

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

@@ -1,8 +1,19 @@
-import type { MultiVariantBaseModel } from '../../shared/MultiVariantBaseModel';
+import type { MultiVariantBaseModel } from '../../shared/MultiVariantBaseModel.ts';
+interface FeatureData {
+    alt: string[];
+    ref: string;
+    name: string;
+    description: string;
+    length: number;
+}
 declare const MultiLinearVariantMatrixRendering: (props: {
     width: number;
     height: number;
     displayModel: MultiVariantBaseModel;
     arr: string[][];
+    featureData: FeatureData[];
+    rowHeight: number;
+    origScrollTop: number;
+    totalHeight: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MultiLinearVariantMatrixRendering;

package/esm/MultiLinearVariantMatrixRenderer/components/MultiLinearVariantMatrixRendering.js

@@ -1,39 +1,65 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-const MultiLinearVariantMatrixRendering = observer(function (props) {
-    const { arr, width, height, displayModel } = props;
+import { makeSimpleAltString } from "../../VcfFeature/util.js";
+const MultiLinearVariantMatrixRendering = observer(function MultiLinearVariantMatrixRendering(props) {
+    const { arr, width, displayModel, featureData, totalHeight, origScrollTop, rowHeight, } = props;
     const ref = useRef(null);
-    function getFeatureUnderMouse(eventClientX, eventClientY) {
-        var _a, _b, _c;
+    const lastHoveredRef = useRef(undefined);
+    const getFeatureUnderMouse = useCallback((eventClientX, eventClientY) => {
         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
-            ? {
+        const { sources } = displayModel;
+        const canvasOffsetY = offsetY - origScrollTop;
+        const startRow = Math.floor(origScrollTop / rowHeight);
+        const visibleRowIdx = Math.floor(canvasOffsetY / rowHeight);
+        const sourceIdx = startRow + visibleRowIdx;
+        const name = sources?.[sourceIdx]?.name;
+        const featureIdx = Math.floor((offsetX / width) * arr.length);
+        const genotype = arr[featureIdx]?.[visibleRowIdx];
+        const feature = featureData[featureIdx];
+        if (genotype && name && feature) {
+            const { ref, alt, name: featureName, description, length } = feature;
+            const alleles = makeSimpleAltString(genotype, ref, alt);
+            return {
                 name,
                 genotype,
-            }
-            : undefined;
-    }
-    return (_jsx("div", { ref: ref, onMouseMove: e => {
-            displayModel.setHoveredGenotype(getFeatureUnderMouse(e.clientX, e.clientY));
-        }, onMouseLeave: () => {
-            displayModel.setHoveredGenotype(undefined);
-        }, onMouseOut: () => {
+                alleles,
+                featureName,
+                description: alt.length >= 3 ? 'multiple ALT alleles' : description,
+                length: getBpDisplayStr(length),
+            };
+        }
+        return undefined;
+    }, [arr, width, displayModel, featureData, origScrollTop, rowHeight]);
+    const handleMouseMove = useCallback((e) => {
+        const result = getFeatureUnderMouse(e.clientX, e.clientY);
+        const key = result ? `${result.name}:${result.genotype}` : undefined;
+        if (key !== lastHoveredRef.current) {
+            lastHoveredRef.current = key;
+            displayModel.setHoveredGenotype(result);
+        }
+    }, [getFeatureUnderMouse, displayModel]);
+    const handleMouseLeave = useCallback(() => {
+        if (lastHoveredRef.current !== undefined) {
+            lastHoveredRef.current = undefined;
             displayModel.setHoveredGenotype(undefined);
-        }, style: {
+        }
+    }, [displayModel]);
+    return (_jsx("div", { ref: ref, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onMouseOut: handleMouseLeave, style: {
             overflow: 'visible',
             position: 'relative',
-            height,
-        }, children: _jsx(PrerenderedCanvas, { ...props }) }));
+            height: totalHeight,
+        }, children: _jsx(PrerenderedCanvas, { ...props, style: {
+                position: 'absolute',
+                left: 0,
+                top: origScrollTop,
+            } }) }));
 });
 export default MultiLinearVariantMatrixRendering;

package/esm/MultiLinearVariantMatrixRenderer/configSchema.d.ts

@@ -1,2 +1,2 @@
-declare const LinearVariantMatrixRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+declare const LinearVariantMatrixRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default LinearVariantMatrixRenderer;

package/esm/MultiLinearVariantMatrixRenderer/index.js

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

package/esm/MultiLinearVariantMatrixRenderer/makeImageData.d.ts

@@ -1,4 +1,5 @@
-import type { RenderArgsDeserialized } from './types';
+import type { RenderArgsDeserialized } from './types.ts';
+import type { Feature } from '@jbrowse/core/util';
 export declare function makeImageData({ ctx, canvasWidth, canvasHeight, renderArgs, }: {
     ctx: CanvasRenderingContext2D;
     canvasWidth: number;
@@ -6,9 +7,16 @@ export declare function makeImageData({ ctx, canvasWidth, canvasHeight, renderAr
     renderArgs: RenderArgsDeserialized;
 }): Promise<{
     mafs: {
-        feature: import("@jbrowse/core/util").Feature;
+        feature: Feature;
         mostFrequentAlt: string;
         alleleCounts: Record<string, number>;
     }[];
     arr: string[][];
+    featureData: {
+        alt: string[];
+        ref: string;
+        name: string;
+        description: string;
+        length: number;
+    }[];
 }>;