@jbrowse/plugin-wiggle 1.5.9 → 1.6.4

package/dist/plugin-wiggle.esm.js

@@ -9,14 +9,14 @@ import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import { observer } from 'mobx-react';
 import React, { useRef, useState, useMemo, lazy } from 'react';
 import { PrerenderedCanvas } from '@jbrowse/core/ui';
-import { featureSpanPx, getSession, isSelectionContainer, isAbortException, getContainingView, renameRegionsIfNeeded } from '@jbrowse/core/util';
+import { featureSpanPx, getSession, isSelectionContainer, isAbortException, getContainingView, renameRegionsIfNeeded, updateStatus } from '@jbrowse/core/util';
 import { scaleLinear, scaleLog, scaleQuantize } from 'd3-scale';
 import { types, getEnv, addDisposer, isAlive } from 'mobx-state-tree';
 import { baseLinearDisplayConfigSchema, BaseLinearDisplayComponent, BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
 import { getRpcSessionId, getFileName } from '@jbrowse/core/util/tracks';
 import { observable, autorun, when } from 'mobx';
 import { Axis, LEFT, RIGHT, axisPropsFromTickScale } from 'react-d3-axis';
-import { Portal, makeStyles, alpha, Dialog as Dialog$1, DialogTitle as DialogTitle$1, IconButton as IconButton$1, DialogContent as DialogContent$1, Button as Button$1 } from '@material-ui/core';
+import { Portal, makeStyles, alpha, Dialog as Dialog$1, DialogTitle as DialogTitle$1, IconButton as IconButton$1, DialogContent as DialogContent$1, FormControlLabel, Radio, Typography as Typography$1, DialogActions, Button as Button$1 } from '@material-ui/core';
 import { usePopper } from 'react-popper';
 import Color from 'color';
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
@@ -147,14 +147,14 @@ function _inherits(subClass, superClass) {
     throw new TypeError("Super expression must either be null or a function");
   }
 
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
   Object.defineProperty(subClass, "prototype", {
-    value: Object.create(superClass && superClass.prototype, {
-      constructor: {
-        value: subClass,
-        writable: true,
-        configurable: true
-      }
-    }),
     writable: false
   });
   if (superClass) _setPrototypeOf(subClass, superClass);
@@ -1327,8 +1327,7 @@ function getScale(_ref) {
     throw new Error('undefined scaleType');
   }
 
-  scale.domain(pivotValue !== undefined ? [min, pivotValue, max] : [min, max]); // console.log('before', scale.domain())
-
+  scale.domain(pivotValue !== undefined ? [min, pivotValue, max] : [min, max]);
   scale.nice();
 
   var _range = _slicedToArray(range, 2),
@@ -1339,8 +1338,7 @@ function getScale(_ref) {
     throw new Error('invalid range');
   }
 
-  scale.range(inverted ? range.slice().reverse() : range); // console.log('after', scale.domain())
-
+  scale.range(inverted ? range.slice().reverse() : range);
   return scale;
 }
 /**
@@ -1416,7 +1414,7 @@ function getNiceDomain(_ref2) {
   }
 
   if (min === undefined || max === undefined) {
-    throw new Error('invalid domain');
+    throw new Error('invalid domain supplied to stats function');
   }
 
   if (minScore !== undefined && minScore !== Number.MIN_VALUE) {
@@ -1551,12 +1549,11 @@ var DensityRenderer = /*#__PURE__*/function (_WiggleBaseRenderer) {
       var pivotValue = readConfObject(config, 'bicolorPivotValue');
       var negColor = readConfObject(config, 'negColor');
       var posColor = readConfObject(config, 'posColor');
+      var color = readConfObject(config, 'color');
       var colorCallback;
-      var colorScale;
 
-      if (readConfObject(config, 'color') === '#f0f') {
-        // default color, use posColor/negColor instead
-        colorScale = pivot !== 'none' ? getScale(_objectSpread2(_objectSpread2({}, scaleOpts), {}, {
+      if (color === '#f0f') {
+        var colorScale = pivot !== 'none' ? getScale(_objectSpread2(_objectSpread2({}, scaleOpts), {}, {
           pivotValue: pivotValue,
           range: [negColor, 'white', posColor]
         })) : getScale(_objectSpread2(_objectSpread2({}, scaleOpts), {}, {
@@ -1801,11 +1798,10 @@ var YScaleBar = /*#__PURE__*/observer(function (_ref) {
 });
 var LinearWiggleDisplay = /*#__PURE__*/observer(function (props) {
   var model = props.model;
-  var ready = model.ready,
-      stats = model.stats,
+  var stats = model.stats,
       height = model.height,
       needsScalebar = model.needsScalebar;
-  return React.createElement("div", null, React.createElement(BaseLinearDisplayComponent, Object.assign({}, props)), ready && stats && needsScalebar ? React.createElement("svg", {
+  return React.createElement("div", null, React.createElement(BaseLinearDisplayComponent, Object.assign({}, props)), stats && needsScalebar ? React.createElement("svg", {
     style: {
       position: 'absolute',
       top: 0,
@@ -1847,6 +1843,8 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
     resolution: types.optional(types.number, 1),
     fill: types.maybe(types["boolean"]),
     color: types.maybe(types.string),
+    posColor: types.maybe(types.string),
+    negColor: types.maybe(types.string),
     summaryScoreMode: types.maybe(types.string),
     rendererTypeNameState: types.maybe(types.string),
     scale: types.maybe(types.string),
@@ -1858,7 +1856,7 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
     }), {})
   }))["volatile"](function () {
     return {
-      ready: false,
+      statsReady: false,
       message: undefined,
       stats: observable({
         scoreMin: 0,
@@ -1871,11 +1869,17 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
       updateStats: function updateStats(stats) {
         self.stats.scoreMin = stats.scoreMin;
         self.stats.scoreMax = stats.scoreMax;
-        self.ready = true;
+        self.statsReady = true;
       },
       setColor: function setColor(color) {
         self.color = color;
       },
+      setPosColor: function setPosColor(color) {
+        self.posColor = color;
+      },
+      setNegColor: function setNegColor(color) {
+        self.negColor = color;
+      },
       setLoading: function setLoading(aborter) {
         var statsFetch = self.statsFetchInProgress;
 
@@ -1963,10 +1967,6 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
         return self.scale || getConf(self, 'scaleType');
       },
 
-      get filled() {
-        return typeof self.fill !== 'undefined' ? self.fill : readConfObject(this.rendererConfig, 'filled');
-      },
-
       get maxScore() {
         var max = self.constraints.max;
         return max !== undefined ? max : getConf(self, 'maxScore');
@@ -1975,23 +1975,35 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
       get minScore() {
         var min = self.constraints.min;
         return min !== undefined ? min : getConf(self, 'minScore');
-      },
+      }
 
+    };
+  }).views(function (self) {
+    return {
       get rendererConfig() {
-        var configBlob = getConf(self, ['renderers', this.rendererTypeName]) || {};
-        return self.rendererType.configSchema.create(_objectSpread2(_objectSpread2({}, configBlob), {}, {
+        var configBlob = getConf(self, ['renderers', self.rendererTypeName]) || {};
+        return self.rendererType.configSchema.create(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, configBlob), {}, {
           filled: self.fill,
-          scaleType: this.scaleType,
+          scaleType: self.scaleType,
           displayCrossHatches: self.displayCrossHatches,
-          summaryScoreMode: self.summaryScoreMode,
+          summaryScoreMode: self.summaryScoreMode
+        }, self.color ? {
           color: self.color
-        }), getEnv(self));
+        } : {}), self.negColor ? {
+          negColor: self.negColor
+        } : {}), self.posColor ? {
+          posColor: self.posColor
+        } : {}), getEnv(self));
       }
 
     };
   }).views(function (self) {
     var oldDomain = [0, 0];
     return {
+      get filled() {
+        return typeof self.fill !== 'undefined' ? self.fill : readConfObject(self.rendererConfig, 'filled');
+      },
+
       get summaryScoreModeSetting() {
         return self.summaryScoreMode || readConfObject(self.rendererConfig, 'summaryScoreMode');
       },
@@ -2079,8 +2091,9 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
     var superRenderProps = self.renderProps;
     return {
       renderProps: function renderProps() {
-        return _objectSpread2(_objectSpread2({}, superRenderProps()), {}, {
-          notReady: !self.ready,
+        var superProps = superRenderProps();
+        return _objectSpread2(_objectSpread2({}, superProps), {}, {
+          notReady: superProps.notReady || !self.statsReady,
           rpcDriverName: self.rpcDriverName,
           displayModel: self,
           config: self.rendererConfig,
@@ -2342,7 +2355,7 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
       },
       afterAttach: function afterAttach() {
         addDisposer(self, autorun( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-          var aborter, view, stats;
+          var aborter, view, wiggleStats;
           return runtime_1.wrap(function _callee2$(_context2) {
             while (1) {
               switch (_context2.prev = _context2.next) {
@@ -2360,7 +2373,7 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
                   return _context2.abrupt("return");
 
                 case 6:
-                  if (!(view.bpPerPx > self.maxViewBpPerPx)) {
+                  if (self.estimatedStatsReady) {
                     _context2.next = 8;
                     break;
                   }
@@ -2368,24 +2381,32 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
                   return _context2.abrupt("return");
 
                 case 8:
-                  _context2.next = 10;
+                  if (!self.regionTooLarge) {
+                    _context2.next = 10;
+                    break;
+                  }
+
+                  return _context2.abrupt("return");
+
+                case 10:
+                  _context2.next = 12;
                   return getStats({
                     signal: aborter.signal,
                     filters: self.filters
                   });
 
-                case 10:
-                  stats = _context2.sent;
+                case 12:
+                  wiggleStats = _context2.sent;
 
                   if (isAlive(self)) {
-                    self.updateStats(stats);
+                    self.updateStats(wiggleStats);
                   }
 
-                  _context2.next = 17;
+                  _context2.next = 19;
                   break;
 
-                case 14:
-                  _context2.prev = 14;
+                case 16:
+                  _context2.prev = 16;
                   _context2.t0 = _context2["catch"](0);
 
                   if (!isAbortException(_context2.t0) && isAlive(self)) {
@@ -2393,12 +2414,12 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
                     self.setError(_context2.t0);
                   }
 
-                case 17:
+                case 19:
                 case "end":
                   return _context2.stop();
               }
             }
-          }, _callee2, null, [[0, 14]]);
+          }, _callee2, null, [[0, 16]]);
         })), {
           delay: 1000
         }));
@@ -2413,7 +2434,7 @@ var stateModelFactory = function stateModelFactory(pluginManager, configSchema)
                 case 0:
                   _context3.next = 2;
                   return when(function () {
-                    return self.ready && !!self.regionCannotBeRenderedText;
+                    return self.statsReady && !!self.regionCannotBeRenderedText;
                   });
 
                 case 2:
@@ -3065,12 +3086,15 @@ var WigglePlugin = /*#__PURE__*/function (_Plugin) {
           var regexGuess = /\.(bw|bigwig)$/i;
           var adapterName = 'BigWigAdapter';
           var fileName = getFileName(file);
+          var obj = {
+            type: adapterName,
+            bigWigLocation: file
+          };
 
-          if (regexGuess.test(fileName) || adapterHint === adapterName) {
-            return {
-              type: adapterName,
-              bigWigLocation: file
-            };
+          if (regexGuess.test(fileName) && !adapterHint) {
+            return obj;
+          } else if (adapterHint === adapterName) {
+            return obj;
           }
 
           return adapterGuesser(file, index, adapterHint);
@@ -3201,9 +3225,8 @@ var SetMinMaxDialog = {
   'default': SetMinMaxDlg$1
 };
 
-var useStyles$2 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    root: {},
     closeButton: {
       position: 'absolute',
       right: theme.spacing(1),
@@ -3214,61 +3237,78 @@ var useStyles$2 = /*#__PURE__*/makeStyles$1(function (theme) {
 }); // this is needed because passing a entire color object into the react-color
 // for alpha, can't pass in an rgba string for example
 
-function serializeColor(color) {
+function serialize(color) {
   if (color instanceof Object) {
     var r = color.r,
         g = color.g,
-        b = color.b,
-        a = color.a;
-    return "rgb(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+        b = color.b;
+    return "rgb(".concat(r, ",").concat(g, ",").concat(b, ")");
   }
 
   return color;
 }
 
-function SetColorDialog(props) {
+function SetColorDialog(_ref) {
+  var model = _ref.model,
+      handleClose = _ref.handleClose;
   var classes = useStyles$2();
-  var model = props.model,
-      handleClose = props.handleClose;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      posneg = _useState2[0],
+      setPosNeg = _useState2[1];
+
   return React.createElement(Dialog$1, {
     open: true,
-    onClose: handleClose,
-    "aria-labelledby": "alert-dialog-title",
-    "aria-describedby": "alert-dialog-description"
-  }, React.createElement(DialogTitle$1, {
-    id: "alert-dialog-title"
-  }, "Select a color", React.createElement(IconButton$1, {
+    onClose: handleClose
+  }, React.createElement(DialogTitle$1, null, "Select either an overall color, or the positive/negative colors. Note that density renderers only work properly with positive/negative colors", React.createElement(IconButton$1, {
     "aria-label": "close",
     className: classes.closeButton,
     onClick: handleClose
-  }, React.createElement(CloseIcon, null))), React.createElement(DialogContent$1, {
-    style: {
-      overflowX: 'hidden'
+  }, React.createElement(CloseIcon, null))), React.createElement(DialogContent$1, null, React.createElement(FormControlLabel, {
+    checked: !posneg,
+    onClick: function onClick() {
+      return setPosNeg(false);
+    },
+    control: React.createElement(Radio, null),
+    label: 'Overall color'
+  }), React.createElement(FormControlLabel, {
+    checked: posneg,
+    onClick: function onClick() {
+      return setPosNeg(true);
+    },
+    control: React.createElement(Radio, null),
+    label: 'Positive/negative color'
+  }), posneg ? React.createElement(React.Fragment, null, React.createElement(Typography$1, null, "Positive color"), React.createElement(CompactPicker, {
+    onChange: function onChange(event) {
+      model.setPosColor(serialize(event.rgb));
+      model.setColor(undefined);
     }
-  }, React.createElement("div", {
-    className: classes.root
-  }, React.createElement(CompactPicker, {
+  }), React.createElement(Typography$1, null, "Negative color"), React.createElement(CompactPicker, {
     onChange: function onChange(event) {
-      model.setColor(serializeColor(event.rgb));
+      model.setNegColor(serialize(event.rgb));
+      model.setColor(undefined);
     }
-  }), React.createElement("br", null), React.createElement("div", {
-    style: {
-      margin: 20
+  })) : React.createElement(React.Fragment, null, React.createElement(Typography$1, null, "Overall color"), React.createElement(CompactPicker, {
+    onChange: function onChange(event) {
+      model.setColor(serialize(event.rgb));
     }
-  }, React.createElement(Button$1, {
+  }))), React.createElement(DialogActions, null, React.createElement(Button$1, {
     onClick: function onClick() {
+      model.setPosColor(undefined);
+      model.setNegColor(undefined);
       model.setColor(undefined);
     },
     color: "secondary",
     variant: "contained"
-  }, "Restore default from config"), React.createElement(Button$1, {
+  }, "Restore default"), React.createElement(Button$1, {
     variant: "contained",
     color: "primary",
     type: "submit",
     onClick: function onClick() {
       handleClose();
     }
-  }, "Submit")))));
+  }, "Submit")));
 }
 
 var SetColorDialog$1 = {
@@ -3297,28 +3337,25 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     key: "setup",
     value: function () {
       var _setup = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(opts) {
-        var _ref, _ref$statusCallback, statusCallback, result;
+        var _this2 = this;
+
+        var _ref, _ref$statusCallback, statusCallback;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _ref = opts || {}, _ref$statusCallback = _ref.statusCallback, statusCallback = _ref$statusCallback === void 0 ? function () {} : _ref$statusCallback;
-                statusCallback('Downloading bigwig header');
-                _context.next = 4;
-                return this.bigwig.getHeader(opts);
-
-              case 4:
-                result = _context.sent;
-                statusCallback('');
-                return _context.abrupt("return", result);
+                return _context.abrupt("return", updateStatus('Downloading bigwig header', statusCallback, function () {
+                  return _this2.bigwig.getHeader(opts);
+                }));
 
-              case 7:
+              case 2:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, this);
+        }, _callee);
       }));
 
       function setup(_x) {
@@ -3331,7 +3368,8 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     key: "getRefNames",
     value: function () {
       var _getRefNames = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(opts) {
-        var header;
+        var _yield$this$setup, refsByName;
+
         return runtime_1.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
@@ -3340,10 +3378,11 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                 return this.setup(opts);
 
               case 2:
-                header = _context2.sent;
-                return _context2.abrupt("return", Object.keys(header.refsByName));
+                _yield$this$setup = _context2.sent;
+                refsByName = _yield$this$setup.refsByName;
+                return _context2.abrupt("return", Object.keys(refsByName));
 
-              case 4:
+              case 5:
               case "end":
                 return _context2.stop();
             }
@@ -3361,7 +3400,10 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     key: "refIdToName",
     value: function () {
       var _refIdToName = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(refId) {
-        var h;
+        var _refsByNumber$refId;
+
+        var _yield$this$setup2, refsByNumber;
+
         return runtime_1.wrap(function _callee3$(_context3) {
           while (1) {
             switch (_context3.prev = _context3.next) {
@@ -3370,12 +3412,11 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                 return this.setup();
 
               case 2:
-                h = _context3.sent;
-                return _context3.abrupt("return", (h.refsByNumber[refId] || {
-                  name: undefined
-                }).name);
+                _yield$this$setup2 = _context3.sent;
+                refsByNumber = _yield$this$setup2.refsByNumber;
+                return _context3.abrupt("return", (_refsByNumber$refId = refsByNumber[refId]) === null || _refsByNumber$refId === void 0 ? void 0 : _refsByNumber$refId.name);
 
-              case 4:
+              case 5:
               case "end":
                 return _context3.stop();
             }
@@ -3393,7 +3434,8 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     key: "getGlobalStats",
     value: function () {
       var _getGlobalStats = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee4(opts) {
-        var header;
+        var _yield$this$setup3, totalSummary;
+
         return runtime_1.wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
@@ -3402,10 +3444,11 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                 return this.setup(opts);
 
               case 2:
-                header = _context4.sent;
-                return _context4.abrupt("return", rectifyStats(header.totalSummary));
+                _yield$this$setup3 = _context4.sent;
+                totalSummary = _yield$this$setup3.totalSummary;
+                return _context4.abrupt("return", rectifyStats(totalSummary));
 
-              case 4:
+              case 5:
               case "end":
                 return _context4.stop();
             }
@@ -3422,7 +3465,7 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
   }, {
     key: "getFeatures",
     value: function getFeatures(region) {
-      var _this2 = this;
+      var _this3 = this;
 
       var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var refName = region.refName,
@@ -3444,7 +3487,7 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
                 case 0:
                   statusCallback('Downloading bigwig data');
                   _context5.next = 3;
-                  return _this2.bigwig.getFeatureStream(refName, start, end, _objectSpread2(_objectSpread2({}, opts), {}, {
+                  return _this3.bigwig.getFeatureStream(refName, start, end, _objectSpread2(_objectSpread2({}, opts), {}, {
                     basesPerSpan: bpPerPx / resolution
                   }));
 
@@ -3471,7 +3514,34 @@ var BigWigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
           return _ref2.apply(this, arguments);
         };
       }(), signal);
-    }
+    } // always render bigwig instead of calculating a feature density for it
+
+  }, {
+    key: "estimateRegionsStats",
+    value: function () {
+      var _estimateRegionsStats = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(_regions) {
+        return runtime_1.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                return _context6.abrupt("return", {
+                  featureDensity: 0
+                });
+
+              case 1:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6);
+      }));
+
+      function estimateRegionsStats(_x6) {
+        return _estimateRegionsStats.apply(this, arguments);
+      }
+
+      return estimateRegionsStats;
+    }()
   }, {
     key: "freeResources",
     value: function freeResources() {}