@jbrowse/plugin-wiggle 2.6.2 → 2.7.0

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
 import { WiggleDisplayModel } from '../models/model';
-export declare const StatBars: (props: {
-    model: WiggleDisplayModel;
-    orientation?: string;
-    exportSVG?: boolean;
-}) => React.JSX.Element | null;
-declare const _default: (props: {
+declare const MultiLinearWiggleDisplayComponent: (props: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;
-export default _default;
-export { default as YScaleBar } from '../../shared/YScaleBar';
+export default MultiLinearWiggleDisplayComponent;

package/esm/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -1,97 +1,11 @@
 import React from 'react';
-import { measureText, getContainingView, getContainingTrack, } from '@jbrowse/core/util';
-import { getConf } from '@jbrowse/core/configuration';
-import { BaseLinearDisplayComponent, } from '@jbrowse/plugin-linear-genome-view';
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view';
 import { observer } from 'mobx-react';
-import YScaleBar from '../../shared/YScaleBar';
-const trackLabelFontSize = 12.8;
-function getOffset(model) {
-    const { prefersOffset } = model;
-    const { trackLabels } = getContainingView(model);
-    const track = getContainingTrack(model);
-    const trackName = getConf(track, 'name');
-    return trackLabels === 'overlapping' && !prefersOffset
-        ? measureText(trackName, trackLabelFontSize) + 100
-        : 10;
-}
-const Wrapper = observer(function ({ children, model, exportSVG, }) {
-    if (exportSVG) {
-        return React.createElement(React.Fragment, null, children);
-    }
-    else {
-        const { height } = model;
-        return (React.createElement("svg", { style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                pointerEvents: 'none',
-                height,
-                width: getContainingView(model).width,
-            } }, children));
-    }
-});
-const RectBg = (props) => {
-    const { color = 'rgb(255,255,255,0.8)' } = props;
-    return React.createElement("rect", { ...props, fill: color });
-};
-const ScoreLegend = observer(({ model }) => {
-    const { ticks, scaleType } = model;
-    const { width } = getContainingView(model);
-    const legend = `[${ticks === null || ticks === void 0 ? void 0 : ticks.values[0]}-${ticks === null || ticks === void 0 ? void 0 : ticks.values[1]}]` +
-        (scaleType === 'log' ? ' (log scale)' : '');
-    const len = measureText(legend, 14);
-    const padding = 25;
-    const xpos = width - len - padding;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(RectBg, { y: 0, x: xpos, width: len + 6, height: 16 }),
-        React.createElement("text", { y: 13, x: xpos }, legend)));
-});
-const ColorLegend = observer(function ({ model, rowHeight, labelWidth, exportSVG, }) {
-    const { needsCustomLegend, needsScalebar, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
-    const colorBoxWidth = renderColorBoxes ? 15 : 0;
-    const legendWidth = labelWidth + colorBoxWidth + 5;
-    const svgOffset = exportSVG ? 10 : 0;
-    const extraOffset = svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0);
-    return sources ? (React.createElement(React.Fragment, null,
-        /* 0.25 for hanging letters like g */
-        needsFullHeightScalebar ? (React.createElement(RectBg, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
-        sources.map((source, idx) => {
-            const boxHeight = Math.min(20, rowHeight);
-            return (React.createElement(React.Fragment, { key: `${source.name}-${idx}` },
-                needsFullHeightScalebar ? null : (React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })),
-                source.color ? (React.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null,
-                canDisplayLabel ? (React.createElement("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, source.name)) : null));
-        }))) : null;
-});
-export const StatBars = observer(function (props) {
-    const { model, orientation, exportSVG } = props;
-    const { stats, needsCustomLegend, needsFullHeightScalebar, rowHeightTooSmallForScalebar, rowHeight, sources, ticks, } = model;
-    const svgFontSize = Math.min(rowHeight, 12);
-    const canDisplayLabel = rowHeight > 11;
-    const { width: viewWidth } = getContainingView(model);
-    const minWidth = 20;
-    const ready = stats && sources;
-    if (!ready) {
-        return null;
-    }
-    const labelWidth = Math.max(...(sources
-        .map(s => measureText(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)) || [0]));
-    return (React.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (React.createElement(React.Fragment, null,
-        React.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })),
-        React.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
-            React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (React.createElement(React.Fragment, null,
-        React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
-        rowHeightTooSmallForScalebar || needsCustomLegend ? (React.createElement(ScoreLegend, { ...props })) : (sources.map((_source, idx) => (React.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
-            React.createElement(YScaleBar, { model: model, orientation: orientation })))))))));
-});
-export default observer((props) => {
+import YScaleBars from './YScaleBars';
+const MultiLinearWiggleDisplayComponent = observer((props) => {
     const { model } = props;
     return (React.createElement("div", null,
         React.createElement(BaseLinearDisplayComponent, { ...props }),
-        React.createElement(StatBars, { model: model })));
+        React.createElement(YScaleBars, { model: model })));
 });
-export { default as YScaleBar } from '../../shared/YScaleBar';
+export default MultiLinearWiggleDisplayComponent;

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WiggleDisplayModel } from '../models/model';
+export declare const YScaleBars: (props: {
+    model: WiggleDisplayModel;
+    orientation?: string;
+    exportSVG?: boolean;
+}) => React.JSX.Element | null;
+export default YScaleBars;

package/esm/MultiLinearWiggleDisplay/components/YScaleBars.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { measureText, getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import YScaleBar from '../../shared/YScaleBar';
+import ColorLegend from './ColorLegend';
+import ScoreLegend from './ScoreLegend';
+import { getOffset } from './util';
+const Wrapper = observer(function ({ children, model, exportSVG, }) {
+    if (exportSVG) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    else {
+        const { height } = model;
+        return (React.createElement("svg", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                pointerEvents: 'none',
+                height,
+                width: getContainingView(model).width,
+            } }, children));
+    }
+});
+export const YScaleBars = observer(function (props) {
+    const { model, orientation, exportSVG } = props;
+    const { stats, needsCustomLegend, needsFullHeightScalebar, rowHeightTooSmallForScalebar, rowHeight, sources, ticks, } = model;
+    const svgFontSize = Math.min(rowHeight, 12);
+    const canDisplayLabel = rowHeight > 11;
+    const { width: viewWidth } = getContainingView(model);
+    const minWidth = 20;
+    const ready = stats && sources;
+    if (!ready) {
+        return null;
+    }
+    const labelWidth = Math.max(...(sources
+        .map(s => measureText(s.name, svgFontSize))
+        .map(width => (canDisplayLabel ? width : minWidth)) || [0]));
+    return (React.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (React.createElement(React.Fragment, null,
+        React.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
+            React.createElement(YScaleBar, { model: model, orientation: orientation })),
+        React.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
+            React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (React.createElement(React.Fragment, null,
+        React.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
+        rowHeightTooSmallForScalebar || needsCustomLegend ? (React.createElement(ScoreLegend, { ...props })) : (sources.map((_source, idx) => (React.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
+            React.createElement(YScaleBar, { model: model, orientation: orientation })))))))));
+});
+export default YScaleBars;

