@jbrowse/plugin-wiggle 2.7.0 → 2.7.2

package/dist/drawLine.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawLine = void 0;
+const configuration_1 = require("@jbrowse/core/configuration");
+const util_1 = require("@jbrowse/core/util");
+// locals
+const util_2 = require("./util");
+const fudgeFactor = 0.3;
+const clipHeight = 2;
+function drawLine(ctx, props) {
+    const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
+    const [region] = regions;
+    const width = (region.end - region.start) / bpPerPx;
+    // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
+    // wiggle display, and makes the height of the actual drawn area add
+    // "padding" to the top and bottom of the display
+    const height = unadjustedHeight - offset * 2;
+    const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
+    const [niceMin, niceMax] = scale.domain();
+    const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
+    let lastVal;
+    let prevLeftPx = -Infinity;
+    const reducedFeatures = [];
+    for (const feature of features.values()) {
+        const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+        // create reduced features, avoiding multiple features per px
+        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+            reducedFeatures.push(feature);
+            prevLeftPx = leftPx;
+        }
+        const score = feature.get('score');
+        const lowClipping = score < niceMin;
+        const highClipping = score > niceMax;
+        const w = rightPx - leftPx + fudgeFactor;
+        const c = colorCallback(feature, score);
+        ctx.beginPath();
+        ctx.strokeStyle = c;
+        const startPos = lastVal !== undefined ? lastVal : score;
+        if (!region.reversed) {
+            ctx.moveTo(leftPx, toY(startPos));
+            ctx.lineTo(leftPx, toY(score));
+            ctx.lineTo(rightPx, toY(score));
+        }
+        else {
+            ctx.moveTo(rightPx, toY(startPos));
+            ctx.lineTo(rightPx, toY(score));
+            ctx.lineTo(leftPx, toY(score));
+        }
+        ctx.stroke();
+        lastVal = score;
+        if (highClipping) {
+            ctx.fillStyle = clipColor;
+            ctx.fillRect(leftPx, offset, w, clipHeight);
+        }
+        else if (lowClipping && scaleOpts.scaleType !== 'log') {
+            ctx.fillStyle = clipColor;
+            ctx.fillRect(leftPx, height - clipHeight, w, height);
+        }
+    }
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
+        values.forEach(tick => {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        });
+    }
+    return { reducedFeatures };
+}
+exports.drawLine = drawLine;

package/dist/drawXY.d.ts

@@ -0,0 +1,19 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+import { ScaleOpts } from './util';
+export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    bpPerPx: number;
+    regions: Region[];
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    config: AnyConfigurationModel;
+    displayCrossHatches: boolean;
+    offset?: number;
+    colorCallback: (f: Feature, score: number) => string;
+}): {
+    reducedFeatures: Feature[];
+};

package/dist/{drawxy.js → drawXY.js}

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.drawDensity = exports.drawLine = exports.drawXY = void 0;
+exports.drawXY = void 0;
 const configuration_1 = require("@jbrowse/core/configuration");
 const colord_1 = require("@jbrowse/core/util/colord");
 const util_1 = require("@jbrowse/core/util");
+// locals
+const util_2 = require("./util");
 function lighten(color, amount) {
     const hslColor = color.toHsl();
     const l = hslColor.l * (1 + amount);
@@ -14,23 +16,6 @@ function darken(color, amount) {
     const l = hslColor.l * (1 - amount);
     return (0, colord_1.colord)({ ...hslColor, l: (0, util_1.clamp)(l, 0, 100) });
 }
-// locals
-const util_2 = require("./util");
-// avoid drawing negative width features for SVG exports
-function fillRectCtx(x, y, width, height, ctx, color) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (color) {
-        ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
-}
 const fudgeFactor = 0.3;
 const clipHeight = 2;
 function drawXY(ctx, props) {
@@ -73,7 +58,7 @@ function drawXY(ctx, props) {
                     : c === lastCol
                         ? lastMix
                         : (lastMix = lighten((0, colord_1.colord)(c), 0.4).toHex());
-                fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
+                (0, util_2.fillRectCtx)(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
                 lastCol = c;
             }
         }
@@ -100,7 +85,7 @@ function drawXY(ctx, props) {
                 prevLeftPx = leftPx;
             }
             hasClipping = hasClipping || score < niceMin || score > niceMax;
-            fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, effectiveC);
+            (0, util_2.fillRectCtx)(leftPx, toY(score), w, getHeight(score), ctx, effectiveC);
             lastCol = c;
         }
         lastMix = undefined;
