@jbrowse/plugin-wiggle 3.6.4 → 3.7.0

package/dist/CreateMultiWiggleExtension/ConfirmDialog.js

@@ -9,7 +9,7 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const Dialog_1 = __importDefault(require("@jbrowse/core/ui/Dialog"));
 const material_1 = require("@mui/material");
 const ConfirmDialog = ({ tracks, onClose, }) => {
-    const [val, setVal] = (0, react_1.useState)(`MultiWiggle ${Date.now()}`);
+    const [val, setVal] = (0, react_1.useState)(() => `MultiWiggle ${Date.now()}`);
     const allQuant = tracks.every(t => t.type === 'QuantitativeTrack');
     return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: true, onClose: () => {
             onClose(false);

package/dist/CreateMultiWiggleExtension/index.js

@@ -44,7 +44,7 @@ function makeTrack({ model, arg, }) {
     const subadapters = tracks
         .map(c => (0, configuration_1.readConfObject)(c, 'adapter'))
         .map((c, idx) => ({ ...c, source: trackIds[idx] }));
-    const now = +Date.now();
+    const now = Date.now();
     const trackId = `multitrack-${now}-sessionTrack`;
     const session = (0, util_1.getSession)(model);
     if ((0, util_1.isSessionWithAddTracks)(session)) {

package/dist/LinearWiggleDisplay/model.d.ts

@@ -193,6 +193,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
+    mouseoverExtraInformation: string | undefined;
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | import("@jbrowse/core/util").Feature;
 } & {
@@ -207,9 +208,22 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
 } & {
     readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
     readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
+    readonly layoutFeatures: import("@jbrowse/core/util/compositeMap").default<string, [number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]>;
     getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+    getFeatureByID(blockKey: string, id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
+    searchFeatureByID(id: string): ([number, number, number, number] | [number, number, number, number, {
+        label?: string;
+        description?: string;
+        refName: string;
+    }]) | undefined;
 } & {
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
     deleteBlock(key: string): void;
@@ -218,6 +232,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string): void;
     setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature): void;
+    setMouseoverExtraInformation(extra?: string): void;
 } & {
     reload(): Promise<void>;
 } & {

package/dist/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const LegendItem_1 = __importDefault(require("./LegendItem"));
+const LegendItemText_1 = __importDefault(require("./LegendItemText"));
 const RectBg_1 = __importDefault(require("./RectBg"));
 const ColorLegend = (0, mobx_react_1.observer)(function ({ model, rowHeight, exportSVG, }) {
     const { graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, labelWidth, } = model;
@@ -13,6 +14,6 @@ const ColorLegend = (0, mobx_react_1.observer)(function ({ model, rowHeight, exp
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
     const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return sources ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => ((0, jsx_runtime_1.jsx)(LegendItem_1.default, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: labelWidth }, `${source.name}-${idx}`)))] })) : null;
+    return sources ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => ((0, jsx_runtime_1.jsx)(LegendItem_1.default, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: labelWidth }, `${source.name}-${idx}`))), sources.map((source, idx) => ((0, jsx_runtime_1.jsx)(LegendItemText_1.default, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG }, `${source.name}-text-${idx}`)))] })) : null;
 });
 exports.default = ColorLegend;

package/dist/MultiLinearWiggleDisplay/components/LegendItem.js

@@ -8,12 +8,10 @@ const RectBg_1 = __importDefault(require("./RectBg"));
 const LegendItem = function ({ source, idx, rowHeight, labelWidth, model, exportSVG, }) {
     const boxHeight = Math.min(20, rowHeight);
     const { needsCustomLegend, graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
     const colorBoxWidth = renderColorBoxes ? 15 : 0;
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
     const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? null : ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null, canDisplayLabel ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, children: source.name })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? null : ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null] }));
 };
 exports.default = LegendItem;

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

@@ -0,0 +1,10 @@
+import type { Source } from '../../util';
+import type { WiggleDisplayModel } from '../model';
+declare const LegendItemText: ({ source, idx, rowHeight, model, exportSVG, }: {
+    source: Source;
+    idx: number;
+    rowHeight: number;
+    model: WiggleDisplayModel;
+    exportSVG?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default LegendItemText;

package/dist/MultiLinearWiggleDisplay/components/LegendItemText.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LegendItemText = function ({ source, idx, rowHeight, model, exportSVG, }) {
+    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 ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, children: source.name })) : null;
+};
+exports.default = LegendItemText;

package/dist/MultiLinearWiggleDisplay/components/SetColorDialog.js

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

package/dist/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -60,7 +60,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [selected, setSelected] = (0, react_1.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] = (0, react_1.useState)('blue');
     const [currSort, setCurrSort] = (0, react_1.useState)({
         idx: 0,

package/dist/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -19,15 +19,19 @@ const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2({ mode
     const source = feature.get('source');
     const summary = feature.get('summary');
     const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [[refName, coord].filter(f => !!f).join(':'), (0, jsx_runtime_1.jsx)("br", {}), sources ? ((0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "color" }), (0, jsx_runtime_1.jsx)("th", { children: "source" }), (0, jsx_runtime_1.jsx)("th", { children: "score" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: Object.entries(sources).map(([source, data]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            width: 16,
-                                            height: 16,
-                                            background: obj[source].color,
-                                        } }) }), (0, jsx_runtime_1.jsx)("td", { children: source }), (0, jsx_runtime_1.jsx)("td", { children: (0, util_1.toP)(data.score) })] }, source))) })] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [source, ' ', summary
+    const obj2 = obj[source];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [[refName, coord].filter(f => !!f).join(':'), (0, jsx_runtime_1.jsx)("br", {}), sources ? ((0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "color" }), (0, jsx_runtime_1.jsx)("th", { children: "source" }), (0, jsx_runtime_1.jsx)("th", { children: "score" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: Object.entries(sources).map(([source, data]) => {
+                            const sourceInfo = obj[source];
+                            return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: sourceInfo && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                width: 16,
+                                                height: 16,
+                                                background: sourceInfo.color,
+                                            } })) }), (0, jsx_runtime_1.jsx)("td", { children: (sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.name) || source }), (0, jsx_runtime_1.jsx)("td", { children: (0, util_1.toP)(data.score) })] }, source));
+                        }) })] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [(obj2 === null || obj2 === void 0 ? void 0 : obj2.name) || source, ' ', summary
                         ? `min:${(0, util_1.toP)(feature.get('minScore'))} avg:${(0, util_1.toP)(feature.get('score'))} max:${(0, util_1.toP)(feature.get('maxScore'))}`
                         : (0, util_1.toP)(feature.get('score'))] }))] }));
 });
-const WiggleTooltip = (0, mobx_react_1.observer)((props) => {
+const WiggleTooltip = (0, mobx_react_1.observer)(function (props) {
     return (0, jsx_runtime_1.jsx)(Tooltip_1.default, { useClientY: true, TooltipContents: TooltipContents, ...props });
 });
 exports.default = WiggleTooltip;

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

@@ -23,6 +23,7 @@ const WiggleClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, ch
                                         } })] })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [loading ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsx)("span", { children: progress || 'Loading...' }), (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", disabled: loading, onClick: async () => {
+                            var _a;
                             try {
                                 setError(undefined);
                                 setProgress('Initializing');
@@ -48,12 +49,19 @@ const WiggleClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, ch
                                             setProgress(arg);
                                         },
                                     }));
+                                    const currentLayout = ((_a = model.layout) === null || _a === void 0 ? void 0 : _a.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/dist/MultiLinearWiggleDisplay/components/WiggleClusterDialog/WiggleClusterDialogManual.js

@@ -66,7 +66,7 @@ const WiggleClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model,
         })();
     }, [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)
