@jbrowse/plugin-wiggle 2.6.2 → 2.6.3

package/dist/LinearWiggleDisplay/components/WiggleDisplayComponent.d.ts

@@ -4,4 +4,3 @@ declare const LinearWiggleDisplay: (props: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;
 export default LinearWiggleDisplay;
-export { default as YScaleBar } from '../../shared/YScaleBar';

package/dist/LinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YScaleBar = void 0;
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
@@ -31,5 +30,3 @@ const LinearWiggleDisplay = (0, mobx_react_1.observer)((props) => {
             react_1.default.createElement(YScaleBar_1.default, { model: model }))) : null));
 });
 exports.default = LinearWiggleDisplay;
-var YScaleBar_2 = require("../../shared/YScaleBar");
-Object.defineProperty(exports, "YScaleBar", { enumerable: true, get: function () { return __importDefault(YScaleBar_2).default; } });

package/dist/MultiDensityRenderer/MultiDensityRenderer.js

@@ -12,7 +12,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
         const groups = (0, util_1.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/dist/MultiLinearWiggleDisplay/components/ColorLegend.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WiggleDisplayModel } from '../models/model';
+declare const ColorLegend: ({ model, rowHeight, labelWidth, exportSVG, }: {
+    model: WiggleDisplayModel;
+    rowHeight: number;
+    labelWidth: number;
+    exportSVG?: boolean | undefined;
+}) => React.JSX.Element | null;
+export default ColorLegend;

package/dist/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+const RectBg_1 = __importDefault(require("./RectBg"));
+const ColorLegend = (0, mobx_react_1.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_1.default.createElement(react_1.default.Fragment, null,
+        /* 0.25 for hanging letters like g */
+        needsFullHeightScalebar ? (react_1.default.createElement(RectBg_1.default, { 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_1.default.createElement(react_1.default.Fragment, { key: `${source.name}-${idx}` },
+                needsFullHeightScalebar ? null : (react_1.default.createElement(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })),
+                source.color ? (react_1.default.createElement(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null,
+                canDisplayLabel ? (react_1.default.createElement("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, source.name)) : null));
+        }))) : null;
+});
+exports.default = ColorLegend;

package/dist/MultiLinearWiggleDisplay/components/RectBg.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const RectBg: (props: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+}) => React.JSX.Element;
+export default RectBg;

package/dist/MultiLinearWiggleDisplay/components/RectBg.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const RectBg = (props) => {
+    const { color = 'rgb(255,255,255,0.8)' } = props;
+    return react_1.default.createElement("rect", { ...props, fill: color });
+};
+exports.default = RectBg;

package/dist/MultiLinearWiggleDisplay/components/ScoreLegend.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WiggleDisplayModel } from '../models/model';
+declare const ScoreLegend: ({ model }: {
+    model: WiggleDisplayModel;
+}) => React.JSX.Element;
+export default ScoreLegend;

package/dist/MultiLinearWiggleDisplay/components/ScoreLegend.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const RectBg_1 = __importDefault(require("./RectBg"));
+const ScoreLegend = (0, mobx_react_1.observer)(({ model }) => {
+    const { ticks, scaleType } = model;
+    const { width } = (0, util_1.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 = (0, util_1.measureText)(legend, 14);
+    const padding = 25;
+    const xpos = width - len - padding;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(RectBg_1.default, { y: 0, x: xpos, width: len + 6, height: 16 }),
+        react_1.default.createElement("text", { y: 13, x: xpos }, legend)));
+});
+exports.default = ScoreLegend;

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

@@ -1,10 +1,5 @@
 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: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;

package/dist/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -3,102 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YScaleBar = exports.StatBars = void 0;
+exports.YScaleBar = void 0;
 const react_1 = __importDefault(require("react"));
-const util_1 = require("@jbrowse/core/util");
-const configuration_1 = require("@jbrowse/core/configuration");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
 const mobx_react_1 = require("mobx-react");