@@ -116,7 +101,7 @@ function drawXY(ctx, props) {
                     : c === lastCol
                         ? lastMix
                         : (lastMix = darken((0, colord_1.colord)(c), 0.4).toHex());
-                fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
+                (0, util_2.fillRectCtx)(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
                 lastCol = c;
             }
         }
@@ -135,14 +120,14 @@ function drawXY(ctx, props) {
             const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
             if (summaryScoreMode === 'max') {
                 const s = feature.get('summary') ? feature.get('maxScore') : score;
-                fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c);
+                (0, util_2.fillRectCtx)(leftPx, toY(s), w, getHeight(s), ctx, c);
             }
             else if (summaryScoreMode === 'min') {
                 const s = feature.get('summary') ? feature.get('minScore') : score;
-                fillRectCtx(leftPx, toY(s), w, getHeight(s), ctx, c);
+                (0, util_2.fillRectCtx)(leftPx, toY(s), w, getHeight(s), ctx, c);
             }
             else {
-                fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, c);
+                (0, util_2.fillRectCtx)(leftPx, toY(score), w, getHeight(score), ctx, c);
             }
         }
     }
@@ -156,10 +141,10 @@ function drawXY(ctx, props) {
             const w = rightPx - leftPx + fudgeFactor;
             const score = feature.get('score');
             if (score > niceMax) {
-                fillRectCtx(leftPx, offset, w, clipHeight, ctx);
+                (0, util_2.fillRectCtx)(leftPx, offset, w, clipHeight, ctx);
             }
             else if (score < niceMin && scaleOpts.scaleType !== 'log') {
-                fillRectCtx(leftPx, unadjustedHeight, w, clipHeight, ctx);
+                (0, util_2.fillRectCtx)(leftPx, unadjustedHeight, w, clipHeight, ctx);
             }
         }
     }
@@ -177,124 +162,3 @@ function drawXY(ctx, props) {
     return { reducedFeatures };
 }
 exports.drawXY = drawXY;
