@jbrowse/plugin-wiggle 3.6.5 → 4.0.0

package/esm/MultiLinearWiggleDisplay/model.js

@@ -3,15 +3,16 @@ import { getConf } from '@jbrowse/core/configuration';
 import { set1 as colors } from '@jbrowse/core/ui/colors';
 import { getContainingView, getSession, max, measureText, } from '@jbrowse/core/util';
 import { stopStopToken } from '@jbrowse/core/util/stopToken';
+import { isAlive, types } from '@jbrowse/mobx-state-tree';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import deepEqual from 'fast-deep-equal';
-import { isAlive, types } from 'mobx-state-tree';
-import { axisPropsFromTickScale } from 'react-d3-axis-mod';
-import SharedWiggleMixin from '../shared/SharedWiggleMixin';
-import { YSCALEBAR_LABEL_OFFSET, getScale } from '../util';
+import SharedWiggleMixin from "../shared/SharedWiggleMixin.js";
+import axisPropsFromTickScale from "../shared/axisPropsFromTickScale.js";
+import { YSCALEBAR_LABEL_OFFSET, getScale } from "../util.js";
 const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
-const Tooltip = lazy(() => import('./components/Tooltip'));
-const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
-const WiggleClusterDialog = lazy(() => import('./components/WiggleClusterDialog/WiggleClusterDialog'));
+const Tooltip = lazy(() => import("./components/Tooltip.js"));
+const SetColorDialog = lazy(() => import("./components/SetColorDialog.js"));
+const WiggleClusterDialog = lazy(() => import("./components/WiggleClusterDialog/WiggleClusterDialog.js"));
 const rendererTypes = new Map([
     ['xyplot', 'MultiXYPlotRenderer'],
     ['multirowxy', 'MultiRowXYPlotRenderer'],
@@ -88,13 +89,13 @@ export function stateModelFactory(_pluginManager, configSchema) {
                 self.rendererTypeName === 'MultiRowLineRenderer' ||
                 self.rendererTypeName === 'MultiDensityRenderer');
         },
-        get needsCustomLegend() {
-            return self.rendererTypeName === 'MultiDensityRenderer';
-        },
         get canHaveFill() {
             return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
                 self.rendererTypeName === 'MultiRowXYPlotRenderer');
         },
