@jbrowse/plugin-alignments 4.0.4 → 4.1.1

package/esm/CramAdapter/CramSlightlyLazyFeature.d.ts

@@ -14,7 +14,7 @@ export default class CramSlightlyLazyFeature implements Feature {
     get flags(): number;
     get strand(): 1 | -1;
     get qual(): string;
-    get qualRaw(): number[] | null | undefined;
+    get qualRaw(): Uint8Array<ArrayBufferLike> | null | undefined;
     get refName(): string;
     get pair_orientation(): string | null | undefined;
     get template_length(): number | undefined;

package/esm/LinearPileupDisplay/SharedLinearPileupDisplayMixin.js

@@ -5,7 +5,7 @@ import { SimpleFeature, getContainingTrack, getContainingView, getSession, isSes
 import { getRpcSessionId } from '@jbrowse/core/util/tracks';
 import { cast, isAlive, types } from '@jbrowse/mobx-state-tree';
 import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
-import FilterListIcon from '@mui/icons-material/ClearAll';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -459,7 +459,7 @@ export function SharedLinearPileupDisplayMixin(configSchema) {
                     },
                     {
                         label: 'Filter by...',
-                        icon: FilterListIcon,
+                        icon: ClearAllIcon,
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 FilterByTagDialog,

package/esm/LinearPileupDisplay/components/GroupByDialog.js

@@ -1,27 +1,115 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
 import { getContainingTrack, getContainingView, getSession, useDebounce, } from '@jbrowse/core/util';
-import { getSnapshot } from '@jbrowse/mobx-state-tree';
+import { getSnapshot, isStateTreeNode } from '@jbrowse/mobx-state-tree';
 import { Button, DialogActions, DialogContent, MenuItem, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { getUniqueTags } from "../../shared/getUniqueTags.js";
 import { defaultFilterFlags, negFlags, posFlags } from "../../shared/util.js";
+const TAG_REGEX = /^[A-Za-z][A-Za-z0-9]$/;
+function TagResults({ tag, tagSet }) {
+    if (tagSet.length === 0) {
+        return (_jsxs(Typography, { color: "warning.main", children: ["No values found for tag ", tag, " in the current region"] }));
+    }
+    return (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] }));
+}
+function createTrackId(baseId, suffix) {
+    return `${baseId}-${suffix}-${Date.now()}-sessionTrack`;
+}
+function createTagBasedTracks({ trackConf, tag, tagSet, session, view, }) {
+    const values = [...tagSet, undefined];
+    for (const tagValue of values) {
+        const trackId = createTrackId(trackConf.trackId, `${tag}:${tagValue}`);
+        session.addTrackConf({
+            ...trackConf,
+            trackId,
+            name: `${trackConf.name} (${tag}:${tagValue})`,
+            displays: [
+                {
+                    displayId: `${trackId}-LinearAlignmentsDisplay`,
+                    type: 'LinearAlignmentsDisplay',
+                    pileupDisplay: {
+                        displayId: `${trackId}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                        type: 'LinearPileupDisplay',
+                        filterBy: {
+                            ...defaultFilterFlags,
+                            tagFilter: {
+                                tag,
+                                value: tagValue,
+                            },
+                        },
+                    },
+                },
+            ],
+        });
+        view.showTrack(trackId);
+    }
+}
+function createStrandBasedTracks({ trackConf, session, view, }) {
+    const negTrackId = createTrackId(trackConf.trackId, 'strand:(-)');
+    const posTrackId = createTrackId(trackConf.trackId, 'strand:(+)');
+    session.addTrackConf({
+        ...trackConf,
+        trackId: negTrackId,
+        name: `${trackConf.name} (-)`,
+        displays: [
+            {
+                displayId: `${negTrackId}-LinearAlignmentsDisplay`,
+                type: 'LinearAlignmentsDisplay',
+                pileupDisplay: {
+                    displayId: `${negTrackId}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                    type: 'LinearPileupDisplay',
+                    filterBy: negFlags,
+                },
+            },
+            {
+                displayId: `${negTrackId}-LinearSNPCoverageDisplay`,
+                type: 'LinearSNPCoverageDisplay',
+                filterBy: negFlags,
+            },
+        ],
+    });
+    session.addTrackConf({
+        ...trackConf,
+        trackId: posTrackId,
+        name: `${trackConf.name} (+)`,
+        displays: [
+            {
+                displayId: `${posTrackId}-LinearAlignmentsDisplay`,
+                type: 'LinearAlignmentsDisplay',
+                pileupDisplay: {
+                    displayId: `${posTrackId}-LinearAlignmentsDisplay-LinearPileupDisplay`,
+                    type: 'LinearPileupDisplay',
+                    filterBy: posFlags,
+                },
+            },
+            {
+                displayId: `${posTrackId}-LinearSNPCoverageDisplay`,
+                type: 'LinearSNPCoverageDisplay',
+                filterBy: posFlags,
+            },
+        ],
+    });
+    view.showTrack(negTrackId);
+    view.showTrack(posTrackId);
+}
 const GroupByTagDialog = observer(function GroupByTagDialog(props) {
     const { model, handleClose } = props;
     const [tag, setGroupByTag] = useState('');
     const [tagSet, setGroupByTagSet] = useState();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
-    const validTag = /^[A-Za-z][A-Za-z0-9]$/.exec(tag);
+    const validTag = TAG_REGEX.exec(tag);
     const isInvalid = tag.length === 2 && !validTag;
     const debouncedTag = useDebounce(tag, 1000);
     const [type, setType] = useState('');
     useEffect(() => {
         ;
         (async () => {
-            try {
-                if (!isInvalid) {
+            const isValidTag = TAG_REGEX.test(debouncedTag);
+            if (type === 'tag' && isValidTag) {
+                try {
                     setError(undefined);
                     setLoading(true);
                     const vals = await getUniqueTags({
@@ -32,16 +120,23 @@ const GroupByTagDialog = observer(function GroupByTagDialog(props) {
                     });
                     setGroupByTagSet(vals);
                 }
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-            finally {
-                setLoading(false);
+                catch (e) {
+                    console.error(e);
+                    setError(e);
+                }
+                finally {
+                    setLoading(false);
+                }
             }
         })();
-    }, [model, isInvalid, debouncedTag]);
+    }, [model, type, debouncedTag]);
+    useEffect(() => {
+        if (type !== 'tag') {
+            setGroupByTagSet(undefined);
+            setError(undefined);
+            setLoading(false);
+        }
+    }, [type]);
     return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Group by", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "NOTE: this will create new session tracks with the \"filter by\" set to the values chosen here rather than affecting the current track state" }), _jsxs(TextField, { fullWidth: true, value: type, onChange: event => {
                             setType(event.target.value);
                         }, label: "Group by...", select: true, children: [_jsx(MenuItem, { value: "strand", children: "Strand" }), _jsx(MenuItem, { value: "tag", children: "Tag" })] }), type === 'tag' ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "textSecondary", children: "Examples: HP for haplotype, RG for read group, etc." }), _jsx(TextField, { value: tag, onChange: event => {
@@ -51,93 +146,32 @@ const GroupByTagDialog = observer(function GroupByTagDialog(props) {
                                         maxLength: 2,
                                         'data-testid': 'group-tag-name-input',
                                     },
-                                } }), error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Loading unique tags" })) : tagSet ? (_jsxs("div", { children: [_jsxs("div", { children: ["Found unique ", tag, " values:"] }), _jsx("div", { children: tagSet.join(', ') })] })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !tagSet, autoFocus: true, onClick: () => {
+                                } }), error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingEllipses, { message: "Loading unique tags" })) : tagSet ? (_jsx(TagResults, { tag: tag, tagSet: tagSet })) : null] })) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", disabled: !type ||
+                            loading ||
+                            (type === 'tag' && (!tagSet || tagSet.length === 0)), autoFocus: true, onClick: () => {
                             const track = getContainingTrack(model);
-                            const trackConf = structuredClone(getSnapshot(track.configuration));
+                            const trackConf = isStateTreeNode(track.configuration)
+                                ? structuredClone(getSnapshot(track.configuration))
+                                : track.configuration;
                             const session = getSession(model);
                             const view = getContainingView(model);
-                            if (type === 'tag') {
-                                if (tagSet) {
-                                    const ret = [...tagSet, undefined];
-                                    for (const tagValue of ret) {
-                                        const t1 = `${trackConf.trackId}-${tag}:${tagValue}-${Date.now()}-sessionTrack`;
-                                        session.addTrackConf({
-                                            ...trackConf,
-                                            trackId: t1,
-                                            name: `${trackConf.name} (${tag}:${tagValue})`,
-                                            displays: [
-                                                {
-                                                    displayId: `${t1}-LinearAlignmentsDisplay`,
-                                                    type: 'LinearAlignmentsDisplay',
-                                                    pileupDisplay: {
-                                                        displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
-                                                        type: 'LinearPileupDisplay',
-                                                        filterBy: {
-                                                            ...defaultFilterFlags,
-                                                            tagFilter: {
-                                                                tag,
-                                                                value: tagValue,
-                                                            },
-                                                        },
-                                                    },
-                                                },
-                                            ],
-                                        });
-                                        view.showTrack(t1);
-                                    }
-                                }
+                            if (type === 'tag' && tagSet) {
+                                createTagBasedTracks({
+                                    trackConf,
+                                    tag,
+                                    tagSet,
+                                    session,
+                                    view,
+                                });
                             }
                             else if (type === 'strand') {
-                                const t1 = `${trackConf.trackId}-${tag}:(-)-${Date.now()}-sessionTrack`;
-                                const t2 = `${trackConf.trackId}-${tag}:(+)-${Date.now()}-sessionTrack`;
-                                session.addTrackConf({
-                                    ...trackConf,
-                                    trackId: t1,
-                                    name: `${trackConf.name} (-)`,
-                                    displays: [
-                                        {
-                                            displayId: `${t1}-LinearAlignmentsDisplay`,
-                                            type: 'LinearAlignmentsDisplay',
-                                            pileupDisplay: {
-                                                displayId: `${t1}-LinearAlignmentsDisplay-LinearPileupDisplay`,
-                                                type: 'LinearPileupDisplay',
-                                                filterBy: negFlags,
-                                            },
-                                        },
-                                        {
-                                            displayId: `${t1}-LinearSNPCoverageDisplay`,
-                                            type: 'LinearSNPCoverageDisplay',
-                                            filterBy: negFlags,
-                                        },
-                                    ],
+                                createStrandBasedTracks({
+                                    trackConf,
+                                    session,
+                                    view,
                                 });
-                                session.addTrackConf({
-                                    ...trackConf,
-                                    trackId: t2,
-                                    name: `${trackConf.name} (+)`,
-                                    displays: [
-                                        {
-                                            displayId: `${t2}-LinearAlignmentsDisplay`,
-                                            type: 'LinearAlignmentsDisplay',
-                                            pileupDisplay: {
-                                                displayId: `${t2}-LinearAlignmentsDisplay-LinearPileupDisplay`,
-                                                type: 'LinearPileupDisplay',
-                                                filterBy: posFlags,
-                                            },
-                                        },
-                                        {
-                                            displayId: `${t2}-LinearSNPCoverageDisplay`,
-                                            type: 'LinearSNPCoverageDisplay',
-                                            filterBy: posFlags,
-                                        },
-                                    ],
-                                });
-                                view.showTrack(t1);
-                                view.showTrack(t2);
                             }
                             handleClose();
-                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                        }, children: "Cancel" })] })] }));
+                        }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: handleClose, children: "Cancel" })] })] }));
 });
 export default GroupByTagDialog;

