@jbrowse/plugin-alignments 2.17.0 → 3.0.0

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,42 @@ 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
-     */
+    hideSmallIndels: {
+        type: 'boolean',
+        description: 'Hides small indels, sometimes occurring in long read sequencing',
+        defaultValue: false,
+    },
     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,14 +1,16 @@
 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');
+    const hideSmallIndels = readConfObject(config, 'hideSmallIndels');
     const defaultColor = readConfObject(config, 'color') === '#f0f';
     const theme = createJBrowseTheme(configTheme);
     const colorForBase = getColorBaseMap(theme);
@@ -17,7 +19,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,
@@ -33,6 +40,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, })
             ctx,
             feat,
             renderArgs,
+            hideSmallIndels,
             mismatchAlpha,
             drawSNPsMuted,
             drawIndels,

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';
-export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels, }: {
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
+export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsWithColor;
+    renderArgs: ProcessedRenderArgs;
     colorForBase: Record<string, string>;
     contrastForBase: Record<string, string>;
     mismatchAlpha?: boolean;
@@ -11,6 +11,7 @@ export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureW
     drawSNPsMuted?: boolean;
     minSubfeatureWidth: number;
     largeInsertionIndicatorScale: number;
+    hideSmallIndels: boolean;
     charWidth: number;
     charHeight: number;
     canvasWidth: number;

package/esm/PileupRenderer/renderMismatches.js

@@ -1,7 +1,7 @@
 import { bpSpanPx, measureText } from '@jbrowse/core/util';
-import { fillRect } from './util';
 import { colord } from '@jbrowse/core/util/colord';
-export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
+import { fillRect } from './util';
+export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
     const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
     const region = regions[0];
@@ -9,14 +9,10 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
     const pxPerBp = Math.min(1 / bpPerPx, 2);
     const mismatches = feature.get('mismatches');
     const heightLim = charHeight - 2;
-    // extraHorizontallyFlippedOffset is used to draw interbase items, which are
-    // located to the left when forward and right when reversed
     const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx + 1 : -1;
     if (!mismatches) {
         return;
     }
-    // two pass rendering: first pass, draw all the mismatches except wide
-    // insertion markers
     for (const mismatch of mismatches) {
         const mstart = start + mismatch.start;
         const mlen = mismatch.length;
@@ -34,7 +30,6 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
                 fillRect(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, c);
             }
             if (widthPx >= charWidth && heightPx >= heightLim) {
-                // normal SNP coloring
                 const contrastColor = drawSNPsMuted
                     ? 'black'
                     : contrastForBase[mismatch.base] || 'black';
@@ -48,12 +43,15 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
         else if (mismatch.type === 'deletion' && drawIndels) {
-            fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
-            const txt = `${mismatch.length}`;
-            const rwidth = measureText(txt, 10);
-            if (widthPx >= rwidth && heightPx >= heightLim) {
-                ctx.fillStyle = contrastForBase.deletion;
-                ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
+            const len = mismatch.length;
+            if (!hideSmallIndels || len >= 10) {
+                fillRect(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
+                const txt = `${mismatch.length}`;
+                const rwidth = measureText(txt, 10);
+                if (widthPx >= rwidth && heightPx >= heightLim) {
+                    ctx.fillStyle = contrastForBase.deletion;
+                    ctx.fillText(txt, (leftPx + rightPx) / 2 - rwidth / 2, topPx + heightPx);
+                }
             }
         }
         else if (mismatch.type === 'insertion' && drawIndels) {
@@ -61,12 +59,14 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             const len = +mismatch.base || mismatch.length;
             const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx));
             if (len < 10) {
-                fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
-                if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-                    const l = pos - insW;
-                    fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth);
-                    fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
-                    ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
+                if (!hideSmallIndels) {
+                    fillRect(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
+                    if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+                        const l = Math.round(pos - insW);
+                        fillRect(ctx, l, topPx, insW * 3, 1, canvasWidth);
+                        fillRect(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
+                        ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
+                    }
                 }
             }
         }
@@ -83,12 +83,7 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
         else if (mismatch.type === 'skip') {
-            // fix to avoid bad rendering note that this was also related to chrome
-            // bug https://bugs.chromium.org/p/chromium/issues/detail?id=1131528
-            //
-            // also affected firefox ref #1236 #2750
             if (leftPx + widthPx > 0) {
-                // make small exons more visible when zoomed far out
                 const adjustPx = widthPx - (bpPerPx > 10 ? 1.5 : 0);
                 const l = Math.max(0, leftPx);
                 const t = topPx + heightPx / 2 - 1;
@@ -98,7 +93,6 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
             }
         }
     }
-    // second pass, draw wide insertion markers on top
     if (drawIndels) {
         for (const mismatch of mismatches) {
             const mstart = start + mismatch.start;

package/esm/PileupRenderer/renderModifications.d.ts

@@ -1,12 +1,12 @@
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
 import type { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
-import { RenderArgsWithColor } from './makeImageData';
 export declare function renderModifications({ 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/renderModifications.js

@@ -1,9 +1,7 @@
 import { bpSpanPx, max, sum } from '@jbrowse/core/util';
-// locals
 import { fillRect } from './util';
-import { alphaColor } from '../shared/util';
 import { getMaxProbModAtEachPosition } from '../shared/getMaximumModificationAtEachPosition';
-// render modifications stored in MM tag in BAM
+import { alphaColor } from '../shared/util';
 export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, cigarOps, }) {
     var _a, _b, _c;
     const { feature, topPx, heightPx } = feat;

package/esm/PileupRenderer/renderPerBaseLettering.d.ts

@@ -1,5 +1,5 @@
-import { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
+import type { LayoutFeature } from './util';
+import type { Region } from '@jbrowse/core/util';
 export declare function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBase, contrastForBase, charWidth, charHeight, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;

package/esm/PileupRenderer/renderPerBaseLettering.js

@@ -28,7 +28,6 @@ export function renderPerBaseLettering({ ctx, feat, region, bpPerPx, colorForBas
                 const c = colorForBase[letter];
                 fillRect(ctx, leftPx, topPx, w + 0.5, heightPx, canvasWidth, c);
                 if (w >= charWidth && heightPx >= heightLim) {
-                    // normal SNP coloring
                     ctx.fillStyle = contrastForBase[letter];
                     ctx.fillText(letter, leftPx + (w - charWidth) / 2 + 1, topPx + heightPx);
                 }

package/esm/PileupRenderer/renderPerBaseQuality.d.ts

@@ -1,5 +1,5 @@
-import { Region } from '@jbrowse/core/util';
-import { LayoutFeature } from './util';
+import type { LayoutFeature } from './util';
+import type { Region } from '@jbrowse/core/util';
 export declare function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth, cigarOps, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;

package/esm/PileupRenderer/renderPerBaseQuality.js

@@ -6,8 +6,8 @@ export function renderPerBaseQuality({ ctx, feat, region, bpPerPx, canvasWidth,
     const scores = qual.split(' ').map(val => +val);
     const w = 1 / bpPerPx;
     const start = feature.get('start');
-    let soffset = 0; // sequence offset
-    let roffset = 0; // reference offset
+    let soffset = 0;
+    let roffset = 0;
     for (let i = 0; i < cigarOps.length; i += 2) {
         const len = +cigarOps[i];
         const op = cigarOps[i + 1];

package/esm/PileupRenderer/renderSoftClipping.d.ts

@@ -1,11 +1,11 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { Theme } from '@mui/material';
-import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-import { LayoutFeature } from './util';
+import type { ProcessedRenderArgs } from './types';
+import type { LayoutFeature } from './util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Theme } from '@mui/material';
 export declare function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorForBase, canvasWidth, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
-    renderArgs: RenderArgsDeserializedWithFeaturesAndLayout;
+    renderArgs: ProcessedRenderArgs;
     config: AnyConfigurationModel;
     colorForBase: Record<string, string>;
     theme: Theme;

package/esm/PileupRenderer/renderSoftClipping.js

@@ -1,4 +1,4 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
 import { bpSpanPx } from '@jbrowse/core/util';
 import { fillRect, getCharWidthHeight } from './util';
 import { parseCigar } from '../MismatchParser';
@@ -10,7 +10,6 @@ export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, color
     const mismatches = feature.get('mismatches');
     const seq = feature.get('seq');
     const { charWidth, charHeight } = getCharWidthHeight();
-    // Display all bases softclipped off in lightened colors
     if (!(seq && mismatches)) {
         return;
     }
@@ -28,8 +27,6 @@ export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, color
                 const s0 = feature.get('start') - (i === 0 ? len : 0) + refOffset + k;
                 const [leftPx, rightPx] = bpSpanPx(s0, s0 + 1, region, bpPerPx);
                 const widthPx = Math.max(minFeatWidth, rightPx - leftPx);
-                // Black accounts for IUPAC ambiguity code bases such as N that
-                // show in soft clipping
                 const baseColor = colorForBase[base] || '#000000';
                 ctx.fillStyle = baseColor;
                 fillRect(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth);
@@ -48,7 +45,6 @@ export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, color
             seqOffset += len;
         }
         if (op === 'H') {
-            // do nothing
         }
         if (op === 'D') {
             refOffset += len;

package/esm/PileupRenderer/sortUtil.d.ts

@@ -1,3 +1,3 @@
-import { Feature } from '@jbrowse/core/util';
-import { SortedBy } from '../shared/types';
+import type { SortedBy } from '../shared/types';
+import type { Feature } from '@jbrowse/core/util';
 export declare const sortFeature: (features: Map<string, Feature>, sortedBy: SortedBy) => Map<string, Feature>;

package/esm/PileupRenderer/sortUtil.js

@@ -4,7 +4,6 @@ export const sortFeature = (features, sortedBy) => {
     const featuresInCenterLine = [];
     const featuresOutsideCenter = [];
     const { pos, type } = sortedBy;
-    // only sort on features that intersect center line, append those outside post-sort
     featureArray.forEach(innerArray => {
         const feature = innerArray;
         const start = feature.get('start');
@@ -37,7 +36,6 @@ export const sortFeature = (features, sortedBy) => {
             }
             break;
         }
-        // first sort all mismatches, then all reference bases at the end
         case 'Base pair': {
             const baseSortArray = [];
             for (const feature of featuresInCenterLine) {
@@ -59,14 +57,13 @@ export const sortFeature = (features, sortedBy) => {
                 const acode = bMismatch === null || bMismatch === void 0 ? void 0 : bMismatch.base.toUpperCase();
                 const bcode = aMismatch === null || aMismatch === void 0 ? void 0 : aMismatch.base.toUpperCase();
                 return acode === bcode && acode === '*'
-                    ? // @ts-expect-error
+                    ?
                         aMismatch.length - bMismatch.length
                     : (acode ? acode.charCodeAt(0) : 0) -
                         (bcode ? bcode.charCodeAt(0) : 0);
             });
             break;
         }
-        // sorts positive strands then negative strands
         case 'Read strand': {
             featuresInCenterLine.sort((a, b) => a.get('strand') <= b.get('strand') ? 1 : -1);
             break;