react-mutation-mapper 0.8.70 → 0.8.71

package/dist/component/lollipopMutationPlot/LollipopMutationPlot.d.ts

@@ -28,6 +28,7 @@ export declare type LollipopMutationPlotProps<T extends Mutation> = {
     lollipopTooltipCountInfo?: (count: number, mutations?: Partial<T>[], axisMode?: AxisScale, group?: string) => JSX.Element;
     yAxisLabelFormatter?: (symbol?: string, groupName?: string) => string;
     axisMode?: AxisScale;
+    onScaleToggle?: (selectedScale: AxisScale) => void;
     customControls?: JSX.Element;
     onXAxisOffset?: (offset: number) => void;
     geneWidth: number;
@@ -41,6 +42,7 @@ export declare type LollipopMutationPlotProps<T extends Mutation> = {
     showYMaxSlider?: boolean;
     showLegendToggle?: boolean;
     showDownloadControls?: boolean;
+    showPercentToggle?: boolean;
     filterResetPanel?: JSX.Element;
     legend?: JSX.Element;
     loadingIndicator?: JSX.Element;

package/dist/component/lollipopMutationPlot/LollipopMutationPlotControls.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TrackDataStatus, TrackName, TrackVisibility } from '../track/TrackSelector';
 import 'react-rangeslider/lib/index.css';
+import { AxisScale } from './AxisScaleSwitch';
 declare type LollipopMutationPlotControlsProps = {
     showControls: boolean;
     hugoGeneSymbol: string;
@@ -32,6 +33,9 @@ declare type LollipopMutationPlotControlsProps = {
     showDownloadControls?: boolean;
     onTrackVisibilityChange?: (selectedTrackIds: string[]) => void;
     getSVG: () => SVGElement;
+    axisMode?: AxisScale;
+    onScaleToggle?: (selectedScale: AxisScale) => void;
+    showPercentToggle?: boolean;
 };
 export default class LollipopMutationPlotControls extends React.Component<LollipopMutationPlotControlsProps, {}> {
     constructor(props: any);
@@ -43,6 +47,7 @@ export default class LollipopMutationPlotControls extends React.Component<Lollip
     protected get trackSelector(): JSX.Element;
     protected get legendToggle(): JSX.Element;
     protected get downloadControls(): JSX.Element;
+    protected get percentToggle(): JSX.Element;
     render(): JSX.Element;
 }
 export {};

package/dist/index.es.js

@@ -19,9 +19,9 @@ import { Collapse } from 'react-collapse';
 import numeral from 'numeral';
 import Slider from 'react-rangeslider';
 import 'react-rangeslider/lib/index.css';
+import { ButtonGroup } from 'react-bootstrap';
 import oncoKbImg from 'oncokb-styles/dist/images/oncogenic.svg';
 import 'oncokb-frontend-commons/dist/styles.css';
-import { ButtonGroup } from 'react-bootstrap';
 import request, { get } from 'superagent';
 import memoize from 'memoize-weak-decorator';
 import { cached } from 'mobxpromise';
@@ -5775,6 +5775,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"};
 
+var AxisScale;
+(function (AxisScale) {
+    AxisScale["PERCENT"] = "%";
+    AxisScale["COUNT"] = "#";
+})(AxisScale || (AxisScale = {}));
+var AxisScaleSwitch = /** @class */ (function (_super) {
+    __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;
+        makeObservable(_this);
+        return _this;
+    }
+    Object.defineProperty(AxisScaleSwitch.prototype, "toggleButton", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (scale, onClick) {
+            return (React.createElement("button", { className: classNames({
+                    '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.createElement(ButtonGroup, { "aria-label": "" },
+                this.toggleButton(AxisScale.PERCENT, this.handlePercentClick),
+                this.toggleButton(AxisScale.COUNT, this.handleCountClick)));
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch.prototype, "handlePercentClick", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.selectedScale = AxisScale.PERCENT;
+            this.props.onChange(this.selectedScale);
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch.prototype, "handleCountClick", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.selectedScale = AxisScale.COUNT;
+            this.props.onChange(this.selectedScale);
+        }
+    });
+    Object.defineProperty(AxisScaleSwitch, "defaultProps", {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value: {
+            selectedScale: AxisScale.COUNT,
+        }
+    });
+    __decorate([
+        observable
+    ], AxisScaleSwitch.prototype, "selectedScale", void 0);
+    __decorate([
+        action.bound
+    ], AxisScaleSwitch.prototype, "handlePercentClick", null);
+    __decorate([
+        action.bound
+    ], AxisScaleSwitch.prototype, "handleCountClick", null);
+    AxisScaleSwitch = __decorate([
+        observer
+    ], AxisScaleSwitch);
+    return AxisScaleSwitch;
+}(React.Component));
+
+var PercentToggle = /** @class */ (function (_super) {
+    __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.createElement("div", { className: "small", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginLeft: 10,
+                } },
+                React.createElement("div", { style: {
+                        marginLeft: 10,
+                        marginRight: 10,
+                    } },
+                    React.createElement("div", { style: { textAlign: 'center' } }, "Y-Axis:"),
+                    React.createElement(AxisScaleSwitch, { selectedScale: this.props.axisMode, onChange: this.props.onScaleToggle }))));
+        }
+    });
+    return PercentToggle;
+}(React.Component));
+
 function formatInputValue(value, step) {
     if (step === void 0) { step = 1; }
     var decimalZeros = numberOfLeadingDecimalZeros(step);
@@ -5814,14 +5932,14 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
                     alignItems: 'center',
                     marginLeft: 10,
                 } },
