chart-negation.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-negation>` element for each chart. 
     * All charts inherit this behavior to remove itself from DOM.
     *
     * @polymerBehavior
    **/
    EpivizChartNegationBehavior = function (superClass) {
        return class extends superClass {
            constructor() {
                super();
            }

            static get properties() {
                return {};
            }

            get_invert_data(lData) {
                var self = this;

                var counter = 0;
                var invert = 0;

                var chartData = new epiviz.measurements.MeasurementHashtable();
                var msDataMap = new epiviz.measurements.MeasurementHashtable();

                lData.foreach(function(measurement, series, seriesIndex) {
                    var sumExp = new epiviz.datatypes.PartialSummarizedExperiment();
                    var rowData = series._container.rowData(measurement);
                    sumExp.addRowData(rowData);

                    var featureValues = series._container.values(measurement);
                    var valData = [];

                    if(featureValues._values != undefined) {
                        if (invert == 1) {
                            featureValues._values.forEach(function(val, i) {
                                valData[i] = -1 * val; 
                            });
                        }
                        else {
                            featureValues._values.forEach(function(val, i) {
                                valData[i] = val; 
                            });
                        }

                    }
                    else {
                        valData = undefined;
                    }

                    var newValueData = new epiviz.datatypes.FeatureValueArray(measurement, featureValues._boundaries, featureValues._globalStartIndex, valData);

                    sumExp.addValues(newValueData);
                    invert++;

                    var msData = new epiviz.datatypes.MeasurementGenomicDataWrapper(measurement, sumExp);
                    msDataMap.put(measurement, msData);

                });


                // lData.foreach(function(m) {
                //     // m._maxValue = m._maxValue;
                //     // m._minValue = -1 * m._maxValue;
                //     // var msData = new epiviz.datatypes.MeasurementGenomicDataWrapper(m, sumExp);
                //     msDataMap.put(m, sumExp);
                // });

                var genomicData = new epiviz.datatypes.MapGenomicData(msDataMap);

                return genomicData
            }

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

                self.isNegation  = !self.isNegation;

                self._toggleNegationIcon();

                if (!self.isNegation) {
                    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) {

                    // self._negateData = jQuery.extend({}, self._originalData)
                    // self._negateData._map._order[1].value._container._values._order[0].value._values.forEach(function(k, i) {
                    //     self._negateData._map._order[1].value._container._values._order[0].value._values[i] = -1 * k;
                    // });

                    self._negateData = self.get_invert_data(self._originalData);

                    // self.chartSettings.yMin = -1 * self.chartSettings.yMax;
                    self.chart.setCustomSettingsValues(self.chartSettings);

                    self.data = self._negateData;
                    self._dataChanged();

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

                    // var aggregator = epiviz.ui.charts.markers.MeasurementAggregators["negate"];
                    // self._negateData = new epiviz.datatypes.MeasurementAggregatedGenomicData(self._originalData, groupByMarker, aggregator);
                    // self._negateData.ready(function() {
                    //     if (self._negateData.isReady()) {
                    //         // self.chart._lastData = newData;
                    //         // self.chart.draw(self.range, _negateData);
                    //         self.data = self._negateData
                    //     }
                    // })
                }
            }

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

                if (currSettingIcon == null) {
                    var iconElem = document.createElement('button');
                    iconElem.id = "chartNegationIcon";
                    iconElem.className = "setIcon";
                    iconElem.innerHTML = "Mirror Tracks |";
                    iconElem.title = "mirror ratio";

                    // iconElem.icon = "icons:announcement";

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

                    chartSettingsContainer.appendChild(iconElem);
                }
            }

            _toggleNegationIcon() {

                var self = this;


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

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

                }

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