@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/esm/DotplotView/1dview.d.ts

@@ -1,4 +1,4 @@
-import { Instance } from 'mobx-state-tree';
+import type { Instance } from 'mobx-state-tree';
 declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
@@ -53,39 +53,14 @@ declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 declare const DotplotHView: import("mobx-state-tree").IModelType<{
@@ -142,39 +117,14 @@ declare const DotplotHView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 } & {
     readonly width: any;
@@ -233,42 +183,17 @@ declare const DotplotVView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 } & {
     readonly width: any;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export { DotplotVView, DotplotHView, Dotplot1DView };
+export { Dotplot1DView, DotplotHView, DotplotVView };
 export type Dotplot1DViewModel = Instance<typeof Dotplot1DView>;

package/esm/DotplotView/1dview.js

@@ -1,64 +1,35 @@
-import { getParent } from 'mobx-state-tree';
-import { observable } from 'mobx';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
-/**
- * #stateModel Dotplot1DView
- * ref https://mobx-state-tree.js.org/concepts/volatiles on volatile state used here
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { observable } from 'mobx';
+import { getParent } from 'mobx-state-tree';
+function x() { }
 const Dotplot1DView = Base1DView.extend(self => {
     const scaleFactor = observable.box(1);
     return {
         views: {
-            /**
-             * #getter
-             * this uses padding=false and elision=false
-             */
             get dynamicBlocks() {
                 return calculateDynamicBlocks(self, false, false);
             },
-            /**
-             * #getter
-             */
             get scaleFactor() {
                 return scaleFactor.get();
             },
-            /**
-             * #getter
-             */
             get maxBpPerPx() {
                 return self.totalBp / (self.width - 50);
             },
-            /**
-             * #getter
-             */
             get minBpPerPx() {
                 return 1 / 50;
             },
-            /**
-             * #getter
-             */
             get maxOffset() {
                 return self.displayedRegionsTotalPx - self.width * 0.2;
             },
-            /**
-             * #getter
-             */
             get minOffset() {
                 return -self.width * 0.8;
             },
         },
         actions: {
-            /**
-             * #action
-             */
             setScaleFactor(n) {
                 scaleFactor.set(n);
             },
-            /**
-             * #action
-             */
             center() {
                 const centerBp = self.totalBp / 2;
                 const centerPx = centerBp / self.bpPerPx;
@@ -81,4 +52,4 @@ const DotplotVView = Dotplot1DView.extend(self => ({
         },
     },
 }));
-export { DotplotVView, DotplotHView, Dotplot1DView };
+export { Dotplot1DView, DotplotHView, DotplotVView };

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

@@ -1,14 +1,13 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 export declare const HorizontalAxis: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const HorizontalAxisRaw: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const VerticalAxis: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const VerticalAxisRaw: ({ model, }: {
     model: DotplotViewModel;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/Axes.js

@@ -1,11 +1,10 @@
-import React from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
+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';
-// locals
+import { observer } from 'mobx-react';
+import { getSnapshot } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
 import { getBlockLabelKeysToHide } from './util';
 const useStyles = makeStyles()(() => ({
     vtext: {
@@ -24,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;
@@ -52,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;
@@ -98,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 { SvgIconProps } from '@mui/material/SvgIcon';
-import React from 'react';
-export declare function CursorMove(props: SvgIconProps): React.JSX.Element;
-export declare function CursorMouse(props: SvgIconProps): React.JSX.Element;
+import type { SvgIconProps } from '@mui/material/SvgIcon';
+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 { jsx as _jsx } from "react/jsx-runtime";
 import SvgIcon from '@mui/material/SvgIcon';
-import React from 'react';
 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 { DotplotViewModel } from '../model';
+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,113 +1,110 @@
-import React from 'react';
-import { IconButton } from '@mui/material';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import ZoomIn from '@mui/icons-material/ZoomIn';
+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';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 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,5 +1,4 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
@@ -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,15 +1,11 @@
-import React from 'react';
-import { observer } from 'mobx-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';
 export const DotplotTooltipClick = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
     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,10 +1,9 @@
-import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
 declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
     model: DotplotViewModel;
     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 { observer } from 'mobx-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;