@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/dist/shared/LinearReadDisplayBaseMixin.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearReadDisplayBaseMixin = LinearReadDisplayBaseMixin;
+const mobx_state_tree_1 = require("mobx-state-tree");
+function LinearReadDisplayBaseMixin() {
+    return mobx_state_tree_1.types
+        .model('LinearReadDisplayBaseMixin', {
+        filterBySetting: mobx_state_tree_1.types.frozen(),
+        colorBySetting: mobx_state_tree_1.types.frozen(),
+    })
+        .volatile(() => ({
+        loading: false,
+        chainData: undefined,
+        lastDrawnOffsetPx: undefined,
+        lastDrawnBpPerPx: 0,
+        ref: null,
+    }))
+        .actions(self => ({
+        setLastDrawnOffsetPx(n) {
+            self.lastDrawnOffsetPx = n;
+        },
+        setLastDrawnBpPerPx(n) {
+            self.lastDrawnBpPerPx = n;
+        },
+        setLoading(f) {
+            self.loading = f;
+        },
+        setRef(ref) {
+            self.ref = ref;
+        },
+        setColorScheme(colorBy) {
+            self.colorBySetting = {
+                ...colorBy,
+            };
+        },
+        setChainData(args) {
+            self.chainData = args;
+        },
+        setFilterBy(filter) {
+            self.filterBySetting = {
+                ...filter,
+            };
+        },
+    }))
+        .views(self => ({
+        get drawn() {
+            return self.lastDrawnOffsetPx !== undefined;
+        },
+    }));
+}

package/dist/shared/LinearReadDisplayWithLayoutMixin.d.ts

