@jbrowse/plugin-alignments 2.18.0 → 3.0.0

package/dist/PileupRenderer/PileupRenderer.d.ts

@@ -9,8 +9,8 @@ export default class PileupRenderer extends BoxRendererType {
     getExpandedRegion(region: Region, renderArgs: RenderArgsDeserialized): {
         start: number;
         end: number;
-        reversed?: boolean | undefined;
         refName: string;
+        reversed?: boolean | undefined;
         assemblyName: string;
     };
     render(renderProps: RenderArgsDeserialized): Promise<{
@@ -21,7 +21,7 @@ export default class PileupRenderer extends BoxRendererType {
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
         canvasRecordedData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -30,7 +30,7 @@ export default class PileupRenderer extends BoxRendererType {
         width: number;
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
-        reactElement: React.JSX.Element;
+        reactElement: import("react/jsx-runtime").JSX.Element;
         html?: string;
     } | {
         features: Map<any, any>;
@@ -40,7 +40,7 @@ export default class PileupRenderer extends BoxRendererType {
         maxHeightReached: boolean;
         containsNoTransferables: boolean;
         imageData: any;
-        reactElement?: import("react").ReactElement;
+        reactElement?: React.ReactElement;
         html?: string;
     }>;
     createSession(args: PileupLayoutSessionProps): PileupLayoutSession;

package/dist/PileupRenderer/PileupRenderer.js

@@ -15,13 +15,23 @@ 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 };
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Region } from '@jbrowse/core/util/types';
 import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view';
 declare const PileupRendering: (props: {
@@ -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");
@@ -116,7 +94,7 @@ const PileupRendering = (0, mobx_react_1.observer)(function (props) {
         }
     }
     const canvasWidth = Math.ceil(width);
-    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,
@@ -142,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;

package/dist/PileupRenderer/configSchema.d.ts

@@ -22,6 +22,11 @@ declare const PileupRenderer: import("@jbrowse/core/configuration/configurationS
         description: string;
         defaultValue: number;
     };
+    hideSmallIndels: {
+        type: string;
+        description: string;
+        defaultValue: boolean;
+    };
     maxHeight: {
         type: string;
         description: string;

package/dist/PileupRenderer/configSchema.js

@@ -31,6 +31,11 @@ const PileupRenderer = (0, configuration_1.ConfigurationSchema)('PileupRenderer'
         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,
     },
+    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',

package/dist/PileupRenderer/makeImageData.js

@@ -13,6 +13,7 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
     const mismatchAlpha = (0, configuration_1.readConfObject)(config, 'mismatchAlpha');
     const minSubfeatureWidth = (0, configuration_1.readConfObject)(config, 'minSubfeatureWidth');
     const largeInsertionIndicatorScale = (0, configuration_1.readConfObject)(config, 'largeInsertionIndicatorScale');
+    const hideSmallIndels = (0, configuration_1.readConfObject)(config, 'hideSmallIndels');
     const defaultColor = (0, configuration_1.readConfObject)(config, 'color') === '#f0f';
     const theme = (0, ui_1.createJBrowseTheme)(configTheme);
     const colorForBase = (0, util_1.getColorBaseMap)(theme);
@@ -42,6 +43,7 @@ function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, }) {
             ctx,
             feat,
             renderArgs,
+            hideSmallIndels,
             mismatchAlpha,
             drawSNPsMuted,
             drawIndels,

package/dist/PileupRenderer/renderMismatches.d.ts

@@ -1,6 +1,6 @@
 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, }: {
+export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, hideSmallIndels, canvasWidth, drawSNPsMuted, drawIndels, }: {
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     renderArgs: ProcessedRenderArgs;
@@ -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/dist/PileupRenderer/renderMismatches.js

@@ -4,7 +4,7 @@ exports.renderMismatches = renderMismatches;
 const util_1 = require("@jbrowse/core/util");
 const colord_1 = require("@jbrowse/core/util/colord");
 const util_2 = require("./util");
-function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
+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];
@@ -46,12 +46,15 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
             }
         }
         else if (mismatch.type === 'deletion' && drawIndels) {
-            (0, util_2.fillRect)(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
-            const txt = `${mismatch.length}`;
-            const rwidth = (0, util_1.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) {
+                (0, util_2.fillRect)(ctx, leftPx, topPx, Math.abs(leftPx - rightPx), heightPx, canvasWidth, colorForBase.deletion);
+                const txt = `${mismatch.length}`;
+                const rwidth = (0, util_1.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) {
@@ -59,12 +62,14 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
             const len = +mismatch.base || mismatch.length;
             const insW = Math.max(0, Math.min(1.2, 1 / bpPerPx));
             if (len < 10) {
-                (0, util_2.fillRect)(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
-                if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
-                    const l = pos - insW;
-                    (0, util_2.fillRect)(ctx, l, topPx, insW * 3, 1, canvasWidth);
-                    (0, util_2.fillRect)(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
-                    ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
+                if (!hideSmallIndels) {
+                    (0, util_2.fillRect)(ctx, pos, topPx, insW, heightPx, canvasWidth, 'purple');
+                    if (1 / bpPerPx >= charWidth && heightPx >= heightLim) {
+                        const l = Math.round(pos - insW);
+                        (0, util_2.fillRect)(ctx, l, topPx, insW * 3, 1, canvasWidth);
+                        (0, util_2.fillRect)(ctx, l, topPx + heightPx - 1, insW * 3, 1, canvasWidth);
+                        ctx.fillText(`(${mismatch.base})`, pos + 3, topPx + heightPx);
+                    }
                 }
             }
         }

package/dist/SNPCoverageAdapter/index.js

@@ -15,13 +15,23 @@ 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 };
 };

package/dist/SNPCoverageAdapter/processModifications.js

@@ -21,7 +21,6 @@ function processModifications({ feature, colorBy, region, bins, regionSequence,
                 bins[epos] = {
                     depth: 0,
                     readsCounted: 0,
-                    refbase: regionSequence[epos],
                     snps: {},
                     ref: {
                         probabilities: [],
@@ -38,6 +37,7 @@ function processModifications({ feature, colorBy, region, bins, regionSequence,
             }
             const s = 1 - (0, util_1.sum)(allProbs);
             const bin = bins[epos];
+            bin.refbase = regionSequence[epos];
             if (twoColor && s > (0, util_1.max)(allProbs)) {
                 (0, util_2.incWithProbabilities)(bin, fstrand, 'nonmods', `nonmod_${type}`, s);
             }

package/dist/SNPCoverageRenderer/SNPCoverageRenderer.d.ts

@@ -1,22 +1,5 @@
 import { WiggleBaseRenderer } from '@jbrowse/plugin-wiggle';
-import type { ModificationTypeWithColor } from '../shared/types';
-import type { RenderArgsDeserialized as FeatureRenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/FeatureRendererType';
-import type { Feature } from '@jbrowse/core/util';
-import type { ScaleOpts } from '@jbrowse/plugin-wiggle';
-export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
-    bpPerPx: number;
-    height: number;
-    highResolutionScaling: number;
-    scaleOpts: ScaleOpts;
-}
-export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
-    features: Map<string, Feature>;
-    ticks: {
-        values: number[];
-    };
-    displayCrossHatches: boolean;
-    visibleModifications?: Record<string, ModificationTypeWithColor>;
-}
+import type { RenderArgsDeserializedWithFeatures } from './types';
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
     draw(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<undefined>;
 }

package/dist/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -1,272 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const configuration_1 = require("@jbrowse/core/configuration");
-const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-const stopToken_1 = require("@jbrowse/core/util/stopToken");
 const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
-const util_2 = require("../shared/util");
-const INTERBASE_INDICATOR_WIDTH = 7;
-const INTERBASE_INDICATOR_HEIGHT = 4.5;
-const MINIMUM_INTERBASE_INDICATOR_READ_DEPTH = 7;
-const complementBase = {
-    C: 'G',
-    G: 'C',
-    A: 'T',
-    T: 'A',
-};
-const fudgeFactor = 0.6;
 class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
     async draw(ctx, props) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const { features, regions, bpPerPx, colorBy, displayCrossHatches, visibleModifications = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, stopToken, } = props;
-        const theme = (0, ui_1.createJBrowseTheme)(configTheme);
-        const region = regions[0];
-        const width = (region.end - region.start) / bpPerPx;
-        const offset = plugin_wiggle_1.YSCALEBAR_LABEL_OFFSET;
-        const height = unadjustedHeight - offset * 2;
-        const opts = { ...scaleOpts, range: [0, height] };
-        const viewScale = (0, plugin_wiggle_1.getScale)(opts);
-        const indicatorViewScale = (0, plugin_wiggle_1.getScale)({
-            ...opts,
-            range: [0, height / 2],
-            scaleType: 'linear',
-        });
-        const originY = (0, plugin_wiggle_1.getOrigin)(scaleOpts.scaleType);
-        const originLinear = (0, plugin_wiggle_1.getOrigin)('linear');
-        const indicatorThreshold = (0, configuration_1.readConfObject)(cfg, 'indicatorThreshold');
-        const drawInterbaseCounts = (0, configuration_1.readConfObject)(cfg, 'drawInterbaseCounts');
-        const drawArcs = (0, configuration_1.readConfObject)(cfg, 'drawArcs');
-        const drawIndicators = (0, configuration_1.readConfObject)(cfg, 'drawIndicators');
-        const toY = (n) => height - (viewScale(n) || 0) + offset;
-        const toHeight = (n) => toY(originY) - toY(n);
-        const toY2 = (n) => height - (indicatorViewScale(n) || 0) + offset;
-        const toHeight2 = (n) => toY2(originLinear) - toY2(n);
-        const { bases } = theme.palette;
-        const colorForBase = {
-            A: bases.A.main,
-            C: bases.C.main,
-            G: bases.G.main,
-            T: bases.T.main,
-            insertion: 'purple',
-            softclip: 'blue',
-            hardclip: 'red',
-            total: (0, configuration_1.readConfObject)(cfg, 'color'),
-            mod_NONE: 'blue',
-            cpg_meth: 'red',
-            cpg_unmeth: 'blue',
-        };
-        const feats = [...features.values()];
-        ctx.fillStyle = colorForBase.total;
-        let start = performance.now();
-        for (const feature of feats) {
-            if (feature.get('type') === 'skip') {
-                continue;
-            }
-            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
-            const w = rightPx - leftPx + fudgeFactor;
-            const score = feature.get('score');
-            ctx.fillRect(leftPx, toY(score), w, toHeight(score));
-            if (performance.now() - start > 400) {
-                (0, stopToken_1.checkStopToken)(stopToken);
-                start = performance.now();
-            }
-        }
-        let prevTotal = 0;
-        const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
-        const drawingModifications = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'modifications';
-        const drawingMethylation = (colorBy === null || colorBy === void 0 ? void 0 : colorBy.type) === 'methylation';
-        const isolatedModification = (_a = colorBy === null || colorBy === void 0 ? void 0 : colorBy.modifications) === null || _a === void 0 ? void 0 : _a.isolatedModification;
-        start = performance.now();
-        for (const feature of feats) {
-            const now = performance.now();
-            if (now - start > 400) {
-                (0, stopToken_1.checkStopToken)(stopToken);
-            }
-            if (feature.get('type') === 'skip') {
-                continue;
-            }
-            const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
-            const snpinfo = feature.get('snpinfo');
-            const w = Math.max(rightPx - leftPx, 1);
-            const score0 = feature.get('score');
-            if (drawingModifications) {
-                let curr = 0;
-                const refbase = (_b = snpinfo.refbase) === null || _b === void 0 ? void 0 : _b.toUpperCase();
-                const { nonmods, mods, snps, ref } = snpinfo;
-                for (const m of Object.keys(nonmods).sort().reverse()) {
-                    const mod = visibleModifications[m.replace('nonmod_', '')] ||
-                        visibleModifications[m.replace('mod_', '')];
-                    if (!mod) {
-                        console.warn(`${m} not known yet`);
-                        continue;
-                    }
-                    if (isolatedModification && mod.type !== isolatedModification) {
-                        continue;
-                    }
-                    const cmp = complementBase[mod.base];
-                    const detectable = mod.base === 'N'
-                        ? score0
-                        : (((_c = snps[mod.base]) === null || _c === void 0 ? void 0 : _c.entryDepth) || 0) +
-                            (((_d = snps[cmp]) === null || _d === void 0 ? void 0 : _d.entryDepth) || 0) +
-                            (refbase === mod.base ? ref['1'] : 0) +
-                            (refbase === cmp ? ref['-1'] : 0);
-                    const modifiable = mod.base === 'N'
-                        ? score0
-                        : (((_e = snps[mod.base]) === null || _e === void 0 ? void 0 : _e.entryDepth) || 0) +
-                            (((_f = snps[cmp]) === null || _f === void 0 ? void 0 : _f.entryDepth) || 0) +
-                            (refbase === mod.base ? ref.entryDepth : 0) +
-                            (refbase === cmp ? ref.entryDepth : 0);
-                    const { entryDepth, avgProbability = 0 } = snpinfo.nonmods[m];
-                    const modFraction = (modifiable / score0) * (entryDepth / detectable);
-                    const nonModColor = 'blue';
-                    const c = (0, util_2.alphaColor)(nonModColor, avgProbability);
-                    const height = toHeight(score0);
-                    const bottom = toY(score0) + height;
-                    ctx.fillStyle = c;
-                    ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
-                    curr += modFraction * height;
-                }
-                for (const m of Object.keys(mods).sort().reverse()) {
-                    const mod = visibleModifications[m.replace('mod_', '')];
-                    if (!mod) {
-                        console.warn(`${m} not known yet`);
-                        continue;
-                    }
-                    if (isolatedModification && mod.type !== isolatedModification) {
-                        continue;
-                    }
-                    const cmp = complementBase[mod.base];
-                    const detectable = mod.base === 'N'
-                        ? score0
-                        : (((_g = snps[mod.base]) === null || _g === void 0 ? void 0 : _g.entryDepth) || 0) +
-                            (((_h = snps[cmp]) === null || _h === void 0 ? void 0 : _h.entryDepth) || 0) +
-                            (refbase === mod.base ? ref['1'] : 0) +
-                            (refbase === cmp ? ref['-1'] : 0);
-                    const modifiable = mod.base === 'N'
-                        ? score0
-                        : (((_j = snps[mod.base]) === null || _j === void 0 ? void 0 : _j.entryDepth) || 0) +
-                            (((_k = snps[cmp]) === null || _k === void 0 ? void 0 : _k.entryDepth) || 0) +
-                            (refbase === mod.base ? ref.entryDepth : 0) +
-                            (refbase === cmp ? ref.entryDepth : 0);
-                    const { entryDepth, avgProbability = 0 } = mods[m];
-                    const modFraction = (modifiable / score0) * (entryDepth / detectable);
-                    const baseColor = mod.color || 'black';
-                    const c = (0, util_2.alphaColor)(baseColor, avgProbability);
-                    const height = toHeight(score0);
-                    const bottom = toY(score0) + height;
-                    ctx.fillStyle = c;
-                    ctx.fillRect(Math.round(leftPx), bottom - (curr + modFraction * height), w, modFraction * height);
-                    curr += modFraction * height;
-                }
-            }
-            else if (drawingMethylation) {
-                const { depth, nonmods, mods } = snpinfo;
-                let curr = 0;
-                for (const base of Object.keys(mods).sort().reverse()) {
-                    const { entryDepth } = mods[base];
-                    const height = toHeight(score0);
-                    const bottom = toY(score0) + height;
-                    ctx.fillStyle = colorForBase[base] || 'black';
-                    ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                    curr += entryDepth;
-                }
-                for (const base of Object.keys(nonmods).sort().reverse()) {
-                    const { entryDepth } = nonmods[base];
-                    const height = toHeight(score0);
-                    const bottom = toY(score0) + height;
-                    ctx.fillStyle = colorForBase[base] || 'black';
-                    ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                    curr += entryDepth;
-                }
-            }
-            else {
-                const { depth, snps } = snpinfo;
-                let curr = 0;
-                for (const base of Object.keys(snps).sort().reverse()) {
-                    const { entryDepth } = snps[base];
-                    const height = toHeight(score0);
-                    const bottom = toY(score0) + height;
-                    ctx.fillStyle = colorForBase[base] || 'black';
-                    ctx.fillRect(Math.round(leftPx), bottom - ((entryDepth + curr) / depth) * height, w, (entryDepth / depth) * height);
-                    curr += entryDepth;
-                }
-            }
-            const interbaseEvents = Object.keys(snpinfo.noncov);
-            if (drawInterbaseCounts) {
-                let curr = 0;
-                for (const base of interbaseEvents) {
-                    const { entryDepth } = snpinfo.noncov[base];
-                    const r = 0.6;
-                    ctx.fillStyle = colorForBase[base];
-                    ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, INTERBASE_INDICATOR_HEIGHT + toHeight2(curr), r * 2, toHeight2(entryDepth));
-                    curr += entryDepth;
-                }
-            }
-            if (drawIndicators) {
-                let accum = 0;
-                let max = 0;
-                let maxBase = '';
-                for (const base of interbaseEvents) {
-                    const { entryDepth } = snpinfo.noncov[base];
-                    accum += entryDepth;
-                    if (entryDepth > max) {
-                        max = entryDepth;
-                        maxBase = base;
-                    }
-                }
-                const indicatorComparatorScore = Math.max(score0, prevTotal);
-                if (accum > indicatorComparatorScore * indicatorThreshold &&
-                    indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
-                    ctx.fillStyle = colorForBase[maxBase];
-                    ctx.beginPath();
-                    const l = leftPx + extraHorizontallyFlippedOffset;
-                    ctx.moveTo(l - INTERBASE_INDICATOR_WIDTH / 2, 0);
-                    ctx.lineTo(l + INTERBASE_INDICATOR_WIDTH / 2, 0);
-                    ctx.lineTo(l, INTERBASE_INDICATOR_HEIGHT);
-                    ctx.fill();
-                }
-            }
-            prevTotal = score0;
-        }
-        if (drawArcs) {
-            for (const f of feats) {
-                if (f.get('type') !== 'skip') {
-                    continue;
-                }
-                const s = f.get('start');
-                const e = f.get('end');
-                const [left, right] = (0, util_1.bpSpanPx)(s, e, region, bpPerPx);
-                ctx.beginPath();
-                const effectiveStrand = f.get('effectiveStrand');
-                const pos = 'rgba(255,200,200,0.7)';
-                const neg = 'rgba(200,200,255,0.7)';
-                const neutral = 'rgba(200,200,200,0.7)';
-                if (effectiveStrand === 1) {
-                    ctx.strokeStyle = pos;
-                }
-                else if (effectiveStrand === -1) {
-                    ctx.strokeStyle = neg;
-                }
-                else {
-                    ctx.strokeStyle = neutral;
-                }
-                ctx.lineWidth = Math.log(f.get('score') + 1);
-                ctx.moveTo(left, height - offset * 2);
-                ctx.bezierCurveTo(left, 0, right, 0, right, height - offset * 2);
-                ctx.stroke();
-            }
-        }
-        if (displayCrossHatches) {
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = 'rgba(140,140,140,0.8)';
-            for (const tick of ticks.values) {
-                ctx.beginPath();
-                ctx.moveTo(0, Math.round(toY(tick)));
-                ctx.lineTo(width, Math.round(toY(tick)));
-                ctx.stroke();
-            }
-        }
+        const { makeImage } = await Promise.resolve().then(() => __importStar(require('./makeImage')));
+        await makeImage(ctx, props);
         return undefined;
     }
 }