@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/esm/PileupRenderer/PileupLayoutSession.d.ts

@@ -1,22 +1,22 @@
-import { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/LayoutSession';
-import type { FilterBy, SortedBy } from '../shared/types';
-import type { CachedLayout, LayoutSessionProps } from '@jbrowse/core/pluggableElementTypes/renderers/LayoutSession';
-import type GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout';
-import type MultiLayout from '@jbrowse/core/util/layouts/MultiLayout';
+import { MultiLayout, PileupLayout } from '@jbrowse/core/util/layouts';
+import type { FilterBy, SortedBy } from '../shared/types.ts';
+import type { LayoutSessionLike, LayoutSessionProps } from '@jbrowse/core/pluggableElementTypes/renderers/LayoutSession';
 export interface PileupLayoutSessionProps extends LayoutSessionProps {
     filterBy: FilterBy;
     sortedBy: SortedBy;
     showSoftClip: boolean;
 }
-type MyMultiLayout = MultiLayout<GranularRectLayout<unknown>, unknown>;
-interface CachedPileupLayout extends CachedLayout {
+type MyMultiLayout = MultiLayout<PileupLayout<unknown>, unknown>;
+interface CachedPileupLayout {
+    layout: MyMultiLayout;
     props: PileupLayoutSessionProps;
 }
-export declare class PileupLayoutSession extends LayoutSession {
+export declare class PileupLayoutSession implements LayoutSessionLike {
     props: PileupLayoutSessionProps;
     cachedLayout: CachedPileupLayout | undefined;
     constructor(props: PileupLayoutSessionProps);
-    update(props: PileupLayoutSessionProps): this;
+    update(props: LayoutSessionProps): this;
+    makeLayout(): MultiLayout<PileupLayout<unknown>, unknown>;
     cachedLayoutIsValid(cachedLayout: CachedPileupLayout): boolean;
     get layout(): MyMultiLayout;
 }

package/esm/PileupRenderer/PileupLayoutSession.js

@@ -1,17 +1,30 @@
-import { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/LayoutSession';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { MultiLayout, PileupLayout } from '@jbrowse/core/util/layouts';
 import deepEqual from 'fast-deep-equal';
-export class PileupLayoutSession extends LayoutSession {
+export class PileupLayoutSession {
+    props;
+    cachedLayout;
     constructor(props) {
-        super(props);
         this.props = props;
     }
     update(props) {
-        super.update(props);
         this.props = props;
         return this;
     }
+    makeLayout() {
+        const noSpacing = readConfObject(this.props.config, 'noSpacing');
+        const featureHeight = readConfObject(this.props.config, 'height');
+        const maxHeight = readConfObject(this.props.config, 'maxHeight');
+        return new MultiLayout(PileupLayout, {
+            featureHeight,
+            spacing: noSpacing ? 0 : 2,
+            maxHeight,
+        });
+    }
     cachedLayoutIsValid(cachedLayout) {
-        return (super.cachedLayoutIsValid(cachedLayout) &&
+        return (cachedLayout.props.bpPerPx === this.props.bpPerPx &&
+            deepEqual(readConfObject(this.props.config), readConfObject(cachedLayout.props.config)) &&
+            deepEqual(this.props.filters, cachedLayout.props.filters) &&
             this.props.showSoftClip === cachedLayout.props.showSoftClip &&
             deepEqual(this.props.sortedBy, cachedLayout.props.sortedBy) &&
             deepEqual(this.props.filterBy, cachedLayout.props.filterBy));

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -1,48 +1,11 @@
 import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { PileupLayoutSession } from './PileupLayoutSession';
-import type { PileupLayoutSessionProps } from './PileupLayoutSession';
-import type { RenderArgsDeserialized } from './types';
+import { PileupLayoutSession } from './PileupLayoutSession.ts';
+import type { PileupLayoutSessionProps } from './PileupLayoutSession.ts';
+import type { RenderArgsDeserialized } from './types.ts';
 import type { Region } from '@jbrowse/core/util';
 export default class PileupRenderer extends BoxRendererType {
     supportsSVG: boolean;
-    fetchSequence(renderProps: RenderArgsDeserialized, region: Region): Promise<any>;
-    getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): {
-        start: number;
-        end: number;
-        refName: string;
-        reversed?: boolean | undefined;
-        assemblyName: string;
-    };
-    render(renderProps: RenderArgsDeserialized): Promise<{
-        features: Map<any, any>;
-        layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
-        height: number;
-        width: number;
-        maxHeightReached: boolean;
-        containsNoTransferables: boolean;
-        canvasRecordedData: Record<string, unknown>;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        features: Map<any, any>;
-        layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
-        height: number;
-        width: number;
-        maxHeightReached: boolean;
-        containsNoTransferables: boolean;
-        imageData: any;
-        reactElement?: React.ReactElement;
-        html?: string;
-    } | {
-        features: Map<any, any>;
-        layout: import("@jbrowse/core/util/layouts").GranularRectLayout<unknown>;
-        height: number;
-        width: number;
-        maxHeightReached: boolean;
-        containsNoTransferables: boolean;
-        reactElement: React.ReactElement;
-        html?: string;
-    }>;
+    getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): Region;
+    render(renderProps: RenderArgsDeserialized): Promise<import("librpc-web-mod").RpcResult>;
     createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
 }
-export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/esm/PileupRenderer/PileupRenderer.js

@@ -1,88 +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,
-                    },
-                });
-                return undefined;
-            });
-        });
-        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,26 +1,19 @@
+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[];
     bpPerPx: number;
-    sortedBy?: {
-        type: string;
-        pos: number;
-        refName: string;
-    };
-    colorBy?: {
-        type: string;
-        tag?: string;
-    };
-    filterBy?: {
-        tagFilter?: {
-            tag: string;
-        };
-    };
-    onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
+    sortedBy?: SortedBy;
+    colorBy?: ColorBy;
+    filterBy?: FilterBy;
+    items: FlatbushItem[];
+    flatbush: ArrayBufferLike;
+    featureNames?: Record<string, string>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;

package/esm/PileupRenderer/components/PileupRendering.js

@@ -1,134 +1,181 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, 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, } = props;
-    const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel || {};
-    const [firstRender, setFirstRender] = useState(false);
-    useEffect(() => {
-        setFirstRender(true);
-    }, []);
+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 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;
-        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event, displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY));
-    }
-    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,
+    };
+}