@jbrowse/plugin-alignments 3.7.0 → 4.0.1

package/esm/PileupRenderer/PileupRenderer.js

@@ -1,85 +1,43 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
 import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { renderToAbstractCanvas, updateStatus } from '@jbrowse/core/util';
-import { PileupLayoutSession } from './PileupLayoutSession';
-import { fetchSequence } from '../util';
-import { layoutFeats } from './layoutFeatures';
+import { expandRegion } from '@jbrowse/core/pluggableElementTypes/renderers/util';
+import { updateStatus } from '@jbrowse/core/util';
+import { rpcResult } from '@jbrowse/core/util/librpc';
+import { collectTransferables } from '@jbrowse/core/util/offscreenCanvasPonyfill';
+import { PileupLayoutSession } from "./PileupLayoutSession.js";
 export default class PileupRenderer extends BoxRendererType {
-    constructor() {
-        super(...arguments);
-        this.supportsSVG = true;
-    }
-    async fetchSequence(renderProps, region) {
-        const { sessionId, adapterConfig } = renderProps;
-        const { sequenceAdapter } = adapterConfig;
-        if (!sequenceAdapter) {
-            return undefined;
-        }
-        const { dataAdapter } = await getAdapter(this.pluginManager, sessionId, sequenceAdapter);
-        return fetchSequence({
-            ...region,
-            start: Math.max(0, region.start - 1),
-            end: region.end + 1,
-        }, dataAdapter);
-    }
+    supportsSVG = true;
     getExpandedRegion(region, renderArgs) {
         const { config, showSoftClip } = renderArgs;
-        const { start, end } = region;
         const maxClippingSize = readConfObject(config, 'maxClippingSize');
         const bpExpansion = showSoftClip ? Math.round(maxClippingSize) : 0;
-        return {
-            ...region,
-            start: Math.floor(Math.max(start - bpExpansion, 0)),
-            end: Math.ceil(end + bpExpansion),
-        };
+        return expandRegion(region, bpExpansion);
     }
     async render(renderProps) {
-        const features = await this.getFeatures(renderProps);
-        const layout = this.createLayoutInWorker(renderProps);
-        const { statusCallback = () => { }, colorBy, regions, bpPerPx } = renderProps;
+        const { statusCallback = () => { }, regions, bpPerPx } = renderProps;
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
-        const { layoutRecords, height } = await updateStatus('Creating layout', statusCallback, () => layoutFeats({
-            ...renderProps,
-            features,
-            layout,
-        }));
-        const res = await updateStatus('Rendering alignments', statusCallback, async () => {
-            const regionSequence = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' && features.size
-                ? await this.fetchSequence(renderProps, region)
-                : undefined;
-            const { makeImageData } = await import('./makeImageData');
-            return renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
-                ctx,
-                layoutRecords,
-                canvasWidth: width,
-                renderArgs: {
-                    ...renderProps,
-                    layout,
-                    features,
-                    regionSequence,
-                },
-            }));
-        });
-        const results = await super.render({
-            ...renderProps,
-            ...res,
-            features,
-            layout,
-            height,
+        const features = await this.getFeatures(renderProps);
+        const layout = this.createLayoutInWorker(renderProps);
+        const { makeImageData } = await import("./makeImageData.js");
+        const { result, height, featureNames } = await updateStatus('Rendering alignments', statusCallback, () => makeImageData({
             width,
-        });
-        return {
-            ...results,
-            ...res,
-            features: new Map(),
-            layout,
+            renderArgs: {
+                ...renderProps,
+                layout,
+                features,
+            },
+            pluginManager: this.pluginManager,
+        }));
+        const serializedLayout = this.serializeLayout(layout, renderProps);
+        return rpcResult({
+            ...result,
+            featureNames,
+            layout: serializedLayout,
             height,
             width,
             maxHeightReached: layout.maxHeightReached,
-            containsNoTransferables: true,
-        };
+        }, collectTransferables(result));
     }
     createLayoutSession(args) {
         return new PileupLayoutSession(args);

package/esm/PileupRenderer/colorBy.js

@@ -1,6 +1,6 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { fillColor } from '../shared/color';
-import { orientationTypes } from '../util';
+import { fillColor } from "../shared/color.js";
+import { orientationTypes } from "../util.js";
 export function colorByInsertSize(feature) {
     return feature.get('is_paired') &&
         feature.get('refName') !== feature.get('next_ref')

package/esm/PileupRenderer/components/PileupRendering.d.ts

@@ -1,10 +1,10 @@
-import type { ColorBy, FilterBy, SortedBy } from '../../shared/types';
-import type { FlatbushItem } from '../types';
+import type { ColorBy, FilterBy, SortedBy } from '../../shared/types.ts';
+import type { FlatbushItem } from '../types.ts';
 import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
     blockKey: string;
-    displayModel?: BaseLinearDisplayModel;
+    displayModel: BaseLinearDisplayModel;
     width: number;
     height: number;
     regions: Region[];
@@ -13,7 +13,7 @@ declare const PileupRendering: (props: {
     colorBy?: ColorBy;
     filterBy?: FilterBy;
     items: FlatbushItem[];
-    flatbush: any;
-    onMouseMove?: (event: React.MouseEvent, featureId?: string, extra?: string) => void;
+    flatbush: ArrayBufferLike;
+    featureNames?: Record<string, string>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;

package/esm/PileupRenderer/components/PileupRendering.js

@@ -1,147 +1,181 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-import { bpSpanPx } from '@jbrowse/core/util';
+import { getContainingTrack, getContainingView, getSession, isSessionModelWithWidgets, } from '@jbrowse/core/util';
 import Flatbush from '@jbrowse/core/util/flatbush';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { observer } from 'mobx-react';
-const PileupRendering = observer(function (props) {
-    var _a;
-    const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, flatbush, items, } = props;
+import { flatbushItemToFeatureData } from "../types.js";
+import PileupTooltip from "./PileupTooltip.js";
+import { makeRect } from "./util.js";
+const PileupRendering = observer(function PileupRendering(props) {
+    const { blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, flatbush, items, featureNames = {}, } = props;
+    const { refName } = regions[0];
     const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush]);
-    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
-    const [firstRender, setFirstRender] = useState(false);
-    useEffect(() => {
-        setFirstRender(true);
-    }, []);
+    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel;
     const region = regions[0];
     const ref = useRef(null);
     const [mouseIsDown, setMouseIsDown] = useState(false);
     const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] = useState(false);
+    const [itemUnderMouse, setItemUnderMouse] = useState();
+    const [featureNameUnderMouse, setFeatureNameUnderMouse] = useState();
+    const [mousePosition, setMousePosition] = useState();
+    const [contextMenuAnchor, setContextMenuAnchor] = useState(null);
     const selectedRect = selectedFeatureId
-        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, selectedFeatureId)
+        ? displayModel.getFeatureByID(blockKey, selectedFeatureId)
         : undefined;
-    const highlightedFeature = featureIdUnderMouse || (contextMenuFeature === null || contextMenuFeature === void 0 ? void 0 : contextMenuFeature.id());
+    const highlightedFeature = featureIdUnderMouse || contextMenuFeature?.id();
     const highlightedRect = highlightedFeature
-        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, highlightedFeature)
+        ? displayModel.getFeatureByID(blockKey, highlightedFeature)
+        : undefined;
+    const selected = selectedRect
+        ? makeRect(selectedRect, 2, region, bpPerPx)
+        : undefined;
+    const highlight = highlightedRect
+        ? makeRect(highlightedRect, 0, region, bpPerPx)
         : undefined;
-    function makeRect(r, offset = 2) {
-        const [leftBp, topPx, rightBp, bottomPx] = r;
-        const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx);
-        const rectTop = Math.round(topPx);
-        const rectHeight = Math.round(bottomPx - topPx);
-        return {
-            left: leftPx - offset,
-            top: rectTop - offset,
-            width: rightPx - leftPx,
-            height: rectHeight,
-        };
-    }
-    const selected = selectedRect ? makeRect(selectedRect) : undefined;
-    const highlight = highlightedRect ? makeRect(highlightedRect, 0) : undefined;
-    function onMouseDown(event) {
-        setMouseIsDown(true);
-        setMovedDuringLastMouseDown(false);
-        callMouseHandler('MouseDown', event);
-    }
-    function onMouseEnter(event) {
-        callMouseHandler('MouseEnter', event);
-    }
-    function onMouseOut(event) {
-        callMouseHandler('MouseOut', event);
-        callMouseHandler('MouseLeave', event);
-    }
-    function onMouseOver(event) {
-        callMouseHandler('MouseOver', event);
-    }
-    function onMouseUp(event) {
-        setMouseIsDown(false);
-        callMouseHandler('MouseUp', event);
-    }
-    function onClick(event) {
-        if (!movedDuringLastMouseDown) {
-            callMouseHandler('Click', event);
-        }
-    }
-    function onMouseLeave(event) {
-        callMouseHandler('MouseOut', event);
-        callMouseHandler('MouseLeave', event);
-    }
-    function onContextMenu(event) {
-        callMouseHandler('ContextMenu', event);
-    }
-    function mouseMove(event) {
-        if (!ref.current) {
-            return;
-        }
-        if (mouseIsDown) {
-            setMovedDuringLastMouseDown(true);
-        }
-        const rect = ref.current.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const offsetY = event.clientY - rect.top;
-        const px = region.reversed ? width - offsetX : offsetX;
-        const clientBp = region.start + bpPerPx * px;
-        const search = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
-        const item = search.length ? items[search[0]] : undefined;
-        const label = item
-            ? item.type === 'insertion'
-                ? `Insertion: ${item.seq}`
-                : item.type === 'deletion'
-                    ? `Deletion: ${item.seq}bp`
-                    : item.type === 'modification'
-                        ? item.seq
-                        : `Mismatch: ${item.seq}`
-            : undefined;
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY), label);
-    }
-    function callMouseHandler(handlerName, event) {
-        const featureHandler = props[`onFeature${handlerName}`];
-        const canvasHandler = props[`on${handlerName}`];
-        if (featureHandler && featureIdUnderMouse) {
-            featureHandler(event, featureIdUnderMouse);
-        }
-        else if (canvasHandler) {
-            canvasHandler(event, featureIdUnderMouse);
-        }
-    }
     const canvasWidth = Math.ceil(width);
+    const isClickable = itemUnderMouse || featureIdUnderMouse;
     return (_jsxs("div", { ref: ref, "data-testid": [
             'pileup-overlay',
-            sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type,
-            colorBy === null || colorBy === void 0 ? void 0 : colorBy.type,
-            colorBy === null || colorBy === void 0 ? void 0 : colorBy.tag,
-            (_a = filterBy === null || filterBy === void 0 ? void 0 : filterBy.tagFilter) === null || _a === void 0 ? void 0 : _a.tag,
+            sortedBy?.type,
+            colorBy?.type,
+            colorBy?.tag,
+            filterBy?.tagFilter?.tag,
         ]
             .filter(f => !!f)
-            .join('-'), style: { position: 'relative', width: canvasWidth, height }, onMouseDown: event => {
-            onMouseDown(event);
-        }, onMouseEnter: event => {
-            onMouseEnter(event);
-        }, onMouseOut: event => {
-            onMouseOut(event);
-        }, onMouseOver: event => {
-            onMouseOver(event);
-        }, onMouseUp: event => {
-            onMouseUp(event);
-        }, onMouseLeave: event => {
-            onMouseLeave(event);
+            .join('-'), style: {
+            position: 'relative',
+            width: canvasWidth,
+            height,
+            cursor: isClickable ? 'pointer' : 'default',
+        }, onMouseLeave: () => {
+            setItemUnderMouse(undefined);
+            setFeatureNameUnderMouse(undefined);
+            setMousePosition(undefined);
+            displayModel.setFeatureIdUnderMouse(undefined);
+        }, onMouseDown: (_event) => {
+            setMouseIsDown(true);
+            setMovedDuringLastMouseDown(false);
+        }, onMouseUp: () => {
+            setMouseIsDown(false);
         }, onMouseMove: event => {
-            mouseMove(event);
-        }, onClick: event => {
-            onClick(event);
+            if (!ref.current) {
+                return;
+            }
+            if (mouseIsDown) {
+                setMovedDuringLastMouseDown(true);
+            }
+            const rect = ref.current.getBoundingClientRect();
+            const offsetX = event.clientX - rect.left;
+            const offsetY = event.clientY - rect.top;
+            const px = region.reversed ? width - offsetX : offsetX;
+            const clientBp = region.start + bpPerPx * px;
+            const search = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1);
+            const item = search.length ? items[search[0]] : undefined;
+            setItemUnderMouse(item);
+            const featureId = displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY);
+            const featureName = featureId ? featureNames[featureId] : undefined;
+            setFeatureNameUnderMouse(featureName);
+            setMousePosition(item || featureName
+                ? {
+                    x: event.clientX,
+                    y: event.clientY,
+                }
+                : undefined);
+            displayModel.setFeatureIdUnderMouse(featureId);
+        }, onClick: () => {
+            if (!movedDuringLastMouseDown) {
+                if (itemUnderMouse) {
+                    const session = getSession(displayModel);
+                    const view = getContainingView(displayModel);
+                    const sourceRead = featureIdUnderMouse
+                        ? featureNames[featureIdUnderMouse]
+                        : undefined;
+                    const featureData = flatbushItemToFeatureData(itemUnderMouse, refName, sourceRead);
+                    if (isSessionModelWithWidgets(session)) {
+                        const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                            featureData,
+                            view,
+                            track: getContainingTrack(displayModel),
+                        });
+                        session.showWidget(featureWidget);
+                    }
+                }
+                else if (featureIdUnderMouse) {
+                    displayModel
+                        .selectFeatureById(featureIdUnderMouse)
+                        .catch((e) => {
+                        console.error(e);
+                        getSession(displayModel).notifyError(`${e}`, e);
+                    });
+                }
+            }
         }, onContextMenu: event => {
-            onContextMenu(event);
-        }, onFocus: () => { }, onBlur: () => { }, children: [_jsx(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }), firstRender && highlight ? (_jsx("div", { style: {
+            if (itemUnderMouse) {
+                event.preventDefault();
+                setContextMenuAnchor({
+                    mouseX: event.clientX,
+                    mouseY: event.clientY,
+                    item: itemUnderMouse,
+                });
+            }
+            else if (featureIdUnderMouse) {
+                displayModel
+                    .setContextMenuFeatureById(featureIdUnderMouse)
+                    .catch((e) => {
+                    console.error(e);
+                    getSession(displayModel).notifyError(`${e}`, e);
+                });
+            }
+            else {
+                displayModel.setContextMenuFeature(undefined);
+                displayModel.clearFeatureSelection();
+            }
+        }, children: [_jsx(PrerenderedCanvas, { ...props, style: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                } }), highlight ? (_jsx("div", { style: {
                     position: 'absolute',
                     backgroundColor: '#0003',
                     pointerEvents: 'none',
                     ...highlight,
-                } })) : null, firstRender && selected ? (_jsx("div", { style: {
+                } })) : null, selected ? (_jsx("div", { style: {
                     position: 'absolute',
                     border: '2px solid #00b8ff',
                     boxSizing: 'content-box',
                     pointerEvents: 'none',
                     ...selected,
-                } })) : null] }));
+                } })) : null, (itemUnderMouse || featureNameUnderMouse) &&
+                mousePosition &&
+                !contextMenuAnchor ? (_jsx(PileupTooltip, { item: itemUnderMouse, featureName: featureNameUnderMouse, refName: refName, mousePosition: mousePosition })) : null, _jsxs(Menu, { open: contextMenuAnchor !== null, onClose: () => {
+                    setContextMenuAnchor(null);
+                }, anchorReference: "anchorPosition", anchorPosition: contextMenuAnchor
+                    ? { top: contextMenuAnchor.mouseY, left: contextMenuAnchor.mouseX }
+                    : undefined, children: [_jsx(MenuItem, { onClick: () => {
+                            if (contextMenuAnchor) {
+                                const session = getSession(displayModel);
+                                const view = getContainingView(displayModel);
+                                const sourceRead = featureIdUnderMouse
+                                    ? featureNames[featureIdUnderMouse]
+                                    : undefined;
+                                const featureData = flatbushItemToFeatureData(contextMenuAnchor.item, refName, sourceRead);
+                                if (isSessionModelWithWidgets(session)) {
+                                    const featureWidget = session.addWidget('BaseFeatureWidget', 'baseFeature', {
+                                        featureData,
+                                        view,
+                                        track: getContainingTrack(displayModel),
+                                    });
+                                    session.showWidget(featureWidget);
+                                }
+                            }
+                            setContextMenuAnchor(null);
+                        }, children: "Show details" }), contextMenuAnchor?.item.type === 'mismatch' ? (_jsx(MenuItem, { onClick: () => {
+                            const { item } = contextMenuAnchor;
+                            displayModel.setSortedByAtPosition?.('Base pair', item.start, refName);
+                            setContextMenuAnchor(null);
+                        }, children: "Sort by base pair" })) : null] })] }));
 });
 export default PileupRendering;

