@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/LinearReadCloudDisplay/model.js

@@ -1,74 +1,149 @@
 import { lazy } from 'react';
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
-import { getSession } from '@jbrowse/core/util';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
+import { types } from '@jbrowse/mobx-state-tree';
 import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
-import FilterListIcon from '@mui/icons-material/ClearAll';
-import PaletteIcon from '@mui/icons-material/Palette';
-import { types } from 'mobx-state-tree';
-const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { chainToSimpleFeature } from "../LinearReadArcsDisplay/chainToSimpleFeature.js";
+import { calculateCloudTicks } from "../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js";
+import { LinearReadDisplayBaseMixin } from "../shared/LinearReadDisplayBaseMixin.js";
+import { LinearReadDisplayWithLayoutMixin } from "../shared/LinearReadDisplayWithLayoutMixin.js";
+import { LinearReadDisplayWithPairFiltersMixin } from "../shared/LinearReadDisplayWithPairFiltersMixin.js";
+import { SharedModificationsMixin } from "../shared/SharedModificationsMixin.js";
+import { calculateSvgLegendWidth, getReadDisplayLegendItems, } from "../shared/legendUtils.js";
+import { getColorSchemeMenuItem, getEditFiltersMenuItem, getMismatchDisplayMenuItem, } from "../shared/menuItems.js";
+const SetFeatureHeightDialog = lazy(() => import("./components/SetFeatureHeightDialog.js"));
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
+        .compose('LinearReadCloudDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), LinearReadDisplayBaseMixin(), LinearReadDisplayWithLayoutMixin(), LinearReadDisplayWithPairFiltersMixin(), SharedModificationsMixin(), types.model({
         type: types.literal('LinearReadCloudDisplay'),
         configuration: ConfigurationReference(configSchema),
-        filterBySetting: types.frozen(),
-        colorBySetting: types.frozen(),
-        drawSingletons: true,
+        drawCloud: false,
+        noSpacing: types.maybe(types.boolean),
+        trackMaxHeight: types.maybe(types.number),
+        hideSmallIndelsSetting: types.maybe(types.boolean),
+        hideMismatchesSetting: types.maybe(types.boolean),
+        hideLargeIndelsSetting: types.maybe(types.boolean),
+        showLegend: types.maybe(types.boolean),
+        showYScalebar: types.optional(types.boolean, true),
+        showOutline: types.optional(types.boolean, true),
     }))
         .volatile(() => ({
-        loading: false,
-        chainData: undefined,
-        lastDrawnOffsetPx: undefined,
-        lastDrawnBpPerPx: 0,
-        ref: null,
+        layoutHeight: 0,
+        selectedFeatureId: undefined,
+        cloudMaxDistance: undefined,
     }))
         .views(self => ({
         get colorBy() {
-            var _a;
-            return (_a = self.colorBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'colorBy');
+            return self.colorBySetting ?? getConf(self, 'colorBy');
         },
         get filterBy() {
-            var _a;
-            return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : getConf(self, 'filterBy');
+            return self.filterBySetting ?? getConf(self, 'filterBy');
         },
     }))
         .actions(self => ({
-        setDrawSingletons(f) {
-            self.drawSingletons = f;
+        reload() {
+            self.error = undefined;
         },
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
+    }))
+        .views(self => ({
+        get dataTestId() {
+            return self.drawCloud ? 'cloud-canvas' : 'stack-canvas';
         },
-        setLastDrawnBpPerPx(n) {
-            self.lastDrawnBpPerPx = n;
+        get featureHeightSetting() {
+            return self.featureHeight ?? getConf(self, 'featureHeight');
         },
-        setLoading(f) {
-            self.loading = f;
+        get hideSmallIndels() {
+            return self.hideSmallIndelsSetting ?? getConf(self, 'hideSmallIndels');
         },
-        reload() {
-            self.error = undefined;
+        get hideMismatches() {
+            return self.hideMismatchesSetting ?? getConf(self, 'hideMismatches');
         },
-        setRef(ref) {
-            self.ref = ref;
+        get hideLargeIndels() {
+            return self.hideLargeIndelsSetting ?? getConf(self, 'hideLargeIndels');
         },
-        setColorScheme(colorBy) {
-            self.colorBySetting = {
-                ...colorBy,
-            };
+    }))
+        .views(self => ({
+        get modificationThreshold() {
+            return self.colorBy?.modifications?.threshold ?? 10;
         },
-        setChainData(args) {
-            self.chainData = args;
+        get cloudDomain() {
+            if (self.cloudMaxDistance === undefined) {
+                return undefined;
+            }
+            return [1, self.cloudMaxDistance];
         },
-        setFilterBy(filter) {
-            self.filterBySetting = {
-                ...filter,
-            };
+    }))
+        .views(self => ({
+        get cloudTicks() {
+            if (!self.drawCloud || !self.cloudDomain || !self.showYScalebar) {
+                return undefined;
+            }
+            return calculateCloudTicks(self.cloudDomain, self.height);
+        },
+    }))
+        .actions(self => ({
+        setNoSpacing(flag) {
+            self.noSpacing = flag;
+        },
+        setMaxHeight(n) {
+            self.trackMaxHeight = n;
+        },
+        setLayoutHeight(n) {
+            self.layoutHeight = n;
+        },
+        setCloudMaxDistance(maxDistance) {
+            const EPSILON = 0.000001;
+            if (self.cloudMaxDistance === undefined ||
+                Math.abs(self.cloudMaxDistance - maxDistance) > EPSILON) {
+                self.cloudMaxDistance = maxDistance;
+            }
+        },
+        setShowYScalebar(show) {
+            self.showYScalebar = show;
+        },
+        setShowOutline(show) {
+            self.showOutline = show;
+        },
+        selectFeature(chain) {
+            const session = getSession(self);
+            const syntheticFeature = chainToSimpleFeature(chain);
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                    featureData: syntheticFeature.toJSON(),
+                    view: getContainingView(self),
+                    track: getContainingTrack(self),
+                });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(syntheticFeature);
+        },
+        setDrawCloud(b) {
+            self.drawCloud = b;
+        },
+        setSelectedFeatureId(id) {
+            self.selectedFeatureId = id;
+        },
+        setHideSmallIndels(arg) {
+            self.hideSmallIndelsSetting = arg;
+        },
+        setHideMismatches(arg) {
+            self.hideMismatchesSetting = arg;
+        },
+        setHideLargeIndels(arg) {
+            self.hideLargeIndelsSetting = arg;
+        },
+        setShowLegend(s) {
+            self.showLegend = s;
         },
     }))
         .views(self => ({
-        get drawn() {
-            return self.lastDrawnOffsetPx !== undefined;
+        legendItems() {
+            return getReadDisplayLegendItems(self.colorBy, self.visibleModifications);
+        },
+        svgLegendWidth() {
+            return self.showLegend ? calculateSvgLegendWidth(this.legendItems()) : 0;
         },
     }))
         .views(self => {
@@ -77,66 +152,130 @@ function stateModelFactory(configSchema) {
             renderProps() {
                 return {
                     ...superRenderProps(),
-                    notReady: !self.chainData,
+                    notReady: false,
+                    filterBy: self.filterBy,
+                    colorBy: self.colorBy,
+                    featureHeight: self.featureHeightSetting,
+                    noSpacing: self.noSpacing ?? false,
+                    drawCloud: self.drawCloud,
+                    drawSingletons: self.drawSingletons,
+                    drawProperPairs: self.drawProperPairs,
+                    flipStrandLongReadChains: self.flipStrandLongReadChains,
+                    trackMaxHeight: self.trackMaxHeight,
+                    hideSmallIndels: self.hideSmallIndels,
+                    hideMismatches: self.hideMismatches,
+                    hideLargeIndels: self.hideLargeIndels,
+                    showOutline: self.showOutline,
+                    cloudDomain: self.cloudDomain,
+                    visibleModifications: Object.fromEntries(self.visibleModifications.toJSON()),
                 };
             },
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Draw singletons',
-                        type: 'checkbox',
-                        checked: self.drawSingletons,
-                        onClick: () => {
-                            self.setDrawSingletons(!self.drawSingletons);
-                        },
-                    },
-                    {
-                        label: 'Filter by',
-                        icon: FilterListIcon,
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                FilterByTagDialog,
-                                { model: self, handleClose },
-                            ]);
-                        },
+                        label: 'Set feature height...',
+                        subMenu: [
+                            {
+                                label: 'Normal',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 7 && self.noSpacing !== true,
+                                onClick: () => {
+                                    self.setFeatureHeight(7);
+                                    self.setNoSpacing(false);
+                                },
+                            },
+                            {
+                                label: 'Compact',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 3 && self.noSpacing === true,
+                                onClick: () => {
+                                    self.setFeatureHeight(3);
+                                    self.setNoSpacing(true);
+                                },
+                            },
+                            {
+                                label: 'Super-compact',
+                                type: 'radio',
+                                checked: self.featureHeightSetting === 1 && self.noSpacing === true,
+                                onClick: () => {
+                                    self.setFeatureHeight(1);
+                                    self.setNoSpacing(true);
+                                },
+                            },
+                            {
+                                label: 'Manually set height...',
+                                onClick: () => {
+                                    getSession(self).queueDialog(handleClose => [
+                                        SetFeatureHeightDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
+                                },
+                            },
+                        ],
                     },
                     {
-                        label: 'Color scheme',
-                        icon: PaletteIcon,
+                        label: 'Show...',
+                        icon: VisibilityIcon,
+                        type: 'subMenu',
                         subMenu: [
                             {
-                                label: 'Insert size ± 3σ and orientation',
+                                label: 'Show legend',
+                                type: 'checkbox',
+                                checked: self.showLegend,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSizeAndOrientation' });
+                                    self.setShowLegend(!self.showLegend);
                                 },
                             },
                             {
-                                label: 'Insert size ± 3σ',
+                                label: "Show as 'read cloud' (paired-end reads)",
+                                type: 'checkbox',
+                                helpText: 'In read cloud mode, the y-coordinate of paired-end reads is proportional to insert size (TLEN). This mode is designed for paired-end short reads; long reads will appear at y=0.',
+                                checked: self.drawCloud,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.setDrawCloud(!self.drawCloud);
                                 },
                             },
                             {
-                                label: 'Orientation',
+                                label: 'Show y-scalebar',
+                                type: 'checkbox',
+                                helpText: 'Show insert size scale on the y-axis (only visible in cloud mode)',
+                                checked: self.showYScalebar,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'orientation' });
+                                    self.setShowYScalebar(!self.showYScalebar);
                                 },
                             },
                             {
-                                label: 'Insert size gradient',
+                                label: 'Show read strand relative to primary',
+                                helpText: 'This makes all the reads draw their strand relative to the primary alignment, which can be helpful in seeing patterns of flipping orientation in split long-read alignments',
+                                type: 'checkbox',
+                                checked: self.flipStrandLongReadChains,
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'gradient' });
+                                    self.setFlipStrandLongReadChains(!self.flipStrandLongReadChains);
                                 },
                             },
+                            {
+                                label: 'Show outline',
+                                helpText: 'Draw an outline around each read',
+                                type: 'checkbox',
+                                checked: self.showOutline,
+                                onClick: () => {
+                                    self.setShowOutline(!self.showOutline);
+                                },
+                            },
+                            getMismatchDisplayMenuItem(self),
                         ],
                     },
+                    getEditFiltersMenuItem(self),
+                    getColorSchemeMenuItem(self),
                 ];
             },
             async renderSvg(opts) {
-                const { renderSvg } = await import('../shared/renderSvgUtil');
-                const { drawFeats } = await import('./drawFeats');
-                return renderSvg(self, opts, drawFeats);
+                const { renderSvg } = await import("./renderSvg.js");
+                return renderSvg(self, opts);
             },
         };
     })
@@ -145,9 +284,8 @@ function stateModelFactory(configSchema) {
             ;
             (async () => {
                 try {
-                    const { doAfterAttach } = await import('../shared/afterAttach');
-                    const { drawFeats } = await import('./drawFeats');
-                    doAfterAttach(self, drawFeats);
+                    const { doAfterAttachRPC } = await import("./afterAttachRPC.js");
+                    doAfterAttachRPC(self);
                 }
                 catch (e) {
                     console.error(e);
@@ -155,6 +293,29 @@ function stateModelFactory(configSchema) {
                 }
             })();
         },
-    }));
+    }))
+        .postProcessSnapshot(snap => {
+        if (!snap) {
+            return snap;
+        }
+        const { drawCloud, noSpacing, trackMaxHeight, showLegend, showOutline, hideSmallIndelsSetting, hideMismatchesSetting, hideLargeIndelsSetting, ...rest } = snap;
+        return {
+            ...rest,
+            ...(drawCloud ? { drawCloud } : {}),
+            ...(noSpacing !== undefined ? { noSpacing } : {}),
+            ...(trackMaxHeight !== undefined ? { trackMaxHeight } : {}),
+            ...(showLegend !== undefined ? { showLegend } : {}),
+            ...(!showOutline ? { showOutline } : {}),
+            ...(hideSmallIndelsSetting !== undefined
+                ? { hideSmallIndelsSetting }
+                : {}),
+            ...(hideMismatchesSetting !== undefined
+                ? { hideMismatchesSetting }
+                : {}),
+            ...(hideLargeIndelsSetting !== undefined
+                ? { hideLargeIndelsSetting }
+                : {}),
+        };
+    });
 }
 export default stateModelFactory;