package/esm/LinearReadArcsDisplay/model.d.ts

@@ -233,19 +233,24 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     loading: boolean;
     lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number | undefined;
     ref: HTMLCanvasElement | null;
     renderingImageData: ImageBitmap | undefined;
     renderingStopToken: import("@jbrowse/core/util").StopToken | undefined;
     statusMessage: string | undefined;
+    canvasDrawn: boolean;
 } & {
     readonly drawn: boolean;
+    readonly fullyDrawn: boolean;
 } & {
     setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setRenderingImageData(imageData: ImageBitmap | undefined): void;
     setRenderingStopToken(token?: import("@jbrowse/core/util").StopToken): void;
     setStatusMessage(msg?: string): void;
+    setCanvasDrawn(drawn: boolean): void;
 } & {
     beforeDestroy(): void;
 } & {

package/esm/LinearReadCloudDisplay/components/LinearReadCloudReactComponent.js

@@ -236,17 +236,16 @@ const Cloud = observer(function Cloud({ model, }) {
             width,
             height,
             cursor: hasHover ? 'pointer' : undefined,
-        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onClick: onClick, children: [_jsx(CloudCanvases, { model: model, width: width, height: height }), _jsx(FeatureHighlights, { selectedFeatureBounds: selectedFeatureBounds, hoveredFeature: hoveredFeature }), model.drawCloud && model.cloudTicks ? (_jsx("svg", { style: {
+        }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onClick: onClick, children: [_jsx(CloudCanvases, { model: model, width: width, height: height }), _jsx(FeatureHighlights, { selectedFeatureBounds: selectedFeatureBounds, hoveredFeature: hoveredFeature }), hoveredMismatchData && mousePosition ? (_jsx(MismatchTooltip, { mismatchData: hoveredMismatchData, mousePosition: mousePosition })) : hoveredFeatureData && mousePosition ? (_jsx(FeatureTooltip, { hoveredFeatureData: hoveredFeatureData, hasSupplementary: hoveredHasSupplementary, mousePosition: mousePosition })) : null] }));
+});
+const LinearReadCloudReactComponent = observer(function LinearReadCloudReactComponent({ model, }) {
+    return (_jsxs("div", { children: [_jsx(BaseDisplayComponent, { model: model, children: _jsx(Cloud, { model: model }) }), model.drawCloud && model.cloudTicks ? (_jsx("svg", { style: {
                     position: 'absolute',
                     top: 0,
                     left: 50,
                     pointerEvents: 'none',
                     height: model.cloudTicks.height,
-                    width: 60,
-                    zIndex: 100,
-                }, children: _jsx("g", { transform: "translate(55, 0)", children: _jsx(CloudYScaleBar, { model: model, orientation: "left" }) }) })) : null, hoveredMismatchData && mousePosition ? (_jsx(MismatchTooltip, { mismatchData: hoveredMismatchData, mousePosition: mousePosition })) : hoveredFeatureData && mousePosition ? (_jsx(FeatureTooltip, { hoveredFeatureData: hoveredFeatureData, hasSupplementary: hoveredHasSupplementary, mousePosition: mousePosition })) : null] }));
-});
-const LinearReadCloudReactComponent = observer(function LinearReadCloudReactComponent({ model, }) {
-    return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Cloud, { model: model }) }));
+                    width: 50,
+                }, children: _jsx("g", { transform: "translate(45, 0)", children: _jsx(CloudYScaleBar, { model: model, orientation: "left" }) }) })) : null] }));
 });
 export default LinearReadCloudReactComponent;

