@jbrowse/plugin-alignments 2.17.0 → 3.0.0

package/dist/MismatchParser/index.js

@@ -11,8 +11,8 @@ exports.getLengthSansClipping = getLengthSansClipping;
 exports.getClip = getClip;
 exports.getTag = getTag;
 exports.featurizeSA = featurizeSA;
-const mdToMismatches_1 = require("./mdToMismatches");
 const cigarToMismatches_1 = require("./cigarToMismatches");
+const mdToMismatches_1 = require("./mdToMismatches");
 const cigarRegex = new RegExp(/([MIDNSHPX=])/);
 const startClip = new RegExp(/(\d+)[SH]$/);
 const endClip = new RegExp(/^(\d+)([SH])/);
@@ -22,11 +22,9 @@ function parseCigar(cigar = '') {
 function getMismatches(cigar, md, seq, ref, qual) {
     let mismatches = [];
     const ops = parseCigar(cigar);
-    // parse the CIGAR tag if it has one
     if (cigar) {
         mismatches = mismatches.concat((0, cigarToMismatches_1.cigarToMismatches)(ops, seq, ref, qual));
     }
-    // now let's look for CRAM or MD mismatches
     if (md && seq) {
         mismatches = mismatches.concat((0, mdToMismatches_1.mdToMismatches)(md, ops, mismatches, seq, qual));
     }
@@ -98,12 +96,6 @@ function getClip(cigar, strand) {
 function getTag(feature, tag) {
     return feature.get('tags')[tag];
 }
-// produces a list of "feature-like" object from parsing supplementary
-// alignments in the SA tag
-//
-// @param normalize - used specifically in the linear-read-vs-ref context, it
-// flips features around relative to the original feature. other contexts of
-// usage can keep this false
 function featurizeSA(SA, id, strand, readName, normalize) {
     return ((SA === null || SA === void 0 ? void 0 : SA.split(';').filter(aln => !!aln).map((aln, index) => {
         const ret = aln.split(',');

package/dist/MismatchParser/mdToMismatches.d.ts

@@ -1,3 +1,2 @@
-import { Mismatch } from '../shared/types';
-import { Buffer } from 'buffer';
-export declare function mdToMismatches(mdstring: string, ops: string[], cigarMismatches: Mismatch[], seq: string, qual?: Buffer | number[] | null): Mismatch[];
+import type { Mismatch } from '../shared/types';
+export declare function mdToMismatches(mdstring: string, ops: string[], cigarMismatches: Mismatch[], seq: string, qual?: Uint8Array): Mismatch[];

package/dist/MismatchParser/mdToMismatches.js

@@ -10,11 +10,8 @@ function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
     let lastSkipPos = 0;
     const mismatchRecords = [];
     const skips = cigarMismatches.filter(cigar => cigar.type === 'skip');
-    // convert a position on the reference sequence to a position on the template
-    // sequence, taking into account hard and soft clipping of reads
     function nextRecord() {
         mismatchRecords.push(curr);
-        // get a new mismatch record ready
         curr = {
             start: curr.start + curr.length,
             length: 0,
@@ -43,7 +40,6 @@ function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
         lastRefOffset = refOffset;
         return templateOffset - (refOffset - refCoord);
     }
-    // now actually parse the MD string
     const md = mdstring.match(mdRegex) || [];
     for (const token of md) {
         const num = +token;
@@ -54,8 +50,6 @@ function mdToMismatches(mdstring, ops, cigarMismatches, seq, qual) {
             curr.start += token.length - 1;
         }
         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) {

package/dist/ModificationParser/index.d.ts

@@ -1,4 +1,4 @@
-import { Feature } from '@jbrowse/core/util';
+import type { Feature } from '@jbrowse/core/util';
 export declare function getModProbabilities(feature: Feature): number[] | undefined;
 export declare function getModPositions(mm: string, fseq: string, fstrand: number): {
     type: string;

package/dist/ModificationParser/index.js

@@ -5,17 +5,9 @@ exports.getModPositions = getModPositions;
 exports.getModTypes = getModTypes;
 exports.getMethBins = getMethBins;
 const util_1 = require("@jbrowse/core/util");
-const util_2 = require("../util");
 const MismatchParser_1 = require("../MismatchParser");
+const util_2 = require("../util");
 const modificationRegex = new RegExp(/([A-Z])([-+])([^,.?]+)([.?])?/);
-// ML stores probabilities as array of numerics and MP is scaled phred scores
-// https://github.com/samtools/hts-specs/pull/418/files#diff-e765c6479316309f56b636f88189cdde8c40b854c7bdcce9ee7fe87a4e76febcR596
-//
-// if we have ML or Ml, it is an 8bit probability, divide by 255
-//
-// if we have MP or Mp it is phred scaled ASCII, which can go up to 90 but has
-// very high likelihood basecalls at that point, we really only care about low
-// qual calls <20 approx
 function getModProbabilities(feature) {
     var _a;
     const m = (0, util_2.getTagAlt)(feature, 'ML', 'Ml') || [];
@@ -29,15 +21,11 @@ function getModPositions(mm, fseq, fstrand) {
     const result = [];
     for (const mod of mods) {
         const [basemod, ...skips] = mod.split(',');
-        // regexes based on parse_mm.pl from hts-specs
-        // https://github.com/samtools/hts-specs/blob/master/test/SAMtags/parse_mm.pl
         const matches = modificationRegex.exec(basemod);
         if (!matches) {
             throw new Error('bad format for MM tag');
         }
         const [, base, strand, typestr] = matches;
-        // can be a multi e.g. C+mh for both meth (m) and hydroxymeth (h) so split,
-        // and they can also be chemical codes (ChEBI) e.g. C+16061
         const types = typestr.split(/(\d+|.)/).filter(f => !!f);
         if (strand === '-') {
             console.warn('unsupported negative strand modifications');
@@ -48,7 +36,6 @@ function getModPositions(mm, fseq, fstrand) {
                 strand: strand,
             });
         }
-        // this logic based on parse_mm.pl from hts-specs
         for (const type of types) {
             let i = 0;
             const positions = [];
@@ -63,8 +50,6 @@ function getModPositions(mm, fseq, fstrand) {
                 if (fstrand === -1) {
                     const pos = seq.length - i;
                     if (pos >= 0) {
-                        // avoid negative-number-positions in array, seen in #4629 cause
-                        // unknown, could warrant some further investigation
                         positions.unshift(pos);
                     }
                 }
@@ -93,8 +78,6 @@ function getModTypes(mm) {
             throw new Error('bad format for MM tag');
         }
         const [, base, strand, typestr] = matches;
-        // can be a multi e.g. C+mh for both meth (m) and hydroxymeth (h) so
-        // split, and they can also be chemical codes (ChEBI) e.g. C+16061
         return typestr
             .split(/(\d+|.)/)
             .filter(f => !!f)

package/dist/PileupRPC/base.d.ts

@@ -1,8 +1,8 @@
 import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
-import { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods';
+import type { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods';
 export default abstract class PileupBaseRPC extends RpcMethodType {
     serializeArguments(args: RenderArgs & {
-        signal?: AbortSignal;
+        stopToken?: string;
         statusCallback?: (arg: string) => void;
     }, rpcDriver: string): Promise<Record<string, unknown>>;
 }

package/dist/PileupRPC/base.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const RpcMethodType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/RpcMethodType"));
 const util_1 = require("@jbrowse/core/util");
-// specialized get features to return limited data about alignments
 class PileupBaseRPC extends RpcMethodType_1.default {
     async serializeArguments(args, rpcDriver) {
         var _a;

package/dist/PileupRPC/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function PileupRPCMethodsF(pm: PluginManager): void;

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

@@ -1,11 +1,10 @@
-import { Region } from '@jbrowse/core/util';
-import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
 import PileupBaseRPC from '../base';
+import type { Region } from '@jbrowse/core/util';
 export default class PileupGetGlobalValueForTag extends PileupBaseRPC {
     name: string;
     execute(args: {
         adapterConfig: Record<string, unknown>;
-        signal?: RemoteAbortSignal;
+        stopToken?: string;
         headers?: Record<string, string>;
         regions: Region[];
         sessionId: string;

package/dist/PileupRPC/methods/GetGlobalValueForTag.js

@@ -4,9 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
-const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
-// locals
+const operators_1 = require("rxjs/operators");
 const base_1 = __importDefault(require("../base"));
 class PileupGetGlobalValueForTag extends base_1.default {
     constructor() {

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

@@ -1,11 +1,10 @@
-import { Region } from '@jbrowse/core/util';
-import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
 import PileupBaseRPC from '../base';
+import type { Region } from '@jbrowse/core/util';
 export default class PileupGetReducedFeatures extends PileupBaseRPC {
     name: string;
     execute(args: {
         adapterConfig: Record<string, unknown>;
-        signal?: RemoteAbortSignal;
+        stopToken?: string;
         headers?: Record<string, string>;
         regions: Region[];
         sessionId: string;

package/dist/PileupRPC/methods/GetReducedFeatures.js

@@ -5,13 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
 const util_1 = require("@jbrowse/core/util");
-const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
-// locals
-const util_2 = require("../util");
-const base_1 = __importDefault(require("../base"));
+const operators_1 = require("rxjs/operators");
 const MismatchParser_1 = require("../../MismatchParser");
-// specialized get features to return limited data about alignments
+const base_1 = __importDefault(require("../base"));
+const util_2 = require("../util");
 class PileupGetReducedFeatures extends base_1.default {
     constructor() {
         super(...arguments);

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

@@ -1,12 +1,11 @@
-import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
-import { Region } from '@jbrowse/core/util';
-import { ModificationType } from '../../shared/types';
 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>;
-        signal?: RemoteAbortSignal;
+        stopToken?: string;
         headers?: Record<string, string>;
         regions: Region[];
         sessionId: string;

package/dist/PileupRPC/methods/GetVisibleModifications.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
-const operators_1 = require("rxjs/operators");
 const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
 const ModificationParser_1 = require("../../ModificationParser");
 const util_1 = require("../../util");
 const base_1 = __importDefault(require("../base"));

package/dist/PileupRPC/util.d.ts

@@ -1,4 +1,4 @@
-import { ReducedFeature } from '../shared/fetchChains';
+import type { ReducedFeature } from '../shared/fetchChains';
 export declare function getInsertSizeStats(features: ReducedFeature[]): {
     upper: number;
     lower: number;

package/dist/PileupRenderer/PileupLayoutSession.d.ts

@@ -1,9 +1,9 @@
 import { LayoutSession } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
-import GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout';
-import MultiLayout from '@jbrowse/core/util/layouts/MultiLayout';
-import { FilterBy, SortedBy } from '../shared/types';
+import type { FilterBy, SortedBy } from '../shared/types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+import type GranularRectLayout from '@jbrowse/core/util/layouts/GranularRectLayout';
+import type MultiLayout from '@jbrowse/core/util/layouts/MultiLayout';
 export interface PileupLayoutSessionProps {
     config: AnyConfigurationModel;
     bpPerPx: number;

package/dist/PileupRenderer/PileupLayoutSession.js

@@ -4,12 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PileupLayoutSession = void 0;
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
-const BoxRendererType_1 = require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType");
 const configuration_1 = require("@jbrowse/core/configuration");
-// The pileup layout session adds
-// - sorting and revealing soft clip changes the layout of pileup renderer
-// - extra conditions to see if cached layout is valid
+const BoxRendererType_1 = require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 class PileupLayoutSession extends BoxRendererType_1.LayoutSession {
     constructor(args) {
         super(args);

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -1,29 +1,16 @@
-import BoxRendererType, { RenderArgsDeserialized as BoxRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { Feature, Region } from '@jbrowse/core/util';
-import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout';
-import { PileupLayoutSession, PileupLayoutSessionProps } from './PileupLayoutSession';
-import { ColorBy, ModificationTypeWithColor, SortedBy } from '../shared/types';
-export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
-    colorBy?: ColorBy;
-    colorTagMap?: Record<string, string>;
-    visibleModifications?: Record<string, ModificationTypeWithColor>;
-    sortedBy?: SortedBy;
-    showSoftClip: boolean;
-    highResolutionScaling: number;
-}
-export interface RenderArgsDeserializedWithFeaturesAndLayout extends RenderArgsDeserialized {
-    features: Map<string, Feature>;
-    layout: BaseLayout<Feature>;
-    regionSequence?: string;
-}
+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): Promise<any>;
+    fetchSequence(renderProps: RenderArgsDeserialized, region: Region): Promise<any>;
     getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): {
         start: number;
         end: number;
-        reversed?: boolean | undefined;
         refName: string;
+        reversed?: boolean | undefined;
         assemblyName: string;
     };
     render(renderProps: RenderArgsDeserialized): Promise<{
@@ -32,8 +19,9 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
+        containsNoTransferables: boolean;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -41,7 +29,8 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
-        reactElement: React.JSX.Element;
+        containsNoTransferables: boolean;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -49,10 +38,11 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
+        containsNoTransferables: boolean;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
     createSession(args: PileupLayoutSessionProps): PileupLayoutSession;
 }
-export type { RenderArgs, RenderResults, RenderArgsSerialized, ResultsSerialized, ResultsDeserialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+export type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsDeserialized, ResultsSerialized, } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';

package/dist/PileupRenderer/PileupRenderer.js

@@ -15,23 +15,32 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 BoxRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType"));
-const util_1 = require("@jbrowse/core/util");
 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");
-// locals
 const util_2 = require("../util");
 const layoutFeatures_1 = require("./layoutFeatures");
 class PileupRenderer extends BoxRendererType_1.default {
@@ -39,14 +48,13 @@ class PileupRenderer extends BoxRendererType_1.default {
         super(...arguments);
         this.supportsSVG = true;
     }
-    async fetchSequence(renderProps) {
-        const { sessionId, regions, adapterConfig } = renderProps;
+    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);
-        const region = regions[0];
         return (0, util_2.fetchSequence)({
             ...region,
             start: Math.max(0, region.start - 1),
@@ -59,7 +67,6 @@ class PileupRenderer extends BoxRendererType_1.default {
         const maxClippingSize = (0, configuration_1.readConfObject)(config, 'maxClippingSize');
         const bpExpansion = showSoftClip ? Math.round(maxClippingSize) : 0;
         return {
-            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...region,
             start: Math.floor(Math.max(start - bpExpansion, 0)),
             end: Math.ceil(end + bpExpansion),
@@ -68,25 +75,22 @@ class PileupRenderer extends BoxRendererType_1.default {
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
         const layout = this.createLayoutInWorker(renderProps);
-        const { regions, bpPerPx } = renderProps;
+        const { colorBy, regions, bpPerPx } = renderProps;
         const region = regions[0];
-        const layoutRecords = (0, layoutFeatures_1.layoutFeats)({
+        const regionSequence = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' && features.size
+            ? await this.fetchSequence(renderProps, region)
+            : undefined;
+        const { layoutRecords, height } = (0, layoutFeatures_1.layoutFeats)({
             ...renderProps,
             features,
             layout,
         });
-        // only need reference sequence if there are features and only for some
-        // cases
-        const regionSequence = features.size
-            ? await this.fetchSequence(renderProps)
-            : undefined;
         const width = (region.end - region.start) / bpPerPx;
-        const height = Math.max(layout.getTotalHeight(), 1);
         const { makeImageData } = await Promise.resolve().then(() => __importStar(require('./makeImageData')));
         const res = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => {
             makeImageData({
                 ctx,
-                layoutRecords: layoutRecords.filter(util_1.notEmpty),
+                layoutRecords,
                 canvasWidth: width,
                 renderArgs: {
                     ...renderProps,
@@ -113,6 +117,7 @@ class PileupRenderer extends BoxRendererType_1.default {
             height,
             width,
             maxHeightReached: layout.maxHeightReached,
+            containsNoTransferables: true,
         };
     }
     createSession(args) {

package/dist/PileupRenderer/colorBy.d.ts

@@ -1,5 +1,5 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { Feature } from '@jbrowse/core/util';
+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";

package/dist/PileupRenderer/colorBy.js

@@ -37,27 +37,21 @@ function colorByOrientation(feature, config) {
 function getStranded(feature) {
     const flags = feature.get('flags');
     const strand = feature.get('strand');
-    // is paired
     if (flags & 1) {
-        // first-of-pair?
         const flipper = flags & 64 ? -1 : 1;
-        // proper pairing
         if (flags & 2) {
             return strand * flipper === 1 ? 'color_rev_strand' : 'color_fwd_strand';
         }
-        // mate missing, separate color
         if (flags & 8) {
             return strand * flipper === 1
                 ? 'color_rev_missing_mate'
                 : 'color_fwd_missing_mate';
         }
-        // same chrom without proper pairing gets separate color
         if (feature.get('refName') === feature.get('next_ref')) {
             return strand * flipper === 1
                 ? 'color_rev_strand_not_proper'
                 : 'color_fwd_strand_not_proper';
         }
-        // abberant chrom
         return strand === 1 ? 'color_fwd_diff_chr' : 'color_rev_diff_chr';
     }
     return 'color_unknown';

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Region } from '@jbrowse/core/util/types';
+import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
     blockKey: string;
@@ -23,5 +22,5 @@ declare const PileupRendering: (props: {
         };
     };
     onMouseMove?: (event: React.MouseEvent, featureId?: string) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default PileupRendering;

package/dist/PileupRenderer/components/PileupRendering.js

@@ -1,29 +1,7 @@
 "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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+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");
@@ -106,9 +84,7 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
         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) {
-        // @ts-expect-error
         const featureHandler = props[`onFeature${handlerName}`];
-        // @ts-expect-error
         const canvasHandler = props[`on${handlerName}`];
         if (featureHandler && featureIdUnderMouse) {
             featureHandler(event, featureIdUnderMouse);
@@ -118,8 +94,7 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
         }
     }
     const canvasWidth = Math.ceil(width);
-    // need to call this in render so we get the right observer behavior
-    return (react_1.default.createElement("div", { ref: ref, "data-testid": [
+    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,
@@ -145,20 +120,17 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
             onClick(event);
         }, onContextMenu: event => {
             onContextMenu(event);
-        }, onFocus: () => { }, onBlur: () => { } },
-        react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
-        firstRender && highlight ? (react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                backgroundColor: '#0003',
-                pointerEvents: 'none',
-                ...highlight,
-            } })) : null,
-        firstRender && selected ? (react_1.default.createElement("div", { style: {
-                position: 'absolute',
-                border: '2px solid #00b8ff',
-                boxSizing: 'content-box',
-                pointerEvents: 'none',
-                ...selected,
-            } })) : null));
+        }, 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;