@@ -0,0 +1,11 @@
+import type { FlatbushEntry } from './flatbushType';
+import type Flatbush from '@jbrowse/core/util/flatbush';
+export declare function LinearReadDisplayWithLayoutMixin(): import("mobx-state-tree").IModelType<{}, {
+    featureLayout: Flatbush | undefined;
+    mouseoverRef: HTMLCanvasElement | null;
+    featuresForFlatbush: FlatbushEntry[];
+} & {
+    setFeatureLayout(layout: Flatbush): void;
+    setMouseoverRef(ref: HTMLCanvasElement | null): void;
+    setFeaturesForFlatbush(features: FlatbushEntry[]): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/shared/LinearReadDisplayWithLayoutMixin.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearReadDisplayWithLayoutMixin = LinearReadDisplayWithLayoutMixin;
+const mobx_state_tree_1 = require("mobx-state-tree");
+function LinearReadDisplayWithLayoutMixin() {
+    return mobx_state_tree_1.types
+        .model('LinearReadDisplayWithLayoutMixin', {})
+        .volatile(() => ({
+        featureLayout: undefined,
+        mouseoverRef: null,
+        featuresForFlatbush: [],
+    }))
+        .actions(self => ({
+        setFeatureLayout(layout) {
+            self.featureLayout = layout;
+        },
+        setMouseoverRef(ref) {
+            self.mouseoverRef = ref;
+        },
+        setFeaturesForFlatbush(features) {
+            self.featuresForFlatbush = features;
+        },
+    }));
+}

package/dist/shared/LinearReadDisplayWithPairFiltersMixin.d.ts

@@ -0,0 +1,11 @@
+export declare function LinearReadDisplayWithPairFiltersMixin(): import("mobx-state-tree").IModelType<{
+    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>>;
+}, {
+    setDrawSingletons(f: boolean): void;
+    setDrawProperPairs(f: boolean): void;
+    setFlipStrandLongReadChains(f: boolean): void;
+    setFeatureHeight(n?: number): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/shared/LinearReadDisplayWithPairFiltersMixin.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearReadDisplayWithPairFiltersMixin = LinearReadDisplayWithPairFiltersMixin;
+const mobx_state_tree_1 = require("mobx-state-tree");
+function LinearReadDisplayWithPairFiltersMixin() {
+    return mobx_state_tree_1.types
+        .model('LinearReadDisplayWithPairFiltersMixin', {
+        drawSingletons: true,
+        drawProperPairs: true,
+        flipStrandLongReadChains: true,
+        featureHeight: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.number),
+    })
+        .actions(self => ({
+        setDrawSingletons(f) {
+            self.drawSingletons = f;
+        },
+        setDrawProperPairs(f) {
+            self.drawProperPairs = f;
+        },
+        setFlipStrandLongReadChains(f) {
+            self.flipStrandLongReadChains = f;
+        },
+        setFeatureHeight(n) {
+            self.featureHeight = n;
+        },
+    }));
+}

package/dist/shared/afterAttach.js

@@ -20,10 +20,11 @@ function doAfterAttach(self, cb) {
         if (!self.chainData) {
             return;
         }
-        ctx.clearRect(0, 0, canvas.width, self.height * 2);
+        const height = 'layoutHeight' in self ? self.layoutHeight || 1 : self.height;
         ctx.resetTransform();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.scale(2, 2);
-        cb(self, ctx, canvas.width, self.height);
+        cb(self, ctx, canvas.width, height);
         self.setLastDrawnOffsetPx(view.offsetPx);
         self.setLastDrawnBpPerPx(view.bpPerPx);
     }

package/dist/shared/chainToSimpleFeature.d.ts

@@ -0,0 +1,3 @@
+import { SimpleFeature } from '@jbrowse/core/util';
+import type { ReducedFeature } from './fetchChains';
+export declare function chainToSimpleFeature(chain: ReducedFeature[]): SimpleFeature;

package/dist/shared/chainToSimpleFeature.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chainToSimpleFeature = chainToSimpleFeature;
+const util_1 = require("@jbrowse/core/util");
+function chainToSimpleFeature(chain) {
+    if (chain.length === 0) {
+        throw new Error('Chain cannot be empty');
+    }
+    const firstFeat = chain[0];
+    return new util_1.SimpleFeature({
+        uniqueId: firstFeat.id,
+        id: firstFeat.id,
+        name: firstFeat.name,
+        refName: firstFeat.refName,
+        start: Math.min(...chain.map(f => f.start)),
+        end: Math.max(...chain.map(f => f.end)),
+        strand: firstFeat.strand,
+        flags: firstFeat.flags,
+        tlen: firstFeat.tlen,
+        pair_orientation: firstFeat.pair_orientation,
+        clipPos: firstFeat.clipPos,
+        ...(firstFeat.next_ref && { next_ref: firstFeat.next_ref }),
+        ...(firstFeat.next_pos !== undefined && { next_pos: firstFeat.next_pos }),
+        ...(firstFeat.SA && { SA: firstFeat.SA }),
+        subfeatures: chain.map((feat, idx) => ({
+            uniqueId: `${feat.id}_${idx}`,
+            id: `${feat.id}_${idx}`,
+            name: feat.name,
+            refName: feat.refName,
+            start: feat.start,
+            end: feat.end,
+            strand: feat.strand,
+            type: 'alignment_part',
+            flags: feat.flags,
+            tlen: feat.tlen,
+            pair_orientation: feat.pair_orientation,
+            clipPos: feat.clipPos,
+            ...(feat.next_ref && { next_ref: feat.next_ref }),
+            ...(feat.next_pos !== undefined && { next_pos: feat.next_pos }),
+            ...(feat.SA && { SA: feat.SA }),
+        })),
+    });
+}

package/dist/shared/chevron.d.ts

@@ -0,0 +1 @@
+export declare function drawChevron(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, strand: number, color: string, chevronWidth: number, stroke?: string): void;

package/dist/shared/chevron.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawChevron = drawChevron;
+function drawChevron(ctx, x, y, width, height, strand, color, chevronWidth, stroke) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    if (strand === -1) {
+        ctx.moveTo(x - chevronWidth, y + height / 2);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width, y);
+        ctx.lineTo(x, y);
+    }
+    else {
+        ctx.moveTo(x, y);
+        ctx.lineTo(x, y + height);
+        ctx.lineTo(x + width, y + height);
+        ctx.lineTo(x + width + chevronWidth, y + height / 2);
+        ctx.lineTo(x + width, y);
+    }
+    ctx.closePath();
+    ctx.fill();
+    if (stroke) {
+        ctx.strokeStyle = stroke;
+        ctx.stroke();
+    }
+}