-function drawLine(ctx, props) {
-    const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
-    const [region] = regions;
-    const width = (region.end - region.start) / bpPerPx;
-    // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
-    // wiggle display, and makes the height of the actual drawn area add
-    // "padding" to the top and bottom of the display
-    const height = unadjustedHeight - offset * 2;
-    const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
-    const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
-    const [niceMin, niceMax] = scale.domain();
-    const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
-    let lastVal;
-    let prevLeftPx = -Infinity;
-    const reducedFeatures = [];
-    for (const feature of features.values()) {
-        const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
-        // create reduced features, avoiding multiple features per px
-        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-            reducedFeatures.push(feature);
-            prevLeftPx = leftPx;
-        }
-        const score = feature.get('score');
-        const lowClipping = score < niceMin;
-        const highClipping = score > niceMax;
-        const w = rightPx - leftPx + fudgeFactor;
-        const c = colorCallback(feature, score);
-        ctx.beginPath();
-        ctx.strokeStyle = c;
-        const startPos = lastVal !== undefined ? lastVal : score;
-        if (!region.reversed) {
-            ctx.moveTo(leftPx, toY(startPos));
-            ctx.lineTo(leftPx, toY(score));
-            ctx.lineTo(rightPx, toY(score));
-        }
-        else {
-            ctx.moveTo(rightPx, toY(startPos));
-            ctx.lineTo(rightPx, toY(score));
-            ctx.lineTo(leftPx, toY(score));
-        }
-        ctx.stroke();
-        lastVal = score;
-        if (highClipping) {
-            ctx.fillStyle = clipColor;
-            ctx.fillRect(leftPx, offset, w, clipHeight);
-        }
-        else if (lowClipping && scaleOpts.scaleType !== 'log') {
-            ctx.fillStyle = clipColor;
-            ctx.fillRect(leftPx, height - clipHeight, w, height);
-        }
-    }
-    if (displayCrossHatches) {
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
-        values.forEach(tick => {
-            ctx.beginPath();
-            ctx.moveTo(0, Math.round(toY(tick)));
-            ctx.lineTo(width, Math.round(toY(tick)));
-            ctx.stroke();
-        });
-    }
-    return { reducedFeatures };
-}
-exports.drawLine = drawLine;
-function drawDensity(ctx, props) {
-    const { features, regions, bpPerPx, scaleOpts, height, config } = props;
-    const [region] = regions;
-    const pivot = (0, configuration_1.readConfObject)(config, 'bicolorPivot');
-    const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
-    const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
-    const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
-    const color = (0, configuration_1.readConfObject)(config, 'color');
-    const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
-    const crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log';
-    const scale = (0, util_2.getScale)({
-        ...scaleOpts,
-        pivotValue: crossing ? pivotValue : undefined,
-        range: crossing ? [negColor, 'white', posColor] : ['white', posColor],
-    });
-    const scale2 = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
-    const cb = color === '#f0f'
-        ? (_, score) => scale(score)
-        : (feature, score) => (0, configuration_1.readConfObject)(config, 'color', { feature, score });
-    const [niceMin, niceMax] = scale2.domain();
-    let prevLeftPx = -Infinity;
-    let hasClipping = false;
-    const reducedFeatures = [];
-    for (const feature of features.values()) {
-        const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
-        // create reduced features, avoiding multiple features per px
-        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-            reducedFeatures.push(feature);
-            prevLeftPx = leftPx;
-        }
-        const score = feature.get('score');
-        hasClipping = hasClipping || score > niceMax || score < niceMin;
-        const w = rightPx - leftPx + fudgeFactor;
-        ctx.fillStyle = cb(feature, score);
-        ctx.fillRect(leftPx, 0, w, height);
-    }
-    // second pass: draw clipping
-    // avoid persisting the red fillstyle with save/restore
-    ctx.save();
-    if (hasClipping) {
-        ctx.fillStyle = clipColor;
-        for (const feature of features.values()) {
-            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
-            const w = rightPx - leftPx + fudgeFactor;
-            const score = feature.get('score');
-            if (score > niceMax) {
-                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
-            }
-            else if (score < niceMin && scaleOpts.scaleType !== 'log') {
-                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
-            }
-        }
-    }
-    ctx.restore();
-    return { reducedFeatures };
-}
-exports.drawDensity = drawDensity;

package/dist/util.d.ts

@@ -72,3 +72,4 @@ export declare function quantitativeStatsAutorun(self: {
 }): void;
 export declare function toP(s?: number): number;
 export declare function round(value: number): number;
+export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, color?: string): void;

package/dist/util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.round = exports.toP = exports.quantitativeStatsAutorun = exports.getQuantitativeStats = exports.getNiceDomain = exports.getOrigin = exports.getScale = exports.YSCALEBAR_LABEL_OFFSET = void 0;
+exports.fillRectCtx = exports.round = exports.toP = exports.quantitativeStatsAutorun = exports.getQuantitativeStats = exports.getNiceDomain = exports.getOrigin = exports.getScale = exports.YSCALEBAR_LABEL_OFFSET = void 0;
 const d3_scale_1 = require("d3-scale");
 const mobx_1 = require("mobx");
 const util_1 = require("@jbrowse/core/util");
@@ -231,3 +231,19 @@ function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
 exports.round = round;
+// avoid drawing negative width features for SVG exports
+function fillRectCtx(x, y, width, height, ctx, color) {
+    if (width < 0) {
+        x += width;
+        width = -width;
+    }
+    if (height < 0) {
+        y += height;
+        height = -height;
+    }
+    if (color) {
+        ctx.fillStyle = color;
+    }
+    ctx.fillRect(x, y, width, height);
+}
+exports.fillRectCtx = fillRectCtx;

package/esm/DensityRenderer/DensityRenderer.js