package/esm/LinearReadCloudDisplay/renderSvg.d.ts

@@ -0,0 +1,3 @@
+import type { LinearReadCloudDisplayModel } from './model.ts';
+import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view';
+export declare function renderSvg(self: LinearReadCloudDisplayModel, opts: ExportSvgDisplayOptions): Promise<import("react/jsx-runtime").JSX.Element>;

package/esm/LinearReadCloudDisplay/renderSvg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getContainingView, getRpcSessionId, getSession, } from '@jbrowse/core/util';
+import { ReactRendering, renderingToSvg, } from '@jbrowse/core/util/offscreenCanvasUtils';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
+import { SVGLegend } from '@jbrowse/plugin-linear-genome-view';
+import { calculateCloudTicks } from "../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.js";
+import CloudYScaleBar from "./components/CloudYScaleBar.js";
+export async function renderSvg(self, opts) {
+    const view = getContainingView(self);
+    const session = getSession(self);
+    const { rpcManager, assemblyManager } = session;
+    const height = opts.overrideHeight ?? self.height;
+    const assemblyName = view.assemblyNames[0];
+    const assembly = assemblyName ? assemblyManager.get(assemblyName) : undefined;
+    const sequenceAdapterConfig = assembly?.configuration?.sequence?.adapter;
+    const sequenceAdapter = sequenceAdapterConfig
+        ? getSnapshot(sequenceAdapterConfig)
+        : undefined;
+    const viewSnapshot = structuredClone({
+        ...getSnapshot(view),
+        staticBlocks: view.staticBlocks,
+        width: view.width,
+    });
+    const rpcSessionId = getRpcSessionId(self);
+    const rendering = (await rpcManager.call(rpcSessionId, 'RenderLinearReadCloudDisplay', {
+        sessionId: rpcSessionId,
+        view: viewSnapshot,
+        adapterConfig: self.adapterConfig,
+        sequenceAdapter,
+        config: getSnapshot(self.configuration),
+        ...self.renderProps(),
+        cloudModeHeight: height,
+        exportSVG: opts,
+        theme: opts.theme,
+    }));
+    const finalRendering = await renderingToSvg(rendering, view.staticBlocks.totalWidthPx, height);
+    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)
+        : 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/components/ArcTooltipContents.d.ts

