@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/dist/LinearSNPCoverageDisplay/models/model.js

@@ -8,6 +8,7 @@ const mobx_1 = require("mobx");
 const configuration_1 = require("@jbrowse/core/configuration");
 const plugin_wiggle_1 = require("@jbrowse/plugin-wiggle");
 const util_1 = require("@jbrowse/core/util");
+const serializableFilterChain_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain"));
 // locals
 const Tooltip_1 = __importDefault(require("../components/Tooltip"));
 const shared_1 = require("../../shared");
@@ -49,6 +50,10 @@ function stateModelFactory(pluginManager, configSchema) {
             type: mobx_state_tree_1.types.string,
             tag: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
         })),
+        /**
+         * #property
+         */
+        jexlFilters: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.array(mobx_state_tree_1.types.string), []),
     }))
         .volatile(() => ({
         modificationTagMap: mobx_1.observable.map({}),
@@ -73,6 +78,12 @@ function stateModelFactory(pluginManager, configSchema) {
         setColorBy(colorBy) {
             self.colorBy = (0, mobx_state_tree_1.cast)(colorBy);
         },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = (0, mobx_state_tree_1.cast)(filters);
+        },
         /**
          * #action
          */
@@ -147,6 +158,7 @@ function stateModelFactory(pluginManager, configSchema) {
                 return {
                     ...superProps,
                     notReady: !this.ready,
+                    filters: self.filters,
                     modificationTagMap: Object.fromEntries(modificationTagMap.toJSON()),
                     // must use getSnapshot because otherwise changes to e.g. just the
                     // colorBy.type are not read
@@ -269,6 +281,12 @@ function stateModelFactory(pluginManager, configSchema) {
                     },
                 ];
             },
+            /**
+             * #getter
+             */
+            get filters() {
+                return new serializableFilterChain_1.default({ filters: self.jexlFilters });
+            },
         };
     });
 }

package/dist/MismatchParser/index.js

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

package/dist/PileupRenderer/PileupRenderer.js

@@ -1,27 +1,4 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -81,7 +58,6 @@ class PileupRenderer extends BoxRendererType_1.default {
             : undefined;
         const width = (region.end - region.start) / bpPerPx;
         const height = Math.max(layout.getTotalHeight(), 1);
-        const Color = await Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
         const res = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => (0, makeImageData_1.makeImageData)({
             ctx,
             layoutRecords: layoutRecords.filter(util_1.notEmpty),
@@ -91,7 +67,6 @@ class PileupRenderer extends BoxRendererType_1.default {
                 layout,
                 features,
                 regionSequence,
-                Color,
             },
         }));
         const results = await super.render({

package/dist/PileupRenderer/colorBy.js

@@ -12,7 +12,7 @@ function colorByInsertSize(feature) {
 }
 exports.colorByInsertSize = colorByInsertSize;
 function colorByMappingQuality(feature) {
-    return `hsl(${feature.get('mq')},50%,50%)`;
+    return `hsl(${feature.get('score')},50%,50%)`;
 }
 exports.colorByMappingQuality = colorByMappingQuality;
 function getOrientation(feature, config) {

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

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

package/dist/PileupRenderer/components/PileupRendering.js

@@ -30,7 +30,7 @@ const mobx_react_1 = require("mobx-react");
 // used so that user can click-away-from-feature below the laid out features
 // (issue #1248)
 const canvasPadding = 100;
-function PileupRendering(props) {
+const PileupRendering = (0, mobx_react_1.observer)(function (props) {
     var _a;
     const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
     const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel;
@@ -133,10 +133,8 @@ function PileupRendering(props) {
     }
     function callMouseHandler(handlerName, event) {
         // @ts-expect-error
-        // eslint-disable-next-line react/destructuring-assignment
         const featureHandler = props[`onFeature${handlerName}`];
         // @ts-expect-error
-        // eslint-disable-next-line react/destructuring-assignment
         const canvasHandler = props[`on${handlerName}`];
         if (featureHandler && featureIdUnderMouse) {
             featureHandler(event, featureIdUnderMouse);
@@ -157,5 +155,5 @@ function PileupRendering(props) {
             .join('-')}`, style: { position: 'relative', width: canvasWidth, height } },
         react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
         react_1.default.createElement("canvas", { "data-testid": "pileup_overlay_canvas", width: canvasWidth, height: height + canvasPadding, style: { position: 'absolute', left: 0, top: 0 }, className: "highlightOverlayCanvas", ref: highlightOverlayCanvas, onMouseDown: event => onMouseDown(event), onMouseEnter: event => onMouseEnter(event), onMouseOut: event => onMouseOut(event), onMouseOver: event => onMouseOver(event), onMouseUp: event => onMouseUp(event), onMouseLeave: event => onMouseLeave(event), onMouseMove: event => mouseMove(event), onClick: event => onClick(event), onContextMenu: event => onContextMenu(event), onFocus: () => { }, onBlur: () => { } })));
-}
-exports.default = (0, mobx_react_1.observer)(PileupRendering);
+});
+exports.default = PileupRendering;

package/dist/PileupRenderer/getAlignmentShapeColor.js

@@ -39,7 +39,7 @@ function getAlignmentShapeColor({ colorType, tag, feature, config, defaultColor,
                 }[val] || 'color_nostrand'];
             }
             else {
-                return colorTagMap[val] || color_1.fillColor['color_nostrand'];
+                return colorTagMap[val] || color_1.fillColor.color_nostrand;
             }
         }
         case 'insertSizeAndPairOrientation':

package/dist/PileupRenderer/layoutFeature.js

@@ -10,8 +10,7 @@ function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip, heightP
         const mismatches = feature.get('mismatches');
         const seq = feature.get('seq');
         if (seq) {
-            for (let i = 0; i < mismatches.length; i += 1) {
-                const { type, start, cliplen = 0 } = mismatches[i];
+            for (const { type, start, cliplen = 0 } of mismatches) {
                 if (type === 'softclip') {
                     start === 0 ? (expansionBefore = cliplen) : (expansionAfter = cliplen);
                 }

package/dist/PileupRenderer/makeImageData.d.ts

@@ -1,8 +1,6 @@
 import { Feature } from '@jbrowse/core/util';
 import { RenderArgsDeserializedWithFeaturesAndLayout } from './PileupRenderer';
-export interface RenderArgsWithColor extends RenderArgsDeserializedWithFeaturesAndLayout {
-    Color: Awaited<typeof import('color')>;
-}
+export type RenderArgsWithColor = RenderArgsDeserializedWithFeaturesAndLayout;
 interface LayoutFeature {
     heightPx: number;
     topPx: number;

package/dist/PileupRenderer/renderMethylation.js

@@ -4,11 +4,12 @@ exports.renderMethylation = void 0;
 const util_1 = require("@jbrowse/core/util");
 const MismatchParser_1 = require("../MismatchParser");
 const util_2 = require("./util");
+const colord_1 = require("@jbrowse/core/util/colord");
 // Color by methylation is slightly modified version of color by
 // modifications that focuses on CpG sites, with non-methylated CpG colored
 function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
     var _a, _b;
-    const { regionSequence, Color } = renderArgs;
+    const { regionSequence } = renderArgs;
     const { feature, topPx, heightPx } = feat;
     if (!regionSequence) {
         throw new Error('region sequence required for methylation');
@@ -23,15 +24,9 @@ function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth
     function getCol(k) {
         if (methBins[k]) {
             const p = methProbs[k] || 0;
-            return p > 0.5
-                ? Color('red')
-                    .alpha((p - 0.5) * 2)
-                    .hsl()
-                    .string()
-                : Color('blue')
-                    .alpha(1 - p * 2)
-                    .hsl()
-                    .string();
+            return (p > 0.5
+                ? (0, colord_1.colord)('red').alpha((p - 0.5) * 2)
+                : (0, colord_1.colord)('blue').alpha(1 - p * 2)).toHslString();
         }
         return undefined;
     }

package/dist/PileupRenderer/renderMismatches.d.ts

@@ -4,12 +4,8 @@ export declare function renderMismatches({ ctx, feat, renderArgs, minSubfeatureW
     ctx: CanvasRenderingContext2D;
     feat: LayoutFeature;
     renderArgs: RenderArgsWithColor;
-    colorForBase: {
-        [key: string]: string;
-    };
-    contrastForBase: {
-        [key: string]: string;
-    };
+    colorForBase: Record<string, string>;
+    contrastForBase: Record<string, string>;
     mismatchAlpha?: boolean;
     drawIndels?: boolean;
     drawSNPsMuted?: boolean;

package/dist/PileupRenderer/renderMismatches.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderMismatches = void 0;
 const util_1 = require("@jbrowse/core/util");
 const util_2 = require("./util");
+const colord_1 = require("@jbrowse/core/util/colord");
 function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInsertionIndicatorScale, mismatchAlpha, charWidth, charHeight, colorForBase, contrastForBase, canvasWidth, drawSNPsMuted, drawIndels = true, }) {
-    const { Color, bpPerPx, regions } = renderArgs;
+    const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
     const [region] = regions;
     const start = feature.get('start');
@@ -19,8 +20,7 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
     }
     // two pass rendering: first pass, draw all the mismatches except wide
     // insertion markers
-    for (let i = 0; i < mismatches.length; i += 1) {
-        const mismatch = mismatches[i];
+    for (const mismatch of mismatches) {
         const mstart = start + mismatch.start;
         const mlen = mismatch.length;
         const mbase = mismatch.base;
@@ -32,10 +32,9 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
                 const c = mismatchAlpha
                     ? mismatch.qual === undefined
                         ? baseColor
-                        : Color(baseColor)
+                        : (0, colord_1.colord)(baseColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
-                            .hsl()
-                            .string()
+                            .toHslString()
                     : baseColor;
                 (0, util_2.fillRect)(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, c);
             }
@@ -47,10 +46,9 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
                 ctx.fillStyle = mismatchAlpha
                     ? mismatch.qual === undefined
                         ? contrastColor
-                        : Color(contrastColor)
+                        : (0, colord_1.colord)(contrastColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
-                            .hsl()
-                            .string()
+                            .toHslString()
                     : contrastColor;
                 ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
             }
@@ -105,8 +103,7 @@ function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, largeInse
     }
     // second pass, draw wide insertion markers on top
     if (drawIndels) {
-        for (let i = 0; i < mismatches.length; i += 1) {
-            const mismatch = mismatches[i];
+        for (const mismatch of mismatches) {
             const mstart = start + mismatch.start;
             const mlen = mismatch.length;
             const [leftPx] = (0, util_1.bpSpanPx)(mstart, mstart + mlen, region, bpPerPx);

package/dist/PileupRenderer/renderModifications.js

@@ -5,6 +5,7 @@ const util_1 = require("@jbrowse/core/util");
 const MismatchParser_1 = require("../MismatchParser");
 const util_2 = require("../util");
 const util_3 = require("./util");
+const colord_1 = require("@jbrowse/core/util/colord");
 // render modifications stored in MM tag in BAM
 //
 // ML stores probabilities as array of numerics and MP is scaled phred scores
@@ -17,7 +18,7 @@ const util_3 = require("./util");
 // about low qual calls <20 approx
 function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWidth, }) {
     const { feature, topPx, heightPx } = feat;
-    const { Color, modificationTagMap = {} } = renderArgs;
+    const { modificationTagMap = {} } = renderArgs;
     const seq = feature.get('seq');
     if (!seq) {
         return;
@@ -33,17 +34,12 @@ function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, canvasWid
     let probIndex = 0;
     for (const { type, positions } of modifications) {
         const col = modificationTagMap[type] || 'black';
-        const base = Color(col);
+        const base = (0, colord_1.colord)(col);
         for (const readPos of (0, MismatchParser_1.getNextRefPos)(cigarOps, positions)) {
             const r = start + readPos;
             const [leftPx, rightPx] = (0, util_1.bpSpanPx)(r, r + 1, region, bpPerPx);
             const prob = (probabilities === null || probabilities === void 0 ? void 0 : probabilities[probIndex]) || 0;
-            const c = prob !== 1
-                ? base
-                    .alpha(prob + 0.1)
-                    .hsl()
-                    .string()
-                : col;
+            const c = prob !== 1 ? base.alpha(prob + 0.1).toHslString() : col;
             const w = rightPx - leftPx + 0.5;
             (0, util_3.fillRect)(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
             probIndex++;

package/dist/PileupRenderer/renderSoftClipping.js

@@ -16,32 +16,33 @@ function renderSoftClipping({ ctx, feat, renderArgs, config, theme, colorForBase
     if (!(seq && mismatches)) {
         return;
     }
-    mismatches
-        .filter(mismatch => mismatch.type === 'softclip')
-        .forEach(mismatch => {
-        const len = mismatch.cliplen || 0;
-        const s = feature.get('start');
-        const start = mismatch.start === 0 ? s - len : s + mismatch.start;
-        for (let k = 0; k < len; k += 1) {
-            const base = seq.charAt(k + mismatch.start);
-            // If softclip length+start is longer than sequence, no need to
-            // continue showing base
-            if (!base) {
-                return;
-            }
-            const s0 = start + k;
-            const [leftPx, rightPx] = (0, util_1.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;
-            (0, util_2.fillRect)(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth);
-            if (widthPx >= charWidth && heightPx >= charHeight - 5) {
-                ctx.fillStyle = theme.palette.getContrastText(baseColor);
-                ctx.fillText(base, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+    const heightLim = charHeight - 2;
+    for (const mismatch of mismatches) {
+        if (mismatch.type === 'softclip') {
+            const len = mismatch.cliplen || 0;
+            const s = feature.get('start');
+            const start = mismatch.start === 0 ? s - len : s + mismatch.start;
+            for (let k = 0; k < len; k += 1) {
+                const base = seq.charAt(k + mismatch.start);
+                // If softclip length+start is longer than sequence, no need to
+                // continue showing base
+                if (!base) {
+                    return;
+                }
+                const s0 = start + k;
+                const [leftPx, rightPx] = (0, util_1.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;
+                (0, util_2.fillRect)(ctx, leftPx, topPx, widthPx, heightPx, canvasWidth);
+                if (widthPx >= charWidth && heightPx >= heightLim) {
+                    ctx.fillStyle = theme.palette.getContrastText(baseColor);
+                    ctx.fillText(base, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+                }
             }
         }
-    });
+    }
 }
 exports.renderSoftClipping = renderSoftClipping;

package/dist/PileupRenderer/sortUtil.js

@@ -59,8 +59,8 @@ const sortFeature = (features, sortedBy) => {
             featuresInCenterLine.sort((a, b) => {
                 const aMismatch = baseMap.get(a.id());
                 const bMismatch = baseMap.get(b.id());
-                const acode = bMismatch && bMismatch.base.toUpperCase();
-                const bcode = aMismatch && aMismatch.base.toUpperCase();
+                const acode = bMismatch === null || bMismatch === void 0 ? void 0 : bMismatch.base.toUpperCase();
+                const bcode = aMismatch === null || aMismatch === void 0 ? void 0 : aMismatch.base.toUpperCase();
                 if (acode === bcode && acode === '*') {
                     // @ts-expect-error
                     return aMismatch.length - bMismatch.length;

package/dist/SNPCoverageAdapter/util.d.ts

@@ -1,18 +1,14 @@
-export interface SkipMap {
-    [key: string]: {
-        score: number;
-        feature: unknown;
-        start: number;
-        end: number;
-        strand: number;
-        xs: string;
-    };
-}
+export type SkipMap = Record<string, {
+    score: number;
+    feature: unknown;
+    start: number;
+    end: number;
+    strand: number;
+    xs: string;
+}>;
 export interface BinType {
     total?: number;
-    strands?: {
-        [key: string]: number;
-    };
+    strands?: Record<string, number>;
 }
 export interface Bin {
     refbase?: string;

package/dist/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -61,8 +61,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
         // Use two pass rendering, which helps in visualizing the SNPs at higher
         // bpPerPx First pass: draw the gray background
         ctx.fillStyle = colorForBase.total;
-        for (let i = 0; i < coverage.length; i++) {
-            const feature = coverage[i];
+        for (const feature of coverage) {
             const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
             const w = rightPx - leftPx + fudgeFactor;
             const score = feature.get('score');
@@ -80,8 +79,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
         // Second pass: draw the SNP data, and add a minimum feature width of 1px
         // which can be wider than the actual bpPerPx This reduces overdrawing of
         // the grey background over the SNPs
-        for (let i = 0; i < coverage.length; i++) {
-            const feature = coverage[i];
+        for (const feature of coverage) {
             const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);
             const score = feature.get('score');
             const snpinfo = feature.get('snpinfo');
@@ -89,8 +87,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
             const totalScore = snpinfo.total;
             const keys = Object.keys(snpinfo.cov).sort();
             let curr = 0;
-            for (let i = 0; i < keys.length; i++) {
-                const base = keys[i];
+            for (const base of keys) {
                 const { total } = snpinfo.cov[base];
                 ctx.fillStyle =
                     colorForBase[base] ||
@@ -105,8 +102,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
             const indicatorHeight = 4.5;
             if (drawInterbaseCounts) {
                 let curr = 0;
-                for (let i = 0; i < interbaseEvents.length; i++) {
-                    const base = interbaseEvents[i];
+                for (const base of interbaseEvents) {
                     const { total } = snpinfo.noncov[base];
                     const r = 0.6;
                     ctx.fillStyle = colorForBase[base];
@@ -118,8 +114,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
                 let accum = 0;
                 let max = 0;
                 let maxBase = '';
-                for (let i = 0; i < interbaseEvents.length; i++) {
-                    const base = interbaseEvents[i];
+                for (const base of interbaseEvents) {
                     const { total } = snpinfo.noncov[base];
                     accum += total;
                     if (total > max) {
@@ -144,8 +139,7 @@ class SNPCoverageRenderer extends plugin_wiggle_1.WiggleBaseRenderer {
             prevTotal = totalScore;
         }
         if (drawArcs) {
-            for (let i = 0; i < skips.length; i++) {
-                const f = skips[i];
+            for (const f of skips) {
                 const [left, right] = (0, util_1.bpSpanPx)(f.get('start'), f.get('end'), region, bpPerPx);
                 ctx.beginPath();
                 const str = f.get('strand');

package/dist/index.d.ts

@@ -4,6 +4,6 @@ export default class AlignmentsPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;
 }
-export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, } from './LinearPileupDisplay';
+export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, SharedLinearPileupDisplayMixin, } from './LinearPileupDisplay';
 export { type LinearPileupDisplayModel } from './LinearPileupDisplay/model';
 export * as MismatchParser from './MismatchParser';

package/dist/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MismatchParser = exports.linearPileupDisplayConfigSchemaFactory = exports.linearPileupDisplayStateModelFactory = void 0;
+exports.MismatchParser = exports.SharedLinearPileupDisplayMixin = exports.linearPileupDisplayConfigSchemaFactory = exports.linearPileupDisplayStateModelFactory = void 0;
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const CramAdapter_1 = __importDefault(require("./CramAdapter"));
 const BamAdapter_1 = __importDefault(require("./BamAdapter"));
@@ -73,4 +73,5 @@ exports.default = AlignmentsPlugin;
 var LinearPileupDisplay_2 = require("./LinearPileupDisplay");
 Object.defineProperty(exports, "linearPileupDisplayStateModelFactory", { enumerable: true, get: function () { return LinearPileupDisplay_2.linearPileupDisplayStateModelFactory; } });
 Object.defineProperty(exports, "linearPileupDisplayConfigSchemaFactory", { enumerable: true, get: function () { return LinearPileupDisplay_2.linearPileupDisplayConfigSchemaFactory; } });
+Object.defineProperty(exports, "SharedLinearPileupDisplayMixin", { enumerable: true, get: function () { return LinearPileupDisplay_2.SharedLinearPileupDisplayMixin; } });
 exports.MismatchParser = __importStar(require("./MismatchParser"));

package/dist/shared/BaseDisplayComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model';
 import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model';
-declare const _default: ({ model, children, }: {
+declare const BaseDisplayComponent: ({ model, children, }: {
     model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel;
     children?: React.ReactNode;
 }) => React.JSX.Element | null;
-export default _default;
+export default BaseDisplayComponent;

package/dist/shared/BaseDisplayComponent.js

@@ -25,7 +25,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
         },
     };
 });
-exports.default = (0, mobx_react_1.observer)(function ({ model, children, }) {
+const BaseDisplayComponent = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
     return error ? (react_1.default.createElement(plugin_linear_genome_view_1.BlockMsg, { message: `${error}`, severity: "error", buttonText: "Reload", action: model.reload })) : regionTooLarge ? (model.regionCannotBeRendered()) : (react_1.default.createElement(DataDisplay, { model: model }, children));
 });
@@ -46,3 +46,4 @@ const LoadingBar = (0, mobx_react_1.observer)(function ({ model, }) {
     return (react_1.default.createElement("div", { className: classes.loading },
         react_1.default.createElement(ui_1.LoadingEllipses, { message: message })));
 });
+exports.default = BaseDisplayComponent;

package/dist/shared/FilterByTag.d.ts

@@ -1,19 +1,10 @@
 import React from 'react';
-interface FilterBy {
-    flagExclude: number;
-    flagInclude: number;
-    readName?: string;
-    tagFilter?: {
-        tag: string;
-        value: string;
-    };
-}
-declare function FilterByTagDlg(props: {
+import { IFilter } from '.';
+declare const FilterByTagDialog: (props: {
     model: {
-        filterBy: FilterBy;
-        setFilterBy: (arg: FilterBy) => void;
+        filterBy: IFilter;
+        setFilterBy: (arg: IFilter) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof FilterByTagDlg;
-export default _default;
+}) => React.JSX.Element;
+export default FilterByTagDialog;