@jbrowse/plugin-wiggle 3.1.0 → 3.2.0

package/dist/BigWigAdapter/BigWigAdapter.js

@@ -42,7 +42,7 @@ class BigWigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
     }
     getFeatures(region, opts = {}) {
         const { refName, start, end } = region;
-        const { bpPerPx = 0, stopToken, resolution = 1, statusCallback = () => { }, } = opts;
+        const { bpPerPx = 0, resolution = 1, stopToken, statusCallback = () => { }, } = opts;
         return (0, rxjs_1.ObservableCreate)(async (observer) => {
             const source = this.getConf('source');
             const resolutionMultiplier = this.getConf('resolutionMultiplier');

package/dist/LinearWiggleDisplay/model.d.ts

@@ -258,11 +258,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     setCrossHatches(cross: boolean): void;
 } & {
     readonly adapterTypeName: any;
-    readonly rendererTypeNameSimple: any;
+    readonly rendererTypeNameSimple: string;
     readonly filters: undefined;
-    readonly scaleType: any;
-    readonly maxScore: any;
-    readonly minScore: any;
+    readonly scaleType: string;
+    readonly maxScore: number;
+    readonly minScore: number;
 } & {
     readonly adapterCapabilities: string[];
     readonly rendererConfig: {
@@ -276,7 +276,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-    readonly autoscaleType: any;
+    readonly autoscaleType: string;
 } & {
     readonly domain: number[] | undefined;
 } & {
@@ -289,9 +289,9 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             scoreMin: number;
             scoreMax: number;
         } | undefined;
-        autoscaleType: any;
-        scaleType: any;
-        inverted: any;
+        autoscaleType: string;
+        scaleType: string;
+        inverted: boolean;
     };
     readonly canHaveFill: boolean;
     readonly displayCrossHatchesSetting: boolean;
@@ -328,7 +328,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     readonly rendererTypeName: string;
     readonly quantitativeStatsRelevantToCurrentZoom: boolean;
     readonly graphType: boolean;
-    readonly inverted: any;
+    readonly inverted: boolean;
 } & {
     adapterProps(): any;
     readonly ticks: {
@@ -374,7 +374,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     } | {
         label: string;
         type: string;
-        checked: any;
+        checked: boolean;
         onClick: () => void;
         icon?: undefined;
         subMenu?: undefined;

package/dist/MultiDensityRenderer/MultiDensityRenderer.js

@@ -40,13 +40,13 @@ const util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiDensityPlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { sources, features } = props;
+        const { stopToken, sources, features } = props;
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         let feats = [];
         const { drawDensity } = await Promise.resolve().then(() => __importStar(require('../drawDensity')));
         ctx.save();
-        sources.forEach(source => {
+        (0, util_1.forEachWithStopTokenCheck)(sources, stopToken, source => {
             const features = groups[source.name] || [];
             const { reducedFeatures } = drawDensity(ctx, {
                 ...props,

package/dist/MultiLineRenderer/MultiLineRenderer.js

@@ -40,11 +40,11 @@ const util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiLineRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { sources, features } = props;
+        const { stopToken, sources, features } = props;
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const { drawLine } = await Promise.resolve().then(() => __importStar(require('../drawLine')));
         let feats = [];
-        sources.forEach(source => {
+        (0, util_1.forEachWithStopTokenCheck)(sources, stopToken, source => {
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
                 features: groups[source.name] || [],

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialog.d.ts

@@ -0,0 +1,6 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialog: ({ model, handleClose, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialog;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialog.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const ClusterDialogAuto_1 = __importDefault(require("./ClusterDialogAuto"));
+const ClusterDialogManual_1 = __importDefault(require("./ClusterDialogManual"));
+function Header({ activeMode, setActiveMode, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                auto: ((0, jsx_runtime_1.jsx)("div", { children: "Run in-app clustering (slow for large data, built in JS clustering)" })),
+                manual: ((0, jsx_runtime_1.jsx)("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+            }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: activeMode === key, onChange: () => {
+                        setActiveMode(key);
+                    } }), label: val }, key))) }) }));
+}
+const ClusterDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const [activeMode, setActiveMode] = (0, react_1.useState)('auto');
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, title: "Cluster by score", maxWidth: "xl", onClose: (_, reason) => {
+            if (reason !== 'backdropClick') {
+                handleClose();
+            }
+        }, children: activeMode === 'auto' ? ((0, jsx_runtime_1.jsx)(ClusterDialogAuto_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) : ((0, jsx_runtime_1.jsx)(ClusterDialogManual_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) }));
+});
+exports.default = ClusterDialog;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogAuto.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogAuto: ({ model, children, handleClose, }: {
+    model: ReducedModel;
+    children: React.ReactNode;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogAuto;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogAuto.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children, handleClose, }) {
+    const [progress, setProgress] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    const [stopToken, setStopToken] = (0, react_1.useState)('');
+    const [showAdvanced, setShowAdvanced] = (0, react_1.useState)(false);
+    const [samplesPerPixel, setSamplesPerPixel] = (0, util_1.useLocalStorage)('cluster-samplesPerPixel', '1');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 50 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                    setShowAdvanced(!showAdvanced);
+                                }, children: showAdvanced ? 'Hide advanced options' : 'Show advanced options' }), showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 20 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "This procedure samples the data at each 'pixel' across the visible by default" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Samples per pixel (>1 for denser sampling, between 0-1 for sparser sampling)", variant: "outlined", size: "small", value: samplesPerPixel, onChange: event => {
+                                            setSamplesPerPixel(event.target.value);
+                                        } })] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [progress ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { width: 400 }, children: ["Progress: ", progress] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                                            (0, stopToken_1.stopStopToken)(stopToken);
+                                        }, children: "Stop" })] })) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: async () => {
+                            try {
+                                setError(undefined);
+                                setProgress('');
+                                const view = (0, util_1.getContainingView)(model);
+                                if (!view.initialized) {
+                                    return;
+                                }
+                                const { rpcManager } = (0, util_1.getSession)(model);
+                                const { sourcesWithoutLayout, adapterConfig } = model;
+                                if (sourcesWithoutLayout) {
+                                    const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                                    const stopToken = (0, stopToken_1.createStopToken)();
+                                    setStopToken(stopToken);
+                                    const ret = (await rpcManager.call(sessionId, 'MultiWiggleClusterScoreMatrix', {
+                                        regions: view.dynamicBlocks.contentBlocks,
+                                        sources: sourcesWithoutLayout,
+                                        sessionId,
+                                        adapterConfig,
+                                        stopToken,
+                                        bpPerPx: view.bpPerPx / +samplesPerPixel,
+                                        statusCallback: (arg) => {
+                                            setProgress(arg);
+                                        },
+                                    }));
+                                    model.setLayout(ret.order.map(idx => {
+                                        const ret = sourcesWithoutLayout[idx];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                handleClose();
+                            }
+                            catch (e) {
+                                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            finally {
+                                setProgress('');
+                                setStopToken('');
+                            }
+                        }, children: "Run clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                            if (stopToken) {
+                                (0, stopToken_1.stopStopToken)(stopToken);
+                            }
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogAuto;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogManual.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogManuals: ({ model, handleClose, children, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogManuals;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogManual.js

@@ -0,0 +1,155 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+const material_1 = require("@mui/material");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handleClose, children, }) {
+    const { classes } = useStyles();
+    const [paste, setPaste] = (0, react_1.useState)('');
+    const [ret, setRet] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [showAdvanced, setShowAdvanced] = (0, react_1.useState)(false);
+    const [clusterMethod, setClusterMethod] = (0, util_1.useLocalStorage)('cluster-clusterMethod', 'single');
+    const [samplesPerPixel, setSamplesPerPixel] = (0, util_1.useLocalStorage)('cluster-samplesPerPixel', '1');
+    (0, react_1.useEffect)(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                setRet(undefined);
+                setLoading(true);
+                const view = (0, util_1.getContainingView)(model);
+                const { dynamicBlocks, bpPerPx } = view;
+                const { rpcManager } = (0, util_1.getSession)(model);
+                const { sourcesWithoutLayout, adapterConfig } = model;
+                const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiWiggleGetScoreMatrix', {
+                    regions: dynamicBlocks.contentBlocks,
+                    sources: sourcesWithoutLayout,
+                    sessionId,
+                    adapterConfig,
+                    bpPerPx: bpPerPx / +samplesPerPixel,
+                }));
+                setRet(ret);
+            }
+            catch (e) {
+                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model, samplesPerPixel]);
+    const results = ret
+        ? `inputMatrix<-matrix(c(${Object.values(ret)
+            .map(val => val.join(','))
+            .join(',\n')}
+),nrow=${Object.values(ret).length},byrow=TRUE)
+rownames(inputMatrix)<-c(${Object.keys(ret)
+            .map(key => `'${key}'`)
+            .join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
+cat(resultClusters$order,sep='\\n')`
+        : undefined;
+    const resultsTsv = ret
+        ? Object.entries(ret)
+            .map(([key, val]) => [key, ...val].join('\t'))
+            .join('\n')
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 50 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    gap: '8px',
+                                    flexWrap: 'wrap',
+                                    marginBottom: '16px',
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                            (0, file_saver_1.saveAs)(new Blob([results || ''], {
+                                                type: 'text/plain;charset=utf-8',
+                                            }), 'cluster.R');
+                                        }, children: "Download Rscript" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                            (0, copy_to_clipboard_1.default)(results || '');
+                                        }, children: "Copy Rscript to clipboard" }), ' ', (0, jsx_runtime_1.jsx)("div", { style: { float: 'right' }, children: (0, jsx_runtime_1.jsx)(ui_1.CascadingMenuButton, { menuItems: [
+                                                {
+                                                    label: 'Download TSV',
+                                                    onClick: () => {
+                                                        (0, file_saver_1.saveAs)(new Blob([resultsTsv || ''], {
+                                                            type: 'text/plain;charset=utf-8',
+                                                        }), 'scores.tsv');
+                                                    },
+                                                },
+                                                {
+                                                    label: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options',
+                                                    onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    },
+                                                },
+                                            ], children: (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }) }), (0, jsx_runtime_1.jsx)("div", { children: showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Advanced options" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                                                        single: 'Single',
+                                                        complete: 'Complete',
+                                                    }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
+                                                                setClusterMethod(key);
+                                                            } }), label: val }, key))) }), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 20 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "This procedure samples the data at each 'pixel' across the visible by default" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Samples per pixel (>1 for denser sampling, between 0-1 for sparser sampling)", variant: "outlined", size: "small", value: samplesPerPixel, onChange: event => {
+                                                                setSamplesPerPixel(event.target.value);
+                                                            } })] })] })) : null }), results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating score matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+                                            setPaste(event.target.value);
+                                        }, slotProps: {
+                                            input: {
+                                                classes: {
+                                                    input: classes.textAreaFont,
+                                                },
+                                            },
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                            const { sourcesWithoutLayout } = model;
+                            if (sourcesWithoutLayout) {
+                                try {
+                                    model.setLayout(paste
+                                        .split('\n')
+                                        .map(t => t.trim())
+                                        .filter(f => !!f)
+                                        .map(r => +r)
+                                        .map(idx => {
+                                        const ret = sourcesWithoutLayout[idx - 1];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogManuals;

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/types.d.ts

@@ -0,0 +1,7 @@
+import type { Source } from '../../types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export interface ReducedModel {
+    sourcesWithoutLayout?: Source[];
+    adapterConfig: AnyConfigurationModel;
+    setLayout: (arg: Source[]) => void;
+}

package/dist/MultiLinearWiggleDisplay/components/ClusterDialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -78,12 +78,12 @@ function SourcesGrid({ rows, onChange, showTips, }) {
                     onChange((0, util_2.moveDown)([...rows], selected, rows.length));
                 }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowDown_1.default, {}), showTips ? 'Move selected items to bottom' : null] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
                     setWidgetColor(c);
-                    selected.forEach(id => {
+                    for (const id of selected) {
                         const elt = rows.find(f => f.name === id);
                         if (elt) {
                             elt.color = c;
                         }
-                    });
+                    }
                     onChange([...rows]);
                 }, onClose: () => {
                     setAnchorEl(null);

package/dist/MultiLinearWiggleDisplay/model.d.ts

@@ -259,11 +259,11 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
     setCrossHatches(cross: boolean): void;
 } & {
     readonly adapterTypeName: any;
-    readonly rendererTypeNameSimple: any;
+    readonly rendererTypeNameSimple: string;
     readonly filters: undefined;
-    readonly scaleType: any;
-    readonly maxScore: any;
-    readonly minScore: any;
+    readonly scaleType: string;
+    readonly maxScore: number;
+    readonly minScore: number;
 } & {
     readonly adapterCapabilities: string[];
     readonly rendererConfig: {
@@ -277,7 +277,7 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-    readonly autoscaleType: any;
+    readonly autoscaleType: string;
 } & {
     readonly domain: number[] | undefined;
 } & {
@@ -290,9 +290,9 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
             scoreMin: number;
             scoreMax: number;
         } | undefined;
-        autoscaleType: any;
-        scaleType: any;
-        inverted: any;
+        autoscaleType: string;
+        scaleType: string;
+        inverted: boolean;
     };
     readonly canHaveFill: boolean;
     readonly displayCrossHatchesSetting: boolean;
@@ -344,6 +344,12 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
     readonly canHaveFill: boolean;
     readonly renderColorBoxes: boolean;
     readonly prefersOffset: boolean;
+    readonly sourcesWithoutLayout: {
+        color: string;
+        baseUri?: string;
+        name: string;
+        group?: string;
+    }[] | undefined;
     readonly sources: {
         color: string;
         baseUri?: string;
@@ -354,7 +360,7 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
 } & {
     readonly rowHeight: number;
     readonly rowHeightTooSmallForScalebar: boolean;
-    readonly useMinimalTicks: any;
+    readonly useMinimalTicks: boolean;
 } & {
     adapterProps(): any;
     readonly ticks: {

package/dist/MultiLinearWiggleDisplay/model.js

@@ -50,7 +50,7 @@ const util_2 = require("../util");
 const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
 const Tooltip = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/Tooltip'))));
 const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetColorDialog'))));
-const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ClusterDialog'))));
+const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ClusterDialog/ClusterDialog'))));
 const rendererTypes = new Map([
     ['xyplot', 'MultiXYPlotRenderer'],
     ['multirowxy', 'MultiRowXYPlotRenderer'],
@@ -137,6 +137,19 @@ function stateModelFactory(_pluginManager, configSchema) {
         get prefersOffset() {
             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 iter = self.sourcesVolatile;
+            return iter === null || iter === void 0 ? void 0 : iter.map(s => ({
+                ...sources[s.name],
+                ...s,
+            })).map((s, i) => ({
+                ...s,
+                color: s.color ||
+                    (!this.isMultiRow ? colors_1.set1[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])) || []);
@@ -164,7 +177,8 @@ function stateModelFactory(_pluginManager, configSchema) {
             return this.rowHeight < 70;
         },
         get useMinimalTicks() {
-            return ((0, configuration_1.getConf)(self, 'minimalTicks') || this.rowHeightTooSmallForScalebar);
+            return ((0, configuration_1.getConf)(self, 'minimalTicks') ||
+                this.rowHeightTooSmallForScalebar);
         },
     }))
         .views(self => {
@@ -294,18 +308,6 @@ function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
-                    ...(self.graphType
-                        ? [
-                            {
-                                type: 'checkbox',
-                                label: 'Draw cross hatches',
-                                checked: self.displayCrossHatchesSetting,
-                                onClick: () => {
-                                    self.toggleCrossHatches();
-                                },
-                            },
-                        ]
-                        : []),
                     ...(hasRenderings
                         ? [
                             {
@@ -327,6 +329,18 @@ function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
+                    ...(self.graphType
+                        ? [
+                            {
+                                type: 'checkbox',
+                                label: 'Draw cross hatches',
+                                checked: self.displayCrossHatchesSetting,
+                                onClick: () => {
+                                    self.toggleCrossHatches();
+                                },
+                            },
+                        ]
+                        : []),
                     {
                         label: 'Cluster by score',
                         onClick: () => {

package/dist/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -40,7 +40,7 @@ const util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { bpPerPx, sources, regions, features } = props;
+        const { stopToken, bpPerPx, sources, regions, features } = props;
         const region = regions[0];
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
@@ -48,7 +48,7 @@ class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
         const { drawLine } = await Promise.resolve().then(() => __importStar(require('../drawLine')));
         let feats = [];
         ctx.save();
-        sources.forEach(source => {
+        (0, util_1.forEachWithStopTokenCheck)(sources, stopToken, source => {
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
                 features: groups[source.name] || [],

package/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -40,7 +40,7 @@ const util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { bpPerPx, sources, regions, features } = props;
+        const { stopToken, bpPerPx, sources, regions, features } = props;
         const region = regions[0];
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
@@ -48,7 +48,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
         const { drawXY } = await Promise.resolve().then(() => __importStar(require('../drawXY')));
         let feats = [];
         ctx.save();
-        sources.forEach(source => {
+        (0, util_1.forEachWithStopTokenCheck)(sources, stopToken, source => {
             const { reducedFeatures } = drawXY(ctx, {
                 ...props,
                 features: groups[source.name] || [],

package/dist/MultiXYPlotRenderer/MultiXYPlotRenderer.js

@@ -41,11 +41,11 @@ const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 const util_2 = require("../util");
 class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { sources, features } = props;
+        const { stopToken, sources, features } = props;
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const { drawXY } = await Promise.resolve().then(() => __importStar(require('../drawXY')));
         let feats = [];
-        for (const source of sources) {
+        (0, util_1.forEachWithStopTokenCheck)(sources, stopToken, source => {
             const features = groups[source.name] || [];
             const { reducedFeatures } = drawXY(ctx, {
                 ...props,
@@ -54,7 +54,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
                 colorCallback: () => source.color || 'blue',
             });
             feats = feats.concat(reducedFeatures);
-        }
+        });
         return { reducedFeatures: feats };
     }
 }

package/dist/WiggleBaseRenderer.d.ts

@@ -17,6 +17,7 @@ export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
     };
     inverted: boolean;
     themeOptions: ThemeOptions;
+    statusCallback?: (arg: string) => void;
 }
 export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
     features: Map<string, Feature>;

package/dist/WiggleBaseRenderer.js

@@ -12,14 +12,14 @@ class WiggleBaseRenderer extends FeatureRendererType_1.default {
     }
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
-        const { inverted, height, regions, bpPerPx } = renderProps;
+        const { inverted, height, regions, bpPerPx, statusCallback = () => { }, } = renderProps;
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
-        const { reducedFeatures, ...rest } = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => this.draw(ctx, {
+        const { reducedFeatures, ...rest } = await (0, util_1.updateStatus)('Rendering plot', statusCallback, () => (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => this.draw(ctx, {
             ...renderProps,
             features,
             inverted,
-        }));
+        })));
         const results = await super.render({
             ...renderProps,
             ...rest,