@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.0

package/dist/DotplotDisplay/components/DotplotDisplay.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { DotplotDisplayModel } from '../stateModelFactory';
 declare const DotplotDisplay: (props: {
     model: DotplotDisplayModel;
     children?: React.ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DotplotDisplay;

package/dist/DotplotDisplay/components/DotplotDisplay.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 const DotplotDisplay = (0, mobx_react_1.observer)(function DotplotDisplay(props) {
@@ -12,12 +9,10 @@ const DotplotDisplay = (0, mobx_react_1.observer)(function DotplotDisplay(props)
     const view = (0, util_1.getContainingView)(model);
     const top = view.vview.offsetPx - offsetY;
     const left = -(view.hview.offsetPx - offsetX);
-    return (react_1.default.createElement("div", { style: { position: 'relative' } },
-        react_1.default.createElement(model.ReactComponent2, { ...props, style: {
-                position: 'absolute',
-                top,
-                left,
-            } }),
-        children));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(model.ReactComponent2, { ...props, style: {
+                    position: 'absolute',
+                    top,
+                    left,
+                } }), children] }));
 });
 exports.default = DotplotDisplay;

package/dist/DotplotDisplay/stateModelFactory.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ExportSvgOptions } from '../DotplotView/model';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { ThemeOptions } from '@mui/material';
@@ -87,7 +86,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     renderSvg(opts: ExportSvgOptions & {
         theme?: ThemeOptions;
-    }): Promise<React.JSX.Element | null>;
+    }): Promise<import("react/jsx-runtime").JSX.Element | null>;
 } & {
     afterAttach(): void;
     setLoading(stopToken?: string): void;

package/dist/DotplotDisplay/stateModelFactory.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stateModelFactory = stateModelFactory;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const configuration_1 = require("@jbrowse/core/configuration");
 const models_1 = require("@jbrowse/core/pluggableElementTypes/models");
 const util_1 = require("@jbrowse/core/util");
@@ -62,8 +62,7 @@ function stateModelFactory(configSchema) {
             const { hview, vview } = (0, util_1.getContainingView)(self);
             const offX = -hview.offsetPx + rendering.offsetX;
             const offY = -vview.offsetPx + rendering.offsetY;
-            return (react_1.default.createElement("g", { transform: `translate(${offX} ${-offY})` },
-                react_1.default.createElement(util_1.ReactRendering, { rendering: rendering })));
+            return ((0, jsx_runtime_1.jsx)("g", { transform: `translate(${offX} ${-offY})`, children: (0, jsx_runtime_1.jsx)(util_1.ReactRendering, { rendering: rendering }) }));
         },
     }))
         .actions(self => ({

package/dist/DotplotRenderer/DotplotRenderer.d.ts

@@ -36,7 +36,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         height: number;
@@ -45,7 +45,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         height: number;
@@ -55,7 +55,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
 }

package/dist/DotplotRenderer/DotplotRenderer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/DotplotRenderer/components/DotplotRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
-declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => React.JSX.Element;
+declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => import("react/jsx-runtime").JSX.Element;
 export default DotplotRendering;

package/dist/DotplotRenderer/components/DotplotRendering.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
 const DotplotRendering = (0, mobx_react_1.observer)(function (props) {
-    return react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props });
+    return (0, jsx_runtime_1.jsx)(ui_1.PrerenderedCanvas, { ...props });
 });
 exports.default = DotplotRendering;

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

@@ -1,14 +1,13 @@
-import React from 'react';
 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/dist/DotplotView/components/Axes.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VerticalAxisRaw = exports.VerticalAxis = exports.HorizontalAxisRaw = exports.HorizontalAxis = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const util_1 = require("@jbrowse/core/util");
 const Base1DUtils_1 = require("@jbrowse/core/util/Base1DUtils");
 const material_1 = require("@mui/material");
@@ -29,8 +26,7 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
 exports.HorizontalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
     const { viewWidth, borderY } = model;
     const { classes } = useStyles();
