chart-log-ratio.html

<!-- External Polymer Styles/elements dependency -->
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">

<!-- Epiviz element dependency -->

<script>
    /**
     * `ChartRemoveBehavior` object manages the `<epiviz-chart-log-ratio>` element for each chart. 
     * All charts inherit this behavior to remove itself from DOM.
     *
     * @polymerBehavior
    **/
    EpivizChartLogRatioBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {};
            }

            /**
            * Shows the remove element
            */
            _showLogRatioDialog() {
                var self = this;

                self.isLogRatio  = !self.isLogRatio;

                self._toggleLogRatioIcon();

                if (!self.isLogRatio) {
                    self.chartSettings = self._originalSettings
                    // self.chart.setCustomSettingsValues(self._originalSettings);
                    self.data = self._originalData
                    // self.chart.setCustomSettingsValues(self._originalSettings);
                    // self._draw();
                    return;
                }


                if (!self._originalData) {
                    self._originalData = self.data
                }

                if (!self._originalSettings) {
                    self._originalSettings = JSON.parse(JSON.stringify(self.chartSettings))
                }

                self.chartSettings =  JSON.parse(JSON.stringify(self._originalSettings));


                if (self.measurements.length == 2) {

                    var groupByMarker = new epiviz.ui.charts.markers.VisualizationMarker(
                        "logratio", "logratio", "logratio", 
                        "function(data) {  return null; }", 
                        "function(m, data, preMarkResult) {  return 'log2 ratio'; }"
                    );

                    var aggregator = epiviz.ui.charts.markers.MeasurementAggregators["log"];
                    self._logData = new epiviz.datatypes.MeasurementAggregatedGenomicData(self._originalData, groupByMarker, aggregator);
                    self._logData.ready(function() {
                        if (self._logData.isReady()) {
                            // self.chart._lastData = newData;
                            self.data = self._logData
                            // self.chartSettings.yMax = Math.log2(self.chartSettings.yMax) | 3;
                            // self.chartSettings.yMin = -1 * self.chartSettings.yMax | -3;
                            self.chart.setCustomSettingsValues(self.chartSettings);
                            self._dataChanged();
                        }
                    })
                }
            }

            /**
            * Initializes the `<epiviz-chart-logratio>` element
            */
            _initializeLogRatioDialog() {
                var chartSettingsContainer = this.shadowRoot.querySelector('#chartSettingsContainer');
                var chartContainer = this.shadowRoot.querySelector('#' + this.plotId);
                var currSettingIcon = this.shadowRoot.querySelector('#chartLogRatioIcon');

                if (currSettingIcon == null) {
                    var iconElem = document.createElement('button');
                    iconElem.id = "chartLogRatioIcon";
                    iconElem.className = "setIcon";
                    iconElem.innerHTML = "Log2 ratio |";
                    iconElem.title = "log2 ratio";
                    // iconElem.icon = "icons:alarm";

                    iconElem.addEventListener("click", this._showLogRatioDialog.bind(this));

                    chartSettingsContainer.appendChild(iconElem);
                }
            }

            _toggleLogRatioIcon() {

                var self = this;

                var active = this.shadowRoot.querySelector('#chartLogRatioIcon');
                var dis1 = this.shadowRoot.querySelector('#chartAverageIcon');
                var dis2 = this.shadowRoot.querySelector('#chartNegationIcon');

                if(self.isLogRatio) {
                    active.style.color = 'blue';
                }
                else {
                    active.style.color = 'black';

                }

                self.isAverage = self.isNegation = false;
                dis1.style.color = dis2.style.color = 'black';
            }
        }
    }
</script>