@jbrowse/plugin-alignments 2.6.2 → 2.7.0

package/esm/LinearSNPCoverageDisplay/models/model.js

@@ -3,6 +3,7 @@ import { observable } from 'mobx';
 import { getConf, readConfObject, } from '@jbrowse/core/configuration';
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle';
 import { getContainingView } from '@jbrowse/core/util';
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
 // locals
 import Tooltip from '../components/Tooltip';
 import { FilterModel, getUniqueModificationValues } from '../../shared';
@@ -44,6 +45,10 @@ function stateModelFactory(pluginManager, configSchema) {
             type: types.string,
             tag: types.maybe(types.string),
         })),
+        /**
+         * #property
+         */
+        jexlFilters: types.optional(types.array(types.string), []),
     }))
         .volatile(() => ({
         modificationTagMap: observable.map({}),
@@ -68,6 +73,12 @@ function stateModelFactory(pluginManager, configSchema) {
         setColorBy(colorBy) {
             self.colorBy = cast(colorBy);
         },
+        /**
+         * #action
+         */
+        setJexlFilters(filters) {
+            self.jexlFilters = cast(filters);
+        },
         /**
          * #action
          */
@@ -142,6 +153,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
@@ -264,6 +276,12 @@ function stateModelFactory(pluginManager, configSchema) {
                     },
                 ];
             },
+            /**
+             * #getter
+             */
+            get filters() {
+                return new SerializableFilterChain({ filters: self.jexlFilters });
+            },
         };
     });
 }

package/esm/MismatchParser/index.js