@@ -1,4 +1,4 @@
-import { drawDensity } from '../drawxy';
+import { drawDensity } from '../drawDensity';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class DensityRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {

package/esm/LinePlotRenderer/LinePlotRenderer.js

@@ -1,6 +1,6 @@
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 import { YSCALEBAR_LABEL_OFFSET } from '../util';
-import { drawLine } from '../drawxy';
+import { drawLine } from '../drawLine';
 export default class LinePlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         return drawLine(ctx, {

package/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -1,21 +1,18 @@
 import { groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import { drawDensity } from '../drawxy';
+import { drawDensity } from '../drawDensity';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
-        const groups = groupBy([...features.values()], f => f.get('source'));
+        const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
+            const features = groups[source.name] || [];
             const { reducedFeatures } = drawDensity(ctx, {
                 ...props,
                 features,
@@ -27,7 +24,7 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
             ctx.lineTo(width, height);
             ctx.stroke();
             ctx.translate(0, height);
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
         return { reducedFeatures: feats };

package/esm/MultiLineRenderer/MultiLineRenderer.js

@@ -1,23 +1,19 @@
 import { groupBy } from '@jbrowse/core/util';
-import { drawLine } from '../drawxy';
+import { drawLine } from '../drawLine';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 export default class MultiLineRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
         const { sources, features } = props;
-        const groups = groupBy([...features.values()], f => f.get('source'));
+        const groups = groupBy(features.values(), f => f.get('source'));
         let feats = [];
         sources.forEach(source => {
-            const features = groups[source.name];
-            if (!features) {
-                return;
-            }
             const { reducedFeatures } = drawLine(ctx, {
                 ...props,
-                features,
+                features: groups[source.name] || [],
                 colorCallback: () => source.color || 'blue',
             });
-            feats = [...feats, ...reducedFeatures];
+            feats = feats.concat(reducedFeatures);
         });
         return { reducedFeatures: feats };
     }

package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -1,28 +1,15 @@
 import React, { useState } from 'react';
 import { Button, DialogContent, DialogActions } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { getStr, isUriLocation, measureGridWidth, useLocalStorage, } from '@jbrowse/core/util';
-import { DataGrid } from '@mui/x-data-grid';
+import { useLocalStorage } from '@jbrowse/core/util';
 import clone from 'clone';
 // locals
 import DraggableDialog from './DraggableDialog';
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
-import { moveUp, moveDown } from './util';
-// icons
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import UriLink from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/UriLink';
+import SourcesGrid from './SourcesGrid';
 const useStyles = makeStyles()({
     content: {
         minWidth: 800,
     },
-    cell: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    },
 });
 export default function SetColorDialog({ model, handleClose, }) {
     const { classes } = useStyles();
@@ -58,90 +45,3 @@ export default function SetColorDialog({ model, handleClose, }) {
                     handleClose();
                 } }, "Submit"))));
 }
