@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/esm/shared/color.d.ts

@@ -1,4 +1,13 @@
-import type { ChainStats } from './fetchChains';
+import type { ChainStats, ReducedFeature } from './fetchChains';
+export declare const PairType: {
+    readonly PROPER_PAIR: 0;
+    readonly LONG_INSERT: 1;
+    readonly SHORT_INSERT: 2;
+    readonly INTER_CHROM: 3;
+    readonly ABNORMAL_ORIENTATION: 4;
+    readonly UNMAPPED_MATE: 5;
+};
+export type PairTypeValue = (typeof PairType)[keyof typeof PairType];
 export declare const fillColor: {
     color_fwd_strand_not_proper: string;
     color_rev_strand_not_proper: string;
@@ -16,6 +25,7 @@ export declare const fillColor: {
     color_interchrom: string;
     color_longinsert: string;
     color_shortinsert: string;
+    color_unmapped_mate: string;
     color_unknown: string;
 };
 export declare const strokeColor: {
@@ -35,24 +45,51 @@ export declare const strokeColor: {
     color_interchrom: string;
     color_longinsert: string;
     color_shortinsert: string;
+    color_unmapped_mate: string;
     color_unknown: string;
 };
+export declare function getPairedType({ type, f1, f2, stats, }: {
+    type: string;
+    f1: {
+        refName: string;
+        pair_orientation?: string;
+        tlen?: number;
+        flags?: number;
+    };
+    f2: {
+        refName: string;
+    };
+    stats?: ChainStats;
+}): PairTypeValue;
 export declare function getPairedInsertSizeColor(f1: {
     refName: string;
     tlen?: number;
+    flags?: number;
 }, f2: {
     refName: string;
 }, stats?: ChainStats): readonly [string, string] | undefined;
+export declare function getPairedOrientationColorOrDefault(f: {
+    pair_orientation?: string;
+    flags?: number;
+}): readonly [string, string] | undefined;
+export declare function getPairedOrientationColor(f: {
+    pair_orientation?: string;
+    flags?: number;
+}): readonly [string, string];
 export declare function getPairedInsertSizeAndOrientationColor(f1: {
     refName: string;
     pair_orientation?: string;
     tlen?: number;
+    flags?: number;
 }, f2: {
     refName: string;
 }, stats?: ChainStats): readonly [string, string];
-export declare function getPairedOrientationColorOrDefault(f: {
-    pair_orientation?: string;
+export declare function getSingletonColor(f: {
+    tlen?: number;
+}, stats?: ChainStats): readonly [string, string];
+export declare function getPairedColor({ type, v0, v1, stats, }: {
+    type: string;
+    v0: ReducedFeature;
+    v1: ReducedFeature;
+    stats?: ChainStats;
 }): readonly [string, string] | undefined;
-export declare function getPairedOrientationColor(f: {
-    pair_orientation?: string;
-}): readonly [string, string];

package/esm/shared/color.js

@@ -1,4 +1,12 @@
 import { orientationTypes, pairMap } from '../util';
+export const PairType = {
+    PROPER_PAIR: 0,
+    LONG_INSERT: 1,
+    SHORT_INSERT: 2,
+    INTER_CHROM: 3,
+    ABNORMAL_ORIENTATION: 4,
+    UNMAPPED_MATE: 5,
+};
 export const fillColor = {
     color_fwd_strand_not_proper: '#ECC8C8',
     color_rev_strand_not_proper: '#BEBED8',
@@ -9,13 +17,14 @@ export const fillColor = {
     color_fwd_diff_chr: '#000',
     color_rev_diff_chr: '#969696',
     color_pair_lr: '#c8c8c8',
-    color_pair_rr: 'navy',
+    color_pair_rr: '#3a3a9d',
     color_pair_rl: 'teal',
     color_pair_ll: 'green',
     color_nostrand: '#c8c8c8',
     color_interchrom: 'purple',
     color_longinsert: 'red',
     color_shortinsert: 'pink',
+    color_unmapped_mate: '#8B008B',
     color_unknown: 'grey',
 };
 export const strokeColor = {
@@ -28,38 +37,78 @@ export const strokeColor = {
     color_fwd_diff_chr: '#000000',
     color_rev_diff_chr: '#696969',
     color_pair_lr: '#8C8C8C',
-    color_pair_rr: '#00005A',
+    color_pair_rr: '#00002A',
     color_pair_rl: '#005A5A',
     color_pair_ll: '#005A00',
     color_nostrand: '#8C8C8C',
     color_interchrom: '#5A005A',
     color_longinsert: '#B30000',
     color_shortinsert: '#FF3A5C',
-    color_unknown: 'grey',
+    color_unmapped_mate: '#5A005A',
+    color_unknown: '#444',
 };
-export function getPairedInsertSizeColor(f1, f2, stats) {
-    const sameRef = f1.refName === f2.refName;
-    const tlen = Math.abs(f1.tlen || 0);
-    if (sameRef && tlen > ((stats === null || stats === void 0 ? void 0 : stats.upper) || 0)) {
-        return [fillColor.color_longinsert, strokeColor.color_longinsert];
+const defaultColor = [
+    fillColor.color_pair_lr,
+    strokeColor.color_pair_lr,
+];
+export function getPairedType({ type, f1, f2, stats, }) {
+    if (f1.flags !== undefined && f1.flags & 8) {
+        return PairType.UNMAPPED_MATE;
     }
-    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
-        return [fillColor.color_shortinsert, strokeColor.color_shortinsert];
+    if (type === 'insertSizeAndOrientation' || type === 'orientation') {
+        const orientationType = orientationTypes.fr;
+        const r = orientationType[f1.pair_orientation || ''];
+        if (r && r !== 'LR') {
+            return PairType.ABNORMAL_ORIENTATION;
+        }
     }
-    else if (!sameRef) {
-        return [fillColor.color_interchrom, strokeColor.color_interchrom];
-    }
-    else {
-        return undefined;
+    if (type === 'insertSizeAndOrientation' || type === 'insertSize') {
+        const sameRef = f1.refName === f2.refName;
+        const tlen = Math.abs(f1.tlen || 0);
+        if (!sameRef) {
+            return PairType.INTER_CHROM;
+        }
+        if (stats) {
+            if (tlen > stats.upper) {
+                return PairType.LONG_INSERT;
+            }
+            if (tlen < stats.lower) {
+                return PairType.SHORT_INSERT;
+            }
+        }
     }
+    return PairType.PROPER_PAIR;
 }
-const defaultColor = [fillColor.color_unknown, fillColor.color_unknown];
-export function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedOrientationColorOrDefault(f1) ||
-        getPairedInsertSizeColor(f1, f2, stats) ||
-        defaultColor);
+export function getPairedInsertSizeColor(f1, f2, stats) {
+    const pairType = getPairedType({ type: 'insertSize', f1, f2, stats });
+    switch (pairType) {
+        case PairType.UNMAPPED_MATE:
+            return [
+                fillColor.color_unmapped_mate,
+                strokeColor.color_unmapped_mate,
+            ];
+        case PairType.LONG_INSERT:
+            return [fillColor.color_longinsert, strokeColor.color_longinsert];
+        case PairType.SHORT_INSERT:
+            return [
+                fillColor.color_shortinsert,
+                strokeColor.color_shortinsert,
+            ];
+        case PairType.INTER_CHROM:
+            return [fillColor.color_interchrom, strokeColor.color_interchrom];
+        case PairType.PROPER_PAIR:
+            return undefined;
+        default:
+            return undefined;
+    }
 }
 export function getPairedOrientationColorOrDefault(f) {
+    if (f.flags !== undefined && f.flags & 8) {
+        return [
+            fillColor.color_unmapped_mate,
+            strokeColor.color_unmapped_mate,
+        ];
+    }
     const type = orientationTypes.fr;
     const r = type[f.pair_orientation || ''];
     const type2 = pairMap[r];
@@ -70,3 +119,30 @@ export function getPairedOrientationColorOrDefault(f) {
 export function getPairedOrientationColor(f) {
     return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
+export function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
+    return (getPairedOrientationColorOrDefault(f1) ||
+        getPairedInsertSizeColor(f1, f2, stats) ||
+        defaultColor);
+}
+export function getSingletonColor(f, stats) {
+    const tlen = Math.abs(f.tlen || 0);
+    if (stats && tlen > stats.upper) {
+        return [
+            fillColor.color_fwd_missing_mate,
+            strokeColor.color_fwd_missing_mate,
+        ];
+    }
+    return defaultColor;
+}
+export function getPairedColor({ type, v0, v1, stats, }) {
+    if (type === 'insertSizeAndOrientation') {
+        return getPairedInsertSizeAndOrientationColor(v0, v1, stats);
+    }
+    if (type === 'orientation') {
+        return getPairedOrientationColor(v0);
+    }
+    if (type === 'insertSize') {
+        return getPairedInsertSizeColor(v0, v1, stats);
+    }
+    return undefined;
+}

package/esm/shared/components/BaseDisplayComponent.d.ts

@@ -1,7 +1,16 @@
-import type { LinearReadArcsDisplayModel } from '../../LinearReadArcsDisplay/model';
-import type { LinearReadCloudDisplayModel } from '../../LinearReadCloudDisplay/model';
+import type React from 'react';
+interface BaseDisplayModel {
+    error?: unknown;
+    regionTooLarge?: boolean;
+    reload: () => void;
+    regionCannotBeRendered: () => React.ReactElement | null;
+    drawn: boolean;
+    loading: boolean;
+    lastDrawnOffsetPx?: number;
+    message?: string;
+}
 declare const BaseDisplayComponent: ({ model, children, }: {
-    model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel;
+    model: BaseDisplayModel;
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default BaseDisplayComponent;

package/esm/shared/components/BaseDisplayComponent.js

@@ -18,7 +18,7 @@ const useStyles = makeStyles()(theme => ({
         textAlign: 'center',
     },
 }));
-const BlockError = observer(function ({ model, }) {
+const BlockError = observer(function ({ model }) {
     const { error } = model;
     return (_jsx(BlockMsg, { message: `${error}`, severity: "error", action: _jsx(Tooltip, { title: "Reload", children: _jsx(Button, { "data-testid": "reload_button", onClick: () => {
                     model.reload();
@@ -34,7 +34,7 @@ const DataDisplay = observer(function ({ model, children, }) {
     const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx;
     return (_jsxs("div", { "data-testid": `drawn-${drawn}`, children: [_jsx("div", { style: { position: 'absolute', left }, children: children }), left !== 0 || loading ? _jsx(LoadingBar, { model: model }) : null] }));
 });
-const LoadingBar = observer(function ({ model, }) {
+const LoadingBar = observer(function ({ model }) {
     const { classes } = useStyles();
     const { message } = model;
     return (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, { message: message }) }));

package/esm/shared/components/SetFeatureHeightDialog.d.ts

@@ -0,0 +1,10 @@
+declare const SetFeatureHeightDialog: (props: {
+    model: {
+        setFeatureHeight: (arg?: number) => void;
+        setNoSpacing: (arg?: boolean) => void;
+        featureHeightSetting: number;
+        noSpacing?: boolean;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetFeatureHeightDialog;

package/esm/shared/components/SetFeatureHeightDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { model, handleClose } = props;
+    const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
+    const [height, setHeight] = useState(`${featureHeightSetting}`);
+    const [noSpacing, setNoSpacing] = useState(noSpacingSetting);
+    const ok = height !== '' && !Number.isNaN(+height);
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set feature height", children: _jsxs(DialogContent, { children: [_jsx(Typography, { children: "Adjust the feature height and whether there is any spacing between features. Setting feature height to 1 and removing spacing makes the display very compact." }), _jsx(TextField, { value: height, helperText: "Feature height", onChange: event => {
+                        setHeight(event.target.value);
+                    } }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: !!noSpacing, onChange: () => {
+                            setNoSpacing(val => !val);
+                        } }), label: "Remove spacing between features in y-direction?" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, disabled: !ok, onClick: () => {
+                                model.setFeatureHeight(height !== '' && !Number.isNaN(+height) ? +height : undefined);
+                                model.setNoSpacing(noSpacing);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+export default SetFeatureHeightDialog;

package/esm/shared/components/SetMaxHeightDialog.d.ts

@@ -0,0 +1,8 @@
+declare const SetMaxHeightDialog: (props: {
+    model: {
+        maxHeight?: number;
+        setMaxHeight: (arg?: number) => void;
+    };
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetMaxHeightDialog;

package/esm/shared/components/SetMaxHeightDialog.js

@@ -0,0 +1,26 @@
+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';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    root: {
+        width: 500,
+    },
+});
+const SetMaxHeightDialog = observer(function (props) {
+    const { model, handleClose } = props;
+    const { classes } = useStyles();
+    const { maxHeight = '' } = model;
+    const [max, setMax] = useState(`${maxHeight}`);
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: "Set max height", children: _jsxs(DialogContent, { className: classes.root, children: [_jsx(Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), _jsx(TextField, { value: max, autoFocus: true, onChange: event => {
+                        setMax(event.target.value);
+                    }, placeholder: "Enter max height for layout" }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                                model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                                handleClose();
+                            }, children: "Submit" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+export default SetMaxHeightDialog;

package/esm/shared/drawLongReadChains.d.ts

@@ -0,0 +1,24 @@
+import type { ChainData, ReducedFeature } from './fetchChains';
+import type { FlatbushEntry } from './flatbushType';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+type LGV = LinearGenomeViewModel;
+export declare function drawLongReadChains({ ctx, chainData, view, asm, chainYOffsets, renderChevrons, featureHeight, featuresForFlatbush, computedChains, flipStrandLongReadChains, }: {
+    ctx: CanvasRenderingContext2D;
+    chainData: ChainData;
+    view: LGV;
+    asm: Assembly;
+    chainYOffsets: Map<string, number>;
+    renderChevrons: boolean;
+    featureHeight: number;
+    featuresForFlatbush: FlatbushEntry[];
+    computedChains: {
+        distance: number;
+        minX: number;
+        maxX: number;
+        chain: ReducedFeature[];
+        id: string;
+    }[];
+    flipStrandLongReadChains: boolean;
+}): void;
+export {};

package/esm/shared/drawLongReadChains.js

@@ -0,0 +1,101 @@
+import { fillRectCtx, strokeRectCtx } from './canvasUtils';
+import { drawChevron } from './chevron';
+import { fillColor, getSingletonColor, strokeColor } from './color';
+import { getPrimaryStrandFromFlags } from './primaryStrand';
+import { CHEVRON_WIDTH } from './util';
+export function drawLongReadChains({ ctx, chainData, view, asm, chainYOffsets, renderChevrons, featureHeight, featuresForFlatbush, computedChains, flipStrandLongReadChains, }) {
+    var _a, _b;
+    const getStrandColorKey = (strand) => strand === -1 ? 'color_rev_strand' : 'color_fwd_strand';
+    for (const computedChain of computedChains) {
+        const { id, chain, minX, maxX } = computedChain;
+        let isPairedEnd = false;
+        for (const element of chain) {
+            if (element.flags & 1) {
+                isPairedEnd = true;
+                break;
+            }
+        }
+        if (isPairedEnd) {
+            continue;
+        }
+        const chainY = chainYOffsets.get(id);
+        if (chainY === undefined) {
+            continue;
+        }
+        const nonSupplementary = [];
+        for (const element of chain) {
+            if (!(element.flags & 2048)) {
+                nonSupplementary.push(element);
+            }
+        }
+        const isSingleton = chain.length === 1;
+        const c1 = nonSupplementary[0] || chain[0];
+        const primaryStrand = getPrimaryStrandFromFlags(c1);
+        if (!isSingleton) {
+            const firstFeat = chain[0];
+            const lastFeat = chain[chain.length - 1];
+            const firstPx = (_a = view.bpToPx({
+                refName: asm.getCanonicalRefName2(firstFeat.refName),
+                coord: firstFeat.start,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx;
+            const lastPx = (_b = view.bpToPx({
+                refName: asm.getCanonicalRefName2(lastFeat.refName),
+                coord: lastFeat.end,
+            })) === null || _b === void 0 ? void 0 : _b.offsetPx;
+            if (firstPx !== undefined && lastPx !== undefined) {
+                const lineY = chainY + featureHeight / 2 - 0.5;
+                ctx.beginPath();
+                ctx.strokeStyle = '#666';
+                ctx.moveTo(firstPx - view.offsetPx, lineY);
+                ctx.lineTo(lastPx - view.offsetPx, lineY);
+                ctx.stroke();
+            }
+        }
+        const viewOffsetPx = view.offsetPx;
+        const chainMinXPx = minX - viewOffsetPx;
+        const chainMaxXPx = maxX - viewOffsetPx;
+        for (let i = 0, l = chain.length; i < l; i++) {
+            const feat = chain[i];
+            const s = view.bpToPx({
+                refName: asm.getCanonicalRefName2(feat.refName),
+                coord: feat.start,
+            });
+            const e = view.bpToPx({
+                refName: asm.getCanonicalRefName2(feat.refName),
+                coord: feat.end,
+            });
+            if (!s || !e) {
+                continue;
+            }
+            const effectiveStrand = isSingleton || !flipStrandLongReadChains
+                ? feat.strand
+                : feat.strand * primaryStrand;
+            const [featureFill, featureStroke] = isSingleton
+                ? getSingletonColor(feat, chainData.stats)
+                : [
+                    fillColor[getStrandColorKey(effectiveStrand)],
+                    strokeColor[getStrandColorKey(effectiveStrand)],
+                ];
+            const xPos = s.offsetPx - viewOffsetPx;
+            const width = Math.max(e.offsetPx - s.offsetPx, 3);
+            if (renderChevrons) {
+                drawChevron(ctx, xPos, chainY, width, featureHeight, effectiveStrand, featureFill, CHEVRON_WIDTH, featureStroke);
+            }
+            else {
+                fillRectCtx(xPos, chainY, width, featureHeight, ctx, featureFill);
+                strokeRectCtx(xPos, chainY, width, featureHeight, ctx, featureStroke);
+            }
+            featuresForFlatbush.push({
+                x1: xPos,
+                y1: chainY,
+                x2: xPos + width,
+                y2: chainY + featureHeight,
+                data: feat,
+                chainId: id,
+                chainMinX: chainMinXPx,
+                chainMaxX: chainMaxXPx,
+                chain,
+            });
+        }
+    }
+}

package/esm/shared/drawPairChains.d.ts

@@ -0,0 +1,24 @@
+import type { ChainData, ReducedFeature } from './fetchChains';
+import type { FlatbushEntry } from './flatbushType';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+type LGV = LinearGenomeViewModel;
+export declare function drawPairChains({ ctx, type, chainData, view, asm, chainYOffsets, renderChevrons, featureHeight, featuresForFlatbush, computedChains, }: {
+    ctx: CanvasRenderingContext2D;
+    type: string;
+    chainData: ChainData;
+    view: LGV;
+    asm: Assembly;
+    chainYOffsets: Map<string, number>;
+    renderChevrons: boolean;
+    featureHeight: number;
+    featuresForFlatbush: FlatbushEntry[];
+    computedChains: {
+        distance: number;
+        minX: number;
+        maxX: number;
+        chain: ReducedFeature[];
+        id: string;
+    }[];
+}): void;
+export {};

package/esm/shared/drawPairChains.js

@@ -0,0 +1,91 @@
+import { fillRectCtx, strokeRectCtx } from './canvasUtils';
+import { drawChevron } from './chevron';
+import { getPairedColor, getSingletonColor } from './color';
+import { CHEVRON_WIDTH } from './util';
+export function drawPairChains({ ctx, type, chainData, view, asm, chainYOffsets, renderChevrons, featureHeight, featuresForFlatbush, computedChains, }) {
+    var _a, _b;
+    for (const computedChain of computedChains) {
+        const { id, chain, minX, maxX } = computedChain;
+        let isPairedEnd = false;
+        for (const element of chain) {
+            if (element.flags & 1) {
+                isPairedEnd = true;
+                break;
+            }
+        }
+        if (!isPairedEnd) {
+            continue;
+        }
+        const chainY = chainYOffsets.get(id);
+        if (chainY === undefined) {
+            continue;
+        }
+        const nonSupplementary = [];
+        for (const element of chain) {
+            if (!(element.flags & 2048)) {
+                nonSupplementary.push(element);
+            }
+        }
+        const hasBothMates = nonSupplementary.length === 2;
+        const [pairedFill, pairedStroke] = hasBothMates
+            ? getPairedColor({
+                type,
+                v0: nonSupplementary[0],
+                v1: nonSupplementary[1],
+                stats: chainData.stats,
+            }) || ['#888', '#888']
+            : getSingletonColor(nonSupplementary[0] || chain[0], chainData.stats);
+        if (hasBothMates) {
+            const v0 = nonSupplementary[0];
+            const v1 = nonSupplementary[1];
+            const r1s = (_a = view.bpToPx({
+                refName: asm.getCanonicalRefName2(v0.refName),
+                coord: v0.start,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx;
+            const r2s = (_b = view.bpToPx({
+                refName: asm.getCanonicalRefName2(v1.refName),
+                coord: v1.start,
+            })) === null || _b === void 0 ? void 0 : _b.offsetPx;
+            if (r1s !== undefined && r2s !== undefined) {
+                fillRectCtx(r1s - view.offsetPx, chainY + featureHeight / 2 - 0.5, r2s - r1s, 1, ctx, '#666');
+            }
+        }
+        const viewOffsetPx = view.offsetPx;
+        const chainMinXPx = minX - viewOffsetPx;
+        const chainMaxXPx = maxX - viewOffsetPx;
+        for (let i = 0, l = chain.length; i < l; i++) {
+            const feat = chain[i];
+            const s = view.bpToPx({
+                refName: asm.getCanonicalRefName2(feat.refName),
+                coord: feat.start,
+            });
+            const e = view.bpToPx({
+                refName: asm.getCanonicalRefName2(feat.refName),
+                coord: feat.end,
+            });
+            if (!s || !e) {
+                continue;
+            }
+            const xPos = s.offsetPx - viewOffsetPx;
+            const width = Math.max(e.offsetPx - s.offsetPx, 3);
+            if (renderChevrons) {
+                drawChevron(ctx, xPos, chainY, width, featureHeight, feat.strand, pairedFill, CHEVRON_WIDTH, pairedStroke);
+            }
+            else {
+                fillRectCtx(xPos, chainY, width, featureHeight, ctx, pairedFill);
+                strokeRectCtx(xPos, chainY, width, featureHeight, ctx, pairedStroke);
+            }
+            featuresForFlatbush.push({
+                x1: xPos,
+                y1: chainY,
+                x2: xPos + width,
+                y2: chainY + featureHeight,
+                data: feat,
+                chainId: id,
+                chainMinX: chainMinXPx,
+                chainMaxX: chainMaxXPx,
+                chain,
+            });
+        }
+    }
+}

package/esm/shared/flatbushType.d.ts

@@ -0,0 +1,12 @@
+import type { ReducedFeature } from './fetchChains';
+export interface FlatbushEntry {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    data: ReducedFeature;
+    chainId: string;
+    chainMinX: number;
+    chainMaxX: number;
+    chain: ReducedFeature[];
+}

package/esm/shared/flatbushType.js

@@ -0,0 +1 @@
+export {};

package/esm/shared/getUniqueModifications.d.ts

@@ -12,4 +12,7 @@ export declare function getUniqueModifications({ model, adapterConfig, blocks, o
     adapterConfig: AnyConfigurationModel;
     blocks: BlockSet;
     opts?: ModificationOpts;
-}): Promise<ModificationType[]>;
+}): Promise<{
+    modifications: ModificationType[];
+    simplexModifications: string[];
+}>;

package/esm/shared/menuItems.d.ts

@@ -0,0 +1,23 @@
+interface LinearReadDisplayModel {
+    setColorScheme: (colorBy: {
+        type: string;
+    }) => void;
+}
+export declare function getColorSchemeMenuItem(model: LinearReadDisplayModel): {
+    label: string;
+    icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+        muiName: string;
+    };
+    subMenu: {
+        label: string;
+        onClick: () => void;
+    }[];
+};
+export declare function getFilterByMenuItem(model: unknown): {
+    label: string;
+    icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+        muiName: string;
+    };
+    onClick: () => void;
+};
+export {};