-    return (react_1.default.createElement("svg", { width: viewWidth, height: borderY, className: classes.htext },
-        react_1.default.createElement(exports.HorizontalAxisRaw, { model: model })));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: viewWidth, height: borderY, className: classes.htext, children: (0, jsx_runtime_1.jsx)(exports.HorizontalAxisRaw, { model: model }) }));
 });
 exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
     const { viewWidth, borderX, borderY, hview, htextRotation, hticks } = model;
@@ -57,26 +53,21 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
     })
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
-    return (react_1.default.createElement(react_1.default.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_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
-        }),
-        ticks.map(([tick, x]) => x > 0 && x < width ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...(0, util_1.getFillProps)(theme.palette.text.primary) })) : null),
-        ticks
-            .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => x > 10 && x < width ? (react_1.default.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
-        react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("text", { transform: `rotate(${htextRotation},${xoff},${y})`, x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
+            }), ticks.map(([tick, x]) => x > 0 && x < width ? ((0, jsx_runtime_1.jsx)("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...(0, util_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 ? ((0, jsx_runtime_1.jsx)("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary), children: (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), (0, jsx_runtime_1.jsx)("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...(0, util_1.getFillProps)(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
 });
 exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
     const { borderX, viewHeight } = model;
     const { classes } = useStyles();
-    return (react_1.default.createElement("svg", { className: classes.vtext, width: borderX, height: viewHeight },
-        react_1.default.createElement(exports.VerticalAxisRaw, { model: model })));
+    return ((0, jsx_runtime_1.jsx)("svg", { className: classes.vtext, width: borderX, height: viewHeight, children: (0, jsx_runtime_1.jsx)(exports.VerticalAxisRaw, { model: model }) }));
 });
 exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
     const { viewHeight, borderX, borderY, vview, vtextRotation, vticks } = model;
