@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

package/esm/DotplotView/model.js

@@ -3,17 +3,21 @@ import { getConf } from '@jbrowse/core/configuration';
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import { getSession, getTickDisplayStr, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, max, measureText, minmax, } from '@jbrowse/core/util';
-import { getParentRenderProps } from '@jbrowse/core/util/tracks';
+import { getParentRenderProps, hideTrackGeneric, showTrackGeneric, toggleTrackGeneric, } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
+import { addDisposer, cast, getParent, getSnapshot, types, } from '@jbrowse/mobx-state-tree';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
-import { saveAs } from 'file-saver';
-import { autorun, observable, transaction } from 'mobx';
-import { addDisposer, cast, getParent, getRoot, getSnapshot, resolveIdentifier, types, } from 'mobx-state-tree';
-import { Dotplot1DView, DotplotHView, DotplotVView } from './1dview';
-import { getBlockLabelKeysToHide, makeTicks } from './components/util';
-const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
+import { autorun, observable } from 'mobx';
+import { Dotplot1DView, DotplotHView, DotplotVView } from "./1dview.js";
+import { getBlockLabelKeysToHide, makeTicks } from "./components/util.js";
+const ExportSvgDialog = lazy(() => import("./components/ExportSvgDialog.js"));
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
+const defaultHeight = 600;
+const defaultBorderSize = 20;
+const defaultTickSize = 5;
+const defaultHtextRotation = -90;
+const defaultFontSize = 15;
 function stringLenPx(a) {
     return measureText(a.slice(0, 30));
 }
@@ -30,12 +34,12 @@ export default function stateModelFactory(pm) {
         .compose('DotplotView', BaseViewModel, types.model({
         id: ElementId,
         type: types.literal('DotplotView'),
-        height: 600,
-        borderSize: 20,
-        tickSize: 5,
+        height: defaultHeight,
+        borderSize: defaultBorderSize,
+        tickSize: defaultTickSize,
         vtextRotation: 0,
-        htextRotation: -90,
-        fontSize: 15,
+        htextRotation: defaultHtextRotation,
+        fontSize: defaultFontSize,
         trackSelectorType: 'hierarchical',
         assemblyNames: types.array(types.string),
         drawCigar: true,
@@ -43,6 +47,7 @@ export default function stateModelFactory(pm) {
         vview: types.optional(DotplotVView, {}),
         tracks: types.array(pm.pluggableMstType('track', 'stateModel')),
         viewTrackConfigs: types.array(pm.pluggableConfigSchemaType('track')),
+        init: types.frozen(),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
@@ -77,13 +82,13 @@ export default function stateModelFactory(pm) {
         get assemblyErrors() {
             const { assemblyManager } = getSession(self);
             return self.assemblyNames
-                .map(a => { var _a; return (_a = assemblyManager.get(a)) === null || _a === void 0 ? void 0 : _a.error; })
+                .map(a => assemblyManager.get(a)?.error)
                 .filter(f => !!f)
                 .join(', ');
         },
         get assembliesInitialized() {
             const { assemblyManager } = getSession(self);
-            return self.assemblyNames.every(n => { var _a, _b; return (_b = (_a = assemblyManager.get(n)) === null || _a === void 0 ? void 0 : _a.initialized) !== null && _b !== void 0 ? _b : true; });
+            return self.assemblyNames.every(n => assemblyManager.get(n)?.initialized ?? true);
         },
     }))
         .views(self => ({
@@ -107,8 +112,20 @@ export default function stateModelFactory(pm) {
                 ? []
                 : makeTicks(staticBlocks.contentBlocks, bpPerPx);
         },
-        get loading() {
-            return self.assemblyNames.length > 0 && !this.initialized;
+        get hasSomethingToShow() {
+            return self.assemblyNames.length > 0 || !!self.init;
+        },
+        get showLoading() {
+            return (this.hasSomethingToShow &&
+                !this.initialized &&
+                !self.volatileError &&
+                !self.assemblyErrors);
+        },
+        get showImportForm() {
+            return !this.hasSomethingToShow || !!self.volatileError;
+        },
+        get loadingMessage() {
+            return this.showLoading ? 'Loading' : undefined;
         },
         get viewWidth() {
             return self.width - self.borderX;
@@ -164,14 +181,25 @@ export default function stateModelFactory(pm) {
         setError(e) {
             self.volatileError = e;
         },
+        setInit(init) {
+            self.init = init;
+        },
         zoomOut() {
             self.hview.zoomOut();
             self.vview.zoomOut();
+            if (self.hview.bpPerPx >= self.hview.maxBpPerPx * 0.99) {
+                self.hview.center();
+            }
+            if (self.vview.bpPerPx >= self.vview.maxBpPerPx * 0.99) {
+                self.vview.center();
+            }
         },
         zoomIn() {
             self.hview.zoomIn();
             self.vview.zoomIn();
         },
+    }))
+        .actions(self => ({
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -184,46 +212,18 @@ export default function stateModelFactory(pm) {
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
         showTrack(trackId, initialSnapshot = {}) {
-            const schema = pm.pluggableConfigSchemaType('track');
-            const conf = resolveIdentifier(schema, getRoot(self), trackId);
-            const trackType = pm.getTrackType(conf.type);
-            if (!trackType) {
-                throw new Error(`unknown track type ${conf.type}`);
-            }
-            const viewType = pm.getViewType(self.type);
-            const displayConf = conf.displays.find((d) => viewType.displayTypes.find(type => type.name === d.type));
-            if (!displayConf) {
-                throw new Error(`could not find a compatible display for view type ${self.type}`);
-            }
-            const track = trackType.stateModel.create({
-                ...initialSnapshot,
-                type: conf.type,
-                configuration: conf,
-                displays: [{ type: displayConf.type, configuration: displayConf }],
-            });
-            self.tracks.push(track);
+            return showTrackGeneric(self, trackId, initialSnapshot);
         },
         hideTrack(trackId) {
-            const schema = pm.pluggableConfigSchemaType('track');
-            const conf = resolveIdentifier(schema, getRoot(self), trackId);
-            const tracks = self.tracks.filter(t => t.configuration === conf);
-            transaction(() => {
-                for (const track of tracks) {
-                    self.tracks.remove(track);
-                }
-            });
-            return tracks.length;
+            return hideTrackGeneric(self, trackId);
         },
         toggleTrack(trackId) {
-            const hiddenCount = this.hideTrack(trackId);
-            if (!hiddenCount) {
-                this.showTrack(trackId);
-                return true;
-            }
-            return false;
+            toggleTrackGeneric(self, trackId);
         },
         setAssemblyNames(target, query) {
             self.assemblyNames = cast([target, query]);
+            self.hview.setDisplayedRegions([]);
+            self.vview.setDisplayedRegions([]);
         },
         setViews(arr) {
             self.hview = cast(arr[0]);
@@ -249,12 +249,46 @@ export default function stateModelFactory(pm) {
                 self.vview.moveTo(y2, y1);
             }
         },
+        calculateBorders() {
+            if (self.volatileWidth === undefined) {
+                return { borderX: self.borderX, borderY: self.borderY };
+            }
+            const { vview, hview, viewHeight, viewWidth } = self;
+            const padding = 40;
+            const vblocks = vview.dynamicBlocks.contentBlocks;
+            const hblocks = hview.dynamicBlocks.contentBlocks;
+            const hoffset = hview.offsetPx;
+            const voffset = vview.offsetPx;
+            const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
+            const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
+            const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
+            const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
+            return {
+                borderX: Math.max(bx + padding, 50),
+                borderY: Math.max(by + padding, 50),
+            };
+        },
         showAllRegions() {
+            self.hview.zoomTo(self.hview.maxBpPerPx);
+            self.vview.zoomTo(self.vview.maxBpPerPx);
+            const { borderX, borderY } = this.calculateBorders();
+            self.setBorderX(borderX);
+            self.setBorderY(borderY);
             self.hview.zoomTo(self.hview.maxBpPerPx);
             self.vview.zoomTo(self.vview.maxBpPerPx);
             self.vview.center();
             self.hview.center();
         },
+        initializeDisplayedRegions() {
+            const { hview, vview, assemblyNames } = self;
+            if (hview.displayedRegions.length && vview.displayedRegions.length) {
+                return;
+            }
+            const { assemblyManager } = getSession(self);
+            hview.setDisplayedRegions(assemblyManager.get(assemblyNames[0])?.regions || []);
+            vview.setDisplayedRegions(assemblyManager.get(assemblyNames[1])?.regions || []);
+            this.showAllRegions();
+        },
         onDotplotView(mousedown, mouseup) {
             const result = this.getCoords(mousedown, mouseup);
             if (result) {
@@ -283,9 +317,12 @@ export default function stateModelFactory(pm) {
                     const trackConf = getParent(displayConf, 2);
                     return {
                         type: trackConf.type,
-                        configuration: trackConf,
+                        configuration: getSnapshot(trackConf),
                         displays: [
-                            { type: displayConf.type, configuration: displayConf },
+                            {
+                                type: displayConf.type,
+                                configuration: getSnapshot(displayConf),
+                            },
                         ],
                     };
                 });
@@ -315,20 +352,40 @@ export default function stateModelFactory(pm) {
     }))
         .actions(self => ({
         async exportSvg(opts = {}) {
-            const { renderToSvg } = await import('./svgcomponents/SVGDotplotView');
+            const { renderToSvg } = await import("./svgcomponents/SVGDotplotView.js");
             const html = await renderToSvg(self, opts);
-            const blob = new Blob([html], { type: 'image/svg+xml' });
-            saveAs(blob, opts.filename || 'image.svg');
+            const { saveAs } = await import('file-saver-es');
+            saveAs(new Blob([html], { type: 'image/svg+xml' }), opts.filename || 'image.svg');
         },
         beforeDestroy() {
-            var _a;
             const session = getSession(self);
             for (const name of self.assemblyNames) {
-                (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
+                session.removeTemporaryAssembly?.(name);
             }
         },
         afterAttach() {
-            addDisposer(self, autorun(() => {
+            addDisposer(self, autorun(function dotplotInitAutorun() {
+                const { init, volatileWidth } = self;
+                if (!volatileWidth || !init) {
+                    return;
+                }
+                const session = getSession(self);
+                const assemblyNames = init.views.map(v => v.assembly);
+                self.setAssemblyNames(assemblyNames[0], assemblyNames[1]);
+                if (init.tracks) {
+                    for (const trackId of init.tracks) {
+                        try {
+                            self.showTrack(trackId);
+                        }
+                        catch (e) {
+                            console.error(e);
+                            session.notifyError(`${e}`, e);
+                        }
+                    }
+                }
+                self.setInit(undefined);
+            }, { name: 'DotplotInit' }));
+            addDisposer(self, autorun(function dotplotLocalStorageAutorun() {
                 const s = (s) => JSON.stringify(s);
                 const { showPanButtons, wheelMode, cursorMode } = self;
                 if (typeof localStorage !== 'undefined') {
@@ -336,44 +393,22 @@ export default function stateModelFactory(pm) {
                     localStorage.setItem('dotplot-cursorMode', cursorMode);
                     localStorage.setItem('dotplot-wheelMode', wheelMode);
                 }
-            }));
-            addDisposer(self, autorun(() => {
-                const session = getSession(self);
-                if (self.volatileWidth === undefined ||
-                    !self.assembliesInitialized) {
-                    return;
+            }, { name: 'DotplotLocalStorage' }));
+            addDisposer(self, autorun(function dotplotRegionsAutorun() {
+                void self.assemblyNames.slice();
+                if (self.volatileWidth !== undefined &&
+                    self.assembliesInitialized) {
+                    self.initializeDisplayedRegions();
                 }
-                if (self.hview.displayedRegions.length > 0 &&
-                    self.vview.displayedRegions.length > 0) {
-                    return;
-                }
-                const views = [self.hview, self.vview];
-                transaction(() => {
-                    for (const [index, name] of self.assemblyNames.entries()) {
-                        const assembly = session.assemblyManager.get(name);
-                        const view = views[index];
-                        view.setDisplayedRegions((assembly === null || assembly === void 0 ? void 0 : assembly.regions) || []);
-                    }
-                    self.showAllRegions();
-                });
-            }, { delay: 1000 }));
-            addDisposer(self, autorun(function borderSetter() {
+            }, { delay: 1000, name: 'DotplotRegions' }));
+            addDisposer(self, autorun(function dotplotBorderAutorun() {
                 if (self.volatileWidth === undefined) {
                     return;
                 }
-                const { vview, hview, viewHeight, viewWidth } = self;
-                const padding = 40;
-                const vblocks = vview.dynamicBlocks.contentBlocks;
-                const hblocks = hview.dynamicBlocks.contentBlocks;
-                const hoffset = hview.offsetPx;
-                const voffset = vview.offsetPx;
-                const vhide = getBlockLabelKeysToHide(vblocks, viewHeight, voffset);
-                const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
-                const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
-                const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
-                self.setBorderY(Math.max(by + padding, 50));
-                self.setBorderX(Math.max(bx + padding, 50));
-            }));
+                const { borderX, borderY } = self.calculateBorders();
+                self.setBorderX(borderX);
+                self.setBorderY(borderY);
+            }, { name: 'DotplotBorder' }));
         },
         squareView() {
             const { hview, vview } = self;
@@ -441,6 +476,25 @@ export default function stateModelFactory(pm) {
         get error() {
             return self.volatileError || self.assemblyErrors;
         },
-    }));
+    }))
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { init, height, borderSize, tickSize, vtextRotation, htextRotation, fontSize, trackSelectorType, drawCigar, assemblyNames, viewTrackConfigs, ...rest } = snap;
+        return {
+            ...rest,
+            ...(height !== defaultHeight ? { height } : {}),
+            ...(borderSize !== defaultBorderSize ? { borderSize } : {}),
+            ...(tickSize !== defaultTickSize ? { tickSize } : {}),
+            ...(vtextRotation ? { vtextRotation } : {}),
+            ...(htextRotation !== defaultHtextRotation ? { htextRotation } : {}),
+            ...(fontSize !== defaultFontSize ? { fontSize } : {}),
+            ...(trackSelectorType !== 'hierarchical' ? { trackSelectorType } : {}),
+            ...(!drawCigar ? { drawCigar } : {}),
+            ...(assemblyNames.length ? { assemblyNames } : {}),
+            ...(viewTrackConfigs.length ? { viewTrackConfigs } : {}),
+        };
+    });
 }
-export { Dotplot1DView } from './1dview';
+export { Dotplot1DView } from "./1dview.js";

package/esm/DotplotView/svgcomponents/SVGDotplotView.d.ts

@@ -1,2 +1,2 @@
-import type { DotplotViewModel, ExportSvgOptions } from '../model';
+import type { DotplotViewModel, ExportSvgOptions } from '../model.ts';
 export declare function renderToSvg(model: DotplotViewModel, opts: ExportSvgOptions): Promise<string>;

package/esm/DotplotView/svgcomponents/SVGDotplotView.js

@@ -3,15 +3,14 @@ import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getSession, renderToStaticMarkup } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { when } from 'mobx';
-import SVGBackground from './SVGBackground';
-import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
-import { GridRaw } from '../components/Grid';
+import SVGBackground from "./SVGBackground.js";
+import { HorizontalAxisRaw, VerticalAxisRaw } from "../components/Axes.js";
+import DotplotGrid from "../components/DotplotGrid.js";
 export async function renderToSvg(model, opts) {
-    var _a;
     await when(() => model.initialized);
     const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
     const session = getSession(model);
-    const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
+    const theme = session.allThemes?.()[themeName];
     const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
     const shift = 50;
     const displayResults = await Promise.all(tracks.map(async (track) => {
@@ -20,5 +19,5 @@ export async function renderToSvg(model, opts) {
         return { track, result: await display.renderSvg({ ...opts, theme }) };
     }));
     const w = width + shift * 2;
-    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("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(), children: [_jsx(SVGBackground, { width: w, height: height }), _jsx(VerticalAxisRaw, { model: model }), _jsxs("g", { transform: `translate(${borderX} 0)`, children: [_jsx(GridRaw, { model: model }), _jsx("defs", { children: _jsx("clipPath", { id: "clip-ruler", children: _jsx("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }) }) }), _jsx("g", { clipPath: "url(#clip-ruler)", children: displayResults.map(({ result }, i) => (_jsx("g", { children: result }, i))) })] }), _jsx("g", { transform: `translate(${borderX} ${viewHeight})`, children: _jsx(HorizontalAxisRaw, { model: model }) })] }) }) }));
+    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("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(), children: [_jsx(SVGBackground, { width: w, height: height }), _jsx(VerticalAxisRaw, { model: model }), _jsxs("g", { transform: `translate(${borderX} 0)`, children: [_jsx(DotplotGrid, { model: model }), _jsx("defs", { children: _jsx("clipPath", { id: "clip-ruler", children: _jsx("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }) }) }), _jsx("g", { clipPath: "url(#clip-ruler)", children: displayResults.map(({ result }, i) => (_jsx("g", { children: result }, i))) })] }), _jsx("g", { transform: `translate(${borderX} ${viewHeight})`, children: _jsx(HorizontalAxisRaw, { model: model }) })] }) }) }));
 }

package/esm/DotplotView/types.d.ts

@@ -1,5 +1,5 @@
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { SnapshotIn } from 'mobx-state-tree';
+import type { SnapshotIn } from '@jbrowse/mobx-state-tree';
 export type Conf = SnapshotIn<AnyConfigurationModel>;
 export type ImportFormSyntenyTrack = {
     type: 'preConfigured';
@@ -10,3 +10,9 @@ export type ImportFormSyntenyTrack = {
 } | {
     type: 'none';
 };
+export interface DotplotViewInit {
+    views: {
+        assembly: string;
+    }[];
+    tracks?: string[];
+}

package/esm/LaunchDotplotView.js

@@ -1,40 +1,10 @@
-import { transaction } from 'mobx';
 export default function LaunchDotplotView(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-DotplotView', async ({ session, views, tracks = [], }) => {
-        try {
-            const model = session.addView('DotplotView', {});
-            const assemblyNames = views.map(view => view.assembly);
-            transaction(() => {
-                model.setViews([
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                ]);
-                model.setAssemblyNames(assemblyNames[0], assemblyNames[1]);
-            });
-            const idsNotFound = [];
-            for (const track of tracks) {
-                tryTrack(model, track, idsNotFound);
-            }
-            if (idsNotFound.length) {
-                throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
-            }
-        }
-        catch (e) {
-            session.notifyError(`${e}`, e);
-            throw e;
-        }
+        session.addView('DotplotView', {
+            init: {
+                views: views.map(v => ({ assembly: v.assembly })),
+                tracks,
+            },
+        });
     });
 }