-                React.createElement("span", null,
-                    label,
-                    ":"),
                 React.createElement("div", { style: {
                         width: width,
                         marginLeft: 10,
                         marginRight: 10,
                     } },
+                    React.createElement("div", { style: { textAlign: 'center' } },
+                        label,
+                        ":"),
                     React.createElement(Slider, { min: yMaxSliderStep, max: calcYMaxInput(undefined, yMaxSliderStep, countRange, oppositeCountRange, yAxisSameScale), tooltip: false, step: yMaxSliderStep, onChange: onYAxisMaxSliderChange, value: yMaxSlider })),
                 React.createElement(EditableSpan, { className: styles$5['ymax-number-input'], value: formatInputValue(yMaxInput, yMaxSliderStep), setValue: onYAxisMaxChange, numericOnly: yMaxSliderStep >= 1, onFocus: this.props.onYMaxInputFocused, onBlur: this.props.onYMaxInputBlurred })));
         }
@@ -5836,7 +5954,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;
@@ -5869,6 +5987,13 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(LollipopMutationPlotControls.prototype, "percentToggle", {
+        get: function () {
+            return (React.createElement(PercentToggle, { axisMode: this.props.axisMode, onScaleToggle: this.props.onScaleToggle }));
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(LollipopMutationPlotControls.prototype, "render", {
         enumerable: false,
         configurable: true,
@@ -5884,6 +6009,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.createElement("div", { style: { display: 'flex', marginLeft: 'auto' } },
@@ -5902,12 +6028,15 @@ var LollipopMutationPlotControls = /** @class */ (function (_super) {
             showYMaxSlider: true,
             showLegendToggle: true,
             showDownloadControls: true,
-            yMaxSliderWidth: 100,
+            yMaxSliderWidth: 110,
         }
     });
     __decorate([
         computed
     ], LollipopMutationPlotControls.prototype, "showBottomYAxisSlider", null);
+    __decorate([
+        computed
+    ], LollipopMutationPlotControls.prototype, "percentToggle", null);
     LollipopMutationPlotControls = __decorate([
         observer
     ], LollipopMutationPlotControls);
@@ -8381,7 +8510,7 @@ var LollipopMutationPlot = /** @class */ (function (_super) {
             if (this.props.store.pfamDomainData.isComplete &&
                 this.props.store.pfamDomainData.result) {
                 return (React.createElement("div", { style: { display: 'inline-block' }, ref: function (div) { return (_this.divContainer = div); }, onMouseEnter: this.handlers.onMouseEnterPlot, onMouseLeave: this.handlers.onMouseLeavePlot },
-                    React.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.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.createElement(Collapse, { isOpened: this.controlsConfig.legendShown }, this.props.legend || React.createElement(DefaultLollipopPlotLegend, null)),
                     React.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
@@ -8493,118 +8622,6 @@ var LollipopMutationPlot = /** @class */ (function (_super) {
     return LollipopMutationPlot;
 }(React.Component));
 
-var AxisScale;
-(function (AxisScale) {
-    AxisScale["PERCENT"] = "%";
-    AxisScale["COUNT"] = "#";
-})(AxisScale || (AxisScale = {}));
-var AxisScaleSwitch = /** @class */ (function (_super) {
-    __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;
-        makeObservable(_this);
-        return _this;
-    }
-    Object.defineProperty(AxisScaleSwitch.prototype, "toggleButton", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (scale, onClick) {
-            return (React.createElement("button", { className: classNames({
-                    '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.createElement(ButtonGroup, { "aria-label": "" },
-                this.toggleButton(AxisScale.PERCENT, this.handlePercentClick),
-                this.toggleButton(AxisScale.COUNT, this.handleCountClick)));
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch.prototype, "handlePercentClick", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            this.selectedScale = AxisScale.PERCENT;
-            this.props.onChange(this.selectedScale);
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch.prototype, "handleCountClick", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            this.selectedScale = AxisScale.COUNT;
-            this.props.onChange(this.selectedScale);
-        }
-    });
-    Object.defineProperty(AxisScaleSwitch, "defaultProps", {
-        enumerable: true,
-        configurable: true,
-        writable: true,
-        value: {
-            selectedScale: AxisScale.COUNT,
-        }
-    });
-    __decorate([
-        observable
-    ], AxisScaleSwitch.prototype, "selectedScale", void 0);
-    __decorate([
-        action.bound
-    ], AxisScaleSwitch.prototype, "handlePercentClick", null);
-    __decorate([
-        action.bound
-    ], AxisScaleSwitch.prototype, "handleCountClick", null);
-    AxisScaleSwitch = __decorate([
-        observer
-    ], AxisScaleSwitch);
-    return AxisScaleSwitch;
-}(React.Component));
-
-var PercentToggle = /** @class */ (function (_super) {
-    __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.createElement("div", { className: "small", style: { display: 'flex', alignItems: 'center' } },
-                React.createElement("span", { style: { marginLeft: 10, marginRight: 10 } },
-                    "Y-Axis:",
-                    ' '),
-                React.createElement(AxisScaleSwitch, { selectedScale: this.props.axisMode, onChange: this.props.onScaleToggle })));
-        }
-    });
-    return PercentToggle;
-}(React.Component));
-
 var LollipopTooltipCountInfo = function (_a) {
     var count = _a.count, mutations = _a.mutations, axisMode = _a.axisMode;
     var decimalZeros = numberOfLeadingDecimalZeros(count);