@jbrowse/plugin-dotplot-view 2.6.1

package/esm/DotplotView/svgcomponents/SVGDotplotView.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { when } from 'mobx';
+import { getSession } from '@jbrowse/core/util';
+import { ThemeProvider } from '@mui/material';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { GridRaw } from '../components/Grid';
+import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
+import SVGBackground from './SVGBackground';
+// render LGV to SVG
+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 session = 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;
+    const shift = 50;
+    const displayResults = await Promise.all(tracks.map(async (track) => {
+        const display = track.displays[0];
+        await when(() => (display.ready !== undefined ? display.ready : true));
+        return { track, result: await display.renderSvg({ ...opts, theme }) };
+    }));
+    const w = width + shift * 2;
+    // the xlink namespace is used for rendering <image> tag
+    return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: createJBrowseTheme(theme) },
+        React.createElement(Wrapper, null,
+            React.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.createElement(SVGBackground, { width: w, height: height }),
+                React.createElement(VerticalAxisRaw, { model: model }),
+                React.createElement("g", { transform: `translate(${borderX} 0)` },
+                    React.createElement(GridRaw, { model: model }),
+                    React.createElement("defs", null,
+                        React.createElement("clipPath", { id: "clip-ruler" },
+                            React.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
+                    React.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (React.createElement("g", { key: i }, result))))),
+                React.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
+                    React.createElement(HorizontalAxisRaw, { model: model }))))));
+}
+//# sourceMappingURL=SVGDotplotView.js.map

package/esm/DotplotView/svgcomponents/SVGDotplotView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGDotplotView.js","sourceRoot":"","sources":["../../../src/DotplotView/svgcomponents/SVGDotplotView.tsx"],"names":[],"mappings":"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"}

package/esm/LaunchDotplotView.d.ts

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

package/esm/LaunchDotplotView.js

@@ -0,0 +1,42 @@
+import { transaction } from 'mobx';
+export default function LaunchDotplotView(pluginManager) {
+    pluginManager.addToExtensionPoint('LaunchView-DotplotView', 
+    // @ts-expect-error
+    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]);
+            });
+            // http://localhost:3000/?config=test_data%2Fvolvox%2Fconfig.json&session=spec-{"views":[{"type":"DotplotView","views":[{"assembly":"volvox"},{"assembly":"volvox"}],"tracks":["volvox_fake_synteny"]}]}
+            const idsNotFound = [];
+            tracks.forEach(track => tryTrack(model, track, idsNotFound));
+            if (idsNotFound.length) {
+                throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
+            }
+        }
+        catch (e) {
+            session.notify(`${e}`, 'error');
+            throw e;
+        }
+    });
+}
+function tryTrack(model, trackId, idsNotFound) {
+    try {
+        model.showTrack(trackId);
+    }
+    catch (e) {
+        if (`${e}`.match('Could not resolve identifier')) {
+            idsNotFound.push(trackId);
+        }
+        else {
+            throw e;
+        }
+    }
+}
+//# sourceMappingURL=LaunchDotplotView.js.map

package/esm/LaunchDotplotView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaunchDotplotView.js","sourceRoot":"","sources":["../src/LaunchDotplotView.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAElC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,aAA4B;IACpE,aAAa,CAAC,mBAAmB,CAC/B,wBAAwB;IACxB,mBAAmB;IACnB,KAAK,EAAE,EACL,OAAO,EACP,KAAK,EACL,MAAM,GAAG,EAAE,GAKZ,EAAE,EAAE;QACH,IAAI;YACF,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAqB,CAAA;YACpE,MAAM,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAEtD,WAAW,CAAC,GAAG,EAAE;gBACf,KAAK,CAAC,QAAQ,CAAC;oBACb,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE;oBAC7B,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE;iBAC9B,CAAC,CAAA;gBACF,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;YAEF,wMAAwM;YAExM,MAAM,WAAW,GAAG,EAAc,CAAA;YAClC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;YAE5D,IAAI,WAAW,CAAC,MAAM,EAAE;gBACtB,MAAM,IAAI,KAAK,CACb,kCAAkC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAC1D,CAAA;aACF;SACF;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;YAC/B,MAAM,CAAC,CAAA;SACR;IACH,CAAC,CACF,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CACf,KAA2C,EAC3C,OAAe,EACf,WAAqB;IAErB,IAAI;QACF,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;KACzB;IAAC,OAAO,CAAC,EAAE;QACV,IAAI,GAAG,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,CAAC,EAAE;YAChD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;SAC1B;aAAM;YACL,MAAM,CAAC,CAAA;SACR;KACF;AACH,CAAC"}