package/esm/MultiLinearWiggleDisplay/components/util.d.ts

@@ -1,3 +1,4 @@
+import { WiggleDisplayModel } from '../models/model';
 export declare function moveUp(arr: {
     name: string;
 }[], sel: string[], by?: number): {
@@ -8,3 +9,4 @@ export declare function moveDown(arr: {
 }[], sel: string[], by?: number): {
     name: string;
 }[];
+export declare function getOffset(model: WiggleDisplayModel): number;

package/esm/MultiLinearWiggleDisplay/components/util.js

@@ -1,10 +1,11 @@
+import { getContainingTrack, getContainingView, measureText, } from '@jbrowse/core/util';
+import { getConf } from '@jbrowse/core/configuration';
 export function moveUp(arr, sel, by = 1) {
     const idxs = sel
         .map(l => arr.findIndex(v => v.name === l))
         .sort((a, b) => a - b);
     let lastIdx = 0;
-    for (let i = 0; i < idxs.length; i++) {
-        const old = idxs[i];
+    for (const old of idxs) {
         const idx = Math.max(lastIdx, old - by);
         if (idx >= lastIdx) {
             arr.splice(idx, 0, arr.splice(old, 1)[0]);
@@ -18,8 +19,7 @@ export function moveDown(arr, sel, by = 1) {
         .map(l => arr.findIndex(v => v.name === l))
         .sort((a, b) => b - a);
     let lastIdx = arr.length - 1;
-    for (let i = 0; i < idxs.length; i++) {
-        const old = idxs[i];
+    for (const old of idxs) {
         const idx = Math.min(lastIdx, old + by);
         if (idx <= lastIdx) {
             arr.splice(idx, 0, arr.splice(old, 1)[0]);
@@ -28,3 +28,13 @@ export function moveDown(arr, sel, by = 1) {
     }
     return arr;
 }
+const trackLabelFontSize = 12.8;
+export function getOffset(model) {
+    const { prefersOffset } = model;
+    const { trackLabels } = getContainingView(model);
+    const track = getContainingTrack(model);
+    const trackName = getConf(track, 'name');
+    return trackLabels === 'overlapping' && !prefersOffset
+        ? measureText(trackName, trackLabelFontSize) + 100
+        : 10;
+}

package/esm/MultiLinearWiggleDisplay/models/renderSvg.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { getContainingView } from '@jbrowse/core/util';
 import { when } from 'mobx';
-import { StatBars } from '../components/WiggleDisplayComponent';
+import YScaleBars from '../components/YScaleBars';
 export async function renderSvg(self, opts, superRenderSvg) {
     await when(() => !!self.stats && !!self.regionCannotBeRenderedText);
     const { offsetPx } = getContainingView(self);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
         React.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            React.createElement(StatBars, { model: self, orientation: "left", exportSVG: true }))));
+            React.createElement(YScaleBars, { model: self, orientation: "left", exportSVG: true }))));
 }

package/esm/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -7,7 +7,7 @@ export default class MultiRowLineRenderer extends WiggleBaseRenderer {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
         const groups = groupBy([...features.values()], f => f.get('source'));
-        const height = props.height / Object.keys(groups).length;
+        const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
         let feats = [];
         ctx.save();

package/esm/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -7,9 +7,8 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
         const groups = groupBy([...features.values()], f => f.get('source'));
-        const height = props.height / Object.keys(groups).length;
+        const height = props.height / sources.length;
         const width = (region.end - region.start) / bpPerPx;
-        const Color = await import('color').then(f => f.default);
         let feats = [];
         ctx.save();
         sources.forEach(source => {
@@ -22,7 +21,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
                 features,
                 height,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
             ctx.strokeStyle = 'rgba(200,200,200,0.8)';
             ctx.beginPath();

package/esm/MultiWiggleAddTrackWidget/AddTrackWorkflow.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Paper, TextField } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
-import { getSession, isElectron } from '@jbrowse/core/util';
+import { getSession, isElectron, isSessionModelWithWidgets, isSessionWithAddTracks, } from '@jbrowse/core/util';
 import { storeBlobLocation } from '@jbrowse/core/util/tracks';
 const useStyles = makeStyles()(theme => ({
     textbox: {
@@ -60,19 +60,23 @@ export default function MultiWiggleWidget({ model }) {
                 const obj = typeof bigWigs[0] === 'string'
                     ? { bigWigs }
                     : { subadapters: bigWigs };
-                session.addTrackConf({
-                    trackId,
-                    type: 'MultiQuantitativeTrack',
-                    name: trackName,
-                    assemblyNames: [model.assembly],
-                    adapter: {
-                        type: 'MultiWiggleAdapter',
-                        ...obj,
-                    },
-                });
-                (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
+                if (isSessionWithAddTracks(session)) {
+                    session.addTrackConf({
+                        trackId,
+                        type: 'MultiQuantitativeTrack',
+                        name: trackName,
+                        assemblyNames: [model.assembly],
+                        adapter: {
+                            type: 'MultiWiggleAdapter',
+                            ...obj,
+                        },
+                    });
+                    (_a = model.view) === null || _a === void 0 ? void 0 : _a.showTrack(trackId);
+                }
                 model.clearData();
-                session.hideWidget(model);
+                if (isSessionModelWithWidgets(session)) {
+                    session.hideWidget(model);
+                }
             } }, "Submit"),
         React.createElement("p", null, "Additional notes: "),
         React.createElement("ul", null,

package/esm/MultiWiggleRendering.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Region } from '@jbrowse/core/util/types';
 import { Feature } from '@jbrowse/core/util';
 import { Source } from './util';
-declare function WiggleRendering(props: {
+declare const MultiWiggleRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
     bpPerPx: number;
@@ -16,6 +16,5 @@ declare function WiggleRendering(props: {
     displayModel: {
         isMultiRow: boolean;
     };
-}): React.JSX.Element;
-declare const _default: typeof WiggleRendering;
-export default _default;
+}) => React.JSX.Element;
+export default MultiWiggleRendering;

package/esm/MultiWiggleRendering.js

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import React, { useRef } from 'react';
 import { SimpleFeature } from '@jbrowse/core/util';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-function WiggleRendering(props) {
+const MultiWiggleRendering = observer(function (props) {
     const { regions, features, bpPerPx, width, height, sources, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, displayModel, } = props;
     const [region] = regions;
     const ref = useRef(null);
@@ -59,10 +59,12 @@ function WiggleRendering(props) {
         return featureUnderMouse;
     }
     return (React.createElement("div", { ref: ref, onMouseMove: event => {
-            const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
+            const { clientX, clientY } = event;
+            const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
             onMouseMove(event, featureUnderMouse);
         }, onClick: event => {
-            const featureUnderMouse = getFeatureUnderMouse(event.clientX, event.clientY);
+            const { clientX, clientY } = event;
+            const featureUnderMouse = getFeatureUnderMouse(clientX, clientY);
             onFeatureClick(event, featureUnderMouse);
         }, onMouseLeave: event => onMouseLeave(event), style: {
             overflow: 'visible',
@@ -70,5 +72,5 @@ function WiggleRendering(props) {
             height,
         } },
         React.createElement(PrerenderedCanvas, { ...props })));
-}
-export default observer(WiggleRendering);
+});
+export default MultiWiggleRendering;

package/esm/MultiXYPlotRenderer/MultiXYPlotRenderer.js

@@ -7,7 +7,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     async draw(ctx, props) {
         const { sources, features } = props;
         const groups = groupBy([...features.values()], f => f.get('source'));
-        const Color = await import('color').then(f => f.default);
         let feats = [];
         for (const source of sources) {
             const features = groups[source.name];
@@ -19,7 +18,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
                 features,
                 offset: YSCALEBAR_LABEL_OFFSET,
                 colorCallback: () => source.color || 'blue',
-                Color,
             });
             feats = [...feats, ...reducedFeatures];
         }

package/esm/Tooltip.d.ts

@@ -5,16 +5,15 @@ export type TooltipContentsComponent = React.ForwardRefExoticComponent<{
     feature: Feature;
     model: any;
 } & React.RefAttributes<HTMLDivElement>>;
-declare function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
+declare const Tooltip: ({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }: {
     model: {
         featureUnderMouse: Feature;
     };
-    useClientY?: boolean;
+    useClientY?: boolean | undefined;
     height: number;
     clientMouseCoord: Coord;
     offsetMouseCoord: Coord;
-    clientRect?: DOMRect;
+    clientRect?: DOMRect | undefined;
     TooltipContents: TooltipContentsComponent;
-}): React.JSX.Element | null;
-declare const _default: typeof Tooltip;
-export default _default;
+}) => React.JSX.Element | null;
+export default Tooltip;

package/esm/Tooltip.js

@@ -32,7 +32,7 @@ const useStyles = makeStyles()(theme => ({
         pointerEvents: 'none',
     },
 }));
-function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
+const Tooltip = observer(function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect, TooltipContents, useClientY, }) {
     const { featureUnderMouse } = model;
     const [width, setWidth] = useState(0);
     const [anchorEl, setAnchorEl] = useState(null);
@@ -66,5 +66,5 @@ function Tooltip({ model, height, clientMouseCoord, offsetMouseCoord, clientRect
                 left: offsetMouseCoord[0],
                 height: height - YSCALEBAR_LABEL_OFFSET * 2,
             } }))) : null;
-}
-export default observer(Tooltip);
+});
+export default Tooltip;