@@ -74,7 +74,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)
@@ -107,7 +107,7 @@ cat(resultClusters$order,sep='\\n')`
                                                             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 => {
+                                                        } })] })] })) : null, results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", message: "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: {
@@ -116,20 +116,28 @@ cat(resultClusters$order,sep='\\n')`
                                                 },
                                             },
                                         } })] })] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                            var _a;
                             const { sourcesWithoutLayout } = model;
                             if (sourcesWithoutLayout) {
                                 try {
+                                    const currentLayout = ((_a = model.layout) === null || _a === void 0 ? void 0 : _a.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/dist/MultiLinearWiggleDisplay/components/WiggleClusterDialog/types.d.ts

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

package/dist/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/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialog.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DraggableDialog_1 = __importDefault(require("@jbrowse/core/ui/DraggableDialog"));
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const SetColorDialogBulkEditPanel_1 = __importDefault(require("./SetColorDialogBulkEditPanel"));
+const SetColorDialogHelpfulTips_1 = __importDefault(require("./SetColorDialogHelpfulTips"));
+const SetColorDialogRowPalettizer_1 = __importDefault(require("./SetColorDialogRowPalettizer"));
+const useStyles = (0, mui_1.makeStyles)()({
+    content: {
+        minWidth: 800,
+    },
+    fr: {
+        float: 'right',
+        display: 'flex',
+        gap: 8,
+    },
+});
+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] = (0, react_1.useState)(false);
+    const [currLayout, setCurrLayout] = (0, react_1.useState)(structuredClone(sources || []));
+    const [showTips, setShowTips] = (0, util_1.useLocalStorage)(showTipsStorageKey, false);
+    return ((0, jsx_runtime_1.jsx)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: title, children: showBulkEditor && enableBulkEdit ? ((0, jsx_runtime_1.jsx)(SetColorDialogBulkEditPanel_1.default, { currLayout: currLayout, onClose: arg => {
+                if (arg) {
+                    setCurrLayout(arg);
+                }
+                setShowBulkEditor(false);
+            } })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.fr, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                        setShowTips(!showTips);
+                                    }, children: showTips ? 'Hide tips' : 'Show tips' }), enableBulkEdit ? ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "secondary", variant: "contained", onClick: () => {
+                                        setShowBulkEditor(!showBulkEditor);
+                                    }, children: "Show Bulk row editor" })) : null] }), showTips ? (0, jsx_runtime_1.jsx)(SetColorDialogHelpfulTips_1.default, {}) : null, enableRowPalettizer ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SetColorDialogRowPalettizer_1.default, { currLayout: currLayout, setCurrLayout: setCurrLayout })] })) : null, (0, jsx_runtime_1.jsx)(SourcesGridComponent, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
+                                model.clearLayout();
+                                setCurrLayout(model.sources || []);
+                            }, children: "Clear custom settings" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                                setCurrLayout([...(model.sources || [])]);
+                            }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                                model.setLayout(currLayout);
+                                handleClose();
+                            }, children: "Submit" })] })] })) }));
+}

package/dist/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;

package/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialogBulkEditPanel.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialogBulkEditPanel;
+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 mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+});
+function SetColorDialogBulkEditPanel({ onClose, currLayout, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Paste CSV or TSV. If a header column is present. First line is a header. If a column called \"name\" is present, it uses that to connect to IDs in the table, otherwise it uses the first column no." }), error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", multiline: true, minRows: 5, placeholder: 'name,population\nHG00098,GBR\nHG00101,GBR\nHG00459,CHS\n...', maxRows: 10, fullWidth: true, value: val, onChange: event => {
+                            setVal(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", color: "secondary", onClick: () => {
+                            const lines = val
+                                .split('\n')
+                                .map(f => f.trim())
+                                .filter(f => !!f);
+                            const fields = lines[0].split(/[,\t]/gm);
+                            if (fields.includes('name')) {
+                                setError('');
+                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
+                                const newData = Object.fromEntries(lines.slice(1).map(line => {
+                                    const cols = line.split(/[,\t]/gm);
+                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                                    return [
+                                        newRecord.name,
+                                        {
+                                            ...newRecord,
+                                            ...oldLayout[newRecord.name],
+                                        },
+                                    ];
+                                }));
+                                onClose(currLayout.map(record => ({
+                                    ...record,
+                                    ...newData[record.name],
+                                })));
+                            }
+                            else {
+                                setError(new Error('No "name" column found on line 1'));
+                            }
+                        }, children: "Update rows" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
+                            const lines = val
+                                .split('\n')
+                                .map(f => f.trim())
+                                .filter(f => !!f);
+                            const fields = lines[0].split(/[,\t]/gm);
+                            if (fields.includes('name')) {
+                                setError('');
+                                const oldLayout = Object.fromEntries(currLayout.map(record => [record.name, record]));
+                                const newData = Object.fromEntries(lines.slice(1).map(line => {
+                                    const cols = line.split(/[,\t]/gm);
+                                    const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                                    return [
+                                        newRecord.name,
+                                        {
+                                            ...newRecord,
+                                            ...oldLayout[newRecord.name],
+                                        },
+                                    ];
+                                }));
+                                onClose(currLayout.map(record => ({
+                                    ...newData[record.name],
+                                })));
+                            }
+                            else {
+                                setError(new Error('No "name" column found on line 1'));
+                            }
+                        }, children: "Replace rows" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
+                            onClose();
+                        }, children: "Cancel" })] })] }));
+}

