@jbrowse/plugin-alignments 3.6.5 → 4.0.0

package/dist/PileupRPC/methods/GetReducedFeatures.js

@@ -1,54 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
-const util_1 = require("@jbrowse/core/util");
-const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
-const MismatchParser_1 = require("../../MismatchParser");
-const base_1 = __importDefault(require("../base"));
-const util_2 = require("../util");
-class PileupGetReducedFeatures extends base_1.default {
-    constructor() {
-        super(...arguments);
-        this.name = 'PileupGetReducedFeatures';
-    }
-    async execute(args, rpcDriver) {
-        const deserializedArgs = await this.deserializeArguments(args, rpcDriver);
-        const { adapterConfig, sessionId, regions } = deserializedArgs;
-        const dataAdapter = (await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
-        const featuresArray = await (0, rxjs_1.firstValueFrom)(dataAdapter
-            .getFeaturesInMultipleRegions(regions, deserializedArgs)
-            .pipe((0, operators_1.toArray)()));
-        const reduced = (0, util_1.dedupe)(featuresArray.map(f => {
-            var _a;
-            return ({
-                id: f.id(),
-                refName: f.get('refName'),
-                name: f.get('name'),
-                start: f.get('start'),
-                strand: f.get('strand'),
-                end: f.get('end'),
-                flags: f.get('flags'),
-                tlen: f.get('template_length'),
-                pair_orientation: f.get('pair_orientation'),
-                next_ref: f.get('next_ref'),
-                next_pos: f.get('next_pos'),
-                clipPos: (0, MismatchParser_1.getClip)(f.get('CIGAR'), f.get('strand')),
-                SA: (_a = f.get('tags')) === null || _a === void 0 ? void 0 : _a.SA,
-            });
-        }), f => f.id);
-        const filtered = (0, util_2.filterForPairs)(reduced);
-        const stats = filtered.length ? (0, util_2.getInsertSizeStats)(filtered) : undefined;
-        const chains = (0, util_1.groupBy)(reduced, f => f.name);
-        return {
-            chains: Object.values(chains),
-            stats,
-            hasPaired: !!stats,
-            containsNoTransferables: true,
-        };
-    }
-}
-exports.default = PileupGetReducedFeatures;

package/dist/PileupRPC/methods/GetVisibleModifications.d.ts

@@ -1,14 +0,0 @@
-import PileupBaseRPC from '../base';
-import type { ModificationType } from '../../shared/types';
-import type { Region } from '@jbrowse/core/util';
-export default class PileupGetVisibleModifications extends PileupBaseRPC {
-    name: string;
-    execute(args: {
-        adapterConfig: Record<string, unknown>;
-        stopToken?: string;
-        headers?: Record<string, string>;
-        regions: Region[];
-        sessionId: string;
-        tag: string;
-    }, rpcDriver: string): Promise<ModificationType[]>;
-}

package/dist/PileupRPC/methods/GetVisibleModifications.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
-const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
-const getModTypes_1 = require("../../ModificationParser/getModTypes");
-const util_1 = require("../../util");
-const base_1 = __importDefault(require("../base"));
-class PileupGetVisibleModifications extends base_1.default {
-    constructor() {
-        super(...arguments);
-        this.name = 'PileupGetVisibleModifications';
-    }
-    async execute(args, rpcDriver) {
-        const deserializeArguments = await this.deserializeArguments(args, rpcDriver);
-        const { adapterConfig, sessionId, regions } = deserializeArguments;
-        const dataAdapter = (await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
-        const featuresArray = await (0, rxjs_1.firstValueFrom)(dataAdapter
-            .getFeaturesInMultipleRegions(regions, deserializeArguments)
-            .pipe((0, operators_1.toArray)()));
-        const uniqueModifications = new Map();
-        for (const feat of featuresArray) {
-            const mmTag = (0, util_1.getTagAlt)(feat, 'MM', 'Mm');
-            for (const mod of (0, getModTypes_1.getModTypes)(typeof mmTag === 'string' ? mmTag : '')) {
-                if (!uniqueModifications.has(mod.type)) {
-                    uniqueModifications.set(mod.type, mod);
-                }
-            }
-        }
-        return [...uniqueModifications.values()];
-    }
-}
-exports.default = PileupGetVisibleModifications;

package/dist/PileupRPC/rpcMethods.d.ts

@@ -1,3 +0,0 @@
-export { default as PileupGetReducedFeatures } from './methods/GetReducedFeatures';
-export { default as PileupGetVisibleModifications } from './methods/GetVisibleModifications';
-export { default as PileupGetGlobalValueForTag } from './methods/GetGlobalValueForTag';

package/dist/PileupRPC/rpcMethods.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PileupGetGlobalValueForTag = exports.PileupGetVisibleModifications = exports.PileupGetReducedFeatures = void 0;
-var GetReducedFeatures_1 = require("./methods/GetReducedFeatures");
-Object.defineProperty(exports, "PileupGetReducedFeatures", { enumerable: true, get: function () { return __importDefault(GetReducedFeatures_1).default; } });
-var GetVisibleModifications_1 = require("./methods/GetVisibleModifications");
-Object.defineProperty(exports, "PileupGetVisibleModifications", { enumerable: true, get: function () { return __importDefault(GetVisibleModifications_1).default; } });
-var GetGlobalValueForTag_1 = require("./methods/GetGlobalValueForTag");
-Object.defineProperty(exports, "PileupGetGlobalValueForTag", { enumerable: true, get: function () { return __importDefault(GetGlobalValueForTag_1).default; } });

package/dist/PileupRPC/util.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInsertSizeStats = getInsertSizeStats;
-exports.filterForPairs = filterForPairs;
-function getInsertSizeStats(features) {
-    const filtered = features.map(f => Math.abs(f.tlen));
-    const sum = filtered.reduce((a, b) => a + b, 0);
-    const sum2 = filtered.map(a => a * a).reduce((a, b) => a + b, 0);
-    const total = filtered.length;
-    const avg = sum / total;
-    const sd = Math.sqrt((total * sum2 - sum * sum) / (total * total));
-    const upper = avg + 4 * sd;
-    const lower = avg - 3 * sd;
-    return { upper, lower, avg, sd };
-}
-function filterForPairs(features) {
-    return features.filter(f => f.flags & 2 && !(f.flags & 256) && !(f.flags & 2048));
-}

package/dist/PileupRenderer/PileupLayoutSession.d.ts

@@ -1,23 +0,0 @@
-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';
-export interface PileupLayoutSessionProps extends LayoutSessionProps {
-    filterBy: FilterBy;
-    sortedBy: SortedBy;
-    showSoftClip: boolean;
-}
-type MyMultiLayout = MultiLayout<GranularRectLayout<unknown>, unknown>;
-interface CachedPileupLayout extends CachedLayout {
-    props: PileupLayoutSessionProps;
-}
-export declare class PileupLayoutSession extends LayoutSession {
-    props: PileupLayoutSessionProps;
-    cachedLayout: CachedPileupLayout | undefined;
-    constructor(props: PileupLayoutSessionProps);
-    update(props: PileupLayoutSessionProps): this;
-    cachedLayoutIsValid(cachedLayout: CachedPileupLayout): boolean;
-    get layout(): MyMultiLayout;
-}
-export {};

package/dist/PileupRenderer/PileupLayoutSession.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PileupLayoutSession = void 0;
-const LayoutSession_1 = require("@jbrowse/core/pluggableElementTypes/renderers/LayoutSession");
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-class PileupLayoutSession extends LayoutSession_1.LayoutSession {
-    constructor(props) {
-        super(props);
-        this.props = props;
-    }
-    update(props) {
-        super.update(props);
-        this.props = props;
-        return this;
-    }
-    cachedLayoutIsValid(cachedLayout) {
-        return (super.cachedLayoutIsValid(cachedLayout) &&
-            this.props.showSoftClip === cachedLayout.props.showSoftClip &&
-            (0, fast_deep_equal_1.default)(this.props.sortedBy, cachedLayout.props.sortedBy) &&
-            (0, fast_deep_equal_1.default)(this.props.filterBy, cachedLayout.props.filterBy));
-    }
-    get layout() {
-        if (!this.cachedLayout || !this.cachedLayoutIsValid(this.cachedLayout)) {
-            this.cachedLayout = {
-                layout: this.makeLayout(),
-                props: this.props,
-            };
-        }
-        return this.cachedLayout.layout;
-    }
-}
-exports.PileupLayoutSession = PileupLayoutSession;

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -1,48 +0,0 @@
-import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { PileupLayoutSession } from './PileupLayoutSession';
-import type { PileupLayoutSessionProps } from './PileupLayoutSession';
-import type { RenderArgsDeserialized } from './types';
-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;
-    }>;
-    createLayoutSession(args: PileupLayoutSessionProps): PileupLayoutSession;
-}
-export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/dist/PileupRenderer/PileupRenderer.js

