@jbrowse/plugin-wiggle 3.0.5 → 3.2.0

package/esm/BigWigAdapter/configSchema.js

@@ -18,5 +18,18 @@ const BigWigAdapter = ConfigurationSchema('BigWigAdapter', {
         defaultValue: 1,
         description: 'Initial resolution multiplier',
     },
-}, { explicitlyTyped: true });
+}, {
+    explicitlyTyped: true,
+    preProcessSnapshot: snap => {
+        return snap.uri
+            ? {
+                ...snap,
+                bigWigLocation: {
+                    uri: snap.uri,
+                    baseUri: snap.baseUri,
+                },
+            }
+            : snap;
+    },
+});
 export default BigWigAdapter;

package/esm/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/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -1,14 +1,14 @@
-import { groupBy } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiDensityPlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
-        const { sources, features } = props;
+        const { stopToken, sources, features } = props;
         const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         let feats = [];
         const { drawDensity } = await import('../drawDensity');
         ctx.save();
-        sources.forEach(source => {
+        forEachWithStopTokenCheck(sources, stopToken, source => {
             const features = groups[source.name] || [];
             const { reducedFeatures } = drawDensity(ctx, {
                 ...props,

package/esm/MultiLineRenderer/MultiLineRenderer.js

@@ -1,12 +1,12 @@
-import { groupBy } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiLineRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
-        const { sources, features } = props;
+        const { stopToken, sources, features } = props;
         const groups = groupBy(features.values(), f => f.get('source'));
         const { drawLine } = await import('../drawLine');
         let feats = [];
-        sources.forEach(source => {
+        forEachWithStopTokenCheck(sources, stopToken, source => {
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
                 features: groups[source.name] || [],

package/esm/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/esm/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import ClusterDialogAuto from './ClusterDialogAuto';
+import ClusterDialogManual from './ClusterDialogManual';
+function Header({ activeMode, setActiveMode, }) {
+    return (_jsx("div", { children: _jsx(RadioGroup, { children: Object.entries({
+                auto: (_jsx("div", { children: "Run in-app clustering (slow for large data, built in JS clustering)" })),
+                manual: (_jsx("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+            }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: activeMode === key, onChange: () => {
+                        setActiveMode(key);
+                    } }), label: val }, key))) }) }));
+}
+const ClusterDialog = observer(function ({ model, handleClose, }) {
+    const [activeMode, setActiveMode] = useState('auto');
+    return (_jsx(Dialog, { open: true, title: "Cluster by score", maxWidth: "xl", onClose: (_, reason) => {
+            if (reason !== 'backdropClick') {
+                handleClose();
+            }
+        }, children: activeMode === 'auto' ? (_jsx(ClusterDialogAuto, { model: model, handleClose: handleClose, children: _jsx(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) : (_jsx(ClusterDialogManual, { model: model, handleClose: handleClose, children: _jsx(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) }));
+});
+export default ClusterDialog;

package/esm/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/esm/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogAuto.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { getContainingView, getSession, isAbortException, useLocalStorage, } from '@jbrowse/core/util';
+import { createStopToken, stopStopToken } from '@jbrowse/core/util/stopToken';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { isAlive } from 'mobx-state-tree';
+const ClusterDialogAuto = observer(function ({ model, children, handleClose, }) {
+    const [progress, setProgress] = useState('');
+    const [error, setError] = useState();
+    const [stopToken, setStopToken] = useState('');
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const [samplesPerPixel, setSamplesPerPixel] = useLocalStorage('cluster-samplesPerPixel', '1');
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs("div", { style: { marginTop: 50 }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                    setShowAdvanced(!showAdvanced);
+                                }, children: showAdvanced ? 'Hide advanced options' : 'Show advanced options' }), showAdvanced ? (_jsxs("div", { style: { marginTop: 20 }, children: [_jsx(Typography, { children: "This procedure samples the data at each 'pixel' across the visible by default" }), _jsx(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] }), _jsxs("div", { children: [progress ? (_jsxs("div", { style: { padding: 50 }, children: [_jsxs("span", { style: { width: 400 }, children: ["Progress: ", progress] }), _jsx(Button, { onClick: () => {
+                                            stopStopToken(stopToken);
+                                        }, children: "Stop" })] })) : null, error ? _jsx(ErrorMessage, { error: error }) : null] })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: async () => {
+                            try {
+                                setError(undefined);
+                                setProgress('');
+                                const view = getContainingView(model);
+                                if (!view.initialized) {
+                                    return;
+                                }
+                                const { rpcManager } = getSession(model);
+                                const { sourcesWithoutLayout, adapterConfig } = model;
+                                if (sourcesWithoutLayout) {
+                                    const sessionId = getRpcSessionId(model);
+                                    const stopToken = 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 (!isAbortException(e) && isAlive(model)) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            finally {
+                                setProgress('');
+                                setStopToken('');
+                            }
+                        }, children: "Run clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                            if (stopToken) {
+                                stopStopToken(stopToken);
+                            }
+                        }, children: "Cancel" })] })] }));
+});
+export default ClusterDialogAuto;

package/esm/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/esm/MultiLinearWiggleDisplay/components/ClusterDialog/ClusterDialogManual.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CascadingMenuButton, ErrorMessage, LoadingEllipses, } from '@jbrowse/core/ui';
+import { getContainingView, getSession, isAbortException, useLocalStorage, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import MenuIcon from '@mui/icons-material/Menu';
+import { Button, DialogActions, DialogContent, FormControlLabel, Radio, RadioGroup, TextField, Typography, } from '@mui/material';
+import copy from 'copy-to-clipboard';
+import { saveAs } from 'file-saver';
+import { observer } from 'mobx-react';
+import { isAlive } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+const ClusterDialogManuals = observer(function ({ model, handleClose, children, }) {
+    const { classes } = useStyles();
+    const [paste, setPaste] = useState('');
+    const [ret, setRet] = useState();
+    const [error, setError] = useState();
+    const [loading, setLoading] = useState(false);
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const [clusterMethod, setClusterMethod] = useLocalStorage('cluster-clusterMethod', 'single');
+    const [samplesPerPixel, setSamplesPerPixel] = useLocalStorage('cluster-samplesPerPixel', '1');
+    useEffect(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                setRet(undefined);
+                setLoading(true);
+                const view = getContainingView(model);
+                const { dynamicBlocks, bpPerPx } = view;
+                const { rpcManager } = getSession(model);
+                const { sourcesWithoutLayout, adapterConfig } = model;
+                const sessionId = getRpcSessionId(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiWiggleGetScoreMatrix', {
+                    regions: dynamicBlocks.contentBlocks,
+                    sources: sourcesWithoutLayout,
+                    sessionId,
+                    adapterConfig,
+                    bpPerPx: bpPerPx / +samplesPerPixel,
+                }));
+                setRet(ret);
+            }
+            catch (e) {
+                if (!isAbortException(e) && 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 (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { children: [children, _jsxs("div", { style: { marginTop: 50 }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    gap: '8px',
+                                    flexWrap: 'wrap',
+                                    marginBottom: '16px',
+                                }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                            saveAs(new Blob([results || ''], {
+                                                type: 'text/plain;charset=utf-8',
+                                            }), 'cluster.R');
+                                        }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                            copy(results || '');
+                                        }, children: "Copy Rscript to clipboard" }), ' ', _jsx("div", { style: { float: 'right' }, children: _jsx(CascadingMenuButton, { menuItems: [
+                                                {
+                                                    label: 'Download TSV',
+                                                    onClick: () => {
+                                                        saveAs(new Blob([resultsTsv || ''], {
+                                                            type: 'text/plain;charset=utf-8',
+                                                        }), 'scores.tsv');
+                                                    },
+                                                },
+                                                {
+                                                    label: showAdvanced
+                                                        ? 'Hide advanced options'
+                                                        : 'Show advanced options',
+                                                    onClick: () => {
+                                                        setShowAdvanced(!showAdvanced);
+                                                    },
+                                                },
+                                            ], children: _jsx(MenuIcon, {}) }) }), _jsx("div", { children: showAdvanced ? (_jsxs("div", { children: [_jsx(Typography, { variant: "h6", children: "Advanced options" }), _jsx(RadioGroup, { children: Object.entries({
+                                                        single: 'Single',
+                                                        complete: 'Complete',
+                                                    }).map(([key, val]) => (_jsx(FormControlLabel, { control: _jsx(Radio, { checked: clusterMethod === key, onChange: () => {
+                                                                setClusterMethod(key);
+                                                            } }), label: val }, key))) }), _jsxs("div", { style: { marginTop: 20 }, children: [_jsx(Typography, { children: "This procedure samples the data at each 'pixel' across the visible by default" }), _jsx(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 ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", title: "Generating score matrix" })) : error ? (_jsx(ErrorMessage, { error: error })) : null] }), _jsxs("div", { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), _jsx(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,
+                                                },
+                                            },
+                                        } })] })] })] }), _jsxs(DialogActions, { children: [_jsx(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);
+                                    getSession(model).notifyError(`${e}`, e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+export default ClusterDialogManuals;

package/esm/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/esm/MultiLinearWiggleDisplay/components/ClusterDialog/types.js

@@ -0,0 +1 @@
+export {};

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -40,12 +40,12 @@ function SourcesGrid({ rows, onChange, showTips, }) {
                     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 => {
+                    for (const id of selected) {
                         const elt = rows.find(f => f.name === id);
                         if (elt) {
                             elt.color = c;
                         }
-                    });
+                    }
                     onChange([...rows]);
                 }, onClose: () => {
                     setAnchorEl(null);

package/esm/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/esm/MultiLinearWiggleDisplay/model.js

@@ -11,6 +11,7 @@ import { YSCALEBAR_LABEL_OFFSET, getScale } from '../util';
 const randomColor = () => '#000000'.replaceAll('0', () => (~~(Math.random() * 16)).toString(16));
 const Tooltip = lazy(() => import('./components/Tooltip'));
 const SetColorDialog = lazy(() => import('./components/SetColorDialog'));
+const ClusterDialog = lazy(() => import('./components/ClusterDialog/ClusterDialog'));
 const rendererTypes = new Map([
     ['xyplot', 'MultiXYPlotRenderer'],
     ['multirowxy', 'MultiRowXYPlotRenderer'],
@@ -97,6 +98,19 @@ export 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[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])) || []);
@@ -124,7 +138,8 @@ export function stateModelFactory(_pluginManager, configSchema) {
             return this.rowHeight < 70;
         },
         get useMinimalTicks() {
-            return (getConf(self, 'minimalTicks') || this.rowHeightTooSmallForScalebar);
+            return (getConf(self, 'minimalTicks') ||
+                this.rowHeightTooSmallForScalebar);
         },
     }))
         .views(self => {
@@ -254,18 +269,6 @@ export function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
-                    ...(self.graphType
-                        ? [
-                            {
-                                type: 'checkbox',
-                                label: 'Draw cross hatches',
-                                checked: self.displayCrossHatchesSetting,
-                                onClick: () => {
-                                    self.toggleCrossHatches();
-                                },
-                            },
-                        ]
-                        : []),
                     ...(hasRenderings
                         ? [
                             {
@@ -287,12 +290,39 @@ export function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
+                    ...(self.graphType
+                        ? [
+                            {
+                                type: 'checkbox',
+                                label: 'Draw cross hatches',
+                                checked: self.displayCrossHatchesSetting,
+                                onClick: () => {
+                                    self.toggleCrossHatches();
+                                },
+                            },
+                        ]
+                        : []),
+                    {
+                        label: 'Cluster by score',
+                        onClick: () => {
+                            getSession(self).queueDialog(handleClose => [
+                                ClusterDialog,
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
+                            ]);
+                        },
+                    },
                     {
                         label: 'Edit colors/arrangement...',
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 SetColorDialog,
-                                { model: self, handleClose },
+                                {
+                                    model: self,
+                                    handleClose,
+                                },
                             ]);
                         },
                     },

package/esm/MultiLinearWiggleDisplay/types.d.ts

@@ -0,0 +1,14 @@
+export interface Source {
+    baseUri?: string;
+    name: string;
+    label?: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+    id?: string;
+    [key: string]: unknown;
+}
+export interface SampleInfo {
+    isPhased: boolean;
+    maxPloidy: number;
+}

package/esm/MultiLinearWiggleDisplay/types.js

@@ -0,0 +1 @@
+export {};

package/esm/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -1,8 +1,8 @@
-import { groupBy } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiRowLineRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
-        const { bpPerPx, sources, regions, features } = 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;
@@ -10,7 +10,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
         const { drawLine } = await import('../drawLine');
         let feats = [];
         ctx.save();
-        sources.forEach(source => {
+        forEachWithStopTokenCheck(sources, stopToken, source => {
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
                 features: groups[source.name] || [],

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -1,8 +1,8 @@
-import { groupBy } from '@jbrowse/core/util';
+import { forEachWithStopTokenCheck, groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
-        const { bpPerPx, sources, regions, features } = 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;
@@ -10,7 +10,7 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
         const { drawXY } = await import('../drawXY');
         let feats = [];
         ctx.save();
-        sources.forEach(source => {
+        forEachWithStopTokenCheck(sources, stopToken, source => {
             const { reducedFeatures } = drawXY(ctx, {
                 ...props,
                 features: groups[source.name] || [],