@@ -0,0 +1,4 @@
+import type { ArcData } from './arcUtils.ts';
+export default function ArcTooltipContents({ arc }: {
+    arc: ArcData;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSNPCoverageDisplay/components/ArcTooltipContents.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toLocale } from '@jbrowse/core/util';
+import { getStrandLabel } from "./arcUtils.js";
+export default function ArcTooltipContents({ arc }) {
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx("strong", { children: "Intron/Skip" }) }), _jsxs("div", { children: ["Location: ", arc.refName, ":", toLocale(arc.start), "-", toLocale(arc.end)] }), _jsxs("div", { children: ["Length: ", toLocale(arc.end - arc.start), " bp"] }), _jsxs("div", { children: ["Reads supporting junction: ", arc.score] }), _jsxs("div", { children: ["Strand: ", getStrandLabel(arc.strand)] })] }));
+}

package/esm/LinearSNPCoverageDisplay/components/FilterArcsByScoreDialog.d.ts

@@ -0,0 +1,7 @@
+export default function FilterArcsByScoreDialog({ model, handleClose, }: {
+    model: {
+        minArcScore: number;
+        setMinArcScore: (arg: number) => void;
+    };
+    handleClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/LinearSNPCoverageDisplay/components/FilterArcsByScoreDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+export default function FilterArcsByScoreDialog({ model, handleClose, }) {
+    const [minScore, setMinScore] = useState(`${model.minArcScore}`);
+    return (_jsxs(Dialog, { open: true, maxWidth: "md", onClose: handleClose, title: "Filter arcs by score", children: [_jsxs(DialogContent, { style: { width: '40em' }, children: [_jsx(Typography, { gutterBottom: true, children: "Filter out arcs with fewer than N reads of support. Set to 0 to show all arcs." }), _jsx(TextField, { label: "Minimum read support", type: "number", value: minScore, onChange: event => {
+                            setMinScore(event.target.value);
+                        }, slotProps: {
+                            htmlInput: { min: 0 },
+                        }, fullWidth: true, margin: "normal" })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleClose, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            const val = Number.parseInt(minScore, 10);
+                            model.setMinArcScore(Number.isNaN(val) ? 0 : Math.max(0, val));
+                            handleClose();
+                        }, children: "Apply" })] })] }));
+}

