@jbrowse/plugin-alignments 3.7.0 → 4.0.0

package/esm/LinearReadCloudDisplay/afterAttachRPC.js

@@ -0,0 +1,56 @@
+import { getContainingView } from '@jbrowse/core/util';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { buildFlatbushIndex, buildMismatchFlatbushIndex, } from "../RenderLinearReadCloudDisplayRPC/drawFeatsCommon.js";
+import { createRPCRenderFunction, setupCanvasRenderingAutorun, } from "../shared/createRPCRenderingSetup.js";
+import { setupModificationsAutorun } from "../shared/setupModificationsAutorun.js";
+import { createAutorun } from "../util.js";
+export function doAfterAttachRPC(self) {
+    const createCloudRender = (drawCloud) => createRPCRenderFunction({
+        self,
+        rpcMethodName: 'RenderLinearReadCloudDisplay',
+        getRPCParams: () => ({
+            ...self.renderProps(),
+            drawCloud,
+            ...(drawCloud && { cloudModeHeight: self.height }),
+        }),
+        onResult: (result) => {
+            if (!drawCloud && result.layoutHeight !== undefined) {
+                self.setLayoutHeight(result.layoutHeight);
+            }
+            if (drawCloud && result.cloudMaxDistance !== undefined) {
+                self.setCloudMaxDistance(result.cloudMaxDistance);
+            }
+            if (result.featuresForFlatbush) {
+                buildFlatbushIndex(result.featuresForFlatbush, self);
+            }
+            if (result.mismatchFlatbush && result.mismatchItems) {
+                buildMismatchFlatbushIndex(result.mismatchFlatbush, result.mismatchItems, self);
+            }
+        },
+    });
+    const performCloudRender = createCloudRender(true);
+    const performStackRender = createCloudRender(false);
+    createAutorun(self, async () => {
+        if (!self.drawCloud || !isAlive(self)) {
+            return;
+        }
+        performCloudRender();
+    }, {
+        delay: 1000,
+        name: 'CloudRender',
+    });
+    createAutorun(self, async () => {
+        if (self.drawCloud || !isAlive(self)) {
+            return;
+        }
+        performStackRender();
+    }, {
+        delay: 1000,
+        name: 'StackRender',
+    });
+    setupCanvasRenderingAutorun(self);
+    setupModificationsAutorun(self, () => {
+        const view = getContainingView(self);
+        return view.initialized && self.featureDensityStatsReadyAndRegionNotTooLarge;
+    });
+}

package/esm/LinearReadCloudDisplay/components/CloudYScaleBar.d.ts