package/esm/ServerSideRenderedBlockContent.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+declare const _default: ({ model, style, }: {
+    model: {
+        error?: unknown;
+        message?: string;
+        filled?: boolean;
+        shouldDisplay?: boolean;
+        reactElement?: React.ReactElement;
+    };
+    style: CSSProperties;
+}) => React.JSX.Element | null;
+export default _default;

package/esm/ServerSideRenderedBlockContent.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { Typography } from '@mui/material';
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => {
+    const bg = theme.palette.action.disabledBackground;
+    return {
+        loading: {
+            paddingLeft: '0.6em',
+            backgroundColor: theme.palette.background.default,
+            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() {
+    // only show the loading message after 300ms to prevent excessive flickering
+    const [shown, setShown] = useState(false);
+    const { classes } = useStyles();
+    useEffect(() => {
+        const timeout = setTimeout(() => setShown(true), 300);
+        return () => clearTimeout(timeout);
+    }, []);
+    return shown ? (React.createElement("div", { className: classes.loading },
+        React.createElement(LoadingEllipses, null))) : null;
+}
+function BlockMessage({ messageText }) {
+    const { classes } = useStyles();
+    return (React.createElement("div", { className: classes.blockMessage },
+        React.createElement(Typography, null, `${messageText}`)));
+}
+function BlockError({ error }) {
+    const { classes } = useStyles();
+    return (React.createElement("div", { className: classes.blockError },
+        React.createElement(Typography, null, `${error}`)));
+}
+export default observer(function ({ model, style, }) {
+    if (model.error) {
+        return React.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
+    }
+    else if (model.message) {
+        return React.createElement(BlockMessage, { messageText: model.message });
+    }
+    else if (!model.filled) {
+        return React.createElement(LoadingMessage, null);
+    }
+    else if (model.shouldDisplay) {
+        return React.createElement("div", { style: style }, model.reactElement);
+    }
+    return null;
+});
+//# sourceMappingURL=ServerSideRenderedBlockContent.js.map

package/esm/ServerSideRenderedBlockContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerSideRenderedBlockContent.js","sourceRoot":"","sources":["../src/ServerSideRenderedBlockContent.tsx"],"names":[],"mappings":"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"}

package/esm/ServerSideSyntenyRendering.d.ts

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

package/esm/ServerSideSyntenyRendering.js

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React, { useRef, useState, useEffect } from 'react';
+import { observer, PropTypes } from 'mobx-react';
+import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+/**
+ * A block whose content is rendered outside of the main thread and hydrated by this
+ * component.
+ */
+function ServerSideSyntenyRendering({ model, }) {
+    const { imageData, style, renderProps } = model;
+    const { width, height, highResolutionScaling = 1 } = renderProps;
+    const featureCanvas = useRef(null);
+    const [done, setDone] = useState(false);
+    useEffect(() => {
+        if (!imageData) {
+            return;
+        }
+        const canvas = featureCanvas.current;
+        const context = canvas.getContext('2d');
+        drawImageOntoCanvasContext(imageData, context);
+        setDone(true);
+    }, [height, imageData, width]);
+    return (React.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+}
+ServerSideSyntenyRendering.propTypes = {
+    model: PropTypes.observableObject.isRequired,
+};
+export default observer(ServerSideSyntenyRendering);
+//# sourceMappingURL=ServerSideSyntenyRendering.js.map

package/esm/ServerSideSyntenyRendering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerSideSyntenyRendering.js","sourceRoot":"","sources":["../src/ServerSideSyntenyRendering.tsx"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,0BAA0B,EAAE,MAAM,4CAA4C,CAAA;AAEvF;;;GAGG;AACH,SAAS,0BAA0B,CAAC,EAClC,KAAK,GAWN;IACC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAC/C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,qBAAqB,GAAG,CAAC,EAAE,GAAG,WAAW,CAAA;IAEhE,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAA;IACrD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE;YACd,OAAM;SACP;QACD,MAAM,MAAM,GAAG,aAAa,CAAC,OAAQ,CAAA;QACrC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE,CAAA;QACxC,0BAA0B,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;QAC9C,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,OAAO,CACL,+CACe,qBAAqB,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,EACvD,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,KAAK,GAAG,qBAAqB,EACpC,MAAM,EAAE,MAAM,GAAG,qBAAqB,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,GAClC,CACH,CAAA;AACH,CAAC;AAED,0BAA0B,CAAC,SAAS,GAAG;IACrC,KAAK,EAAE,SAAS,CAAC,gBAAgB,CAAC,UAAU;CAC7C,CAAA;AAED,eAAe,QAAQ,CAAC,0BAA0B,CAAC,CAAA"}

package/esm/index.d.ts

@@ -0,0 +1,7 @@
+import Plugin from '@jbrowse/core/Plugin';
+import PluginManager from '@jbrowse/core/PluginManager';
+export default class DotplotPlugin extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+    configure(pluginManager: PluginManager): void;
+}

package/esm/index.js

@@ -0,0 +1,38 @@
+import Plugin from '@jbrowse/core/Plugin';
+import { isAbstractMenuManager } from '@jbrowse/core/util';
+// icons
+import TimelineIcon from '@mui/icons-material/Timeline';
+// locals
+import DotplotViewF from './DotplotView';
+import DotplotDisplayF from './DotplotDisplay';
+import DotplotRendererF from './DotplotRenderer';
+import LaunchDotplotViewF from './LaunchDotplotView';
+import ComparativeRenderer from './ComparativeRenderer';
+import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
+export default class DotplotPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'DotplotPlugin';
+    }
+    install(pluginManager) {
+        DotplotViewF(pluginManager);
+        DotplotDisplayF(pluginManager);
+        DotplotRendererF(pluginManager);
+        LaunchDotplotViewF(pluginManager);
+        DotplotReadVsRefMenuItem(pluginManager);
+        // install our comparative rendering rpc callback
+        pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager));
+    }
+    configure(pluginManager) {
+        if (isAbstractMenuManager(pluginManager.rootModel)) {
+            pluginManager.rootModel.appendToSubMenu(['Add'], {
+                label: 'Dotplot view',
+                icon: TimelineIcon,
+                onClick: (session) => {
+                    session.addView('DotplotView', {});
+                },
+            });
+        }
+    }
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD,SAAS;AACT,OAAO,YAAY,MAAM,eAAe,CAAA;AACxC,OAAO,eAAe,MAAM,kBAAkB,CAAA;AAC9C,OAAO,gBAAgB,MAAM,mBAAmB,CAAA;AAChD,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AACvD,OAAO,wBAAwB,MAAM,oBAAoB,CAAA;AAEzD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,MAAM;IAAjD;;QACE,SAAI,GAAG,eAAe,CAAA;IAwBxB,CAAC;IAtBC,OAAO,CAAC,aAA4B;QAClC,YAAY,CAAC,aAAa,CAAC,CAAA;QAC3B,eAAe,CAAC,aAAa,CAAC,CAAA;QAC9B,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC/B,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,wBAAwB,CAAC,aAAa,CAAC,CAAA;QAEvC,iDAAiD;QACjD,aAAa,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAA;IAC1E,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,cAAc;gBACrB,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;gBACpC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF"}