-function tryTrack(model, trackId, idsNotFound) {
-    try {
-        model.showTrack(trackId);
-    }
-    catch (e) {
-        if (/Could not resolve identifier/.exec(`${e}`)) {
-            idsNotFound.push(trackId);
-        }
-        else {
-            throw e;
-        }
-    }
-}

package/esm/ServerSideRenderedBlockContent.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { LoadingEllipses } from '@jbrowse/core/ui';
-import { Typography } from '@mui/material';
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
     return {
@@ -13,39 +11,20 @@ const useStyles = makeStyles()(theme => {
             backgroundImage: `repeating-linear-gradient(45deg, transparent, transparent 5px, ${bg} 5px, ${bg} 10px)`,
             textAlign: 'center',
         },
-        blockMessage: {
-            backgroundColor: bg,
-            padding: '10px',
-        },
-        blockError: {
-            backgroundColor: bg,
-            padding: '10px',
-            color: 'red',
-        },
     };
 });
 function LoadingMessage() {
-    const [shown, setShown] = useState(false);
     const { classes } = useStyles();
-    useEffect(() => {
-        const timeout = setTimeout(() => {
-            setShown(true);
-        }, 300);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, []);
-    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) }));
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return (_jsx("div", { className: classes.blockMessage, children: _jsx(Typography, { children: messageText }) }));
+    return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: messageText }) }));
 }
 function BlockError({ error }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { className: classes.blockError, children: _jsx(Typography, { children: `${error}` }) }));