@@ -0,0 +1,8 @@
+import type { CloudTicks } from '../../RenderLinearReadCloudDisplayRPC/drawFeatsCloud.ts';
+declare const CloudYScaleBar: ({ model, orientation, }: {
+    model: {
+        cloudTicks?: CloudTicks;
+    };
+    orientation?: "left" | "right";
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CloudYScaleBar;

package/esm/LinearReadCloudDisplay/components/CloudYScaleBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
+function formatTickValue(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}k`;
+    }
+    return `${value}`;
+}
+const CloudYScaleBar = observer(function CloudYScaleBar({ model, orientation, }) {
+    const theme = useTheme();
+    const cloudTicks = model.cloudTicks;
+    if (!cloudTicks) {
+        return null;
+    }
+    const { ticks, height } = cloudTicks;
+    const bg = theme.palette.background.default;
+    const fg = theme.palette.text.primary;
+    const isLeft = orientation === 'left';
+    const k = isLeft ? -1 : 1;
+    const tickLength = 6;
+    return (_jsxs("g", { fill: "none", fontSize: 10, fontFamily: "sans-serif", textAnchor: isLeft ? 'end' : 'start', strokeWidth: 1, children: [_jsx("path", { stroke: fg, d: `M${k * tickLength},0H0.5V${height}H${k * tickLength}` }), ticks.map(({ value, y }) => (_jsxs("g", { transform: `translate(0,${y})`, children: [_jsx("line", { stroke: fg, x2: k * tickLength, y1: 0.5, y2: 0.5 }), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, dy: "0.32em", x: k * 9, y: 0.5, children: formatTickValue(value) })] }, value))), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, fontSize: 10, textAnchor: "middle", transform: `translate(${isLeft ? -30 : 30}, ${height / 2}) rotate(-90)`, children: "Insert size (bp)" })] }));
+});
+export default CloudYScaleBar;

package/{dist/LinearReadCloudDisplay/components/ReactComponent.d.ts → esm/LinearReadCloudDisplay/components/LinearReadCloudReactComponent.d.ts}

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

package/esm/LinearReadCloudDisplay/components/LinearReadCloudReactComponent.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { assembleLocString, getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, toLocale, } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { NonBlockCanvasDisplayComponent as BaseDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
+import { observer } from 'mobx-react';
+import CloudYScaleBar from "./CloudYScaleBar.js";
+import { flatbushItemToFeatureData, getFlatbushItemLabel, } from "../../PileupRenderer/types.js";
+import { PairType, getPairedType } from "../../shared/color.js";
+import { orientationTypes } from "../../util.js";
+function getPairTypeDescription(data) {
+    const pairType = getPairedType({
+        type: 'insertSizeAndOrientation',
+        f: {
+            refName: data.refName,
+            next_ref: data.next_ref,
+            pair_orientation: data.pair_orientation,
+            tlen: data.tlen,
+            flags: data.flags,
+        },
+    });
+    switch (pairType) {
+        case PairType.LONG_INSERT:
+            return 'Long insert size (colored red)';
+        case PairType.SHORT_INSERT:
+            return 'Short insert size (colored blue)';
+        case PairType.INTER_CHROM:
+            return data.next_ref
+                ? `Inter-chromosomal (mate on ${data.next_ref})`
+                : undefined;
+        case PairType.UNMAPPED_MATE:
+            return 'Unmapped mate';
+        case PairType.ABNORMAL_ORIENTATION: {
+            const orientationType = orientationTypes.fr;
+            const orient = orientationType[data.pair_orientation || ''] || '';
+            if (orient === 'RR') {
+                return 'Both mates reverse strand';
+            }
+            if (orient === 'RL') {
+                return 'Outward facing pair';
+            }
+            if (orient === 'LL') {
+                return 'Both mates forward strand';
+            }
+            return `Abnormal orientation ${data.pair_orientation || ''}`;
+        }
+        default:
+            return undefined;
+    }
+}
+function FeatureTooltip({ hoveredFeatureData, hasSupplementary, mousePosition, }) {
+    const pairTypeDesc = getPairTypeDescription(hoveredFeatureData);
+    return (_jsx(BaseTooltip, { clientPoint: {
+            x: mousePosition.x,
+            y: mousePosition.y + 20,
+        }, placement: "bottom-start", children: _jsxs("div", { children: [_jsx("div", { children: _jsx("strong", { children: hoveredFeatureData.name }) }), _jsx("div", { children: assembleLocString(hoveredFeatureData) }), hoveredFeatureData.tlen !== 0 ? (_jsxs("div", { children: ["Template length: ", toLocale(hoveredFeatureData.tlen)] })) : null, pairTypeDesc ? _jsx("div", { children: pairTypeDesc }) : null, hasSupplementary ? (_jsx("div", { children: "Has supplementary/split alignments" })) : null] }) }));
+}
+function MismatchTooltip({ mismatchData, mousePosition, }) {
+    return (_jsx(BaseTooltip, { clientPoint: {
+            x: mousePosition.x,
+            y: mousePosition.y + 20,
+        }, placement: "bottom-start", children: _jsxs("div", { children: [_jsx("div", { children: getFlatbushItemLabel(mismatchData) }), _jsxs("div", { children: ["Position: ", toLocale(mismatchData.start + 1)] })] }) }));
+}
+const FeatureHighlights = observer(function FeatureHighlights({ selectedFeatureBounds, hoveredFeature, }) {
+    return (_jsxs(_Fragment, { children: [selectedFeatureBounds ? (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: selectedFeatureBounds.x,
+                    top: selectedFeatureBounds.y,
+                    width: selectedFeatureBounds.width,
+                    height: selectedFeatureBounds.height,
+                    border: '2px solid #00b8ff',
+                    boxSizing: 'border-box',
+                    pointerEvents: 'none',
+                } })) : null, hoveredFeature ? (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: hoveredFeature.x,
+                    top: hoveredFeature.y,
+                    width: hoveredFeature.width,
+                    height: hoveredFeature.height,
+                    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                    pointerEvents: 'none',
+                } })) : null] }));
+});
+const CloudCanvases = observer(function CloudCanvases({ model, width, height, }) {
+    const cb = useCallback((ref) => {
+        model.setRef(ref);
+    }, [model, width, height]);
+    const mouseoverCb = useCallback((ref) => {
+        model.setMouseoverRef(ref);
+    }, [model, width, height]);
+    return (_jsxs(_Fragment, { children: [_jsx("canvas", { "data-testid": model.dataTestId, ref: cb, style: {
+                    width,
+                    height,
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                }, width: width * 2, height: height * 2 }), _jsx("canvas", { "data-testid": "cloud-mouseover-canvas", ref: mouseoverCb, style: {
+                    width,
+                    height,
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    pointerEvents: 'none',
+                }, width: width * 2, height: height * 2 })] }));
+});
+const Cloud = observer(function Cloud({ model, }) {
+    const view = getContainingView(model);
+    const width = Math.round(view.dynamicBlocks.totalWidthPx);
+    const height = model.drawCloud ? model.height : model.layoutHeight;
+    const containerRef = useRef(null);
+    const [hoveredFeature, setHoveredFeature] = useState();
+    const [hoveredFeatureData, setHoveredFeatureData] = useState();
+    const [hoveredHasSupplementary, setHoveredHasSupplementary] = useState(false);
+    const [hoveredMismatchData, setHoveredMismatchData] = useState();
+    const [mousePosition, setMousePosition] = useState();
+    const flatbushIndex = useMemo(() => {
+        return model.featureLayout ? Flatbush.from(model.featureLayout.data) : null;
+    }, [model.featureLayout]);
+    const mismatchFlatbushIndex = useMemo(() => {
+        return model.mismatchLayout
+            ? Flatbush.from(model.mismatchLayout.data)
+            : null;
+    }, [model.mismatchLayout]);
+    const selectedFeatureBounds = useMemo(() => {
+        if (!model.selectedFeatureId) {
+            return null;
+        }
+        const feature = model.featuresForFlatbush.find(f => f.chainId === model.selectedFeatureId);
+        if (feature) {
+            return {
+                x: feature.chainMinX,
+                y: feature.y1,
+                width: feature.chainMaxX - feature.chainMinX,
+                height: feature.y2 - feature.y1,
+            };
+        }
+        return null;
+    }, [model.selectedFeatureId, model.featuresForFlatbush]);
+    const getFeatureUnderMouse = useCallback((event) => {
+        if (!containerRef.current || !flatbushIndex) {
+            return { feature: undefined, position: undefined };
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const offsetY = event.clientY - rect.top;
+        const results = flatbushIndex.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+        if (results.length > 0) {
+            const featureIndex = results[0];
+            const feature = model.featuresForFlatbush[featureIndex];
+            return { feature, position: { x: event.clientX, y: event.clientY } };
+        }
+        return { feature: undefined, position: undefined };
+    }, [containerRef, flatbushIndex, model.featuresForFlatbush]);
+    const getMismatchUnderMouse = useCallback((event) => {
+        if (!containerRef.current || !mismatchFlatbushIndex) {
+            return undefined;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const offsetY = event.clientY - rect.top;
+        const results = mismatchFlatbushIndex.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+        if (results.length > 0) {
+            const mismatchIndex = results[0];
+            return model.mismatchItems[mismatchIndex];
+        }
+        return undefined;
+    }, [containerRef, mismatchFlatbushIndex, model.mismatchItems]);
+    const onMouseMove = useCallback((event) => {
+        const mismatch = getMismatchUnderMouse(event);
+        if (mismatch) {
+            setHoveredMismatchData(mismatch);
+            setHoveredFeature(undefined);
+            setHoveredFeatureData(undefined);
+            setHoveredHasSupplementary(false);
+            setMousePosition({ x: event.clientX, y: event.clientY });
+            return;
+        }
+        const { feature, position } = getFeatureUnderMouse(event);
+        setHoveredMismatchData(undefined);
+        if (feature) {
+            setHoveredFeature({
+                x: feature.chainMinX,
+                y: feature.y1,
+                width: feature.chainMaxX - feature.chainMinX,
+                height: feature.y2 - feature.y1,
+            });
+            setHoveredFeatureData(feature.data);
+            setHoveredHasSupplementary(feature.hasSupplementary);
+            setMousePosition(position);
+        }
+        else {
+            setHoveredFeature(undefined);
+            setHoveredFeatureData(undefined);
+            setHoveredHasSupplementary(false);
+            setMousePosition(undefined);
+        }
+    }, [getMismatchUnderMouse, getFeatureUnderMouse]);
+    const onMouseLeave = useCallback(() => {
+        setHoveredFeature(undefined);
+        setHoveredFeatureData(undefined);
+        setHoveredHasSupplementary(false);
+        setHoveredMismatchData(undefined);
+        setMousePosition(undefined);
+    }, []);
+    const onClick = useCallback((event) => {
+        const mismatch = getMismatchUnderMouse(event);
+        if (mismatch) {
+            const session = getSession(model);
+            const regions = view.dynamicBlocks.contentBlocks;
+            const refName = regions[0]?.refName || '';
+            const { feature } = getFeatureUnderMouse(event);
+            const sourceRead = feature?.data.name;
+            if (isSessionModelWithWidgets(session)) {
+                const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                    featureData: flatbushItemToFeatureData(mismatch, refName, sourceRead),
+                    view,
+                    track: getContainingTrack(model),
+                });
+                session.showWidget(featureWidget);
+            }
+            return;
+        }
+        const { feature } = getFeatureUnderMouse(event);
+        if (feature) {
+            model.selectFeature(feature.chain);
+            model.setSelectedFeatureId(feature.chainId);
+        }
+        else {
+            model.setSelectedFeatureId(undefined);
+        }
+    }, [getMismatchUnderMouse, getFeatureUnderMouse, model, view]);
+    const hasHover = hoveredMismatchData || hoveredFeatureData;
+    return (_jsxs("div", { ref: containerRef, style: {
+            position: 'relative',
+            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: {
+                    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 }) }));
+});
+export default LinearReadCloudReactComponent;

package/esm/LinearReadCloudDisplay/components/SetFeatureHeightDialog.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-const SetFeatureHeightDialog = observer(function (props) {
+const SetFeatureHeightDialog = observer(function SetFeatureHeightDialog(props) {
     const { model, handleClose } = props;
     const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
     const [height, setHeight] = useState(`${featureHeightSetting}`);

package/esm/LinearReadCloudDisplay/configSchema.d.ts

@@ -1,5 +1,9 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
-declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare function configSchemaF(pluginManager: PluginManager): import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    minSubfeatureWidth: {
+        type: string;
+        defaultValue: number;
+    };
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -9,6 +13,18 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
         type: string;
         defaultValue: number;
     };
+    hideSmallIndels: {
+        type: string;
+        defaultValue: boolean;
+    };
+    hideMismatches: {
+        type: string;
+        defaultValue: boolean;
+    };
+    hideLargeIndels: {
+        type: string;
+        defaultValue: boolean;
+    };
     colorBy: {
         type: string;
         defaultValue: {
@@ -22,9 +38,9 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
             flagExclude: number;
         };
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    renderer: import("mobx-state-tree").IAnyModelType;
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    renderer: import("@jbrowse/mobx-state-tree").IAnyModelType;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
     maxFeatureScreenDensity: {
         type: string;
         description: string;
@@ -51,5 +67,5 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
         description: string;
         defaultValue: never[];
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "displayId">>, undefined>>, undefined>>;
 export default configSchemaF;

package/esm/LinearReadCloudDisplay/configSchema.js

@@ -1,8 +1,12 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
-import { defaultFilterFlags } from '../shared/util';
+import { defaultFilterFlags } from "../shared/util.js";
 function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearReadCloudDisplay', {
+        minSubfeatureWidth: {
+            type: 'number',
+            defaultValue: 1,
+        },
         maxFeatureScreenDensity: {
             type: 'number',
             description: 'maximum features per pixel that is displayed in the view',
@@ -12,6 +16,18 @@ function configSchemaF(pluginManager) {
             type: 'number',
             defaultValue: 7,
         },
+        hideSmallIndels: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        hideMismatches: {
+            type: 'boolean',
+            defaultValue: false,
+        },
+        hideLargeIndels: {
+            type: 'boolean',
+            defaultValue: false,
+        },
         colorBy: {
             type: 'frozen',
             defaultValue: { type: 'insertSizeAndOrientation' },

package/esm/LinearReadCloudDisplay/index.js

@@ -1,19 +1,23 @@
 import { lazy } from 'react';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';
-import configSchemaF from './configSchema';
-import stateModelF from './model';
+import configSchemaF from "./configSchema.js";
+import stateModelF from "./model.js";
 export default function register(pluginManager) {
     pluginManager.addDisplayType(() => {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearReadCloudDisplay',
             displayName: 'Linked reads display',
+            helpText: 'Display paired-end and split read (supplementary read) alignments as linked entities. Note that the concept of "linked reads" is not specifically referring to Chromium 10x linked reads, this is just the general idea of linking paired-end, and split (supplementary) alignments',
             configSchema,
             stateModel: stateModelF(configSchema),
             trackType: 'AlignmentsTrack',
             viewType: 'LinearGenomeView',
-            subDisplay: { type: 'LinearAlignmentsDisplay', lowerPanel: true },
-            ReactComponent: lazy(() => import('./components/ReactComponent')),
+            subDisplay: {
+                type: 'LinearAlignmentsDisplay',
+                lowerPanel: true,
+            },
+            ReactComponent: lazy(() => import("./components/LinearReadCloudReactComponent.js")),
         });
     });
 }