@@ -146,8 +146,7 @@ export 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;
@@ -157,6 +156,7 @@ export 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) {
@@ -264,8 +264,7 @@ export function getModificationPositions(mm, fseq, fstrand) {
     const seq = fstrand === -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);
@@ -285,12 +284,11 @@ export 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/esm/PileupRenderer/PileupRenderer.js

@@ -53,7 +53,6 @@ export default class PileupRenderer extends BoxRendererType {
             : undefined;
         const width = (region.end - region.start) / bpPerPx;
         const height = Math.max(layout.getTotalHeight(), 1);
-        const Color = await import('color').then(f => f.default);
         const res = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData({
             ctx,
             layoutRecords: layoutRecords.filter(notEmpty),
@@ -63,7 +62,6 @@ export default class PileupRenderer extends BoxRendererType {
                 layout,
                 features,
                 regionSequence,
-                Color,
             },
         }));
         const results = await super.render({

package/esm/PileupRenderer/colorBy.js

@@ -8,7 +8,7 @@ export function colorByInsertSize(feature) {
         : `hsl(${Math.abs(feature.get('template_length')) / 10},50%,50%)`;
 }
 export function colorByMappingQuality(feature) {
-    return `hsl(${feature.get('mq')},50%,50%)`;
+    return `hsl(${feature.get('score')},50%,50%)`;
 }
 function getOrientation(feature, config) {
     const orientationType = readConfObject(config, 'orientationType');

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

@@ -5,7 +5,7 @@ import { observer } from '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 = observer(function (props) {
     var _a;
     const { onMouseMove, blockKey, displayModel, width, height, regions, bpPerPx, sortedBy, colorBy, filterBy, } = props;
     const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } = displayModel;
@@ -108,10 +108,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);
@@ -132,5 +130,5 @@ function PileupRendering(props) {
             .join('-')}`, style: { position: 'relative', width: canvasWidth, height } },
         React.createElement(PrerenderedCanvas, { ...props, style: { position: 'absolute', left: 0, top: 0 } }),
         React.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: () => { } })));
-}
-export default observer(PileupRendering);
+});
+export default PileupRendering;

package/esm/PileupRenderer/getAlignmentShapeColor.js

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

package/esm/PileupRenderer/layoutFeature.js

@@ -7,8 +7,7 @@ export function layoutFeature({ feature, layout, bpPerPx, region, showSoftClip,
         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/esm/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/esm/PileupRenderer/renderMethylation.js

@@ -1,11 +1,12 @@
 import { bpSpanPx } from '@jbrowse/core/util';
 import { getMethBins } from '../MismatchParser';
 import { fillRect } from './util';
+import { colord } from '@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
 export 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');
@@ -20,15 +21,9 @@ export function renderMethylation({ ctx, feat, region, bpPerPx, renderArgs, canv
     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
+                ? colord('red').alpha((p - 0.5) * 2)
+                : colord('blue').alpha(1 - p * 2)).toHslString();
         }
         return undefined;
     }

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

@@ -1,7 +1,8 @@
 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, }) {
-    const { Color, bpPerPx, regions } = renderArgs;
+    const { bpPerPx, regions } = renderArgs;
     const { heightPx, topPx, feature } = feat;
     const [region] = regions;
     const start = feature.get('start');
@@ -16,8 +17,7 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
     }
     // 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;
@@ -29,10 +29,9 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
                 const c = mismatchAlpha
                     ? mismatch.qual === undefined
                         ? baseColor
-                        : Color(baseColor)
+                        : colord(baseColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
-                            .hsl()
-                            .string()
+                            .toHslString()
                     : baseColor;
                 fillRect(ctx, Math.round(leftPx), topPx, widthPx, heightPx, canvasWidth, c);
             }
@@ -44,10 +43,9 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
                 ctx.fillStyle = mismatchAlpha
                     ? mismatch.qual === undefined
                         ? contrastColor
-                        : Color(contrastColor)
+                        : colord(contrastColor)
                             .alpha(Math.min(1, mismatch.qual / 50))
-                            .hsl()
-                            .string()
+                            .toHslString()
                     : contrastColor;
                 ctx.fillText(mbase, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
             }
@@ -102,8 +100,7 @@ export function renderMismatches({ ctx, feat, renderArgs, minSubfeatureWidth, la
     }
     // 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] = bpSpanPx(mstart, mstart + mlen, region, bpPerPx);

package/esm/PileupRenderer/renderModifications.js

@@ -2,6 +2,7 @@ import { bpSpanPx } from '@jbrowse/core/util';
 import { getModificationPositions, getModificationProbabilities, getNextRefPos, parseCigar, } from '../MismatchParser';
 import { getTagAlt } from '../util';
 import { fillRect } from './util';
+import { colord } from '@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
@@ -14,7 +15,7 @@ import { fillRect } from './util';
 // about low qual calls <20 approx
 export 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;
@@ -30,17 +31,12 @@ export function renderModifications({ ctx, feat, region, bpPerPx, renderArgs, ca
     let probIndex = 0;
     for (const { type, positions } of modifications) {
         const col = modificationTagMap[type] || 'black';
-        const base = Color(col);
+        const base = colord(col);
         for (const readPos of getNextRefPos(cigarOps, positions)) {
             const r = start + readPos;
             const [leftPx, rightPx] = 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;
             fillRect(ctx, leftPx, topPx, w, heightPx, canvasWidth, c);
             probIndex++;

package/esm/PileupRenderer/renderSoftClipping.js

@@ -13,31 +13,32 @@ export function renderSoftClipping({ ctx, feat, renderArgs, config, theme, color
     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] = 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);
-            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] = 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);
+                if (widthPx >= charWidth && heightPx >= heightLim) {
+                    ctx.fillStyle = theme.palette.getContrastText(baseColor);
+                    ctx.fillText(base, leftPx + (widthPx - charWidth) / 2 + 1, topPx + heightPx);
+                }
             }
         }
-    });
+    }
 }

package/esm/PileupRenderer/sortUtil.js

@@ -56,8 +56,8 @@ export 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/esm/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/esm/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -59,8 +59,7 @@ export default class SNPCoverageRenderer extends 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] = featureSpanPx(feature, region, bpPerPx);
             const w = rightPx - leftPx + fudgeFactor;
             const score = feature.get('score');
@@ -78,8 +77,7 @@ export default class SNPCoverageRenderer extends 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] = featureSpanPx(feature, region, bpPerPx);
             const score = feature.get('score');
             const snpinfo = feature.get('snpinfo');
@@ -87,8 +85,7 @@ export default class SNPCoverageRenderer extends 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] ||
@@ -103,8 +100,7 @@ export default class SNPCoverageRenderer extends 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];
@@ -116,8 +112,7 @@ export default class SNPCoverageRenderer extends 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) {
@@ -142,8 +137,7 @@ export default class SNPCoverageRenderer extends 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] = bpSpanPx(f.get('start'), f.get('end'), region, bpPerPx);
                 ctx.beginPath();
                 const str = f.get('strand');

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

@@ -40,5 +40,5 @@ export default class AlignmentsPlugin extends Plugin {
         ].map(f => f(pluginManager));
     }
 }
-export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, } from './LinearPileupDisplay';
+export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, SharedLinearPileupDisplayMixin, } from './LinearPileupDisplay';
 export * as MismatchParser from './MismatchParser';

package/esm/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/esm/shared/BaseDisplayComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
-import { BlockMsg } from '@jbrowse/plugin-linear-genome-view';
+import { BlockMsg, } from '@jbrowse/plugin-linear-genome-view';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getContainingView } from '@jbrowse/core/util';
@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => {
         },
     };
 });
-export default observer(function ({ model, children, }) {
+const BaseDisplayComponent = observer(function ({ model, children, }) {
     const { error, regionTooLarge } = model;
     return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", buttonText: "Reload", action: model.reload })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
 });
@@ -41,3 +41,4 @@ const LoadingBar = observer(function ({ model, }) {
     return (React.createElement("div", { className: classes.loading },
         React.createElement(LoadingEllipses, { message: message })));
 });
+export default BaseDisplayComponent;

package/esm/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;

package/esm/shared/FilterByTag.js

@@ -45,7 +45,7 @@ function Bitmask(props) {
                 React.createElement("label", { htmlFor: key }, name)));
         })));
 }
-function FilterByTagDlg(props) {
+const FilterByTagDialog = observer(function (props) {
     var _a, _b;
     const { model, handleClose } = props;
     const { classes } = useStyles();
@@ -74,9 +74,7 @@ function FilterByTagDlg(props) {
                         React.createElement(Bitmask, { flag: flagExclude, setFlag: setFlagExclude })))),
             React.createElement(Paper, { className: classes.paper, variant: "outlined" },
                 React.createElement(Typography, null, "Filter by tag name and value. Use * in the value field to get all reads containing any value for that tag. Example: filter tag name SA with value * to get all split/supplementary reads. Other examples include HP for haplotype, or RG for read group"),
-                React.createElement(TextField, { className: classes.field, value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: {
-                        maxLength: 2,
-                    }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '' }),
+                React.createElement(TextField, { className: classes.field, value: tag, onChange: event => setTag(event.target.value), placeholder: "Enter tag name", inputProps: { maxLength: 2 }, error: tag.length === 2 && !validTag, helperText: tag.length === 2 && !validTag ? 'Not a valid tag' : '' }),
                 React.createElement(TextField, { className: classes.field, value: tagValue, onChange: event => setTagValue(event.target.value), placeholder: "Enter tag value" })),
             React.createElement(Paper, { className: classes.paper, variant: "outlined" },
                 React.createElement(Typography, null, "Filter by read name"),
@@ -97,5 +95,5 @@ function FilterByTagDlg(props) {
                         handleClose();
                     } }, "Submit"),
                 React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-export default observer(FilterByTagDlg);
+});
+export default FilterByTagDialog;