@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/dist/LinearReadCloudDisplay/drawFeatsCommon.js

@@ -0,0 +1,198 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterChains = filterChains;
+exports.computeChainBounds = computeChainBounds;
+exports.sortComputedChains = sortComputedChains;
+exports.buildFlatbushIndex = buildFlatbushIndex;
+exports.addChainMouseoverRects = addChainMouseoverRects;
+exports.drawFeatsCommon = drawFeatsCommon;
+const configuration_1 = require("@jbrowse/core/configuration");
+const util_1 = require("@jbrowse/core/util");
+const flatbush_1 = __importDefault(require("@jbrowse/core/util/flatbush"));
+const color_1 = require("../shared/color");
+const drawLongReadChains_1 = require("../shared/drawLongReadChains");
+const drawPairChains_1 = require("../shared/drawPairChains");
+const util_2 = require("../shared/util");
+function filterChains(chains, drawSingletons, drawProperPairs, type, chainData) {
+    const filtered = [];
+    for (const chain_ of chains) {
+        const chain = chain_;
+        if (!drawSingletons && chain.length === 1) {
+            continue;
+        }
+        let isPairedEnd = false;
+        for (const element of chain) {
+            if (element.flags & 1) {
+                isPairedEnd = true;
+                break;
+            }
+        }
+        if (!drawProperPairs && isPairedEnd) {
+            const nonSupplementary = [];
+            for (const element of chain) {
+                if (!(element.flags & 2048)) {
+                    nonSupplementary.push(element);
+                }
+            }
+            if (nonSupplementary.length === 2) {
+                const v0 = nonSupplementary[0];
+                const v1 = nonSupplementary[1];
+                const pairType = (0, color_1.getPairedType)({
+                    type,
+                    f1: v0,
+                    f2: v1,
+                    stats: chainData.stats,
+                });
+                if (pairType === color_1.PairType.PROPER_PAIR) {
+                    continue;
+                }
+            }
+        }
+        filtered.push(chain);
+    }
+    return filtered;
+}
+function computeChainBounds(chains, view, asm) {
+    var _a, _b;
+    const computedChains = [];
+    for (const chain_ of chains) {
+        const chain = chain_;
+        let minX = Number.MAX_VALUE;
+        let maxX = Number.MIN_VALUE;
+        let chainId = '';
+        let tlenDistance = 0;
+        const chainLength = chain.length;
+        for (let j = 0; j < chainLength; j++) {
+            const elt = chain[j];
+            const refName = asm.getCanonicalRefName(elt.refName) || elt.refName;
+            const rs = (_a = view.bpToPx({ refName, coord: elt.start })) === null || _a === void 0 ? void 0 : _a.offsetPx;
+            const re = (_b = view.bpToPx({ refName, coord: elt.end })) === null || _b === void 0 ? void 0 : _b.offsetPx;
+            if (rs !== undefined && re !== undefined) {
+                minX = Math.min(minX, rs);
+                maxX = Math.max(maxX, re);
+            }
+            if (!chainId) {
+                chainId = elt.id;
+            }
+            if (chainLength > 1 && tlenDistance === 0 && elt.tlen) {
+                tlenDistance = Math.abs(elt.tlen);
+            }
+        }
+        const distance = tlenDistance > 0 ? tlenDistance : Math.abs(maxX - minX);
+        computedChains.push({
+            distance,
+            minX,
+            maxX,
+            chain,
+            id: chainId,
+        });
+    }
+    return computedChains;
+}
+function sortComputedChains(computedChains) {
+    computedChains.sort((a, b) => {
+        const aIsSingleton = a.chain.length === 1 ? 1 : 0;
+        const bIsSingleton = b.chain.length === 1 ? 1 : 0;
+        if (bIsSingleton !== aIsSingleton) {
+            return bIsSingleton - aIsSingleton;
+        }
+        return a.distance - b.distance;
+    });
+}
+function buildFlatbushIndex(featuresForFlatbush, self) {
+    const finalFlatbush = new flatbush_1.default(Math.max(featuresForFlatbush.length, 1));
+    const length = featuresForFlatbush.length;
+    if (length) {
+        for (let i = 0; i < length; i++) {
+            const { x1, y1, x2, y2 } = featuresForFlatbush[i];
+            finalFlatbush.add(x1, y1, x2, y2);
+        }
+    }
+    else {
+        finalFlatbush.add(0, 0);
+    }
+    finalFlatbush.finish();
+    self.setFeatureLayout(finalFlatbush);
+    self.setFeaturesForFlatbush(featuresForFlatbush);
+}
+function addChainMouseoverRects(computedChains, chainYOffsets, featureHeight, view, featuresForFlatbush) {
+    for (const computedChain of computedChains) {
+        const { id, chain, minX, maxX } = computedChain;
+        const chainY = chainYOffsets.get(id);
+        if (chainY === undefined) {
+            continue;
+        }
+        const chainMinXPx = minX - view.offsetPx;
+        const chainMaxXPx = maxX - view.offsetPx;
+        if (chain.length > 0) {
+            featuresForFlatbush.push({
+                x1: chainMinXPx,
+                y1: chainY,
+                x2: chainMaxXPx,
+                y2: chainY + featureHeight,
+                data: chain[0],
+                chainId: id,
+                chainMinX: chainMinXPx,
+                chainMaxX: chainMaxXPx,
+                chain,
+            });
+        }
+    }
+}
+function drawFeatsCommon(self, ctx, calculateYOffsets) {
+    var _a, _b;
+    const { chainData } = self;
+    if (!chainData) {
+        return;
+    }
+    const { assemblyManager } = (0, util_1.getSession)(self);
+    const view = (0, util_1.getContainingView)(self);
+    const assemblyName = view.assemblyNames[0];
+    const asm = assemblyManager.get(assemblyName);
+    if (!asm) {
+        return;
+    }
+    const featureHeight = (_a = self.featureHeight) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'featureHeight');
+    const type = ((_b = self.colorBy) === null || _b === void 0 ? void 0 : _b.type) || 'insertSizeAndOrientation';
+    const drawSingletons = self.drawSingletons;
+    const drawProperPairs = self.drawProperPairs;
+    const { chains } = chainData;
+    const filteredChains = filterChains(chains, drawSingletons, drawProperPairs, type, chainData);
+    const computedChains = computeChainBounds(filteredChains, view, asm);
+    sortComputedChains(computedChains);
+    const { chainYOffsets, layoutHeight } = calculateYOffsets(computedChains, self, view, featureHeight);
+    const featuresForFlatbush = [];
+    const renderChevrons = (0, util_2.shouldRenderChevrons)(view.bpPerPx, featureHeight);
+    (0, drawPairChains_1.drawPairChains)({
+        ctx,
+        type,
+        chainData,
+        view,
+        asm,
+        chainYOffsets,
+        renderChevrons,
+        featureHeight,
+        featuresForFlatbush,
+        computedChains,
+    });
+    (0, drawLongReadChains_1.drawLongReadChains)({
+        ctx,
+        chainData,
+        view,
+        asm,
+        chainYOffsets,
+        renderChevrons,
+        featureHeight,
+        featuresForFlatbush,
+        computedChains,
+        flipStrandLongReadChains: self.flipStrandLongReadChains,
+    });
+    addChainMouseoverRects(computedChains, chainYOffsets, featureHeight, view, featuresForFlatbush);
+    buildFlatbushIndex(featuresForFlatbush, self);
+    if (layoutHeight !== undefined) {
+        self.setLayoutHeight(layoutHeight);
+    }
+}

