@jbrowse/plugin-alignments 2.16.1 → 2.18.0

package/esm/SNPCoverageRenderer/SNPCoverageRenderer.js

@@ -1,24 +1,30 @@
-import { createJBrowseTheme } from '@jbrowse/core/ui';
-import { featureSpanPx, bpSpanPx } from '@jbrowse/core/util';
 import { readConfObject } from '@jbrowse/core/configuration';
-import { getOrigin, getScale, WiggleBaseRenderer, YSCALEBAR_LABEL_OFFSET, } from '@jbrowse/plugin-wiggle';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { bpSpanPx, featureSpanPx } from '@jbrowse/core/util';
+import { checkStopToken } from '@jbrowse/core/util/stopToken';
+import { WiggleBaseRenderer, YSCALEBAR_LABEL_OFFSET, getOrigin, getScale, } from '@jbrowse/plugin-wiggle';
+import { alphaColor } from '../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;
 export default class SNPCoverageRenderer extends WiggleBaseRenderer {
-    // note: the snps are drawn on linear scale even if the data is drawn in log
-    // scape hence the two different scales being used
     async draw(ctx, props) {
-        const { features, regions, bpPerPx, displayCrossHatches, modificationTagMap = {}, scaleOpts, height: unadjustedHeight, theme: configTheme, config: cfg, ticks, } = 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 = createJBrowseTheme(configTheme);
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
-        // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
-        // wiggle display, and makes the height of the actual drawn area add
-        // "padding" to the top and bottom of the display
         const offset = YSCALEBAR_LABEL_OFFSET;
         const height = unadjustedHeight - offset * 2;
         const opts = { ...scaleOpts, range: [0, height] };
         const viewScale = getScale(opts);
-        // clipping and insertion indicators, uses a smaller height/2 scale
         const indicatorViewScale = getScale({
             ...opts,
             range: [0, height / 2],
@@ -30,10 +36,8 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts');
         const drawArcs = readConfObject(cfg, 'drawArcs');
         const drawIndicators = readConfObject(cfg, 'drawIndicators');
-        // get the y coordinate that we are plotting at, this can be log scale
         const toY = (n) => height - (viewScale(n) || 0) + offset;
         const toHeight = (n) => toY(originY) - toY(n);
-        // used specifically for indicator
         const toY2 = (n) => height - (indicatorViewScale(n) || 0) + offset;
         const toHeight2 = (n) => toY2(originLinear) - toY2(n);
         const { bases } = theme.palette;
@@ -46,62 +50,155 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
             softclip: 'blue',
             hardclip: 'red',
             total: readConfObject(cfg, 'color'),
-            meth: 'red',
-            unmeth: 'blue',
+            mod_NONE: 'blue',
+            cpg_meth: 'red',
+            cpg_unmeth: 'blue',
         };
         const feats = [...features.values()];
-        const coverage = feats.filter(f => f.get('type') !== 'skip');
-        const skips = feats.filter(f => f.get('type') === 'skip');
-        // Use two pass rendering, which helps in visualizing the SNPs at higher
-        // bpPerPx First pass: draw the gray background
         ctx.fillStyle = colorForBase.total;
-        for (const feature of coverage) {
+        let start = performance.now();
+        for (const feature of feats) {
+            if (feature.get('type') === 'skip') {
+                continue;
+            }
             const [leftPx, rightPx] = 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) {
+                checkStopToken(stopToken);
+                start = performance.now();
+            }
         }
-        // Keep track of previous total which we will use it to draw the interbase
-        // indicator (if there is a sudden clip, there will be no read coverage but
-        // there will be "clip" coverage) at that position beyond the read. if the
-        // clip is right at a block boundary then prevTotal will not be available,
-        // so this is a best attempt to plot interbase indicator at the "cliffs"
         let prevTotal = 0;
-        // extraHorizontallyFlippedOffset is used to draw interbase items, which
-        // are located to the left when forward and right when reversed
         const extraHorizontallyFlippedOffset = region.reversed ? 1 / bpPerPx : 0;
-        // 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 (const feature of coverage) {
+        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) {
+                checkStopToken(stopToken);
+            }
+            if (feature.get('type') === 'skip') {
+                continue;
+            }
             const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-            const score = feature.get('score');
             const snpinfo = feature.get('snpinfo');
             const w = Math.max(rightPx - leftPx, 1);
-            const totalScore = snpinfo.total;
-            const keys = Object.keys(snpinfo.cov).sort();
-            let curr = 0;
-            for (const base of keys) {
-                const { total } = snpinfo.cov[base];
-                ctx.fillStyle =
-                    colorForBase[base] ||
-                        modificationTagMap[base.replace('mod_', '')] ||
-                        'black';
-                const height = toHeight(score);
-                const bottom = toY(score) + height;
-                ctx.fillRect(Math.round(leftPx), bottom - ((total + curr) / score) * height, w, (total / score) * height);
-                curr += total;
+            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 = 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 = 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);
-            const indicatorHeight = 4.5;
             if (drawInterbaseCounts) {
                 let curr = 0;
                 for (const base of interbaseEvents) {
-                    const { total } = snpinfo.noncov[base];
+                    const { entryDepth } = snpinfo.noncov[base];
                     const r = 0.6;
                     ctx.fillStyle = colorForBase[base];
-                    ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, indicatorHeight + toHeight2(curr), r * 2, toHeight2(total));
-                    curr += total;
+                    ctx.fillRect(leftPx - r + extraHorizontallyFlippedOffset, INTERBASE_INDICATOR_HEIGHT + toHeight2(curr), r * 2, toHeight2(entryDepth));
+                    curr += entryDepth;
                 }
             }
             if (drawIndicators) {
@@ -109,48 +206,44 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
                 let max = 0;
                 let maxBase = '';
                 for (const base of interbaseEvents) {
-                    const { total } = snpinfo.noncov[base];
-                    accum += total;
-                    if (total > max) {
-                        max = total;
+                    const { entryDepth } = snpinfo.noncov[base];
+                    accum += entryDepth;
+                    if (entryDepth > max) {
+                        max = entryDepth;
                         maxBase = base;
                     }
                 }
-                // avoid drawing a bunch of indicators if coverage is very low e.g.
-                // less than 7, uses the prev total in the case of the "cliff"
-                const indicatorComparatorScore = Math.max(totalScore, prevTotal);
+                const indicatorComparatorScore = Math.max(score0, prevTotal);
                 if (accum > indicatorComparatorScore * indicatorThreshold &&
-                    indicatorComparatorScore > 7) {
+                    indicatorComparatorScore > MINIMUM_INTERBASE_INDICATOR_READ_DEPTH) {
                     ctx.fillStyle = colorForBase[maxBase];
                     ctx.beginPath();
                     const l = leftPx + extraHorizontallyFlippedOffset;
-                    ctx.moveTo(l - 3.5, 0);
-                    ctx.lineTo(l + 3.5, 0);
-                    ctx.lineTo(l, indicatorHeight);
+                    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 = totalScore;
+            prevTotal = score0;
         }
         if (drawArcs) {
-            for (const f of skips) {
-                const [left, right] = bpSpanPx(f.get('start'), f.get('end'), region, bpPerPx);
+            for (const f of feats) {
+                if (f.get('type') !== 'skip') {
+                    continue;
+                }
+                const s = f.get('start');
+                const e = f.get('end');
+                const [left, right] = bpSpanPx(s, e, region, bpPerPx);
                 ctx.beginPath();
-                const str = f.get('strand');
-                const xs = f.get('xs');
+                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 (xs === '+') {
-                    ctx.strokeStyle = pos;
-                }
-                else if (xs === '-') {
-                    ctx.strokeStyle = neg;
-                }
-                else if (str === 1) {
+                if (effectiveStrand === 1) {
                     ctx.strokeStyle = pos;
                 }
-                else if (str === -1) {
+                else if (effectiveStrand === -1) {
                     ctx.strokeStyle = neg;
                 }
                 else {
@@ -165,12 +258,12 @@ export default class SNPCoverageRenderer extends WiggleBaseRenderer {
         if (displayCrossHatches) {
             ctx.lineWidth = 1;
             ctx.strokeStyle = 'rgba(140,140,140,0.8)';
-            ticks.values.forEach(tick => {
+            for (const tick of ticks.values) {
                 ctx.beginPath();
                 ctx.moveTo(0, Math.round(toY(tick)));
                 ctx.lineTo(width, Math.round(toY(tick)));
                 ctx.stroke();
-            });
+            }
         }
         return undefined;
     }

package/esm/SNPCoverageRenderer/configSchema.d.ts

@@ -1,39 +1,24 @@
 declare const SNPCoverageRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     clipColor: {
         type: string;
         description: string;
         defaultValue: string;
     };
-    /**
-     * #slot
-     */
     indicatorThreshold: {
         type: string;
         description: string;
         defaultValue: number;
     };
-    /**
-     * #slot
-     */
     drawArcs: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-    /**
-     * #slot
-     */
     drawInterbaseCounts: {
         type: string;
         description: string;
         defaultValue: boolean;
     };
-    /**
-     * #slot
-     */
     drawIndicators: {
         type: string;
         description: string;

package/esm/SNPCoverageRenderer/configSchema.js

@@ -1,44 +1,26 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config SNPCoverageRenderer
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 const SNPCoverageRenderer = ConfigurationSchema('SNPCoverageRenderer', {
-    /**
-     * #slot
-     */
     clipColor: {
         type: 'color',
         description: 'the color of the clipping marker',
         defaultValue: 'red',
     },
-    /**
-     * #slot
-     */
     indicatorThreshold: {
         type: 'number',
         description: 'the proportion of reads containing a insertion/clip indicator',
         defaultValue: 0.4,
     },
-    /**
-     * #slot
-     */
     drawArcs: {
         type: 'boolean',
         description: 'Draw sashimi-style arcs for intron features',
         defaultValue: true,
     },
-    /**
-     * #slot
-     */
     drawInterbaseCounts: {
         type: 'boolean',
         description: 'draw count "upsidedown histogram" of the interbase events that don\'t contribute to the coverage count so are not drawn in the normal histogram',
         defaultValue: true,
     },
-    /**
-     * #slot
-     */
     drawIndicators: {
         type: 'boolean',
         description: 'draw a triangular indicator where an event has been detected',

package/esm/SNPCoverageRenderer/index.d.ts

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

package/esm/SNPCoverageRenderer/index.js

@@ -1,6 +1,6 @@
-import configSchema from './configSchema';
-import SNPCoverageRenderer from './SNPCoverageRenderer';
 import { WiggleRendering } from '@jbrowse/plugin-wiggle';
+import SNPCoverageRenderer from './SNPCoverageRenderer';
+import configSchema from './configSchema';
 export default function register(pluginManager) {
     pluginManager.addRendererType(() => new SNPCoverageRenderer({
         name: 'SNPCoverageRenderer',

package/esm/index.d.ts

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

package/esm/index.js

@@ -1,19 +1,19 @@
 import Plugin from '@jbrowse/core/Plugin';
-import BamAdapterF from './CramAdapter';
+import AlignmentsFeatureWidgetF from './AlignmentsFeatureDetail';
+import AlignmentsTrackF from './AlignmentsTrack';
 import CramAdapterF from './BamAdapter';
+import BamAdapterF from './CramAdapter';
+import GuessAlignmentsTypesF from './GuessAlignmentsTypes';
 import HtsgetBamAdapterF from './HtsgetBamAdapter';
-import SNPCoverageAdapterF from './SNPCoverageAdapter';
-import SNPCoverageRendererF from './SNPCoverageRenderer';
-import PileupRendererF from './PileupRenderer';
 import LinearAlignmentsDisplayF from './LinearAlignmentsDisplay';
-import LinearSNPCoverageDisplayF from './LinearSNPCoverageDisplay';
+import LinearPileupDisplayF from './LinearPileupDisplay';
 import LinearReadArcsDisplayF from './LinearReadArcsDisplay';
 import LinearReadCloudDisplayF from './LinearReadCloudDisplay';
-import AlignmentsTrackF from './AlignmentsTrack';
-import AlignmentsFeatureWidgetF from './AlignmentsFeatureDetail';
+import LinearSNPCoverageDisplayF from './LinearSNPCoverageDisplay';
 import PileupRPCMethodsF from './PileupRPC';
-import GuessAlignmentsTypesF from './GuessAlignmentsTypes';
-import LinearPileupDisplayF from './LinearPileupDisplay';
+import PileupRendererF from './PileupRenderer';
+import SNPCoverageAdapterF from './SNPCoverageAdapter';
+import SNPCoverageRendererF from './SNPCoverageRenderer';
 export default class AlignmentsPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -42,5 +42,5 @@ export default class AlignmentsPlugin extends Plugin {
         });
     }
 }
-export { linearPileupDisplayStateModelFactory, linearPileupDisplayConfigSchemaFactory, SharedLinearPileupDisplayMixin, } from './LinearPileupDisplay';
+export { SharedLinearPileupDisplayMixin, linearPileupDisplayConfigSchemaFactory, linearPileupDisplayStateModelFactory, } from './LinearPileupDisplay';
 export * as MismatchParser from './MismatchParser';

package/esm/shared/afterAttach.d.ts

@@ -1,2 +1,2 @@
-import { IAnyStateTreeNode } from 'mobx-state-tree';
+import type { IAnyStateTreeNode } from 'mobx-state-tree';
 export declare function doAfterAttach<T extends IAnyStateTreeNode>(self: T, cb: (self: T, ctx: CanvasRenderingContext2D, width: number, height: number) => void): void;

package/esm/shared/afterAttach.js

@@ -24,14 +24,12 @@ export function doAfterAttach(self, cb) {
         self.setLastDrawnOffsetPx(view.offsetPx);
         self.setLastDrawnBpPerPx(view.bpPerPx);
     }
-    // first autorun instantly draws if bpPerPx changes
     createAutorun(self, async () => {
         const view = getContainingView(self);
         if (view.bpPerPx !== self.lastDrawnBpPerPx) {
             draw(view);
         }
     });
-    // second autorun draws after delay 1000 e.g. if offsetPx changes
     createAutorun(self, async () => {
         const view = getContainingView(self);
         draw(view);

package/esm/shared/color.d.ts

@@ -1,5 +1,4 @@
-import { Instance } from 'mobx-state-tree';
-import { ChainStats } from './fetchChains';
+import type { ChainStats } from './fetchChains';
 export declare const fillColor: {
     color_fwd_strand_not_proper: string;
     color_rev_strand_not_proper: string;
@@ -57,12 +56,3 @@ export declare function getPairedOrientationColorOrDefault(f: {
 export declare function getPairedOrientationColor(f: {
     pair_orientation?: string;
 }): readonly [string, string];
-export interface ExtraColorBy {
-    custom?: Record<string, string>;
-}
-export declare const ColorByModel: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IModelType<{
-    type: import("mobx-state-tree").ISimpleType<string>;
-    tag: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
-    extra: import("mobx-state-tree").IType<any, any, any>;
-}, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-export type IColorByModel = Instance<typeof ColorByModel>;

package/esm/shared/color.js

@@ -1,4 +1,3 @@
-import { types } from 'mobx-state-tree';
 import { orientationTypes, pairMap } from '../util';
 export const fillColor = {
     color_fwd_strand_not_proper: '#ECC8C8',
@@ -19,12 +18,6 @@ export const fillColor = {
     color_shortinsert: 'pink',
     color_unknown: 'grey',
 };
-// manually calculated by running
-// const color = require('color')
-// Object.fromEntries(Object.entries(fillColor).map(([key,val])=>{
-//   return [key, color(val).darken('0.3').hex()]
-// }))
-// this avoids (expensive) use of Color module at runtime
 export const strokeColor = {
     color_fwd_strand_not_proper: '#CA6767',
     color_rev_strand_not_proper: '#7272AA',
@@ -61,8 +54,6 @@ export function getPairedInsertSizeColor(f1, f2, stats) {
     }
 }
 const defaultColor = [fillColor.color_unknown, fillColor.color_unknown];
-// return color scheme with both insert size and orientation coloring,
-// prioritzing orientation coloring
 export function getPairedInsertSizeAndOrientationColor(f1, f2, stats) {
     return (getPairedOrientationColorOrDefault(f1) ||
         getPairedInsertSizeColor(f1, f2, stats) ||
@@ -79,8 +70,3 @@ export function getPairedOrientationColorOrDefault(f) {
 export function getPairedOrientationColor(f) {
     return getPairedOrientationColorOrDefault(f) || defaultColor;
 }
-export const ColorByModel = types.maybe(types.model({
-    type: types.string,
-    tag: types.maybe(types.string),
-    extra: types.frozen(),
-}));

package/{dist/shared → esm/shared/components}/BaseDisplayComponent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { LinearReadCloudDisplayModel } from '../LinearReadCloudDisplay/model';
-import { LinearReadArcsDisplayModel } from '../LinearReadArcsDisplay/model';
+import type { LinearReadArcsDisplayModel } from '../../LinearReadArcsDisplay/model';
+import type { LinearReadCloudDisplayModel } from '../../LinearReadCloudDisplay/model';
 declare const BaseDisplayComponent: ({ model, children, }: {
     model: LinearReadArcsDisplayModel | LinearReadCloudDisplayModel;
     children?: React.ReactNode;

package/esm/shared/{BaseDisplayComponent.js → components/BaseDisplayComponent.js}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
-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';
+import { BlockMsg } from '@jbrowse/plugin-linear-genome-view';
 import { Button, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     loading: {
         backgroundColor: theme.palette.background.default,
@@ -18,21 +18,22 @@ const useStyles = makeStyles()(theme => ({
         textAlign: 'center',
     },
 }));
-const BaseDisplayComponent = observer(function ({ model, children, }) {
-    const { error, regionTooLarge } = model;
-    return error ? (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(Tooltip, { title: "Reload" },
+const BlockError = observer(function ({ model, }) {
+    const { error } = model;
+    return (React.createElement(BlockMsg, { message: `${error}`, severity: "error", action: React.createElement(Tooltip, { title: "Reload" },
             React.createElement(Button, { "data-testid": "reload_button", onClick: () => {
                     model.reload();
-                } }, "Reload")) })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
+                } }, "Reload")) }));
+});
+const BaseDisplayComponent = observer(function ({ model, children, }) {
+    const { error, regionTooLarge } = model;
+    return error ? (React.createElement(BlockError, { model: model })) : regionTooLarge ? (model.regionCannotBeRendered()) : (React.createElement(DataDisplay, { model: model }, children));
 });
 const DataDisplay = observer(function ({ model, children, }) {
     const { drawn, loading } = model;
     const view = getContainingView(model);
     const left = (model.lastDrawnOffsetPx || 0) - view.offsetPx;
-    return (
-    // this data-testid is located here because changing props on the canvas
-    // itself is very sensitive to triggering ref invalidation
-    React.createElement("div", { "data-testid": `drawn-${drawn}` },
+    return (React.createElement("div", { "data-testid": `drawn-${drawn}` },
         React.createElement("div", { style: { position: 'absolute', left } }, children),
         left !== 0 || loading ? React.createElement(LoadingBar, { model: model }) : null));
 });

package/{dist/shared → esm/shared/components}/FilterByTagDialog.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IFilter } from '.';
+import type { FilterBy } from '../types';
 declare const FilterByTagDialog: (props: {
     model: {
-        filterBy: IFilter;
-        setFilterBy: (arg: IFilter) => void;
+        filterBy: FilterBy;
+        setFilterBy: (arg: FilterBy) => void;
     };
     handleClose: () => void;
 }) => React.JSX.Element;