-const YScaleBar_1 = __importDefault(require("../../shared/YScaleBar"));
-const trackLabelFontSize = 12.8;
-function getOffset(model) {
-    const { prefersOffset } = model;
-    const { trackLabels } = (0, util_1.getContainingView)(model);
-    const track = (0, util_1.getContainingTrack)(model);
-    const trackName = (0, configuration_1.getConf)(track, 'name');
-    return trackLabels === 'overlapping' && !prefersOffset
-        ? (0, util_1.measureText)(trackName, trackLabelFontSize) + 100
-        : 10;
-}
-const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
-    if (exportSVG) {
-        return react_1.default.createElement(react_1.default.Fragment, null, children);
-    }
-    else {
-        const { height } = model;
-        return (react_1.default.createElement("svg", { style: {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                pointerEvents: 'none',
-                height,
-                width: (0, util_1.getContainingView)(model).width,
-            } }, children));
-    }
-});
-const RectBg = (props) => {
-    const { color = 'rgb(255,255,255,0.8)' } = props;
-    return react_1.default.createElement("rect", { ...props, fill: color });
-};
-const ScoreLegend = (0, mobx_react_1.observer)(({ model }) => {
-    const { ticks, scaleType } = model;
-    const { width } = (0, util_1.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 = (0, util_1.measureText)(legend, 14);
-    const padding = 25;
-    const xpos = width - len - padding;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(RectBg, { y: 0, x: xpos, width: len + 6, height: 16 }),
-        react_1.default.createElement("text", { y: 13, x: xpos }, legend)));
-});
-const ColorLegend = (0, mobx_react_1.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_1.default.createElement(react_1.default.Fragment, null,
-        /* 0.25 for hanging letters like g */
-        needsFullHeightScalebar ? (react_1.default.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_1.default.createElement(react_1.default.Fragment, { key: `${source.name}-${idx}` },
-                needsFullHeightScalebar ? null : (react_1.default.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })),
-                source.color ? (react_1.default.createElement(RectBg, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null,
-                canDisplayLabel ? (react_1.default.createElement("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize }, source.name)) : null));
-        }))) : null;
-});
-exports.StatBars = (0, mobx_react_1.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 } = (0, util_1.getContainingView)(model);
-    const minWidth = 20;
-    const ready = stats && sources;
-    if (!ready) {
-        return null;
-    }
-    const labelWidth = Math.max(...(sources
-        .map(s => (0, util_1.measureText)(s.name, svgFontSize))
-        .map(width => (canDisplayLabel ? width : minWidth)) || [0]));
-    return (react_1.default.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("g", { transform: `translate(${!exportSVG ? getOffset(model) : 0},0)` },
-            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })),
-        react_1.default.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
-            react_1.default.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ColorLegend, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
-        rowHeightTooSmallForScalebar || needsCustomLegend ? (react_1.default.createElement(ScoreLegend, { ...props })) : (sources.map((_source, idx) => (react_1.default.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
-            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })))))))));
-});
+const YScaleBars_1 = __importDefault(require("./YScaleBars"));
 exports.default = (0, mobx_react_1.observer)((props) => {
     const { model } = props;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }),
-        react_1.default.createElement(exports.StatBars, { model: model })));
+        react_1.default.createElement(YScaleBars_1.default, { model: model })));
 });
-var YScaleBar_2 = require("../../shared/YScaleBar");
-Object.defineProperty(exports, "YScaleBar", { enumerable: true, get: function () { return __importDefault(YScaleBar_2).default; } });
+var YScaleBar_1 = require("../../shared/YScaleBar");
+Object.defineProperty(exports, "YScaleBar", { enumerable: true, get: function () { return __importDefault(YScaleBar_1).default; } });

package/dist/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/dist/MultiLinearWiggleDisplay/components/YScaleBars.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YScaleBars = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("@jbrowse/core/util");
+const mobx_react_1 = require("mobx-react");
+const YScaleBar_1 = __importDefault(require("../../shared/YScaleBar"));
+const ColorLegend_1 = __importDefault(require("./ColorLegend"));
+const ScoreLegend_1 = __importDefault(require("./ScoreLegend"));
+const util_2 = require("./util");
+const Wrapper = (0, mobx_react_1.observer)(function ({ children, model, exportSVG, }) {
+    if (exportSVG) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    else {
+        const { height } = model;
+        return (react_1.default.createElement("svg", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                pointerEvents: 'none',
+                height,
+                width: (0, util_1.getContainingView)(model).width,
+            } }, children));
+    }
+});
+exports.YScaleBars = (0, mobx_react_1.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 } = (0, util_1.getContainingView)(model);
+    const minWidth = 20;
+    const ready = stats && sources;
+    if (!ready) {
+        return null;
+    }
+    const labelWidth = Math.max(...(sources
+        .map(s => (0, util_1.measureText)(s.name, svgFontSize))
+        .map(width => (canDisplayLabel ? width : minWidth)) || [0]));
+    return (react_1.default.createElement(Wrapper, { ...props }, needsFullHeightScalebar ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("g", { transform: `translate(${!exportSVG ? (0, util_2.getOffset)(model) : 0},0)` },
+            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })),
+        react_1.default.createElement("g", { transform: `translate(${viewWidth - labelWidth - 100},0)` },
+            react_1.default.createElement(ColorLegend_1.default, { exportSVG: exportSVG, model: model, rowHeight: 12, labelWidth: labelWidth })))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ColorLegend_1.default, { exportSVG: exportSVG, model: model, rowHeight: model.rowHeight, labelWidth: labelWidth }),
+        rowHeightTooSmallForScalebar || needsCustomLegend ? (react_1.default.createElement(ScoreLegend_1.default, { ...props })) : (sources.map((_source, idx) => (react_1.default.createElement("g", { transform: `translate(0 ${rowHeight * idx})`, key: `${JSON.stringify(ticks)}-${idx}` },
+            react_1.default.createElement(YScaleBar_1.default, { model: model, orientation: orientation })))))))));
+});
+exports.default = exports.YScaleBars;

