@jbrowse/plugin-wiggle 3.0.1 → 3.0.2

package/dist/BigWigAdapter/BigWigAdapter.js

@@ -9,12 +9,14 @@ const stats_1 = require("@jbrowse/core/util/stats");
 class BigWigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
     async setupPre(opts) {
         const { statusCallback = () => { } } = opts || {};
-        const pm = this.pluginManager;
+        const pluginManager = this.pluginManager;
         const bigwig = new bbi_1.BigWig({
-            filehandle: (0, io_1.openLocation)(this.getConf('bigWigLocation'), pm),
+            filehandle: (0, io_1.openLocation)(this.getConf('bigWigLocation'), pluginManager),
         });
-        const header = await (0, util_1.updateStatus)('Downloading bigwig header', statusCallback, () => bigwig.getHeader(opts));
-        return { bigwig, header };
+        return {
+            bigwig,
+            header: await (0, util_1.updateStatus)('Downloading bigwig header', statusCallback, () => bigwig.getHeader(opts)),
+        };
     }
     async setup(opts) {
         if (!this.setupP) {
@@ -42,14 +44,13 @@ class BigWigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
         const { refName, start, end } = region;
         const { bpPerPx = 0, stopToken, resolution = 1, statusCallback = () => { }, } = opts;
         return (0, rxjs_1.ObservableCreate)(async (observer) => {
-            statusCallback('Downloading bigwig data');
             const source = this.getConf('source');
             const resolutionMultiplier = this.getConf('resolutionMultiplier');
             const { bigwig } = await this.setup(opts);
-            const feats = await bigwig.getFeatures(refName, start, end, {
+            const feats = await (0, util_1.updateStatus)('Downloading bigwig data', statusCallback, () => bigwig.getFeatures(refName, start, end, {
                 ...opts,
                 basesPerSpan: (bpPerPx / resolution) * resolutionMultiplier,
-            });
+            }));
             for (const data of feats) {
                 if (source) {
                     data.source = source;
@@ -67,7 +68,9 @@ class BigWigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
         }, stopToken);
     }
     async getMultiRegionFeatureDensityStats(_regions) {
-        return { featureDensity: 0 };
+        return {
+            featureDensity: 0,
+        };
     }
     freeResources() { }
 }

package/dist/DensityRenderer/configSchema.d.ts

@@ -3,16 +3,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/LinePlotRenderer/configSchema.d.ts

@@ -9,16 +9,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/LinearWiggleDisplay/components/WiggleDisplayComponent.js

@@ -9,18 +9,17 @@ const util_1 = require("@jbrowse/core/util");
 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 LinearWiggleDisplay = (0, mobx_react_1.observer)((props) => {
+const LinearWiggleDisplay = (0, mobx_react_1.observer)(function (props) {
     const { model } = props;
-    const { stats, height, needsScalebar } = model;
+    const { stats, height, graphType } = model;
     const { trackLabels } = (0, util_1.getContainingView)(model);
     const track = (0, util_1.getContainingTrack)(model);
-    const left = trackLabels === 'overlapping'
-        ? (0, util_1.measureText)((0, configuration_1.getConf)(track, 'name'), 12.8) + 100
-        : 50;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }), stats && needsScalebar ? ((0, jsx_runtime_1.jsx)("svg", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(plugin_linear_genome_view_1.BaseLinearDisplayComponent, { ...props }), stats && graphType ? ((0, jsx_runtime_1.jsx)("svg", { style: {
                     position: 'absolute',
                     top: 0,
-                    left,
+                    left: trackLabels === 'overlapping'
+                        ? (0, util_1.measureText)((0, configuration_1.getConf)(track, 'name'), 12.8) + 100
+                        : 50,
                     pointerEvents: 'none',
                     height,
                     width: 50,

package/dist/LinearWiggleDisplay/model.d.ts

@@ -99,6 +99,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     configuration: AnyConfigurationSchemaType;
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearWiggleDisplay">;
+    invertedSetting: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
 }, {
     rendererTypeName: string;
     error: unknown;
@@ -320,10 +321,14 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     })[];
 } & {
     reload(): Promise<void>;
+} & {
+    setInverted(arg: boolean): void;
 } & {
     readonly TooltipComponent: AnyReactComponentType;
     readonly rendererTypeName: string;
     readonly quantitativeStatsRelevantToCurrentZoom: boolean;
+    readonly graphType: boolean;
+    readonly inverted: any;
 } & {
     adapterProps(): any;
     readonly ticks: {
@@ -334,18 +339,10 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
     } | undefined;
 } & {
     renderProps(): any;
-    readonly needsScalebar: boolean;
     readonly fillSetting: 2 | 1 | 0;
     readonly quantitativeStatsReady: boolean;
 } & {
     trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-        type: string;
-        label?: undefined;
-        icon?: undefined;
-        subMenu?: undefined;
-        onClick?: undefined;
-        checked?: undefined;
-    } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
@@ -372,8 +369,15 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             subMenu?: undefined;
         })[];
         type?: undefined;
-        onClick?: undefined;
         checked?: undefined;
+        onClick?: undefined;
+    } | {
+        label: string;
+        type: string;
+        checked: any;
+        onClick: () => void;
+        icon?: undefined;
+        subMenu?: undefined;
     } | {
         label: string;
         subMenu: {
@@ -382,18 +386,18 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
             checked: boolean;
             onClick: () => void;
         }[];
-        type?: undefined;
         icon?: undefined;
-        onClick?: undefined;
+        type?: undefined;
         checked?: undefined;
+        onClick?: undefined;
     } | {
         label: string;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         onClick: () => void;
-        type?: undefined;
         subMenu?: undefined;
+        type?: undefined;
         checked?: undefined;
     } | {
         type: string;

package/dist/LinearWiggleDisplay/model.js

@@ -57,6 +57,12 @@ function stateModelFactory(pluginManager, configSchema) {
     return mobx_state_tree_1.types
         .compose('LinearWiggleDisplay', (0, SharedWiggleMixin_1.default)(configSchema), mobx_state_tree_1.types.model({
         type: mobx_state_tree_1.types.literal('LinearWiggleDisplay'),
+        invertedSetting: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.boolean),
+    }))
+        .actions(self => ({
+        setInverted(arg) {
+            self.invertedSetting = arg;
+        },
     }))
         .views(self => ({
         get TooltipComponent() {
@@ -75,6 +81,14 @@ function stateModelFactory(pluginManager, configSchema) {
             const view = (0, util_1.getContainingView)(self);
             return ((_a = self.stats) === null || _a === void 0 ? void 0 : _a.currStatsBpPerPx) === view.bpPerPx;
         },
+        get graphType() {
+            return (self.rendererTypeName === 'XYPlotRenderer' ||
+                self.rendererTypeName === 'LinePlotRenderer');
+        },
+        get inverted() {
+            var _a;
+            return (_a = self.invertedSetting) !== null && _a !== void 0 ? _a : (0, configuration_1.getConf)(self, 'inverted');
+        },
     }))
         .views(self => {
         const { renderProps: superRenderProps } = self;
@@ -94,9 +108,8 @@ function stateModelFactory(pluginManager, configSchema) {
                 };
             },
             get ticks() {
-                const { scaleType, domain, height } = self;
+                const { inverted, scaleType, domain, height } = self;
                 const minimalTicks = (0, configuration_1.getConf)(self, 'minimalTicks');
-                const inverted = (0, configuration_1.getConf)(self, 'inverted');
                 if (domain) {
                     const ticks = (0, react_d3_axis_mod_1.axisPropsFromTickScale)((0, util_2.getScale)({
                         scaleType,
@@ -119,19 +132,16 @@ function stateModelFactory(pluginManager, configSchema) {
     })
         .views(self => ({
         renderProps() {
-            const { ticks, height } = self;
+            const { inverted, ticks, height } = self;
             const superProps = self.adapterProps();
             return {
                 ...self.adapterProps(),
                 notReady: superProps.notReady || !self.stats,
                 height,
                 ticks,
+                inverted,
             };
         },
-        get needsScalebar() {
-            return (self.rendererTypeName === 'XYPlotRenderer' ||
-                self.rendererTypeName === 'LinePlotRenderer');
-        },
         get fillSetting() {
             if (self.filled) {
                 return 0;
@@ -155,12 +165,23 @@ function stateModelFactory(pluginManager, configSchema) {
             trackMenuItems() {
                 return [
                     ...superTrackMenuItems(),
-                    { type: 'divider' },
                     {
                         label: 'Score',
                         icon: Equalizer_1.default,
                         subMenu: self.scoreTrackMenuItems(),
                     },
+                    ...(self.graphType
+                        ? [
+                            {
+                                label: 'Inverted',
+                                type: 'checkbox',
+                                checked: self.inverted,
+                                onClick: () => {
+                                    self.setInverted(!self.inverted);
+                                },
+                            },
+                        ]
+                        : []),
                     ...(self.canHaveFill
                         ? [
                             {
@@ -204,7 +225,7 @@ function stateModelFactory(pluginManager, configSchema) {
                             ]);
                         },
                     },
-                    ...(self.needsScalebar
+                    ...(self.graphType
                         ? [
                             {
                                 type: 'checkbox',

package/dist/LinearWiggleDisplay/renderSvg.js

@@ -10,7 +10,7 @@ const mobx_1 = require("mobx");
 const YScaleBar_1 = __importDefault(require("../shared/YScaleBar"));
 async function renderSvg(self, opts, superRenderSvg) {
     await (0, mobx_1.when)(() => !!self.stats && !!self.regionCannotBeRenderedText);
-    const { needsScalebar, stats } = self;
+    const { graphType, stats } = self;
     const { offsetPx } = (0, util_1.getContainingView)(self);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("g", { children: await superRenderSvg(opts) }), needsScalebar && stats ? ((0, jsx_runtime_1.jsx)("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: (0, jsx_runtime_1.jsx)(YScaleBar_1.default, { model: self, orientation: "left" }) })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("g", { children: await superRenderSvg(opts) }), graphType && stats ? ((0, jsx_runtime_1.jsx)("g", { transform: `translate(${Math.max(-offsetPx, 0)})`, children: (0, jsx_runtime_1.jsx)(YScaleBar_1.default, { model: self, orientation: "left" }) })) : null] }));
 }

package/dist/MultiDensityRenderer/configSchema.d.ts

@@ -3,16 +3,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/MultiLineRenderer/configSchema.d.ts

@@ -15,16 +15,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/MultiLinearWiggleDisplay/components/ColorLegend.js

@@ -8,11 +8,11 @@ const mobx_react_1 = require("mobx-react");
 const LegendItem_1 = __importDefault(require("./LegendItem"));
 const RectBg_1 = __importDefault(require("./RectBg"));
 const ColorLegend = (0, mobx_react_1.observer)(function ({ model, rowHeight, exportSVG, }) {
-    const { needsScalebar, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, labelWidth, } = model;
+    const { graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, sources, labelWidth, } = model;
     const colorBoxWidth = renderColorBoxes ? 15 : 0;
     const legendWidth = labelWidth + colorBoxWidth + 5;
     const svgOffset = exportSVG ? 10 : 0;
-    const extraOffset = svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0);
+    const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
     return sources ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: 0, x: extraOffset, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null, sources.map((source, idx) => ((0, jsx_runtime_1.jsx)(LegendItem_1.default, { source: source, idx: idx, model: model, rowHeight: rowHeight, exportSVG: exportSVG, labelWidth: labelWidth }, `${source.name}-${idx}`)))] })) : null;
 });
 exports.default = ColorLegend;

package/dist/MultiLinearWiggleDisplay/components/LegendItem.js

@@ -7,13 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const RectBg_1 = __importDefault(require("./RectBg"));
 const LegendItem = function ({ source, idx, rowHeight, labelWidth, model, exportSVG, }) {
     const boxHeight = Math.min(20, rowHeight);
-    const { needsCustomLegend, needsScalebar, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, } = model;
+    const { needsCustomLegend, graphType, needsFullHeightScalebar, rowHeightTooSmallForScalebar, renderColorBoxes, } = 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);
+    const extraOffset = svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [needsFullHeightScalebar ? null : ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: legendWidth, height: boxHeight })), source.color ? ((0, jsx_runtime_1.jsx)(RectBg_1.default, { y: idx * rowHeight + 1, x: extraOffset, width: colorBoxWidth, height: needsCustomLegend ? rowHeight : boxHeight, color: source.color })) : null, canDisplayLabel ? ((0, jsx_runtime_1.jsx)("text", { y: idx * rowHeight + 13, x: extraOffset + colorBoxWidth + 2, fontSize: svgFontSize, children: source.name })) : null] }));
 };
 exports.default = LegendItem;

package/dist/MultiLinearWiggleDisplay/model.d.ts

@@ -337,7 +337,7 @@ export declare function stateModelFactory(_pluginManager: PluginManager, configS
     readonly TooltipComponent: AnyReactComponentType;
     readonly rendererTypeName: string;
 } & {
-    readonly needsScalebar: boolean;
+    readonly graphType: boolean;
     readonly needsFullHeightScalebar: boolean;
     readonly isMultiRow: boolean;
     readonly needsCustomLegend: boolean;

package/dist/MultiLinearWiggleDisplay/model.js

@@ -107,7 +107,7 @@ function stateModelFactory(_pluginManager, configSchema) {
         },
     }))
         .views(self => ({
-        get needsScalebar() {
+        get graphType() {
             return (self.rendererTypeName === 'MultiXYPlotRenderer' ||
                 self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
                 self.rendererTypeName === 'MultiLineRenderer' ||
@@ -293,7 +293,7 @@ function stateModelFactory(_pluginManager, configSchema) {
                             },
                         ]
                         : []),
-                    ...(self.needsScalebar
+                    ...(self.graphType
                         ? [
                             {
                                 type: 'checkbox',

package/dist/MultiRowLineRenderer/configSchema.d.ts

@@ -15,16 +15,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/MultiRowXYPlotRenderer/configSchema.d.ts

@@ -23,16 +23,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/MultiXYPlotRenderer/configSchema.d.ts

@@ -23,16 +23,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/WiggleBaseRenderer.d.ts

@@ -15,10 +15,12 @@ export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
     ticks: {
         values: number[];
     };
+    inverted: boolean;
     themeOptions: ThemeOptions;
 }
 export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
     features: Map<string, Feature>;
+    inverted: boolean;
 }
 export interface MultiRenderArgsDeserialized extends RenderArgsDeserializedWithFeatures {
     sources: Source[];

package/dist/WiggleBaseRenderer.js

@@ -12,12 +12,13 @@ class WiggleBaseRenderer extends FeatureRendererType_1.default {
     }
     async render(renderProps) {
         const features = await this.getFeatures(renderProps);
-        const { height, regions, bpPerPx } = renderProps;
+        const { inverted, height, regions, bpPerPx } = renderProps;
         const region = regions[0];
         const width = (region.end - region.start) / bpPerPx;
         const { reducedFeatures, ...rest } = await (0, util_1.renderToAbstractCanvas)(width, height, renderProps, ctx => this.draw(ctx, {
             ...renderProps,
             features,
+            inverted,
         }));
         const results = await super.render({
             ...renderProps,

package/dist/XYPlotRenderer/XYPlotRenderer.d.ts

@@ -1,8 +1,7 @@
 import WiggleBaseRenderer from '../WiggleBaseRenderer';
 import type { RenderArgsDeserializedWithFeatures } from '../WiggleBaseRenderer';
-import type { Feature } from '@jbrowse/core/util';
 export default class XYPlotRenderer extends WiggleBaseRenderer {
     draw(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures): Promise<{
-        reducedFeatures: Feature[];
+        reducedFeatures: import("@jbrowse/core/util").Feature[];
     }>;
 }

package/dist/XYPlotRenderer/XYPlotRenderer.js

@@ -41,18 +41,19 @@ const WiggleBaseRenderer_1 = __importDefault(require("../WiggleBaseRenderer"));
 const util_1 = require("../util");
 class XYPlotRenderer extends WiggleBaseRenderer_1.default {
     async draw(ctx, props) {
-        const { stopToken, features, config } = props;
+        const { inverted, stopToken, features, config } = props;
         const { drawXY } = await Promise.resolve().then(() => __importStar(require('../drawXY')));
         const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
         const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
         const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
         return drawXY(ctx, {
             ...props,
-            colorCallback: (0, configuration_1.readConfObject)(config, 'color') === '#f0f'
-                ? (_, score) => score < pivotValue ? negColor : posColor
+            colorCallback: !config.color.isCallback
+                ? (_feature, score) => (score < pivotValue ? negColor : posColor)
                 : (feature, _score) => (0, configuration_1.readConfObject)(config, 'color', { feature }),
             offset: util_1.YSCALEBAR_LABEL_OFFSET,
             features: [...features.values()],
+            inverted,
             stopToken,
         });
     }

package/dist/XYPlotRenderer/configSchema.d.ts

@@ -23,16 +23,19 @@ declare const configSchema: import("@jbrowse/core/configuration/configurationSch
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/configSchema.d.ts

@@ -3,16 +3,19 @@ declare const WiggleRenderer: import("@jbrowse/core/configuration/configurationS
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     posColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     negColor: {
         type: string;
         description: string;
         defaultValue: string;
+        contextVariable: string[];
     };
     clipColor: {
         type: string;

package/dist/configSchema.js

@@ -8,16 +8,19 @@ const WiggleRenderer = (0, configuration_1.ConfigurationSchema)('WiggleRenderer'
         type: 'color',
         description: 'the color of track, overrides posColor and negColor',
         defaultValue: '#f0f',
+        contextVariable: ['feature'],
     },
     posColor: {
         type: 'color',
         description: 'the color to use when the score is positive',
         defaultValue: 'blue',
+        contextVariable: ['feature'],
     },
     negColor: {
         type: 'color',
         description: 'the color to use when the score is negative',
         defaultValue: 'red',
+        contextVariable: ['feature'],
     },
     clipColor: {
         type: 'color',

package/dist/drawXY.d.ts

@@ -13,6 +13,7 @@ export declare function drawXY(ctx: CanvasRenderingContext2D, props: {
     };
     config: AnyConfigurationModel;
     displayCrossHatches: boolean;
+    inverted: boolean;
     offset?: number;
     colorCallback: (f: Feature, score: number) => string;
 }): {

package/dist/drawXY.js

@@ -19,7 +19,7 @@ function darken(color, amount) {
 const fudgeFactor = 0.3;
 const clipHeight = 2;
 function drawXY(ctx, props) {
-    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, } = props;
+    const { features, bpPerPx, regions, scaleOpts, height: unadjustedHeight, config, ticks, displayCrossHatches, offset = 0, colorCallback, inverted, } = props;
     const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
     const height = unadjustedHeight - offset * 2;
@@ -28,7 +28,7 @@ function drawXY(ctx, props) {
     const summaryScoreMode = (0, configuration_1.readConfObject)(config, 'summaryScoreMode');
     const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
     const minSize = (0, configuration_1.readConfObject)(config, 'minSize');
-    const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
+    const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height], inverted });
     const originY = (0, util_2.getOrigin)(scaleOpts.scaleType);
     const domain = scale.domain();
     const niceMin = domain[0];

package/dist/index.d.ts

@@ -50,16 +50,19 @@ export default class WigglePlugin extends Plugin {
                 type: string;
                 description: string;
                 defaultValue: string;
+                contextVariable: string[];
             };
             posColor: {
                 type: string;
                 description: string;
                 defaultValue: string;
+                contextVariable: string[];
             };
             negColor: {
                 type: string;
                 description: string;
                 defaultValue: string;
+                contextVariable: string[];
             };
             clipColor: {
                 type: string;