package/dist/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/dist/shared/color.js

@@ -1,11 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.strokeColor = exports.fillColor = void 0;
+exports.strokeColor = exports.fillColor = exports.PairType = void 0;
+exports.getPairedType = getPairedType;
 exports.getPairedInsertSizeColor = getPairedInsertSizeColor;
-exports.getPairedInsertSizeAndOrientationColor = getPairedInsertSizeAndOrientationColor;
 exports.getPairedOrientationColorOrDefault = getPairedOrientationColorOrDefault;
 exports.getPairedOrientationColor = getPairedOrientationColor;
+exports.getPairedInsertSizeAndOrientationColor = getPairedInsertSizeAndOrientationColor;
+exports.getSingletonColor = getSingletonColor;
+exports.getPairedColor = getPairedColor;
 const util_1 = require("../util");
+exports.PairType = {
+    PROPER_PAIR: 0,
+    LONG_INSERT: 1,
+    SHORT_INSERT: 2,
+    INTER_CHROM: 3,
+    ABNORMAL_ORIENTATION: 4,
+    UNMAPPED_MATE: 5,
+};
 exports.fillColor = {
     color_fwd_strand_not_proper: '#ECC8C8',
     color_rev_strand_not_proper: '#BEBED8',
@@ -16,13 +27,14 @@ exports.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',
 };
 exports.strokeColor = {
@@ -35,38 +47,78 @@ exports.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',
 };
