@jbrowse/plugin-dotplot-view 2.6.3 → 2.7.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-declare const _default: ({ model, }: {
+declare const PanButtons: ({ model, }: {
     model: DotplotViewModel;
 }) => React.JSX.Element;
-export default _default;
+export default PanButtons;

package/dist/DotplotView/components/PanButtons.js

@@ -29,7 +29,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         margin: 0,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function PanButtons({ model, }) {
+const PanButtons = (0, mobx_react_1.observer)(function PanButtons({ model, }) {
     const { classes } = useStyles();
     return (react_1.default.createElement(material_1.Paper, { className: classes.dpad, elevation: 6 },
         react_1.default.createElement("div", null),
@@ -57,3 +57,4 @@ exports.default = (0, mobx_react_1.observer)(function PanButtons({ model, }) {
             } },
             react_1.default.createElement(ZoomOut_1.default, null))));
 });
+exports.default = PanButtons;

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

@@ -9,8 +9,8 @@ interface TrackWarning {
         }[];
     }[];
 }
-declare const _default: ({ trackWarnings, handleClose, }: {
+declare const WarningDialog: ({ trackWarnings, handleClose, }: {
     handleClose: () => void;
     trackWarnings: TrackWarning[];
 }) => React.JSX.Element;
-export default _default;
+export default WarningDialog;

package/dist/DotplotView/components/WarningDialog.js

@@ -16,7 +16,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         minWidth: 600,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function WarningDialog({ trackWarnings, handleClose, }) {
+const WarningDialog = (0, mobx_react_1.observer)(function WarningDialog({ trackWarnings, handleClose, }) {
     const { classes } = useStyles();
     const rows = [];
     for (let i = 0; i < trackWarnings.length; i++) {
@@ -38,3 +38,4 @@ exports.default = (0, mobx_react_1.observer)(function WarningDialog({ trackWarni
             react_1.default.createElement("div", { style: { height: 600, width: '100%', overflow: 'auto' } },
                 react_1.default.createElement(x_data_grid_1.DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true })))));
 });
+exports.default = WarningDialog;

package/dist/DotplotView/components/util.js

@@ -66,9 +66,7 @@ function makeTicks(regions, bpPerPx, emitMajor = true, emitMinor = true) {
     const ticks = [];
     const gridPitch = chooseGridPitch(bpPerPx, 60, 15);
     const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch;
-    for (let i = 0; i < regions.length; i++) {
-        const region = regions[i];
-        const { start, end, refName } = region;
+    for (const { start, end, refName } of regions) {
         let index = 0;
         const minBase = start;
         const maxBase = end;
@@ -77,8 +75,7 @@ function makeTicks(regions, bpPerPx, emitMajor = true, emitMinor = true) {
                 ticks.push({ type: 'minor', base: base - 1, index, refName });
                 index += 1;
             }
-            else if (emitMajor &&
-                Math.abs(base - region.start) > gridPitch.minorPitch) {
+            else if (emitMajor && Math.abs(base - start) > gridPitch.minorPitch) {
                 ticks.push({ type: 'major', base: base - 1, index, refName });
                 index += 1;
             }

package/dist/DotplotView/model.d.ts

@@ -213,28 +213,33 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly textSearchAdapter: any;
         readonly adapterType: import("@jbrowse/core/pluggableElementTypes").AdapterType;
         readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-        readonly canConfigure: any;
+        readonly canConfigure: boolean | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | undefined;
     } & {
         setMinimized(flag: boolean): void;
-        activateConfigurationUI(): void;
-        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number;
-        replaceDisplay(oldId: string, newId: string, initialSnapshot?: {} | undefined): void; /**
+        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void; /**
          * #property
          */
+        hideDisplay(displayId: string): number;
+        replaceDisplay(oldId: string, newId: string, initialSnapshot?: {} | undefined): void;
     } & {
         trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-            type: string; /**
+            type: string;
+            label: string; /**
              * #property
              */
-            label: string;
             subMenu: {
                 type: string;
                 label: string;
                 checked: boolean;
                 onClick: () => void;
             }[];
-        })[];
+        })[]; /**
+         * #property
+         */
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }, {

package/dist/DotplotView/model.js

@@ -507,8 +507,11 @@ function stateModelFactory(pm) {
         },
         // if any of our assemblies are temporary assemblies
         beforeDestroy() {
+            var _a;
             const session = (0, util_1.getSession)(self);
-            self.assemblyNames.forEach(asm => session.removeTemporaryAssembly(asm));
+            for (const name in self.assemblyNames) {
+                (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
+            }
         },
         afterAttach() {
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {

package/dist/DotplotView/svgcomponents/SVGBackground.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const color_1 = __importDefault(require("color"));
 const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
 function SVGBackground({ width, height, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: (0, color_1.default)(theme.palette.background.default).hex() }));
+    return (react_1.default.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
 }
 exports.default = SVGBackground;

package/dist/ServerSideRenderedBlockContent.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-declare const _default: ({ model, style, }: {
+declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;
         message?: string;
@@ -9,4 +9,4 @@ declare const _default: ({ model, style, }: {
     };
     style: CSSProperties;
 }) => React.JSX.Element | null;
-export default _default;
+export default ServerSideRenderedDotplotContent;

package/dist/ServerSideRenderedBlockContent.js

@@ -69,7 +69,7 @@ function BlockError({ error }) {
     return (react_1.default.createElement("div", { className: classes.blockError },
         react_1.default.createElement(material_1.Typography, null, `${error}`)));
 }
-exports.default = (0, mobx_react_1.observer)(function ({ model, style, }) {
+const ServerSideRenderedDotplotContent = (0, mobx_react_1.observer)(function ({ model, style, }) {
     if (model.error) {
         return react_1.default.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
     }
@@ -84,3 +84,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ model, style, }) {
     }
     return null;
 });
+exports.default = ServerSideRenderedDotplotContent;

package/dist/ServerSideSyntenyRendering.d.ts

@@ -3,21 +3,16 @@ import React from 'react';
  * A block whose content is rendered outside of the main thread and hydrated by this
  * component.
  */
-declare function ServerSideSyntenyRendering({ model, }: {
-    model: {
-        imageData: string;
-        style: Record<string, string>;
-        renderProps: {
-            width: number;
-            height: number;
-            highResolutionScaling?: number;
-        };
-    };
-}): React.JSX.Element;
-declare namespace ServerSideSyntenyRendering {
-    var propTypes: {
-        model: import("prop-types").Validator<any>;
+interface ModelType {
+    imageData: string;
+    style: Record<string, string>;
+    renderProps: {
+        width: number;
+        height: number;
+        highResolutionScaling?: number;
     };
 }
-declare const _default: typeof ServerSideSyntenyRendering;
-export default _default;
+declare const ServerSideSyntenyRendering: ({ model, }: {
+    model: ModelType;
+}) => React.JSX.Element;
+export default ServerSideSyntenyRendering;

package/dist/ServerSideSyntenyRendering.js

@@ -23,15 +23,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const offscreenCanvasPonyfill_1 = require("@jbrowse/core/util/offscreenCanvasPonyfill");
-/**
- * A block whose content is rendered outside of the main thread and hydrated by this
- * component.
- */
-function ServerSideSyntenyRendering({ model, }) {
+const ServerSideSyntenyRendering = (0, mobx_react_1.observer)(function ({ model, }) {
     const { imageData, style, renderProps } = model;
     const { width, height, highResolutionScaling = 1 } = renderProps;
     const featureCanvas = (0, react_1.useRef)(null);
@@ -46,8 +41,5 @@ function ServerSideSyntenyRendering({ model, }) {
         setDone(true);
     }, [height, imageData, width]);
     return (react_1.default.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
-}
-ServerSideSyntenyRendering.propTypes = {
-    model: mobx_react_1.PropTypes.observableObject.isRequired,
-};
-exports.default = (0, mobx_react_1.observer)(ServerSideSyntenyRendering);
+});
+exports.default = ServerSideSyntenyRendering;

package/esm/DotplotDisplay/components/DotplotDisplay.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { DotplotDisplayModel } from '../stateModelFactory';
-declare function DotplotDisplay(props: {
+declare const DotplotDisplay: (props: {
     model: DotplotDisplayModel;
     children?: React.ReactNode;
-}): React.JSX.Element;
-declare const _default: typeof DotplotDisplay;
-export default _default;
+}) => React.JSX.Element;
+export default DotplotDisplay;

package/esm/DotplotDisplay/components/DotplotDisplay.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { getContainingView } from '@jbrowse/core/util';
-function DotplotDisplay(props) {
+const DotplotDisplay = observer(function DotplotDisplay(props) {
     const { model, children } = props;
     const { offsetX = 0, offsetY = 0 } = model.data || {};
     const view = getContainingView(model);
@@ -14,5 +14,5 @@ function DotplotDisplay(props) {
                 left,
             } }),
         children));
-}
-export default observer(DotplotDisplay);
+});
+export default DotplotDisplay;

package/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -50,7 +50,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
-            id: string;
+            id: string; /**
+             * #getter
+             */
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -72,9 +74,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: React.FC<any> | undefined;
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[]; /**
-     * #action
-     */
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
 } & {

package/esm/DotplotDisplay/stateModelFactory.js

@@ -37,9 +37,9 @@ export function stateModelFactory(configSchema) {
     })))
         .views(self => ({
         get shouldDisplay() {
-            const view = getContainingView(self);
-            return (view.vview.bpPerPx === self.data.bpPerPxY &&
-                view.hview.bpPerPx === self.data.bpPerPxX);
+            const { vview, hview } = getContainingView(self);
+            return (vview.bpPerPx === self.data.bpPerPxY &&
+                hview.bpPerPx === self.data.bpPerPxX);
         },
         /**
          * #getter

package/esm/DotplotRenderer/DotplotRenderer.js

@@ -43,7 +43,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         return args;
     }
     async drawDotplot(ctx, props) {
-        var _a, _b, _c;
+        var _a, _b;
         const { config, views, height, drawCigar, theme } = props;
         const color = readConfObject(config, 'color');
         const posColor = readConfObject(config, 'posColor');
@@ -127,7 +127,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
             width: vview.width,
         };
         const t = createJBrowseTheme(theme);
-        (_c = hview.features) === null || _c === void 0 ? void 0 : _c.forEach(feature => {
+        for (const feature of hview.features || []) {
             const strand = feature.get('strand') || 1;
             const start = strand === 1 ? feature.get('start') : feature.get('end');
             const end = strand === 1 ? feature.get('end') : feature.get('start');
@@ -185,6 +185,8 @@ export default class DotplotRenderer extends ComparativeRenderer {
                         const cigarOps = parseCigar(cigar);
                         ctx.beginPath();
                         ctx.moveTo(currX, height - currY);
+                        let lastDrawnX = currX;
+                        let lastDrawnY = currX;
                         for (let i = 0; i < cigarOps.length; i += 2) {
                             const val = +cigarOps[i];
                             const op = cigarOps[i + 1];
@@ -200,7 +202,13 @@ export default class DotplotRenderer extends ComparativeRenderer {
                             }
                             currX = clampWithWarnX(currX, b1, b2, feature);
                             currY = clampWithWarnY(currY, e1, e2, feature);
-                            ctx.lineTo(currX, height - currY);
+                            // only draw a line segment if it is bigger than 0.5px
+                            if (Math.abs(currX - lastDrawnX) > 0.5 ||
+                                Math.abs(currY - lastDrawnY) > 0.5) {
+                                ctx.lineTo(currX, height - currY);
+                                lastDrawnX = currX;
+                                lastDrawnY = currY;
+                            }
                         }
                         ctx.stroke();
                     }
@@ -228,7 +236,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
                     }
                 }
             }
-        });
+        }
         return { warnings };
     }
     async render(renderProps) {

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
-declare function DotplotRendering(props: DotplotRenderArgsDeserialized): React.JSX.Element;
-declare const _default: typeof DotplotRendering;
-export default _default;
+declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => React.JSX.Element;
+export default DotplotRendering;

package/esm/DotplotRenderer/components/DotplotRendering.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-function DotplotRendering(props) {
+const DotplotRendering = observer(function (props) {
     return React.createElement(PrerenderedCanvas, { ...props });
-}
-export default observer(DotplotRendering);
+});
+export default DotplotRendering;

package/esm/DotplotView/blockTypes.d.ts

@@ -23,15 +23,7 @@ export declare class BaseBlock {
     /**
      * a block that should be shown as filled with data
      */
-    constructor(data: any);
-    /**
-     * rename the reference sequence of this block and return a new one
-     *
-     * @param refName -
-     * @returns either a new block with a renamed reference sequence,
-     * or the same block, if the ref name is not actually different
-     */
-    renameReference(refName: string): any;
+    constructor(data: Record<string, any>);
     toRegion(): {
         refName: string;
         start: number;

package/esm/DotplotView/blockTypes.js

@@ -1,3 +1,4 @@
+import { sum } from '@jbrowse/core/util';
 export class BlockSet {
     constructor(blocks = []) {
         this.blocks = blocks;
@@ -28,7 +29,7 @@ export class BlockSet {
     }
     get totalWidthPx() {
         return this.blocks.length
-            ? this.blocks.map(blocks => blocks.widthPx).reduce((a, b) => a + b)
+            ? sum(this.blocks.map(blocks => blocks.widthPx))
             : 0;
     }
     get offsetPx() {
@@ -53,20 +54,6 @@ export class BaseBlock {
         this.end = data.end;
         this.key = data.key;
     }
-    /**
-     * rename the reference sequence of this block and return a new one
-     *
-     * @param refName -
-     * @returns either a new block with a renamed reference sequence,
-     * or the same block, if the ref name is not actually different
-     */
-    renameReference(refName) {
-        if (this.refName && refName !== this.refName) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return new this.constructor({ ...this, refName });
-        }
-        return this;
-    }
     toRegion() {
         return {
             refName: this.refName,

package/esm/DotplotView/components/Axes.js

@@ -38,6 +38,20 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
         width,
         staticBlocks: hview.staticBlocks,
     };
+    const ticks = hticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = bpToPx({
+                refName: tick.refName,
+                coord: tick.base,
+                self: hviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .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))
@@ -47,24 +61,12 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
             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, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
         }),
-        hticks.map(tick => {
-            var _a;
-            const x = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.divider }));
+        ticks.map(([tick, x]) => {
+            return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
         }),
-        hticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const x = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, x]) => {
             const y = 0;
             return x > 10 ? (React.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
         }),
@@ -87,6 +89,20 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
         width,
         staticBlocks: vview.staticBlocks,
     };
+    const ticks = vticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = bpToPx({
+                refName: tick.refName,
+                coord: tick.base,
+                self: vviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .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))
@@ -96,24 +112,10 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
             const yoff = Math.floor(viewHeight - y + offsetPx);
             return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
         }),
-        vticks.map(tick => {
-            var _a;
-            const y = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (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, stroke: theme.palette.divider }));
-        }),
-        vticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const y = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks.map(([tick, y]) => (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, stroke: theme.palette.grey[400] }))),
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, y]) => {
             return y > 10 ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
         }),
         React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));

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

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

package/esm/DotplotView/components/DotplotControls.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+// icons
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import MoreVert from '@mui/icons-material/MoreVert';
+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.zoomOutButton },
+            React.createElement(ZoomOut, null)),
+        React.createElement(IconButton, { onClick: model.zoomInButton },
+            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(),
+                    label: 'Square view - same base pairs per pixel',
+                },
+                {
+                    onClick: () => model.squareViewProportional(),
+                    label: 'Rectanglularize view - same total bp',
+                },
+                {
+                    onClick: () => model.showAllRegions(),
+                    label: 'Show all regions',
+                },
+                {
+                    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,
+                },
+                {
+                    label: 'Click and drag mode',
+                    subMenu: [
+                        {
+                            onClick: () => model.setCursorMode('move'),
+                            label: 'Pan by default, select region when ctrl key is held',
+                            icon: CursorMove,
+                            type: 'radio',
+                            checked: model.cursorMode === 'move',
+                        },
+                        {
+                            onClick: () => model.setCursorMode('crosshair'),
+                            label: 'Select region by default, pan when ctrl key is held',
+                            icon: CursorMouse,
+                            type: 'radio',
+                            checked: model.cursorMode === 'crosshair',
+                        },
+                    ],
+                },
+                {
+                    label: 'Wheel scroll mode',
+                    subMenu: [
+                        {
+                            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('none'),
+                            label: 'Disable',
+                            type: 'radio',
+                            checked: model.wheelMode === 'none',
+                        },
+                    ],
+                },
+            ] },
+            React.createElement(MoreVert, null))));
+});
+export default DotplotControls;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-export declare function round(value: number): number;
 type Coord = [number, number] | undefined;
 export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
     model: DotplotViewModel;

package/esm/DotplotView/components/DotplotTooltip.js

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { locstr } from './util';
 import { Portal, alpha } from '@mui/material';
 import { usePopper } from 'react-popper';
-export function round(value) {
+function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
 const useStyles = makeStyles()(theme => ({