@jbrowse/plugin-wiggle 3.6.5 → 4.0.0

package/esm/MultiLinearWiggleDisplay/components/LegendItemText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const LegendItemText = function ({ source, idx, rowHeight, model, exportSVG, textFillProps, }) {
+    const { graphType, rowHeightTooSmallForScalebar, renderColorBoxes } = model;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const canDisplayLabel = rowHeight >= 6;
+    const colorBoxWidth = renderColorBoxes ? 15 : 0;
+    const svgOffset = exportSVG ? 10 : 0;
+    const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
+    return canDisplayLabel ? (_jsx("text", { y: idx * rowHeight + svgFontSize, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, ...textFillProps, children: source.name })) : null;
+};
+export default LegendItemText;

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

@@ -1,4 +1,4 @@
-declare const RectBg: (props: {
+declare const RectBg: ({ x, y, width, height, color, }: {
     x: number;
     y: number;
     width: number;

package/esm/MultiLinearWiggleDisplay/components/RectBg.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
-const RectBg = (props) => {
-    const { color = 'rgb(255,255,255,0.8)' } = props;
-    return _jsx("rect", { ...props, ...getFillProps(color) });
+import { alpha, useTheme } from '@mui/material';
+const RectBg = ({ x, y, width, height, color, }) => {
+    const theme = useTheme();
+    return (_jsx("rect", { pointerEvents: "auto", x: x, y: y, width: width, height: height, ...getFillProps(color || alpha(theme.palette.background.paper, 0.3)) }));
 };
 export default RectBg;

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

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

package/esm/MultiLinearWiggleDisplay/components/ScoreLegend.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView, measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import RectBg from './RectBg';
-const ScoreLegend = observer(({ model }) => {
+import RectBg from "./RectBg.js";
+const ScoreLegend = observer(function ScoreLegend({ model, }) {
     const { ticks, scaleType } = model;
     const { width } = getContainingView(model);
-    const legend = `[${ticks === null || ticks === void 0 ? void 0 : ticks.values[0]}-${ticks === null || ticks === void 0 ? void 0 : ticks.values[1]}]${scaleType === 'log' ? ' (log scale)' : ''}`;
+    const legend = `[${ticks?.values[0]}-${ticks?.values[1]}]${scaleType === 'log' ? ' (log scale)' : ''}`;
     const len = measureText(legend, 14);
     const padding = 25;
     const xpos = width - len - padding;

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

@@ -1,4 +1,4 @@
-import type { Source } from '../../util';
+import type { Source } from '../../util.ts';
 export default function SetColorDialog({ model, handleClose, }: {
     model: {
         sources?: Source[];

package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -1,36 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
-import { useLocalStorage } from '@jbrowse/core/util';
-import { Button, DialogActions, DialogContent } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import SourcesGrid from './SourcesGrid';
-const useStyles = makeStyles()({
-    content: {
-        minWidth: 800,
-    },
-    float: {
-        float: 'right',
-    },
-});
-function HelpfulTips() {
-    return (_jsxs(_Fragment, { children: ["Helpful tips", _jsxs("ul", { children: [_jsx("li", { children: "You can select rows in the table with the checkboxes" }), _jsx("li", { children: "Multi-select is enabled with shift-click and control-click" }), _jsx("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), _jsx("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), _jsx("li", { children: "Changes are applied when you hit Submit" }), _jsx("li", { children: "You can click and drag the dialog box to move it on the screen" }), _jsx("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import SourcesGrid from "./SourcesGrid.js";
+import SharedSetColorDialog from "./ui/SetColorDialog.js";
 export default function SetColorDialog({ model, handleClose, }) {
-    const { classes } = useStyles();
-    const { sources } = model;
-    const [currLayout, setCurrLayout] = useState(structuredClone(sources || []));
-    const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', false);
-    return (_jsxs(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-wiggle color/arrangement editor", children: [_jsxs(DialogContent, { className: classes.content, children: [_jsx(Button, { variant: "contained", className: classes.float, onClick: () => {
-                            setShowTips(!showTips);
-                        }, children: showTips ? 'Hide tips' : 'Show tips' }), _jsx("br", {}), showTips ? _jsx(HelpfulTips, {}) : null, _jsx(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
-                            model.clearLayout();
-                            setCurrLayout(model.sources || []);
-                        }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                            setCurrLayout([...(model.sources || [])]);
-                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
-                            model.setLayout(currLayout);
-                            handleClose();
-                        }, children: "Submit" })] })] }));
+    return (_jsx(SharedSetColorDialog, { model: model, handleClose: handleClose, title: "Multi-wiggle color/arrangement editor", enableBulkEdit: true, enableRowPalettizer: true, showTipsStorageKey: "multiwiggle-showTips", SourcesGridComponent: SourcesGrid }));
 }

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

@@ -1,4 +1,4 @@
-import type { Source } from '../../util';
+import type { Source } from '../../util.ts';
 declare function SourcesGrid({ rows, onChange, showTips, }: {
     rows: Source[];
     onChange: (arg: Source[]) => void;

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -3,14 +3,14 @@ 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';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import { Button } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
-import { makeStyles } from 'tss-react/mui';
-import { moveDown, moveUp } from './util';
+import { moveDown, moveUp } from "./util.js";
 const useStyles = makeStyles()({
     cell: {
         whiteSpace: 'nowrap',
@@ -22,7 +22,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = useState(null);
     const [selected, setSelected] = useState([]);
-    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
+    const { name: _name, color: _color, source: _source, baseUri: _baseUri, ...rest } = rows.length > 0 ? rows[0] : {};
     const [widgetColor, setWidgetColor] = useState('blue');
     const [currSort, setCurrSort] = useState({
         idx: 0,

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

@@ -1,5 +1,5 @@
-import type { TooltipContentsComponent } from '../../Tooltip';
-import type { Source } from '../../util';
+import type { TooltipContentsComponent } from '../../Tooltip.tsx';
+import type { Source } from '../../util.ts';
 import type { Feature } from '@jbrowse/core/util';
 type Coord = [number, number];
 declare const WiggleTooltip: (props: {
@@ -11,8 +11,6 @@ declare const WiggleTooltip: (props: {
     height: number;
     offsetMouseCoord: Coord;
     clientMouseCoord: Coord;
-    clientRect?: DOMRect;
     TooltipContents?: TooltipContentsComponent;
 }) => import("react/jsx-runtime").JSX.Element;
 export default WiggleTooltip;
-export { default as Tooltip } from '../../Tooltip';

package/esm/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -1,28 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { toLocale } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import Tooltip from '../../Tooltip';
-import { toP } from '../../util';
-const en = (n) => n.toLocaleString('en-US');
+import Tooltip from "../../Tooltip.js";
+import { toP } from "../../util.js";
 const TooltipContents = forwardRef(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');
-    const coord = start === end ? en(start) : `${en(start)}..${en(end)}`;
+    const coord = start === end ? toLocale(start) : `${toLocale(start)}..${toLocale(end)}`;
     const sources = feature.get('sources');
     const source = feature.get('source');
     const summary = feature.get('summary');
     const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
-    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", { children: _jsx("div", { style: {
-                                            width: 16,
-                                            height: 16,
-                                            background: obj[source].color,
-                                        } }) }), _jsx("td", { children: source }), _jsx("td", { children: toP(data.score) })] }, source))) })] })) : (_jsxs("span", { children: [source, ' ', summary
+    const obj2 = obj[source];
+    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]) => {
+                            const sourceInfo = obj[source];
+                            return (_jsxs("tr", { children: [_jsx("td", { children: sourceInfo && (_jsx("div", { style: {
+                                                width: 16,
+                                                height: 16,
+                                                background: sourceInfo.color,
+                                            } })) }), _jsx("td", { children: sourceInfo?.name || source }), _jsx("td", { children: toP(data.score) })] }, source));
+                        }) })] })) : (_jsxs("span", { children: [obj2?.name || source, ' ', summary && feature.get('minScore') != null
                         ? `min:${toP(feature.get('minScore'))} avg:${toP(feature.get('score'))} max:${toP(feature.get('maxScore'))}`
                         : toP(feature.get('score'))] }))] }));
 });
-const WiggleTooltip = observer((props) => {
-    return _jsx(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
+const WiggleTooltip = observer(function WiggleTooltip(props) {
+    return _jsx(Tooltip, { TooltipContents: TooltipContents, ...props });
 });
 export default WiggleTooltip;
-export { default as Tooltip } from '../../Tooltip';

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

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const WiggleClusterDialog: ({ model, handleClose, }: {
     model: ReducedModel;
     handleClose: () => void;

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialog.js

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
 import { observer } from 'mobx-react';
-import WiggleClusterDialogAuto from './WiggleClusterDialogAuto';
-import WiggleClusterDialogManual from './WiggleClusterDialogManual';
+import WiggleClusterDialogAuto from "./WiggleClusterDialogAuto.js";
+import WiggleClusterDialogManual from "./WiggleClusterDialogManual.js";
 function Header({ activeMode, setActiveMode, }) {
     return (_jsx("div", { children: _jsx(RadioGroup, { children: Object.entries({
                 auto: (_jsx("div", { children: "Run in-app clustering (slower, particularly for large numbers of samples, uses JS implementation of hclust)" })),
@@ -13,7 +13,7 @@ function Header({ activeMode, setActiveMode, }) {
                         setActiveMode(key);
                     } }), label: val }, key))) }) }));
 }
-const WiggleClusterDialog = observer(function ({ model, handleClose, }) {
+const WiggleClusterDialog = observer(function WiggleClusterDialog({ model, handleClose, }) {
     const [activeMode, setActiveMode] = useState('auto');
     return (_jsx(Dialog, { open: true, title: "Cluster by score", maxWidth: "xl", onClose: (_, reason) => {
             if (reason !== 'backdropClick') {

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogAuto.d.ts

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const WiggleClusterDialogAuto: ({ model, children, handleClose, }: {
     model: ReducedModel;
     children: React.ReactNode;

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogAuto.js

@@ -4,14 +4,14 @@ 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 { isAlive } from '@jbrowse/mobx-state-tree';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { isAlive } from 'mobx-state-tree';
-const WiggleClusterDialogAuto = observer(function ({ model, children, handleClose, }) {
+const WiggleClusterDialogAuto = observer(function WiggleClusterDialogAuto({ model, children, handleClose, }) {
     const [progress, setProgress] = useState('');
     const [error, setError] = useState();
     const [loading, setLoading] = useState(false);
-    const [stopToken, setStopToken] = 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: () => {
@@ -46,12 +46,19 @@ const WiggleClusterDialogAuto = observer(function ({ model, children, handleClos
                                             setProgress(arg);
                                         },
                                     }));
+                                    const currentLayout = model.layout?.length
+                                        ? model.layout
+                                        : sourcesWithoutLayout;
+                                    const sourcesByName = Object.fromEntries(currentLayout.map((s) => [s.name, s]));
                                     model.setLayout(ret.order.map(idx => {
-                                        const ret = sourcesWithoutLayout[idx];
-                                        if (!ret) {
+                                        const sourceItem = sourcesWithoutLayout[idx];
+                                        if (!sourceItem) {
                                             throw new Error(`out of bounds at ${idx}`);
                                         }
-                                        return ret;
+                                        return {
+                                            ...sourceItem,
+                                            ...sourcesByName[sourceItem.name],
+                                        };
                                     }));
                                 }
                                 handleClose();

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogManual.d.ts

@@ -1,4 +1,4 @@
-import type { ReducedModel } from './types';
+import type { ReducedModel } from './types.ts';
 declare const WiggleClusterDialogManuals: ({ model, handleClose, children, }: {
     model: ReducedModel;
     handleClose: () => void;

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogManual.js

@@ -3,23 +3,16 @@ import { useEffect, useState } from 'react';
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { getContainingView, getSession, isAbortException, useLocalStorage, } from '@jbrowse/core/util';
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { isAlive } from '@jbrowse/mobx-state-tree';
 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 => ({
+const useStyles = makeStyles()({
     textAreaFont: {
         fontFamily: 'Courier New',
     },
-    mgap: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(4),
-    },
-}));
-const WiggleClusterDialogManuals = observer(function ({ model, handleClose, children, }) {
+});
+const WiggleClusterDialogManuals = observer(function WiggleClusterDialogManuals({ model, handleClose, children, }) {
     const { classes } = useStyles();
     const [paste, setPaste] = useState('');
     const [ret, setRet] = useState();
@@ -61,7 +54,7 @@ const WiggleClusterDialogManuals = observer(function ({ model, handleClose, chil
         })();
     }, [model, samplesPerPixel]);
     const results = ret
-        ? `inputMatrix<-matrix(c(${Object.values(ret)
+        ? String.raw `inputMatrix<-matrix(c(${Object.values(ret)
             .map(val => val.join(','))
             .join(',\n')}
 ),nrow=${Object.values(ret).length},byrow=TRUE)
@@ -69,7 +62,7 @@ rownames(inputMatrix)<-c(${Object.keys(ret)
             .map(key => `'${key}'`)
             .join(',')})
 resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
-cat(resultClusters$order,sep='\\n')`
+cat(resultClusters$order,sep='\n')`
         : undefined;
     const resultsTsv = ret
         ? Object.entries(ret)
@@ -81,13 +74,16 @@ cat(resultClusters$order,sep='\\n')`
                                             gap: '8px',
                                             flexWrap: 'wrap',
                                             marginBottom: '16px',
-                                        }, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                        }, children: [_jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { saveAs } = await import('file-saver-es');
                                                     saveAs(new Blob([results || ''], {
                                                         type: 'text/plain;charset=utf-8',
                                                     }), 'cluster.R');
-                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                }, children: "Download Rscript" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { default: copy } = await import('copy-to-clipboard');
                                                     copy(results || '');
-                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: () => {
+                                                }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', _jsx(Button, { variant: "contained", onClick: async () => {
+                                                    const { saveAs } = await import('file-saver-es');
                                                     saveAs(new Blob([resultsTsv || ''], {
                                                         type: 'text/plain;charset=utf-8',
                                                     }), 'scores.tsv');
@@ -102,7 +98,7 @@ cat(resultClusters$order,sep='\\n')`
                                                             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 => {
+                                                        } })] })] })) : null, results ? (_jsx("div", {})) : loading ? (_jsx(LoadingEllipses, { variant: "h6", message: "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: {
@@ -114,17 +110,24 @@ cat(resultClusters$order,sep='\\n')`
                             const { sourcesWithoutLayout } = model;
                             if (sourcesWithoutLayout) {
                                 try {
+                                    const currentLayout = model.layout?.length
+                                        ? model.layout
+                                        : sourcesWithoutLayout;
+                                    const sourcesByName = Object.fromEntries(currentLayout.map((s) => [s.name, s]));
                                     model.setLayout(paste
                                         .split('\n')
                                         .map(t => t.trim())
                                         .filter(f => !!f)
                                         .map(r => +r)
                                         .map(idx => {
-                                        const ret = sourcesWithoutLayout[idx - 1];
-                                        if (!ret) {
+                                        const sourceItem = sourcesWithoutLayout[idx - 1];
+                                        if (!sourceItem) {
                                             throw new Error(`out of bounds at ${idx}`);
                                         }
-                                        return ret;
+                                        return {
+                                            ...sourceItem,
+                                            ...sourcesByName[sourceItem.name],
+                                        };
                                     }));
                                 }
                                 catch (e) {

package/esm/MultiLinearWiggleDisplay/components/WiggleClusterDialog/types.d.ts

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

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

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

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -1,8 +1,8 @@
 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) {
+import YScaleBars from "./YScaleBars.js";
+const MultiLinearWiggleDisplayComponent = observer(function MultiLinearWiggleDisplayComponent(props) {
     const { model } = props;
     return (_jsxs("div", { children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(YScaleBars, { model: model })] }));
 });

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

@@ -1,5 +1,5 @@
-import type { WiggleDisplayModel } from '../model';
-export declare const YScaleBars: (props: {
+import type { WiggleDisplayModel } from '../model.ts';
+declare const YScaleBars: (props: {
     model: WiggleDisplayModel;
     orientation?: string;
     exportSVG?: boolean;

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.js

@@ -1,22 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import FullHeightScaleBar from './FullHeightScaleBar';
-import IndividualScaleBars from './IndividualScaleBars';
-const Wrapper = observer(function ({ children, model, exportSVG, }) {
-    const { height } = model;
-    return exportSVG ? (children) : (_jsx("svg", { style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            pointerEvents: 'none',
-            height,
-            width: getContainingView(model).width,
-        }, children: children }));
-});
-export const YScaleBars = observer(function (props) {
+import FullHeightScaleBar from "./FullHeightScaleBar.js";
+import IndividualScaleBars from "./IndividualScaleBars.js";
+import YScaleBarsWrapper from "./YScaleBarsWrapper.js";
+const YScaleBars = observer(function YScaleBars(props) {
     const { model, orientation, exportSVG } = props;
     const { showSidebar, stats, needsFullHeightScalebar, sources } = model;
-    return stats && sources ? (_jsx(Wrapper, { ...props, children: showSidebar ? (needsFullHeightScalebar ? (_jsx(FullHeightScaleBar, { model: model, orientation: orientation, exportSVG: exportSVG })) : (_jsx(IndividualScaleBars, { model: model, orientation: orientation, exportSVG: exportSVG }))) : null })) : null;
+    return stats && sources ? (_jsx(YScaleBarsWrapper, { ...props, children: showSidebar ? (needsFullHeightScalebar ? (_jsx(FullHeightScaleBar, { model: model, orientation: orientation, exportSVG: exportSVG })) : (_jsx(IndividualScaleBars, { model: model, orientation: orientation, exportSVG: exportSVG }))) : null })) : null;
 });
 export default YScaleBars;

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

@@ -0,0 +1,7 @@
+import type { WiggleDisplayModel } from '../model.ts';
+declare const YScaleBarsWrapper: ({ children, model, exportSVG, }: {
+    model: WiggleDisplayModel;
+    children: React.ReactNode;
+    exportSVG?: boolean;
+}) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export default YScaleBarsWrapper;

package/esm/MultiLinearWiggleDisplay/components/YScaleBarsWrapper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+const YScaleBarsWrapper = observer(function YScaleBarsWrapper({ children, model, exportSVG, }) {
+    const { height } = model;
+    return exportSVG ? (children) : (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height,
+            width: getContainingView(model).width,
+        }, children: children }));
+});
+export default YScaleBarsWrapper;

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

@@ -0,0 +1,10 @@
+import type { Source } from '../types.ts';
+export interface MinimalModel {
+    graphType: boolean;
+    needsFullHeightScalebar: boolean;
+    rowHeightTooSmallForScalebar: boolean;
+    sources: Source[] | undefined;
+    renderColorBoxes: boolean;
+    labelWidth: number;
+    needsCustomLegend: boolean;
+}

package/esm/MultiLinearWiggleDisplay/components/types.js

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

package/esm/MultiLinearWiggleDisplay/components/ui/SetColorDialog.d.ts

@@ -0,0 +1,31 @@
+interface SetColorDialogProps {
+    model: {
+        sources?: {
+            name: string;
+            [key: string]: unknown;
+        }[];
+        setLayout: (s: {
+            name: string;
+            [key: string]: unknown;
+        }[]) => void;
+        clearLayout: () => void;
+    };
+    handleClose: () => void;
+    title?: string;
+    enableBulkEdit?: boolean;
+    enableRowPalettizer?: boolean;
+    showTipsStorageKey?: string;
+    SourcesGridComponent: React.ComponentType<{
+        rows: {
+            name: string;
+            [key: string]: unknown;
+        }[];
+        onChange: (rows: {
+            name: string;
+            [key: string]: unknown;
+        }[]) => void;
+        showTips: boolean;
+    }>;
+}
+export default function SetColorDialog({ model, handleClose, title, enableBulkEdit, enableRowPalettizer, showTipsStorageKey, SourcesGridComponent, }: SetColorDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/MultiLinearWiggleDisplay/components/ui/SetColorDialog.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
+import { useLocalStorage } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import SetColorDialogBulkEditPanel from "./SetColorDialogBulkEditPanel.js";
+import SetColorDialogHelpfulTips from "./SetColorDialogHelpfulTips.js";
+import SetColorDialogRowPalettizer from "./SetColorDialogRowPalettizer.js";
+const useStyles = makeStyles()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+        display: 'flex',
+        gap: 8,
+    },
+});
+export default function SetColorDialog({ model, handleClose, title = 'Color/arrangement editor', enableBulkEdit = false, enableRowPalettizer = false, showTipsStorageKey = 'setColorDialog-showTips', SourcesGridComponent, }) {
+    const { classes } = useStyles();
+    const { sources } = model;
+    const [showBulkEditor, setShowBulkEditor] = useState(false);
+    const [currLayout, setCurrLayout] = useState(structuredClone(sources || []));
+    const [showTips, setShowTips] = useLocalStorage(showTipsStorageKey, false);
+    return (_jsx(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: title, children: showBulkEditor && enableBulkEdit ? (_jsx(SetColorDialogBulkEditPanel, { currLayout: currLayout, onClose: arg => {
+                if (arg) {
+                    setCurrLayout(arg);
+                }
+                setShowBulkEditor(false);
+            } })) : (_jsxs(_Fragment, { children: [_jsxs(DialogContent, { className: classes.content, children: [_jsxs("div", { className: classes.fr, children: [_jsx(Button, { variant: "contained", onClick: () => {
+                                        setShowTips(!showTips);
+                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), enableBulkEdit ? (_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
+                                        setShowBulkEditor(!showBulkEditor);
+                                    }, children: "Show Bulk row editor" })) : null] }), showTips ? _jsx(SetColorDialogHelpfulTips, {}) : null, enableRowPalettizer ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx(SetColorDialogRowPalettizer, { currLayout: currLayout, setCurrLayout: setCurrLayout })] })) : null, _jsx(SourcesGridComponent, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                                model.clearLayout();
+                                setCurrLayout(model.sources || []);
+                            }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                                setCurrLayout([...(model.sources || [])]);
+                            }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                                model.setLayout(currLayout);
+                                handleClose();
+                            }, children: "Submit" })] })] })) }));
+}

package/esm/MultiLinearWiggleDisplay/components/ui/SetColorDialogBulkEditPanel.d.ts

@@ -0,0 +1,10 @@
+export default function SetColorDialogBulkEditPanel({ onClose, currLayout, }: {
+    currLayout: {
+        name: string;
+        [key: string]: unknown;
+    }[];
+    onClose: (arg?: {
+        name: string;
+        [key: string]: unknown;
+    }[]) => void;
+}): import("react/jsx-runtime").JSX.Element;