package/esm/WiggleRendering.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Region } from '@jbrowse/core/util/types';
 import { Feature } from '@jbrowse/core/util';
-declare function WiggleRendering(props: {
+declare const WiggleRendering: (props: {
     regions: Region[];
     features: Map<string, Feature>;
     bpPerPx: number;
@@ -11,6 +11,5 @@ declare function WiggleRendering(props: {
     onMouseMove: Function;
     onFeatureClick: Function;
     blockKey: string;
-}): React.JSX.Element;
-declare const _default: typeof WiggleRendering;
-export default _default;
+}) => React.JSX.Element;
+export default WiggleRendering;

package/esm/WiggleRendering.js

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import React, { useRef } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-function WiggleRendering(props) {
+const WiggleRendering = observer(function (props) {
     const { regions, features, bpPerPx, width, height, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, } = props;
     const [region] = regions;
     const ref = useRef(null);
@@ -31,5 +31,5 @@ function WiggleRendering(props) {
             height,
         } },
         React.createElement(PrerenderedCanvas, { ...props })));
-}
-export default observer(WiggleRendering);
+});
+export default WiggleRendering;

package/esm/XYPlotRenderer/XYPlotRenderer.js

@@ -11,7 +11,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
         const pivotValue = readConfObject(config, 'bicolorPivotValue');
         const negColor = readConfObject(config, 'negColor');
         const posColor = readConfObject(config, 'posColor');
