@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/esm/DotplotView/model.js

@@ -1,20 +1,17 @@
 import { lazy } from 'react';
-import { addDisposer, cast, getParent, getRoot, getSnapshot, resolveIdentifier, types, } from 'mobx-state-tree';
-import { saveAs } from 'file-saver';
-import { autorun, transaction } from 'mobx';
-import { getParentRenderProps } from '@jbrowse/core/util/tracks';
-import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import { getSession, isSessionModelWithWidgets, minmax, measureText, max, localStorageGetItem, getTickDisplayStr, } from '@jbrowse/core/util';
 import { getConf } from '@jbrowse/core/configuration';
-import { ElementId } from '@jbrowse/core/util/types/mst';
-// icons
+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 { ElementId } from '@jbrowse/core/util/types/mst';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
-// locals
+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';
-// lazies
 const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
 const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 function stringLenPx(a) {
@@ -28,94 +25,47 @@ function pxWidthForBlocks(blocks, bpPerPx, hide) {
             .map(b => stringLenPx(getTickDisplayStr(b.end, bpPerPx))),
     ]);
 }
-/**
- * #stateModel DotplotView
- * #category view
- * extends
- * - [BaseViewModel](../baseviewmodel)
- */
 export default function stateModelFactory(pm) {
     return types
         .compose('DotplotView', BaseViewModel, types.model({
-        /**
-         * #property
-         */
         id: ElementId,
-        /**
-         * #property
-         */
         type: types.literal('DotplotView'),
-        /**
-         * #property
-         */
         height: 600,
-        /**
-         * #property
-         */
         borderSize: 20,
-        /**
-         * #property
-         */
         tickSize: 5,
-        /**
-         * #property
-         */
         vtextRotation: 0,
-        /**
-         * #property
-         */
         htextRotation: -90,
-        /**
-         * #property
-         */
         fontSize: 15,
-        /**
-         * #property
-         */
         trackSelectorType: 'hierarchical',
-        /**
-         * #property
-         */
         assemblyNames: types.array(types.string),
-        /**
-         * #property
-         */
         drawCigar: true,
-        /**
-         * #property
-         */
         hview: types.optional(DotplotHView, {}),
-        /**
-         * #property
-         */
         vview: types.optional(DotplotVView, {}),
-        /**
-         * #property
-         */
         tracks: types.array(pm.pluggableMstType('track', 'stateModel')),
-        /**
-         * #property
-         * this represents tracks specific to this view specifically used
-         * for read vs ref dotplots where this track would not really apply
-         * elsewhere
-         */
         viewTrackConfigs: types.array(pm.pluggableConfigSchemaType('track')),
     }))
         .volatile(() => ({
         volatileWidth: undefined,
         volatileError: undefined,
-        // these are 'personal preferences', stored in volatile and
-        // loaded/written to localStorage
         cursorMode: localStorageGetItem('dotplot-cursorMode') || 'crosshair',
-        showPanButtons: Boolean(JSON.parse(localStorageGetItem('dotplot-showPanbuttons') || 'true')),
+        showPanButtons: localStorageGetBoolean('dotplot-showPanbuttons', true),
         wheelMode: localStorageGetItem('dotplot-wheelMode') || 'zoom',
         borderX: 100,
         borderY: 100,
+        importFormSyntenyTrackSelections: observable.array(),
+    }))
+        .actions(self => ({
+        importFormRemoveRow(idx) {
+            self.importFormSyntenyTrackSelections.splice(idx, 1);
+        },
+        clearImportFormSyntenyTracks() {
+            self.importFormSyntenyTrackSelections.clear();
+        },
+        setImportFormSyntenyTrack(arg, val) {
+            self.importFormSyntenyTrackSelections[arg] = val;
+        },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get width() {
             if (!self.volatileWidth) {
                 throw new Error('width not initialized');
@@ -124,9 +74,6 @@ export default function stateModelFactory(pm) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get assemblyErrors() {
             const { assemblyManager } = getSession(self);
             return self.assemblyNames
@@ -134,27 +81,18 @@ export default function stateModelFactory(pm) {
                 .filter(f => !!f)
                 .join(', ');
         },
-        /**
-         * #getter
-         */
         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; });
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get initialized() {
             return (self.volatileWidth !== undefined &&
                 self.hview.displayedRegions.length > 0 &&
                 self.vview.displayedRegions.length > 0 &&
                 self.assembliesInitialized);
         },
-        /**
-         * #getter
-         */
         get hticks() {
             const { hview } = self;
             const { dynamicBlocks, staticBlocks, bpPerPx } = hview;
@@ -162,9 +100,6 @@ export default function stateModelFactory(pm) {
                 ? []
                 : makeTicks(staticBlocks.contentBlocks, bpPerPx);
         },
-        /**
-         * #getter
-         */
         get vticks() {
             const { vview } = self;
             const { dynamicBlocks, staticBlocks, bpPerPx } = vview;
@@ -172,33 +107,18 @@ export default function stateModelFactory(pm) {
                 ? []
                 : makeTicks(staticBlocks.contentBlocks, bpPerPx);
         },
-        /**
-         * #getter
-         */
         get loading() {
             return self.assemblyNames.length > 0 && !this.initialized;
         },
-        /**
-         * #getter
-         */
         get viewWidth() {
             return self.width - self.borderX;
         },
-        /**
-         * #getter
-         */
         get viewHeight() {
             return self.height - self.borderY;
         },
-        /**
-         * #getter
-         */
         get views() {
             return [self.hview, self.vview];
         },
-        /**
-         * #method
-         */
         renderProps() {
             const session = getSession(self);
             return {
@@ -209,89 +129,49 @@ export default function stateModelFactory(pm) {
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         setShowPanButtons(flag) {
             self.showPanButtons = flag;
         },
-        /**
-         * #action
-         */
         setWheelMode(str) {
             self.wheelMode = str;
         },
-        /**
-         * #action
-         */
         setCursorMode(str) {
             self.cursorMode = str;
         },
-        /**
-         * #action
-         */
         setDrawCigar(flag) {
             self.drawCigar = flag;
         },
-        /**
-         * #action
-         * returns to the import form
-         */
         clearView() {
             self.hview.setDisplayedRegions([]);
             self.vview.setDisplayedRegions([]);
             self.assemblyNames = cast([]);
             self.tracks.clear();
         },
-        /**
-         * #action
-         */
         setBorderX(n) {
             self.borderX = n;
         },
-        /**
-         * #action
-         */
         setBorderY(n) {
             self.borderY = n;
         },
-        /**
-         * #action
-         */
         setWidth(newWidth) {
             self.volatileWidth = newWidth;
             return self.volatileWidth;
         },
-        /**
-         * #action
-         */
         setHeight(newHeight) {
             self.height = newHeight;
             return self.height;
         },
-        /**
-         * #action
-         */
         setError(e) {
             self.volatileError = e;
         },
-        /**
-         * #action
-         */
         zoomOut() {
             self.hview.zoomOut();
             self.vview.zoomOut();
         },
-        /**
-         * #action
-         */
         zoomIn() {
             self.hview.zoomIn();
             self.vview.zoomIn();
         },
-        /**
-         * #action
-         */
         activateTrackSelector() {
             if (self.trackSelectorType === 'hierarchical') {
                 const session = getSession(self);
@@ -303,9 +183,6 @@ export default function stateModelFactory(pm) {
             }
             throw new Error(`invalid track selector type ${self.trackSelectorType}`);
         },
-        /**
-         * #action
-         */
         showTrack(trackId, initialSnapshot = {}) {
             const schema = pm.pluggableConfigSchemaType('track');
             const conf = resolveIdentifier(schema, getRoot(self), trackId);
@@ -326,9 +203,6 @@ export default function stateModelFactory(pm) {
             });
             self.tracks.push(track);
         },
-        /**
-         * #action
-         */
         hideTrack(trackId) {
             const schema = pm.pluggableConfigSchemaType('track');
             const conf = resolveIdentifier(schema, getRoot(self), trackId);
@@ -338,9 +212,6 @@ export default function stateModelFactory(pm) {
             });
             return t.length;
         },
-        /**
-         * #action
-         */
         toggleTrack(trackId) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
@@ -349,22 +220,13 @@ export default function stateModelFactory(pm) {
             }
             return false;
         },
-        /**
-         * #action
-         */
         setAssemblyNames(target, query) {
             self.assemblyNames = cast([target, query]);
         },
-        /**
-         * #action
-         */
         setViews(arr) {
             self.hview = cast(arr[0]);
             self.vview = cast(arr[1]);
         },
-        /**
-         * #action
-         */
         getCoords(mousedown, mouseup) {
             const [xmin, xmax] = minmax(mouseup[0], mousedown[0]);
             const [ymin, ymax] = minmax(mouseup[1], mousedown[1]);
@@ -377,10 +239,6 @@ export default function stateModelFactory(pm) {
                 ]
                 : undefined;
         },
-        /**
-         * #action
-         * zooms into clicked and dragged region
-         */
         zoomInToMouseCoords(mousedown, mouseup) {
             const result = this.getCoords(mousedown, mouseup);
             if (result) {
@@ -389,19 +247,12 @@ export default function stateModelFactory(pm) {
                 self.vview.moveTo(y2, y1);
             }
         },
-        /**
-         * #action
-         */
         showAllRegions() {
             self.hview.zoomTo(self.hview.maxBpPerPx);
             self.vview.zoomTo(self.vview.maxBpPerPx);
             self.vview.center();
             self.hview.center();
         },
-        /**
-         * #action
-         * creates a linear synteny view from the clicked and dragged region
-         */
         onDotplotView(mousedown, mouseup) {
             const result = this.getCoords(mousedown, mouseup);
             if (result) {
@@ -423,9 +274,6 @@ export default function stateModelFactory(pm) {
                 d2.moveTo(y2, y1);
                 d1.zoomTo(d1.bpPerPx / (self.width / self.hview.width), 0);
                 d2.zoomTo(d2.bpPerPx / (self.width / self.vview.width), 0);
-                // add the specific evidence tracks to the LGVs in the split view
-                // note: scales the bpPerPx by scaling proportional of the dotplot
-                // width to the eventual lgv width
                 const tracks = self.tracks
                     .map(track => track.configuration.displays.find((display) => display.type === 'LinearSyntenyDisplay'))
                     .filter(f => !!f)
@@ -464,21 +312,16 @@ export default function stateModelFactory(pm) {
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         * creates an svg export and save using FileSaver
-         */
         async exportSvg(opts = {}) {
             const { renderToSvg } = await import('./svgcomponents/SVGDotplotView');
             const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             saveAs(blob, opts.filename || 'image.svg');
         },
-        // if any of our assemblies are temporary assemblies
         beforeDestroy() {
             var _a;
             const session = getSession(self);
-            for (const name in self.assemblyNames) {
+            for (const name of self.assemblyNames) {
                 (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
             }
         },
@@ -494,13 +337,10 @@ export default function stateModelFactory(pm) {
             }));
             addDisposer(self, autorun(() => {
                 const session = getSession(self);
-                // don't operate if width not set yet
                 if (self.volatileWidth === undefined ||
                     !self.assembliesInitialized) {
                     return;
                 }
-                // also don't operate if displayedRegions already set, this is a
-                // helper autorun to load regions from assembly
                 if (self.hview.displayedRegions.length > 0 &&
                     self.vview.displayedRegions.length > 0) {
                     return;
@@ -516,7 +356,6 @@ export default function stateModelFactory(pm) {
                 });
             }, { delay: 1000 }));
             addDisposer(self, autorun(function borderSetter() {
-                // make sure we have a width on the view before trying to load
                 if (self.volatileWidth === undefined) {
                     return;
                 }
@@ -530,14 +369,10 @@ export default function stateModelFactory(pm) {
                 const hhide = getBlockLabelKeysToHide(hblocks, viewWidth, hoffset);
                 const by = pxWidthForBlocks(hblocks, vview.bpPerPx, hhide);
                 const bx = pxWidthForBlocks(vblocks, hview.bpPerPx, vhide);
-                // these are set via autorun to avoid dependency cycle
                 self.setBorderY(Math.max(by + padding, 50));
                 self.setBorderX(Math.max(bx + padding, 50));
             }));
         },
-        /**
-         * #action
-         */
         squareView() {
             const { hview, vview } = self;
             const avg = (hview.bpPerPx + vview.bpPerPx) / 2;
@@ -548,9 +383,6 @@ export default function stateModelFactory(pm) {
             vview.setBpPerPx(avg);
             vview.centerAt(vpx.coord, vpx.refName, vpx.index);
         },
-        /**
-         * #action
-         */
         squareViewProportional() {
             const { hview, vview } = self;
             const ratio = hview.width / vview.width;
@@ -564,39 +396,21 @@ export default function stateModelFactory(pm) {
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         */
         menuItems() {
             const session = getSession(self);
             return [
                 {
                     label: 'Return to import form',
+                    icon: FolderOpenIcon,
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
                             ReturnToImportFormDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
-                    icon: FolderOpenIcon,
-                },
-                {
-                    label: 'Square view - same bp per pixel',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Rectangular view - same total bp',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Show all regions',
-                    onClick: () => {
-                        self.showAllRegions();
-                    },
                 },
                 {
                     label: 'Export SVG',
@@ -604,7 +418,10 @@ export default function stateModelFactory(pm) {
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
                             ExportSvgDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
                 },
@@ -619,9 +436,6 @@ export default function stateModelFactory(pm) {
                     : []),
             ];
         },
-        /**
-         * #getter
-         */
         get error() {
             return self.volatileError || self.assemblyErrors;
         },

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

@@ -1,5 +1,4 @@
-import React from 'react';
 export default function SVGBackground({ width, height, }: {
     width: number;
     height: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/svgcomponents/SVGBackground.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { stripAlpha } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
 export default function SVGBackground({ width, height, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: stripAlpha(theme.palette.background.default) }));
+    return (_jsx("rect", { x: 0, y: 0, width: width, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

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

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

package/esm/DotplotView/svgcomponents/SVGDotplotView.js

@@ -1,18 +1,15 @@
-import React from 'react';
-import { when } from 'mobx';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getSession, renderToStaticMarkup } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { getRoot } from 'mobx-state-tree';
-import { GridRaw } from '../components/Grid';
-import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
+import { when } from 'mobx';
 import SVGBackground from './SVGBackground';
-// render LGV to SVG
+import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
+import { GridRaw } from '../components/Grid';
 export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
     const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
-    const { createRootFn } = getRoot(model);
     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;
@@ -23,20 +20,5 @@ export async function renderToSvg(model, opts) {
         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) => (
-                    /* biome-ignore lint/suspicious/noArrayIndexKey: */
-                    React.createElement("g", { key: i }, result))))),
-                React.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
-                    React.createElement(HorizontalAxisRaw, { model: model }))))), createRootFn);
+    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 }) })] }) }) }));
 }

package/esm/DotplotView/types.d.ts

@@ -0,0 +1,12 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { SnapshotIn } from 'mobx-state-tree';
+export type Conf = SnapshotIn<AnyConfigurationModel>;
+export type ImportFormSyntenyTrack = {
+    type: 'preConfigured';
+    value: string;
+} | {
+    type: 'userOpened';
+    value: Conf;
+} | {
+    type: 'none';
+};

package/esm/DotplotView/types.js

@@ -0,0 +1 @@
+export {};

package/esm/LaunchDotplotView.d.ts

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

package/esm/LaunchDotplotView.js

@@ -1,8 +1,6 @@
 import { transaction } from 'mobx';
 export default function LaunchDotplotView(pluginManager) {
-    pluginManager.addToExtensionPoint('LaunchView-DotplotView', 
-    // @ts-expect-error
-    async ({ session, views, tracks = [], }) => {
+    pluginManager.addToExtensionPoint('LaunchView-DotplotView', async ({ session, views, tracks = [], }) => {
         try {
             const model = session.addView('DotplotView', {});
             const assemblyNames = views.map(view => view.assembly);
@@ -13,7 +11,6 @@ export default function LaunchDotplotView(pluginManager) {
                 ]);
                 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);

package/esm/ServerSideRenderedBlockContent.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;
@@ -8,5 +8,5 @@ declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
         reactElement?: React.ReactElement;
     };
     style: CSSProperties;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ServerSideRenderedDotplotContent;