react-mutation-mapper 0.8.70 → 0.8.71

package/dist/index.js

@@ -22,9 +22,9 @@ var reactCollapse = require('react-collapse');
 var numeral = require('numeral');
 var Slider = require('react-rangeslider');
 require('react-rangeslider/lib/index.css');
+var reactBootstrap = require('react-bootstrap');
 var oncoKbImg = require('oncokb-styles/dist/images/oncogenic.svg');
 require('oncokb-frontend-commons/dist/styles.css');
-var reactBootstrap = require('react-bootstrap');
 var request = require('superagent');
 var memoize = require('memoize-weak-decorator');
 var mobxpromise = require('mobxpromise');
@@ -5812,6 +5812,124 @@ var LollipopPlot = /** @class */ (function (_super) {
 
 var styles$5 = {"fade-out":"lollipopMutationPlot-module_fade-out__3PbXO","fade-in":"lollipopMutationPlot-module_fade-in__8bsOR","input-addon":"lollipopMutationPlot-module_input-addon__1P_lA","ymax-number-input":"lollipopMutationPlot-module_ymax-number-input__3oJoA"};
 
+exports.AxisScale = void 0;
+(function (AxisScale) {
+    AxisScale["PERCENT"] = "%";
+    AxisScale["COUNT"] = "#";
+})(exports.AxisScale || (exports.AxisScale = {}));
+var AxisScaleSwitch = /** @class */ (function (_super) {
+    tslib.__extends(AxisScaleSwitch, _super);
+    function AxisScaleSwitch(props) {
+        var _this = _super.call(this, props) || this;
+        Object.defineProperty(_this, "selectedScale", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        _this.selectedScale = props.selectedScale;
+        mobx.makeObservable(_this);
+        return _this;
+    }
+    Object.defineProperty(AxisScaleSwitch.prototype, "toggleButton", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (scale, onClick) {
+            return (React__namespace.createElement("button", { className: classNames__default["default"]({
+                    'btn-secondary': this.props.selectedScale === scale,
+                    'btn-outline-secondary': this.props.selectedScale !== scale,
+                }, 'btn', 'btn-sm', 'btn-axis-switch'), style: {
+                    lineHeight: 1,
+                    cursor: this.props.selectedScale === scale
+                        ? 'default'
+                        : 'pointer',
+                    fontWeight: this.props.selectedScale === scale
+                        ? 'bolder'
+                        : 'normal',
+                    color: this.props.selectedScale === scale ? '#fff' : '#6c757d',
+                    backgroundColor: this.props.selectedScale === scale ? '#6c757d' : '#fff',
+                    borderColor: '#6c757d',
+                }, onClick: onClick }, scale));
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return (React__namespace.createElement(reactBootstrap.ButtonGroup, { "aria-label": "" },
+                this.toggleButton(exports.AxisScale.PERCENT, this.handlePercentClick),
+                this.toggleButton(exports.AxisScale.COUNT, this.handleCountClick)));
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch.prototype, "handlePercentClick", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.selectedScale = exports.AxisScale.PERCENT;
+            this.props.onChange(this.selectedScale);
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch.prototype, "handleCountClick", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.selectedScale = exports.AxisScale.COUNT;
+            this.props.onChange(this.selectedScale);
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch, "defaultProps", {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value: {
+            selectedScale: exports.AxisScale.COUNT,
+        }
+    });
+    tslib.__decorate([
+        mobx.observable
+    ], AxisScaleSwitch.prototype, "selectedScale", void 0);
+    tslib.__decorate([
+        mobx.action.bound
+    ], AxisScaleSwitch.prototype, "handlePercentClick", null);
+    tslib.__decorate([
+        mobx.action.bound
+    ], AxisScaleSwitch.prototype, "handleCountClick", null);
+    AxisScaleSwitch = tslib.__decorate([
+        mobxReact.observer
+    ], AxisScaleSwitch);
+    return AxisScaleSwitch;
+}(React__namespace.Component));
+
+var PercentToggle = /** @class */ (function (_super) {
+    tslib.__extends(PercentToggle, _super);
+    function PercentToggle(props) {
+        return _super.call(this, props) || this;
+    }
+    Object.defineProperty(PercentToggle.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return (React__namespace.createElement("div", { className: "small", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginLeft: 10,
+                } },
+                React__namespace.createElement("div", { style: {
+                        marginLeft: 10,
+                        marginRight: 10,
+                    } },
+                    React__namespace.createElement("div", { style: { textAlign: 'center' } }, "Y-Axis:"),
+                    React__namespace.createElement(AxisScaleSwitch, { selectedScale: this.props.axisMode, onChange: this.props.onScaleToggle }))));
+        }
+    });
+    return PercentToggle;
+}(React__namespace.Component));
+
 function formatInputValue(value, step) {
     if (step === void 0) { step = 1; }
     var decimalZeros = cbioportalUtils.numberOfLeadingDecimalZeros(step);
@@ -5851,14 +5969,14 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
                     alignItems: 'center',
                     marginLeft: 10,
                 } },
