@jbrowse/plugin-dotplot-view 2.10.3 → 2.11.1

package/dist/DotplotDisplay/index.d.ts

@@ -1,6 +1,5 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function DotplotDisplayF(pm: PluginManager): void;
 /**
  * #config DotplotDisplay
  */

package/dist/DotplotDisplay/index.js

@@ -11,7 +11,7 @@ const DisplayType_1 = __importDefault(require("@jbrowse/core/pluggableElementTyp
 // locals
 const stateModelFactory_1 = require("./stateModelFactory");
 const DotplotDisplay_1 = __importDefault(require("./components/DotplotDisplay"));
-exports.default = (pm) => {
+function DotplotDisplayF(pm) {
     pm.addDisplayType(() => {
         const configSchema = configSchemaFactory(pm);
         return new DisplayType_1.default({
@@ -24,7 +24,8 @@ exports.default = (pm) => {
             ReactComponent: DotplotDisplay_1.default,
         });
     });
-};
+}
+exports.default = DotplotDisplayF;
 /**
  * #config DotplotDisplay
  */

package/dist/DotplotReadVsRef/DotplotReadVsRef.js

@@ -95,7 +95,7 @@ function onClick(feature, self) {
     }
     catch (e) {
         console.error(e);
-        session.notify(`${e}`, 'error');
+        session.notifyError(`${e}`, e);
     }
 }
 exports.onClick = onClick;

package/dist/DotplotRenderer/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function DotplotRendererF(pluginManager: PluginManager): void;

package/dist/DotplotRenderer/index.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const DotplotRendering_1 = __importDefault(require("./components/DotplotRendering"));
 const DotplotRenderer_1 = __importDefault(require("./DotplotRenderer"));
 const configSchema_1 = __importDefault(require("./configSchema"));
-exports.default = (pluginManager) => {
+function DotplotRendererF(pluginManager) {
     pluginManager.addRendererType(() => new DotplotRenderer_1.default({
         name: 'DotplotRenderer',
         configSchema: configSchema_1.default,
         ReactComponent: DotplotRendering_1.default,
         pluginManager,
     }));
-};
+}
+exports.default = DotplotRendererF;

package/dist/DotplotView/components/Axes.js

@@ -65,13 +65,13 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             const x = region.offsetPx;
             const y = 0;
             const xoff = Math.floor(x - hview.offsetPx);
-            return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
+            return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
         }),
-        ticks.map(([tick, x]) => x > 0 && x < width ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
+        ticks.map(([tick, x]) => x > 0 && x < width ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...(0, util_1.getFillProps)(theme.palette.text.primary) })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => x > 10 && x < width ? (react_1.default.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, 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(','))));
+            .map(([tick, x]) => x > 10 && x < width ? (react_1.default.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
+        react_1.default.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
 });
 exports.VerticalAxis = (0, mobx_react_1.observer)(function ({ model, }) {
     const { borderX, viewHeight } = model;
@@ -111,11 +111,11 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             const y = region.offsetPx;
             const x = borderX;
             const yoff = Math.floor(viewHeight - y + offsetPx);
-            return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
+            return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...(0, util_1.getFillProps)(theme.palette.text.primary) }, region.refName));
         }),
-        ticks.map(([tick, y]) => y > 0 ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
+        ticks.map(([tick, y]) => y > 0 ? (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...(0, util_1.getStrokeProps)(theme.palette.grey[400]) })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, y]) => y > 10 && y < viewHeight ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", 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(','))));
+            .map(([tick, y]) => y > 10 && y < viewHeight ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null),
+        react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...(0, util_1.getFillProps)(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
 });

package/dist/DotplotView/components/DotplotTooltip.js

@@ -37,6 +37,7 @@ exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model,
     const theme = (0, material_1.useTheme)();
     const { refs, floatingStyles, context } = (0, react_2.useFloating)({
         placement: xdistance < 0 ? 'left' : 'right',
+        strategy: 'fixed',
     });
     const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
         ? {

package/dist/DotplotView/components/DotplotView.js

@@ -178,15 +178,15 @@ const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
     // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
     // that single mouseup is set
     (0, react_1.useEffect)(() => {
-        if (mousedown && !mouseup) {
-            function globalMouseUp(event) {
-                if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-                    setMouseUpClient([event.clientX, event.clientY]);
-                }
-                else {
-                    setMouseDownClient(undefined);
-                }
+        function globalMouseUp(event) {
+            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
+                setMouseUpClient([event.clientX, event.clientY]);
+            }
+            else {
+                setMouseDownClient(undefined);
             }
+        }
+        if (mousedown && !mouseup) {
             window.addEventListener('mouseup', globalMouseUp, true);
             return () => {
                 window.removeEventListener('mouseup', globalMouseUp, true);

package/dist/DotplotView/components/ExportSvgDialog.js

@@ -32,6 +32,10 @@ function LoadingMessage() {
         react_1.default.createElement(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }),
         react_1.default.createElement(material_1.Typography, { display: "inline" }, "Creating SVG")));
 }
+function TextField2({ children, ...rest }) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.TextField, { ...rest }, children)));
+}
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)('svg-' + key, val);
 }