+    return _jsx(ErrorMessage, { error: error });
 }
-const ServerSideRenderedDotplotContent = observer(function ({ model, style, }) {
+const ServerSideRenderedDotplotContent = observer(function ServerSideRenderedDotplotContent({ model, style, }) {
     if (model.error) {
         return _jsx(BlockError, { error: model.error, "data-testid": "reload_button" });
     }

package/esm/ServerSideSyntenyRendering.d.ts

@@ -7,7 +7,7 @@ interface ModelType {
         highResolutionScaling?: number;
     };
 }
-declare const ServerSideSyntenyRendering: ({ model, }: {
+declare const ServerSideSyntenyRendering: ({ model }: {
     model: ModelType;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideSyntenyRendering;

package/esm/ServerSideSyntenyRendering.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
 import { observer } from 'mobx-react';
-const ServerSideSyntenyRendering = observer(function ({ model, }) {
+const ServerSideSyntenyRendering = observer(function ServerSideSyntenyRendering({ model }) {
     const { imageData, style, renderProps } = model;
     const { width, height, highResolutionScaling = 1 } = renderProps;
     const featureCanvas = useRef(null);

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 import Plugin from '@jbrowse/core/Plugin';
 import type PluginManager from '@jbrowse/core/PluginManager';
+export type { DotplotImportFormSyntenyOption } from './DotplotView/components/ImportForm/TrackSelector';
 export default class DotplotPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/esm/index.js

@@ -1,17 +1,15 @@
 import Plugin from '@jbrowse/core/Plugin';
 import { isAbstractMenuManager } from '@jbrowse/core/util';
 import TimelineIcon from '@mui/icons-material/Timeline';
-import ComparativeRenderer from './ComparativeRenderer';
-import DotplotDisplayF from './DotplotDisplay';
-import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
-import DotplotRendererF from './DotplotRenderer';
-import DotplotViewF from './DotplotView';
-import LaunchDotplotViewF from './LaunchDotplotView';
+import ComparativeRenderer from "./ComparativeRenderer/index.js";
+import DiagonalizeDotplotRpc from "./DiagonalizeDotplotRpc.js";
+import DotplotDisplayF from "./DotplotDisplay/index.js";
+import DotplotReadVsRefMenuItem from "./DotplotReadVsRef/index.js";
+import DotplotRendererF from "./DotplotRenderer/index.js";
+import DotplotViewF from "./DotplotView/index.js";
+import LaunchDotplotViewF from "./LaunchDotplotView.js";
 export default class DotplotPlugin extends Plugin {
-    constructor() {
-        super(...arguments);
-        this.name = 'DotplotPlugin';
-    }
+    name = 'DotplotPlugin';
     install(pluginManager) {
         DotplotViewF(pluginManager);
         DotplotDisplayF(pluginManager);
@@ -19,6 +17,7 @@ export default class DotplotPlugin extends Plugin {
         LaunchDotplotViewF(pluginManager);
         DotplotReadVsRefMenuItem(pluginManager);
         pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager));
+        pluginManager.addRpcMethod(() => new DiagonalizeDotplotRpc(pluginManager));
     }
     configure(pluginManager) {
         if (isAbstractMenuManager(pluginManager.rootModel)) {

package/esm/util.d.ts

@@ -2,7 +2,7 @@ import type { Feature } from '@jbrowse/core/util';
 export interface ReducedFeature {
     refName: string;
     start: number;
-    clipPos: number;
+    clipLengthAtStartOfRead: number;
     end: number;
     seqLength: number;
 }