@@ -1,129 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const configuration_1 = require("@jbrowse/core/configuration");
-const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
-const BoxRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
-const util_1 = require("@jbrowse/core/util");
-const PileupLayoutSession_1 = require("./PileupLayoutSession");
-const util_2 = require("../util");
-const layoutFeatures_1 = require("./layoutFeatures");
-class PileupRenderer extends BoxRendererType_1.default {
-    constructor() {
-        super(...arguments);
-        this.supportsSVG = true;
-    }
-    async fetchSequence(renderProps, region) {
-        const { sessionId, adapterConfig } = renderProps;
-        const { sequenceAdapter } = adapterConfig;
-        if (!sequenceAdapter) {
-            return undefined;
-        }
-        const { dataAdapter } = await (0, dataAdapterCache_1.getAdapter)(this.pluginManager, sessionId, sequenceAdapter);
-        return (0, util_2.fetchSequence)({
-            ...region,
-            start: Math.max(0, region.start - 1),
-            end: region.end + 1,
-        }, dataAdapter);
-    }
-    getExpandedRegion(region, renderArgs) {
-        const { config, showSoftClip } = renderArgs;
-        const { start, end } = region;
-        const maxClippingSize = (0, configuration_1.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),
-        };
-    }
-    async render(renderProps) {
-        const features = await this.getFeatures(renderProps);
-        const layout = this.createLayoutInWorker(renderProps);
-        const { statusCallback = () => { }, colorBy, regions, bpPerPx } = renderProps;
-        const region = regions[0];
-        const width = (region.end - region.start) / bpPerPx;
-        const { layoutRecords, height } = await (0, util_1.updateStatus)('Creating layout', statusCallback, () => (0, layoutFeatures_1.layoutFeats)({
-            ...renderProps,
-            features,
-            layout,
-        }));
-        const res = await (0, util_1.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 Promise.resolve().then(() => __importStar(require('./makeImageData')));
-            return (0, util_1.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,
-            width,
-        });
-        return {
-            ...results,
-            ...res,
-            features: new Map(),
-            layout,
-            height,
-            width,
-            maxHeightReached: layout.maxHeightReached,
-            containsNoTransferables: true,
-        };
-    }
-    createLayoutSession(args) {
-        return new PileupLayoutSession_1.PileupLayoutSession(args);
-    }
-}
-exports.default = PileupRenderer;

