@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.0

package/esm/DotplotView/components/Axes.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { useTheme } from '@mui/material';
@@ -23,8 +23,7 @@ const useStyles = makeStyles()(() => ({
 export const HorizontalAxis = observer(function ({ model, }) {
     const { viewWidth, borderY } = model;
     const { classes } = useStyles();
-    return (React.createElement("svg", { width: viewWidth, height: borderY, className: classes.htext },
-        React.createElement(HorizontalAxisRaw, { model: model })));
+    return (_jsx("svg", { width: viewWidth, height: borderY, className: classes.htext, children: _jsx(HorizontalAxisRaw, { model: model }) }));
 });
 export const HorizontalAxisRaw = observer(function ({ model, }) {
     const { viewWidth, borderX, borderY, hview, htextRotation, hticks } = model;
@@ -51,26 +50,21 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
     })
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
-    return (React.createElement(React.Fragment, null,
-        dblocks
-            .filter(region => !hide.has(region.key))
-            .map(region => {
-            const x = region.offsetPx;
-            const y = 0;
-            const xoff = Math.floor(x - hview.offsetPx);
-            return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
-        }),
-        ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) })) : null),
-        ticks
-            .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
-        React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
+    return (_jsxs(_Fragment, { children: [dblocks
+                .filter(region => !hide.has(region.key))
+                .map(region => {
+                const x = region.offsetPx;
+                const y = 0;
+                const xoff = Math.floor(x - hview.offsetPx);
+                return (_jsx("text", { transform: `rotate(${htextRotation},${xoff},${y})`, x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
+            }), ticks.map(([tick, x]) => x > 0 && x < width ? (_jsx("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                .filter(t => t[0].type === 'major')
+                .map(([tick, x]) => x > 10 && x < width ? (_jsx("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
 });
 export const VerticalAxis = observer(function ({ model, }) {
     const { borderX, viewHeight } = model;
     const { classes } = useStyles();
-    return (React.createElement("svg", { className: classes.vtext, width: borderX, height: viewHeight },
-        React.createElement(VerticalAxisRaw, { model: model })));
+    return (_jsx("svg", { className: classes.vtext, width: borderX, height: viewHeight, children: _jsx(VerticalAxisRaw, { model: model }) }));
 });
 export const VerticalAxisRaw = observer(function ({ model, }) {
     const { viewHeight, borderX, borderY, vview, vtextRotation, vticks } = model;
@@ -97,18 +91,14 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
     })
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
-    return (React.createElement(React.Fragment, null,
-        dblocks
-            .filter(region => !hide.has(region.key))
-            .map(region => {
-            const y = region.offsetPx;
-            const x = borderX;
-            const yoff = Math.floor(viewHeight - y + offsetPx);
-            return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
-        }),
-        ticks.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.grey[400]) })) : null),
-        ticks
-            .filter(t => t[0].type === 'major')
-            .map(([tick, y]) => y > 10 && y < viewHeight ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
-        React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
+    return (_jsxs(_Fragment, { children: [dblocks
+                .filter(region => !hide.has(region.key))
+                .map(region => {
+                const y = region.offsetPx;
+                const x = borderX;
+                const yoff = Math.floor(viewHeight - y + offsetPx);
+                return (_jsx("text", { transform: `rotate(${vtextRotation},${x},${y})`, x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
+            }), ticks.map(([tick, y]) => y > 0 ? (_jsx("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.grey[400]) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                .filter(t => t[0].type === 'major')
+                .map(([tick, y]) => y > 10 && y < viewHeight ? (_jsx("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
 });

package/esm/DotplotView/components/CursorIcon.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-export declare function CursorMove(props: SvgIconProps): React.JSX.Element;
-export declare function CursorMouse(props: SvgIconProps): React.JSX.Element;
+export declare function CursorMove(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CursorMouse(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/CursorIcon.js

@@ -1,10 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import SvgIcon from '@mui/material/SvgIcon';
 export function CursorMove(props) {
-    return (React.createElement(SvgIcon, { ...props },
-        React.createElement("path", { fill: "currentColor", d: "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" })));
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" }) }));
 }
 export function CursorMouse(props) {
-    return (React.createElement(SvgIcon, { ...props },
-        React.createElement("path", { fill: "currentColor", d: "M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" })));
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" }) }));
 }

package/esm/DotplotView/components/DotplotControls.d.ts

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

package/esm/DotplotView/components/DotplotControls.js

@@ -1,112 +1,110 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import CropDinIcon from '@mui/icons-material/CropDin';
+import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
 import MoreVert from '@mui/icons-material/MoreVert';
+import SettingsOverscanIcon from '@mui/icons-material/SettingsOverscan';
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
 import { CursorMouse, CursorMove } from './CursorIcon';
 const DotplotControls = observer(function ({ model, }) {
-    return (React.createElement("div", null,
-        React.createElement(IconButton, { onClick: () => {
-                model.zoomOut();
-            } },
-            React.createElement(ZoomOut, null)),
-        React.createElement(IconButton, { onClick: () => {
-                model.zoomIn();
-            } },
-            React.createElement(ZoomIn, null)),
-        React.createElement(IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector" },
-            React.createElement(TrackSelectorIcon, null)),
-        React.createElement(CascadingMenuButton, { menuItems: [
-                {
-                    onClick: () => {
-                        model.squareView();
+    return (_jsxs("div", { children: [_jsx(IconButton, { onClick: () => {
+                    model.zoomOut();
+                }, children: _jsx(ZoomOut, {}) }), _jsx(IconButton, { onClick: () => {
+                    model.zoomIn();
+                }, children: _jsx(ZoomIn, {}) }), _jsx(IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector", children: _jsx(TrackSelectorIcon, {}) }), _jsx(CascadingMenuButton, { menuItems: [
+                    {
+                        label: 'Square view - same bp per pixel',
+                        icon: CropDinIcon,
+                        onClick: () => {
+                            model.squareView();
+                        },
                     },
-                    label: 'Square view - same base pairs per pixel',
-                },
-                {
-                    onClick: () => {
-                        model.squareViewProportional();
+                    {
+                        label: 'Rectangular view - same total bp',
+                        icon: CropLandscapeIcon,
+                        onClick: () => {
+                            model.squareViewProportional();
+                        },
                     },
-                    label: 'Rectanglularize view - same total bp',
-                },
-                {
-                    onClick: () => {
-                        model.showAllRegions();
+                    {
+                        label: 'Show all regions',
+                        icon: SettingsOverscanIcon,
+                        onClick: () => {
+                            model.showAllRegions();
+                        },
                     },
-                    label: 'Show all regions',
-                },
-                {
-                    onClick: () => {
-                        model.setDrawCigar(!model.drawCigar);
+                    {
+                        type: 'checkbox',
+                        label: 'Draw CIGAR',
+                        checked: model.drawCigar,
+                        onClick: () => {
+                            model.setDrawCigar(!model.drawCigar);
+                        },
                     },
-                    type: 'checkbox',
-                    label: 'Draw CIGAR',
-                    checked: model.drawCigar,
-                },
-                {
-                    onClick: () => {
-                        model.setShowPanButtons(!model.showPanButtons);
+                    {
+                        label: 'Show pan buttons',
+                        type: 'checkbox',
+                        checked: model.showPanButtons,
+                        onClick: () => {
+                            model.setShowPanButtons(!model.showPanButtons);
+                        },
                     },
-                    label: 'Show pan buttons',
-                    type: 'checkbox',
-                    checked: model.showPanButtons,
-                },
-                {
-                    label: 'Click and drag mode',
-                    subMenu: [
-                        {
-                            onClick: () => {
-                                model.setCursorMode('move');
+                    {
+                        label: 'Click and drag mode',
+                        subMenu: [
+                            {
+                                label: 'Pan by default, select region when ctrl/cmd key is held',
+                                icon: CursorMove,
+                                type: 'radio',
+                                checked: model.cursorMode === 'move',
+                                onClick: () => {
+                                    model.setCursorMode('move');
+                                },
                             },
-                            label: 'Pan by default, select region when ctrl/cmd key is held',
-                            icon: CursorMove,
-                            type: 'radio',
-                            checked: model.cursorMode === 'move',
-                        },
-                        {
-                            onClick: () => {
-                                model.setCursorMode('crosshair');
+                            {
+                                label: 'Select region by default, pan when ctrl/cmd key is held',
+                                icon: CursorMouse,
+                                type: 'radio',
+                                checked: model.cursorMode === 'crosshair',
+                                onClick: () => {
+                                    model.setCursorMode('crosshair');
+                                },
                             },
-                            label: 'Select region by default, pan when ctrl/cmd key is held',
-                            icon: CursorMouse,
-                            type: 'radio',
-                            checked: model.cursorMode === 'crosshair',
-                        },
-                    ],
-                },
-                {
-                    label: 'Wheel scroll mode',
-                    subMenu: [
-                        {
-                            onClick: () => {
-                                model.setWheelMode('pan');
+                        ],
+                    },
+                    {
+                        label: 'Wheel scroll mode',
+                        subMenu: [
+                            {
+                                label: 'Pans view',
+                                type: 'radio',
+                                checked: model.wheelMode === 'pan',
+                                onClick: () => {
+                                    model.setWheelMode('pan');
+                                },
                             },
-                            label: 'Pans view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'pan',
-                        },
-                        {
-                            onClick: () => {
-                                model.setWheelMode('zoom');
+                            {
+                                label: 'Zooms view',
+                                type: 'radio',
+                                checked: model.wheelMode === 'zoom',
+                                onClick: () => {
+                                    model.setWheelMode('zoom');
+                                },
                             },
-                            label: 'Zooms view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'zoom',
-                        },
-                        {
-                            onClick: () => {
-                                model.setWheelMode('none');
+                            {
+                                label: 'Disable',
+                                type: 'radio',
+                                checked: model.wheelMode === 'none',
+                                onClick: () => {
+                                    model.setWheelMode('none');
+                                },
                             },
-                            label: 'Disable',
-                            type: 'radio',
-                            checked: model.wheelMode === 'none',
-                        },
-                    ],
-                },
-            ] },
-            React.createElement(MoreVert, null))));
+                        ],
+                    },
+                ], children: _jsx(MoreVert, {}) })] }));
 });
 export default DotplotControls;

package/esm/DotplotView/components/DotplotTooltipClick.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
@@ -7,5 +6,5 @@ export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient,
     mousedownClient: Coord;
     xdistance: number;
     ydistance: number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotTooltipClick;

package/esm/DotplotView/components/DotplotTooltipClick.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
 import { locstr } from './util';
@@ -6,10 +6,6 @@ export const DotplotTooltipClick = observer(function ({ model, mousedown, moused
     const { hview, vview, viewHeight } = model;
     const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
     const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
-    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(BaseTooltip, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y } },
-        `x - ${locstr(mousedown[0], hview)}`,
-        React.createElement("br", null),
-        `y - ${locstr(viewHeight - mousedown[1], vview)}`,
-        React.createElement("br", null))) : null;
+    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y }, children: [`x - ${locstr(mousedown[0], hview)}`, _jsx("br", {}), `y - ${locstr(viewHeight - mousedown[1], vview)}`, _jsx("br", {})] })) : null;
 });
 export default DotplotTooltipClick;

package/esm/DotplotView/components/DotplotTooltipMouseover.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
@@ -6,5 +5,5 @@ declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdi
     mouserect: Coord;
     mouserectClient: Coord;
     xdistance: number;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default DotplotTooltipMouseover;

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -1,15 +1,11 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
 import { locstr } from './util';
 const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;
-    return mouserect ? (React.createElement(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+    return mouserect ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
             ? { x: mouserectClient[0], y: mouserectClient[1] }
-            : undefined },
-        `x - ${locstr(mouserect[0], hview)}`,
-        React.createElement("br", null),
-        `y - ${locstr(viewHeight - mouserect[1], vview)}`,
-        React.createElement("br", null))) : null;
+            : undefined, children: [`x - ${locstr(mouserect[0], hview)}`, _jsx("br", {}), `y - ${locstr(viewHeight - mouserect[1], vview)}`, _jsx("br", {})] })) : null;
 });
 export default DotplotTooltipMouseover;

package/esm/DotplotView/components/DotplotView.d.ts

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

package/esm/DotplotView/components/DotplotView.js

@@ -1,4 +1,5 @@
-import React, { Suspense, lazy, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useEffect, useRef, useState } from 'react';
 import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui';
 import { transaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -55,11 +56,11 @@ function getOffset(coord, rect) {
 }
 const RenderedComponent = observer(({ model }) => {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.overlay }, model.tracks.map(track => {
-        const [display] = track.displays;
-        const { RenderingComponent } = display;
-        return RenderingComponent ? (React.createElement(RenderingComponent, { key: track.configuration.trackId, model: display })) : null;
-    })));
+    return (_jsx("div", { className: classes.overlay, children: model.tracks.map(track => {
+            const [display] = track.displays;
+            const { RenderingComponent } = display;
+            return RenderingComponent ? (_jsx(RenderingComponent, { model: display }, track.configuration.trackId)) : null;
+        }) }));
 });
 const DotplotViewInternal = observer(function ({ model, }) {
     var _a, _b;
@@ -174,79 +175,63 @@ const DotplotViewInternal = observer(function ({ model, }) {
         }
         return () => { };
     }, [validSelect, mousedown, mouseup, xdistance, ydistance]);
-    return (React.createElement("div", null,
-        React.createElement(Header, { model: model, selection: !validSelect || !(mousedown && mouserect)
-                ? undefined
-                : {
-                    width: Math.abs(xdistance),
-                    height: Math.abs(ydistance),
-                } }),
-        React.createElement("div", { ref: root, className: classes.root, onMouseLeave: () => {
-                setMouseOvered(false);
-            }, onMouseEnter: () => {
-                setMouseOvered(true);
-            } },
-            React.createElement("div", { className: classes.container },
-                React.createElement(VerticalAxis, { model: model }),
-                React.createElement(HorizontalAxis, { model: model }),
-                React.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (React.createElement(Suspense, { fallback: null },
-                        React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }))) : null,
-                    validSelect ? (React.createElement(Suspense, { fallback: null },
-                        React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }))) : null,
-                    React.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
-                            if (event.button === 0) {
-                                const { clientX, clientY } = event;
-                                setMouseDownClient([clientX, clientY]);
-                                setMouseCurrClient([clientX, clientY]);
-                                setCtrlKeyWasUsed(ctrlKeyDown);
-                            }
-                        } },
-                        React.createElement(Grid, { model: model }, validSelect && mousedown && mouserect ? (React.createElement("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null)),
-                    React.createElement("div", { className: classes.spacer })),
-                React.createElement(RenderedComponent, { model: model }),
-                React.createElement(Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
-                        callback();
-                        setMouseUpClient(undefined);
-                        setMouseDownClient(undefined);
-                    }, onClose: () => {
-                        setMouseUpClient(undefined);
-                        setMouseDownClient(undefined);
-                    }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
-                        ? {
-                            top: mouseupClient[1] + 50,
-                            left: mouseupClient[0] + 50,
-                        }
-                        : undefined, style: { zIndex: 10000 }, menuItems: [
-                        {
-                            label: 'Zoom in',
-                            onClick: () => {
-                                if (mousedown && mouseup) {
-                                    model.zoomInToMouseCoords(mousedown, mouseup);
-                                }
-                                setMouseOvered(false);
-                            },
-                        },
-                        {
-                            label: 'Open linear synteny view',
-                            onClick: () => {
-                                if (mousedown && mouseup) {
-                                    model.onDotplotView(mousedown, mouseup);
-                                }
-                                setMouseOvered(false);
-                            },
-                        },
-                    ] })),
-            React.createElement(ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle }))));
+    return (_jsxs("div", { children: [_jsx(Header, { model: model, selection: !validSelect || !(mousedown && mouserect)
+                    ? undefined
+                    : {
+                        width: Math.abs(xdistance),
+                        height: Math.abs(ydistance),
+                    } }), _jsxs("div", { ref: root, className: classes.root, onMouseLeave: () => {
+                    setMouseOvered(false);
+                }, onMouseEnter: () => {
+                    setMouseOvered(true);
+                }, children: [_jsxs("div", { className: classes.container, children: [_jsx(VerticalAxis, { model: model }), _jsx(HorizontalAxis, { model: model }), _jsxs("div", { ref: ref, className: classes.content, children: [mouseOvered && validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null, _jsx("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
+                                            if (event.button === 0) {
+                                                const { clientX, clientY } = event;
+                                                setMouseDownClient([clientX, clientY]);
+                                                setMouseCurrClient([clientX, clientY]);
+                                                setCtrlKeyWasUsed(ctrlKeyDown);
+                                            }
+                                        }, children: _jsx(Grid, { model: model, children: validSelect && mousedown && mouserect ? (_jsx("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null }) }), _jsx("div", { className: classes.spacer })] }), _jsx(RenderedComponent, { model: model }), _jsx(Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
+                                    callback();
+                                    setMouseUpClient(undefined);
+                                    setMouseDownClient(undefined);
+                                }, onClose: () => {
+                                    setMouseUpClient(undefined);
+                                    setMouseDownClient(undefined);
+                                }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
+                                    ? {
+                                        top: mouseupClient[1] + 50,
+                                        left: mouseupClient[0] + 50,
+                                    }
+                                    : undefined, style: { zIndex: 10000 }, menuItems: [
+                                    {
+                                        label: 'Zoom in',
+                                        onClick: () => {
+                                            if (mousedown && mouseup) {
+                                                model.zoomInToMouseCoords(mousedown, mouseup);
+                                            }
+                                            setMouseOvered(false);
+                                        },
+                                    },
+                                    {
+                                        label: 'Open linear synteny view',
+                                        onClick: () => {
+                                            if (mousedown && mouseup) {
+                                                model.onDotplotView(mousedown, mouseup);
+                                            }
+                                            setMouseOvered(false);
+                                        },
+                                    },
+                                ] })] }), _jsx(ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
 });
 const DotplotView = observer(function ({ model }) {
     const { initialized, loading, error } = model;
     if ((!initialized && !loading) || error) {
-        return React.createElement(ImportForm, { model: model });
+        return _jsx(ImportForm, { model: model });
     }
     if (loading) {
-        return React.createElement(LoadingEllipses, { variant: "h6" });
+        return _jsx(LoadingEllipses, { variant: "h6" });
     }
-    return React.createElement(DotplotViewInternal, { model: model });
+    return _jsx(DotplotViewInternal, { model: model });
 });
 export default DotplotView;

package/esm/DotplotView/components/DotplotWarnings.d.ts

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

package/esm/DotplotView/components/DotplotWarnings.js

@@ -1,4 +1,5 @@
-import React, { lazy, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, useState } from 'react';
 import { Alert, Button } from '@mui/material';
 import { observer } from 'mobx-react';
 const WarningDialog = lazy(() => import('./WarningDialog'));
@@ -6,17 +7,12 @@ const DotplotWarnings = observer(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
     const [shown, setShown] = useState(false);
     const [hide, setHide] = useState(false);
-    return trackWarnings.length && !hide ? (React.createElement(Alert, { severity: "warning" },
-        "Warnings during render",
-        ' ',
-        React.createElement(Button, { onClick: () => {
-                setShown(true);
-            } }, "More info"),
-        shown ? (React.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                setShown(false);
-            } })) : null,
-        React.createElement(Button, { variant: "contained", onClick: () => {
-                setHide(true);
-            } }, "Dismiss"))) : null;
+    return trackWarnings.length && !hide ? (_jsxs(Alert, { severity: "warning", children: ["Warnings during render", ' ', _jsx(Button, { onClick: () => {
+                    setShown(true);
+                }, children: "More info" }), shown ? (_jsx(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                    setShown(false);
+                } })) : null, _jsx(Button, { variant: "contained", onClick: () => {
+                    setHide(true);
+                }, children: "Dismiss" })] })) : null;
 });
 export default DotplotWarnings;

package/esm/DotplotView/components/ExportSvgDialog.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import type { ExportSvgOptions } from '../model';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };
     handleClose: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;