@jbrowse/plugin-wiggle 2.18.0 → 3.0.1

package/esm/LinearWiggleDisplay/model.d.ts

@@ -38,7 +38,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
                 status?: string;
                 reactElement?: React.ReactElement;
             };
-        }) => import("react").JSX.Element | undefined;
+        }) => import("react/jsx-runtime").JSX.Element | undefined;
         renderProps: any;
     } & {
         doReload(): void;
@@ -190,13 +190,13 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
 } & {
     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 | import("@jbrowse/core/util").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;
@@ -223,7 +223,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     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;
@@ -339,7 +339,17 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     readonly quantitativeStatsReady: boolean;
 } & {
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
+        type: string;
+        label?: undefined;
+        icon?: undefined;
+        subMenu?: undefined;
+        onClick?: undefined;
+        checked?: undefined;
+    } | {
         label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
         subMenu: ({
             label: string;
             subMenu: {
@@ -362,8 +372,8 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             subMenu?: undefined;
         })[];
         type?: undefined;
-        checked?: undefined;
         onClick?: undefined;
+        checked?: undefined;
     } | {
         label: string;
         subMenu: {
@@ -373,10 +383,23 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             onClick: () => void;
         }[];
         type?: undefined;
-        checked?: undefined;
+        icon?: undefined;
         onClick?: undefined;
+        checked?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        subMenu?: undefined;
+        checked?: undefined;
     } | {
         type: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
         label: string;
         checked: boolean;
         onClick: () => void;
@@ -384,7 +407,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     })[];
 } & {
     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/esm/LinearWiggleDisplay/model.js

@@ -1,6 +1,9 @@
 import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { getContainingView, getSession } from '@jbrowse/core/util';
+import EqualizerIcon from '@mui/icons-material/Equalizer';
+import PaletteIcon from '@mui/icons-material/Palette';
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { types } from 'mobx-state-tree';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 import SharedWiggleMixin from '../shared/SharedWiggleMixin';
@@ -114,8 +117,10 @@ function stateModelFactory(pluginManager, configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
+                    { type: 'divider' },
                     {
                         label: 'Score',
+                        icon: EqualizerIcon,
                         subMenu: self.scoreTrackMenuItems(),
                     },
                     ...(self.canHaveFill
@@ -133,18 +138,6 @@ function stateModelFactory(pluginManager, configSchema) {
                             },
                         ]
                         : []),
-                    ...(self.needsScalebar
-                        ? [
-                            {
-                                type: 'checkbox',
-                                label: 'Draw cross hatches',
-                                checked: self.displayCrossHatchesSetting,
-                                onClick: () => {
-                                    self.toggleCrossHatches();
-                                },
-                            },
-                        ]
-                        : []),
                     ...(hasRenderings
                         ? [
                             {
@@ -161,7 +154,8 @@ function stateModelFactory(pluginManager, configSchema) {
                         ]
                         : []),
                     {
-                        label: 'Set color',
+                        label: 'Color',
+                        icon: PaletteIcon,
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 SetColorDialog,
@@ -172,6 +166,19 @@ function stateModelFactory(pluginManager, configSchema) {
                             ]);
                         },
                     },
+                    ...(self.needsScalebar
+                        ? [
+                            {
+                                type: 'checkbox',
+                                icon: VisibilityIcon,
+                                label: 'Show cross hatches',
+                                checked: self.displayCrossHatchesSetting,
+                                onClick: () => {
+                                    self.toggleCrossHatches();
+                                },
+                            },
+                        ]
+                        : []),
                 ];
             },
         };

package/esm/LinearWiggleDisplay/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/esm/LinearWiggleDisplay/renderSvg.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
 import YScaleBar from '../shared/YScaleBar';
@@ -6,8 +6,5 @@ export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.stats && !!self.regionCannotBeRenderedText);
     const { needsScalebar, stats } = self;
     const { offsetPx } = getContainingView(self);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("g", null, await superRenderSvg(opts)),
-        needsScalebar && stats ? (React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            React.createElement(YScaleBar, { model: self, orientation: "left" }))) : null));
+    return (_jsxs(_Fragment, { children: [_jsx("g", { children: await superRenderSvg(opts) }), needsScalebar && stats ? (_jsx("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: _jsx(YScaleBar, { model: self, orientation: "left" }) })) : null] }));
 }

package/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -1,12 +1,12 @@
 import { groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import { drawDensity } from '../drawDensity';
 export default class MultiDensityPlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { sources, features } = props;
         const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
         let feats = [];
+        const { drawDensity } = await import('../drawDensity');
         ctx.save();
         sources.forEach(source => {
             const features = groups[source.name] || [];
@@ -19,6 +19,8 @@ export default class MultiDensityPlotRenderer extends WiggleBaseRenderer {
             feats = feats.concat(reducedFeatures);
         });
         ctx.restore();
-        return { reducedFeatures: feats };
+        return {
+            reducedFeatures: feats,
+        };
     }
 }

package/esm/MultiLineRenderer/MultiLineRenderer.js

@@ -1,10 +1,10 @@
 import { groupBy } from '@jbrowse/core/util';
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
-import { drawLine } from '../drawLine';
 export default class MultiLineRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { sources, features } = props;
         const groups = groupBy(features.values(), f => f.get('source'));
+        const { drawLine } = await import('../drawLine');
         let feats = [];
         sources.forEach(source => {
             const { reducedFeatures } = drawLine(ctx, {

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

@@ -1,9 +1,7 @@
-import React from 'react';
 import type { WiggleDisplayModel } from '../model';
-declare const ColorLegend: ({ model, rowHeight, labelWidth, exportSVG, }: {
+declare const ColorLegend: ({ model, rowHeight, exportSVG, }: {
     model: WiggleDisplayModel;
     rowHeight: number;
-    labelWidth: number;
     exportSVG?: boolean;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ColorLegend;

package/esm/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -1,22 +1,13 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
+import LegendItem from './LegendItem';
 import RectBg from './RectBg';
-const ColorLegend = observer(function ({ model, rowHeight, labelWidth, exportSVG, }) {
-    const { needsCustomLegend, needsScalebar, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
+const ColorLegend = observer(function ({ model, rowHeight, exportSVG, }) {
+    const { needsScalebar, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, labelWidth, } = model;
     const colorBoxWidth = renderColorBoxes ? 15 : 0;
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
     const extraOffset = svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return sources ? (React.createElement(React.Fragment, null,
-        needsFullHeightScalebar ? (React.createElement(RectBg, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
-        sources.map((source, idx) => {
-            const boxHeight = Math.min(20, rowHeight);
-            return (React.createElement(React.Fragment, { key: `${source.name}-${idx}` },
-                needsFullHeightScalebar ? null : (React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })),
-                source.color ? (React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null,
-                canDisplayLabel ? (React.createElement("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, source.name)) : null));
-        }))) : null;
+    return sources ? (_jsxs(_Fragment, { children: [needsFullHeightScalebar ? (_jsx(RectBg, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => (_jsx(LegendItem, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: labelWidth }, `${source.name}-${idx}`)))] })) : null;
 });
 export default ColorLegend;

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

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

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 React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 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 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,4 +1,4 @@
-import React from 'react';
+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';
@@ -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,4 +1,3 @@
-import React from 'react';
 import type { Source } from '../../util';
 export default function SetColorDialog({ model, handleClose, }: {
     model: {
@@ -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,47 +1,33 @@
-import React, { useState } from 'react';
+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 { Button, DialogActions, DialogContent } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import DraggableDialog from './DraggableDialog';
 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(structuredClone(sources || []));
     const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', false);
-    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"))));
+    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 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;