@jbrowse/plugin-alignments 3.6.5 → 3.7.0

package/esm/LinearReadArcsDisplay/model.js

@@ -1,30 +1,18 @@
-import { lazy } from 'react';
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes';
-import { getSession } from '@jbrowse/core/util';
 import { FeatureDensityMixin, TrackHeightMixin, } from '@jbrowse/plugin-linear-genome-view';
-import FilterListIcon from '@mui/icons-material/ClearAll';
-import PaletteIcon from '@mui/icons-material/Palette';
 import { types } from 'mobx-state-tree';
-const FilterByTagDialog = lazy(() => import('../shared/components/FilterByTagDialog'));
+import { LinearReadDisplayBaseMixin } from '../shared/LinearReadDisplayBaseMixin';
+import { getColorSchemeMenuItem, getFilterByMenuItem, } from '../shared/menuItems';
 function stateModelFactory(configSchema) {
     return types
-        .compose('LinearReadArcsDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), types.model({
+        .compose('LinearReadArcsDisplay', BaseDisplay, TrackHeightMixin(), FeatureDensityMixin(), LinearReadDisplayBaseMixin(), types.model({
         type: types.literal('LinearReadArcsDisplay'),
         configuration: ConfigurationReference(configSchema),
         lineWidth: types.maybe(types.number),
         jitter: types.maybe(types.number),
-        colorBySetting: types.frozen(),
-        filterBySetting: types.frozen(),
         drawInter: true,
         drawLongRange: true,
-    }))
-        .volatile(() => ({
-        loading: false,
-        chainData: undefined,
-        lastDrawnOffsetPx: undefined,
-        lastDrawnBpPerPx: 0,
-        ref: null,
     }))
         .views(self => ({
         get colorBy() {
@@ -37,40 +25,15 @@ function stateModelFactory(configSchema) {
         },
     }))
         .actions(self => ({
-        setLastDrawnOffsetPx(n) {
-            self.lastDrawnOffsetPx = n;
-        },
-        setLastDrawnBpPerPx(n) {
-            self.lastDrawnBpPerPx = n;
-        },
-        setLoading(f) {
-            self.loading = f;
-        },
         reload() {
             self.error = undefined;
         },
-        setRef(ref) {
-            self.ref = ref;
-        },
-        setColorScheme(colorBy) {
-            self.colorBySetting = {
-                ...colorBy,
-            };
-        },
-        setChainData(args) {
-            self.chainData = args;
-        },
         setDrawInter(f) {
             self.drawInter = f;
         },
         setDrawLongRange(f) {
             self.drawLongRange = f;
         },
-        setFilterBy(filter) {
-            self.filterBySetting = {
-                ...filter,
-            };
-        },
         setLineWidth(n) {
             self.lineWidth = n;
         },
@@ -79,9 +42,6 @@ function stateModelFactory(configSchema) {
         },
     }))
         .views(self => ({
-        get drawn() {
-            return self.lastDrawnOffsetPx !== undefined;
-        },
         get lineWidthSetting() {
             var _a;
             return (_a = self.lineWidth) !== null && _a !== void 0 ? _a : getConf(self, 'lineWidth');
@@ -103,16 +63,7 @@ function stateModelFactory(configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
-                    {
-                        label: 'Filter by',
-                        icon: FilterListIcon,
-                        onClick: () => {
-                            getSession(self).queueDialog(handleClose => [
-                                FilterByTagDialog,
-                                { model: self, handleClose },
-                            ]);
-                        },
-                    },
+                    getFilterByMenuItem(self),
                     {
                         label: 'Line width',
                         subMenu: [
@@ -181,36 +132,7 @@ function stateModelFactory(configSchema) {
                             self.setDrawLongRange(!self.drawLongRange);
                         },
                     },
-                    {
-                        label: 'Color scheme',
-                        icon: PaletteIcon,
-                        subMenu: [
-                            {
-                                label: 'Insert size ± 3σ and orientation',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'insertSizeAndOrientation' });
-                                },
-                            },
-                            {
-                                label: 'Insert size ± 3σ',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'insertSize' });
-                                },
-                            },
-                            {
-                                label: 'Orientation',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'orientation' });
-                                },
-                            },
-                            {
-                                label: 'Insert size gradient',
-                                onClick: () => {
-                                    self.setColorScheme({ type: 'gradient' });
-                                },
-                            },
-                        ],
-                    },
+                    getColorSchemeMenuItem(self),
                 ];
             },
         };

package/esm/LinearReadCloudDisplay/components/ReactComponent.js