package/esm/PileupRenderer/components/PileupTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { FlatbushItem } from '../types.ts';
+export default function PileupTooltip({ item, featureName, refName, mousePosition, }: {
+    item?: FlatbushItem;
+    featureName?: string;
+    refName: string;
+    mousePosition: {
+        x: number;
+        y: number;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/esm/PileupRenderer/components/PileupTooltip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { toLocale } from '@jbrowse/core/util';
+import { getFlatbushItemLabel } from "../types.js";
+export default function PileupTooltip({ item, featureName, refName, mousePosition, }) {
+    return (_jsx(BaseTooltip, { placement: "bottom-start", clientPoint: {
+            x: mousePosition.x,
+            y: mousePosition.y + 20,
+        }, children: _jsxs("div", { children: [_jsx("div", { children: featureName }), item ? (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                whiteSpace: 'pre-line',
+                            }, children: getFlatbushItemLabel(item) }), _jsxs("div", { children: ["Position: ", refName, ":", toLocale(item.start + 1)] })] })) : null] }) }));
+}

package/esm/PileupRenderer/components/util.d.ts

@@ -0,0 +1,7 @@
+import type { Region } from '@jbrowse/core/util';
+export declare function makeRect(r: [number, number, number, number] | [number, number, number, number, any], offset: number, region: Region, bpPerPx: number): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};

