@jbrowse/plugin-wiggle 2.18.0 → 3.0.1

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
 import { getStr, measureGridWidth } from '@jbrowse/core/util';
@@ -27,82 +28,65 @@ function SourcesGrid({ rows, onChange, showTips, }) {
         idx: 0,
         field: null,
     });
-    return (React.createElement("div", null,
-        React.createElement(Button, { disabled: !selected.length, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }, "Change color of selected items"),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveUp([...rows], selected));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardArrowUpIcon, null),
-            showTips ? 'Move selected items up' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveDown([...rows], selected));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardArrowDownIcon, null),
-            showTips ? 'Move selected items down' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveUp([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowUpIcon, null),
-            showTips ? 'Move selected items to top' : null),
-        React.createElement(Button, { onClick: () => {
-                onChange(moveDown([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowDownIcon, null),
-            showTips ? 'Move selected items to bottom' : null),
-        React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
-                setWidgetColor(c);
-                selected.forEach(id => {
-                    const elt = rows.find(f => f.name === id);
-                    if (elt) {
-                        elt.color = c;
-                    }
-                });
-                onChange([...rows]);
-            }, onClose: () => {
-                setAnchorEl(null);
-            } }),
-        React.createElement("div", { style: { height: 400, width: '100%' } },
-            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                    setSelected(arg);
-                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                    {
-                        field: 'color',
-                        headerName: 'Color',
-                        renderCell: ({ value, id }) => (React.createElement(ColorPicker, { color: value || 'blue', onChange: c => {
-                                const elt = rows.find(f => f.name === id);
-                                if (elt) {
-                                    elt.color = c;
-                                }
-                                onChange([...rows]);
-                            } })),
-                    },
-                    {
-                        field: 'name',
-                        headerName: 'Name',
-                        width: measureGridWidth(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (React.createElement("div", { className: classes.cell },
-                            React.createElement(SanitizedHTML, { html: getStr(value) }))),
-                        width: measureGridWidth(rows.map(r => `${r[val]}`)),
-                    })),
-                ], sortModel: [], onSortModelChange: args => {
-                    const sort = args[0];
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = sort.field || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            const aa = getStr(a[field]);
-                            const bb = getStr(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
+    return (_jsxs("div", { children: [_jsx(Button, { disabled: !selected.length, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: "Change color of selected items" }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowUpIcon, {}), showTips ? 'Move selected items up' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowDownIcon, {}), showTips ? 'Move selected items down' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowUpIcon, {}), showTips ? 'Move selected items to top' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowDownIcon, {}), showTips ? 'Move selected items to bottom' : null] }), _jsx(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                    setWidgetColor(c);
+                    selected.forEach(id => {
+                        const elt = rows.find(f => f.name === id);
+                        if (elt) {
+                            elt.color = c;
+                        }
+                    });
+                    onChange([...rows]);
+                }, onClose: () => {
+                    setAnchorEl(null);
+                } }), _jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                        setSelected(arg);
+                    }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                        {
+                            field: 'color',
+                            headerName: 'Color',
+                            renderCell: ({ value, id }) => (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } })),
+                        },
+                        {
+                            field: 'name',
+                            headerName: 'Name',
+                            width: measureGridWidth(rows.map(r => r.name)),
+                        },
+                        ...Object.keys(rest).map(val => ({
+                            field: val,
+                            renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
+                            width: measureGridWidth(rows.map(r => `${r[val]}`)),
+                        })),
+                    ], sortModel: [], onSortModelChange: args => {
+                        const sort = args[0];
+                        const idx = (currSort.idx + 1) % 2;
+                        const field = sort.field || currSort.field;
+                        setCurrSort({ idx, field });
+                        onChange(field
+                            ? [...rows].sort((a, b) => {
+                                const aa = getStr(a[field]);
+                                const bb = getStr(b[field]);
+                                return idx === 1
+                                    ? aa.localeCompare(bb)
+                                    : bb.localeCompare(aa);
+                            })
+                            : rows);
+                    } }) })] }));
 }
 export default SourcesGrid;

package/esm/MultiLinearWiggleDisplay/components/Tooltip.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TooltipContentsComponent } from '../../Tooltip';
 import type { Source } from '../../util';
 import type { Feature } from '@jbrowse/core/util';
@@ -14,6 +13,6 @@ declare const WiggleTooltip: (props: {
     clientMouseCoord: Coord;
     clientRect?: DOMRect;
     TooltipContents?: TooltipContentsComponent;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default WiggleTooltip;
 export { default as Tooltip } from '../../Tooltip';

package/esm/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { observer } from 'mobx-react';
 import Tooltip from '../../Tooltip';
 import { toP } from '../../util';
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = React.forwardRef(function TooltipContents2({ model, feature }, ref) {
+const TooltipContents = forwardRef(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');
@@ -12,27 +13,12 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ model, feat
     const source = feature.get('source');
     const summary = feature.get('summary');
     const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
-    return (React.createElement("div", { ref: ref },
-        [refName, coord].filter(f => !!f).join(':'),
-        React.createElement("br", null),
-        sources ? (React.createElement("table", null,
-            React.createElement("thead", null,
-                React.createElement("tr", null,
-                    React.createElement("th", null, "color"),
-                    React.createElement("th", null, "source"),
-                    React.createElement("th", null, "score"))),
-            React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => (React.createElement("tr", { key: source },
-                React.createElement("td", { style: { background: obj[source].color } }, " "),
-                React.createElement("td", null, source),
-                React.createElement("td", null, toP(data.score)))))))) : (React.createElement("span", null,
-            source,
-            ' ',
-            summary
-                ? `min:${toP(feature.get('minScore'))} avg:${toP(feature.get('score'))} max:${toP(feature.get('maxScore'))}`
-                : toP(feature.get('score'))))));
+    return (_jsxs("div", { ref: ref, children: [[refName, coord].filter(f => !!f).join(':'), _jsx("br", {}), sources ? (_jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "color" }), _jsx("th", { children: "source" }), _jsx("th", { children: "score" })] }) }), _jsx("tbody", { children: Object.entries(sources).map(([source, data]) => (_jsxs("tr", { children: [_jsx("td", { style: { background: obj[source].color }, children: " " }), _jsx("td", { children: source }), _jsx("td", { children: toP(data.score) })] }, source))) })] })) : (_jsxs("span", { children: [source, ' ', summary
+                        ? `min:${toP(feature.get('minScore'))} avg:${toP(feature.get('score'))} max:${toP(feature.get('maxScore'))}`
+                        : toP(feature.get('score'))] }))] }));
 });
 const WiggleTooltip = observer((props) => {
-    return React.createElement(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
+    return _jsx(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
 });
 export default WiggleTooltip;
 export { default as Tooltip } from '../../Tooltip';

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts

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

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -1,11 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
 import YScaleBars from './YScaleBars';
 const MultiLinearWiggleDisplayComponent = observer(function (props) {
     const { model } = props;
-    return (React.createElement("div", null,
-        React.createElement(BaseLinearDisplayComponent, { ...props }),
-        React.createElement(YScaleBars, { model: model })));
+    return (_jsxs("div", { children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(YScaleBars, { model: model })] }));
 });
 export default MultiLinearWiggleDisplayComponent;

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.d.ts

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

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.js

@@ -1,42 +1,22 @@
-import React from 'react';
-import { getContainingView, measureText } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import ColorLegend from './ColorLegend';
-import ScoreLegend from './ScoreLegend';
-import { getOffset } from './util';
-import YScaleBar from '../../shared/YScaleBar';
+import FullHeightScaleBar from './FullHeightScaleBar';
+import IndividualScaleBars from './IndividualScaleBars';
 const Wrapper = observer(function ({ children, model, exportSVG, }) {
     const { height } = model;
-    return exportSVG ? (children) : (React.createElement("svg", { style: {
+    return exportSVG ? (children) : (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
             pointerEvents: 'none',
             height,
             width: getContainingView(model).width,
-        } }, children));
+        }, children: children }));
 });
 export const YScaleBars = observer(function (props) {
     const { model, orientation, exportSVG } = props;
-    const { stats, needsCustomLegend, needsFullHeightScalebar, rowHeightTooSmallForScalebar, rowHeight, sources, ticks, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
-    const { width: viewWidth } = getContainingView(model);
-    const minWidth = 20;
-    const ready = stats && sources;
-    if (!ready) {
-        return null;
-    }
-    const labelWidth = Math.max(...sources
-        .map(s => measureText(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)));
-    return (React.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (React.createElement(React.Fragment, null,
-        React.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })),
-        React.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
-            React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (React.createElement(React.Fragment, null,
-        React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
-        rowHeightTooSmallForScalebar || needsCustomLegend ? (React.createElement(ScoreLegend, { ...props })) : (sources.map((_source, idx) => (React.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })))))))));
+    const { stats, needsFullHeightScalebar, sources } = model;
+    return stats && sources ? (_jsx(Wrapper, { ...props, children: needsFullHeightScalebar ? (_jsx(FullHeightScaleBar, { model: model, orientation: orientation, exportSVG: exportSVG })) : (_jsx(IndividualScaleBars, { model: model, orientation: orientation, exportSVG: exportSVG })) })) : null;
 });
 export default YScaleBars;

