@jbrowse/plugin-dotplot-view 3.7.0 → 4.0.1

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -1,8 +1,23 @@
-import ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import type { Dotplot1DViewModel } from '../DotplotView/model';
+import ServerSideRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType';
+import type { Dotplot1DViewModel } from '../DotplotView/model.ts';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { RenderArgs, RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
+import type { RenderArgs as ServerSideRenderArgs, RenderArgsDeserialized as ServerSideRenderArgsDeserialized, RenderArgsSerialized as ServerSideRenderArgsSerialized, ResultsDeserialized as ServerSideResultsDeserialized, ResultsSerialized as ServerSideResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType';
+import type SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+import type RpcManager from '@jbrowse/core/rpc/RpcManager';
 import type { Region } from '@jbrowse/core/util';
+export interface RenderArgs extends ServerSideRenderArgs {
+    blockKey: string;
+}
+export interface RenderArgsSerialized extends ServerSideRenderArgsSerialized {
+    blockKey: string;
+}
+export interface RenderArgsDeserialized extends ServerSideRenderArgsDeserialized {
+    blockKey: string;
+}
+export type ResultsSerialized = ServerSideResultsSerialized;
+export interface ResultsDeserialized extends ServerSideResultsDeserialized {
+    blockKey: string;
+}
 export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     adapterConfig: AnyConfigurationModel;
     height: number;
@@ -13,7 +28,7 @@ export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
         vview: Dotplot1DViewModel;
     };
 }
-interface DotplotRenderArgs extends RenderArgs {
+export interface DotplotRenderArgs extends RenderArgs {
     adapterConfig: AnyConfigurationModel;
     sessionId: string;
     view: {
@@ -25,41 +40,17 @@ interface DotplotRenderArgs extends RenderArgs {
         };
     };
 }
-export default class DotplotRenderer extends ComparativeRenderer {
+export default class DotplotRenderer extends ServerSideRenderer {
     supportsSVG: boolean;
     renameRegionsIfNeeded(args: DotplotRenderArgs): Promise<DotplotRenderArgs>;
-    render(renderProps: DotplotRenderArgsDeserialized): Promise<{
-        height: number;
-        width: number;
-        offsetX: number;
-        offsetY: number;
-        bpPerPxX: number;
-        bpPerPxY: number;
-        warnings: import("./clamp").Warning[];
-        canvasRecordedData: Record<string, unknown>;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        height: number;
-        width: number;
-        offsetX: number;
-        offsetY: number;
-        bpPerPxX: number;
-        bpPerPxY: number;
-        warnings: import("./clamp").Warning[];
-        imageData: any;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        height: number;
-        width: number;
-        offsetX: number;
-        offsetY: number;
-        bpPerPxX: number;
-        bpPerPxY: number;
-        warnings: import("./clamp").Warning[];
-        reactElement: React.ReactElement;
-        html?: string;
-    }>;
+    serializeArgsInClient(args: RenderArgs): ServerSideRenderArgsSerialized;
+    deserializeResultsInClient(result: ResultsSerialized, args: RenderArgs): ResultsDeserialized;
+    renderInClient(rpcManager: RpcManager, args: RenderArgs): Promise<ServerSideResultsSerialized>;
+    getFeatures(renderArgs: {
+        regions: Region[];
+        sessionId: string;
+        adapterConfig: AnyConfigurationModel;
+        filters?: SerializableFilterChain;
+    }): Promise<import("@jbrowse/core/util").Feature[]>;
+    render(renderProps: DotplotRenderArgsDeserialized): Promise<import("librpc-web-mod").RpcResult>;
 }
-export {};

package/esm/DotplotRenderer/DotplotRenderer.js

@@ -1,15 +1,26 @@
-import ComparativeRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import { renameRegionsIfNeeded, renderToAbstractCanvas, } from '@jbrowse/core/util';
-import { Dotplot1DView } from '../DotplotView/model';
-export default class DotplotRenderer extends ComparativeRenderer {
-    constructor() {
-        super(...arguments);
-        this.supportsSVG = true;
-    }
+import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
+import ServerSideRenderer from '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType';
+import { dedupe, getSerializedSvg, renameRegionsIfNeeded, renderToAbstractCanvas, } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { firstValueFrom } from 'rxjs';
+import { filter, toArray } from 'rxjs/operators';
+import { Dotplot1DView } from "../DotplotView/model.js";
+function isCanvasRecordedSvgExport(e) {
+    return 'canvasRecordedData' in e;
+}
+function normalizeRegion(r) {
+    return {
+        ...r,
+        start: Math.floor(r.start),
+        end: Math.ceil(r.end),
+    };
+}
+export default class DotplotRenderer extends ServerSideRenderer {
+    supportsSVG = true;
     async renameRegionsIfNeeded(args) {
-        var _a, _b;
         const pm = this.pluginManager;
-        const assemblyManager = (_b = (_a = pm.rootModel) === null || _a === void 0 ? void 0 : _a.session) === null || _b === void 0 ? void 0 : _b.assemblyManager;
+        const assemblyManager = pm.rootModel?.session?.assemblyManager;
         const { view, sessionId, adapterConfig } = args;
         async function process(regions) {
             if (!assemblyManager) {
@@ -26,8 +37,36 @@ export default class DotplotRenderer extends ComparativeRenderer {
         view.vview.displayedRegions = await process(view.vview.displayedRegions);
         return args;
     }
+    serializeArgsInClient(args) {
+        const { displayModel, ...serializable } = args;
+        return super.serializeArgsInClient(serializable);
+    }
+    deserializeResultsInClient(result, args) {
+        return {
+            ...super.deserializeResultsInClient(result, args),
+            blockKey: args.blockKey,
+        };
+    }
+    async renderInClient(rpcManager, args) {
+        const results = (await rpcManager.call(args.sessionId, 'ComparativeRender', args));
+        if (isCanvasRecordedSvgExport(results)) {
+            const { reactElement: _, ...rest } = results;
+            return {
+                ...rest,
+                html: await getSerializedSvg(results),
+            };
+        }
+        return results;
+    }
+    async getFeatures(renderArgs) {
+        const { regions, sessionId, adapterConfig, filters } = renderArgs;
+        const { dataAdapter } = await getAdapter(this.pluginManager, sessionId, adapterConfig);
+        const res = await firstValueFrom(dataAdapter
+            .getFeaturesInMultipleRegions(regions.map(r => normalizeRegion(r)), renderArgs)
+            .pipe(filter(f => (filters ? filters.passes(f, renderArgs) : true)), toArray()));
+        return dedupe(res, f => f.id());
+    }
     async render(renderProps) {
-        var _a, _b;
         const { width, height, view: { hview, vview }, } = renderProps;
         const dimensions = [width, height];
         const views = [hview, vview].map((snap, idx) => {
@@ -41,23 +80,17 @@ export default class DotplotRenderer extends ComparativeRenderer {
             regions: target.dynamicBlocks.contentBlocks,
         });
         target.setFeatures(feats);
-        const { drawDotplot } = await import('./drawDotplot');
+        const { drawDotplot } = await import("./drawDotplot.js");
         const ret = await renderToAbstractCanvas(width, height, renderProps, ctx => drawDotplot(ctx, { ...renderProps, views }));
-        const results = await super.render({
-            ...renderProps,
-            ...ret,
-            height,
-            width,
-        });
-        return {
-            ...results,
+        const serialized = {
             ...ret,
             height,
             width,
-            offsetX: ((_a = views[0].dynamicBlocks.blocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0,
-            offsetY: ((_b = views[1].dynamicBlocks.blocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx) || 0,
+            offsetX: views[0].dynamicBlocks.blocks[0]?.offsetPx || 0,
+            offsetY: views[1].dynamicBlocks.blocks[0]?.offsetPx || 0,
             bpPerPxX: views[0].bpPerPx,
             bpPerPxY: views[1].bpPerPx,
         };
+        return rpcResult(serialized, collectTransferables(ret));
     }
 }

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

@@ -1,3 +1,3 @@
-import type { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
+import type { DotplotRenderArgsDeserialized } from '../DotplotRenderer.ts';
 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 { jsx as _jsx } from "react/jsx-runtime";
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-const DotplotRendering = observer(function (props) {
+const DotplotRendering = observer(function DotplotRendering(props) {
     return _jsx(PrerenderedCanvas, { ...props });
 });
 export default DotplotRendering;

package/esm/DotplotRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const _default: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -22,7 +22,7 @@ declare const _default: import("@jbrowse/core/configuration/configurationSchema"
     };
     colorBy: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -36,5 +36,5 @@ declare const _default: import("@jbrowse/core/configuration/configurationSchema"
         defaultValue: string[];
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default _default;

package/esm/DotplotRenderer/configSchema.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { types } from 'mobx-state-tree';
+import { types } from '@jbrowse/mobx-state-tree';
 function x() { }
 export default ConfigurationSchema('DotplotRenderer', {
     color: {

package/esm/DotplotRenderer/drawDotplot.d.ts

@@ -1,7 +1,7 @@
-import { type Warning } from './clamp';
-import type { Dotplot1DViewModel } from '../DotplotView/model';
+import { type Warning } from './clamp.ts';
+import type { RenderArgsDeserialized } from './DotplotRenderer.ts';
+import type { Dotplot1DViewModel } from '../DotplotView/model.ts';
 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

@@ -3,9 +3,9 @@ import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { category10 } from '@jbrowse/core/ui/colors';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { colord } from '@jbrowse/core/util/colord';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
-import { getSnapshot } from 'mobx-state-tree';
-import { clampWithWarnX, clampWithWarnY } from './clamp';
+import { clampWithWarnX, clampWithWarnY } from "./clamp.js";
 const { parseCigar } = MismatchParser;
 function hashString(str) {
     let hash = 0;
@@ -27,20 +27,19 @@ function applyAlpha(color, alpha) {
     return colord(color).alpha(alpha).toRgbString();
 }
 export async function drawDotplot(ctx, props) {
-    var _a, _b;
     const { config, views, height, drawCigar, theme, alpha = 1, minAlignmentLength = 0, colorBy: colorByOverride, } = props;
     const color = readConfObject(config, 'color');
     const posColor = readConfObject(config, 'posColor');
     const negColor = readConfObject(config, 'negColor');
-    const colorBy = colorByOverride !== null && colorByOverride !== void 0 ? colorByOverride : readConfObject(config, 'colorBy');
+    const colorBy = colorByOverride ?? readConfObject(config, 'colorBy');
     const lineWidth = readConfObject(config, 'lineWidth');
     const thresholds = readConfObject(config, 'thresholds');
     const palette = readConfObject(config, 'thresholdsPalette');
     const isCallback = config.color.isCallback;
     const hview = views[0];
     const vview = views[1];
-    const db1 = (_a = hview.dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx;
-    const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
+    const db1 = hview.dynamicBlocks.contentBlocks[0]?.offsetPx;
+    const db2 = vview.dynamicBlocks.contentBlocks[0]?.offsetPx;
     const warnings = [];
     ctx.lineWidth = lineWidth;
     const { bpPerPx: hBpPerPx } = hview;

package/esm/DotplotRenderer/index.js

@@ -1,11 +1,11 @@
-import DotplotRenderer from './DotplotRenderer';
-import ReactComponent from './components/DotplotRendering';
-import configSchema from './configSchema';
+import { lazy } from 'react';
+import DotplotRenderer from "./DotplotRenderer.js";
+import configSchema from "./configSchema.js";
 export default function DotplotRendererF(pluginManager) {
     pluginManager.addRendererType(() => new DotplotRenderer({
         name: 'DotplotRenderer',
         configSchema: configSchema,
-        ReactComponent,
+        ReactComponent: lazy(() => import("./components/DotplotRendering.js")),
         pluginManager,
     }));
 }

package/esm/DotplotView/1dview.d.ts

@@ -1,11 +1,11 @@
-import type { Instance } from 'mobx-state-tree';
-declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+import type { Instance } from '@jbrowse/mobx-state-tree';
+declare const Dotplot1DView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -62,14 +62,14 @@ declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
     readonly minBpPerPx: number;
     readonly maxOffset: number;
     readonly minOffset: number;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-declare const DotplotHView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+declare const DotplotHView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -128,14 +128,14 @@ declare const DotplotHView: import("mobx-state-tree").IModelType<{
     readonly minOffset: number;
 } & {
     readonly width: any;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-declare const DotplotVView: import("mobx-state-tree").IModelType<{
-    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
-    bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    interRegionPaddingWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
-    minimumBlockWidth: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<number>, [undefined]>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+declare const DotplotVView: import("@jbrowse/mobx-state-tree").IModelType<{
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayedRegions: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
+    bpPerPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    offsetPx: import("@jbrowse/mobx-state-tree").IType<number | undefined, number, number>;
+    interRegionPaddingWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    minimumBlockWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
 }, {
     features: undefined | import("@jbrowse/core/util").Feature[];
     volatileWidth: number;
@@ -194,6 +194,6 @@ declare const DotplotVView: import("mobx-state-tree").IModelType<{
     readonly minOffset: number;
 } & {
     readonly width: any;
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
 export { Dotplot1DView, DotplotHView, DotplotVView };
 export type Dotplot1DViewModel = Instance<typeof Dotplot1DView>;

package/esm/DotplotView/1dview.js

@@ -1,7 +1,7 @@
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
+import { getParent } from '@jbrowse/mobx-state-tree';
 import { observable } from 'mobx';
-import { getParent } from 'mobx-state-tree';
 function x() { }
 const Dotplot1DView = Base1DView.extend(self => {
     const scaleFactor = observable.box(1);
@@ -20,12 +20,22 @@ const Dotplot1DView = Base1DView.extend(self => {
                 return 1 / 50;
             },
             get maxOffset() {
+                const contentPx = self.displayedRegionsTotalPx;
+                const viewWidth = self.width;
+                if (contentPx <= viewWidth) {
+                    return (contentPx - viewWidth) / 2;
+                }
                 const leftPadding = 10;
-                return self.displayedRegionsTotalPx - leftPadding;
+                return contentPx - leftPadding;
             },
             get minOffset() {
+                const contentPx = self.displayedRegionsTotalPx;
+                const viewWidth = self.width;
+                if (contentPx <= viewWidth) {
+                    return (contentPx - viewWidth) / 2;
+                }
                 const rightPadding = 30;
-                return -self.width + rightPadding;
+                return -viewWidth + rightPadding;
             },
         },
         actions: {

package/esm/DotplotView/components/Axes.d.ts

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 export declare const HorizontalAxis: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/Axes.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
-import { getBlockLabelKeysToHide } from './util';
+import { getBlockLabelKeysToHide } from "./util.js";
 const useStyles = makeStyles()(() => ({
     vtext: {
         gridColumn: '1/2',
@@ -20,12 +20,12 @@ const useStyles = makeStyles()(() => ({
         userSelect: 'none',
     },
 }));
-export const HorizontalAxis = observer(function ({ model, }) {
+export const HorizontalAxis = observer(function HorizontalAxis({ model, }) {
     const { viewWidth, borderY } = model;
     const { classes } = useStyles();
     return (_jsx("svg", { width: viewWidth, height: borderY, className: classes.htext, children: _jsx(HorizontalAxisRaw, { model: model }) }));
 });
-export const HorizontalAxisRaw = observer(function ({ model, }) {
+export const HorizontalAxisRaw = observer(function HorizontalAxisRaw({ model, }) {
     const { viewWidth, borderX, borderY, hview, htextRotation, hticks } = model;
     const { offsetPx, width, dynamicBlocks, bpPerPx } = hview;
     const dblocks = dynamicBlocks.contentBlocks;
@@ -37,36 +37,31 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
         staticBlocks: hview.staticBlocks,
     };
     const ticks = hticks
-        .map(tick => {
-        var _a;
-        return [
-            tick,
-            (_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
-        ];
-    })
+        .map(tick => [
+        tick,
+        bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: hviewSnap,
+        })?.offsetPx,
+    ])
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
     return (_jsxs(_Fragment, { children: [dblocks
                 .filter(region => !hide.has(region.key))
                 .map(region => {
-                const x = region.offsetPx;
-                const y = 0;
-                const xoff = Math.floor(x - hview.offsetPx);
-                return (_jsx("text", { transform: `rotate(${htextRotation},${xoff},${y})`, x: xoff, y: y + 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
-            }), ticks.map(([tick, x]) => x > 0 && x < width ? (_jsx("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                const xoff = Math.floor(region.offsetPx - hview.offsetPx);
+                return (_jsx("text", { transform: `rotate(${htextRotation},${xoff},0)`, x: xoff, y: 1, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, region.key));
+            }), ticks.map(([tick, x], idx) => x > 0 && x < width ? (_jsx("line", { x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getStrokeProps(theme.palette.text.primary) }, `line-${tick.refName}-${tick.base}-${idx}`)) : null), ticks
                 .filter(t => t[0].type === 'major')
-                .map(([tick, x]) => x > 10 && x < width ? (_jsx("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
+                .map(([tick, x], idx) => x > 10 && x < width ? (_jsx("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${tick.refName}-${tick.base}-${idx}`)) : null), _jsx("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary), children: hview.assemblyNames.join(',') })] }));
 });
-export const VerticalAxis = observer(function ({ model, }) {
+export const VerticalAxis = observer(function VerticalAxis({ model, }) {
     const { borderX, viewHeight } = model;
     const { classes } = useStyles();
     return (_jsx("svg", { className: classes.vtext, width: borderX, height: viewHeight, children: _jsx(VerticalAxisRaw, { model: model }) }));
 });
-export const VerticalAxisRaw = observer(function ({ model, }) {
+export const VerticalAxisRaw = observer(function VerticalAxisRaw({ model, }) {
     const { viewHeight, borderX, borderY, vview, vtextRotation, vticks } = model;
     const { offsetPx, width, dynamicBlocks, bpPerPx } = vview;
     const dblocks = dynamicBlocks.contentBlocks;
@@ -78,27 +73,22 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
         staticBlocks: vview.staticBlocks,
     };
     const ticks = vticks
-        .map(tick => {
-        var _a;
-        return [
-            tick,
-            (_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
-        ];
-    })
+        .map(tick => [
+        tick,
+        bpToPx({
+            refName: tick.refName,
+            coord: tick.base,
+            self: vviewSnap,
+        })?.offsetPx,
+    ])
         .filter(f => f[1] !== undefined)
         .map(f => [f[0], f[1] - offsetPx]);
     return (_jsxs(_Fragment, { children: [dblocks
                 .filter(region => !hide.has(region.key))
                 .map(region => {
-                const y = region.offsetPx;
-                const x = borderX;
-                const yoff = Math.floor(viewHeight - y + offsetPx);
-                return (_jsx("text", { transform: `rotate(${vtextRotation},${x},${y})`, x: x, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, JSON.stringify(region)));
-            }), ticks.map(([tick, y]) => y > 0 ? (_jsx("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.grey[400]) }, `line-${JSON.stringify(tick)}`)) : null), ticks
+                const yoff = Math.floor(viewHeight - region.offsetPx + offsetPx);
+                return (_jsx("text", { transform: `rotate(${vtextRotation},${borderX},${region.offsetPx})`, x: borderX, y: yoff, fontSize: 11, textAnchor: "end", ...getFillProps(theme.palette.text.primary), children: region.refName }, region.key));
+            }), ticks.map(([tick, y], idx) => y > 0 && y < viewHeight ? (_jsx("line", { y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, ...getStrokeProps(theme.palette.text.primary) }, `line-${tick.refName}-${tick.base}-${idx}`)) : null), ticks
                 .filter(t => t[0].type === 'major')
-                .map(([tick, y]) => y > 10 && y < viewHeight ? (_jsx("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${JSON.stringify(tick)}`)) : null), _jsx("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
+                .map(([tick, y], idx) => y > 10 && y < viewHeight ? (_jsx("text", { y: viewHeight - y - 3, x: borderX - 7, textAnchor: "end", dominantBaseline: "hanging", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: getTickDisplayStr(tick.base + 1, bpPerPx) }, `text-${tick.refName}-${tick.base}-${idx}`)) : null), _jsx("text", { y: (viewHeight - borderY) / 2, x: 12, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11, ...getFillProps(theme.palette.text.primary), children: vview.assemblyNames.join(',') })] }));
 });

package/esm/DotplotView/components/ColorBySelector.d.ts

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const ColorBySelector: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/ColorBySelector.js

@@ -2,10 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import PaletteIcon from '@mui/icons-material/Palette';
 import { observer } from 'mobx-react';
-const ColorBySelector = observer(function ({ model, }) {
-    var _a, _b;
-    const firstDisplay = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
-    const colorBy = (_b = firstDisplay === null || firstDisplay === void 0 ? void 0 : firstDisplay.colorBy) !== null && _b !== void 0 ? _b : 'default';
+const ColorBySelector = observer(function ColorBySelector({ model, }) {
+    const firstDisplay = model.tracks[0]?.displays[0];
+    const colorBy = firstDisplay?.colorBy ?? 'default';
     const setColorBy = (value) => {
         for (const track of model.tracks) {
             for (const display of track.displays) {

package/esm/DotplotView/components/DiagonalizationProgressDialog.d.ts

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const DiagonalizationProgressDialog: ({ handleClose, model, }: {
     handleClose: () => void;
     model: Pick<DotplotViewModel, "tracks" | "hview" | "vview" | "id" | "type" | "displayName">;

package/esm/DotplotView/components/DiagonalizationProgressDialog.js

@@ -73,7 +73,7 @@ async function runDiagonalization({ model, session, stopToken, setProgress, setM
         throw new Error('No regions to reorder');
     }
 }
-const DiagonalizationProgressDialog = observer(function ({ handleClose, model, }) {
+const DiagonalizationProgressDialog = observer(function DiagonalizationProgressDialog({ handleClose, model, }) {
     const [progress, setProgress] = useState(0);
     const [message, setMessage] = useState('Ready to start diagonalization');
     const [error, setError] = useState();

package/esm/DotplotView/components/DotplotControls.d.ts

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const DotplotControls: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/components/DotplotControls.js

@@ -9,15 +9,14 @@ import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import ColorBySelector from './ColorBySelector';
-import { CursorMouse, CursorMove } from './CursorIcon';
-import MinLengthSlider from './MinLengthSlider';
-import OpacitySlider from './OpacitySlider';
-const DiagonalizationProgressDialog = lazy(() => import('./DiagonalizationProgressDialog'));
-const DotplotControls = observer(function ({ model, }) {
-    var _a;
+import ColorBySelector from "./ColorBySelector.js";
+import { CursorMouse, CursorMove } from "./CursorIcon.js";
+import MinLengthSlider from "./MinLengthSlider.js";
+import OpacitySlider from "./OpacitySlider.js";
+const DiagonalizationProgressDialog = lazy(() => import("./DiagonalizationProgressDialog.js"));
+const DotplotControls = observer(function DotplotControls({ model, }) {
     const [showDynamicControls, setShowDynamicControls] = useState(true);
-    const hasDisplays = (_a = model.tracks[0]) === null || _a === void 0 ? void 0 : _a.displays[0];
+    const hasDisplays = model.tracks[0]?.displays[0];
     return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [_jsx(IconButton, { onClick: () => {
                     model.zoomOut();
                 }, children: _jsx(ZoomOut, {}) }), _jsx(IconButton, { onClick: () => {