package/dist/LinearReadCloudDisplay/drawFeatsStack.d.ts

@@ -0,0 +1,2 @@
+import type { LinearReadCloudDisplayModel } from './model';
+export declare function drawFeats(self: LinearReadCloudDisplayModel, ctx: CanvasRenderingContext2D): void;

package/dist/LinearReadCloudDisplay/drawFeatsStack.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawFeats = drawFeats;
+const GranularRectLayout_1 = __importDefault(require("@jbrowse/core/util/layouts/GranularRectLayout"));
+const drawFeatsCommon_1 = require("./drawFeatsCommon");
+function calculateStackYOffsets(computedChains, self, _view, featureHeight) {
+    var _a, _b;
+    const noSpacing = (_a = self.noSpacing) !== null && _a !== void 0 ? _a : false;
+    const maxHeight = (_b = self.trackMaxHeight) !== null && _b !== void 0 ? _b : 1200;
+    const layout = new GranularRectLayout_1.default({
+        pitchX: 1,
+        pitchY: 1,
+        maxHeight,
+    });
+    const layoutPadding = noSpacing ? 0 : 1;
+    for (const { id, minX, maxX, chain } of computedChains) {
+        layout.addRect(id, minX, maxX, featureHeight + layoutPadding, {
+            feat: chain[0],
+            fill: 'transparent',
+            stroke: 'transparent',
+            distance: maxX - minX,
+        });
+    }
+    const chainYOffsets = new Map();
+    for (const [id, rect] of layout.getRectangles()) {
+        const top = rect[1];
+        chainYOffsets.set(id, top);
+    }
+    return { chainYOffsets, layoutHeight: layout.getTotalHeight() };
+}
+function drawFeats(self, ctx) {
+    (0, drawFeatsCommon_1.drawFeatsCommon)(self, ctx, calculateStackYOffsets);
+}