package/esm/MultiLinearWiggleDisplay/model.d.ts

@@ -4,7 +4,7 @@ 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(_pluginManager: PluginManager, 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>>;
@@ -39,7 +39,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;
@@ -192,13 +192,13 @@ 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;
 } & {
-    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;
@@ -225,7 +225,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;
 } & {
     message: undefined | string;
@@ -366,6 +366,9 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     readonly colors: string[];
     readonly quantitativeStatsRelevantToCurrentZoom: boolean;
 } & {
+    readonly legendFontSize: number;
+    readonly canDisplayLegendLabels: boolean;
+    readonly labelWidth: number;
     renderProps(): any;
     readonly hasResolution: boolean;
     readonly hasGlobalStats: boolean;
@@ -417,7 +420,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     })[];
 } & {
     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 WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/esm/MultiLinearWiggleDisplay/model.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { set1 as colors } from '@jbrowse/core/ui/colors';
-import { getContainingView, getSession } from '@jbrowse/core/util';
+import { getContainingView, getSession, max, measureText, } from '@jbrowse/core/util';
 import { stopStopToken } from '@jbrowse/core/util/stopToken';
 import deepEqual from 'fast-deep-equal';
 import { isAlive, types } from 'mobx-state-tree';
@@ -18,7 +18,7 @@ const rendererTypes = new Map([
     ['multiline', 'MultiLineRenderer'],
     ['multirowline', 'MultiRowLineRenderer'],
 ]);
-export function stateModelFactory(pluginManager, configSchema) {
+export function stateModelFactory(_pluginManager, configSchema) {
     return types
         .compose('MultiLinearWiggleDisplay', SharedWiggleMixin(configSchema), types.model({
         type: types.literal('MultiLinearWiggleDisplay'),
@@ -178,6 +178,18 @@ export function stateModelFactory(pluginManager, configSchema) {
         };
     })
         .views(self => ({
+        get legendFontSize() {
+            return Math.min(self.rowHeight, 12);
+        },
+        get canDisplayLegendLabels() {
+            return self.rowHeight > 11;
+        },
+        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))) ||
+                []);
+        },
         renderProps() {
             const superProps = self.adapterProps();
             return {

package/esm/MultiLinearWiggleDisplay/renderSvg.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { WiggleDisplayModel } from './model';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
-export declare function renderSvg(self: WiggleDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<React.JSX.Element>;
+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,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 YScaleBars from './components/YScaleBars';
 export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.stats && !!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(YScaleBars, { 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(YScaleBars, { model: self, orientation: "left", exportSVG: true }) })] }));
 }

package/esm/MultiLinearWiggleDisplay/util.d.ts

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

package/esm/MultiLinearWiggleDisplay/util.js

@@ -0,0 +1,7 @@
+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%)`;
+}

package/esm/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -1,6 +1,5 @@
 import { groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import { drawLine } from '../drawLine';
 export default class MultiRowLineRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
@@ -8,6 +7,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
         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();
         sources.forEach(source => {

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -1,6 +1,5 @@
 import { groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import { drawXY } from '../drawXY';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
@@ -8,6 +7,7 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
         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();
         sources.forEach(source => {

package/esm/MultiWiggleAddTrackWorkflow/AddTrackWorkflow.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { AddTrackModel } from '@jbrowse/plugin-data-management';
-export default function MultiWiggleWidget({ model }: {
+declare const MultiWiggleAddTrackWorkflow: ({ model, }: {
     model: AddTrackModel;
-}): React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiWiggleAddTrackWorkflow;