@jbrowse/plugin-wiggle 2.6.3 → 2.7.1

package/esm/drawLine.js

@@ -0,0 +1,69 @@
+import { readConfObject, } from '@jbrowse/core/configuration';
+import { clamp, featureSpanPx } from '@jbrowse/core/util';
+// locals
+import { getScale } from './util';
+const fudgeFactor = 0.3;
+const clipHeight = 2;
+export function drawLine(ctx, props) {
+    const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
+    const [region] = regions;
+    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 height = unadjustedHeight - offset * 2;
+    const clipColor = readConfObject(config, 'clipColor');
+    const scale = getScale({ ...scaleOpts, range: [0, height] });
+    const [niceMin, niceMax] = scale.domain();
+    const toY = (n) => clamp(height - (scale(n) || 0), 0, height) + offset;
+    let lastVal;
+    let prevLeftPx = -Infinity;
+    const reducedFeatures = [];
+    for (const feature of features.values()) {
+        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
+        // create reduced features, avoiding multiple features per px
+        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
+            reducedFeatures.push(feature);
+            prevLeftPx = leftPx;
+        }
+        const score = feature.get('score');
+        const lowClipping = score < niceMin;
+        const highClipping = score > niceMax;
+        const w = rightPx - leftPx + fudgeFactor;
+        const c = colorCallback(feature, score);
+        ctx.beginPath();
+        ctx.strokeStyle = c;
+        const startPos = lastVal !== undefined ? lastVal : score;
+        if (!region.reversed) {
+            ctx.moveTo(leftPx, toY(startPos));
+            ctx.lineTo(leftPx, toY(score));
+            ctx.lineTo(rightPx, toY(score));
+        }
+        else {
+            ctx.moveTo(rightPx, toY(startPos));
+            ctx.lineTo(rightPx, toY(score));
+            ctx.lineTo(leftPx, toY(score));
+        }
+        ctx.stroke();
+        lastVal = score;
+        if (highClipping) {
+            ctx.fillStyle = clipColor;
+            ctx.fillRect(leftPx, offset, w, clipHeight);
+        }
+        else if (lowClipping && scaleOpts.scaleType !== 'log') {
+            ctx.fillStyle = clipColor;
+            ctx.fillRect(leftPx, height - clipHeight, w, height);
+        }
+    }
+    if (displayCrossHatches) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
+        values.forEach(tick => {
+            ctx.beginPath();
+            ctx.moveTo(0, Math.round(toY(tick)));
+            ctx.lineTo(width, Math.round(toY(tick)));
+            ctx.stroke();
+        });
+    }
+    return { reducedFeatures };
+}

package/esm/drawXY.d.ts

@@ -0,0 +1,19 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import { Feature, Region } from '@jbrowse/core/util';
+import { ScaleOpts } from './util';
+export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
+    features: Map<string, Feature> | Feature[];
+    bpPerPx: number;
+    regions: Region[];
+    scaleOpts: ScaleOpts;
+    height: number;
+    ticks: {
+        values: number[];
+    };
+    config: AnyConfigurationModel;
+    displayCrossHatches: boolean;
+    offset?: number;
+    colorCallback: (f: Feature, score: number) => string;
+}): {
+    reducedFeatures: Feature[];
+};

package/esm/{drawxy.js → drawXY.js}

@@ -1,26 +1,22 @@
 import { readConfObject, } from '@jbrowse/core/configuration';
+import { colord } from '@jbrowse/core/util/colord';
 import { clamp, featureSpanPx } from '@jbrowse/core/util';
 // locals