@@ -103,18 +94,14 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
     })
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
-    return (react_1.default.createElement(react_1.default.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_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
-        }),
-        ticks.map(([tick, y]) => y > 0 ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...(0, util_1.getStrokeProps)(theme.palette.grey[400]) })) : null),
-        ticks
-            .filter(t => t[0].type === 'major')
-            .map(([tick, y]) => y > 10 && y < viewHeight ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
-        react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("text", { transform: `rotate(${vtextRotation},${x},${y})`, x: x, y: yoff, fontSize: 11, textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
+            }), ticks.map(([tick, y]) => y > 0 ? ((0, jsx_runtime_1.jsx)("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...(0, util_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 ? ((0, jsx_runtime_1.jsx)("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary), children: (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), (0, jsx_runtime_1.jsx)("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
 });

package/dist/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/dist/DotplotView/components/CursorIcon.js

@@ -5,13 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CursorMove = CursorMove;
 exports.CursorMouse = CursorMouse;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
 function CursorMove(props) {
-    return (react_1.default.createElement(SvgIcon_1.default, { ...props },
-        react_1.default.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 ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.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" }) }));
 }
 function CursorMouse(props) {
-    return (react_1.default.createElement(SvgIcon_1.default, { ...props },
-        react_1.default.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 ((0, jsx_runtime_1.jsx)(SvgIcon_1.default, { ...props, children: (0, jsx_runtime_1.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/dist/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/dist/DotplotView/components/DotplotControls.js

@@ -3,115 +3,113 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const Icons_1 = require("@jbrowse/core/ui/Icons");
+const CropDin_1 = __importDefault(require("@mui/icons-material/CropDin"));
+const CropLandscape_1 = __importDefault(require("@mui/icons-material/CropLandscape"));
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const SettingsOverscan_1 = __importDefault(require("@mui/icons-material/SettingsOverscan"));
 const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
 const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const CursorIcon_1 = require("./CursorIcon");
 const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                model.zoomOut();
-            } },
-            react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                model.zoomIn();
-            } },
-            react_1.default.createElement(ZoomIn_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector" },
-            react_1.default.createElement(Icons_1.TrackSelector, null)),
-        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
-                {
-                    onClick: () => {
-                        model.squareView();
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                    model.zoomOut();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                    model.zoomIn();
+                }, children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector", children: (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {}) }), (0, jsx_runtime_1.jsx)(CascadingMenuButton_1.default, { menuItems: [
+                    {
+                        label: 'Square view - same bp per pixel',
+                        icon: CropDin_1.default,
+                        onClick: () => {
+                            model.squareView();
+                        },
                     },
-                    label: 'Square view - same base pairs per pixel',
-                },
-                {
-                    onClick: () => {
-                        model.squareViewProportional();
+                    {
+                        label: 'Rectangular view - same total bp',
+                        icon: CropLandscape_1.default,
+                        onClick: () => {
+                            model.squareViewProportional();
+                        },
                     },
-                    label: 'Rectanglularize view - same total bp',
-                },
-                {
-                    onClick: () => {
-                        model.showAllRegions();
+                    {
+                        label: 'Show all regions',
+                        icon: SettingsOverscan_1.default,
+                        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: CursorIcon_1.CursorMove,
+                                type: 'radio',
+                                checked: model.cursorMode === 'move',
+                                onClick: () => {
+                                    model.setCursorMode('move');
+                                },
                             },
-                            label: 'Pan by default, select region when ctrl/cmd key is held',
-                            icon: CursorIcon_1.CursorMove,
-                            type: 'radio',
-                            checked: model.cursorMode === 'move',
-                        },
-                        {
-                            onClick: () => {
-                                model.setCursorMode('crosshair');
+                            {
+                                label: 'Select region by default, pan when ctrl/cmd key is held',
+                                icon: CursorIcon_1.CursorMouse,
+                                type: 'radio',
+                                checked: model.cursorMode === 'crosshair',
+                                onClick: () => {
+                                    model.setCursorMode('crosshair');
+                                },
                             },
-                            label: 'Select region by default, pan when ctrl/cmd key is held',
-                            icon: CursorIcon_1.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_1.default.createElement(MoreVert_1.default, null))));
+                        ],
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) })] }));
 });
 exports.default = DotplotControls;

package/dist/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/dist/DotplotView/components/DotplotTooltipClick.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DotplotTooltipClick = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("./util");
@@ -12,10 +12,6 @@ exports.DotplotTooltipClick = (0, mobx_react_1.observer)(function ({ model, mous
     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_1.default.createElement(BaseTooltip_1.default, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y } },
-        `x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
-        react_1.default.createElement("br", null),
-        `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
-        react_1.default.createElement("br", null))) : null;
+    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y }, children: [`x - ${(0, util_1.locstr)(mousedown[0], hview)}`, (0, jsx_runtime_1.jsx)("br", {}), `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`, (0, jsx_runtime_1.jsx)("br", {})] })) : null;
 });
 exports.default = exports.DotplotTooltipClick;

package/dist/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/dist/DotplotView/components/DotplotTooltipMouseover.js

@@ -3,18 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const BaseTooltip_1 = __importDefault(require("@jbrowse/core/ui/BaseTooltip"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("./util");
 const DotplotTooltipMouseover = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;
-    return mouserect ? (react_1.default.createElement(BaseTooltip_1.default, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+    return mouserect ? ((0, jsx_runtime_1.jsxs)(BaseTooltip_1.default, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
             ? { x: mouserectClient[0], y: mouserectClient[1] }
-            : undefined },
-        `x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
-        react_1.default.createElement("br", null),
-        `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
-        react_1.default.createElement("br", null))) : null;
+            : undefined, children: [`x - ${(0, util_1.locstr)(mouserect[0], hview)}`, (0, jsx_runtime_1.jsx)("br", {}), `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`, (0, jsx_runtime_1.jsx)("br", {})] })) : null;
 });
 exports.default = DotplotTooltipMouseover;

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