package/esm/util.d.ts

@@ -0,0 +1,9 @@
+import { Feature } from '@jbrowse/core/util';
+export interface ReducedFeature {
+    refName: string;
+    start: number;
+    clipPos: number;
+    end: number;
+    seqLength: number;
+}
+export declare function getTag(f: Feature, tag: string): any;

package/esm/util.js

@@ -0,0 +1,5 @@
+export function getTag(f, tag) {
+    const tags = f.get('tags');
+    return tags ? tags[tag] : f.get(tag);
+}
+//# sourceMappingURL=util.js.map

package/esm/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,MAAM,CAAC,CAAU,EAAE,GAAW;IAC5C,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AACtC,CAAC"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@jbrowse/plugin-dotplot-view",
+  "version": "2.6.1",
+  "description": "JBrowse 2 dotplot view",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/dotplot-view"
+  },
+  "author": "JBrowse Team",
+  "distMain": "dist/index.js",
+  "srcMain": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "esm"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "test": "cd ../..; jest plugins/dotplot-view",
+    "prepublishOnly": "yarn test",
+    "prepack": "yarn build && yarn useDist",
+    "postpack": "yarn useSrc",
+    "useDist": "node ../../scripts/useDist.js",
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.0.1",
+    "@mui/x-data-grid": "^6.0.1",
+    "@popperjs/core": "^2.11.0",
+    "@types/file-saver": "^2.0.1",
+    "@types/normalize-wheel": "^1.0.0",
+    "clone": "^2.1.2",
+    "file-saver": "^2.0.0",
+    "normalize-wheel": "^1.0.1",
+    "react-popper": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-alignments": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "rxjs": "^7.0.0",
+    "tss-react": "^4.0.0"
+  },
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
+}

package/src/ComparativeRenderer/index.ts

@@ -0,0 +1,87 @@
+import { checkAbortSignal } from '@jbrowse/core/util'
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType'
+import ComparativeRenderer, {
+  RenderArgs as ComparativeRenderArgs,
+  RenderArgsSerialized as ComparativeRenderArgsSerialized,
+  RenderResults,
+  ResultsSerialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType'
+import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
+
+interface RenderArgs extends ComparativeRenderArgs {
+  adapterConfig: {}
+  rendererType: string
+}
+
+interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
+  adapterConfig: {}
+  rendererType: string
+}
+
+/**
+ * call a synteny renderer with the given args
+ * param views: a set of views that each contain a set of regions
+ * used instead of passing regions directly as in render()
+ */
+export default class ComparativeRender extends RpcMethodType {
+  name = 'ComparativeRender'
+
+  async renameRegionsIfNeeded(args: RenderArgs, rend: ComparativeRenderer) {
+    return rend.renameRegionsIfNeeded(args)
+  }
+
+  getRenderer(rendererType: string) {
+    const pm = this.pluginManager
+    return pm.getRendererType(rendererType) as ComparativeRenderer
+  }
+
+  async serializeArguments(args: RenderArgs, rpcDriver: string) {
+    const { rendererType } = args
+    const renderer = this.getRenderer(rendererType)
+    const n = (await super.serializeArguments(args, rpcDriver)) as RenderArgs
+    const result = await this.renameRegionsIfNeeded(n, renderer)
+
+    return rpcDriver === 'MainThreadRpcDriver'
+      ? result
+      : renderer.serializeArgsInClient(result)
+  }
+
+  async execute(
+    args: RenderArgsSerialized & { signal?: RemoteAbortSignal },
+    rpcDriver: string,
+  ) {
+    let deserializedArgs = args
+    if (rpcDriver !== 'MainThreadRpcDriver') {
+      deserializedArgs = await this.deserializeArguments(args, rpcDriver)
+    }
+    const { sessionId, rendererType, signal } = deserializedArgs
+    if (!sessionId) {
+      throw new Error('must pass a unique session id')
+    }
+
+    checkAbortSignal(signal)
+
+    const renderer = this.getRenderer(rendererType)
+    return rpcDriver === 'MainThreadRpcDriver'
+      ? renderer.render(deserializedArgs)
+      : renderer.renderInWorker(deserializedArgs)
+  }
+
+  async deserializeReturn(
+    val: RenderResults | ResultsSerialized,
+    args: RenderArgs,
+    rpcDriver: string,
+  ): Promise<unknown> {
+    const ret = (await super.deserializeReturn(
+      val,
+      args,
+      rpcDriver,
+    )) as ResultsSerialized
+    if (rpcDriver === 'MainThreadRpcDriver') {
+      return ret
+    }
+
+    const renderer = this.getRenderer(args.rendererType)
+    return renderer.deserializeResultsInClient(ret, args)
+  }
+}

package/src/DotplotDisplay/components/DotplotDisplay.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { getContainingView } from '@jbrowse/core/util'
+
+// locals
+import { DotplotDisplayModel } from '../stateModelFactory'
+import { DotplotViewModel } from '../../DotplotView/model'
+
+function DotplotDisplay(props: {
+  model: DotplotDisplayModel
+  children?: React.ReactNode
+}) {
+  const { model, children } = props
+  const { offsetX = 0, offsetY = 0 } = model.data || {}
+  const view = getContainingView(model) as DotplotViewModel
+
+  const top = view.vview.offsetPx - offsetY
+  const left = -(view.hview.offsetPx - offsetX)
+  return (
+    <div style={{ position: 'relative' }}>
+      <model.ReactComponent2
+        {...props}
+        style={{
+          position: 'absolute',
+          top,
+          left,
+        }}
+      />
+      {children}
+    </div>
+  )
+}
+
+export default observer(DotplotDisplay)

package/src/DotplotDisplay/index.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+// locals
+import { stateModelFactory } from './stateModelFactory'
+import ReactComponent from './components/DotplotDisplay'
+
+export default (pm: PluginManager) => {
+  pm.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pm)
+    return new DisplayType({
+      name: 'DotplotDisplay',
+      displayName: 'Dotplot display',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'SyntenyTrack',
+      viewType: 'DotplotView',
+      ReactComponent,
+    })
+  })
+}
+
+/**
+ * #config DotplotDisplay
+ */
+export function configSchemaFactory(pm: any) {
+  return ConfigurationSchema(
+    'DotplotDisplay',
+    {
+      /**
+       * #slot
+       */
+      renderer: types.optional(pm.pluggableConfigSchemaType('renderer'), {
+        type: 'DotplotRenderer',
+      }),
+    },
+    {
+      /**
+       * #identifier
+       */
+      explicitIdentifier: 'displayId',
+      explicitlyTyped: true,
+    },
+  )
+}

package/src/DotplotDisplay/renderDotplotBlock.ts

@@ -0,0 +1,60 @@
+import clone from 'clone'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { getRpcSessionId } from '@jbrowse/core/util/tracks'
+import { getSnapshot, IAnyStateTreeNode } from 'mobx-state-tree'
+import { getContainingView, getSession } from '@jbrowse/core/util'
+
+import { DotplotViewModel } from '../DotplotView/model'
+
+export function renderBlockData(self: IAnyStateTreeNode) {
+  const { rpcManager } = getSession(self)
+  const { rendererType } = self
+  const { adapterConfig } = self
+  const parent = getContainingView(self) as DotplotViewModel
+
+  // Alternative to readConfObject(config) is below used because renderProps is
+  // something under our control.  Compare to serverSideRenderedBlock
+  readConfObject(self.configuration)
+  getSnapshot(parent)
+
+  if (parent.initialized) {
+    const { viewWidth, viewHeight, borderSize, borderX, borderY } = parent
+    return {
+      rendererType,
+      rpcManager,
+      renderProps: {
+        ...self.renderProps(),
+        view: clone(getSnapshot(parent)),
+        width: viewWidth,
+        height: viewHeight,
+        borderSize,
+        borderX,
+        borderY,
+        adapterConfig,
+        rendererType: rendererType.name,
+        sessionId: getRpcSessionId(self),
+        timeout: 1000000, // 10000,
+      },
+    }
+  }
+  return undefined
+}
+
+export async function renderBlockEffect(
+  props?: ReturnType<typeof renderBlockData>,
+) {
+  if (!props) {
+    return
+  }
+
+  const { rendererType, rpcManager, renderProps } = props
+  const { reactElement, ...data } = await rendererType.renderInClient(
+    rpcManager,
+    renderProps,
+  )
+  return {
+    reactElement,
+    data,
+    renderingComponent: rendererType.ReactComponent,
+  }
+}