-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 [exports.fillColor.color_longinsert, exports.strokeColor.color_longinsert];
-    }
-    else if (sameRef && tlen < ((stats === null || stats === void 0 ? void 0 : stats.lower) || 0)) {
-        return [exports.fillColor.color_shortinsert, exports.strokeColor.color_shortinsert];
+const defaultColor = [
+    exports.fillColor.color_pair_lr,
+    exports.strokeColor.color_pair_lr,
+];
+function getPairedType({ type, f1, f2, stats, }) {
+    if (f1.flags !== undefined && f1.flags & 8) {
+        return exports.PairType.UNMAPPED_MATE;
     }
-    else if (!sameRef) {
-        return [exports.fillColor.color_interchrom, exports.strokeColor.color_interchrom];
+    if (type === 'insertSizeAndOrientation' || type === 'orientation') {
+        const orientationType = util_1.orientationTypes.fr;
+        const r = orientationType[f1.pair_orientation || ''];
+        if (r && r !== 'LR') {
+            return exports.PairType.ABNORMAL_ORIENTATION;
+        }
     }
-    else {
-        return undefined;
+    if (type === 'insertSizeAndOrientation' || type === 'insertSize') {
+        const sameRef = f1.refName === f2.refName;
+        const tlen = Math.abs(f1.tlen || 0);
+        if (!sameRef) {
+            return exports.PairType.INTER_CHROM;
+        }
+        if (stats) {
+            if (tlen > stats.upper) {
+                return exports.PairType.LONG_INSERT;
+            }
+            if (tlen < stats.lower) {
+                return exports.PairType.SHORT_INSERT;
+            }
+        }
     }
+    return exports.PairType.PROPER_PAIR;
 }
-const defaultColor = [exports.fillColor.color_unknown, exports.fillColor.color_unknown];
-function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
-    return (getPairedOrientationColorOrDefault(f1) ||
-        getPairedInsertSizeColor(f1, f2, stats) ||
-        defaultColor);
+function getPairedInsertSizeColor(f1, f2, stats) {
+    const pairType = getPairedType({ type: 'insertSize', f1, f2, stats });
+    switch (pairType) {
+        case exports.PairType.UNMAPPED_MATE:
+            return [
+                exports.fillColor.color_unmapped_mate,
+                exports.strokeColor.color_unmapped_mate,
+            ];
+        case exports.PairType.LONG_INSERT:
+            return [exports.fillColor.color_longinsert, exports.strokeColor.color_longinsert];
+        case exports.PairType.SHORT_INSERT:
+            return [
+                exports.fillColor.color_shortinsert,
+                exports.strokeColor.color_shortinsert,
+            ];
+        case exports.PairType.INTER_CHROM:
+            return [exports.fillColor.color_interchrom, exports.strokeColor.color_interchrom];
+        case exports.PairType.PROPER_PAIR:
+            return undefined;
+        default:
+            return undefined;
+    }
 }
 function getPairedOrientationColorOrDefault(f) {
+    if (f.flags !== undefined && f.flags & 8) {
+        return [
+            exports.fillColor.color_unmapped_mate,
+            exports.strokeColor.color_unmapped_mate,
+        ];
+    }
     const type = util_1.orientationTypes.fr;
     const r = type[f.pair_orientation || ''];
     const type2 = util_1.pairMap[r];
@@ -77,3 +129,30 @@ function getPairedOrientationColorOrDefault(f) {
 function getPairedOrientationColor(f) {
     return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
+function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
+    return (getPairedOrientationColorOrDefault(f1) ||
+        getPairedInsertSizeColor(f1, f2, stats) ||
+        defaultColor);
+}
+function getSingletonColor(f, stats) {
+    const tlen = Math.abs(f.tlen || 0);
+    if (stats && tlen > stats.upper) {
+        return [
+            exports.fillColor.color_fwd_missing_mate,
+            exports.strokeColor.color_fwd_missing_mate,
+        ];
+    }
+    return defaultColor;
+}
+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/dist/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/dist/shared/components/BaseDisplayComponent.js

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

package/dist/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/dist/shared/components/SetFeatureHeightDialog.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const SetFeatureHeightDialog = (0, mobx_react_1.observer)(function (props) {
+    const { model, handleClose } = props;
+    const { featureHeightSetting, noSpacing: noSpacingSetting } = model;
+    const [height, setHeight] = (0, react_1.useState)(`${featureHeightSetting}`);
+    const [noSpacing, setNoSpacing] = (0, react_1.useState)(noSpacingSetting);
+    const ok = height !== '' && !Number.isNaN(+height);
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set feature height", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.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." }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: height, helperText: "Feature height", onChange: event => {
+                        setHeight(event.target.value);
+                    } }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: !!noSpacing, onChange: () => {
+                            setNoSpacing(val => !val);
+                        } }), label: "Remove spacing between features in y-direction?" }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.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" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+exports.default = SetFeatureHeightDialog;

package/dist/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/dist/shared/components/SetMaxHeightDialog.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()({
+    root: {
+        width: 500,
+    },
+});
+const SetMaxHeightDialog = (0, mobx_react_1.observer)(function (props) {
+    const { model, handleClose } = props;
+    const { classes } = useStyles();
+    const { maxHeight = '' } = model;
+    const [max, setMax] = (0, react_1.useState)(`${maxHeight}`);
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Set max height", children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.root, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\"" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { value: max, autoFocus: true, onChange: event => {
+                        setMax(event.target.value);
+                    }, placeholder: "Enter max height for layout" }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
+                                model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
+                                handleClose();
+                            }, children: "Submit" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                                handleClose();
+                            }, children: "Cancel" })] })] }) }));
+});
+exports.default = SetMaxHeightDialog;

package/dist/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 {};