-import { getOrigin, getScale } from './util';
-// avoid drawing negative width features for SVG exports
-function fillRectCtx(x, y, width, height, ctx, color) {
-    if (width < 0) {
-        x += width;
-        width = -width;
-    }
-    if (height < 0) {
-        y += height;
-        height = -height;
-    }
-    if (color) {
-        ctx.fillStyle = color;
-    }
-    ctx.fillRect(x, y, width, height);
+import { fillRectCtx, getOrigin, getScale } from './util';
+function lighten(color, amount) {
+    const hslColor = color.toHsl();
+    const l = hslColor.l * (1 + amount);
+    return colord({ ...hslColor, l: clamp(l, 0, 100) });
+}
+function darken(color, amount) {
+    const hslColor = color.toHsl();
+    const l = hslColor.l * (1 - amount);
+    return colord({ ...hslColor, l: clamp(l, 0, 100) });
 }
-const fudgeFactor = 0.4;
+const fudgeFactor = 0.3;
 const clipHeight = 2;
 export function drawXY(ctx, props) {
-    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, Color, } = props;
+    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = props;
     const [region] = regions;
     const width = (region.end - region.start) / bpPerPx;
     // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
@@ -58,7 +54,7 @@ export function drawXY(ctx, props) {
                     ? c
                     : c === lastCol
                         ? lastMix
-                        : (lastMix = Color(c).lighten(0.4).toString());
+                        : (lastMix = lighten(colord(c), 0.4).toHex());
                 fillRectCtx(leftPx, toY(max), w, getHeight(max), ctx, effectiveC);
                 lastCol = c;
             }
@@ -75,8 +71,8 @@ export function drawXY(ctx, props) {
             const effectiveC = crossingOrigin && summary
                 ? c === lastCol
                     ? lastMix
-                    : (lastMix = Color(colorCallback(feature, max))
-                        .mix(Color(colorCallback(feature, min)))
+                    : (lastMix = colord(colorCallback(feature, max))
+                        .mix(colord(colorCallback(feature, min)))
                         .toString())
                 : c;
             const w = Math.max(rightPx - leftPx + fudgeFactor, minSize);
@@ -101,7 +97,7 @@ export function drawXY(ctx, props) {
                     ? c
                     : c === lastCol
                         ? lastMix
-                        : (lastMix = Color(c).darken(0.4).toString());
+                        : (lastMix = darken(colord(c), 0.4).toHex());
                 fillRectCtx(leftPx, toY(min), w, getHeight(min), ctx, effectiveC);
                 lastCol = c;
             }
@@ -162,122 +158,3 @@ export function drawXY(ctx, props) {
     }
     return { reducedFeatures };
 }
-export function drawLine(ctx, props) {
-    const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
-    const [region] = regions;
-    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 height = unadjustedHeight - offset * 2;
-    const clipColor = readConfObject(config, 'clipColor');
-    const scale = getScale({ ...scaleOpts, range: [0, height] });
-    const [niceMin, niceMax] = scale.domain();
-    const toY = (n) => clamp(height - (scale(n) || 0), 0, height) + offset;
-    let lastVal;
-    let prevLeftPx = -Infinity;
-    const reducedFeatures = [];
-    for (const feature of features.values()) {
-        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-        // create reduced features, avoiding multiple features per px
-        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-            reducedFeatures.push(feature);
-            prevLeftPx = leftPx;
-        }
-        const score = feature.get('score');
-        const lowClipping = score < niceMin;
-        const highClipping = score > niceMax;
-        const w = rightPx - leftPx + fudgeFactor;
-        const c = colorCallback(feature, score);
-        ctx.beginPath();
-        ctx.strokeStyle = c;
-        const startPos = lastVal !== undefined ? lastVal : score;
-        if (!region.reversed) {
-            ctx.moveTo(leftPx, toY(startPos));
-            ctx.lineTo(leftPx, toY(score));
-            ctx.lineTo(rightPx, toY(score));
-        }
-        else {
-            ctx.moveTo(rightPx, toY(startPos));
-            ctx.lineTo(rightPx, toY(score));
-            ctx.lineTo(leftPx, toY(score));
-        }
-        ctx.stroke();
-        lastVal = score;
-        if (highClipping) {
-            ctx.fillStyle = clipColor;
-            ctx.fillRect(leftPx, offset, w, clipHeight);
-        }
-        else if (lowClipping && scaleOpts.scaleType !== 'log') {
-            ctx.fillStyle = clipColor;
-            ctx.fillRect(leftPx, height - clipHeight, w, height);
-        }
-    }
-    if (displayCrossHatches) {
-        ctx.lineWidth = 1;
-        ctx.strokeStyle = 'rgba(200,200,200,0.5)';
-        values.forEach(tick => {
-            ctx.beginPath();
-            ctx.moveTo(0, Math.round(toY(tick)));
-            ctx.lineTo(width, Math.round(toY(tick)));
-            ctx.stroke();
-        });
-    }
-    return { reducedFeatures };
-}
-export function drawDensity(ctx, props) {
-    const { features, regions, bpPerPx, scaleOpts, height, config } = props;
-    const [region] = regions;
-    const pivot = readConfObject(config, 'bicolorPivot');
-    const pivotValue = readConfObject(config, 'bicolorPivotValue');
-    const negColor = readConfObject(config, 'negColor');
-    const posColor = readConfObject(config, 'posColor');
-    const color = readConfObject(config, 'color');
-    const clipColor = readConfObject(config, 'clipColor');
-    const crossing = pivot !== 'none' && scaleOpts.scaleType !== 'log';
-    const scale = getScale({
-        ...scaleOpts,
-        pivotValue: crossing ? pivotValue : undefined,
-        range: crossing ? [negColor, 'white', posColor] : ['white', posColor],
-    });
-    const scale2 = getScale({ ...scaleOpts, range: [0, height] });
-    const cb = color === '#f0f'
-        ? (_, score) => scale(score)
-        : (feature, score) => readConfObject(config, 'color', { feature, score });
-    const [niceMin, niceMax] = scale2.domain();
-    let prevLeftPx = -Infinity;
-    let hasClipping = false;
-    const reducedFeatures = [];
-    for (const feature of features.values()) {
-        const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-        // create reduced features, avoiding multiple features per px
-        if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
-            reducedFeatures.push(feature);
-            prevLeftPx = leftPx;
-        }
-        const score = feature.get('score');
-        hasClipping = hasClipping || score > niceMax || score < niceMin;
-        const w = rightPx - leftPx + fudgeFactor;
-        ctx.fillStyle = cb(feature, score);
-        ctx.fillRect(leftPx, 0, w, height);
-    }
-    // second pass: draw clipping
-    // avoid persisting the red fillstyle with save/restore
-    ctx.save();
-    if (hasClipping) {
-        ctx.fillStyle = clipColor;
-        for (const feature of features.values()) {
-            const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx);
-            const w = rightPx - leftPx + fudgeFactor;
-            const score = feature.get('score');
-            if (score > niceMax) {
-                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
-            }
-            else if (score < niceMin && scaleOpts.scaleType !== 'log') {
-                fillRectCtx(leftPx, 0, w, clipHeight, ctx);
-            }
-        }
-    }
-    ctx.restore();
-    return { reducedFeatures };
-}