package/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialogHelpfulTips.d.ts

@@ -0,0 +1 @@
+export default function SetColorDialogHelpfulTips(): import("react/jsx-runtime").JSX.Element;

package/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialogHelpfulTips.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialogHelpfulTips;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SetColorDialogHelpfulTips() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Helpful tips", (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "You can select rows in the table with the checkboxes" }), (0, jsx_runtime_1.jsx)("li", { children: "Multi-select is enabled with shift-click and control-click" }), (0, jsx_runtime_1.jsx)("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), (0, jsx_runtime_1.jsx)("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), (0, jsx_runtime_1.jsx)("li", { children: "Changes are applied when you hit Submit" }), (0, jsx_runtime_1.jsx)("li", { children: "You can click and drag the dialog box to move it on the screen" }), (0, jsx_runtime_1.jsx)("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
+}

package/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialogRowPalettizer.d.ts

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

package/dist/MultiLinearWiggleDisplay/components/ui/SetColorDialogRowPalettizer.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SetColorDialogRowPalettizer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("@jbrowse/core/ui/colors");
+const color_1 = require("@jbrowse/core/util/color");
+const material_1 = require("@mui/material");
+function SetColorDialogRowPalettizer({ setCurrLayout, currLayout, }) {
+    if (!currLayout.length || !currLayout[0]) {
+        return null;
+    }
+    const fields = Object.keys(currLayout[0]).filter(f => f !== 'name' &&
+        f !== 'color' &&
+        f !== 'source' &&
+        f !== 'label' &&
+        f !== 'id' &&
+        f !== 'HP');
+    return ((0, jsx_runtime_1.jsxs)("div", { children: ["Create color palette based on...", fields.map(r => ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "inherit", onClick: () => {
+                    const map = new Map();
+                    for (const row of currLayout) {
+                        const val = map.get(row[r]);
+                        if (!val) {
+                            map.set(row[r], 1);
+                        }
+                        else {
+                            map.set(row[r], val + 1);
+                        }
+                    }
+                    const ret = Object.fromEntries([...map.entries()]
+                        .sort((a, b) => a[1] - b[1])
+                        .map((r, idx) => [r[0], colors_1.set1[idx] || (0, color_1.randomColor)(r[0])]));
+                    setCurrLayout(currLayout.map(row => ({
+                        ...row,
+                        color: ret[row[r]],
+                    })));
+                }, children: r }, r))), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                    setCurrLayout(currLayout.map(row => ({
+                        ...row,
+                        color: undefined,
+                    })));
+                }, children: "Clear colors" })] }));
+}

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

@@ -1,13 +1,9 @@
 import type { WiggleDisplayModel } from '../model';
 import type { GridRowId } from '@mui/x-data-grid';
-export declare function moveUp(arr: {
+export declare function moveUp<T extends {
     name: string;
-}[], sel: GridRowId[], by?: number): {
+}>(arr: T[], sel: GridRowId[], by?: number): T[];
+export declare function moveDown<T extends {
     name: string;
-}[];
-export declare function moveDown(arr: {
-    name: string;
-}[], sel: GridRowId[], by?: number): {
-    name: string;
-}[];
+}>(arr: T[], sel: GridRowId[], by?: number): T[];
 export declare function getOffset(model: WiggleDisplayModel): number;