@jbrowse/plugin-dotplot-view 2.8.0 → 2.10.0

package/dist/DotplotView/components/Axes.js

@@ -67,15 +67,10 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             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, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
         }),
-        ticks.map(([tick, x]) => {
-            return (react_1.default.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] }));
-        }),
+        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, stroke: theme.palette.grey[400] })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => {
-            const y = 0;
-            return x > 10 ? (react_1.default.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" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
-        }),
+            .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)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
         react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
 });
 exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
@@ -118,11 +113,9 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             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, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
         }),
-        ticks.map(([tick, y]) => (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, stroke: theme.palette.grey[400] }))),
+        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, stroke: theme.palette.grey[400] })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, y]) => {
-            return y > 10 ? (react_1.default.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 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
-        }),
+            .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", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
         react_1.default.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/dist/DotplotView/components/DotplotTooltip.d.ts

@@ -1,18 +1,17 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
 type Coord = [number, number] | undefined;
-export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
+export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, }: {
     model: DotplotViewModel;
     mouserect: Coord;
     mouserectClient: Coord;
     xdistance: number;
-    ydistance: number;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;
 export declare const TooltipWhereClicked: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
     mousedown: Coord;
     mousedownClient: Coord;
     xdistance: number;
     ydistance: number;
-}) => React.JSX.Element;
+}) => React.JSX.Element | null;
 export {};

package/dist/DotplotView/components/DotplotTooltip.js

@@ -1,35 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const util_1 = require("./util");
 const material_1 = require("@mui/material");
-const react_popper_1 = require("react-popper");
+const react_2 = require("@floating-ui/react");
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
@@ -50,77 +30,54 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         wordWrap: 'break-word',
     },
 }));
-const blank = { left: 0, top: 0, width: 0, height: 0 };
-exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, ydistance, }) {
-    var _a;
+exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
+    var _a, _b;
     const { classes } = useStyles();
     const { hview, vview, viewHeight } = model;
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const ref = (0, react_1.useRef)(null);
-    const rect = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
-    const offset = 6;
-    const w = rect.height + offset * 2;
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = (0, react_1.useMemo)(() => ({
-        getBoundingClientRect: () => {
-            const x = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[0]) || 0) - (xdistance < 0 ? w : 0);
-            const y = offset + ((mouserectClient === null || mouserectClient === void 0 ? void 0 : mouserectClient[1]) || 0) - (ydistance < 0 ? w : 0);
-            return {
-                top: y,
-                left: x,
-                bottom: y,
-                right: x,
-                width: 0,
-                height: 0,
-                x,
-                y,
-                toJSON() { },
-            };
-        },
-    }), [mouserectClient, xdistance, ydistance, w]);
-    const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
+    const theme = (0, material_1.useTheme)();
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
         placement: xdistance < 0 ? 'left' : 'right',
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, mouserect ? (react_1.default.createElement(material_1.Portal, null,
-        react_1.default.createElement("div", { ref: setAnchorEl, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+    const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
+        ? {
+            x: mouserectClient[0],
+            y: mouserectClient[1],
+        }
+        : undefined);
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return mouserect ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             `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));
+            react_1.default.createElement("br", null)))) : null;
 });
 exports.TooltipWhereClicked = (0, mobx_react_1.observer)(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
+    var _a, _b;
     const { classes } = useStyles();
     const { hview, vview, viewHeight } = model;
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = (0, react_1.useMemo)(() => ({
-        getBoundingClientRect: () => {
-            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 {
-                top: y,
-                left: x,
-                bottom: y,
-                right: x,
-                width: 0,
-                height: 0,
-                x,
-                y,
-                toJSON() { },
-            };
-        },
-    }), [mousedownClient, xdistance, ydistance]);
-    const { styles, attributes } = (0, react_popper_1.usePopper)(virtElement, anchorEl, {
+    const theme = (0, material_1.useTheme)();
+    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);
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
         placement: xdistance < 0 ? 'right' : 'left',
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, null,
-        react_1.default.createElement("div", { ref: setAnchorEl, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+    const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             `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));
+            react_1.default.createElement("br", null)))) : null;
 });

package/dist/DotplotView/components/DotplotView.js

@@ -60,7 +60,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         width: '100%',
         gridRow: '1/2',
         gridColumn: '2/2',
-        zIndex: 100,
+        zIndex: 100, // needs to be below controls
         '& path': {
             cursor: 'crosshair',
             fill: 'none',
@@ -109,8 +109,8 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
     const mousedown = getOffset(mousedownClient, svg);
     const mousecurr = getOffset(mousecurrClient, svg);
     const mouseup = getOffset(mouseupClient, svg);
-    const mouserectClient = mouseupClient || mousecurrClient;
     const mouserect = mouseup || mousecurr;
+    const mouserectClient = mouseupClient || mousecurrClient;
     const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
     const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
     const { hview, vview, wheelMode, cursorMode } = model;
@@ -175,22 +175,26 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
         hview,
         vview,
     ]);
-    // detect a mouseup after a mousedown was submitted, autoremoves mouseup
-    // once that single mouseup is set
+    // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
+    // that single mouseup is set
     (0, react_1.useEffect)(() => {
-        function globalMouseUp(event) {
-            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-                setMouseUpClient([event.clientX, event.clientY]);
-            }
-            else {
-                setMouseDownClient(undefined);
-            }
-        }
         if (mousedown && !mouseup) {
+            function globalMouseUp(event) {
+                if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
+                    setMouseUpClient([event.clientX, event.clientY]);
+                }
+                else {
+                    setMouseDownClient(undefined);
+                }
+            }
             window.addEventListener('mouseup', globalMouseUp, true);
-            return () => window.removeEventListener('mouseup', globalMouseUp, true);
+            return () => {
+                window.removeEventListener('mouseup', globalMouseUp, true);
+            };
+        }
+        else {
+            return () => { };
         }
-        return () => { };
     }, [
         validSelect,
         mousedown,
@@ -213,7 +217,7 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
                 react_1.default.createElement(Axes_1.VerticalAxis, { model: model }),
                 react_1.default.createElement(Axes_1.HorizontalAxis, { model: model }),
                 react_1.default.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, ydistance: ydistance })) : null,
+                    mouseOvered && validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
                     validSelect ? (react_1.default.createElement(DotplotTooltip_1.TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
                     react_1.default.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
                             if (event.button === 0) {

package/dist/DotplotView/components/ImportForm/index.js

@@ -46,7 +46,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = (0, react_1.useState)('none');
+    const [choice, setChoice] = (0, react_1.useState)('tracklist');
     (0, react_1.useEffect)(() => {
         if (choice === 'none') {
             setSessionTrackData(undefined);

package/dist/DotplotView/model.d.ts

@@ -7,13 +7,16 @@ type Coord = [number, number];
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
     filename?: string;
-    Wrapper?: React.FC<any>;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
     themeName?: string;
 }
 /**
  * #stateModel DotplotView
  * #category view
- * extends  `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export default function stateModelFactory(pm: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -59,23 +62,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly assemblyNames: string[];
         readonly displayedRegionsTotalPx: number;
         readonly maxOffset: number;
-        readonly minOffset: number; /**
-         * #stateModel DotplotView
-         * #category view
-         * extends  `BaseViewModel`
-         */
+        readonly minOffset: number;
         readonly totalBp: number;
     } & {
         readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
         readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-        readonly currBp: number; /**
-         * #property
-         */
+        readonly currBp: number;
     } & {
         pxToBp(px: number): {
-            coord: number; /**
-             * #property
-             */
+            coord: number;
             index: number;
             refName: string;
             oob: boolean;
@@ -94,18 +89,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined;
+            regionNumber?: number | undefined; /**
+             * #property
+             */
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
         showAllRegions(): void;
-        zoomOut(): void; /**
-         * #property
-         */
+        zoomOut(): void;
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
+         * #property
+         * this represents tracks specific to this view specifically used
+         * for read vs ref dotplots where this track would not really apply
+         * elsewhere
+         */
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -150,23 +150,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly assemblyNames: string[];
         readonly displayedRegionsTotalPx: number;
         readonly maxOffset: number;
-        readonly minOffset: number; /**
-         * #stateModel DotplotView
-         * #category view
-         * extends  `BaseViewModel`
-         */
+        readonly minOffset: number;
         readonly totalBp: number;
     } & {
         readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
         readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-        readonly currBp: number; /**
-         * #property
-         */
+        readonly currBp: number;
     } & {
         pxToBp(px: number): {
-            coord: number; /**
-             * #property
-             */
+            coord: number;
             index: number;
             refName: string;
             oob: boolean;
@@ -185,18 +177,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined;
+            regionNumber?: number | undefined; /**
+             * #property
+             */
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
         showAllRegions(): void;
-        zoomOut(): void; /**
-         * #property
-         */
+        zoomOut(): void;
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
+         * #property
+         * this represents tracks specific to this view specifically used
+         * for read vs ref dotplots where this track would not really apply
+         * elsewhere
+         */
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -233,9 +230,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     } & {
         setMinimized(flag: boolean): void;
         showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        /**
-         * #property
-         */
         hideDisplay(displayId: string): number; /**
          * #property
          */
@@ -243,18 +237,20 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     } & {
         trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
             type: string;
-            label: string;
+            label: string; /**
+             * #property
+             */
             subMenu: {
                 type: string;
                 label: string; /**
                  * #property
                  */
                 checked: boolean;
-                onClick: () => void;
+                onClick: () => void; /**
+                 * #property
+                 */
             }[];
-        })[]; /**
-         * #property
-         */
+        })[];
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }, {
@@ -362,23 +358,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly assemblyNames: string[];
         readonly displayedRegionsTotalPx: number;
         readonly maxOffset: number;
-        readonly minOffset: number; /**
-         * #stateModel DotplotView
-         * #category view
-         * extends  `BaseViewModel`
-         */
+        readonly minOffset: number;
         readonly totalBp: number;
     } & {
         readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
         readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-        readonly currBp: number; /**
-         * #property
-         */
+        readonly currBp: number;
     } & {
         pxToBp(px: number): {
-            coord: number; /**
-             * #property
-             */
+            coord: number;
             index: number;
             refName: string;
             oob: boolean;
@@ -397,18 +385,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined;
+            regionNumber?: number | undefined; /**
+             * #property
+             */
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
         showAllRegions(): void;
-        zoomOut(): void; /**
-         * #property
-         */
+        zoomOut(): void;
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
+         * #property
+         * this represents tracks specific to this view specifically used
+         * for read vs ref dotplots where this track would not really apply
+         * elsewhere
+         */
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -452,23 +445,15 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly assemblyNames: string[];
         readonly displayedRegionsTotalPx: number;
         readonly maxOffset: number;
-        readonly minOffset: number; /**
-         * #stateModel DotplotView
-         * #category view
-         * extends  `BaseViewModel`
-         */
+        readonly minOffset: number;
         readonly totalBp: number;
     } & {
         readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
         readonly staticBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-        readonly currBp: number; /**
-         * #property
-         */
+        readonly currBp: number;
     } & {
         pxToBp(px: number): {
-            coord: number; /**
-             * #property
-             */
+            coord: number;
             index: number;
             refName: string;
             oob: boolean;
@@ -487,18 +472,23 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined;
+            regionNumber?: number | undefined; /**
+             * #property
+             */
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
         showAllRegions(): void;
-        zoomOut(): void; /**
-         * #property
-         */
+        zoomOut(): void;
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void; /**
+         * #property
+         * this represents tracks specific to this view specifically used
+         * for read vs ref dotplots where this track would not really apply
+         * elsewhere
+         */
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -590,7 +580,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     /**
      * #action
      */
-    toggleTrack(trackId: string): void;
+    toggleTrack(trackId: string): boolean;
     /**
      * #action
      */
@@ -603,9 +593,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
      * #action
      */
     getCoords(mousedown: Coord, mouseup: Coord): {
-        coord: number; /**
-         * #property
-         */
+        coord: number;
         index: number;
         refName: string;
         oob: boolean;

package/dist/DotplotView/model.js

@@ -46,19 +46,22 @@ const util_2 = require("./components/util");
 // lazies
 const ExportSvgDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ExportSvgDialog'))));
 const ReturnToImportFormDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ReturnToImportFormDialog'))));
-const len = (a) => (0, util_1.measureText)(a.slice(0, 30));
-const pxWidthForBlocks = (blocks, hide) => {
+function stringLenPx(a) {
+    return (0, util_1.measureText)(a.slice(0, 30));
+}
+function pxWidthForBlocks(blocks, bpPerPx, hide) {
     return (0, util_1.max)([
-        ...blocks.filter(b => !hide.has(b.key)).map(b => len(b.refName)),
+        ...blocks.filter(b => !hide.has(b.key)).map(b => stringLenPx(b.refName)),
         ...blocks
             .filter(b => !hide.has(b.key))
-            .map(b => len(b.end.toLocaleString('en-us'))),
+            .map(b => stringLenPx((0, util_1.getTickDisplayStr)(b.end, bpPerPx))),
     ]);
-};
+}
 /**
  * #stateModel DotplotView
  * #category view
- * extends  `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 function stateModelFactory(pm) {
     return mobx_state_tree_1.types
@@ -378,7 +381,9 @@ function stateModelFactory(pm) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
                 this.showTrack(trackId);
+                return true;
             }
+            return false;
         },
         /**
          * #action
@@ -559,8 +564,8 @@ function stateModelFactory(pm) {
                 const voffset = vview.offsetPx;
                 const vhide = (0, util_2.getBlockLabelKeysToHide)(vblocks, viewHeight, voffset);
                 const hhide = (0, util_2.getBlockLabelKeysToHide)(hblocks, viewWidth, hoffset);
-                const by = pxWidthForBlocks(hblocks, hhide);
-                const bx = pxWidthForBlocks(vblocks, vhide);
+                const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
+                const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
                 // these are set via autorun to avoid dependency cycle
                 self.setBorderY(Math.max(by + padding, 50));
                 self.setBorderX(Math.max(bx + padding, 50));