@jbrowse/plugin-wiggle 2.13.0 → 2.14.0

package/dist/WiggleRendering.js

@@ -27,8 +27,8 @@ const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const ui_1 = require("@jbrowse/core/ui");
 const WiggleRendering = (0, mobx_react_1.observer)(function (props) {
-    const { regions, features, bpPerPx, width, height, onMouseLeave = () => { }, onMouseMove = () => { }, onFeatureClick = () => { }, } = props;
-    const [region] = regions;
+    const { regions, features, bpPerPx, width, height, onMouseLeave, onMouseMove, onFeatureClick, } = props;
+    const region = regions[0];
     const ref = (0, react_1.useRef)(null);
     function getFeatureUnderMouse(eventClientX) {
         // calculates feature under mouse
@@ -50,7 +50,7 @@ const WiggleRendering = (0, mobx_react_1.observer)(function (props) {
         }
         return featureUnderMouse;
     }
-    return (react_1.default.createElement("div", { ref: ref, "data-testid": "wiggle-rendering-test", onMouseMove: event => { var _a; return onMouseMove(event, (_a = getFeatureUnderMouse(event.clientX)) === null || _a === void 0 ? void 0 : _a.id()); }, onClick: event => { var _a; return onFeatureClick(event, (_a = getFeatureUnderMouse(event.clientX)) === null || _a === void 0 ? void 0 : _a.id()); }, onMouseLeave: event => onMouseLeave(event), style: {
+    return (react_1.default.createElement("div", { ref: ref, "data-testid": "wiggle-rendering-test", onMouseMove: e => { var _a; return onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(e, (_a = getFeatureUnderMouse(e.clientX)) === null || _a === void 0 ? void 0 : _a.id()); }, onClick: e => { var _a; return onFeatureClick === null || onFeatureClick === void 0 ? void 0 : onFeatureClick(e, (_a = getFeatureUnderMouse(e.clientX)) === null || _a === void 0 ? void 0 : _a.id()); }, onMouseLeave: e => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e), style: {
             overflow: 'visible',
             position: 'relative',
             height,

package/dist/drawDensity.js

@@ -9,7 +9,7 @@ const fudgeFactor = 0.3;
 const clipHeight = 2;
 function drawDensity(ctx, props) {
     const { features, regions, bpPerPx, scaleOpts, height, config } = props;
-    const [region] = regions;
+    const region = regions[0];
     const pivot = (0, configuration_1.readConfObject)(config, 'bicolorPivot');
     const pivotValue = (0, configuration_1.readConfObject)(config, 'bicolorPivotValue');
     const negColor = (0, configuration_1.readConfObject)(config, 'negColor');
@@ -26,8 +26,10 @@ function drawDensity(ctx, props) {
     const cb = color === '#f0f'
         ? (_, score) => scale(score)
         : (feature, score) => (0, configuration_1.readConfObject)(config, 'color', { feature, score });
-    const [niceMin, niceMax] = scale2.domain();
-    let prevLeftPx = -Infinity;
+    const domain = scale2.domain();
+    const niceMin = domain[0];
+    const niceMax = domain[1];
+    let prevLeftPx = Number.NEGATIVE_INFINITY;
     let hasClipping = false;
     const reducedFeatures = [];
     for (const feature of features.values()) {

package/dist/drawLine.js

@@ -9,7 +9,7 @@ const fudgeFactor = 0.3;
 const clipHeight = 2;
 function drawLine(ctx, props) {
     const { features, regions, bpPerPx, scaleOpts, height: unadjustedHeight, ticks: { values }, displayCrossHatches, colorCallback, config, offset = 0, } = props;
-    const [region] = regions;
+    const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
     // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
     // wiggle display, and makes the height of the actual drawn area add
@@ -17,10 +17,12 @@ function drawLine(ctx, props) {
     const height = unadjustedHeight - offset * 2;
     const clipColor = (0, configuration_1.readConfObject)(config, 'clipColor');
     const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
-    const [niceMin, niceMax] = scale.domain();
+    const domain = scale.domain();
+    const niceMin = domain[0];
+    const niceMax = domain[1];
     const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
     let lastVal;
-    let prevLeftPx = -Infinity;
+    let prevLeftPx = Number.NEGATIVE_INFINITY;
     const reducedFeatures = [];
     for (const feature of features.values()) {
         const [leftPx, rightPx] = (0, util_1.featureSpanPx)(feature, region, bpPerPx);

package/dist/drawXY.js

@@ -20,7 +20,7 @@ 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 [region] = regions;
+    const region = regions[0];
     const width = (region.end - region.start) / bpPerPx;
     // the adjusted height takes into account YSCALEBAR_LABEL_OFFSET from the
     // wiggle display, and makes the height of the actual drawn area add
@@ -33,12 +33,14 @@ function drawXY(ctx, props) {
     const minSize = (0, configuration_1.readConfObject)(config, 'minSize');
     const scale = (0, util_2.getScale)({ ...scaleOpts, range: [0, height] });
     const originY = (0, util_2.getOrigin)(scaleOpts.scaleType);
-    const [niceMin, niceMax] = scale.domain();
+    const domain = scale.domain();
+    const niceMin = domain[0];
+    const niceMax = domain[1];
     const toY = (n) => (0, util_1.clamp)(height - (scale(n) || 0), 0, height) + offset;
     const toOrigin = (n) => toY(originY) - toY(n);
     const getHeight = (n) => (filled ? toOrigin(n) : Math.max(minSize, 1));
     let hasClipping = false;
-    let prevLeftPx = -Infinity;
+    let prevLeftPx = Number.NEGATIVE_INFINITY;
     const reducedFeatures = [];
     const crossingOrigin = niceMin < pivotValue && niceMax > pivotValue;
     // we handle whiskers separately to render max row, min row, and avg in three

package/dist/index.d.ts

@@ -17,10 +17,10 @@ export default class WigglePlugin extends Plugin {
             bpPerPx: number;
             width: number;
             height: number;
-            onMouseLeave: Function;
-            onMouseMove: Function;
-            onFeatureClick: Function;
             blockKey: string;
+            onMouseLeave?: (event: import("react").MouseEvent) => void;
+            onMouseMove?: (event: import("react").MouseEvent, arg?: string) => void;
+            onFeatureClick?: (event: import("react").MouseEvent, arg?: string) => void;
         }) => import("react").JSX.Element;
         XYPlotRenderer: typeof XYPlotRenderer;
         WiggleBaseRenderer: typeof WiggleBaseRenderer;

package/dist/index.js

@@ -97,7 +97,7 @@ class WigglePlugin extends Plugin_1.default {
                 if (regexGuess.test(fileName) && !hint) {
                     return obj;
                 }
-                else if (hint === adapterName) {
+                if (hint === adapterName) {
                     return obj;
                 }
                 return cb(file, index, hint);

package/dist/shared/SetMinMaxDialog.d.ts

@@ -4,8 +4,8 @@ export default function SetMinMaxDialog(props: {
         minScore: number;
         maxScore: number;
         scaleType: string;
-        setMinScore: Function;
-        setMaxScore: Function;
+        setMinScore: (arg?: number) => void;
+        setMaxScore: (arg?: number) => void;
     };
     handleClose: () => void;
 }): React.JSX.Element;

package/dist/shared/SetMinMaxDialog.js

@@ -41,8 +41,12 @@ function SetMinMaxDialog(props) {
             react_1.default.createElement(material_1.Typography, null, "Enter min/max score: "),
             !ok ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Max is greater than or equal to min")) : null,
             !logOk ? (react_1.default.createElement(material_1.Typography, { color: "error" }, "Min score should be greater than 0 for log scale")) : null,
-            react_1.default.createElement(material_1.TextField, { value: min, onChange: event => setMin(event.target.value), placeholder: "Enter min score" }),
-            react_1.default.createElement(material_1.TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max score" })),
+            react_1.default.createElement(material_1.TextField, { value: min, onChange: event => {
+                    setMin(event.target.value);
+                }, placeholder: "Enter min score" }),
+            react_1.default.createElement(material_1.TextField, { value: max, onChange: event => {
+                    setMax(event.target.value);
+                }, placeholder: "Enter max score" })),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", type: "submit", style: { marginLeft: 20 }, disabled: !ok, onClick: () => {
                     model.setMinScore(min !== '' && !Number.isNaN(+min) ? +min : undefined);

package/dist/shared/YScaleBar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { axisPropsFromTickScale } from 'react-d3-axis-mod';
+import type { axisPropsFromTickScale } from 'react-d3-axis-mod';
 type Ticks = ReturnType<typeof axisPropsFromTickScale>;
 declare const YScaleBar: ({ model, orientation, }: {
     model: {

package/dist/shared/modelShared.d.ts

@@ -181,7 +181,7 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: import("react").FC<{
@@ -407,10 +407,10 @@ export default function SharedWiggleMixin(configSchema: AnyConfigurationSchemaTy
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                 [x: string]: any;
-            } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
-        } & import("mobx-state-tree" /**
-         * #property
-         */).IStateTreeNode<AnyConfigurationSchemaType>);
+            } & import("mobx-state-tree/dist/internal" /**
+             * #property
+             */).NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
+        } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
     /**
      * #getter

package/dist/shared/modelShared.js

@@ -411,11 +411,15 @@ function SharedWiggleMixin(configSchema) {
                             subMenu: [
                                 {
                                     label: 'Finer resolution',
-                                    onClick: () => self.setResolution(self.resolution * 5),
+                                    onClick: () => {
+                                        self.setResolution(self.resolution * 5);
+                                    },
                                 },
                                 {
                                     label: 'Coarser resolution',
-                                    onClick: () => self.setResolution(self.resolution / 5),
+                                    onClick: () => {
+                                        self.setResolution(self.resolution / 5);
+                                    },
                                 },
                             ],
                         },
@@ -425,14 +429,18 @@ function SharedWiggleMixin(configSchema) {
                                 label: elt,
                                 type: 'radio',
                                 checked: self.summaryScoreModeSetting === elt,
-                                onClick: () => self.setSummaryScoreMode(elt),
+                                onClick: () => {
+                                    self.setSummaryScoreMode(elt);
+                                },
                             })),
                         },
                     ]
                     : []),
                 {
                     label: self.scaleType === 'log' ? 'Set linear scale' : 'Set log scale',
-                    onClick: () => self.toggleLogScale(),
+                    onClick: () => {
+                        self.toggleLogScale();
+                    },
                 },
                 {
                     label: 'Autoscale type',
@@ -449,7 +457,9 @@ function SharedWiggleMixin(configSchema) {
                         label,
                         type: 'radio',
                         checked: self.autoscaleType === val,
-                        onClick: () => self.setAutoscale(val),
+                        onClick: () => {
+                            self.setAutoscale(val);
+                        },
                     })),
                 },
                 {

package/dist/util.d.ts

@@ -25,7 +25,7 @@ export interface Source {
  *   - pivotValue (number)
  *   - inverted (boolean)
  */
-export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleQuantize<number, never>;
+export declare function getScale({ domain, range, scaleType, pivotValue, inverted, }: ScaleOpts): import("@mui/x-charts-vendor/d3-scale").ScaleLinear<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleLogarithmic<number, number, never> | import("@mui/x-charts-vendor/d3-scale").ScaleQuantize<number, never>;
 /**
  * gets the origin for drawing the graph. for linear this is 0, for log this is arbitrarily set to log(1)==0
  *
@@ -56,7 +56,7 @@ export declare function getQuantitativeStats(self: {
 }, opts: {
     headers?: Record<string, string>;
     signal?: AbortSignal;
-    filters?: string[];
+    filters: string[];
 }): Promise<QuantitativeStats>;
 export declare function quantitativeStatsAutorun(self: {
     featureDensityStatsReady: boolean;

package/dist/util.js

@@ -9,7 +9,7 @@ exports.quantitativeStatsAutorun = quantitativeStatsAutorun;
 exports.toP = toP;
 exports.round = round;
 exports.fillRectCtx = fillRectCtx;
-const d3_scale_1 = require("d3-scale");
+const d3_scale_1 = require("@mui/x-charts-vendor/d3-scale");
 const mobx_1 = require("mobx");
 const util_1 = require("@jbrowse/core/util");
 const tracks_1 = require("@jbrowse/core/util/tracks");
@@ -37,8 +37,7 @@ function getScale({ domain = [], range = [], scaleType, pivotValue, inverted, })
         scale = (0, d3_scale_1.scaleLinear)();
     }
     else if (scaleType === 'log') {
-        scale = (0, d3_scale_1.scaleLog)();
-        scale.base(2);
+        scale = (0, d3_scale_1.scaleLog)().base(2);
     }
     else if (scaleType === 'quantize') {
         scale = (0, d3_scale_1.scaleQuantize)();
@@ -101,17 +100,13 @@ function getNiceDomain({ scaleType, domain, bounds, }) {
         }
     }
     if (scaleType === 'log') {
-        // if the min is 0, assume that it's just something
-        // with no read coverage and that we should ignore it in calculations
-        // if it's greater than 1 pin to 1 for the full range also
-        // otherwise, we may see bigwigs with fractional values
-        if (min === 0 || min > 1) {
+        // for min>0 and max>1, set log min to 1, which works for most coverage
+        // types tracks. if max is not >1, might be like raw p-values so then it'll
+        // display negative values
+        if (min >= 0 && max > 1) {
             min = 1;
         }
     }
-    if (min === undefined || max === undefined) {
-        throw new Error('invalid domain supplied to stats function');
-    }
     if (minScore !== undefined && minScore !== Number.MIN_VALUE) {
         min = minScore;
     }
@@ -139,7 +134,7 @@ function getNiceDomain({ scaleType, domain, bounds, }) {
 }
 async function getQuantitativeStats(self, opts) {
     const { rpcManager } = (0, util_1.getSession)(self);
-    const nd = (0, configuration_1.getConf)(self, 'numStdDev') || 3;
+    const numStdDev = (0, configuration_1.getConf)(self, 'numStdDev') || 3;
     const { adapterConfig, autoscaleType } = self;
     const sessionId = (0, tracks_1.getRpcSessionId)(self);
     const params = {
@@ -161,8 +156,8 @@ async function getQuantitativeStats(self, opts) {
         return autoscaleType === 'globalsd'
             ? {
                 ...results,
-                scoreMin: scoreMin >= 0 ? 0 : scoreMean - nd * scoreStdDev,
-                scoreMax: scoreMean + nd * scoreStdDev,
+                scoreMin: scoreMin >= 0 ? 0 : scoreMean - numStdDev * scoreStdDev,
+                scoreMax: scoreMean + numStdDev * scoreStdDev,
             }
             : results;
     }
@@ -187,8 +182,8 @@ async function getQuantitativeStats(self, opts) {
         return autoscaleType === 'localsd'
             ? {
                 ...results,
-                scoreMin: scoreMin >= 0 ? 0 : scoreMean - nd * scoreStdDev,
-                scoreMax: scoreMean + nd * scoreStdDev,
+                scoreMin: scoreMin >= 0 ? 0 : scoreMean - numStdDev * scoreStdDev,
+                scoreMax: scoreMean + numStdDev * scoreStdDev,
             }
             : results;
     }
@@ -212,6 +207,7 @@ function quantitativeStatsAutorun(self) {
             const statsRegion = JSON.stringify(view.dynamicBlocks);
             const wiggleStats = await getQuantitativeStats(self, {
                 signal: aborter.signal,
+                filters: [],
                 ...self.renderProps(),
             });
             if ((0, mobx_state_tree_1.isAlive)(self)) {

package/esm/BigWigAdapter/BigWigAdapter.d.ts

@@ -14,7 +14,7 @@ export default class BigWigAdapter extends BaseFeatureDataAdapter {
         header: Awaited<ReturnType<BigWig["getHeader"]>>;
     }>;
     getRefNames(opts?: BaseOptions): Promise<string[]>;
-    refIdToName(refId: number): Promise<string>;
+    refIdToName(refId: number): Promise<string | undefined>;
     getGlobalStats(opts?: BaseOptions): Promise<import("@jbrowse/core/util/stats").QuantitativeStats>;
     getFeatures(region: Region, opts?: WiggleOptions): import("rxjs").Observable<Feature>;
     getMultiRegionFeatureDensityStats(_regions: Region[]): Promise<{

package/esm/BigWigAdapter/BigWigAdapter.js

@@ -16,7 +16,7 @@ class BigWigAdapter extends BaseFeatureDataAdapter {
     }
     async setup(opts) {
         if (!this.setupP) {
-            this.setupP = this.setupPre(opts).catch(e => {
+            this.setupP = this.setupPre(opts).catch((e) => {
                 this.setupP = undefined;
                 throw e;
             });

package/esm/CreateMultiWiggleExtension/ConfirmDialog.js

@@ -5,7 +5,9 @@ import { readConfObject, } from '@jbrowse/core/configuration';
 const ConfirmDialog = ({ tracks, onClose, }) => {
     const [val, setVal] = useState(`MultiWiggle ${Date.now()}`);
     const allQuant = tracks.every(t => t.type === 'QuantitativeTrack');
-    return (React.createElement(Dialog, { open: true, onClose: () => onClose(false), title: "Confirm multi-wiggle track create" },
+    return (React.createElement(Dialog, { open: true, onClose: () => {
+            onClose(false);
+        }, title: "Confirm multi-wiggle track create" },
         React.createElement(DialogContent, null,
             React.createElement(Typography, null,
                 !allQuant
@@ -16,10 +18,16 @@ const ConfirmDialog = ({ tracks, onClose, }) => {
                 readConfObject(track, 'name'),
                 " - ",
                 track.type)))),
-            React.createElement(TextField, { value: val, onChange: event => setVal(event.target.value), helperText: "Track name" }),
+            React.createElement(TextField, { value: val, onChange: event => {
+                    setVal(event.target.value);
+                }, helperText: "Track name" }),
             React.createElement(Typography, null, "Confirm creation of track?")),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => onClose(false), color: "primary" }, "Cancel"),
-            React.createElement(Button, { onClick: () => onClose(true, { name: val }), color: "primary", variant: "contained", autoFocus: true }, "Submit"))));
+            React.createElement(Button, { onClick: () => {
+                    onClose(false);
+                }, color: "primary" }, "Cancel"),
+            React.createElement(Button, { onClick: () => {
+                    onClose(true, { name: val });
+                }, color: "primary", variant: "contained", autoFocus: true }, "Submit"))));
 };
 export default ConfirmDialog;

package/esm/LinearWiggleDisplay/components/SetColorDialog.js

@@ -8,8 +8,12 @@ const SetColorDialog = observer(function SetColorDialog({ model, handleClose, })
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set color" },
         React.createElement(DialogContent, null,
             React.createElement(Typography, null, "Select either an overall color, or the positive/negative colors. Note that density renderers only work properly with positive/negative colors"),
-            React.createElement(FormControlLabel, { checked: !posneg, onClick: () => setPosNeg(false), control: React.createElement(Radio, null), label: "Overall color" }),
-            React.createElement(FormControlLabel, { checked: posneg, onClick: () => setPosNeg(true), control: React.createElement(Radio, null), label: "Positive/negative color" }),
+            React.createElement(FormControlLabel, { checked: !posneg, onClick: () => {
+                    setPosNeg(false);
+                }, control: React.createElement(Radio, null), label: "Overall color" }),
+            React.createElement(FormControlLabel, { checked: posneg, onClick: () => {
+                    setPosNeg(true);
+                }, control: React.createElement(Radio, null), label: "Positive/negative color" }),
             posneg ? (React.createElement(React.Fragment, null,
                 React.createElement(Typography, null, "Positive color"),
                 React.createElement(ColorPicker, { color: model.posColor || 'black', onChange: event => {
@@ -22,13 +26,17 @@ const SetColorDialog = observer(function SetColorDialog({ model, handleClose, })
                         model.setColor(undefined);
                     } }))) : (React.createElement(React.Fragment, null,
                 React.createElement(Typography, null, "Overall color"),
-                React.createElement(ColorPicker, { color: model.color || 'black', onChange: event => model.setColor(event) })))),
+                React.createElement(ColorPicker, { color: model.color || 'black', onChange: event => {
+                        model.setColor(event);
+                    } })))),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => {
                     model.setPosColor(undefined);
                     model.setNegColor(undefined);
                     model.setColor(undefined);
                 }, color: "secondary", variant: "contained" }, "Restore default"),
-            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => handleClose() }, "Submit"))));
+            React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
+                    handleClose();
+                } }, "Submit"))));
 });
 export default SetColorDialog;

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

@@ -4,7 +4,7 @@ import { TooltipContentsComponent } from '../../Tooltip';
 type Coord = [number, number];
 declare const WiggleTooltip: (props: {
     model: {
-        featureUnderMouse: Feature;
+        featureUnderMouse?: Feature;
     };
     height: number;
     offsetMouseCoord: Coord;

package/esm/LinearWiggleDisplay/components/Tooltip.js

@@ -7,8 +7,13 @@ const en = (n) => n.toLocaleString('en-US');
 const TooltipContents = React.forwardRef(function TooltipContents2({ feature }, ref) {
     const start = feature.get('start');
     const end = feature.get('end');
-    const name = feature.get('refName');
-    const loc = [name, start === end ? en(start) : `${en(start)}..${en(end)}`]
+    const refName = feature.get('refName');
+    const name = feature.get('name');
+    const loc = [
+        refName,
+        name,
+        start === end ? en(start) : `${en(start)}..${en(end)}`,
+    ]
         .filter(f => !!f)
         .join(':');
     return feature.get('summary') !== undefined ? (React.createElement("div", { ref: ref },

package/esm/LinearWiggleDisplay/models/model.d.ts

@@ -155,7 +155,7 @@ declare function stateModelFactory(pluginManager: PluginManager, configSchema: A
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree" /**
          * #getter
          */)._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{

package/esm/LinearWiggleDisplay/models/model.js

@@ -108,7 +108,7 @@ function stateModelFactory(pluginManager, configSchema) {
                 if (self.filled) {
                     return 0;
                 }
-                else if (!self.filled && self.minSize === 1) {
+                else if (self.minSize === 1) {
                     return 1;
                 }
                 else {
@@ -139,7 +139,9 @@ function stateModelFactory(pluginManager, configSchema) {
                                     label: elt,
                                     type: 'radio',
                                     checked: self.fillSetting === idx,
-                                    onClick: () => self.setFill(idx),
+                                    onClick: () => {
+                                        self.setFill(idx);
+                                    },
                                 })),
                             },
                         ]
@@ -150,7 +152,9 @@ function stateModelFactory(pluginManager, configSchema) {
                                 type: 'checkbox',
                                 label: 'Draw cross hatches',
                                 checked: self.displayCrossHatchesSetting,
-                                onClick: () => self.toggleCrossHatches(),
+                                onClick: () => {
+                                    self.toggleCrossHatches();
+                                },
                             },
                         ]
                         : []),
@@ -162,7 +166,9 @@ function stateModelFactory(pluginManager, configSchema) {
                                     label: key,
                                     type: 'radio',
                                     checked: self.rendererTypeNameSimple === key,
-                                    onClick: () => self.setRendererType(key),
+                                    onClick: () => {
+                                        self.setRendererType(key);
+                                    },
                                 })),
                             },
                         ]

package/esm/MultiDensityRenderer/MultiDensityRenderer.js

@@ -4,11 +4,9 @@ import { drawDensity } from '../drawDensity';
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
     // @ts-expect-error
     async draw(ctx, props) {
-        const { bpPerPx, sources, regions, features } = props;
-        const [region] = regions;
+        const { sources, features } = props;
         const groups = groupBy(features.values(), f => f.get('source'));
         const height = props.height / sources.length;
-        const width = (region.end - region.start) / bpPerPx;
         let feats = [];
         ctx.save();
         sources.forEach(source => {
@@ -18,11 +16,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
                 features,
                 height,
             });
-            ctx.strokeStyle = 'rgba(200,200,200,0.8)';
-            ctx.beginPath();
-            ctx.moveTo(0, height);
-            ctx.lineTo(width, height);
-            ctx.stroke();
             ctx.translate(0, height);
             feats = feats.concat(reducedFeatures);
         });

package/esm/MultiLinearWiggleDisplay/components/ScoreLegend.js

@@ -5,8 +5,7 @@ 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 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;

package/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

@@ -18,7 +18,9 @@ export default function SetColorDialog({ model, handleClose, }) {
     const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', true);
     return (React.createElement(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: 'Multi-wiggle color/arrangement editor' },
         React.createElement(DialogContent, { className: classes.content },
-            React.createElement(Button, { variant: "contained", style: { float: 'right' }, onClick: () => setShowTips(!showTips) }, showTips ? 'Hide tips' : 'Show tips'),
+            React.createElement(Button, { variant: "contained", style: { float: 'right' }, onClick: () => {
+                    setShowTips(!showTips);
+                } }, showTips ? 'Hide tips' : 'Show tips'),
             React.createElement("br", null),
             showTips ? (React.createElement(React.Fragment, null,
                 "Helpful tips",

package/esm/MultiLinearWiggleDisplay/components/SourcesGrid.js

@@ -30,17 +30,27 @@ function SourcesGrid({ rows, onChange, showTips, }) {
         field: null,
     });
     return (React.createElement("div", null,
-        React.createElement(Button, { disabled: !selected.length, onClick: event => setAnchorEl(event.currentTarget) }, "Change color of selected items"),
-        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected)), disabled: !selected.length },
+        React.createElement(Button, { disabled: !selected.length, onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } }, "Change color of selected items"),
+        React.createElement(Button, { onClick: () => {
+                onChange(moveUp([...rows], selected));
+            }, disabled: !selected.length },
             React.createElement(KeyboardArrowUpIcon, null),
             showTips ? 'Move selected items up' : null),
-        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected)), disabled: !selected.length },
+        React.createElement(Button, { onClick: () => {
+                onChange(moveDown([...rows], selected));
+            }, disabled: !selected.length },
             React.createElement(KeyboardArrowDownIcon, null),
             showTips ? 'Move selected items down' : null),
-        React.createElement(Button, { onClick: () => onChange(moveUp([...rows], selected, rows.length)), disabled: !selected.length },
+        React.createElement(Button, { onClick: () => {
+                onChange(moveUp([...rows], selected, rows.length));
+            }, disabled: !selected.length },
             React.createElement(KeyboardDoubleArrowUpIcon, null),
             showTips ? 'Move selected items to top' : null),
-        React.createElement(Button, { onClick: () => onChange(moveDown([...rows], selected, rows.length)), disabled: !selected.length },
+        React.createElement(Button, { onClick: () => {
+                onChange(moveDown([...rows], selected, rows.length));
+            }, disabled: !selected.length },
             React.createElement(KeyboardDoubleArrowDownIcon, null),
             showTips ? 'Move selected items to bottom' : null),
         React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
@@ -52,9 +62,13 @@ function SourcesGrid({ rows, onChange, showTips, }) {
                     }
                 });
                 onChange([...rows]);
-            }, onClose: () => setAnchorEl(null) }),
+            }, onClose: () => {
+                setAnchorEl(null);
+            } }),
         React.createElement("div", { style: { height: 400, width: '100%' } },
-            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => setSelected(arg), rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                    setSelected(arg);
+                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
                     {
                         field: 'color',
                         headerName: 'Color',
@@ -89,7 +103,7 @@ function SourcesGrid({ rows, onChange, showTips, }) {
                     // thing since we are controlling sort instead of the default data
                     // grid sort anyways
                     const idx = (currSort.idx + 1) % 2;
-                    const field = (sort === null || sort === void 0 ? void 0 : sort.field) || currSort.field;
+                    const field = sort.field || currSort.field;
                     setCurrSort({ idx, field });
                     onChange(field
                         ? [...rows].sort((a, b) => {

package/esm/MultiLinearWiggleDisplay/components/Tooltip.js

@@ -22,13 +22,10 @@ const TooltipContents = React.forwardRef(function TooltipContents2({ model, feat
                     React.createElement("th", null, "color"),
                     React.createElement("th", null, "source"),
                     React.createElement("th", null, "score"))),
-            React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => {
-                var _a;
-                return (React.createElement("tr", { key: source },
-                    React.createElement("td", { style: { background: (_a = obj[source]) === null || _a === void 0 ? void 0 : _a.color } }, " "),
-                    React.createElement("td", null, source),
-                    React.createElement("td", null, toP(data.score))));
-            })))) : (React.createElement("span", null,
+            React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => (React.createElement("tr", { key: source },
+                React.createElement("td", { style: { background: obj[source].color } }, " "),
+                React.createElement("td", null, source),
+                React.createElement("td", null, toP(data.score)))))))) : (React.createElement("span", null,
             source,
             ' ',
             summary