@jbrowse/plugin-wiggle 2.6.3 → 2.7.1

package/dist/drawXY.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+    return (0, colord_1.colord)({ ...hslColor, l: (0, util_1.clamp)(l, 0, 100) });
+}
+function darken(color, amount) {
+    const hslColor = color.toHsl();
+    const l = hslColor.l * (1 - amount);
+    return (0, colord_1.colord)({ ...hslColor, l: (0, util_1.clamp)(l, 0, 100) });
+}
+const fudgeFactor = 0.3;
+const clipHeight = 2;
+function drawXY(ctx, props) {
+    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = 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 filled = (0, configuration_1.readConfObject)(config, 'filled');
+    const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
+    const summaryScoreMode = (0, configuration_1.readConfObject)(config, 'summaryScoreMode');
+    const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
+    const minSize = (0, configuration_1.readConfObject)(config, 'minSize');
+    const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
+    const originY = (0, util_2.getOrigin)(scaleOpts.scaleType);
+    const [niceMin, niceMax] = scale.domain();
+    const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
+    const toOrigin = (n) => toY(originY) - toY(n);
+    const getHeight = (n) => (filled ? toOrigin(n) : Math.max(minSize, 1));
+    let hasClipping = false;
+    let prevLeftPx = -Infinity;
+    const reducedFeatures = [];
+    const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue;
+    // we handle whiskers separately to render max row, min row, and avg in three
+    // passes. this reduces subpixel rendering issues. note: for stylistic
+    // reasons, clipping indicator is only drawn for score, not min/max score
+    if (summaryScoreMode === 'whiskers') {
+        let lastCol;
+        let lastMix;
+        for (const feature of features.values()) {
+            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+            if (feature.get('summary')) {
+                const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+                const max = feature.get('maxScore');
+                const c = colorCallback(feature, max);
+                const effectiveC = crossingOrigin
+                    ? c
+                    : c === lastCol
+                        ? lastMix
+                        : (lastMix = lighten((0, colord_1.colord)(c), 0.4).toHex());
+                (0, util_2.fillRectCtx)(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
+                lastCol = c;
+            }
+        }
+        lastMix = undefined;
+        lastCol = undefined;
+        for (const feature of features.values()) {
+            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+            const score = feature.get('score');
+            const max = feature.get('maxScore');
+            const min = feature.get('minScore');
+            const summary = feature.get('summary');
+            const c = colorCallback(feature, score);
+            const effectiveC = crossingOrigin && summary
+                ? c === lastCol
+                    ? lastMix
+                    : (lastMix = (0, colord_1.colord)(colorCallback(feature, max))
+                        .mix((0, colord_1.colord)(colorCallback(feature, min)))
+                        .toString())
+                : c;
+            const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+            // create reduced features, avoiding multiple features per px
+            if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+                reducedFeatures.push(feature);
+                prevLeftPx = leftPx;
+            }
+            hasClipping = hasClipping || score < niceMin || score > niceMax;
+            (0, util_2.fillRectCtx)(leftPx, toY(score), w, getHeight(score), ctx, effectiveC);
+            lastCol = c;
+        }
+        lastMix = undefined;
+        lastCol = undefined;
+        for (const feature of features.values()) {
+            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
+            if (feature.get('summary')) {
+                const min = feature.get('minScore');
+                const c = colorCallback(feature, min);
+                const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+                const effectiveC = crossingOrigin
+                    ? c
+                    : c === lastCol
+                        ? lastMix
+                        : (lastMix = darken((0, colord_1.colord)(c), 0.4).toHex());
+                (0, util_2.fillRectCtx)(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
+                lastCol = c;
+            }
+        }
+    }
+    else {
+        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 c = colorCallback(feature, score);
+            hasClipping = hasClipping || score < niceMin || score > niceMax;
+            const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
+            if (summaryScoreMode === 'max') {
+                const s = feature.get('summary') ? feature.get('maxScore') : score;
+                (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;
+                (0, util_2.fillRectCtx)(leftPx, toY(s), w, getHeight(s), ctx, c);
+            }
+            else {
+                (0, util_2.fillRectCtx)(leftPx, toY(score), w, getHeight(score), ctx, c);
+            }
+        }
+    }
+    // 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) {
+                (0, util_2.fillRectCtx)(leftPx, offset, w, clipHeight, ctx);
+            }
+            else if (score < niceMin && scaleOpts.scaleType !== 'log') {
+                (0, util_2.fillRectCtx)(leftPx, unadjustedHeight, w, clipHeight, ctx);
+            }
+        }
+    }
+    ctx.restore();
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
+        ticks.values.forEach(tick => {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        });
+    }
+    return { reducedFeatures };
+}
+exports.drawXY = drawXY;

