@jbrowse/plugin-wiggle 2.17.0 → 3.0.0

package/dist/MultiLinearWiggleDisplay/components/RectBg.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
-const react_1 = __importDefault(require("react"));
 const RectBg = (props) => {
     const { color = 'rgb(255,255,255,0.8)' } = props;
-    return react_1.default.createElement("rect", { ...props, ...(0, util_1.getFillProps)(color) });
+    return (0, jsx_runtime_1.jsx)("rect", { ...props, ...(0, util_1.getFillProps)(color) });
 };
 exports.default = RectBg;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const RectBg_1 = __importDefault(require("./RectBg"));
@@ -14,8 +14,6 @@ const ScoreLegend = (0, mobx_react_1.observer)(({ model }) => {
     const len = (0, util_1.measureText)(legend, 14);
     const padding = 25;
     const xpos = width - len - padding;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(RectBg_1.default, { y: 0, x: xpos, width: len + 6, height: 16 }),
-        react_1.default.createElement("text", { y: 13, x: xpos }, legend)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: xpos, width: len + 6, height: 16 }), (0, jsx_runtime_1.jsx)("text", { y: 13, x: xpos, children: legend })] }));
 });
 exports.default = ScoreLegend;

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

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

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

@@ -15,31 +15,40 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const ColorPicker_1 = __importStar(require("@jbrowse/core/ui/ColorPicker"));
 const util_1 = require("@jbrowse/core/util");
+const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
+const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
+const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
+const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
+const material_1 = require("@mui/material");
 const x_data_grid_1 = require("@mui/x-data-grid");
 const mui_1 = require("tss-react/mui");
-const ColorPicker_1 = __importStar(require("@jbrowse/core/ui/ColorPicker"));
-const ui_1 = require("@jbrowse/core/ui");
-// locals
 const util_2 = require("./util");
-// icons
-const KeyboardDoubleArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowUp"));
-const KeyboardDoubleArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardDoubleArrowDown"));
-const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
 const useStyles = (0, mui_1.makeStyles)()({
     cell: {
         whiteSpace: 'nowrap',
@@ -57,91 +66,65 @@ function SourcesGrid({ rows, onChange, showTips, }) {
         idx: 0,
         field: null,
     });
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.Button, { disabled: !selected.length, onClick: event => {
-                setAnchorEl(event.currentTarget);
-            } }, "Change color of selected items"),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveUp)([...rows], selected));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowUp_1.default, null),
-            showTips ? 'Move selected items up' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveDown)([...rows], selected));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardArrowDown_1.default, null),
-            showTips ? 'Move selected items down' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveUp)([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowUp_1.default, null),
-            showTips ? 'Move selected items to top' : null),
-        react_1.default.createElement(material_1.Button, { onClick: () => {
-                onChange((0, util_2.moveDown)([...rows], selected, rows.length));
-            }, disabled: !selected.length },
-            react_1.default.createElement(KeyboardDoubleArrowDown_1.default, null),
-            showTips ? 'Move selected items to bottom' : null),
-        react_1.default.createElement(ColorPicker_1.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_1.default.createElement("div", { style: { height: 400, width: '100%' } },
-            react_1.default.createElement(x_data_grid_1.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_1.default.createElement(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !selected.length, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                }, children: "Change color of selected items" }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_2.moveUp)([...rows], selected));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardArrowUp_1.default, {}), showTips ? 'Move selected items up' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_2.moveDown)([...rows], selected));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, {}), showTips ? 'Move selected items down' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_2.moveUp)([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowUp_1.default, {}), showTips ? 'Move selected items to top' : null] }), (0, jsx_runtime_1.jsxs)(material_1.Button, { onClick: () => {
+                    onChange((0, util_2.moveDown)([...rows], selected, rows.length));
+                }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowDown_1.default, {}), showTips ? 'Move selected items to bottom' : null] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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);
+                } }), (0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.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 }) => ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { 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: (0, util_1.measureGridWidth)(rows.map(r => r.name)),
                         },
-                    },
-                    {
-                        field: 'name',
-                        headerName: 'Name',
-                        width: (0, util_1.measureGridWidth)(rows.map(r => r.name)),
-                    },
-                    ...Object.keys(rest).map(val => ({
-                        field: val,
-                        renderCell: ({ value }) => (react_1.default.createElement("div", { className: classes.cell },
-                            react_1.default.createElement(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }))),
-                        width: (0, util_1.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 = (0, util_1.getStr)(a[field]);
-                            const bb = (0, util_1.getStr)(b[field]);
-                            return idx === 1
-                                ? aa.localeCompare(bb)
-                                : bb.localeCompare(aa);
-                        })
-                        : rows);
-                } }))));
+                        ...Object.keys(rest).map(val => ({
+                            field: val,
+                            renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
+                            width: (0, util_1.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 = (0, util_1.getStr)(a[field]);
+                                const bb = (0, util_1.getStr)(b[field]);
+                                return idx === 1
+                                    ? aa.localeCompare(bb)
+                                    : bb.localeCompare(aa);
+                            })
+                            : rows);
+                    } }) })] }));
 }
 exports.default = SourcesGrid;

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

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const mobx_react_1 = require("mobx-react");
-// locals
-const util_1 = require("../../util");
 const Tooltip_1 = __importDefault(require("../../Tooltip"));
+const util_1 = require("../../util");
 const en = (n) => n.toLocaleString('en-US');