@@ -1,16 +1,98 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { getContainingView } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
 import { observer } from 'mobx-react';
 import BaseDisplayComponent from '../../shared/components/BaseDisplayComponent';
 const Cloud = observer(function ({ model, }) {
     const view = getContainingView(model);
     const width = Math.round(view.dynamicBlocks.totalWidthPx);
-    const height = model.height;
+    const height = model.drawCloud ? model.height : model.layoutHeight;
+    const containerRef = useRef(null);
+    const [hoveredFeature, setHoveredFeature] = useState(null);
+    const [hoveredFeatureData, setHoveredFeatureData] = useState(null);
+    const [mousePosition, setMousePosition] = useState(null);
+    const flatbushIndex = useMemo(() => {
+        return model.featureLayout ? Flatbush.from(model.featureLayout.data) : null;
+    }, [model.featureLayout]);
     const cb = useCallback((ref) => {
         model.setRef(ref);
     }, [model, width, height]);
-    return (_jsx("canvas", { "data-testid": "cloud-canvas", ref: cb, style: { width, height, position: 'absolute' }, width: width * 2, height: height * 2 }));
+    const mouseoverCb = useCallback((ref) => {
+        model.setMouseoverRef(ref);
+    }, [model, width, height]);
+    const onMouseMove = useCallback((event) => {
+        if (!containerRef.current || !flatbushIndex) {
+            setHoveredFeature(null);
+            setHoveredFeatureData(null);
+            setMousePosition(null);
+            return;
+        }
+        const rect = containerRef.current.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const offsetY = event.clientY - rect.top;
+        setMousePosition({ x: event.clientX, y: event.clientY });
+        const results = flatbushIndex.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+        if (results.length > 0) {
+            const featureIndex = results[0];
+            const feature = model.featuresForFlatbush[featureIndex];
+            if (feature) {
+                setHoveredFeature({
+                    x: feature.chainMinX,
+                    y: feature.y1,
+                    width: feature.chainMaxX - feature.chainMinX,
+                    height: feature.y2 - feature.y1,
+                });
+                setHoveredFeatureData(feature.data);
+            }
+            else {
+                setHoveredFeature(null);
+                setHoveredFeatureData(null);
+            }
+        }
+        else {
+            setHoveredFeature(null);
+            setHoveredFeatureData(null);
+        }
+    }, [flatbushIndex, model.featuresForFlatbush]);
+    const onMouseLeave = useCallback(() => {
+        setHoveredFeature(null);
+        setHoveredFeatureData(null);
+        setMousePosition(null);
+    }, []);
+    const onClick = useCallback((event) => {
+        if (!containerRef.current || !flatbushIndex) {
+            return;
+        }
+        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];
+            if (feature) {
+                model.selectFeature(feature.chain);
+            }
+        }
+    }, [flatbushIndex, model]);
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', width, height }, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onClick: onClick, children: [_jsx("canvas", { "data-testid": model.drawCloud ? 'cloud-canvas' : 'stack-canvas', 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 }), 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, hoveredFeatureData && mousePosition ? (_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 }) }), _jsxs("div", { children: [hoveredFeatureData.refName, ":", hoveredFeatureData.start.toLocaleString(), "-", hoveredFeatureData.end.toLocaleString()] }), hoveredFeatureData.tlen !== 0 ? (_jsxs("div", { children: ["Template length: ", hoveredFeatureData.tlen] })) : null] }) })) : null] }));
 });
 const LinearReadCloudReactComponent = observer(function ({ model, }) {
     return (_jsx(BaseDisplayComponent, { model: model, children: _jsx(Cloud, { model: model }) }));

package/esm/LinearReadCloudDisplay/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/LinearReadCloudDisplay/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/LinearReadCloudDisplay/configSchema.d.ts

@@ -15,6 +15,13 @@ declare function configSchemaF(pluginManager: PluginManager): import("@jbrowse/c
             type: string;
         };
     };
+    filterBy: {
+        type: string;
+        defaultValue: {
+            flagInclude: number;
+            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<{

package/esm/LinearReadCloudDisplay/configSchema.js

@@ -1,5 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view';
+import { defaultFilterFlags } from '../shared/util';
 function configSchemaF(pluginManager) {
     return ConfigurationSchema('LinearReadCloudDisplay', {
         maxFeatureScreenDensity: {
@@ -15,6 +16,10 @@ function configSchemaF(pluginManager) {
             type: 'frozen',
             defaultValue: { type: 'insertSizeAndOrientation' },
         },
+        filterBy: {
+            type: 'frozen',
+            defaultValue: defaultFilterFlags,
+        },
     }, {
         baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
         explicitlyTyped: true,

package/esm/LinearReadCloudDisplay/drawFeatsAbstract.d.ts

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

package/esm/LinearReadCloudDisplay/drawFeatsAbstract.js

@@ -0,0 +1,10 @@
+import { drawFeats as drawFeats1 } from './drawFeatsCloud';
+import { drawFeats as drawFeats2 } from './drawFeatsStack';
+export function drawFeats(self, ctx) {
+    if (self.drawCloud) {
+        drawFeats1(self, ctx);
+    }
+    else {
+        drawFeats2(self, ctx);
+    }
+}

package/esm/LinearReadCloudDisplay/drawFeatsCloud.d.ts

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

package/esm/LinearReadCloudDisplay/drawFeatsCloud.js

@@ -0,0 +1,21 @@
+import { max, min } from '@jbrowse/core/util';
+import { drawFeatsCommon } from './drawFeatsCommon';
+function calculateCloudYOffsets(computedChains, self, _view, _featureHeight) {
+    const distances = computedChains.map(c => c.distance).filter(d => d > 0);
+    if (distances.length === 0) {
+        return { chainYOffsets: new Map() };
+    }
+    const logOffset = 10;
+    const maxD = Math.log(max(distances) + logOffset);
+    const minD = Math.log(min(distances) + logOffset);
+    const scaler = (self.height - 20) / (maxD - minD || 1);
+    const chainYOffsets = new Map();
+    for (const { id, distance } of computedChains) {
+        const top = distance > 0 ? (Math.log(distance + logOffset) - minD) * scaler : 0;
+        chainYOffsets.set(id, top);
+    }
+    return { chainYOffsets };
+}
+export function drawFeats(self, ctx) {
+    drawFeatsCommon(self, ctx, calculateCloudYOffsets);
+}

package/esm/LinearReadCloudDisplay/drawFeatsCommon.d.ts

@@ -0,0 +1,23 @@
+import type { LinearReadCloudDisplayModel } from './model';
+import type { ChainData, ReducedFeature } from '../shared/fetchChains';
+import type { FlatbushEntry } from '../shared/flatbushType';
+import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
+type LGV = LinearGenomeViewModel;
+export interface ComputedChain {
+    distance: number;
+    minX: number;
+    maxX: number;
+    chain: ReducedFeature[];
+    id: string;
+}
+export declare function filterChains(chains: ReducedFeature[][], drawSingletons: boolean, drawProperPairs: boolean, type: string, chainData: ChainData): ReducedFeature[][];
+export declare function computeChainBounds(chains: ReducedFeature[][], view: LGV, asm: Assembly): ComputedChain[];
+export declare function sortComputedChains(computedChains: ComputedChain[]): void;
+export declare function buildFlatbushIndex(featuresForFlatbush: FlatbushEntry[], self: LinearReadCloudDisplayModel): void;
+export declare function addChainMouseoverRects(computedChains: ComputedChain[], chainYOffsets: Map<string, number>, featureHeight: number, view: LGV, featuresForFlatbush: FlatbushEntry[]): void;
+export declare function drawFeatsCommon(self: LinearReadCloudDisplayModel, ctx: CanvasRenderingContext2D, calculateYOffsets: (computedChains: ComputedChain[], self: LinearReadCloudDisplayModel, view: LGV, featureHeight: number) => {
+    chainYOffsets: Map<string, number>;
+    layoutHeight?: number;
+}): void;
+export {};

package/esm/LinearReadCloudDisplay/drawFeatsCommon.js

@@ -0,0 +1,187 @@
+import { getConf } from '@jbrowse/core/configuration';
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import Flatbush from '@jbrowse/core/util/flatbush';
+import { PairType, getPairedType } from '../shared/color';
+import { drawLongReadChains } from '../shared/drawLongReadChains';
+import { drawPairChains } from '../shared/drawPairChains';
+import { shouldRenderChevrons } from '../shared/util';
+export 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 = getPairedType({
+                    type,
+                    f1: v0,
+                    f2: v1,
+                    stats: chainData.stats,
+                });
+                if (pairType === PairType.PROPER_PAIR) {
+                    continue;
+                }
+            }
+        }
+        filtered.push(chain);
+    }
+    return filtered;
+}
+export 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;
+}
+export 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;
+    });
+}
+export function buildFlatbushIndex(featuresForFlatbush, self) {
+    const finalFlatbush = new Flatbush(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);
+}
+export 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,
+            });
+        }
+    }
+}
+export function drawFeatsCommon(self, ctx, calculateYOffsets) {
+    var _a, _b;
+    const { chainData } = self;
+    if (!chainData) {
+        return;
+    }
+    const { assemblyManager } = getSession(self);
+    const view = 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 : 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 = shouldRenderChevrons(view.bpPerPx, featureHeight);
+    drawPairChains({
+        ctx,
+        type,
+        chainData,
+        view,
+        asm,
+        chainYOffsets,
+        renderChevrons,
+        featureHeight,
+        featuresForFlatbush,
+        computedChains,
+    });
+    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/esm/LinearReadCloudDisplay/drawFeatsStack.d.ts

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

package/esm/LinearReadCloudDisplay/drawFeatsStack.js

@@ -0,0 +1,30 @@
+import GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout';
+import { drawFeatsCommon } from './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({
+        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() };
+}
+export function drawFeats(self, ctx) {
+    drawFeatsCommon(self, ctx, calculateStackYOffsets);
+}

package/esm/LinearReadCloudDisplay/index.js

@@ -7,7 +7,7 @@ export default function register(pluginManager) {
         const configSchema = configSchemaF(pluginManager);
         return new DisplayType({
             name: 'LinearReadCloudDisplay',
-            displayName: 'Read cloud display',
+            displayName: 'Linked reads display',
             configSchema,
             stateModel: stateModelF(configSchema),
             trackType: 'AlignmentsTrack',