package/dist/shared/YScaleBar.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 type Ticks = ReturnType<typeof axisPropsFromTickScale>;
-declare const _default: ({ model, orientation, }: {
+declare const YScaleBar: ({ model, orientation, }: {
     model: {
         ticks?: Ticks;
     };
     orientation?: string | undefined;
 }) => React.JSX.Element | null;
-export default _default;
+export default YScaleBar;

package/dist/shared/YScaleBar.js

@@ -7,8 +7,9 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const react_d3_axis_mod_1 = require("react-d3-axis-mod");
-exports.default = (0, mobx_react_1.observer)(function YScaleBar({ model, orientation, }) {
+const YScaleBar = (0, mobx_react_1.observer)(function ({ model, orientation, }) {
     const { ticks } = model;
     const theme = (0, material_1.useTheme)();
     return ticks ? (react_1.default.createElement(react_d3_axis_mod_1.Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? react_d3_axis_mod_1.LEFT : react_d3_axis_mod_1.RIGHT }, bg: theme.palette.background.default, fg: theme.palette.text.primary })) : null;
 });
+exports.default = YScaleBar;

package/dist/shared/modelShared.d.ts

@@ -247,7 +247,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null; /**
+     * #getter
+     * subclasses can define these, as snpcoverage track does
+     */
 } & {
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: Feature | undefined;

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/CreateMultiWiggleExtension/index.js

@@ -23,17 +23,20 @@ export default function (pm) {
                                 ];
                                 const now = +Date.now();
                                 const trackId = `multitrack-${now}-sessionTrack`;
-                                getSession(model).addTrackConf({
-                                    type: 'MultiQuantitativeTrack',
-                                    trackId,
-                                    name: arg.name,
-                                    assemblyNames,
-                                    adapter: {
-                                        type: 'MultiWiggleAdapter',
-                                        subadapters,
-                                    },
-                                });
-                                model.view.showTrack(trackId);
+                                const session = getSession(model);
+                                if (isSessionWithAddTracks(session)) {
+                                    session.addTrackConf({
+                                        type: 'MultiQuantitativeTrack',
+                                        trackId,
+                                        name: arg.name,
+                                        assemblyNames,
+                                        adapter: {
+                                            type: 'MultiWiggleAdapter',
+                                            subadapters,
+                                        },
+                                    });
+                                    model.view.showTrack(trackId);
+                                }
                             }
                             getSession(model).queueDialog(handleClose => [
                                 ConfirmDialog,

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/LinearWiggleDisplay/components/SetColorDialog.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-declare function SetColorDialog({ model, handleClose, }: {
+declare const SetColorDialog: ({ model, handleClose, }: {
     model: {
-        color?: string;
-        posColor?: string;
-        negColor?: string;
+        color?: string | undefined;
+        posColor?: string | undefined;
+        negColor?: string | undefined;
         setColor: (arg?: string) => void;
         setPosColor: (arg?: string) => void;
         setNegColor: (arg?: string) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetColorDialog;
-export default _default;
+}) => React.JSX.Element;
+export default SetColorDialog;

package/esm/LinearWiggleDisplay/components/SetColorDialog.js

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { Button, DialogContent, DialogActions, FormControlLabel, Radio, Typography, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
 import { ColorPicker } from '@jbrowse/core/ui/ColorPicker';
-function SetColorDialog({ model, handleClose, }) {
+const SetColorDialog = observer(function SetColorDialog({ model, handleClose, }) {
     const [posneg, setPosNeg] = useState(false);
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set color" },
         React.createElement(DialogContent, null,
@@ -30,5 +30,5 @@ function SetColorDialog({ model, handleClose, }) {
                     model.setColor(undefined);
                 }, color: "secondary", variant: "contained" }, "Restore default"),
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => handleClose() }, "Submit"))));
-}
-export default observer(SetColorDialog);
+});
+export default SetColorDialog;

package/esm/LinearWiggleDisplay/components/Tooltip.js

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import Tooltip from '../../Tooltip';
 import { toP } from '../../util';
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = React.forwardRef(function ({ feature }, ref) {
+const TooltipContents = React.forwardRef(function TooltipContents2({ feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const name = feature.get('refName');

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/DraggableDialog.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { DialogProps } from '@mui/material';
-declare function DraggableDialog(props: DialogProps & {
+declare const DraggableDialog: (props: DialogProps & {
     title: string;
-}): React.JSX.Element;
-declare const _default: typeof DraggableDialog;
-export default _default;
+}) => React.JSX.Element;
+export default DraggableDialog;

package/esm/MultiLinearWiggleDisplay/components/DraggableDialog.js

@@ -18,7 +18,7 @@ function PaperComponent(props) {
     return (React.createElement(Draggable, { handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' },
         React.createElement(Paper, { ...props })));
 }
-function DraggableDialog(props) {
+const DraggableDialog = observer(function DraggableDialog(props) {
     const { classes } = useStyles();
     const { title, children, onClose } = props;
     return (React.createElement(Dialog, { ...props, PaperComponent: PaperComponent, "aria-labelledby": "draggable-dialog-title" // this area is important for the draggable functionality
@@ -33,5 +33,5 @@ function DraggableDialog(props) {
                     React.createElement(CloseIcon, null))) : null),
             React.createElement(Divider, null),
             children)));
-}
-export default observer(DraggableDialog);
+});
+export default DraggableDialog;

package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -1,19 +1,11 @@
 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,
@@ -53,89 +45,3 @@ export default function SetColorDialog({ model, handleClose, }) {
                     handleClose();
                 } }, "Submit"))));
 }
-function SourcesGrid({ rows, onChange, showTips, }) {
-    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 isUriLocation(value) ? (React.createElement(UriLink, { value: value })) : (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;