@jbrowse/plugin-alignments 2.6.3 → 2.7.0

package/esm/LinearSNPCoverageDisplay/models/model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import PluginManager from '@jbrowse/core/PluginManager';
-import { AnyConfigurationSchemaType, AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
 /**
  * #stateModel LinearSNPCoverageDisplay
  * extends `LinearWiggleDisplay`
@@ -19,11 +19,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         key: import("mobx-state-tree").ISimpleType<string>;
         region: import("mobx-state-tree").IModelType<{
             refName: import("mobx-state-tree").ISimpleType<string>;
-            start: import("mobx-state-tree").ISimpleType<number>;
-            end: import("mobx-state-tree").ISimpleType<number>;
-            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>; /**
+            start: import("mobx-state-tree").ISimpleType<number>; /**
              * #property
              */
+            end: import("mobx-state-tree").ISimpleType<number>;
+            reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
         } & {
             assemblyName: import("mobx-state-tree").ISimpleType<string>;
         }, {
@@ -37,19 +37,16 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
-        layout: any;
+        layout: any; /**
+         * #property
+         */
         status: string;
         error: unknown;
         message: string | undefined;
         maxHeightReached: boolean;
         ReactComponent: ({ model, }: {
-            /**
-             * #property
-             */
             model: any;
-        }) => any; /**
-         * #property
-         */
+        }) => any;
         renderProps: any;
     } & {
         doReload(): void;
@@ -88,7 +85,9 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             type: string;
             description: string;
             defaultValue: string;
-            contextVariable: string[];
+            contextVariable: string[]; /**
+             * #property
+             */
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
 } & {
@@ -98,19 +97,11 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     minSize: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     color: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     posColor: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-    negColor: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-     * #property
-     */
-    summaryScoreMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-     * #property
-     */
+    negColor: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    summaryScoreMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     rendererTypeNameState: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-    scale: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-     * #property
-     */
-    autoscale: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>; /**
-     * #property
-     */
+    scale: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    autoscale: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     displayCrossHatches: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     constraints: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IModelType<{
         max: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
@@ -155,406 +146,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         type: import("mobx-state-tree").ISimpleType<string>;
         tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-}, {
-    rendererTypeName: string;
-    error: unknown;
-    message: string | undefined;
-} & {
-    readonly RenderingComponent: import("react").FC<{
-        model: {
-            id: string;
-            type: string;
-            rpcDriverName: string | undefined;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string;
-            error: unknown;
-            message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        }, {
-            rendererTypeName: string;
-            error: unknown;
-            message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function | undefined;
-        blockState?: Record<string, any> | undefined;
-    }>;
-    readonly DisplayBlurb: import("react").FC<{
-        model: {
-            id: string;
-            type: string;
-            rpcDriverName: string | undefined;
-        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            rendererTypeName: string;
-            error: unknown;
-            message: string | undefined;
-        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-            type: import("mobx-state-tree").ISimpleType<string>;
-            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-        }, {
-            rendererTypeName: string;
-            error: unknown;
-            message: string | undefined;
-        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    }> | null;
-    readonly adapterConfig: any; /**
-     * #getter
-     */
-    readonly parentTrack: any;
-    renderProps(): any;
-    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-    regionCannotBeRendered(): null;
-} & {
-    setMessage(arg?: string | undefined): void;
-    setError(error?: unknown): void;
-    setRpcDriverName(rpcDriverName: string): void;
-    reload(): void;
-} & {
-    scrollTop: number;
-} & {
-    readonly height: number;
-} & {
-    setScrollTop(scrollTop: number): void;
-    setHeight(displayHeight: number): number;
-    resizeHeight(distance: number): number;
-} & {
-    featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
-    featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
-    currStatsBpPerPx: number;
-} & {
-    readonly currentBytesRequested: number;
-    readonly currentFeatureScreenDensity: number;
-    readonly maxFeatureScreenDensity: any;
-    readonly featureDensityStatsReady: boolean;
-    readonly maxAllowableBytes: number;
-} & {
-    afterAttach(): void;
-} & {
-    setCurrStatsBpPerPx(n: number): void;
-    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
-    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
-    setFeatureDensityStatsP(arg: any): void;
-    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
-    clearFeatureDensityStats(): void;
-} & {
-    readonly regionTooLarge: boolean;
-    readonly regionTooLargeReason: string;
-} & {
-    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
-} & {
-    featureIdUnderMouse: string | undefined;
-    contextMenuFeature: import("@jbrowse/core/util").Feature | undefined;
-} & {
-    readonly blockType: "dynamicBlocks" | "staticBlocks";
-    readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
-} & {
-    readonly renderDelay: number;
-    readonly TooltipComponent: import("react").FC<any>;
-    readonly selectedFeatureId: string | undefined;
-    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
-} & {
-    readonly features: import("@jbrowse/core/util/compositeMap").default<string, import("@jbrowse/core/util").Feature>;
-    readonly featureUnderMouse: import("@jbrowse/core/util").Feature | undefined;
-    getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
-    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
-    searchFeatureByID(id: string): [number, number, number, number] | undefined;
-} & {
-    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
-    deleteBlock(key: string): void;
-    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
-    clearFeatureSelection(): void;
-    setFeatureIdUnderMouse(feature?: string | undefined): void;
-    setContextMenuFeature(feature?: import("@jbrowse/core/util").Feature | undefined): void;
-} & {
-    reload(): Promise<void>;
-} & {
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
-    renderProps(): any;
-} & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
-    afterAttach(): void;
-} & {
-    message: string | undefined;
-    stats: {
-        scoreMin: number;
-        scoreMax: number;
-    } | undefined;
-    statsFetchInProgress: AbortController | undefined;
-} & {
-    updateQuantitativeStats(stats: {
-        scoreMin: number;
-        scoreMax: number;
-    }): void;
-    setColor(color?: string | undefined): void;
-    setPosColor(color?: string | undefined): void;
-    setNegColor(color?: string | undefined): void;
-    setLoading(aborter: AbortController): void;
-    selectFeature(feature: import("@jbrowse/core/util").Feature): void;
-    setResolution(res: number): void;
-    setFill(fill: number): void;
-    toggleLogScale(): void;
-    setScaleType(scale?: string | undefined): void;
-    setSummaryScoreMode(val: string): void;
-    setAutoscale(val: string): void;
-    setMaxScore(val?: number | undefined): void;
-    setRendererType(val: string): void;
-    setMinScore(val?: number | undefined): void;
-    toggleCrossHatches(): void;
-    setCrossHatches(cross: boolean): void;
-} & {
-    readonly adapterTypeName: any;
-    readonly rendererTypeNameSimple: any;
-    readonly filters: undefined;
-    readonly scaleType: any;
-    readonly maxScore: any;
-    readonly minScore: any;
-} & {
-    readonly adapterCapabilities: string[];
-    readonly rendererConfig: {
-        [x: string]: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
-    } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-    readonly autoscaleType: any;
-} & {
-    readonly domain: number[] | undefined;
-} & {
-    readonly filled: boolean;
-    readonly summaryScoreModeSetting: string;
-    readonly scaleOpts: {
-        domain: number[] | undefined;
-        stats: {
-            scoreMin: number;
-            scoreMax: number;
-        } | undefined;
-        autoscaleType: any;
-        scaleType: any;
-        inverted: any;
-    };
-    readonly canHaveFill: boolean;
-    readonly displayCrossHatchesSetting: boolean;
-    readonly hasResolution: boolean;
-    readonly hasGlobalStats: boolean;
-} & {
-    scoreTrackMenuItems(): ({
-        label: string;
-        subMenu: {
-            label: string;
-            onClick: () => void;
-        }[];
-        onClick?: undefined;
-    } | {
-        label: string;
-        subMenu: {
-            label: string;
-            type: string;
-            checked: boolean;
-            onClick: () => void;
-        }[];
-        onClick?: undefined;
-    } | {
-        label: string;
-        onClick: () => void;
-        subMenu?: undefined;
-    })[];
-} & {
-    reload(): Promise<void>;
-} & {
-    readonly TooltipComponent: import("react").FC<{}>;
-    readonly rendererTypeName: string; /**
-     * #property
-     */
-} & {
-    readonly ticks: {
-        range: number[];
-        values: number[];
-        format: (d: import("d3-scale").NumberValue) => string;
-        position: import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleQuantize<number, never>;
-    } | undefined;
-} & {
-    renderProps(): any;
-    readonly needsScalebar: boolean;
-    readonly fillSetting: 0 | 1 | 2;
-} & {
-    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        label: string;
-        subMenu: ({
-            label: string;
-            subMenu: {
-                label: string;
-                onClick: () => void;
-            }[];
-            onClick?: undefined;
-        } | {
-            label: string;
-            subMenu: {
-                label: string;
-                type: string;
-                checked: boolean;
-                onClick: () => void;
-            }[];
-            onClick?: undefined;
-        } | {
-            label: string;
-            onClick: () => void;
-            subMenu?: undefined;
-        })[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-    } | {
-        label: string;
-        subMenu: {
-            label: string;
-            type: string;
-            checked: boolean; /**
-             * #getter
-             */
-            onClick: () => void;
-        }[];
-        type?: undefined;
-        checked?: undefined;
-        onClick?: undefined;
-    } | {
-        type: string;
-        label: string;
-        checked: boolean;
-        onClick: () => void;
-        subMenu?: undefined;
-    })[];
-} & {
-    afterAttach(): void;
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
-} & {
-    modificationTagMap: import("mobx").ObservableMap<string, string>;
-    modificationsReady: boolean;
-} & {
-    /**
-     * #action
-     */
-    setConfig(configuration: AnyConfigurationModel): void;
     /**
-     * #action
-     */
-    setFilterBy(filter: {
-        flagInclude: number;
-        flagExclude: number;
-        readName?: string;
-        tagFilter?: {
-            tag: string;
-            value: string;
-        };
-    }): void;
-    /**
-     * #action
-     */
-    setColorBy(colorBy?: {
-        type: string;
-        tag?: string;
-    }): void;
-    /**
-     * #action
-     */
-    updateModificationColorMap(uniqueModifications: string[]): void;
-} & {
-    /**
-     * #getter
-     */
-    readonly rendererConfig: {
-        [x: string]: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
-    } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
-    /**
-     * #getter
-     */
-    readonly drawArcsSetting: any;
-    /**
-     * #getter
-     */
-    readonly drawInterbaseCountsSetting: any;
-    /**
-     * #getter
-     */
-    readonly drawIndicatorsSetting: any;
-    /**
-     * #getter
-     */
-    readonly autorunReady: boolean;
-    readonly renderReady: boolean;
-    readonly ready: boolean;
-    /**
-     * #method
-     */
-    renderProps(): any;
-} & {
-    /**
-     * #action
-     */
-    setModificationsReady(flag: boolean): void;
-    /**
-     * #action
-     */
-    toggleDrawIndicators(): void;
-    /**
-     * #action
-     */
-    toggleDrawInterbaseCounts(): void;
-    /**
-     * #action
-     */
-    toggleDrawArcs(): void;
-} & {
-    afterAttach(): void;
-} & {
-    /**
-     * #getter
-     */
-    readonly TooltipComponent: (props: {
-        model: {
-            featureUnderMouse: import("@jbrowse/core/util").Feature;
-        };
-        height: number;
-        offsetMouseCoord: [number, number];
-        clientMouseCoord: [number, number];
-        clientRect?: DOMRect | undefined;
-    }) => import("react").JSX.Element | null;
-    /**
-     * #getter
-     */
-    readonly adapterConfig: {
-        type: string;
-        subadapter: any;
-    };
-    /**
-     * #getter
-     */
-    readonly rendererTypeName: string | undefined;
-    /**
-     * #getter
-     */
-    readonly needsScalebar: boolean;
-    /**
-     * #method
-     */
-    contextMenuItems(): never[];
-    /**
-     * #method
+     * #property
      */
-    trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        label: string;
-        type: string;
-        checked: any;
-        onClick: () => void;
-    })[];
-}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+    jexlFilters: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").ISimpleType<string>>, [undefined]>;
+}, never, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type SNPCoverageDisplayModel = ReturnType<typeof stateModelFactory>;
 export default stateModelFactory;

package/esm/LinearSNPCoverageDisplay/models/model.js

@@ -3,6 +3,7 @@ import { observable } from 'mobx';
 import { getConf, readConfObject, } from '@jbrowse/core/configuration';
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle';
 import { getContainingView } from '@jbrowse/core/util';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 // locals
 import Tooltip from '../components/Tooltip';
 import { FilterModel, getUniqueModificationValues } from '../../shared';
@@ -44,6 +45,10 @@ function stateModelFactory(pluginManager, configSchema) {
             type: types.string,
             tag: types.maybe(types.string),
         })),
+        /**
+         * #property
+         */
+        jexlFilters: types.optional(types.array(types.string), []),
     }))
         .volatile(() => ({
         modificationTagMap: observable.map({}),
@@ -68,6 +73,12 @@ function stateModelFactory(pluginManager, configSchema) {
         setColorBy(colorBy) {
             self.colorBy = cast(colorBy);
         },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = cast(filters);
+        },
         /**
          * #action
          */
@@ -142,6 +153,7 @@ function stateModelFactory(pluginManager, configSchema) {
                 return {
                     ...superProps,
                     notReady: !this.ready,
+                    filters: self.filters,
                     modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
                     // must use getSnapshot because otherwise changes to e.g. just the
                     // colorBy.type are not read
@@ -264,6 +276,12 @@ function stateModelFactory(pluginManager, configSchema) {
                     },
                 ];
             },
+            /**
+             * #getter
+             */
+            get filters() {
+                return new SerializableFilterChain({ filters: self.jexlFilters });
+            },
         };
     });
 }

package/esm/MismatchParser/index.js

@@ -146,8 +146,7 @@ export function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
     }
     // now actually parse the MD string
     const md = mdstring.match(mdRegex) || [];
-    for (let i = 0; i < md.length; i++) {
-        const token = md[i];
+    for (const token of md) {
         const num = +token;
         if (!Number.isNaN(num)) {
             curr.start += num;
@@ -157,6 +156,7 @@ export function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
         }
         else {
             // mismatch
+            // eslint-disable-next-line @typescript-eslint/prefer-for-of
             for (let j = 0; j < token.length; j += 1) {
                 curr.length = 1;
                 while (lastSkipPos < skips.length) {
@@ -264,8 +264,7 @@ export function getModificationPositions(mm, fseq, fstrand) {
     const seq = fstrand === -1 ? revcom(fseq) : fseq;
     const mods = mm.split(';').filter(mod => !!mod);
     const result = [];
-    for (let i = 0; i < mods.length; i++) {
-        const mod = mods[i];
+    for (const mod of mods) {
         const [basemod, ...skips] = mod.split(',');
         // regexes based on parse_mm.pl from hts-specs
         const matches = basemod.match(modificationRegex);
@@ -285,12 +284,11 @@ export function getModificationPositions(mm, fseq, fstrand) {
         // sequence of the read, if we have a modification type e.g. C+m;2 and a
         // sequence ACGTACGTAC we skip the two instances of C and go to the last
         // C
-        for (let j = 0; j < types.length; j++) {
-            const type = types[j];
+        for (const type of types) {
             let i = 0;
             const positions = [];
-            for (let k = 0; k < skips.length; k++) {
-                let delta = +skips[k];
+            for (const d of skips) {
+                let delta = +d;
                 do {
                     if (base === 'N' || base === seq[i]) {
                         delta--;

package/esm/PileupRenderer/PileupRenderer.js

@@ -53,7 +53,6 @@ export default class PileupRenderer extends BoxRendererType {
             : undefined;
         const width = (region.end - region.start) / bpPerPx;
         const height = Math.max(layout.getTotalHeight(), 1);
-        const Color = await import('color').then(f => f.default);
         const res = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
             ctx,
             layoutRecords: layoutRecords.filter(notEmpty),
@@ -63,7 +62,6 @@ export default class PileupRenderer extends BoxRendererType {
                 layout,
                 features,
                 regionSequence,
-                Color,
             },
         }));
         const results = await super.render({

package/esm/PileupRenderer/colorBy.js

@@ -8,7 +8,7 @@ export function colorByInsertSize(feature) {
         : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`;
 }
 export function colorByMappingQuality(feature) {
-    return `hsl(${feature.get('mq')},50%,50%)`;
+    return `hsl(${feature.get('score')},50%,50%)`;
 }
 function getOrientation(feature, config) {
     const orientationType = readConfObject(config, 'orientationType');

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
-declare function PileupRendering(props: {
+declare const PileupRendering: (props: {
     blockKey: string;
     displayModel: BaseLinearDisplayModel;
     width: number;
@@ -12,17 +12,16 @@ declare function PileupRendering(props: {
         type: string;
         pos: number;
         refName: string;
-    };
+    } | undefined;
     colorBy?: {
         type: string;
-        tag?: string;
-    };
+        tag?: string | undefined;
+    } | undefined;
     filterBy?: {
         tagFilter?: {
             tag: string;
-        };
-    };
-    onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
-}): React.JSX.Element;
-declare const _default: typeof PileupRendering;
-export default _default;
+        } | undefined;
+    } | undefined;
+    onMouseMove?: ((event: React.MouseEvent, featureId?: string) => void) | undefined;
+}) => React.JSX.Element;
+export default PileupRendering;

package/esm/PileupRenderer/components/PileupRendering.js

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 // used so that user can click-away-from-feature below the laid out features
 // (issue #1248)
 const canvasPadding = 100;
-function PileupRendering(props) {
+const PileupRendering = observer(function (props) {
     var _a;
     const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
     const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel;
@@ -108,10 +108,8 @@ function PileupRendering(props) {
     }
     function callMouseHandler(handlerName, event) {
         // @ts-expect-error
-        // eslint-disable-next-line react/destructuring-assignment
         const featureHandler = props[`onFeature${handlerName}`];
         // @ts-expect-error
-        // eslint-disable-next-line react/destructuring-assignment
         const canvasHandler = props[`on${handlerName}`];
         if (featureHandler && featureIdUnderMouse) {
             featureHandler(event, featureIdUnderMouse);
@@ -132,5 +130,5 @@ function PileupRendering(props) {
             .join('-')}`, style: { position: 'relative', width: canvasWidth, height } },
         React.createElement(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
         React.createElement("canvas", { "data-testid": "pileup_overlay_canvas", width: canvasWidth, height: height + canvasPadding, style: { position: 'absolute', left: 0, top: 0 }, className: "highlightOverlayCanvas", ref: highlightOverlayCanvas, 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: () => { } })));
-}
-export default observer(PileupRendering);
+});
+export default PileupRendering;