-        const Color = await import('color').then(f => f.default);
         return drawXY(ctx, {
             ...props,
             colorCallback: readConfObject(config, 'color') === '#f0f'
@@ -19,7 +18,6 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
                 : (feature, _score) => readConfObject(config, 'color', { feature }),
             offset: YSCALEBAR_LABEL_OFFSET,
             features: [...features.values()],
-            Color,
         });
     }
 }

package/esm/drawxy.d.ts

@@ -14,7 +14,6 @@ export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
     displayCrossHatches: boolean;
     offset?: number;
     colorCallback: (f: Feature, score: number) => string;
-    Color: typeof import('color');
 }): {
     reducedFeatures: Feature[];
 };

package/esm/drawxy.js

@@ -1,5 +1,16 @@
 import { readConfObject, } from '@jbrowse/core/configuration';
+import { colord } from '@jbrowse/core/util/colord';
 import { clamp, featureSpanPx } from '@jbrowse/core/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) });
+}
 // locals
 import { getOrigin, getScale } from './util';
 // avoid drawing negative width features for SVG exports
@@ -17,10 +28,10 @@ function fillRectCtx(x, y, width, height, ctx, color) {
     }
     ctx.fillRect(x, y, width, height);
 }
-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 +69,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 +86,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 +112,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;
             }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "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": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }