@jbrowse/plugin-wiggle 2.17.0 → 3.0.0

package/esm/MultiLinearWiggleDisplay/components/FullHeightScaleBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import ColorLegend from './ColorLegend';
+import { getOffset } from './util';
+import YScaleBar from '../../shared/YScaleBar';
+const FullHeightScaleBar = observer(function ({ model, orientation, exportSVG, }) {
+    const { labelWidth } = model;
+    const { width: viewWidth } = getContainingView(model);
+    return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)`, children: _jsx(YScaleBar, { model: model, orientation: orientation }) }), _jsx("g", { transform: `translate(${viewWidth - labelWidth - 100},0)`, children: _jsx(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12 }) })] }));
+});
+export default FullHeightScaleBar;

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

@@ -0,0 +1,7 @@
+import type { WiggleDisplayModel } from '../model';
+declare const IndividualScaleBars: ({ model, orientation, exportSVG, }: {
+    model: WiggleDisplayModel;
+    orientation?: string;
+    exportSVG?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default IndividualScaleBars;

package/esm/MultiLinearWiggleDisplay/components/IndividualScaleBars.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import ColorLegend from './ColorLegend';
+import ScoreLegend from './ScoreLegend';
+import YScaleBar from '../../shared/YScaleBar';
+const IndividualScaleBars = observer(function ({ model, orientation, exportSVG, }) {
+    const { sources, rowHeight, rowHeightTooSmallForScalebar, needsCustomLegend, ticks, } = model;
+    return (sources === null || sources === void 0 ? void 0 : sources.length) ? (_jsxs(_Fragment, { children: [_jsx(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight }), rowHeightTooSmallForScalebar || needsCustomLegend ? (_jsx(ScoreLegend, { model: model })) : (sources.map((_source, idx) => (_jsx("g", { transform: `translate(0 ${rowHeight * idx})`, children: _jsx(YScaleBar, { model: model, orientation: orientation }) }, `${JSON.stringify(ticks)}-${idx}`))))] })) : null;
+});
+export default IndividualScaleBars;

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

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

package/esm/MultiLinearWiggleDisplay/components/LegendItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import RectBg from './RectBg';
+const LegendItem = function ({ source, idx, rowHeight, labelWidth, model, exportSVG, }) {
+    const boxHeight = Math.min(20, rowHeight);
+    const { needsCustomLegend, needsScalebar, 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 || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0);
+    return (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? null : (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? (_jsx(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null, canDisplayLabel ? (_jsx("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, children: source.name })) : null] }));
+};
+export default LegendItem;

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

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const RectBg: (props: {
     x: number;
     y: number;
     width: number;
     height: number;
     color?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default RectBg;

package/esm/MultiLinearWiggleDisplay/components/RectBg.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
-import React from 'react';
 const RectBg = (props) => {
     const { color = 'rgb(255,255,255,0.8)' } = props;
-    return React.createElement("rect", { ...props, ...getFillProps(color) });
+    return _jsx("rect", { ...props, ...getFillProps(color) });
 };
 export default RectBg;

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

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

package/esm/MultiLinearWiggleDisplay/components/ScoreLegend.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { measureText, getContainingView } from '@jbrowse/core/util';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView, measureText } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
 import RectBg from './RectBg';
 const ScoreLegend = observer(({ model }) => {
@@ -9,8 +9,6 @@ const ScoreLegend = observer(({ model }) => {
     const len = measureText(legend, 14);
     const padding = 25;
     const xpos = width - len - padding;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RectBg, { y: 0, x: xpos, width: len + 6, height: 16 }),
-        React.createElement("text", { y: 13, x: xpos }, legend)));
+    return (_jsxs(_Fragment, { children: [_jsx(RectBg, { y: 0, x: xpos, width: len + 6, height: 16 }), _jsx("text", { y: 13, x: xpos, children: legend })] }));
 });
 export default ScoreLegend;

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Source } from '../../util';
+import type { Source } from '../../util';
 export default function SetColorDialog({ model, handleClose, }: {
     model: {
         sources?: Source[];
@@ -7,4 +6,4 @@ export default function SetColorDialog({ model, handleClose, }: {
         clearLayout: () => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

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

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

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

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -1,17 +1,16 @@
-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';
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { SanitizedHTML } from '@jbrowse/core/ui';
-// locals
-import { moveUp, moveDown } from './util';
-// icons
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import { getStr, measureGridWidth } from '@jbrowse/core/util';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { Button } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import { makeStyles } from 'tss-react/mui';
+import { moveDown, moveUp } from './util';
 const useStyles = makeStyles()({
     cell: {
         whiteSpace: 'nowrap',
@@ -29,91 +28,65 @@ function SourcesGrid({ rows, onChange, showTips, }) {
         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 => {
+    return (_jsxs("div", { children: [_jsx(Button, { disabled: !selected.length, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: "Change color of selected items" }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowUpIcon, {}), showTips ? 'Move selected items up' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected));
+                }, disabled: !selected.length, children: [_jsx(KeyboardArrowDownIcon, {}), showTips ? 'Move selected items down' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveUp([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowUpIcon, {}), showTips ? 'Move selected items to top' : null] }), _jsxs(Button, { onClick: () => {
+                    onChange(moveDown([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [_jsx(KeyboardDoubleArrowDownIcon, {}), showTips ? 'Move selected items to bottom' : null] }), _jsx(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                    setWidgetColor(c);
+                    selected.forEach(id => {
+                        const elt = rows.find(f => f.name === id);
+                        if (elt) {
+                            elt.color = c;
+                        }
+                    });
+                    onChange([...rows]);
+                }, onClose: () => {
+                    setAnchorEl(null);
+                } }), _jsx("div", { style: { height: 400, width: '100%' }, children: _jsx(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: ({ value, id }) => (_jsx(ColorPicker, { color: value || 'blue', onChange: c => {
                                     const elt = rows.find(f => f.name === id);
                                     if (elt) {
                                         elt.color = c;
                                     }
                                     onChange([...rows]);
-                                } }));
+                                } })),
+                        },
+                        {
+                            field: 'name',
+                            headerName: 'Name',
+                            width: measureGridWidth(rows.map(r => r.name)),
                         },
-                    },
-                    {
-                        field: 'name',
-                        headerName: 'Name',
-                        width: measureGridWidth(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (React.createElement("div", { className: classes.cell },
-                            React.createElement(SanitizedHTML, { html: getStr(value) }))),
-                        width: measureGridWidth(rows.map(r => `${r[val]}`)),
-                    })),
-                ], sortModel: [
-                /* we control the sort as a controlled component using onSortModelChange */
-                ], onSortModelChange: args => {
-                    const sort = args[0];
-                    // this idx%2 flip flops the sorting order, we could inspect args
-                    // for sort direction asc or desc but this is just a simplified
-                    // thing since we are controlling sort instead of the default data
-                    // grid sort anyways
-                    const idx = (currSort.idx + 1) % 2;
-                    const field = sort.field || currSort.field;
-                    setCurrSort({ idx, field });
-                    onChange(field
-                        ? [...rows].sort((a, b) => {
-                            const aa = getStr(a[field]);
-                            const bb = getStr(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
+                        ...Object.keys(rest).map(val => ({
+                            field: val,
+                            renderCell: ({ value }) => (_jsx("div", { className: classes.cell, children: _jsx(SanitizedHTML, { html: getStr(value) }) })),
+                            width: measureGridWidth(rows.map(r => `${r[val]}`)),
+                        })),
+                    ], sortModel: [], onSortModelChange: args => {
+                        const sort = args[0];
+                        const idx = (currSort.idx + 1) % 2;
+                        const field = sort.field || currSort.field;
+                        setCurrSort({ idx, field });
+                        onChange(field
+                            ? [...rows].sort((a, b) => {
+                                const aa = getStr(a[field]);
+                                const bb = getStr(b[field]);
+                                return idx === 1
+                                    ? aa.localeCompare(bb)
+                                    : bb.localeCompare(aa);
+                            })
+                            : rows);
+                    } }) })] }));
 }
 export default SourcesGrid;

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

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

package/esm/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { observer } from 'mobx-react';
-// locals
-import { toP } from '../../util';
 import Tooltip from '../../Tooltip';
+import { toP } from '../../util';
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = React.forwardRef(function TooltipContents2({ model, feature }, ref) {
+const TooltipContents = forwardRef(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');
@@ -13,27 +13,12 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ model, feat
     const source = feature.get('source');
     const summary = feature.get('summary');
     const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
-    return (React.createElement("div", { ref: ref },
-        [refName, coord].filter(f => !!f).join(':'),
-        React.createElement("br", null),
-        sources ? (React.createElement("table", null,
-            React.createElement("thead", null,
-                React.createElement("tr", null,
-                    React.createElement("th", null, "color"),
-                    React.createElement("th", null, "source"),
-                    React.createElement("th", null, "score"))),
-            React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => (React.createElement("tr", { key: source },
-                React.createElement("td", { style: { background: obj[source].color } }, " "),
-                React.createElement("td", null, source),
-                React.createElement("td", null, toP(data.score)))))))) : (React.createElement("span", null,
-            source,
-            ' ',
-            summary
-                ? `min:${toP(feature.get('minScore'))} avg:${toP(feature.get('score'))} max:${toP(feature.get('maxScore'))}`
-                : toP(feature.get('score'))))));
+    return (_jsxs("div", { ref: ref, children: [[refName, coord].filter(f => !!f).join(':'), _jsx("br", {}), sources ? (_jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "color" }), _jsx("th", { children: "source" }), _jsx("th", { children: "score" })] }) }), _jsx("tbody", { children: Object.entries(sources).map(([source, data]) => (_jsxs("tr", { children: [_jsx("td", { style: { background: obj[source].color }, children: " " }), _jsx("td", { children: source }), _jsx("td", { children: toP(data.score) })] }, source))) })] })) : (_jsxs("span", { children: [source, ' ', summary
+                        ? `min:${toP(feature.get('minScore'))} avg:${toP(feature.get('score'))} max:${toP(feature.get('maxScore'))}`
+                        : toP(feature.get('score'))] }))] }));
 });
 const WiggleTooltip = observer((props) => {
-    return React.createElement(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
+    return _jsx(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
 });
 export default WiggleTooltip;
 export { default as Tooltip } from '../../Tooltip';

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

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

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -1,11 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
 import YScaleBars from './YScaleBars';
 const MultiLinearWiggleDisplayComponent = observer(function (props) {
     const { model } = props;
-    return (React.createElement("div", null,
-        React.createElement(BaseLinearDisplayComponent, { ...props }),
-        React.createElement(YScaleBars, { model: model })));
+    return (_jsxs("div", { children: [_jsx(BaseLinearDisplayComponent, { ...props }), _jsx(YScaleBars, { model: model })] }));
 });
 export default MultiLinearWiggleDisplayComponent;

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

@@ -1,8 +1,7 @@
-import React from 'react';
-import { WiggleDisplayModel } from '../model';
+import type { WiggleDisplayModel } from '../model';
 export declare const YScaleBars: (props: {
     model: WiggleDisplayModel;
     orientation?: string;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default YScaleBars;

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.js

@@ -1,42 +1,22 @@
-import React from 'react';
-import { measureText, getContainingView } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getContainingView } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import YScaleBar from '../../shared/YScaleBar';
-import ColorLegend from './ColorLegend';
-import ScoreLegend from './ScoreLegend';
-import { getOffset } from './util';
+import FullHeightScaleBar from './FullHeightScaleBar';
+import IndividualScaleBars from './IndividualScaleBars';
 const Wrapper = observer(function ({ children, model, exportSVG, }) {
     const { height } = model;
-    return exportSVG ? (children) : (React.createElement("svg", { style: {
+    return exportSVG ? (children) : (_jsx("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
             pointerEvents: 'none',
             height,
             width: getContainingView(model).width,
-        } }, children));
+        }, children: children }));
 });
 export const YScaleBars = observer(function (props) {
     const { model, orientation, exportSVG } = props;
-    const { stats, needsCustomLegend, needsFullHeightScalebar, rowHeightTooSmallForScalebar, rowHeight, sources, ticks, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
-    const { width: viewWidth } = getContainingView(model);
-    const minWidth = 20;
-    const ready = stats && sources;
-    if (!ready) {
-        return null;
-    }
-    const labelWidth = Math.max(...sources
-        .map(s => measureText(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)));
-    return (React.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (React.createElement(React.Fragment, null,
-        React.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })),
-        React.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
-            React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (React.createElement(React.Fragment, null,
-        React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
-        rowHeightTooSmallForScalebar || needsCustomLegend ? (React.createElement(ScoreLegend, { ...props })) : (sources.map((_source, idx) => (React.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })))))))));
+    const { stats, needsFullHeightScalebar, sources } = model;
+    return stats && sources ? (_jsx(Wrapper, { ...props, children: needsFullHeightScalebar ? (_jsx(FullHeightScaleBar, { model: model, orientation: orientation, exportSVG: exportSVG })) : (_jsx(IndividualScaleBars, { model: model, orientation: orientation, exportSVG: exportSVG })) })) : null;
 });
 export default YScaleBars;

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

@@ -1,4 +1,4 @@
-import { WiggleDisplayModel } from '../model';
+import type { WiggleDisplayModel } from '../model';
 export declare function moveUp(arr: {
     name: string;
 }[], sel: string[], by?: number): {

package/esm/MultiLinearWiggleDisplay/components/util.js

@@ -1,5 +1,5 @@
-import { getContainingTrack, getContainingView, measureText, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
+import { getContainingTrack, getContainingView, measureText, } from '@jbrowse/core/util';
 export function moveUp(arr, sel, by = 1) {
     const idxs = sel
         .map(l => arr.findIndex(v => v.name === l))

package/esm/MultiLinearWiggleDisplay/configSchema.d.ts

@@ -1,16 +1,10 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function WiggleConfigFactory(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     defaultRendering: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     renderers: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         MultiXYPlotRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiDensityRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
@@ -18,9 +12,6 @@ export default function WiggleConfigFactory(pluginManager: PluginManager): impor
         MultiLineRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
         MultiRowLineRenderer: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
-    /**
-     * #slot
-     */
     height: {
         type: string;
         defaultValue: number;