-const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ model, feature }, ref) {
+const TooltipContents = (0, react_1.forwardRef)(function TooltipContents2({ model, feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
     const refName = feature.get('refName');
@@ -19,27 +19,12 @@ const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ m
     const source = feature.get('source');
     const summary = feature.get('summary');
     const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
-    return (react_1.default.createElement("div", { ref: ref },
-        [refName, coord].filter(f => !!f).join(':'),
-        react_1.default.createElement("br", null),
-        sources ? (react_1.default.createElement("table", null,
-            react_1.default.createElement("thead", null,
-                react_1.default.createElement("tr", null,
-                    react_1.default.createElement("th", null, "color"),
-                    react_1.default.createElement("th", null, "source"),
-                    react_1.default.createElement("th", null, "score"))),
-            react_1.default.createElement("tbody", null, Object.entries(sources).map(([source, data]) => (react_1.default.createElement("tr", { key: source },
-                react_1.default.createElement("td", { style: { background: obj[source].color } }, " "),
-                react_1.default.createElement("td", null, source),
-                react_1.default.createElement("td", null, (0, util_1.toP)(data.score)))))))) : (react_1.default.createElement("span", null,
-            source,
-            ' ',
-            summary
-                ? `min:${(0, util_1.toP)(feature.get('minScore'))} avg:${(0, util_1.toP)(feature.get('score'))} max:${(0, util_1.toP)(feature.get('maxScore'))}`
-                : (0, util_1.toP)(feature.get('score'))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [[refName, coord].filter(f => !!f).join(':'), (0, jsx_runtime_1.jsx)("br", {}), sources ? ((0, jsx_runtime_1.jsxs)("table", { children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "color" }), (0, jsx_runtime_1.jsx)("th", { children: "source" }), (0, jsx_runtime_1.jsx)("th", { children: "score" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: Object.entries(sources).map(([source, data]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { style: { background: obj[source].color }, children: " " }), (0, jsx_runtime_1.jsx)("td", { children: source }), (0, jsx_runtime_1.jsx)("td", { children: (0, util_1.toP)(data.score) })] }, source))) })] })) : ((0, jsx_runtime_1.jsxs)("span", { children: [source, ' ', summary
+                        ? `min:${(0, util_1.toP)(feature.get('minScore'))} avg:${(0, util_1.toP)(feature.get('score'))} max:${(0, util_1.toP)(feature.get('maxScore'))}`
+                        : (0, util_1.toP)(feature.get('score'))] }))] }));
 });
 const WiggleTooltip = (0, mobx_react_1.observer)((props) => {
-    return react_1.default.createElement(Tooltip_1.default, { useClientY: true, TooltipContents: TooltipContents, ...props });
+    return (0, jsx_runtime_1.jsx)(Tooltip_1.default, { useClientY: true, TooltipContents: TooltipContents, ...props });
 });
 exports.default = WiggleTooltip;
 var Tooltip_2 = require("../../Tooltip");

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

@@ -3,14 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const mobx_react_1 = require("mobx-react");
 const YScaleBars_1 = __importDefault(require("./YScaleBars"));
 const MultiLinearWiggleDisplayComponent = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }),
-        react_1.default.createElement(YScaleBars_1.default, { model: model })));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }), (0, jsx_runtime_1.jsx)(YScaleBars_1.default, { model: model })] }));
 });
 exports.default = MultiLinearWiggleDisplayComponent;

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

@@ -4,45 +4,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YScaleBars = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
-const YScaleBar_1 = __importDefault(require("../../shared/YScaleBar"));
-const ColorLegend_1 = __importDefault(require("./ColorLegend"));
-const ScoreLegend_1 = __importDefault(require("./ScoreLegend"));
-const util_2 = require("./util");
+const FullHeightScaleBar_1 = __importDefault(require("./FullHeightScaleBar"));
+const IndividualScaleBars_1 = __importDefault(require("./IndividualScaleBars"));
 const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
     const { height } = model;
-    return exportSVG ? (children) : (react_1.default.createElement("svg", { style: {
+    return exportSVG ? (children) : ((0, jsx_runtime_1.jsx)("svg", { style: {
             position: 'absolute',
             top: 0,
             left: 0,
             pointerEvents: 'none',
             height,
             width: (0, util_1.getContainingView)(model).width,
-        } }, children));
+        }, children: children }));
 });
 exports.YScaleBars = (0, mobx_react_1.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 } = (0, util_1.getContainingView)(model);
-    const minWidth = 20;
-    const ready = stats && sources;
-    if (!ready) {
-        return null;
-    }
-    const labelWidth = Math.max(...sources
-        .map(s => (0, util_1.measureText)(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)));
-    return (react_1.default.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("g", { transform: `translate(${!exportSVG ? (0, util_2.getOffset)(model) : 0},0)` },
-            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })),
-        react_1.default.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
-            react_1.default.createElement(ColorLegend_1.default, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ColorLegend_1.default, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
-        rowHeightTooSmallForScalebar || needsCustomLegend ? (react_1.default.createElement(ScoreLegend_1.default, { ...props })) : (sources.map((_source, idx) => (react_1.default.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
-            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })))))))));
+    const { stats, needsFullHeightScalebar, sources } = model;
+    return stats && sources ? ((0, jsx_runtime_1.jsx)(Wrapper, { ...props, children: needsFullHeightScalebar ? ((0, jsx_runtime_1.jsx)(FullHeightScaleBar_1.default, { model: model, orientation: orientation, exportSVG: exportSVG })) : ((0, jsx_runtime_1.jsx)(IndividualScaleBars_1.default, { model: model, orientation: orientation, exportSVG: exportSVG })) })) : null;
 });
 exports.default = exports.YScaleBars;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.moveUp = moveUp;
 exports.moveDown = moveDown;
 exports.getOffset = getOffset;
-const util_1 = require("@jbrowse/core/util");
 const configuration_1 = require("@jbrowse/core/configuration");
+const util_1 = require("@jbrowse/core/util");
 function moveUp(arr, sel, by = 1) {
     const idxs = sel
         .map(l => arr.findIndex(v => v.name === l))

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