+        get needsCustomLegend() {
+            return self.rendererTypeName === 'MultiDensityRenderer';
+        },
         get renderColorBoxes() {
             return !(self.rendererTypeName === 'MultiRowLineRenderer' ||
                 self.rendererTypeName === 'MultiRowXYPlotRenderer');
@@ -103,26 +104,28 @@ export function stateModelFactory(_pluginManager, configSchema) {
             return this.isMultiRow;
         },
         get sourcesWithoutLayout() {
-            var _a;
-            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+            const sources = Object.fromEntries(self.sourcesVolatile?.map(s => [s.name, s]) || []);
             const iter = self.sourcesVolatile;
-            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
+            return iter
+                ?.map(s => ({
                 ...sources[s.name],
                 ...s,
-            })).map((s, i) => ({
+            }))
+                .map((s, i) => ({
                 ...s,
                 color: s.color ||
                     (!this.isMultiRow ? colors[i] || randomColor() : 'blue'),
             }));
         },
         get sources() {
-            var _a;
-            const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
+            const sources = Object.fromEntries(self.sourcesVolatile?.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 => ({
+            return iter
+                ?.map(s => ({
                 ...sources[s.name],
                 ...s,
-            })).map((s, i) => ({
+            }))
+                .map((s, i) => ({
                 ...s,
                 color: s.color ||
                     (!this.isMultiRow ? colors[i] || randomColor() : 'blue'),
@@ -130,13 +133,15 @@ export function stateModelFactory(_pluginManager, configSchema) {
         },
         get quantitativeStatsReady() {
             const view = getContainingView(self);
-            return (view.initialized && self.statsReadyAndRegionNotTooLarge && !self.error);
+            return (view.initialized &&
+                self.featureDensityStatsReadyAndRegionNotTooLarge &&
+                !self.error);
         },
     }))
         .views(self => ({
         get rowHeight() {
             const { sources, height, isMultiRow } = self;
-            return isMultiRow ? height / ((sources === null || sources === void 0 ? void 0 : sources.length) || 1) : height;
+            return isMultiRow ? height / (sources?.length || 1) : height;
         },
         get rowHeightTooSmallForScalebar() {
             return this.rowHeight < 70;
@@ -153,11 +158,9 @@ export function stateModelFactory(_pluginManager, configSchema) {
                 const superProps = superRenderProps();
                 return {
                     ...superProps,
-                    displayModel: self,
                     config: self.rendererConfig,
                     filters: self.filters,
                     resolution: self.resolution,
-                    rpcDriverName: self.rpcDriverName,
                     sources: self.sources,
                 };
             },
@@ -190,23 +193,23 @@ export function stateModelFactory(_pluginManager, configSchema) {
                 ];
             },
             get quantitativeStatsRelevantToCurrentZoom() {
-                var _a;
                 const view = getContainingView(self);
-                return ((_a = self.stats) === null || _a === void 0 ? void 0 : _a.currStatsBpPerPx) === view.bpPerPx;
+                return self.stats?.currStatsBpPerPx === view.bpPerPx;
             },
         };
     })
         .views(self => ({
         get legendFontSize() {
-            return Math.min(self.rowHeight, 12);
+            return Math.min(self.rowHeight, 8);
         },
         get canDisplayLegendLabels() {
-            return self.rowHeight > 11;
+            return self.rowHeight > 7;
         },
         get labelWidth() {
-            var _a;
             const minWidth = 20;
-            return max(((_a = self.sources) === null || _a === void 0 ? void 0 : _a.map(s => measureText(s.name, this.legendFontSize)).map(width => (this.canDisplayLegendLabels ? width : minWidth))) ||
+            return max(self.sources
+                ?.map(s => measureText(s.name, this.legendFontSize))
+                .map(width => (this.canDisplayLegendLabels ? width : minWidth)) ||
                 []);
         },
         renderProps() {
@@ -214,19 +217,17 @@ export function stateModelFactory(_pluginManager, configSchema) {
             return {
                 ...superProps,
                 notReady: superProps.notReady || !self.sources || !self.stats,
-                displayModel: self,
-                rpcDriverName: self.rpcDriverName,
                 displayCrossHatches: self.displayCrossHatches,
                 height: self.height,
                 ticks: self.ticks,
                 stats: self.stats,
                 scaleOpts: self.scaleOpts,
-                onMouseMove: (_, f) => {
-                    self.setFeatureUnderMouse(f);
-                },
-                onMouseLeave: () => {
-                    self.setFeatureUnderMouse(undefined);
-                },
+                offset: self.isMultiRow ? 0 : YSCALEBAR_LABEL_OFFSET,
+            };
+        },
+        renderingProps() {
+            return {
+                displayModel: self,
             };
         },
         get hasResolution() {
@@ -254,6 +255,20 @@ export function stateModelFactory(_pluginManager, configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
+                    {
+                        label: 'Show...',
+                        icon: VisibilityIcon,
+                        subMenu: [
+                            {
+                                label: 'Show tooltips',
+                                type: 'checkbox',
+                                checked: self.showTooltipsEnabled,
+                                onClick: () => {
+                                    self.setShowTooltips(!self.showTooltipsEnabled);
+                                },
+                            },
+                        ],
+                    },
                     {
                         label: 'Score',
                         subMenu: self.scoreTrackMenuItems(),
@@ -306,18 +321,22 @@ export function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
-                    {
-                        label: 'Cluster by score',
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                WiggleClusterDialog,
-                                {
-                                    model: self,
-                                    handleClose,
+                    ...(self.isMultiRow
+                        ? [
+                            {
+                                label: 'Cluster rows by score',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        WiggleClusterDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
                                 },
-                            ]);
-                        },
-                    },
+                            },
+                        ]
+                        : []),
                     {
                         label: 'Show sidebar',
                         type: 'checkbox',
@@ -350,8 +369,8 @@ export function stateModelFactory(_pluginManager, configSchema) {
                 (async () => {
                     try {
                         const [{ getMultiWiggleSourcesAutorun }, { getQuantitativeStatsAutorun },] = await Promise.all([
-                            import('../getMultiWiggleSourcesAutorun'),
-                            import('../getQuantitativeStatsAutorun'),
+                            import("../getMultiWiggleSourcesAutorun.js"),
+                            import("../getQuantitativeStatsAutorun.js"),
                         ]);
                         getQuantitativeStatsAutorun(self);
                         getMultiWiggleSourcesAutorun(self);
@@ -365,10 +384,21 @@ export function stateModelFactory(_pluginManager, configSchema) {
                 })();
             },
             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 { layout, showSidebar, ...rest } = snap;
+        return {
+            ...rest,
+            ...(layout?.length ? { layout } : {}),
+            ...(!showSidebar ? { showSidebar } : {}),
+        };
     });
 }
 export default stateModelFactory;

package/esm/MultiLinearWiggleDisplay/renderSvg.d.ts

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

package/esm/MultiLinearWiggleDisplay/renderSvg.js

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

package/esm/MultiLinearWiggleDisplay/types.d.ts

@@ -6,6 +6,7 @@ export interface Source {
     group?: string;
     HP?: number;
     id?: string;
+    source: string;
     [key: string]: unknown;
 }
 export interface SampleInfo {

package/esm/MultiLinearWiggleDisplay/util.d.ts

@@ -1 +0,0 @@
-export declare function randomColor(str: string): string;

package/esm/MultiLinearWiggleDisplay/util.js

@@ -1,7 +1 @@
-export function randomColor(str) {
-    let sum = 0;
-    for (let i = 0; i < str.length; i++) {
-        sum += str.charCodeAt(i);
-    }
-    return `hsl(${sum * 10}, 20%, 50%)`;
-}
+"use strict";

package/esm/MultiQuantitativeTrack/configSchema.d.ts

@@ -1,5 +1,5 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const configSchema: (pluginManager: PluginManager) => import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     name: {
         description: string;
         type: string;
@@ -25,8 +25,13 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
         description: string;
         defaultValue: {};
     };
-    adapter: import("mobx-state-tree").IAnyModelType;
-    textSearching: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    rpcDriverName: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    adapter: import("@jbrowse/mobx-state-tree").IAnyModelType;
+    textSearching: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
         indexingAttributes: {
             type: string;
             description: string;
@@ -37,10 +42,10 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
             description: string;
             defaultValue: string[];
         };
-        textSearchAdapter: import("mobx-state-tree").IAnyModelType;
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
-    displays: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
-    formatDetails: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        textSearchAdapter: import("@jbrowse/mobx-state-tree").IAnyModelType;
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    displays: import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IAnyModelType>;
+    formatDetails: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
         feature: {
             type: string;
             description: string;
@@ -63,8 +68,8 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
             defaultValue: number;
             description: string;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
-    formatAbout: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    formatAbout: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
         config: {
             type: string;
             description: string;
@@ -75,6 +80,6 @@ declare const configSchema: (pluginManager: PluginManager) => import("@jbrowse/c
             type: string;
             defaultValue: boolean;
         };
-    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "trackId">>, undefined>>;
+    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "trackId">>, undefined>>;
 export default configSchema;

package/esm/MultiQuantitativeTrack/index.js

@@ -1,6 +1,7 @@
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType';
 import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
-import configSchemaF from './configSchema';
+import configSchemaF from "./configSchema.js";
+import { stringifyBedGraph } from "../saveTrackFormats/bedGraph.js";
 export default function MultiQuantitativeTrackF(pluginManager) {
     pluginManager.addTrackType(() => {
         const configSchema = configSchemaF(pluginManager);
@@ -8,7 +9,17 @@ export default function MultiQuantitativeTrackF(pluginManager) {
             name: 'MultiQuantitativeTrack',
             displayName: 'Multi-quantitative track',
             configSchema,
-            stateModel: createBaseTrackModel(pluginManager, 'MultiQuantitativeTrack', configSchema),
+            stateModel: createBaseTrackModel(pluginManager, 'MultiQuantitativeTrack', configSchema).views(() => ({
+                saveTrackFileFormatOptions() {
+                    return {
+                        bedGraph: {
+                            name: 'BedGraph',
+                            extension: 'bedgraph',
+                            callback: stringifyBedGraph,
+                        },
+                    };
+                },
+            })),
         });
     });
 }

package/esm/MultiRowLineRenderer/MultiRowLineRenderer.d.ts

@@ -1,8 +1,6 @@
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import type { MultiRenderArgsDeserialized as MultiArgs } from '../WiggleBaseRenderer';
-import type { Feature } from '@jbrowse/core/util';
-export default class MultiRowLineRenderer extends WiggleBaseRenderer {
-    draw(ctx: CanvasRenderingContext2D, props: MultiArgs): Promise<{
-        reducedFeatures: Feature[];
-    }>;
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+export default class MultiRowLineRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: MultiRenderArgsDeserialized): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;
 }

package/esm/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -1,31 +1,8 @@
-import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-export default class MultiRowLineRenderer extends WiggleBaseRenderer {
-    async draw(ctx, props) {
-        const { stopToken, bpPerPx, sources, regions, features } = props;
-        const region = regions[0];
-        const groups = groupBy(features.values(), f => f.get('source'));
-        const height = props.height / sources.length;
-        const width = (region.end - region.start) / bpPerPx;
-        const { drawLine } = await import('../drawLine');
-        let feats = [];
-        ctx.save();
-        forEachWithStopTokenCheck(sources, stopToken, source => {
-            const { reducedFeatures } = drawLine(ctx, {
-                ...props,
-                features: groups[source.name] || [],
-                height,
-                colorCallback: () => source.color || 'blue',
-            });
-            ctx.strokeStyle = 'rgba(200,200,200,0.8)';
-            ctx.beginPath();
-            ctx.moveTo(0, height);
-            ctx.lineTo(width, height);
-            ctx.stroke();
-            ctx.translate(0, height);
-            feats = feats.concat(reducedFeatures);
-        });
-        ctx.restore();
-        return { reducedFeatures: feats };
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+export default class MultiRowLineRenderer extends FeatureRendererType {
+    supportsSVG = true;
+    async render(renderProps) {
+        const { makeImageData } = await import("./makeImageData.js");
+        return makeImageData(renderProps, this.pluginManager);
     }
 }

package/esm/MultiRowLineRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const configSchema: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     displayCrossHatches: {
         type: string;
         description: string;
@@ -6,11 +6,11 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
     };
     summaryScoreMode: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -36,7 +36,7 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
     };
     bicolorPivot: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -45,5 +45,5 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         defaultValue: number;
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default configSchema;

package/esm/MultiRowLineRenderer/configSchema.js

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { types } from 'mobx-state-tree';
-import baseWiggleRendererConfigSchema from '../configSchema';
+import { types } from '@jbrowse/mobx-state-tree';
+import baseWiggleRendererConfigSchema from "../configSchema.js";
 function x() { }
 const configSchema = ConfigurationSchema('MultiRowLineRenderer', {
     displayCrossHatches: {

package/esm/MultiRowLineRenderer/index.js

@@ -1,10 +1,10 @@
-import ReactComponent from '../MultiWiggleRendering';
-import MultiRowLineRenderer from './MultiRowLineRenderer';
-import configSchema from './configSchema';
+import { lazy } from 'react';
+import MultiRowLineRenderer from "./MultiRowLineRenderer.js";
+import configSchema from "./configSchema.js";
 export default function MultiRowLineRendererF(pluginManager) {
     pluginManager.addRendererType(() => new MultiRowLineRenderer({
         name: 'MultiRowLineRenderer',
-        ReactComponent,
+        ReactComponent: lazy(() => import("../MultiWiggleRendering.js")),
         configSchema,
         pluginManager,
     }));

package/esm/MultiRowLineRenderer/makeImageData.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+export declare function makeImageData(renderProps: MultiRenderArgsDeserialized, pluginManager: PluginManager): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;

package/esm/MultiRowLineRenderer/makeImageData.js

@@ -0,0 +1,7 @@
+export async function makeImageData(renderProps, pluginManager) {
+    const { renderMultiWiggle } = await import("../multiRendererHelper.js");
+    return renderMultiWiggle(pluginManager, renderProps, async (props, features) => {
+        const { renderMultiRowLine } = await import("./renderMultiRowLine.js");
+        return renderMultiRowLine(props, features);
+    });
+}

package/esm/MultiRowLineRenderer/renderMultiRowLine.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+import type { Feature } from '@jbrowse/core/util';
+export declare function renderMultiRowLine(renderProps: MultiRenderArgsDeserialized, features: Feature[]): Promise<import("librpc-web-mod").RpcResult>;

package/esm/MultiRowLineRenderer/renderMultiRowLine.js

@@ -0,0 +1,44 @@
+import { groupBy, renderToAbstractCanvas, updateStatus, } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { createStopTokenChecker } from '@jbrowse/core/util/stopToken';
+import { drawLine } from "../drawLine.js";
+import { serializeWiggleFeature } from "../util.js";
+export async function renderMultiRowLine(renderProps, features) {
+    const { sources, height, regions, bpPerPx, stopToken, statusCallback = () => { }, } = renderProps;
+    const region = regions[0];
+    const width = (region.end - region.start) / bpPerPx;
+    const rowHeight = height / sources.length;
+    const lastCheck = createStopTokenChecker(stopToken);
+    const { reducedFeatures, ...rest } = await updateStatus('Rendering plot', statusCallback, () => renderToAbstractCanvas(width, height, renderProps, ctx => {
+        const groups = groupBy(features, f => f.get('source'));
+        let feats = [];
+        ctx.save();
+        for (const source of sources) {
+            const { reducedFeatures } = drawLine(ctx, {
+                ...renderProps,
+                features: groups[source.name] || [],
+                height: rowHeight,
+                staticColor: source.color || 'blue',
+                colorCallback: () => '',
+                lastCheck,
+            });
+            ctx.strokeStyle = 'rgba(200,200,200,0.8)';
+            ctx.beginPath();
+            ctx.moveTo(0, rowHeight);
+            ctx.lineTo(width, rowHeight);
+            ctx.stroke();
+            ctx.translate(0, rowHeight);
+            feats = feats.concat(reducedFeatures);
+        }
+        ctx.restore();
+        return { reducedFeatures: feats };
+    }));
+    const serialized = {
+        ...rest,
+        features: reducedFeatures.map(serializeWiggleFeature),
+        height,
+        width,
+    };
+    return rpcResult(serialized, collectTransferables(rest));
+}

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.d.ts

@@ -1,8 +1,6 @@
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import type { MultiRenderArgsDeserialized as MultiArgs } from '../WiggleBaseRenderer';
-import type { Feature } from '@jbrowse/core/util';
-export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
-    draw(ctx: CanvasRenderingContext2D, props: MultiArgs): Promise<{
-        reducedFeatures: Feature[];
-    }>;
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+import type { MultiRenderArgsDeserialized } from '../types.ts';
+export default class MultiRowXYPlotRenderer extends FeatureRendererType {
+    supportsSVG: boolean;
+    render(renderProps: MultiRenderArgsDeserialized): Promise<import("@jbrowse/core/pluggableElementTypes/renderers/RendererType").RenderReturn>;
 }

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -1,31 +1,8 @@
-import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
-import WiggleBaseRenderer from '../WiggleBaseRenderer';
-export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
-    async draw(ctx, props) {
-        const { stopToken, bpPerPx, sources, regions, features } = props;
-        const region = regions[0];
-        const groups = groupBy(features.values(), f => f.get('source'));
-        const height = props.height / sources.length;
-        const width = (region.end - region.start) / bpPerPx;
-        const { drawXY } = await import('../drawXY');
-        let feats = [];
-        ctx.save();
-        forEachWithStopTokenCheck(sources, stopToken, source => {
-            const { reducedFeatures } = drawXY(ctx, {
-                ...props,
-                features: groups[source.name] || [],
-                height,
-                colorCallback: () => source.color || 'blue',
-            });
-            ctx.strokeStyle = 'rgba(200,200,200,0.8)';
-            ctx.beginPath();
-            ctx.moveTo(0, height);
-            ctx.lineTo(width, height);
-            ctx.stroke();
-            ctx.translate(0, height);
-            feats = feats.concat(reducedFeatures);
-        });
-        ctx.restore();
-        return { reducedFeatures: feats };
+import FeatureRendererType from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
+export default class MultiRowXYPlotRenderer extends FeatureRendererType {
+    supportsSVG = true;
+    async render(renderProps) {
+        const { makeImageData } = await import("./makeImageData.js");
+        return makeImageData(renderProps, this.pluginManager);
     }
 }