@@ -46,9 +50,8 @@ function ExportSvgDialog({ model, handleClose, }) {
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         react_1.default.createElement(material_1.DialogContent, null,
             error ? (react_1.default.createElement(ui_1.ErrorMessage, { error: error })) : loading ? (react_1.default.createElement(LoadingMessage, null)) : null,
-            react_1.default.createElement(material_1.TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            react_1.default.createElement("br", null),
-            session.allThemes ? (react_1.default.createElement(material_1.TextField, { select: true, label: "Theme", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, 
+            react_1.default.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
+            session.allThemes ? (react_1.default.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (react_1.default.createElement(material_1.MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
             offscreenCanvas ? (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (react_1.default.createElement(material_1.Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
@@ -68,6 +71,8 @@ function ExportSvgDialog({ model, handleClose, }) {
                     catch (e) {
                         console.error(e);
                         setError(e);
+                    }
+                    finally {
                         setLoading(false);
                     }
                 } }, "Submit"))));

package/dist/DotplotView/components/Grid.js

@@ -7,6 +7,7 @@ exports.GridRaw = void 0;
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
 exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
@@ -29,7 +30,7 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
     let lastx = Infinity;
     let lasty = Infinity;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, fill: theme.palette.background.default }),
+        react_1.default.createElement("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }),
         react_1.default.createElement("g", null,
             hblocks.map(region => {
                 const x = region.offsetPx - hview.offsetPx;
@@ -37,7 +38,7 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
                 if (render) {
                     lastx = x;
                 }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, stroke: stroke })) : null;
+                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) })) : null;
             }),
             vblocks.map(region => {
                 const y = viewHeight - (region.offsetPx - vview.offsetPx);
@@ -45,10 +46,10 @@ exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
                 if (render) {
                     lasty = y;
                 }
-                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, stroke: stroke })) : null;
+                return render ? (react_1.default.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) })) : null;
             }),
-            react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, stroke: stroke }),
-            react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, stroke: stroke })),
+            react_1.default.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }),
+            react_1.default.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })),
         children));
 });
 function Grid({ model, children, }) {

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

@@ -5,6 +5,6 @@ declare const DotplotHeader: ({ model, selection, }: {
     selection?: {
         width: number;
         height: number;
-    } | undefined;
+    };
 }) => React.JSX.Element;
 export default DotplotHeader;

package/dist/DotplotView/index.d.ts

@@ -1,2 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-export default function (pluginManager: PluginManager): void;
+export default function DotplotViewF(pluginManager: PluginManager): void;

package/dist/DotplotView/index.js

@@ -30,7 +30,7 @@ const react_1 = require("react");
 const ViewType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/ViewType"));
 // locals
 const model_1 = __importDefault(require("./model"));
-function default_1(pluginManager) {
+function DotplotViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType_1.default({
             name: 'DotplotView',
@@ -40,4 +40,4 @@ function default_1(pluginManager) {
         });
     });
 }
-exports.default = default_1;
+exports.default = DotplotViewF;

package/dist/DotplotView/model.d.ts