package/esm/shared/YScaleBar.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { axisPropsFromTickScale } from 'react-d3-axis-mod';
 type Ticks = ReturnType<typeof axisPropsFromTickScale>;
-declare const _default: ({ model, orientation, }: {
+declare const YScaleBar: ({ model, orientation, }: {
     model: {
         ticks?: Ticks;
     };
     orientation?: string | undefined;
 }) => React.JSX.Element | null;
-export default _default;
+export default YScaleBar;

package/esm/shared/YScaleBar.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
 import { Axis, LEFT, RIGHT } from 'react-d3-axis-mod';
-export default observer(function YScaleBar({ model, orientation, }) {
+const YScaleBar = observer(function ({ model, orientation, }) {
     const { ticks } = model;
     const theme = useTheme();
     return ticks ? (React.createElement(Axis, { ...ticks, shadow: 2, format: (n) => n, style: { orient: orientation === 'left' ? LEFT : RIGHT }, bg: theme.palette.background.default, fg: theme.palette.text.primary })) : null;
 });
+export default YScaleBar;

package/esm/shared/modelShared.d.ts

@@ -247,7 +247,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
     readonly regionTooLargeReason: string;
 } & {
     regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null; /**
+     * #getter
+     * subclasses can define these, as snpcoverage track does
+     */
 } & {
     featureIdUnderMouse: string | undefined;
     contextMenuFeature: Feature | undefined;

package/esm/util.d.ts

@@ -72,3 +72,4 @@ export declare function quantitativeStatsAutorun(self: {
 }): void;
 export declare function toP(s?: number): number;
 export declare function round(value: number): number;
+export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, color?: string): void;

package/esm/util.js

@@ -221,3 +221,18 @@ export function toP(s = 0) {
 export function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
+// avoid drawing negative width features for SVG exports
+export function fillRectCtx(x, y, width, height, ctx, color) {
+    if (width < 0) {
+        x += width;
+        width = -width;
+    }
+    if (height < 0) {
+        y += height;
+        height = -height;
+    }
+    if (color) {
+        ctx.fillStyle = color;
+    }
+    ctx.fillRect(x, y, width, height);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.6.3",
+  "version": "2.7.1",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -40,7 +40,6 @@
     "@mui/icons-material": "^5.0.2",
     "@popperjs/core": "^2.11.0",
     "clone": "^2.1.2",
-    "color": "^3.1.1",
     "d3-color": "^3.0.2",
     "d3-scale": "^3.0.2",
     "fast-deep-equal": "^3.1.3",
@@ -56,7 +55,7 @@
     "@mui/material": "^5.0.0",
     "@mui/x-data-grid": "^6.0.1",
     "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",
@@ -68,5 +67,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
 }

package/dist/drawxy.d.ts

@@ -1,50 +0,0 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { Feature, Region } from '@jbrowse/core/util';
-import { ScaleOpts } from './util';
-export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
-    features: Map<string, Feature> | Feature[];
-    bpPerPx: number;
-    regions: Region[];
-    scaleOpts: ScaleOpts;
-    height: number;
-    ticks: {
-        values: number[];
-    };
-    config: AnyConfigurationModel;
-    displayCrossHatches: boolean;
-    offset?: number;
-    colorCallback: (f: Feature, score: number) => string;
-    Color: typeof import('color');
-}): {
-    reducedFeatures: Feature[];
-};
-export declare function drawLine(ctx: CanvasRenderingContext2D, props: {
-    features: Map<string, Feature> | Feature[];
-    regions: Region[];
-    bpPerPx: number;
-    scaleOpts: ScaleOpts;
-    height: number;
-    ticks: {
-        values: number[];
-    };
-    displayCrossHatches: boolean;
-    colorCallback: (f: Feature, score: number) => string;
-    config: AnyConfigurationModel;
-    offset?: number;
-}): {
-    reducedFeatures: Feature[];
-};
-export declare function drawDensity(ctx: CanvasRenderingContext2D, props: {
-    features: Map<string, Feature> | Feature[];
-    regions: Region[];
-    bpPerPx: number;
-    scaleOpts: ScaleOpts;
-    height: number;
-    ticks: {
-        values: number[];
-    };
-    displayCrossHatches: boolean;
-    config: AnyConfigurationModel;
-}): {
-    reducedFeatures: Feature[];
-};