package/esm/LinearReadCloudDisplay/model.d.ts

@@ -242,19 +242,24 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     loading: boolean;
     lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number | undefined;
     ref: HTMLCanvasElement | null;
     renderingImageData: ImageBitmap | undefined;
     renderingStopToken: import("@jbrowse/core/util").StopToken | undefined;
     statusMessage: string | undefined;
+    canvasDrawn: boolean;
 } & {
     readonly drawn: boolean;
+    readonly fullyDrawn: boolean;
 } & {
     setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setRenderingImageData(imageData: ImageBitmap | undefined): void;
     setRenderingStopToken(token?: import("@jbrowse/core/util").StopToken): void;
     setStatusMessage(msg?: string): void;
+    setCanvasDrawn(drawn: boolean): void;
 } & {
     beforeDestroy(): void;
 } & {
@@ -311,8 +316,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly hideLargeIndels: any;
 } & {
     readonly modificationThreshold: any;
-    readonly cloudDomain: [number, number] | undefined;
-} & {
     readonly cloudTicks: import("../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.ts").CloudTicks | undefined;
 } & {
     setNoSpacing(flag?: boolean): void;

package/esm/LinearReadCloudDisplay/model.js

@@ -68,19 +68,13 @@ function stateModelFactory(configSchema) {
         get modificationThreshold() {
             return self.colorBy?.modifications?.threshold ?? 10;
         },
-        get cloudDomain() {
-            if (self.cloudMaxDistance === undefined) {
-                return undefined;
-            }
-            return [1, self.cloudMaxDistance];
-        },
-    }))
-        .views(self => ({
         get cloudTicks() {
-            if (!self.drawCloud || !self.cloudDomain || !self.showYScalebar) {
+            if (!self.drawCloud ||
+                self.cloudMaxDistance === undefined ||
+                !self.showYScalebar) {
                 return undefined;
             }
-            return calculateCloudTicks(self.cloudDomain, self.height);
+            return calculateCloudTicks(self.cloudMaxDistance, self.height);
         },
     }))
         .actions(self => ({
@@ -166,7 +160,6 @@ function stateModelFactory(configSchema) {
                     hideMismatches: self.hideMismatches,
                     hideLargeIndels: self.hideLargeIndels,
                     showOutline: self.showOutline,
-                    cloudDomain: self.cloudDomain,
                     visibleModifications: Object.fromEntries(self.visibleModifications.toJSON()),
                 };
             },

package/esm/LinearReadCloudDisplay/renderSvg.js

@@ -37,11 +37,10 @@ export async function renderSvg(self, opts) {
     const visibleWidth = view.width;
     const clipId = `clip-${self.id}-svg`;
     const legendItems = self.showLegend ? self.legendItems() : [];
-    const cloudDomain = rendering.cloudMaxDistance !== undefined && self.drawCloud
-        ? [1, rendering.cloudMaxDistance]
-        : null;
-    const cloudTicks = cloudDomain && self.showYScalebar
-        ? calculateCloudTicks(cloudDomain, height)
+    const cloudTicks = rendering.cloudMaxDistance !== undefined &&
+        self.drawCloud &&
+        self.showYScalebar
+        ? calculateCloudTicks(rendering.cloudMaxDistance, height)
         : null;
     return (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: visibleWidth, height: height }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: _jsx("g", { transform: `translate(${Math.max(0, -view.offsetPx)} 0)`, children: _jsx(ReactRendering, { rendering: finalRendering }) }) }), cloudTicks ? (_jsx("g", { transform: `translate(${Math.max(-view.offsetPx, 0)})`, children: _jsx(CloudYScaleBar, { model: { cloudTicks }, orientation: "left" }) })) : null, legendItems.length > 0 ? (_jsx(SVGLegend, { items: legendItems, width: visibleWidth, legendAreaWidth: opts.legendWidth })) : null] }));
 }

