@jbrowse/plugin-alignments 2.6.3 → 2.7.0

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

package/esm/shared/fetchChains.js

@@ -1,6 +1,7 @@
 import { getContainingTrack, getContainingView, getSession, } from '@jbrowse/core/util';
 import { getSnapshot } from 'mobx-state-tree';
 export async function fetchChains(self) {
+    // @ts-expect-error
     const { rpcSessionId: sessionId } = getContainingTrack(self);
     const { rpcManager } = getSession(self);
     const view = getContainingView(self);

package/esm/shared/index.d.ts

@@ -33,4 +33,13 @@ export declare const FilterModel: import("mobx-state-tree").IModelType<{
         value: import("mobx-state-tree").ISimpleType<string>;
     }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
 }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export interface IFilter {
+    flagExclude: number;
+    flagInclude: number;
+    readName?: string;
+    tagFilter?: {
+        tag: string;
+        value: string;
+    };
+}
 export {};

package/esm/util.d.ts

@@ -5,15 +5,9 @@ import { IAutorunOptions } from 'mobx';
 export declare function getTag(feature: Feature, tag: string): any;
 export declare function getTagAlt(feature: Feature, tag: string, alt: string): any;
 export declare const orientationTypes: {
-    fr: {
-        [key: string]: string;
-    };
-    rf: {
-        [key: string]: string;
-    };
-    ff: {
-        [key: string]: string;
-    };
+    fr: Record<string, string>;
+    rf: Record<string, string>;
+    ff: Record<string, string>;
 };
 export declare const pairMap: {
     readonly LR: "color_pair_lr";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -41,7 +41,6 @@
     "@mui/icons-material": "^5.0.1",
     "canvas2svg": "^1.0.16",
     "clone": "^2.1.2",
-    "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "fast-deep-equal": "^3.1.3",
     "generic-filehandle": "^3.0.0"
@@ -52,7 +51,7 @@
     "@jbrowse/plugin-wiggle": "^2.0.0",
     "@mui/material": "^5.0.0",
     "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
     "react": ">=16.8.0",
     "rxjs": "^7.0.0",
@@ -64,5 +63,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }