@jbrowse/plugin-dotplot-view 2.17.0 → 2.18.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, 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, 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,84 +25,28 @@ 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')),
         wheelMode: localStorageGetItem('dotplot-wheelMode') || 'zoom',
@@ -113,9 +54,6 @@ export default function stateModelFactory(pm) {
         borderY: 100,
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get width() {
             if (!self.volatileWidth) {
                 throw new Error('width not initialized');
@@ -124,9 +62,6 @@ export default function stateModelFactory(pm) {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get assemblyErrors() {
             const { assemblyManager } = getSession(self);
             return self.assemblyNames
@@ -134,27 +69,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 +88,6 @@ export default function stateModelFactory(pm) {
                 ? []
                 : makeTicks(staticBlocks.contentBlocks, bpPerPx);
         },
-        /**
-         * #getter
-         */
         get vticks() {
             const { vview } = self;
             const { dynamicBlocks, staticBlocks, bpPerPx } = vview;
@@ -172,33 +95,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 +117,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 +171,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 +191,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 +200,6 @@ export default function stateModelFactory(pm) {
             });
             return t.length;
         },
-        /**
-         * #action
-         */
         toggleTrack(trackId) {
             const hiddenCount = this.hideTrack(trackId);
             if (!hiddenCount) {
@@ -349,22 +208,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 +227,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 +235,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 +262,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,17 +300,12 @@ 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);
@@ -494,13 +325,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 +344,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 +357,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 +371,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,9 +384,6 @@ export default function stateModelFactory(pm) {
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         */
         menuItems() {
             const session = getSession(self);
             return [
@@ -619,9 +436,6 @@ export default function stateModelFactory(pm) {
                     : []),
             ];
         },
-        /**
-         * #getter
-         */
         get error() {
             return self.volatileError || self.assemblyErrors;
         },

package/esm/DotplotView/svgcomponents/SVGBackground.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useTheme } from '@mui/material';
 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) }));

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,13 +1,12 @@
 import React from 'react';
-import { when } from 'mobx';
+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 { when } from 'mobx';
 import { getRoot } from 'mobx-state-tree';
-import { GridRaw } from '../components/Grid';
-import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
 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);
@@ -23,7 +22,6 @@ 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() },
@@ -34,9 +32,7 @@ export async function renderToSvg(model, opts) {
                     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", { 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 }))))), createRootFn);
 }

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,5 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import React from 'react';
 declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;

package/esm/ServerSideRenderedBlockContent.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { Typography } from '@mui/material';
 import { LoadingEllipses } from '@jbrowse/core/ui';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => {
     const bg = theme.palette.action.disabledBackground;
     return {
@@ -24,7 +24,6 @@ const useStyles = makeStyles()(theme => {
     };
 });
 function LoadingMessage() {
-    // only show the loading message after 300ms to prevent excessive flickering
     const [shown, setShown] = useState(false);
     const { classes } = useStyles();
     useEffect(() => {

package/esm/ServerSideSyntenyRendering.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-/**
- * A block whose content is rendered outside of the main thread and hydrated by
- * this component.
- */
 interface ModelType {
     imageData: string;
     style: Record<string, string>;

package/esm/ServerSideSyntenyRendering.js

@@ -1,6 +1,6 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { observer } from 'mobx-react';
+import React, { useEffect, useRef, useState } from 'react';
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { observer } from 'mobx-react';
 const ServerSideSyntenyRendering = observer(function ({ model, }) {
     const { imageData, style, renderProps } = model;
     const { width, height, highResolutionScaling = 1 } = renderProps;

package/esm/index.d.ts

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

package/esm/index.js

@@ -1,14 +1,12 @@
 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 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';
-import DotplotReadVsRefMenuItem from './DotplotReadVsRef';
 export default class DotplotPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -20,7 +18,6 @@ export default class DotplotPlugin extends Plugin {
         DotplotRendererF(pluginManager);
         LaunchDotplotViewF(pluginManager);
         DotplotReadVsRefMenuItem(pluginManager);
-        // install our comparative rendering rpc callback
         pluginManager.addRpcMethod(() => new ComparativeRenderer(pluginManager));
     }
     configure(pluginManager) {

package/esm/util.d.ts

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export interface ReducedFeature {
     refName: string;
     start: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -36,11 +36,9 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.3",
     "@mui/icons-material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@types/file-saver": "^2.0.1",
-    "clone": "^2.1.2",
     "file-saver": "^2.0.0"
   },
   "peerDependencies": {
@@ -61,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eed30b5e671f8f7823652d7cecc51aa89226de46"
+  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
 }