package/dist/PileupRenderer/colorBy.d.ts

@@ -1,7 +0,0 @@
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { Feature } from '@jbrowse/core/util';
-export declare function colorByInsertSize(feature: Feature): string;
-export declare function colorByMappingQuality(feature: Feature): string;
-export declare function colorByStrand(feature: Feature): "#EC8B8B" | "#8F8FD8";
-export declare function colorByOrientation(feature: Feature, config: AnyConfigurationModel): string;
-export declare function colorByStrandedRnaSeq(feature: Feature): string;

package/dist/PileupRenderer/colorBy.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorByInsertSize = colorByInsertSize;
-exports.colorByMappingQuality = colorByMappingQuality;
-exports.colorByStrand = colorByStrand;
-exports.colorByOrientation = colorByOrientation;
-exports.colorByStrandedRnaSeq = colorByStrandedRnaSeq;
-const configuration_1 = require("@jbrowse/core/configuration");
-const color_1 = require("../shared/color");
-const util_1 = require("../util");
-function colorByInsertSize(feature) {
-    return feature.get('is_paired') &&
-        feature.get('refName') !== feature.get('next_ref')
-        ? '#555'
-        : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`;
-}
-function colorByMappingQuality(feature) {
-    return `hsl(${feature.get('score')},50%,50%)`;
-}
-function getOrientation(feature, config) {
-    const orientationType = (0, configuration_1.readConfObject)(config, 'orientationType');
-    const type = util_1.orientationTypes[orientationType];
-    const orientation = type[feature.get('pair_orientation')];
-    return {
-        LR: 'color_pair_lr',
-        RR: 'color_pair_rr',
-        RL: 'color_pair_rl',
-        LL: 'color_pair_ll',
-    }[orientation];
-}
-function colorByStrand(feature) {
-    return feature.get('strand') === -1 ? '#8F8FD8' : '#EC8B8B';
-}
-function colorByOrientation(feature, config) {
-    return color_1.fillColor[getOrientation(feature, config) || 'color_nostrand'];
-}
-function getStranded(feature) {
-    const flags = feature.get('flags');
-    const strand = feature.get('strand');
-    if (flags & 1) {
-        const flipper = flags & 64 ? -1 : 1;
-        if (flags & 2) {
-            return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand';
-        }
-        if (flags & 8) {
-            return strand * flipper === 1
-                ? 'color_rev_missing_mate'
-                : 'color_fwd_missing_mate';
-        }
-        if (feature.get('refName') === feature.get('next_ref')) {
-            return strand * flipper === 1
-                ? 'color_rev_strand_not_proper'
-                : 'color_fwd_strand_not_proper';
-        }
-        return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr';
-    }
-    return 'color_unknown';
-}
-function colorByStrandedRnaSeq(feature) {
-    return color_1.fillColor[getStranded(feature)];
-}

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

@@ -1,26 +0,0 @@
-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;
-    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;
-}) => import("react/jsx-runtime").JSX.Element;
-export default PileupRendering;

package/dist/PileupRenderer/components/PileupRendering.js

@@ -1,136 +0,0 @@
-"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 util_1 = require("@jbrowse/core/util");
-const mobx_react_1 = require("mobx-react");
-const PileupRendering = (0, mobx_react_1.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] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setFirstRender(true);
-    }, []);
-    const region = regions[0];
-    const ref = (0, react_1.useRef)(null);
-    const [mouseIsDown, setMouseIsDown] = (0, react_1.useState)(false);
-    const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] = (0, react_1.useState)(false);
-    const selectedRect = selectedFeatureId
-        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, selectedFeatureId)
-        : undefined;
-    const highlightedFeature = featureIdUnderMouse || (contextMenuFeature === null || contextMenuFeature === void 0 ? void 0 : contextMenuFeature.id());
-    const highlightedRect = highlightedFeature
-        ? displayModel === null || displayModel === void 0 ? void 0 : displayModel.getFeatureByID(blockKey, highlightedFeature)
-        : undefined;
-    function makeRect(r, offset = 2) {
-        const [leftBp, topPx, rightBp, bottomPx] = r;
-        const [leftPx, rightPx] = (0, util_1.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);
-    return ((0, jsx_runtime_1.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,
-        ]
-            .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);
-        }, onMouseMove: event => {
-            mouseMove(event);
-        }, onClick: event => {
-            onClick(event);
-        }, onContextMenu: event => {
-            onContextMenu(event);
-        }, onFocus: () => { }, onBlur: () => { }, children: [(0, jsx_runtime_1.jsx)(ui_1.PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }), firstRender && highlight ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    backgroundColor: '#0003',
-                    pointerEvents: 'none',
-                    ...highlight,
-                } })) : null, firstRender && selected ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'absolute',
-                    border: '2px solid #00b8ff',
-                    boxSizing: 'content-box',
-                    pointerEvents: 'none',
-                    ...selected,
-                } })) : null] }));
-});
-exports.default = PileupRendering;