package/esm/LinearSNPCoverageDisplay/components/SNPCoverageDisplayComponent.d.ts

@@ -0,0 +1,5 @@
+import type { SNPCoverageDisplayModel } from '../model.ts';
+declare const SNPCoverageDisplayComponent: (props: {
+    model: SNPCoverageDisplayModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SNPCoverageDisplayComponent;

package/esm/LinearSNPCoverageDisplay/components/SNPCoverageDisplayComponent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LinearWiggleDisplayReactComponent } from '@jbrowse/plugin-wiggle';
+import { observer } from 'mobx-react';
+import SashimiArcs from "./SashimiArcs.js";
+const SNPCoverageDisplayComponent = observer(function SNPCoverageDisplayComponent(props) {
+    const { model } = props;
+    return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(LinearWiggleDisplayReactComponent, { ...props }), _jsx(SashimiArcs, { model: model })] }));
+});
+export default SNPCoverageDisplayComponent;

package/esm/LinearSNPCoverageDisplay/components/SashimiArcs.d.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '@jbrowse/core/util';
+export interface ArcDisplayModel {
+    showArcsSetting: boolean;
+    height: number;
+    skipFeatures: Feature[];
+}
+declare const SashimiArcs: ({ model, }: {
+    model: ArcDisplayModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default SashimiArcs;