-                React__namespace.createElement("span", null,
-                    label,
-                    ":"),
                 React__namespace.createElement("div", { style: {
                         width: width,
                         marginLeft: 10,
                         marginRight: 10,
                     } },
+                    React__namespace.createElement("div", { style: { textAlign: 'center' } },
+                        label,
+                        ":"),
                     React__namespace.createElement(Slider__default["default"], { min: yMaxSliderStep, max: calcYMaxInput(undefined, yMaxSliderStep, countRange, oppositeCountRange, yAxisSameScale), tooltip: false, step: yMaxSliderStep, onChange: onYAxisMaxSliderChange, value: yMaxSlider })),
                 React__namespace.createElement(cbioportalFrontendCommons.EditableSpan, { className: styles$5['ymax-number-input'], value: formatInputValue(yMaxInput, yMaxSliderStep), setValue: onYAxisMaxChange, numericOnly: yMaxSliderStep >= 1, onFocus: this.props.onYMaxInputFocused, onBlur: this.props.onYMaxInputBlurred })));
         }
@@ -5873,7 +5991,7 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
     Object.defineProperty(LollipopMutationPlotControls.prototype, "bottomYMaxSlider", {
         get: function () {
             if (this.showBottomYAxisSlider) {
-                return this.maxValueSlider(this.props.bottomCountRange, this.props.countRange, this.props.onBottomYAxisMaxSliderChange, this.props.onBottomYAxisMaxChange, this.props.bottomYMaxSlider, this.props.bottomYMaxInput, this.props.yAxisSameScale, 'Bottom Y-Axis Max', 100, this.props.bottomYMaxSliderStep);
+                return this.maxValueSlider(this.props.bottomCountRange, this.props.countRange, this.props.onBottomYAxisMaxSliderChange, this.props.onBottomYAxisMaxChange, this.props.bottomYMaxSlider, this.props.bottomYMaxInput, this.props.yAxisSameScale, 'Bottom Y-Axis Max', this.props.yMaxSliderWidth, this.props.bottomYMaxSliderStep);
             }
             else {
                 return null;
@@ -5906,6 +6024,13 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(LollipopMutationPlotControls.prototype, "percentToggle", {
+        get: function () {
+            return (React__namespace.createElement(PercentToggle, { axisMode: this.props.axisMode, onScaleToggle: this.props.onScaleToggle }));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(LollipopMutationPlotControls.prototype, "render", {
         enumerable: false,
         configurable: true,
@@ -5921,6 +6046,7 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
                         this.trackSelector,
                     this.props.showYMaxSlider && this.yMaxSlider,
                     this.props.showYMaxSlider && this.bottomYMaxSlider,
+                    this.props.showPercentToggle && this.percentToggle,
                     this.props.filterResetPanel,
                     this.props.customControls,
                     React__namespace.createElement("div", { style: { display: 'flex', marginLeft: 'auto' } },
@@ -5939,12 +6065,15 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
             showYMaxSlider: true,
             showLegendToggle: true,
             showDownloadControls: true,
-            yMaxSliderWidth: 100,
+            yMaxSliderWidth: 110,
         }
     });
     tslib.__decorate([
         mobx.computed
     ], LollipopMutationPlotControls.prototype, "showBottomYAxisSlider", null);
+    tslib.__decorate([
+        mobx.computed
+    ], LollipopMutationPlotControls.prototype, "percentToggle", null);
     LollipopMutationPlotControls = tslib.__decorate([
         mobxReact.observer
     ], LollipopMutationPlotControls);
@@ -8418,7 +8547,7 @@ var LollipopMutationPlot = /** @class */ (function (_super) {
             if (this.props.store.pfamDomainData.isComplete &&
                 this.props.store.pfamDomainData.result) {
                 return (React__namespace.createElement("div", { style: { display: 'inline-block' }, ref: function (div) { return (_this.divContainer = div); }, onMouseEnter: this.handlers.onMouseEnterPlot, onMouseLeave: this.handlers.onMouseLeavePlot },
-                    React__namespace.createElement(LollipopMutationPlotControls, { showControls: this.showControls, showYMaxSlider: this.props.showYMaxSlider, showLegendToggle: this.props.showLegendToggle, showDownloadControls: this.props.showDownloadControls, hugoGeneSymbol: this.hugoGeneSymbol, countRange: this.countRange, bottomCountRange: this.bottomCountRange, onYAxisMaxSliderChange: this.handlers.handleYAxisMaxSliderChange, onYAxisMaxChange: this.handlers.handleYAxisMaxChange, onBottomYAxisMaxSliderChange: this.handlers.handleBottomYAxisMaxSliderChange, onBottomYAxisMaxChange: this.handlers.handleBottomYAxisMaxChange, onYMaxInputFocused: this.handlers.onYMaxInputFocused, onYMaxInputBlurred: this.handlers.onYMaxInputBlurred, onToggleLegend: this.handlers.handleToggleLegend, yMaxSlider: this.yMaxSlider, yMaxSliderStep: this.yMaxSliderStep, yMaxInput: this.yMaxInput, yAxisSameScale: this.props.yAxisSameScale, bottomYMaxSlider: this.bottomYMaxSlider, bottomYMaxSliderStep: this.bottomYMaxSliderStep, bottomYMaxInput: this.bottomYMaxInput, customControls: this.props.customControls, filterResetPanel: this.props.filterResetPanel, trackVisibility: this.trackVisibility, tracks: this.props.tracks, trackDataStatus: this.props.trackDataStatus, showTrackSelector: this.props.showTrackSelector, onTrackVisibilityChange: this.onTrackVisibilityChange, getSVG: this.getSVG }),
+                    React__namespace.createElement(LollipopMutationPlotControls, { showControls: this.showControls, showYMaxSlider: this.props.showYMaxSlider, showLegendToggle: this.props.showLegendToggle, showDownloadControls: this.props.showDownloadControls, hugoGeneSymbol: this.hugoGeneSymbol, countRange: this.countRange, bottomCountRange: this.bottomCountRange, onYAxisMaxSliderChange: this.handlers.handleYAxisMaxSliderChange, onYAxisMaxChange: this.handlers.handleYAxisMaxChange, onBottomYAxisMaxSliderChange: this.handlers.handleBottomYAxisMaxSliderChange, onBottomYAxisMaxChange: this.handlers.handleBottomYAxisMaxChange, onYMaxInputFocused: this.handlers.onYMaxInputFocused, onYMaxInputBlurred: this.handlers.onYMaxInputBlurred, onToggleLegend: this.handlers.handleToggleLegend, yMaxSlider: this.yMaxSlider, yMaxSliderStep: this.yMaxSliderStep, yMaxInput: this.yMaxInput, yAxisSameScale: this.props.yAxisSameScale, bottomYMaxSlider: this.bottomYMaxSlider, bottomYMaxSliderStep: this.bottomYMaxSliderStep, bottomYMaxInput: this.bottomYMaxInput, customControls: this.props.customControls, filterResetPanel: this.props.filterResetPanel, trackVisibility: this.trackVisibility, tracks: this.props.tracks, trackDataStatus: this.props.trackDataStatus, showTrackSelector: this.props.showTrackSelector, onTrackVisibilityChange: this.onTrackVisibilityChange, getSVG: this.getSVG, axisMode: this.props.axisMode, onScaleToggle: this.props.onScaleToggle, showPercentToggle: this.props.showPercentToggle }),
                     React__namespace.createElement(reactCollapse.Collapse, { isOpened: this.controlsConfig.legendShown }, this.props.legend || React__namespace.createElement(DefaultLollipopPlotLegend, null)),
                     React__namespace.createElement(LollipopPlot, { sequence: this.sequence, lollipops: this.lollipops, domains: this.domains, dataStore: this.props.store.dataStore, vizWidth: this.props.geneWidth, vizHeight: this.props.vizHeight, hugoGeneSymbol: this.hugoGeneSymbol, xMax: this.proteinLength, yMax: this.yMaxInput, yMaxFractionDigits: this.yMaxSliderStep < 1
                             ? this.props.yMaxFractionDigits
@@ -8530,118 +8659,6 @@ var LollipopMutationPlot = /** @class */ (function (_super) {
     return LollipopMutationPlot;
 }(React__namespace.Component));
 
-exports.AxisScale = void 0;
-(function (AxisScale) {
-    AxisScale["PERCENT"] = "%";
-    AxisScale["COUNT"] = "#";
-})(exports.AxisScale || (exports.AxisScale = {}));
-var AxisScaleSwitch = /** @class */ (function (_super) {
-    tslib.__extends(AxisScaleSwitch, _super);
-    function AxisScaleSwitch(props) {
-        var _this = _super.call(this, props) || this;
-        Object.defineProperty(_this, "selectedScale", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        _this.selectedScale = props.selectedScale;
-        mobx.makeObservable(_this);
-        return _this;
-    }
-    Object.defineProperty(AxisScaleSwitch.prototype, "toggleButton", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (scale, onClick) {
-            return (React__namespace.createElement("button", { className: classNames__default["default"]({
-                    'btn-secondary': this.props.selectedScale === scale,
-                    'btn-outline-secondary': this.props.selectedScale !== scale,
-                }, 'btn', 'btn-sm', 'btn-axis-switch'), style: {
-                    lineHeight: 1,
-                    cursor: this.props.selectedScale === scale
-                        ? 'default'
-                        : 'pointer',
-                    fontWeight: this.props.selectedScale === scale
-                        ? 'bolder'
-                        : 'normal',
-                    color: this.props.selectedScale === scale ? '#fff' : '#6c757d',
-                    backgroundColor: this.props.selectedScale === scale ? '#6c757d' : '#fff',
-                    borderColor: '#6c757d',
-                }, onClick: onClick }, scale));
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch.prototype, "render", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            return (React__namespace.createElement(reactBootstrap.ButtonGroup, { "aria-label": "" },
-                this.toggleButton(exports.AxisScale.PERCENT, this.handlePercentClick),
-                this.toggleButton(exports.AxisScale.COUNT, this.handleCountClick)));
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch.prototype, "handlePercentClick", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            this.selectedScale = exports.AxisScale.PERCENT;
-            this.props.onChange(this.selectedScale);
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch.prototype, "handleCountClick", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            this.selectedScale = exports.AxisScale.COUNT;
-            this.props.onChange(this.selectedScale);
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch, "defaultProps", {
-        enumerable: true,
-        configurable: true,
-        writable: true,
-        value: {
-            selectedScale: exports.AxisScale.COUNT,
-        }
-    });
-    tslib.__decorate([
-        mobx.observable
-    ], AxisScaleSwitch.prototype, "selectedScale", void 0);
-    tslib.__decorate([
-        mobx.action.bound
-    ], AxisScaleSwitch.prototype, "handlePercentClick", null);
-    tslib.__decorate([
-        mobx.action.bound
-    ], AxisScaleSwitch.prototype, "handleCountClick", null);
-    AxisScaleSwitch = tslib.__decorate([
-        mobxReact.observer
-    ], AxisScaleSwitch);
-    return AxisScaleSwitch;
-}(React__namespace.Component));
-
-var PercentToggle = /** @class */ (function (_super) {
-    tslib.__extends(PercentToggle, _super);
-    function PercentToggle(props) {
-        return _super.call(this, props) || this;
-    }
-    Object.defineProperty(PercentToggle.prototype, "render", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            return (React__namespace.createElement("div", { className: "small", style: { display: 'flex', alignItems: 'center' } },
-                React__namespace.createElement("span", { style: { marginLeft: 10, marginRight: 10 } },
-                    "Y-Axis:",
-                    ' '),
-                React__namespace.createElement(AxisScaleSwitch, { selectedScale: this.props.axisMode, onChange: this.props.onScaleToggle })));
-        }
-    });
-    return PercentToggle;
-}(React__namespace.Component));
-
 var LollipopTooltipCountInfo = function (_a) {
     var count = _a.count, mutations = _a.mutations, axisMode = _a.axisMode;
     var decimalZeros = cbioportalUtils.numberOfLeadingDecimalZeros(count);