package/esm/LinearSNPCoverageDisplay/model.js

@@ -4,7 +4,7 @@ import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/rendere
 import { getContainingView, getSession } from '@jbrowse/core/util';
 import { cast, getSnapshot, isAlive, types } from '@jbrowse/mobx-state-tree';
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle';
-import FilterListIcon from '@mui/icons-material/FilterList';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { SharedModificationsMixin } from "../shared/SharedModificationsMixin.js";
 import { getUniqueModifications } from "../shared/getUniqueModifications.js";
@@ -268,7 +268,7 @@ function stateModelFactory(pluginManager, configSchema) {
                     },
                     {
                         label: 'Filter arcs by score...',
-                        icon: FilterListIcon,
+                        icon: ClearAllIcon,
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
                                 FilterArcsByScoreDialog,

package/esm/RenderLinearReadCloudDisplayRPC/RenderLinearReadCloudDisplay.d.ts

@@ -20,7 +20,6 @@ export interface RenderLinearReadCloudDisplayArgs {
     flipStrandLongReadChains: boolean;
     trackMaxHeight?: number;
     cloudModeHeight?: number;
-    cloudDomain?: [number, number];
     highResolutionScaling?: number;
     exportSVG?: {
         rasterizeLayers?: boolean;

package/esm/RenderLinearReadCloudDisplayRPC/drawFeatsCloud.d.ts

@@ -6,12 +6,11 @@ export interface CloudTicks {
         y: number;
     }[];
     height: number;
-    minDistance: number;
     maxDistance: number;
 }
-export declare function createCloudScale(minDistance: number, maxDistance: number, height: number): import("d3-scale").ScaleLogarithmic<number, number, never>;
-export declare function calculateCloudTicks(domain: [number, number], height: number): CloudTicks;
-export declare function calculateCloudYOffsetsUtil(computedChains: ComputedChain[], height: number, cloudDomain?: [number, number]): {
+export declare function createCloudScale(maxDistance: number, height: number): import("d3-scale").ScaleLogarithmic<number, number, never>;
+export declare function calculateCloudTicks(maxDistance: number, height: number): CloudTicks;
+export declare function calculateCloudYOffsetsUtil(computedChains: ComputedChain[], height: number): {
     chainYOffsets: Map<string, number>;
     cloudMaxDistance: number;
 };

package/esm/RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js

@@ -1,37 +1,24 @@
 import { scaleLog } from '@mui/x-charts-vendor/d3-scale';
 export const CLOUD_HEIGHT_PADDING = 20;
 const DEFAULT_MAX_DISTANCE = 1000;
-export function createCloudScale(minDistance, maxDistance, height) {
+export function createCloudScale(maxDistance, height) {
     return scaleLog()
         .base(2)
-        .domain([Math.max(1, minDistance), Math.max(2, maxDistance)])
+        .domain([1, Math.max(2, maxDistance)])
         .range([0, height - CLOUD_HEIGHT_PADDING])
         .clamp(true);
 }
-export function calculateCloudTicks(domain, height) {
-    const [minDistance, maxDistance] = domain;
-    const scale = createCloudScale(minDistance, maxDistance, height);
+export function calculateCloudTicks(maxDistance, height) {
+    const scale = createCloudScale(maxDistance, height);
     const tickValues = scale.ticks(6);
     const ticks = tickValues.map(value => ({
         value,
         y: scale(value),
     }));
-    return { ticks, height, minDistance, maxDistance };
+    return { ticks, height, maxDistance };
 }
-export function calculateCloudYOffsetsUtil(computedChains, height, cloudDomain) {
+export function calculateCloudYOffsetsUtil(computedChains, height) {
     const chainYOffsets = new Map();
-    if (cloudDomain) {
-        const [, maxDistance] = cloudDomain;
-        const scale = createCloudScale(1, maxDistance, height);
-        for (const { id, distance } of computedChains) {
-            const top = distance > 0 ? scale(distance) : 0;
-            chainYOffsets.set(id, top);
-        }
-        return {
-            chainYOffsets,
-            cloudMaxDistance: maxDistance,
-        };
-    }
     let maxDistance = Number.MIN_VALUE;
     for (const { distance } of computedChains) {
         if (distance > 0) {
@@ -41,7 +28,7 @@ export function calculateCloudYOffsetsUtil(computedChains, height, cloudDomain)
     if (maxDistance === Number.MIN_VALUE) {
         maxDistance = DEFAULT_MAX_DISTANCE;
     }
-    const scale = createCloudScale(1, maxDistance, height);
+    const scale = createCloudScale(maxDistance, height);
     for (const { id, distance } of computedChains) {
         const top = distance > 0 ? scale(distance) : 0;
         chainYOffsets.set(id, top);

package/esm/RenderLinearReadCloudDisplayRPC/executeRenderLinearReadCloudDisplay.js

@@ -12,7 +12,7 @@ import { computeChainBounds, drawFeatsCore, filterChains, sortComputedChains, }
 import { calculateStackYOffsetsUtil } from "./drawFeatsStack.js";
 import { getInsertSizeStats } from "../shared/insertSizeStats.js";
 export async function executeRenderLinearReadCloudDisplay({ pluginManager, args, }) {
-    const { sessionId, view: viewSnapshot, adapterConfig, sequenceAdapter, config, theme, featureHeight, noSpacing, drawCloud, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, trackMaxHeight, cloudModeHeight, cloudDomain, highResolutionScaling, exportSVG, statusCallback = () => { }, stopToken, visibleModifications, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, } = args;
+    const { sessionId, view: viewSnapshot, adapterConfig, sequenceAdapter, config, theme, featureHeight, noSpacing, drawCloud, colorBy, drawSingletons, drawProperPairs, flipStrandLongReadChains, trackMaxHeight, cloudModeHeight, highResolutionScaling, exportSVG, statusCallback = () => { }, stopToken, visibleModifications, hideSmallIndels, hideMismatches, hideLargeIndels, showOutline, } = args;
     const view = Base1DView.create(viewSnapshot);
     if (viewSnapshot.width) {
         view.setVolatileWidth(viewSnapshot.width);
@@ -125,7 +125,7 @@ export async function executeRenderLinearReadCloudDisplay({ pluginManager, args,
             view: viewSnap,
             calculateYOffsets: (chains) => {
                 return drawCloud
-                    ? calculateCloudYOffsetsUtil(chains, actualHeight, cloudDomain)
+                    ? calculateCloudYOffsetsUtil(chains, actualHeight)
                     : calculateStackYOffsetsUtil(chains, featureHeight, noSpacing, trackMaxHeight ?? 1200);
             },
         });

package/esm/shared/LinearReadDisplayBaseMixin.d.ts

@@ -5,19 +5,24 @@ export declare function LinearReadDisplayBaseMixin(): import("@jbrowse/mobx-stat
 }, {
     loading: boolean;
     lastDrawnOffsetPx: number | undefined;
+    lastDrawnBpPerPx: number | undefined;
     ref: HTMLCanvasElement | null;
     renderingImageData: ImageBitmap | undefined;
     renderingStopToken: import("@jbrowse/core/util").StopToken | undefined;
     statusMessage: string | undefined;
+    canvasDrawn: boolean;
 } & {
     readonly drawn: boolean;
+    readonly fullyDrawn: boolean;
 } & {
     setLastDrawnOffsetPx(n: number): void;
+    setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setRenderingImageData(imageData: ImageBitmap | undefined): void;
     setRenderingStopToken(token?: import("@jbrowse/core/util").StopToken): void;
     setStatusMessage(msg?: string): void;
+    setCanvasDrawn(drawn: boolean): void;
 } & {
     beforeDestroy(): void;
 } & {

package/esm/shared/createRPCRenderingSetup.d.ts

@@ -20,6 +20,7 @@ export interface RPCRenderableModel {
     ref: HTMLCanvasElement | null;
     renderingImageData?: ImageBitmap;
     setStatusMessage?: (msg: string) => void;
+    setCanvasDrawn?: (drawn: boolean) => void;
 }
 export interface RPCRenderSetupParams<T extends RPCRenderableModel, R = Record<string, unknown>> {
     self: T;

package/esm/shared/createRPCRenderingSetup.js

@@ -33,6 +33,7 @@ export function createRPCRenderFunction({ self, rpcMethodName, getRPCParams, onR
             const stopToken = createStopToken();
             self.setRenderingStopToken(stopToken);
             self.setLoading(true);
+            self.setCanvasDrawn?.(false);
             const viewSnapshot = {
                 displayedRegions: structuredClone(view.displayedRegions),
                 bpPerPx: view.bpPerPx,
@@ -69,6 +70,7 @@ export function createRPCRenderFunction({ self, rpcMethodName, getRPCParams, onR
         }
         catch (error) {
             if (!isAbortException(error)) {
+                console.error(error);
                 self.setError(error);
             }
         }
@@ -80,7 +82,10 @@ export function createRPCRenderFunction({ self, rpcMethodName, getRPCParams, onR
 }
 export function setupCanvasRenderingAutorun(self) {
     createAutorun(self, async () => {
-        drawCanvasImageData(self.ref, self.renderingImageData);
+        const success = drawCanvasImageData(self.ref, self.renderingImageData);
+        if (isAlive(self)) {
+            self.setCanvasDrawn?.(success);
+        }
     }, {
         name: 'CanvasRenderAutorun',
     });

package/esm/shared/menuItems.js

@@ -1,6 +1,6 @@
 import { lazy } from 'react';
 import { getSession } from '@jbrowse/core/util';
-import FilterListIcon from '@mui/icons-material/ClearAll';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
 import PaletteIcon from '@mui/icons-material/Palette';
 import { modificationData } from "./modificationData.js";
 const FilterByTagDialog = lazy(() => import("./components/FilterByTagDialog.js"));
@@ -150,7 +150,7 @@ export function getColorSchemeMenuItem(model) {
 export function getFilterByMenuItem(model) {
     return {
         label: 'Filter by',
-        icon: FilterListIcon,
+        icon: ClearAllIcon,
         onClick: () => {
             getSession(model).queueDialog((handleClose) => [
                 FilterByTagDialog,
@@ -162,7 +162,7 @@ export function getFilterByMenuItem(model) {
 export function getEditFiltersMenuItem(model) {
     return {
         label: 'Edit filters',
-        icon: FilterListIcon,
+        icon: ClearAllIcon,
         type: 'subMenu',
         subMenu: [
             {

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "4.0.4",
+  "version": "4.1.1",
+  "type": "module",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -21,11 +22,11 @@
   ],
   "dependencies": {
     "@gmod/bam": "^7.1.15",
-    "@gmod/cram": "^7.0.3",
+    "@gmod/cram": "^8.0.0",
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@mui/x-charts-vendor": "^8.25.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@mui/x-charts-vendor": "^8.26.0",
     "canvas2svg": "^1.0.16",
     "copy-to-clipboard": "^3.3.3",
     "fast-deep-equal": "^3.1.3",
@@ -33,10 +34,10 @@
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
     "rxjs": "^7.8.2",
-    "@jbrowse/core": "^4.0.4",
-    "@jbrowse/plugin-linear-genome-view": "^4.0.4",
-    "@jbrowse/plugin-wiggle": "^4.0.4",
-    "@jbrowse/sv-core": "^4.0.4"
+    "@jbrowse/core": "^4.1.1",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.1",
+    "@jbrowse/plugin-wiggle": "^4.1.1",
+    "@jbrowse/sv-core": "^4.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0"