-function SourcesGrid({ rows, onChange, showTips, }) {
-    const { classes } = useStyles();
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [selected, setSelected] = useState([]);
-    // @ts-expect-error
-    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
-    const [widgetColor, setWidgetColor] = useState('blue');
-    const [currSort, setCurrSort] = useState({
-        idx: 0,
-        field: null,
-    });
-    return (React.createElement("div", null,
-        React.createElement(Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
-        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected)), disabled: !selected.length },
-            React.createElement(KeyboardArrowUpIcon, null),
-            showTips ? 'Move selected items up' : null),
-        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected)), disabled: !selected.length },
-            React.createElement(KeyboardArrowDownIcon, null),
-            showTips ? 'Move selected items down' : null),
-        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected, rows.length)), disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowUpIcon, null),
-            showTips ? 'Move selected items to top' : null),
-        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected, rows.length)), disabled: !selected.length },
-            React.createElement(KeyboardDoubleArrowDownIcon, null),
-            showTips ? 'Move selected items to bottom' : null),
-        React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
-                setWidgetColor(c);
-                selected.forEach(id => {
-                    const elt = rows.find(f => f.name === id);
-                    if (elt) {
-                        elt.color = c;
-                    }
-                });
-                onChange([...rows]);
-            }, onClose: () => setAnchorEl(null) }),
-        React.createElement("div", { style: { height: 400, width: '100%' } },
-            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => setSelected(arg), rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                    {
-                        field: 'color',
-                        headerName: 'Color',
-                        renderCell: params => {
-                            const { value, id } = params;
-                            return (React.createElement(ColorPicker, { color: value || 'blue', onChange: c => {
-                                    const elt = rows.find(f => f.name === id);
-                                    if (elt) {
-                                        elt.color = c;
-                                    }
-                                    onChange([...rows]);
-                                } }));
-                        },
-                    },
-                    {
-                        field: 'name',
-                        sortingOrder: [null],
-                        headerName: 'Name',
-                        width: measureGridWidth(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        sortingOrder: [null],
-                        renderCell: (params) => {
-                            const { value } = params;
-                            return (React.createElement("div", { className: classes.cell }, isUriLocation(value) ? (React.createElement(UriLink, { value: value })) : (React.createElement(React.Fragment, null, getStr(value)))));
-                        },
-                        // @ts-ignore
-                        width: measureGridWidth(rows.map(r => r[val])),
-                    })),
-                ], sortModel: [
-                /* we control the sort as a controlled component using onSortModelChange */
-                ], onSortModelChange: args => {
-                    const sort = args[0];
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = (sort === null || sort === void 0 ? void 0 : sort.field) || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            // @ts-expect-error
-                            const aa = getStr(a[field]);
-                            // @ts-expect-error
-                            const bb = getStr(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
-}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Source } from '../../util';
+declare function SourcesGrid({ rows, onChange, showTips, }: {
+    rows: Source[];
+    onChange: (arg: Source[]) => void;
+    showTips: boolean;
+}): React.JSX.Element;
+export default SourcesGrid;

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Button } from '@mui/material';
+import { getStr, measureGridWidth } from '@jbrowse/core/util';
+import { DataGrid } from '@mui/x-data-grid';
+import { makeStyles } from 'tss-react/mui';
+// locals
+import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import { moveUp, moveDown } from './util';
+// icons
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+const useStyles = makeStyles()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+function SourcesGrid({ rows, onChange, showTips, }) {
+    const { classes } = useStyles();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selected, setSelected] = useState([]);
+    // @ts-expect-error
+    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
+    const [widgetColor, setWidgetColor] = useState('blue');
+    const [currSort, setCurrSort] = useState({
+        idx: 0,
+        field: null,
+    });
+    return (React.createElement("div", null,
+        React.createElement(Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
+        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected)), disabled: !selected.length },
+            React.createElement(KeyboardArrowUpIcon, null),
+            showTips ? 'Move selected items up' : null),
+        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected)), disabled: !selected.length },
+            React.createElement(KeyboardArrowDownIcon, null),
+            showTips ? 'Move selected items down' : null),
+        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected, rows.length)), disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowUpIcon, null),
+            showTips ? 'Move selected items to top' : null),
+        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected, rows.length)), disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowDownIcon, null),
+            showTips ? 'Move selected items to bottom' : null),
+        React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                setWidgetColor(c);
+                selected.forEach(id => {
+                    const elt = rows.find(f => f.name === id);
+                    if (elt) {
+                        elt.color = c;
+                    }
+                });
+                onChange([...rows]);
+            }, onClose: () => setAnchorEl(null) }),
+        React.createElement("div", { style: { height: 400, width: '100%' } },
+            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => setSelected(arg), rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                    {
+                        field: 'color',
+                        headerName: 'Color',
+                        renderCell: params => {
+                            const { value, id } = params;
+                            return (React.createElement(ColorPicker, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } }));
+                        },
+                    },
+                    {
+                        field: 'name',
+                        sortingOrder: [null],
+                        headerName: 'Name',
+                        width: measureGridWidth(rows.map(r => r.name)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        sortingOrder: [null],
+                        renderCell: (params) => {
+                            const { value } = params;
+                            return (React.createElement("div", { className: classes.cell },
+                                React.createElement(SanitizedHTML, { html: getStr(value) })));
+                        },
+                        // @ts-ignore
+                        width: measureGridWidth(rows.map(r => r[val])),
+                    })),
+                ], sortModel: [
+                /* we control the sort as a controlled component using onSortModelChange */
+                ], onSortModelChange: args => {
+                    const sort = args[0];
+                    const idx = (currSort.idx + 1) % 2;
+                    const field = (sort === null || sort === void 0 ? void 0 : sort.field) || currSort.field;
+                    setCurrSort({ idx, field });
+                    onChange(field
+                        ? [...rows].sort((a, b) => {
+                            // @ts-expect-error
+                            const aa = getStr(a[field]);
+                            // @ts-expect-error
+                            const bb = getStr(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }))));
+}
+export default SourcesGrid;