@jbrowse/plugin-wiggle 2.18.0 → 3.0.0

package/dist/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -15,18 +15,29 @@ 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 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");
@@ -55,82 +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: ({ value, id }) => (react_1.default.createElement(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)),
-                    },
-                    ...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: [], 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);
-                } }))));
+    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)),
+                        },
+                        ...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,4 +1,3 @@
-import React from 'react';
 import type { TooltipContentsComponent } from '../../Tooltip';
 import type { Source } from '../../util';
 import type { Feature } from '@jbrowse/core/util';
@@ -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,12 +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");
 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');
@@ -18,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 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 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 ColorLegend_1 = __importDefault(require("./ColorLegend"));
-const ScoreLegend_1 = __importDefault(require("./ScoreLegend"));
-const util_2 = require("./util");
-const YScaleBar_1 = __importDefault(require("../../shared/YScaleBar"));
+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/index.js

@@ -15,13 +15,23 @@ 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 };
 };

package/dist/MultiLinearWiggleDisplay/model.d.ts

@@ -4,7 +4,7 @@ import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { AnyReactComponentType, Feature } from '@jbrowse/core/util';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
 import type { Instance } from 'mobx-state-tree';
-export declare function stateModelFactory(pluginManager: PluginManager, configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
+export declare function stateModelFactory(_pluginManager: PluginManager, configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("mobx-state-tree").ISimpleType<string>;
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -39,7 +39,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -192,13 +192,13 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
 } & {
     readonly statsReadyAndRegionNotTooLarge: boolean;
     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-runtime").JSX.Element | null;
 } & {
     featureIdUnderMouse: undefined | string;
     contextMenuFeature: undefined | Feature;
 } & {
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    readonly blockType: "staticBlocks" | "dynamicBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
     readonly renderDelay: number;
@@ -225,7 +225,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
     afterAttach(): void;
 } & {
     message: undefined | string;
@@ -366,6 +366,9 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     readonly colors: string[];
     readonly quantitativeStatsRelevantToCurrentZoom: boolean;
 } & {
+    readonly legendFontSize: number;
+    readonly canDisplayLegendLabels: boolean;
+    readonly labelWidth: number;
     renderProps(): any;
     readonly hasResolution: boolean;
     readonly hasGlobalStats: boolean;
@@ -417,7 +420,7 @@ export declare function stateModelFactory(pluginManager: PluginManager, configSc
     })[];
 } & {
     afterAttach(): void;
-    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    renderSvg(opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type WiggleDisplayStateModel = ReturnType<typeof stateModelFactory>;
 export type WiggleDisplayModel = Instance<WiggleDisplayStateModel>;

package/dist/MultiLinearWiggleDisplay/model.js

@@ -15,13 +15,23 @@ 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 };
 };
@@ -47,7 +57,7 @@ const rendererTypes = new Map([
     ['multiline', 'MultiLineRenderer'],
     ['multirowline', 'MultiRowLineRenderer'],
 ]);
-function stateModelFactory(pluginManager, configSchema) {
+function stateModelFactory(_pluginManager, configSchema) {
     return mobx_state_tree_1.types
         .compose('MultiLinearWiggleDisplay', (0, SharedWiggleMixin_1.default)(configSchema), mobx_state_tree_1.types.model({
         type: mobx_state_tree_1.types.literal('MultiLinearWiggleDisplay'),
@@ -207,6 +217,18 @@ function stateModelFactory(pluginManager, configSchema) {
         };
     })
         .views(self => ({
+        get legendFontSize() {
+            return Math.min(self.rowHeight, 12);
+        },
+        get canDisplayLegendLabels() {
+            return self.rowHeight > 11;
+        },
+        get labelWidth() {
+            var _a;
+            const minWidth = 20;
+            return (0, util_1.max)(((_a = self.sources) === null || _a === void 0 ? void 0 : _a.map(s => (0, util_1.measureText)(s.name, this.legendFontSize)).map(width => (this.canDisplayLegendLabels ? width : minWidth))) ||
+                []);
+        },
         renderProps() {
             const superProps = self.adapterProps();
             return {

package/dist/MultiLinearWiggleDisplay/renderSvg.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { WiggleDisplayModel } from './model';
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
-export declare function renderSvg(self: WiggleDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<React.JSX.Element>;
+export declare function renderSvg(self: WiggleDisplayModel, opts: ExportSvgDisplayOptions, superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/MultiLinearWiggleDisplay/renderSvg.js

@@ -4,15 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderSvg = renderSvg;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
 const YScaleBars_1 = __importDefault(require("./components/YScaleBars"));
 async function renderSvg(self, opts, superRenderSvg) {
     await (0, mobx_1.when)(() => !!self.stats && !!self.regionCannotBeRenderedText);
     const { offsetPx } = (0, util_1.getContainingView)(self);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("g", null, await superRenderSvg(opts)),
-        react_1.default.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            react_1.default.createElement(YScaleBars_1.default, { model: self, orientation: "left", exportSVG: true }))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("g", { children: await superRenderSvg(opts) }), (0, jsx_runtime_1.jsx)("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: (0, jsx_runtime_1.jsx)(YScaleBars_1.default, { model: self, orientation: "left", exportSVG: true }) })] }));
 }

package/dist/MultiLinearWiggleDisplay/util.d.ts

@@ -0,0 +1 @@
+export declare function randomColor(str: string): string;

package/dist/MultiLinearWiggleDisplay/util.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.randomColor = randomColor;
+function randomColor(str) {
+    let sum = 0;
+    for (let i = 0; i < str.length; i++) {
+        sum += str.charCodeAt(i);
+    }
+    return `hsl(${sum * 10}, 20%, 50%)`;
+}

package/dist/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -1,11 +1,43 @@
 "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 () {
+    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 util_1 = require("@jbrowse/core/util");
 const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
-const drawLine_1 = require("../drawLine");
 class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
         const { bpPerPx, sources, regions, features } = props;
@@ -13,10 +45,11 @@ class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
         const groups = (0, util_1.groupBy)(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
+        const { drawLine } = await Promise.resolve().then(() => __importStar(require('../drawLine')));
         let feats = [];
         ctx.save();
         sources.forEach(source => {
-            const { reducedFeatures } = (0, drawLine_1.drawLine)(ctx, {
+            const { reducedFeatures } = drawLine(ctx, {
                 ...props,
                 features: groups[source.name] || [],
                 height,