@@ -89,9 +89,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -100,12 +98,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -177,9 +170,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -188,12 +179,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -230,9 +216,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     } & {
         setMinimized(flag: boolean): void;
         showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number; /**
-         * #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 | {
@@ -385,9 +369,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -396,12 +378,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -472,9 +449,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -483,12 +458,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;

package/dist/DotplotView/svgcomponents/SVGDotplotView.js

@@ -17,7 +17,7 @@ const SVGBackground_1 = __importDefault(require("./SVGBackground"));
 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;
+    const { themeName = 'default', Wrapper = ({ children }) => 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);

package/dist/LaunchDotplotView.js

@@ -23,7 +23,7 @@ function LaunchDotplotView(pluginManager) {
             }
         }
         catch (e) {
-            session.notify(`${e}`, 'error');
+            session.notifyError(`${e}`, e);
             throw e;
         }
     });

package/esm/DotplotDisplay/index.d.ts

@@ -1,6 +1,5 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pm: PluginManager) => void;
-export default _default;
+export default function DotplotDisplayF(pm: PluginManager): void;
 /**
  * #config DotplotDisplay
  */

package/esm/DotplotDisplay/index.js

@@ -5,7 +5,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
 // locals
 import { stateModelFactory } from './stateModelFactory';
 import ReactComponent from './components/DotplotDisplay';
-export default (pm) => {
+export default function DotplotDisplayF(pm) {
     pm.addDisplayType(() => {
         const configSchema = configSchemaFactory(pm);
         return new DisplayType({
@@ -18,7 +18,7 @@ export default (pm) => {
             ReactComponent,
         });
     });
-};
+}
 /**
  * #config DotplotDisplay
  */

package/esm/DotplotReadVsRef/DotplotReadVsRef.js

@@ -92,6 +92,6 @@ export function onClick(feature, self) {
     }
     catch (e) {
         console.error(e);
-        session.notify(`${e}`, 'error');
+        session.notifyError(`${e}`, e);
     }
 }

package/esm/DotplotRenderer/index.d.ts

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function DotplotRendererF(pluginManager: PluginManager): void;

package/esm/DotplotRenderer/index.js

@@ -1,11 +1,11 @@
 import ReactComponent from './components/DotplotRendering';
 import DotplotRenderer from './DotplotRenderer';
 import configSchema from './configSchema';
-export default (pluginManager) => {
+export default function DotplotRendererF(pluginManager) {
     pluginManager.addRendererType(() => new DotplotRenderer({
         name: 'DotplotRenderer',
         configSchema: configSchema,
         ReactComponent,
         pluginManager,
     }));
-};
+}

package/esm/DotplotView/components/Axes.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getSnapshot } from 'mobx-state-tree';
-import { getTickDisplayStr } from '@jbrowse/core/util';
+import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { useTheme } from '@mui/material';
 // locals
@@ -59,13 +59,13 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
             const x = region.offsetPx;
             const y = 0;
             const xoff = Math.floor(x - hview.offsetPx);
-            return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
+            return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
         }),
-        ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
+        ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, 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(','))));
+            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
+        React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
 });
 export const VerticalAxis = observer(function ({ model, }) {
     const { borderX, viewHeight } = model;
@@ -105,11 +105,11 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
             const y = region.offsetPx;
             const x = borderX;
             const yoff = Math.floor(viewHeight - y + offsetPx);
-            return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
+            return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, region.refName));
         }),
-        ticks.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] })) : null),
+        ticks.map(([tick, y]) => y > 0 ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.grey[400]) })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, y]) => y > 10 && y < viewHeight ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", 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(','))));
+            .map(([tick, y]) => y > 10 && y < viewHeight ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
+        React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary) }, vview.assemblyNames.join(','))));
 });

package/esm/DotplotView/components/DotplotTooltip.js