package/dist/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/dist/MultiLinearWiggleDisplay/components/util.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.moveDown = exports.moveUp = void 0;
+exports.getOffset = exports.moveDown = exports.moveUp = void 0;
+const util_1 = require("@jbrowse/core/util");
+const configuration_1 = require("@jbrowse/core/configuration");
 function moveUp(arr, sel, by = 1) {
     const idxs = sel
         .map(l => arr.findIndex(v => v.name === l))
@@ -33,3 +35,14 @@ function moveDown(arr, sel, by = 1) {
     return arr;
 }
 exports.moveDown = moveDown;
+const trackLabelFontSize = 12.8;
+function getOffset(model) {
+    const { prefersOffset } = model;
+    const { trackLabels } = (0, util_1.getContainingView)(model);
+    const track = (0, util_1.getContainingTrack)(model);
+    const trackName = (0, configuration_1.getConf)(track, 'name');
+    return trackLabels === 'overlapping' && !prefersOffset
+        ? (0, util_1.measureText)(trackName, trackLabelFontSize) + 100
+        : 10;
+}
+exports.getOffset = getOffset;

package/dist/MultiLinearWiggleDisplay/models/renderSvg.js

@@ -7,13 +7,13 @@ exports.renderSvg = void 0;
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const mobx_1 = require("mobx");
-const WiggleDisplayComponent_1 = require("../components/WiggleDisplayComponent");
+const YScaleBars_1 = __importDefault(require("../components/YScaleBars"));
 async function renderSvg(self, opts, superRenderSvg) {
     await (0, mobx_1.when)(() => !!self.stats && !!self.regionCannotBeRenderedText);
     const { offsetPx } = (0, util_1.getContainingView)(self);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("g", { id: "snpcov" }, await superRenderSvg(opts)),
         react_1.default.createElement("g", { transform: `translate(${Math.max(-offsetPx, 0)})` },
-            react_1.default.createElement(WiggleDisplayComponent_1.StatBars, { model: self, orientation: "left", exportSVG: true }))));
+            react_1.default.createElement(YScaleBars_1.default, { model: self, orientation: "left", exportSVG: true }))));
 }
 exports.renderSvg = renderSvg;

package/dist/MultiRowLineRenderer/MultiRowLineRenderer.js

@@ -12,7 +12,7 @@ class MultiRowLineRenderer extends WiggleBaseRenderer_1.default {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
         const groups = (0, util_1.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/dist/MultiRowXYPlotRenderer/MultiRowXYPlotRenderer.js

@@ -35,7 +35,7 @@ class MultiXYPlotRenderer extends WiggleBaseRenderer_1.default {
         const { bpPerPx, sources, regions, features } = props;
         const [region] = regions;
         const groups = (0, util_1.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 Promise.resolve().then(() => __importStar(require('color'))).then(f => f.default);
         let feats = [];

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

@@ -4,4 +4,3 @@ declare const LinearWiggleDisplay: (props: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;
 export default LinearWiggleDisplay;
-export { default as YScaleBar } from '../../shared/YScaleBar';

package/esm/LinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -25,4 +25,3 @@ const LinearWiggleDisplay = observer((props) => {
             React.createElement(YScaleBar, { model: model }))) : null));
 });
 export default LinearWiggleDisplay;
-export { default as YScaleBar } from '../../shared/YScaleBar';

package/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -7,7 +7,7 @@ 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;
         let feats = [];
         ctx.save();

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WiggleDisplayModel } from '../models/model';
+declare const ColorLegend: ({ model, rowHeight, labelWidth, exportSVG, }: {
+    model: WiggleDisplayModel;
+    rowHeight: number;
+    labelWidth: number;
+    exportSVG?: boolean | undefined;
+}) => React.JSX.Element | null;
+export default ColorLegend;

package/esm/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import RectBg from './RectBg';
+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 default ColorLegend;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const RectBg: (props: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color?: string;
+}) => React.JSX.Element;
+export default RectBg;

package/esm/MultiLinearWiggleDisplay/components/RectBg.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const RectBg = (props) => {
+    const { color = 'rgb(255,255,255,0.8)' } = props;
+    return React.createElement("rect", { ...props, fill: color });
+};
+export default RectBg;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WiggleDisplayModel } from '../models/model';
+declare const ScoreLegend: ({ model }: {
+    model: WiggleDisplayModel;
+}) => React.JSX.Element;
+export default ScoreLegend;

package/esm/MultiLinearWiggleDisplay/components/ScoreLegend.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { measureText, getContainingView } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import RectBg from './RectBg';
+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)));
+});
+export default ScoreLegend;

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

@@ -1,10 +1,5 @@
 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: {
     model: WiggleDisplayModel;
 }) => React.JSX.Element;

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 })))))))));
-});
+import YScaleBars from './YScaleBars';
 export default 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';

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,3 +1,5 @@
+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))
@@ -28,3 +30,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,7 +7,7 @@ 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 = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-wiggle",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "description": "JBrowse 2 wiggle adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -68,5 +68,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
 }