@jbrowse/plugin-dotplot-view 2.8.0 → 2.10.0

package/dist/DotplotView/svgcomponents/SVGDotplotView.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToSvg = void 0;
 const react_1 = __importDefault(require("react"));
-const server_1 = require("react-dom/server");
 const mobx_1 = require("mobx");
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const Grid_1 = require("../components/Grid");
 const Axes_1 = require("../components/Axes");
 const SVGBackground_1 = __importDefault(require("./SVGBackground"));
@@ -18,6 +18,8 @@ async function renderToSvg(model, opts) {
     var _a;
     await (0, mobx_1.when)(() => model.initialized);
     const { themeName = 'default', Wrapper = ({ children }) => react_1.default.createElement(react_1.default.Fragment, null, children) } = opts;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { createRootFn } = (0, mobx_state_tree_1.getRoot)(model);
     const session = (0, util_1.getSession)(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
@@ -29,7 +31,7 @@ async function renderToSvg(model, opts) {
     }));
     const w = width + shift * 2;
     // the xlink namespace is used for rendering <image> tag
-    return (0, server_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
+    return (0, util_1.renderToStaticMarkup)(react_1.default.createElement(material_1.ThemeProvider, { theme: (0, ui_1.createJBrowseTheme)(theme) },
         react_1.default.createElement(Wrapper, null,
             react_1.default.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString() },
                 react_1.default.createElement(SVGBackground_1.default, { width: w, height: height }),
@@ -41,6 +43,6 @@ async function renderToSvg(model, opts) {
                             react_1.default.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
                     react_1.default.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (react_1.default.createElement("g", { key: i }, result))))),
                 react_1.default.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
-                    react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))));
+                    react_1.default.createElement(Axes_1.HorizontalAxisRaw, { model: model }))))), createRootFn);
 }
 exports.renderToSvg = renderToSvg;

package/esm/DotplotView/components/Axes.js

@@ -61,15 +61,10 @@ 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));
         }),
-        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] }));
-        }),
+        ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
         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;
-        }),
+            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
         React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, fill: theme.palette.text.primary, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging" }, hview.assemblyNames.join(','))));
 });
 export const VerticalAxis = observer(function ({ model, }) {
@@ -112,11 +107,9 @@ 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));
         }),
-        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.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
         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;
-        }),
+            .map(([tick, y]) => y > 10 && y < viewHeight ? (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/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/esm/DotplotView/components/DotplotTooltip.js

@@ -1,9 +1,9 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { locstr } from './util';
-import { Portal, alpha } from '@mui/material';
-import { usePopper } from 'react-popper';
+import { Portal, alpha, useTheme } from '@mui/material';
+import { useFloating, useClientPoint, useInteractions, } from '@floating-ui/react';
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
@@ -24,77 +24,54 @@ const useStyles = makeStyles()(theme => ({
         wordWrap: 'break-word',
     },
 }));
-const blank = { left: 0, top: 0, width: 0, height: 0 };
-export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, ydistance, }) {
-    var _a;
+export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
+    var _a, _b;
     const { classes } = useStyles();
     const { hview, vview, viewHeight } = model;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const ref = 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 = 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 } = usePopper(virtElement, anchorEl, {
+    const theme = useTheme();
+    const { refs, floatingStyles, context } = useFloating({
         placement: xdistance < 0 ? 'left' : 'right',
     });
-    return (React.createElement(React.Fragment, null, mouserect ? (React.createElement(Portal, null,
-        React.createElement("div", { ref: setAnchorEl, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+    const clientPoint = useClientPoint(context, mouserectClient
+        ? {
+            x: mouserectClient[0],
+            y: mouserectClient[1],
+        }
+        : undefined);
+    const { getFloatingProps } = 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.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             `x - ${locstr(mouserect[0], hview)}`,
             React.createElement("br", null),
             `y - ${locstr(viewHeight - mouserect[1], vview)}`,
-            React.createElement("br", null)))) : null));
+            React.createElement("br", null)))) : null;
 });
 export const TooltipWhereClicked = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
+    var _a, _b;
     const { classes } = useStyles();
     const { hview, vview, viewHeight } = model;
-    const [anchorEl, setAnchorEl] = useState(null);
-    // must be memoized a la https://github.com/popperjs/react-popper/issues/391
-    const virtElement = 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 } = usePopper(virtElement, anchorEl, {
+    const theme = 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 } = useFloating({
         placement: xdistance < 0 ? 'right' : 'left',
     });
-    return (React.createElement(React.Fragment, null, mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, null,
-        React.createElement("div", { ref: setAnchorEl, className: classes.tooltip, 
-            // zIndex needed to go over widget drawer
-            style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },
+    const clientPoint = useClientPoint(context, { x, y });
+    const { getFloatingProps } = 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.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() },
             `x - ${locstr(mousedown[0], hview)}`,
             React.createElement("br", null),
             `y - ${locstr(viewHeight - mousedown[1], vview)}`,
-            React.createElement("br", null)))) : null));
+            React.createElement("br", null)))) : null;
 });

package/esm/DotplotView/components/DotplotView.js

@@ -32,7 +32,7 @@ const useStyles = makeStyles()(theme => ({
         width: '100%',
         gridRow: '1/2',
         gridColumn: '2/2',
-        zIndex: 100,
+        zIndex: 100, // needs to be below controls
         '& path': {
             cursor: 'crosshair',
             fill: 'none',
@@ -81,8 +81,8 @@ const DotplotViewInternal = 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;
@@ -147,22 +147,26 @@ const DotplotViewInternal = 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
     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,
@@ -185,7 +189,7 @@ const DotplotViewInternal = observer(function ({ model, }) {
                 React.createElement(VerticalAxis, { model: model }),
                 React.createElement(HorizontalAxis, { model: model }),
                 React.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, ydistance: ydistance })) : null,
+                    mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
                     validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
                     React.createElement("div", { style: { cursor: ctrlKeyWasUsed ? 'pointer' : cursorMode }, onMouseDown: event => {
                             if (event.button === 0) {

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

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

package/esm/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/esm/DotplotView/model.js

@@ -4,7 +4,7 @@ import { saveAs } from 'file-saver';
 import { autorun, transaction } from 'mobx';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, } from '@jbrowse/core/util';
+import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, getTickDisplayStr, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 // icons
@@ -17,19 +17,22 @@ import { getBlockLabelKeysToHide, makeTicks } from './components/util';
 // lazies
 const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
-const len = (a) => measureText(a.slice(0, 30));
-const pxWidthForBlocks = (blocks, hide) => {
+function stringLenPx(a) {
+    return measureText(a.slice(0, 30));
+}
+function pxWidthForBlocks(blocks, bpPerPx, hide) {
     return 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(getTickDisplayStr(b.end, bpPerPx))),
     ]);
-};
+}
 /**
  * #stateModel DotplotView
  * #category view
- * extends  `BaseViewModel`
+ * extends
+ * - [BaseViewModel](../baseviewmodel)
  */
 export default function stateModelFactory(pm) {
     return types
@@ -349,7 +352,9 @@ export default function stateModelFactory(pm) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
                 this.showTrack(trackId);
+                return true;
             }
+            return false;
         },
         /**
          * #action
@@ -530,8 +535,8 @@ export default function stateModelFactory(pm) {
                 const voffset = vview.offsetPx;
                 const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
                 const hhide = 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));