@@ -31,6 +31,7 @@ export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mo
     const theme = useTheme();
     const { refs, floatingStyles, context } = useFloating({
         placement: xdistance < 0 ? 'left' : 'right',
+        strategy: 'fixed',
     });
     const clientPoint = useClientPoint(context, mouserectClient
         ? {

package/esm/DotplotView/components/DotplotView.js

@@ -150,15 +150,15 @@ const DotplotViewInternal = observer(function ({ model, }) {
     // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
     // that single mouseup is set
     useEffect(() => {
-        if (mousedown && !mouseup) {
-            function globalMouseUp(event) {
-                if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-                    setMouseUpClient([event.clientX, event.clientY]);
-                }
-                else {
-                    setMouseDownClient(undefined);
-                }
+        function globalMouseUp(event) {
+            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
+                setMouseUpClient([event.clientX, event.clientY]);
+            }
+            else {
+                setMouseDownClient(undefined);
             }
+        }
+        if (mousedown && !mouseup) {
             window.addEventListener('mouseup', globalMouseUp, true);
             return () => {
                 window.removeEventListener('mouseup', globalMouseUp, true);

package/esm/DotplotView/components/ExportSvgDialog.js

@@ -7,6 +7,10 @@ function LoadingMessage() {
         React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
         React.createElement(Typography, { display: "inline" }, "Creating SVG")));
 }
+function TextField2({ children, ...rest }) {
+    return (React.createElement("div", null,
+        React.createElement(TextField, { ...rest }, children)));
+}
 function useSvgLocal(key, val) {
     return useLocalStorage('svg-' + key, val);
 }
@@ -21,9 +25,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         React.createElement(DialogContent, null,
             error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            React.createElement("br", null),
-            session.allThemes ? (React.createElement(TextField, { select: true, label: "Theme", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
+            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
+            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
             offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
@@ -43,6 +46,8 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                     catch (e) {
                         console.error(e);
                         setError(e);
+                    }
+                    finally {
                         setLoading(false);
                     }
                 } }, "Submit"))));

package/esm/DotplotView/components/Grid.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { useTheme } from '@mui/material';
+import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
 export const GridRaw = observer(function ({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
@@ -23,7 +24,7 @@ export const GridRaw = observer(function ({ model, children, }) {
     let lastx = Infinity;
     let lasty = Infinity;
     return (React.createElement(React.Fragment, null,
-        React.createElement("rect", { x: rx, y: ry, width: w, height: h, fill: theme.palette.background.default }),
+        React.createElement("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }),
         React.createElement("g", null,
             hblocks.map(region => {
                 const x = region.offsetPx - hview.offsetPx;
@@ -31,7 +32,7 @@ export const GridRaw = observer(function ({ model, children, }) {
                 if (render) {
                     lastx = x;
                 }
-                return render ? (React.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, stroke: stroke })) : null;
+                return render ? (React.createElement("line", { key: JSON.stringify(region), x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) })) : null;
             }),
             vblocks.map(region => {
                 const y = viewHeight - (region.offsetPx - vview.offsetPx);
@@ -39,10 +40,10 @@ export const GridRaw = observer(function ({ model, children, }) {
                 if (render) {
                     lasty = y;
                 }
-                return render ? (React.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, stroke: stroke })) : null;
+                return render ? (React.createElement("line", { key: JSON.stringify(region), x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) })) : null;
             }),
-            React.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, stroke: stroke }),
-            React.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, stroke: stroke })),
+            React.createElement("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...getStrokeProps(stroke) }),
+            React.createElement("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...getStrokeProps(stroke) })),
         children));
 });
 export default function Grid({ model, children, }) {

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

@@ -5,6 +5,6 @@ declare const DotplotHeader: ({ model, selection, }: {
     selection?: {
         width: number;
         height: number;
-    } | undefined;
+    };
 }) => React.JSX.Element;
 export default DotplotHeader;

package/esm/DotplotView/index.d.ts

@@ -1,2 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-export default function (pluginManager: PluginManager): void;
+export default function DotplotViewF(pluginManager: PluginManager): void;

package/esm/DotplotView/index.js

@@ -2,7 +2,7 @@ import { lazy } from 'react';
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
 // locals
 import stateModelFactory from './model';
-export default function (pluginManager) {
+export default function DotplotViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'DotplotView',

package/esm/DotplotView/model.d.ts

@@ -89,9 +89,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -100,12 +98,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -177,9 +170,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -188,12 +179,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -230,9 +216,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     } & {
         setMinimized(flag: boolean): void;
         showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number; /**
-         * #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 | {
@@ -385,9 +369,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -396,12 +378,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;
@@ -472,9 +449,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
              * #property
              */
             coord: number;
-            regionNumber?: number | undefined; /**
-             * #property
-             */
+            regionNumber?: number | undefined;
         }): number | undefined;
     } & {
         setFeatures(features: import("@jbrowse/core/util").Feature[]): void;
@@ -483,12 +458,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         zoomIn(): void;
         zoomTo(bpPerPx: number, offset?: number | undefined): number;
         scrollTo(offsetPx: number): number;
-        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
-         */
+        centerAt(coord: number, refName: string | undefined, regionNumber: number): void;
         scroll(distance: number): number;
     } & {
         moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset | undefined): void;

package/esm/DotplotView/svgcomponents/SVGDotplotView.js

@@ -11,7 +11,7 @@ import SVGBackground from './SVGBackground';
 export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
-    const { themeName = 'default', Wrapper = ({ children }) => React.createElement(React.Fragment, null, children) } = opts;
+    const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { createRootFn } = getRoot(model);
     const session = getSession(model);

package/esm/LaunchDotplotView.js

@@ -21,7 +21,7 @@ export default function LaunchDotplotView(pluginManager) {
             }
         }
         catch (e) {
-            session.notify(`${e}`, 'error');
+            session.notifyError(`${e}`, e);
             throw e;
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.3",
     "@mui/icons-material": "^5.0.1",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "^7.0.0",
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
+  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
 }