package/esm/PileupRenderer/components/util.js

@@ -0,0 +1,17 @@
+export function makeRect(r, offset, region, bpPerPx) {
+    const [leftBp, topPx, rightBp, bottomPx] = r;
+    const leftPx = region.reversed
+        ? (region.end - rightBp) / bpPerPx
+        : (leftBp - region.start) / bpPerPx;
+    const rightPx = region.reversed
+        ? (region.end - leftBp) / bpPerPx
+        : (rightBp - region.start) / bpPerPx;
+    const rectTop = Math.round(topPx);
+    const rectHeight = Math.round(bottomPx - topPx);
+    return {
+        left: leftPx - offset,
+        top: rectTop - offset,
+        width: rightPx - leftPx,
+        height: rectHeight,
+    };
+}

package/esm/PileupRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const PileupRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const PileupRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
     color: {
         type: string;
         description: string;
@@ -7,13 +7,13 @@ declare const PileupRenderer: import("@jbrowse/core/configuration/configurationS
     };
     orientationType: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
         description: string;
     };
     displayMode: {
         type: string;
-        model: import("mobx-state-tree").ISimpleType<string>;
+        model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
@@ -27,6 +27,16 @@ declare const PileupRenderer: import("@jbrowse/core/configuration/configurationS
         description: string;
         defaultValue: boolean;
     };
+    hideMismatches: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
+    hideLargeIndels: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
     maxHeight: {
         type: string;
         description: string;
@@ -58,5 +68,5 @@ declare const PileupRenderer: import("@jbrowse/core/configuration/configurationS
         defaultValue: boolean;
         description: string;
     };
-}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default PileupRenderer;

package/esm/PileupRenderer/configSchema.js

@@ -1,5 +1,5 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-import { types } from 'mobx-state-tree';
+import { types } from '@jbrowse/mobx-state-tree';
 function x() { }
 const PileupRenderer = ConfigurationSchema('PileupRenderer', {
     color: {
@@ -34,6 +34,16 @@ const PileupRenderer = ConfigurationSchema('PileupRenderer', {
         description: 'Hides small indels, sometimes occurring in long read sequencing',
         defaultValue: false,
     },
+    hideMismatches: {
+        type: 'boolean',
+        description: 'Hides SNP mismatches',
+        defaultValue: false,
+    },
+    hideLargeIndels: {
+        type: 'boolean',
+        description: 'Hides large indels (>=10bp)',
+        defaultValue: false,
+    },
     maxHeight: {
         type: 'integer',
         description: 'the maximum height to be used in a pileup rendering',

package/esm/PileupRenderer/index.js

@@ -1,12 +1,12 @@
-import PileupRenderer from './PileupRenderer';
-import ReactComponent from './components/PileupRendering';
-import configSchema from './configSchema';
+import { lazy } from 'react';
+import PileupRenderer from "./PileupRenderer.js";
+import configSchema from "./configSchema.js";
 export default function register(pluginManager) {
     pluginManager.addRendererType(() => {
         return new PileupRenderer({
             name: 'PileupRenderer',
             displayName: 'Pileup renderer',
-            ReactComponent,
+            ReactComponent: lazy(() => import("./components/PileupRendering.js")),
             configSchema,
             pluginManager,
         });

package/esm/PileupRenderer/layoutFeature.d.ts

@@ -1,18 +1,10 @@
-import type { Feature, Region } from '@jbrowse/core/util';
+import type { LayoutFeature } from './types.ts';
+import type { Feature } from '@jbrowse/core/util';
 import type { BaseLayout } from '@jbrowse/core/util/layouts';
-export interface LayoutRecord {
-    feature: Feature;
-    leftPx: number;
-    rightPx: number;
-    topPx: number;
-    heightPx: number;
-}
-export declare function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightPx, displayMode, }: {
+export declare function layoutFeature({ feature, layout, showSoftClip, heightPx, displayMode, }: {
     feature: Feature;
     layout: BaseLayout<Feature>;
-    bpPerPx: number;
-    region: Region;
     showSoftClip?: boolean;
     heightPx: number;
     displayMode: string;
-}): LayoutRecord | null;
+}): LayoutFeature | null;