@jbrowse/plugin-dotplot-view 2.17.0 → 3.0.0

package/esm/DotplotDisplay/stateModelFactory.js

@@ -1,32 +1,21 @@
-import React from 'react';
-import { types } from 'mobx-state-tree';
-import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';
-import { getParentRenderProps } from '@jbrowse/core/util/tracks';
-import { getContainingView, makeAbortableReaction, ReactRendering, } from '@jbrowse/core/util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models';
-// locals
+import { ReactRendering, getContainingView, makeAbortableReaction, } from '@jbrowse/core/util';
+import { getParentRenderProps } from '@jbrowse/core/util/tracks';
+import { types } from 'mobx-state-tree';
 import ServerSideRenderedBlockContent from '../ServerSideRenderedBlockContent';
 import { renderBlockData, renderBlockEffect } from './renderDotplotBlock';
-/**
- * #stateModel DotplotDisplay
- * #category display
- */
 export function stateModelFactory(configSchema) {
     return types
         .compose('DotplotDisplay', BaseDisplay, types
         .model({
-        /**
-         * #property
-         */
         type: types.literal('DotplotDisplay'),
-        /**
-         * #property
-         */
         configuration: ConfigurationReference(configSchema),
     })
         .volatile(() => ({
+        stopToken: undefined,
         warnings: [],
-        renderInProgress: undefined,
         filled: false,
         data: undefined,
         reactElement: undefined,
@@ -40,15 +29,9 @@ export function stateModelFactory(configSchema) {
             return (vview.bpPerPx === self.data.bpPerPxY &&
                 hview.bpPerPx === self.data.bpPerPxX);
         },
-        /**
-         * #getter
-         */
         get rendererTypeName() {
             return getConf(self, ['renderer', 'type']);
         },
-        /**
-         * #method
-         */
         renderProps() {
             return {
                 ...getParentRenderProps(self),
@@ -59,9 +42,6 @@ export function stateModelFactory(configSchema) {
         },
     }))
         .views(self => ({
-        /**
-         * #method
-         */
         async renderSvg(opts) {
             const props = renderBlockData(self);
             if (!props) {
@@ -76,81 +56,58 @@ export function stateModelFactory(configSchema) {
             const { hview, vview } = getContainingView(self);
             const offX = -hview.offsetPx + rendering.offsetX;
             const offY = -vview.offsetPx + rendering.offsetY;
-            return (React.createElement("g", { transform: `translate(${offX} ${-offY})` },
-                React.createElement(ReactRendering, { rendering: rendering })));
+            return (_jsx("g", { transform: `translate(${offX} ${-offY})`, children: _jsx(ReactRendering, { rendering: rendering }) }));
         },
     }))
-        .actions(self => {
-        let renderInProgress;
-        return {
-            afterAttach() {
-                makeAbortableReaction(self, () => renderBlockData(self), blockData => renderBlockEffect(blockData), {
-                    name: `${self.type} ${self.id} rendering`,
-                    delay: 500,
-                    fireImmediately: true,
-                }, this.setLoading, this.setRendered, this.setError);
-            },
-            /**
-             * #action
-             */
-            setLoading(abortController) {
-                self.filled = false;
-                self.message = undefined;
-                self.reactElement = undefined;
-                self.data = undefined;
-                self.error = undefined;
-                self.renderingComponent = undefined;
-                renderInProgress = abortController;
-            },
-            /**
-             * #action
-             */
-            setMessage(messageText) {
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
-                }
-                self.filled = false;
-                self.message = messageText;
-                self.reactElement = undefined;
-                self.data = undefined;
-                self.error = undefined;
-                self.renderingComponent = undefined;
-                renderInProgress = undefined;
-            },
-            /**
-             * #action
-             */
-            setRendered(args) {
-                if (args === undefined) {
-                    return;
-                }
-                const { data, reactElement, renderingComponent } = args;
-                self.warnings = data.warnings;
-                self.filled = true;
-                self.message = undefined;
-                self.reactElement = reactElement;
-                self.data = data;
-                self.error = undefined;
-                self.renderingComponent = renderingComponent;
-                renderInProgress = undefined;
-            },
-            /**
-             * #action
-             */
-            setError(error) {
-                console.error(error);
-                if (renderInProgress && !renderInProgress.signal.aborted) {
-                    renderInProgress.abort();
-                }
-                // the rendering failed for some reason
-                self.filled = false;
-                self.message = undefined;
-                self.reactElement = undefined;
-                self.data = undefined;
-                self.error = error;
-                self.renderingComponent = undefined;
-                renderInProgress = undefined;
-            },
-        };
-    });
+        .actions(self => ({
+        afterAttach() {
+            makeAbortableReaction(self, () => renderBlockData(self), blockData => renderBlockEffect(blockData), {
+                name: `${self.type} ${self.id} rendering`,
+                delay: 500,
+                fireImmediately: true,
+            }, this.setLoading, this.setRendered, this.setError);
+        },
+        setLoading(stopToken) {
+            self.filled = false;
+            self.message = undefined;
+            self.reactElement = undefined;
+            self.data = undefined;
+            self.error = undefined;
+            self.renderingComponent = undefined;
+            self.stopToken = stopToken;
+        },
+        setMessage(messageText) {
+            self.filled = false;
+            self.message = messageText;
+            self.reactElement = undefined;
+            self.data = undefined;
+            self.error = undefined;
+            self.renderingComponent = undefined;
+            self.stopToken = undefined;
+        },
+        setRendered(args) {
+            if (args === undefined) {
+                return;
+            }
+            const { data, reactElement, renderingComponent } = args;
+            self.warnings = data.warnings;
+            self.filled = true;
+            self.message = undefined;
+            self.reactElement = reactElement;
+            self.data = data;
+            self.error = undefined;
+            self.renderingComponent = renderingComponent;
+            self.stopToken = undefined;
+        },
+        setError(error) {
+            console.error(error);
+            self.filled = false;
+            self.message = undefined;
+            self.reactElement = undefined;
+            self.data = undefined;
+            self.error = error;
+            self.renderingComponent = undefined;
+            self.stopToken = undefined;
+        },
+    }));
 }

package/esm/DotplotReadVsRef/DotplotReadVsRef.d.ts

@@ -1,3 +1,3 @@
-import { Feature } from '@jbrowse/core/util';
-import { LinearPileupDisplayModel } from '@jbrowse/plugin-alignments';
+import type { Feature } from '@jbrowse/core/util';
+import type { LinearPileupDisplayModel } from '@jbrowse/plugin-alignments';
 export declare function onClick(feature: Feature, self: LinearPileupDisplayModel): void;

package/esm/DotplotReadVsRef/DotplotReadVsRef.js

@@ -1,6 +1,6 @@
 import { getConf } from '@jbrowse/core/configuration';
-import { getSession, gatherOverlaps } from '@jbrowse/core/util';
-import { MismatchParser, } from '@jbrowse/plugin-alignments';
+import { gatherOverlaps, getSession, sum } from '@jbrowse/core/util';
+import { MismatchParser } from '@jbrowse/plugin-alignments';
 const { featurizeSA, getClip, getLength, getLengthSansClipping } = MismatchParser;
 export function onClick(feature, self) {
     var _a;
@@ -19,25 +19,24 @@ export function onClick(feature, self) {
         const trackName = `${readName}_vs_${trackAssembly}`;
         const SA = (_a = feature.get('tags')) === null || _a === void 0 ? void 0 : _a.SA;
         const SA2 = featurizeSA(SA, feature.id(), strand, readName, true);
-        const feat = feature.toJSON();
-        feat.strand = 1;
-        feat.mate = {
-            refName: readName,
-            start: clipPos,
-            end: clipPos + getLengthSansClipping(cigar),
-        };
-        // if secondary alignment or supplementary, calculate length from SA[0]'s
-        // CIGAR which is the primary alignments. otherwise it is the primary
-        // alignment just use seq.length if primary alignment
         const totalLength = getLength(flags & 2048 ? SA2[0].CIGAR : cigar);
-        const features = [feat, ...SA2];
-        features.sort((a, b) => a.clipPos - b.clipPos);
-        const refLength = features.reduce((a, f) => a + f.end - f.start, 0);
+        const features = [
+            {
+                ...feature.toJSON(),
+                strand: 1,
+                mate: {
+                    refName: readName,
+                    start: clipPos,
+                    end: clipPos + getLengthSansClipping(cigar),
+                },
+            },
+            ...SA2,
+        ].sort((a, b) => a.clipPos - b.clipPos);
         session.addView('DotplotView', {
             type: 'DotplotView',
             hview: {
                 offsetPx: 0,
-                bpPerPx: refLength / 800,
+                bpPerPx: sum(features.map(a => a.end - a.start)) / 800,
                 displayedRegions: gatherOverlaps(features.map((f, index) => {
                     const { start, end, refName } = f;
                     return {

package/esm/DotplotReadVsRef/index.d.ts

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

package/esm/DotplotReadVsRef/index.js

@@ -1,6 +1,4 @@
-// icons
 import AddIcon from '@mui/icons-material/Add';
-// local
 import { onClick } from './DotplotReadVsRef';
 export default function DotplotReadVsRefMenuItem(pluginManager) {
     pluginManager.addToExtensionPoint('Core-extendPluggableElement', (pluggableElement) => {

package/esm/DotplotRenderer/ComparativeRenderRpc.d.ts

@@ -1,6 +1,6 @@
 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';
+import type { RenderArgs as ComparativeRenderArgs, RenderArgsSerialized as ComparativeRenderArgsSerialized, RenderResults, ResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
+import type ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 interface RenderArgs extends ComparativeRenderArgs {
     adapterConfig: Record<string, unknown>;
     rendererType: string;
@@ -9,18 +9,13 @@ interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
     adapterConfig: Record<string, unknown>;
     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: string;
     renameRegionsIfNeeded(args: RenderArgs, rend: ComparativeRenderer): Promise<ComparativeRenderArgs>;
     getRenderer(rendererType: string): ComparativeRenderer;
     serializeArguments(args: RenderArgs, rpcDriver: string): Promise<ComparativeRenderArgs | import("@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType").RenderArgsSerialized>;
     execute(args: RenderArgsSerialized & {
-        signal?: RemoteAbortSignal;
+        stopToken?: string;
     }, rpcDriver: string): Promise<RenderResults | import("@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType").ResultsSerialized>;
     deserializeReturn(val: RenderResults | ResultsSerialized, args: RenderArgs, rpcDriver: string): Promise<unknown>;
 }

package/esm/DotplotRenderer/ComparativeRenderRpc.js

@@ -1,10 +1,5 @@
-import { checkAbortSignal } from '@jbrowse/core/util';
 import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
-/**
- * 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()
- */
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
 export default class ComparativeRender extends RpcMethodType {
     constructor() {
         super(...arguments);
@@ -31,11 +26,11 @@ export default class ComparativeRender extends RpcMethodType {
         if (rpcDriver !== 'MainThreadRpcDriver') {
             deserializedArgs = await this.deserializeArguments(args, rpcDriver);
         }
-        const { sessionId, rendererType, signal } = deserializedArgs;
+        const { sessionId, rendererType, stopToken } = deserializedArgs;
         if (!sessionId) {
             throw new Error('must pass a unique session id');
         }
-        checkAbortSignal(signal);
+        checkStopToken(stopToken);
         const renderer = this.getRenderer(rendererType);
         return rpcDriver === 'MainThreadRpcDriver'
             ? renderer.render(deserializedArgs)

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -1,7 +1,8 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { Region } from '@jbrowse/core/util';
-import ComparativeRenderer, { RenderArgsDeserialized, RenderArgs } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import { Dotplot1DViewModel } from '../DotplotView/model';
+import ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
+import type { Dotplot1DViewModel } from '../DotplotView/model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { RenderArgs, RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
+import type { Region } from '@jbrowse/core/util';
 export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     adapterConfig: AnyConfigurationModel;
     height: number;
@@ -35,7 +36,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         height: number;
@@ -44,7 +45,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         offsetY: number;
         bpPerPxX: number;
         bpPerPxY: number;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         height: number;
@@ -54,7 +55,7 @@ export default class DotplotRenderer extends ComparativeRenderer {
         bpPerPxX: number;
         bpPerPxY: number;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
 }

package/esm/DotplotRenderer/DotplotRenderer.js

@@ -1,6 +1,5 @@
-import { renameRegionsIfNeeded, renderToAbstractCanvas, } from '@jbrowse/core/util';
 import ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-// locals
+import { renameRegionsIfNeeded, renderToAbstractCanvas, } from '@jbrowse/core/util';
 import { Dotplot1DView } from '../DotplotView/model';
 export default class DotplotRenderer extends ComparativeRenderer {
     constructor() {

package/esm/DotplotRenderer/components/DotplotRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
-declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => React.JSX.Element;
+import type { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
+declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => import("react/jsx-runtime").JSX.Element;
 export default DotplotRendering;

package/esm/DotplotRenderer/components/DotplotRendering.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 const DotplotRendering = observer(function (props) {
-    return React.createElement(PrerenderedCanvas, { ...props });
+    return _jsx(PrerenderedCanvas, { ...props });
 });
 export default DotplotRendering;

package/esm/DotplotRenderer/configSchema.d.ts

@@ -1,57 +1,36 @@
 declare const _default: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     color: {
         type: string;
         description: string;
         defaultValue: string;
         contextVariable: string[];
     };
-    /**
-     * #slot
-     */
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     lineWidth: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     colorBy: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     thresholdsPalette: {
         type: string;
         defaultValue: string[];
         description: string;
     };
-    /**
-     * #slot
-     */
     thresholds: {
         type: string;
         defaultValue: string[];

package/esm/DotplotRenderer/configSchema.js

@@ -1,47 +1,28 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
-/**
- * #config DotplotRenderer
- * #category renderer
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 export default ConfigurationSchema('DotplotRenderer', {
-    /**
-     * #slot
-     */
     color: {
         type: 'color',
         description: 'the color of each feature in a synteny, used with colorBy:default',
         defaultValue: '#f0f',
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     posColor: {
         type: 'color',
         description: 'the color for forward alignments, used with colorBy:strand',
         defaultValue: 'blue',
     },
-    /**
-     * #slot
-     */
     negColor: {
         type: 'color',
         description: 'the color for reverse alignments, used with colorBy:strand',
         defaultValue: 'red',
     },
-    /**
-     * #slot
-     */
     lineWidth: {
         type: 'number',
         description: 'width of the lines to be drawn',
-        defaultValue: 2.5, // 2.5 is similar to D-GENIES
+        defaultValue: 2.5,
     },
-    /**
-     * #slot
-     */
     colorBy: {
         type: 'stringEnum',
         model: types.enumeration('colorBy', [
@@ -61,17 +42,11 @@ export default ConfigurationSchema('DotplotRenderer', {
 </ul>`,
         defaultValue: 'default',
     },
-    /**
-     * #slot
-     */
     thresholdsPalette: {
         type: 'stringArray',
         defaultValue: ['#094b09', '#2ebd40', '#d5670b', '#ffd84b'],
         description: 'threshold colors, used with colorBy:identity',
     },
-    /**
-     * #slot
-     */
     thresholds: {
         type: 'stringArray',
         defaultValue: ['0.75', '0.5', '0.25', '0'],

package/esm/DotplotRenderer/drawDotplot.d.ts

@@ -1,6 +1,6 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import { Dotplot1DViewModel } from '../DotplotView/model';
+import type { Dotplot1DViewModel } from '../DotplotView/model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     adapterConfig: AnyConfigurationModel;
     height: number;

package/esm/DotplotRenderer/drawDotplot.js

@@ -1,13 +1,13 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
-import { getSnapshot } from 'mobx-state-tree';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getSnapshot } from 'mobx-state-tree';
 const { parseCigar } = MismatchParser;
 const r = 'fell outside of range due to CIGAR string';
 const lt = '(less than min coordinate of feature)';
 const gt = '(greater than max coordinate of feature)';
-const fudgeFactor = 1; // allow 1px fuzzyness before warn
+const fudgeFactor = 1;
 function drawCir(ctx, x, y, r = 1) {
     ctx.beginPath();
     ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
@@ -30,8 +30,6 @@ export async function drawDotplot(ctx, props) {
     const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
     const warnings = [];
     ctx.lineWidth = lineWidth;
-    // we operate on snapshots of these attributes of the hview/vview because
-    // it is significantly faster than accessing the mobx objects
     const { bpPerPx: hBpPerPx } = hview;
     const { bpPerPx: vBpPerPx } = vview;
     function clampWithWarnX(num, min, max, feature) {
@@ -174,7 +172,6 @@ export async function drawDotplot(ctx, props) {
                         }
                         currX = clampWithWarnX(currX, b1, b2, feature);
                         currY = clampWithWarnY(currY, e1, e2, feature);
-                        // only draw a line segment if it is bigger than 0.5px
                         if (Math.abs(currX - lastDrawnX) > 0.5 ||
                             Math.abs(currY - lastDrawnY) > 0.5) {
                             ctx.lineTo(currX, height - currY);

package/esm/DotplotRenderer/index.d.ts

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

package/esm/DotplotRenderer/index.js

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