@jbrowse/plugin-alignments 2.17.0 → 2.18.0

package/esm/PileupRenderer/PileupRenderer.d.ts

@@ -1,24 +1,11 @@
-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;
@@ -32,6 +19,7 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
+        containsNoTransferables: boolean;
         canvasRecordedData: any;
         reactElement?: import("react").ReactElement;
         html?: string;
@@ -41,6 +29,7 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
+        containsNoTransferables: boolean;
         reactElement: React.JSX.Element;
         html?: string;
     } | {
@@ -49,10 +38,11 @@ export default class PileupRenderer extends BoxRendererType {
         height: number;
         width: number;
         maxHeightReached: boolean;
+        containsNoTransferables: boolean;
         imageData: any;
         reactElement?: import("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/esm/PileupRenderer/PileupRenderer.js

@@ -1,9 +1,8 @@
-import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
-import { notEmpty, renderToAbstractCanvas, } from '@jbrowse/core/util';
 import { readConfObject } from '@jbrowse/core/configuration';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
-import { PileupLayoutSession, } from './PileupLayoutSession';
-// locals
+import BoxRendererType from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
+import { renderToAbstractCanvas } from '@jbrowse/core/util';
+import { PileupLayoutSession } from './PileupLayoutSession';
 import { fetchSequence } from '../util';
 import { layoutFeats } from './layoutFeatures';
 export default class PileupRenderer extends BoxRendererType {
@@ -11,14 +10,13 @@ export default class PileupRenderer extends BoxRendererType {
         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 getAdapter(this.pluginManager, sessionId, sequenceAdapter);
-        const region = regions[0];
         return fetchSequence({
             ...region,
             start: Math.max(0, region.start - 1),
@@ -31,7 +29,6 @@ export default class PileupRenderer extends BoxRendererType {
         const maxClippingSize = 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),
@@ -40,25 +37,22 @@ export default class PileupRenderer extends BoxRendererType {
     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 = layoutFeats({
+        const regionSequence = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation' && features.size
+            ? await this.fetchSequence(renderProps, region)
+            : undefined;
+        const { layoutRecords, height } = 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 import('./makeImageData');
         const res = await renderToAbstractCanvas(width, height, renderProps, ctx => {
             makeImageData({
                 ctx,
-                layoutRecords: layoutRecords.filter(notEmpty),
+                layoutRecords,
                 canvasWidth: width,
                 renderArgs: {
                     ...renderProps,
@@ -85,6 +79,7 @@ export default class PileupRenderer extends BoxRendererType {
             height,
             width,
             maxHeightReached: layout.maxHeightReached,
+            containsNoTransferables: true,
         };
     }
     createSession(args) {

package/esm/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/esm/PileupRenderer/colorBy.js

@@ -1,4 +1,4 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { fillColor } from '../shared/color';
 import { orientationTypes } from '../util';
 export function colorByInsertSize(feature) {
@@ -30,27 +30,21 @@ export 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/esm/PileupRenderer/components/PileupRendering.d.ts

@@ -1,5 +1,5 @@
 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;

package/esm/PileupRenderer/components/PileupRendering.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
 import { bpSpanPx } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
@@ -81,9 +81,7 @@ const PileupRendering = 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);
@@ -93,7 +91,6 @@ const PileupRendering = observer(function (props) {
         }
     }
     const canvasWidth = Math.ceil(width);
-    // need to call this in render so we get the right observer behavior
     return (React.createElement("div", { ref: ref, "data-testid": [
             'pileup-overlay',
             sortedBy === null || sortedBy === void 0 ? void 0 : sortedBy.type,

package/esm/PileupRenderer/configSchema.d.ts

@@ -1,84 +1,53 @@
 declare const PileupRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     * default magenta here is used to detect the user has not customized this
-     */
     color: {
         type: string;
         description: string;
         defaultValue: string;
         contextVariable: string[];
     };
-    /**
-     * #slot
-     */
     orientationType: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         defaultValue: string;
         description: string;
     };
-    /**
-     * #slot
-     */
     displayMode: {
         type: string;
         model: import("mobx-state-tree").ISimpleType<string>;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     minSubfeatureWidth: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     maxHeight: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     maxClippingSize: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     height: {
         type: string;
         description: string;
         defaultValue: number;
         contextVariable: string[];
     };
-    /**
-     * #slot
-     */
     noSpacing: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-    /**
-     * #slot
-     */
     largeInsertionIndicatorScale: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     mismatchAlpha: {
         type: string;
         defaultValue: boolean;

package/esm/PileupRenderer/configSchema.js

@@ -1,32 +1,19 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
-/**
- * #config PileupRenderer
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 const PileupRenderer = ConfigurationSchema('PileupRenderer', {
-    /**
-     * #slot
-     * default magenta here is used to detect the user has not customized this
-     */
     color: {
         type: 'color',
         description: 'the color of each feature in a pileup alignment',
         defaultValue: '#f0f',
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     orientationType: {
         type: 'stringEnum',
         model: types.enumeration('orientationType', ['fr', 'rf', 'ff']),
         defaultValue: 'fr',
         description: 'read sequencer orientation. fr is normal "reads pointing at each other ---> <--- while some other sequencers can use other options',
     },
-    /**
-     * #slot
-     */
     displayMode: {
         type: 'stringEnum',
         model: types.enumeration('displayMode', [
@@ -37,58 +24,37 @@ const PileupRenderer = ConfigurationSchema('PileupRenderer', {
         description: 'Alternative display modes',
         defaultValue: 'normal',
     },
-    /**
-     * #slot
-     */
     minSubfeatureWidth: {
         type: 'number',
         description: 'the minimum width in px for a pileup mismatch feature. use for increasing/decreasing mismatch marker widths when zoomed out, e.g. 0 or 1',
         defaultValue: 1,
     },
-    /**
-     * #slot
-     */
     maxHeight: {
         type: 'integer',
         description: 'the maximum height to be used in a pileup rendering',
         defaultValue: 1200,
     },
-    /**
-     * #slot
-     */
     maxClippingSize: {
         type: 'integer',
         description: 'the max clip size to be used in a pileup rendering',
         defaultValue: 10000,
     },
-    /**
-     * #slot
-     */
     height: {
         type: 'number',
         description: 'the height of each feature in a pileup alignment',
         defaultValue: 7,
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     noSpacing: {
         type: 'boolean',
         description: 'remove spacing between features',
         defaultValue: false,
     },
-    /**
-     * #slot
-     */
     largeInsertionIndicatorScale: {
         type: 'number',
         description: 'scale at which to draw the large insertion indicators (bp/pixel)',
         defaultValue: 10,
     },
-    /**
-     * #slot
-     */
     mismatchAlpha: {
         type: 'boolean',
         defaultValue: false,

package/esm/PileupRenderer/getAlignmentShapeColor.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 getAlignmentShapeColor({ colorType, tag, feature, config, defaultColor, colorTagMap, }: {
     colorType: string;
     tag: string;

package/esm/PileupRenderer/getAlignmentShapeColor.js

@@ -1,9 +1,7 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
-import { fillColor } from '../shared/color';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { colorByInsertSize, colorByMappingQuality, colorByOrientation, colorByStrand, colorByStrandedRnaSeq, } from './colorBy';
+import { fillColor } from '../shared/color';
 export function getAlignmentShapeColor({ colorType, tag, feature, config, defaultColor, colorTagMap, }) {
-    // first pass for simple color changes that change the color of the
-    // alignment
     switch (colorType) {
         case 'insertSize':
             return colorByInsertSize(feature);
@@ -51,9 +49,6 @@ export function getAlignmentShapeColor({ colorType, tag, feature, config, defaul
             break;
         case 'modifications':
         case 'methylation':
-            // this coloring is similar to igv.js, and is helpful to color negative
-            // strand reads differently because their c-g will be flipped (e.g. g-c
-            // read right to left)
             return feature.get('flags') & 16 ? '#c8dcc8' : '#c8c8c8';
         default:
             return defaultColor

package/esm/PileupRenderer/index.d.ts

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

package/esm/PileupRenderer/index.js

@@ -1,6 +1,6 @@
 import PileupRenderer from './PileupRenderer';
-import configSchema from './configSchema';
 import ReactComponent from './components/PileupRendering';
+import configSchema from './configSchema';
 export default function register(pluginManager) {
     pluginManager.addRendererType(() => {
         return new PileupRenderer({

package/esm/PileupRenderer/layoutFeature.d.ts

@@ -1,5 +1,5 @@
-import { Feature, Region } from '@jbrowse/core/util';
-import { BaseLayout } from '@jbrowse/core/util/layouts';
+import type { Feature, Region } from '@jbrowse/core/util';
+import type { BaseLayout } from '@jbrowse/core/util/layouts';
 export interface LayoutRecord {
     feature: Feature;
     leftPx: number;

package/esm/PileupRenderer/layoutFeature.js

@@ -2,7 +2,6 @@ import { bpSpanPx } from '@jbrowse/core/util';
 export function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightPx, displayMode, }) {
     let expansionBefore = 0;
     let expansionAfter = 0;
-    // Expand the start and end of feature when softclipping enabled
     if (showSoftClip) {
         const mismatches = feature.get('mismatches');
         const seq = feature.get('seq');

package/esm/PileupRenderer/layoutFeatures.d.ts

@@ -1,2 +1,5 @@
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-export declare function layoutFeats(props: RenderArgsDeserializedWithFeaturesAndLayout): (import("./layoutFeature").LayoutRecord | null)[];
+import type { PreProcessedRenderArgs } from './types';
+export declare function layoutFeats(props: PreProcessedRenderArgs): {
+    layoutRecords: import("./layoutFeature").LayoutRecord[];
+    height: number;
+};

package/esm/PileupRenderer/layoutFeatures.js

@@ -1,9 +1,7 @@
 import { readConfObject } from '@jbrowse/core/configuration';
-import { iterMap } from '@jbrowse/core/util';
-// locals
+import { iterMap, notEmpty } from '@jbrowse/core/util';
 import { layoutFeature } from './layoutFeature';
 import { sortFeature } from './sortUtil';
-// layout determines the height of the canvas that we use to render
 export function layoutFeats(props) {
     const { layout, features, sortedBy, config, bpPerPx, showSoftClip, regions } = props;
     const region = regions[0];
@@ -12,7 +10,7 @@ export function layoutFeats(props) {
         : features;
     const heightPx = readConfObject(config, 'height');
     const displayMode = readConfObject(config, 'displayMode');
-    return iterMap(featureMap.values(), feature => layoutFeature({
+    const layoutRecords = iterMap(featureMap.values(), feature => layoutFeature({
         feature,
         layout,
         bpPerPx,
@@ -20,5 +18,9 @@ export function layoutFeats(props) {
         showSoftClip,
         heightPx,
         displayMode,
-    }), featureMap.size);
+    }), featureMap.size).filter(notEmpty);
+    return {
+        layoutRecords,
+        height: Math.max(layout.getTotalHeight(), 1),
+    };
 }

package/esm/PileupRenderer/makeImageData.d.ts

@@ -1,6 +1,5 @@
-import { Feature } from '@jbrowse/core/util';
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-export type RenderArgsWithColor = RenderArgsDeserializedWithFeaturesAndLayout;
+import type { ProcessedRenderArgs } from './types';
+import type { Feature } from '@jbrowse/core/util';
 interface LayoutFeature {
     heightPx: number;
     topPx: number;
@@ -10,6 +9,6 @@ export declare function makeImageData({ ctx, layoutRecords, canvasWidth, renderA
     ctx: CanvasRenderingContext2D;
     canvasWidth: number;
     layoutRecords: LayoutFeature[];
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
 }): undefined;
 export {};

package/esm/PileupRenderer/makeImageData.js

@@ -1,11 +1,12 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
 import { renderAlignment } from './renderAlignment';
 import { renderMismatches } from './renderMismatches';
 import { renderSoftClipping } from './renderSoftClipping';
+import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap, shouldDrawIndels, shouldDrawSNPsMuted, } from './util';
 export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
-    const { config, showSoftClip, colorBy, theme: configTheme } = renderArgs;
+    const { stopToken, config, showSoftClip, colorBy, theme: configTheme, } = renderArgs;
     const mismatchAlpha = readConfObject(config, 'mismatchAlpha');
     const minSubfeatureWidth = readConfObject(config, 'minSubfeatureWidth');
     const largeInsertionIndicatorScale = readConfObject(config, 'largeInsertionIndicatorScale');
@@ -17,7 +18,12 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
     const { charWidth, charHeight } = getCharWidthHeight();
     const drawSNPsMuted = shouldDrawSNPsMuted(colorBy === null || colorBy === void 0 ? void 0 : colorBy.type);
     const drawIndels = shouldDrawIndels();
+    let start = performance.now();
     for (const feat of layoutRecords) {
+        if (performance.now() - start > 400) {
+            checkStopToken(stopToken);
+            start = performance.now();
+        }
         renderAlignment({
             ctx,
             feat,

package/esm/PileupRenderer/renderAlignment.d.ts

@@ -1,9 +1,9 @@
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     colorForBase: Record<string, string>;
     contrastForBase: Record<string, string>;
     charWidth: number;

package/esm/PileupRenderer/renderAlignment.js

@@ -1,10 +1,10 @@
 import { getAlignmentShapeColor } from './getAlignmentShapeColor';
 import { renderAlignmentShape } from './renderAlignmentShape';
-import { renderPerBaseQuality } from './renderPerBaseQuality';
-import { renderPerBaseLettering } from './renderPerBaseLettering';
 import { renderModifications } from './renderModifications';
-import { renderMethylation } from './renderMethylation';
+import { renderPerBaseLettering } from './renderPerBaseLettering';
+import { renderPerBaseQuality } from './renderPerBaseQuality';
 import { parseCigar } from '../MismatchParser';
+import { renderMethylation } from './renderMethylation';
 export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastForBase, charWidth, charHeight, defaultColor, canvasWidth, }) {
     const { config, bpPerPx, regions, colorBy, colorTagMap = {} } = renderArgs;
     const { tag = '', type: colorType = '' } = colorBy || {};
@@ -19,8 +19,6 @@ export function renderAlignment({ ctx, feat, renderArgs, colorForBase, contrastF
         colorTagMap,
     });
     renderAlignmentShape({ ctx, feat, renderArgs });
-    // second pass for color types that render per-base things that go over the
-    // existing drawing
     switch (colorType) {
         case 'perBaseQuality': {
             const cigarOps = parseCigar(feature.get('CIGAR'));

package/esm/PileupRenderer/renderAlignmentShape.d.ts

@@ -1,7 +1,7 @@
-import { RenderArgsDeserialized } from './PileupRenderer';
-import { LayoutFeature } from './util';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderAlignmentShape({ ctx, feat, renderArgs, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsDeserialized;
+    renderArgs: ProcessedRenderArgs;
 }): void;

package/esm/PileupRenderer/renderAlignmentShape.js

@@ -10,7 +10,7 @@ export function renderAlignmentShape({ ctx, feat, renderArgs, }) {
     const flip = region.reversed ? -1 : 1;
     const strand = feature.get('strand') * flip;
     const renderChevrons = bpPerPx < 10 && heightPx > 5;
-    if (CIGAR.includes('N')) {
+    if (CIGAR === null || CIGAR === void 0 ? void 0 : CIGAR.includes('N')) {
         const cigarOps = parseCigar(CIGAR);
         if (strand === 1) {
             let drawLen = 0;

package/esm/PileupRenderer/renderMethylation.d.ts

@@ -1,12 +1,12 @@
-import { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
+import type { Region } from '@jbrowse/core/util';
 export declare function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     region: Region;
     bpPerPx: number;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     canvasWidth: number;
     cigarOps: string[];
 }): void;

package/esm/PileupRenderer/renderMethylation.js

@@ -1,11 +1,7 @@
 import { bpSpanPx } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
-// locals
 import { fillRect } from './util';
 import { getMethBins } from '../ModificationParser';
-// Color by methylation is slightly modified version of color by modifications
-// at reference CpG sites, with non-methylated CpG colored (looking only at the
-// MM tag can not tell you where reference CpG sites are)
 export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;

package/esm/PileupRenderer/renderMismatches.d.ts

@@ -1,9 +1,9 @@
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     colorForBase: Record<string, string>;
     contrastForBase: Record<string, string>;
     mismatchAlpha?: boolean;