package/dist/LinearReadCloudDisplay/index.js

@@ -46,7 +46,7 @@ function register(pluginManager) {
         const configSchema = (0, configSchema_1.default)(pluginManager);
         return new DisplayType_1.default({
             name: 'LinearReadCloudDisplay',
-            displayName: 'Read cloud display',
+            displayName: 'Linked reads display',
             configSchema,
             stateModel: (0, model_1.default)(configSchema),
             trackType: 'AlignmentsTrack',

package/dist/LinearReadCloudDisplay/model.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { ChainData } from '../shared/fetchChains';
-import type { ColorBy, FilterBy } from '../shared/types';
+import type { ReducedFeature } from '../shared/fetchChains';
 import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 import type { Instance } from 'mobx-state-tree';
 declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
@@ -12,12 +11,20 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    filterBySetting: import("mobx-state-tree").IType<import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined, import("../shared/types").FilterBy | undefined>;
+    colorBySetting: import("mobx-state-tree").IType<import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined, import("../shared/types").ColorBy | undefined>;
+} & {
+    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawProperPairs: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    flipStrandLongReadChains: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    featureHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearReadCloudDisplay">;
     configuration: AnyConfigurationSchemaType;
-    filterBySetting: import("mobx-state-tree").IType<FilterBy | undefined, FilterBy | undefined, FilterBy | undefined>;
-    colorBySetting: import("mobx-state-tree").IType<ColorBy | undefined, ColorBy | undefined, ColorBy | undefined>;
-    drawSingletons: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    drawCloud: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    noSpacing: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -112,57 +119,70 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react/jsx-runtime").JSX.Element | null;
 } & {
     loading: boolean;
-    chainData: ChainData | undefined;
+    chainData: import("../shared/fetchChains").ChainData | undefined;
     lastDrawnOffsetPx: number | undefined;
     lastDrawnBpPerPx: number;
     ref: HTMLCanvasElement | null;
 } & {
-    readonly colorBy: any;
-    readonly filterBy: any;
-} & {
-    setDrawSingletons(f: boolean): void;
     setLastDrawnOffsetPx(n: number): void;
     setLastDrawnBpPerPx(n: number): void;
     setLoading(f: boolean): void;
-    reload(): void;
     setRef(ref: HTMLCanvasElement | null): void;
     setColorScheme(colorBy: {
         type: string;
     }): void;
-    setChainData(args: ChainData): void;
-    setFilterBy(filter: FilterBy): void;
+    setChainData(args: import("../shared/fetchChains").ChainData): void;
+    setFilterBy(filter: import("../shared/types").FilterBy): void;
 } & {
     readonly drawn: boolean;
+} & {
+    featureLayout: import("@jbrowse/core/util/flatbush").default | undefined;
+    mouseoverRef: HTMLCanvasElement | null;
+    featuresForFlatbush: import("../shared/flatbushType").FlatbushEntry[];
+} & {
+    setFeatureLayout(layout: import("@jbrowse/core/util/flatbush").default): void;
+    setMouseoverRef(ref: HTMLCanvasElement | null): void;
+    setFeaturesForFlatbush(features: import("../shared/flatbushType").FlatbushEntry[]): void;
+} & {
+    setDrawSingletons(f: boolean): void;
+    setDrawProperPairs(f: boolean): void;
+    setFlipStrandLongReadChains(f: boolean): void;
+    setFeatureHeight(n?: number): void;
+} & {
+    layoutHeight: number;
+} & {
+    readonly colorBy: any;
+    readonly filterBy: any;
+    readonly featureHeightSetting: any;
+} & {
+    reload(): void;
+    setNoSpacing(flag?: boolean): void;
+    setMaxHeight(n?: number): void;
+    setLayoutHeight(n: number): void;
+    selectFeature(chain: ReducedFeature[]): void;
+    setDrawCloud(b: boolean): void;
 } & {
     renderProps(): any;
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        label: string;
-        type: string;
-        checked: boolean;
-        onClick: () => void;
-        icon?: undefined;
-        subMenu?: undefined;
-    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        onClick: () => void;
-        type?: undefined;
-        checked?: undefined;
-        subMenu?: undefined;
+        subMenu: {
+            label: string;
+            onClick: () => void;
+        }[];
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
+        onClick: () => void;
+    } | {
+        label: string;
+        type: string;
+        checked: boolean;
+        onClick: () => void;
     })[];
     renderSvg(opts: {
         rasterizeLayers?: boolean;

package/dist/LinearReadCloudDisplay/model.js

@@ -32,34 +32,30 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const util_1 = require("@jbrowse/core/util");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
-const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
-const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
 const mobx_state_tree_1 = require("mobx-state-tree");
-const FilterByTagDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('../shared/components/FilterByTagDialog'))));
+const LinearReadDisplayBaseMixin_1 = require("../shared/LinearReadDisplayBaseMixin");
+const LinearReadDisplayWithLayoutMixin_1 = require("../shared/LinearReadDisplayWithLayoutMixin");
+const LinearReadDisplayWithPairFiltersMixin_1 = require("../shared/LinearReadDisplayWithPairFiltersMixin");
+const chainToSimpleFeature_1 = require("../shared/chainToSimpleFeature");
+const menuItems_1 = require("../shared/menuItems");
+const SetFeatureHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetFeatureHeightDialog'))));
 function stateModelFactory(configSchema) {
     return mobx_state_tree_1.types
-        .compose('LinearReadCloudDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), mobx_state_tree_1.types.model({
+        .compose('LinearReadCloudDisplay', pluggableElementTypes_1.BaseDisplay, (0, plugin_linear_genome_view_1.TrackHeightMixin)(), (0, plugin_linear_genome_view_1.FeatureDensityMixin)(), (0, LinearReadDisplayBaseMixin_1.LinearReadDisplayBaseMixin)(), (0, LinearReadDisplayWithLayoutMixin_1.LinearReadDisplayWithLayoutMixin)(), (0, LinearReadDisplayWithPairFiltersMixin_1.LinearReadDisplayWithPairFiltersMixin)(), mobx_state_tree_1.types.model({
         type: mobx_state_tree_1.types.literal('LinearReadCloudDisplay'),
         configuration: (0, configuration_1.ConfigurationReference)(configSchema),
-        filterBySetting: mobx_state_tree_1.types.frozen(),
-        colorBySetting: mobx_state_tree_1.types.frozen(),
-        drawSingletons: true,
+        drawCloud: false,
+        noSpacing: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+        trackMaxHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
     }))
         .volatile(() => ({
-        loading: false,
-        chainData: undefined,
-        lastDrawnOffsetPx: undefined,
-        lastDrawnBpPerPx: 0,
-        ref: null,
+        layoutHeight: 0,
     }))
         .views(self => ({
         get colorBy() {
@@ -70,43 +66,39 @@ function stateModelFactory(configSchema) {
             var _a;
             return (_a = self.filterBySetting) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'filterBy');
         },
+        get featureHeightSetting() {
+            var _a;
+            return (_a = self.featureHeight) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'featureHeight');
+        },
     }))
         .actions(self => ({
-        setDrawSingletons(f) {
-            self.drawSingletons = f;
-        },
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
-        },
-        setLastDrawnBpPerPx(n) {
-            self.lastDrawnBpPerPx = n;
-        },
-        setLoading(f) {
-            self.loading = f;
-        },
         reload() {
             self.error = undefined;
         },
-        setRef(ref) {
-            self.ref = ref;
+        setNoSpacing(flag) {
+            self.noSpacing = flag;
         },
-        setColorScheme(colorBy) {
-            self.colorBySetting = {
-                ...colorBy,
-            };
+        setMaxHeight(n) {
+            self.trackMaxHeight = n;
         },
-        setChainData(args) {
-            self.chainData = args;
+        setLayoutHeight(n) {
+            self.layoutHeight = n;
         },
-        setFilterBy(filter) {
-            self.filterBySetting = {
-                ...filter,
-            };
+        selectFeature(chain) {
+            const session = (0, util_1.getSession)(self);
+            const syntheticFeature = (0, chainToSimpleFeature_1.chainToSimpleFeature)(chain);
+            if ((0, util_1.isSessionModelWithWidgets)(session)) {
+                const featureWidget = session.addWidget('AlignmentsFeatureWidget', 'alignmentFeature', {
+                    featureData: syntheticFeature.toJSON(),
+                    view: (0, util_1.getContainingView)(self),
+                    track: (0, util_1.getContainingTrack)(self),
+                });
+                session.showWidget(featureWidget);
+            }
+            session.setSelection(syntheticFeature);
         },
-    }))
-        .views(self => ({
-        get drawn() {
-            return self.lastDrawnOffsetPx !== undefined;
+        setDrawCloud(b) {
+            self.drawCloud = b;
         },
     }))
         .views(self => {
@@ -122,59 +114,82 @@ function stateModelFactory(configSchema) {
                 return [
                     ...superTrackMenuItems(),
                     {
-                        label: 'Draw singletons',
-                        type: 'checkbox',
-                        checked: self.drawSingletons,
-                        onClick: () => {
-                            self.setDrawSingletons(!self.drawSingletons);
-                        },
-                    },
-                    {
-                        label: 'Filter by',
-                        icon: ClearAll_1.default,
-                        onClick: () => {
-                            (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                FilterByTagDialog,
-                                { model: self, handleClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Color scheme',
-                        icon: Palette_1.default,
+                        label: 'Set feature height...',
                         subMenu: [
                             {
-                                label: 'Insert size ± 3σ and orientation',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'insertSizeAndOrientation' });
-                                },
-                            },
-                            {
-                                label: 'Insert size ± 3σ',
+                                label: 'Normal',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
+                                    self.setFeatureHeight(7);
+                                    self.setNoSpacing(false);
                                 },
                             },
                             {
-                                label: 'Orientation',
+                                label: 'Compact',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'orientation' });
+                                    self.setFeatureHeight(3);
+                                    self.setNoSpacing(true);
                                 },
                             },
                             {
-                                label: 'Insert size gradient',
+                                label: 'Manually set height...',
                                 onClick: () => {
-                                    self.setColorScheme({ type: 'gradient' });
+                                    (0, util_1.getSession)(self).queueDialog(handleClose => [
+                                        SetFeatureHeightDialog,
+                                        {
+                                            model: self,
+                                            handleClose,
+                                        },
+                                    ]);
                                 },
                             },
                         ],
                     },
+                    {
+                        label: 'Toggle read cloud (y-coordinate proportional to TLEN)',
+                        type: 'checkbox',
+                        checked: self.drawCloud,
+                        onClick: () => {
+                            self.setDrawCloud(!self.drawCloud);
+                        },
+                    },
+                    {
+                        label: 'Draw singletons',
+                        type: 'checkbox',
+                        checked: self.drawSingletons,
+                        onClick: () => {
+                            self.setDrawSingletons(!self.drawSingletons);
+                        },
+                    },
+                    {
+                        label: 'Draw proper pairs',
+                        type: 'checkbox',
+                        checked: self.drawProperPairs,
+                        onClick: () => {
+                            self.setDrawProperPairs(!self.drawProperPairs);
+                        },
+                    },
+                    {
+                        label: 'Flip strand relative to primary alignment for long read chains',
+                        type: 'checkbox',
+                        checked: self.flipStrandLongReadChains,
+                        onClick: () => {
+                            self.setFlipStrandLongReadChains(!self.flipStrandLongReadChains);
+                        },
+                    },
+                    (0, menuItems_1.getFilterByMenuItem)(self),
+                    (0, menuItems_1.getColorSchemeMenuItem)(self),
                 ];
             },
             async renderSvg(opts) {
                 const { renderSvg } = await Promise.resolve().then(() => __importStar(require('../shared/renderSvgUtil')));
-                const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
-                return renderSvg(self, opts, drawFeats);
+                if (self.drawCloud) {
+                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeatsCloud')));
+                    return renderSvg(self, opts, drawFeats);
+                }
+                else {
+                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeatsStack')));
+                    return renderSvg(self, opts, drawFeats);
+                }
             },
         };
     })
@@ -184,7 +199,7 @@ function stateModelFactory(configSchema) {
             (async () => {
                 try {
                     const { doAfterAttach } = await Promise.resolve().then(() => __importStar(require('../shared/afterAttach')));
-                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeats')));
+                    const { drawFeats } = await Promise.resolve().then(() => __importStar(require('./drawFeatsAbstract')));
                     doAfterAttach(self, drawFeats);
                 }
                 catch (e) {

package/dist/LinearSNPCoverageDisplay/components/TooltipContents.d.ts

@@ -4,7 +4,10 @@ interface Props {
     model: {
         visibleModifications: Map<string, {
             color: string;
+            base: string;
+            strand: string;
         }>;
+        simplexModifications?: Set<string>;
     };
 }
 declare const TooltipContents: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;