epiviz-add-chart.html

<!-- Polymer dependency -->
<link rel="import" href="bower_components/polymer/polymer-element.html">

<!-- External Polymer Styles/elements dependency -->
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<!-- <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> -->
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/editor-icons.html">
<link rel="import" href="bower_components/table-filter/data-filter.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-dropdown/paper-dropdown.html">

<!--
`<epiviz-add-chart>` allows adding new charts to the `epiviz-navigation` or `epiviz-environment`. 
    Creates an Instance of the measurement browser.
-->
<dom-module id="epiviz-add-chart">

    <template>

        <style>
/* 
            :host {
                --paper-button: {
                    display: inline-block;
                }      
            } */

            paper-button {
                --paper-button: {
                    display: inline;
                    background: #4285f4;
                    color: #fff;
                    padding: 5px;
                }
                /* --paper-button-disabled: {
                    color: white
                }; */
            }

            #modal {
                position: fixed;
                top:0;
                left: 0;
                /* height: 90%; */
                width: 90%;
            }

            iron-image {
                padding: 1em;
            }

            iron-pages {
                max-height: inherit;
            }

            data-filter {
                /* max-height: calc(72vh - 100px); */
                height: auto;
            }

            paper-tabs {
                --paper-tab-ink: var(--paper-blue-grey-200);
                --paper-tabs-selection-bar-color: var(--paper-blue-500);
                background-color: var(--google-grey-300);
            }

            .dialog-content {
                max-height: inherit;
            }

            .buttonContainer {
                display: inline-block;
                padding: 8px;
            }

            .infoMessage {
                text-align: center;
                @apply --paper-font-subhead;
            }

            .title {
                display: inline;
                @apply --paper-font-title;
                position: relative;
                top: 8px;
            }

        </style>
        <!-- local DOM goes here -->

        <template is="dom-if" if="{{!_isEnvironment(_charts)}}">
            <div class="buttonContainer">
                <paper-button raised on-tap="_showModal">
                    <iron-icon icon="editor:insert-chart"></iron-icon>
                    <span>Add Chart</span>
                </paper-button>
            </div>
        </template>

        <template is="dom-if" if="{{_isEnvironment(_charts)}}">
            <paper-menu-button dynamic-align horizontal-align="right" vertical-offset=42>
                <paper-button slot="dropdown-trigger" raised>
                    <iron-icon icon="editor:insert-chart"></iron-icon>
                    <span>Add Chart</span>
                </paper-button>
                <paper-listbox slot="dropdown-content">
                    <paper-item on-tap="_showModal">Add Genomic Range</paper-item>
                    <paper-item on-tap="_addNavigation">Add Navigation</paper-item>
                </paper-listbox>
            </paper-menu-button>
        </template>

        <paper-dialog id="modal" modal>
            <div class="header">
                <div class="title">Choose Chart </div>
                <!-- <paper-dropdown-menu label="Chart">
                    <paper-listbox slot="dropdown-content" selected="{{selectedChart}}">
                        <template is="dom-repeat" items="{{_charts}}">
                            <paper-item on-click="_chartSelectionChanged" value$="[[item]]">[[item]]</paper-item>
                        </template>
                    </paper-listbox>
                </paper-dropdown-menu> -->
                <paper-dropdown label="Chart" value="{{selectedChart}}" no-animations no-label-float>
                    <template is="dom-repeat" items="{{_charts}}">
                        <paper-item on-click="_chartSelectionChanged" value$="[[item]]">[[item]]</paper-item>
                    </template>
                </paper-dropdown>
                <!-- <br/> -->
                <div class="title">and select datasets below</div>
                <paper-tabs style="display: none;" selected="{{tabSelected}}" noink>
                    <paper-tab>All datasets </paper-tab>
                    <!-- <paper-tab>Use from existing charts</paper-tab> -->
                </paper-tabs>
            </div>
            <paper-dialog-scrollable>
                <iron-pages selected="{{tabSelected}}">
                    <div class="dialog-content">
                        <div class="title">Choose a collection</div>
                        <paper-dropdown label="collection" value="{{selectedCollection}}" no-animations no-label-float>
                            <template is="dom-repeat" items="{{collections}}">
                                <paper-item on-click="_chartSelectionChanged" value$="[[item]]">[[item]]</paper-item>
                            </template>
                        </paper-dropdown>
                        <template is="dom-if" if="[[_tableDataExistsCollection(_jsonMeasurements)]]">
                            <data-filter filters="{{filters}}" id="cardElem" data="{{_jsonMeasurements}}" class="new-charts" selected-items="{{selectedMeasurements}}">
                            </data-filter>
                        </template>
                        <p class="infoMessage" hidden$="[[_tableDataExistsCollection(_jsonMeasurements)]]"> No measurement are available for the chart type and/or collection. Choose a different chart or collection</p>
                    </div>
                    <!-- <div class="dialog-content">
                        <template is="dom-if" if="[[_tableDataExists(_existingChartMeasurements)]]">
                            <data-filter data="{{_existingChartMeasurements}}" class="curr-charts" selected-items="{{selectedExistingMeasurements}}">
                            </data-filter>
                        </template>
                        <p class="infoMessage" hidden$="[[_tableDataExists(_existingChartMeasurements)]]">No Existing Charts</p>
                    </div> -->
                </iron-pages>
                <!-- <div id="chartPreview">

                </div> -->
            </paper-dialog-scrollable>
            <div class="buttons">
                <paper-button on-tap="_close" dialog-dismiss>Close</paper-button>
                <paper-button on-tap="_submit" disabled="{{!_enableButton(selectedChart, selectedMeasurements.*, selectedExistingMeasurements.*, tabSelected.*)}}" dialog-confirm autofocus>Add Chart</paper-button>
            </div>
        </paper-dialog>
        <!-- </div> -->

    </template>

    <script>

        // Extend Polymer.Element base class
        class EpivizAddChart extends Polymer.Element {

            static get is() { return 'epiviz-add-chart'; }

            static get properties() {
                return {
                    /**
                    * currently available measurements on the app 
                    * uses measurements available from the `epiviz-data-source` element.
                    *
                    * @type {Array.<epiviz.ui.charts.CustomSetting>}
                    */
                    measurements: {
                        type: Object,
                        notify: true
                    },

                    /**
                    * selected measurements from browser.
                    * chartType:
                    * measurement:
                    * @type {Object}
                    */
                    selection: {
                        type: Object,
                        notify: true,
                        value: {}
                    },

                    selectedMeasurements: {
                        type: Array,
                        notify: true,
                    },

                    selectedExistingMeasurements: {
                        type: Array,
                        notify: true,
                    },

                    /**
                    * selected chart from the browser.
                    *
                    * @type {Array.<epiviz.ui.charts.CustomSetting>}
                    */
                    selectedChart: {
                        type: String,
                        notify: true,
                        value: "MultiStackedLineTrack",
                        observer: "_refitModal",
                    },

                    /**
                    * currently available chart types on the app.
                    */
                    _chartTypes: {
                        type: Object,
                        notify: true,
                        reflectToAttribute: true,
                        value: function () {
                            return {
                                // "GenesTrack": "epiviz-genes-track",
                                "TranscriptTrack": "epiviz-transcript-track",
                                "BlocksTrack": 'epiviz-blocks-track',
                                "InteractionTrack": 'epiviz-interaction-track',
                                "StackedBlocksTrack": 'epiviz-stacked-blocks-track',
                                "HeatmapPlot": "epiviz-heatmap-plot",
                                "ScatterPlot": "epiviz-scatter-plot",
                                "LineTrack": 'epiviz-line-track',
                                "GwasTrack": 'epiviz-gwas-track',
                                "StackedLineTrack": 'epiviz-stacked-line-track',
                                "MultiStackedLineTrack": 'epiviz-multistacked-line-track',
                                "MirrorLineTrack": "epiviz-line-track-mirror",
                                "LinePlot": 'epiviz-line-plot',
                                "StackedLinePlot": 'epiviz-stacked-line-plot',
                                "EpivizNavigation": 'epiviz-navigation'
                            }
                        }
                    },

                    _charts: {
                        type: Array,
                        notify: true,
                        computed: "_getCharts(_chartTypes, _parentContainer)"
                    },

                    /**
                    * parentContainer
                    */
                    _parentContainer: {
                        type: Object,
                    },

                    _jsonMeasurements: {
                        type: Array,
                    },

                    _existingChartMeasurements: {
                        type: Array,
                    },

                    tabSelected: {
                        type: Number,
                        notify: true,
                        value: function () {
                            return 0;
                        },
                        observer: "_refitModal",
                    },

                    collections: {
                        type: Array,
                        notify: true
                    },

                    selectedCollection: {
                        type: String,
                        notify: true,
                        observer: "selectedCollectionChanged",
                    },

                    filters: {
                        type: Array,
                        notify: true
                    }

                }
            }

            static get observers() {
                return [
                    /* observer array just like 1.x */
                    // "_chartPreviewUpdate(selectedMeasurements.*, selectedChart)"
                ]
            }

            constructor() {
                super();
            }

            connectedCallback() {
                super.connectedCallback();
            }

            disconnectedCallback() {
                super.disconnectedCallback();
            }

            _getJSONMeasurements(data) {
                return data.raw();
            }

            /**
             * Get Available Chart Types
             */
            _getCharts(chartTypes, parentContainer) {
                if (parentContainer && parentContainer.nodeName === "EPIVIZ-NAVIGATION") {
                    delete chartTypes["EpivizNavigation"];
                }
                return Object.keys(chartTypes);
            }

            _isEnvironment(chartTypes) {
                return chartTypes.indexOf("EpivizNavigation") !== -1;
            }

            _tableDataExists(tableData) {
                return tableData.length > 0;
            }

            _tableDataExistsCollection(tableData) {
                return this.selectedCollection && this.selectedCollection != "" ? this._tableDataExists(tableData) : false;
            }

            selectedCollectionChanged(newVal, oldVal) {
                var self = this;

                if (this.selectedCollection && this.selectedCollection != "") {
                    self.$.modal.refit();
                    // self.$.modal.center();
                }
            }   

            _enableButton(selectedChart, selectedMeasurements, selectedExistingMeasurements, tabSelected) {
                if (selectedChart !== null && this._charts.includes(selectedChart)) {
                    if (this.tabSelected === 1 && this.selectedExistingMeasurements && this.selectedExistingMeasurements.length > 0) {
                        return true;
                    }

                    if (this.tabSelected === 0 && this.selectedMeasurements && this.selectedMeasurements.length > 0) {
                        return true;
                    }
                }
                return false;
            }

            /**
             * API to add a chart
             * @param {chartType}: chart type to add/create. Must be one of the defined chart types in _chartTypes attribute.
             * @param {measurements}: measurements to use.
             * TODO:
             * @param {data}: data for the chart (for json-based-charts). 
             */
            _addChart(chartType, measurements) {

                var self = this;
                var envElement = self.parentNode.parentNode.parentNode.parentNode.nodeName == "EPIVIZ-NAVIGATION" ? self.parentNode.parentNode.parentNode.parentNode : self.parentNode.parentNode.parentNode;
                var envElement = self._parentContainer;

                var chartElem = document.createElement(self._chartTypes[chartType]);
                chartElem.slot = "charts";
                chartElem.range = envElement.range;
                var chartElemType = chartElem._createChart();

                chartElem.setAttribute("measurements", JSON.stringify(measurements));
                envElement.appendChild(chartElem);
            }

            _refitModal() {
                setTimeout(() => this.$.modal.refit(), 0);
            }

            _addNavigation() {
                var envElement = this._parentContainer;
                var elem = document.createElement("epiviz-navigation");

                elem.setAttribute("chr", "chr19");
                elem.setAttribute("start", 10084603);
                elem.setAttribute("end", 10312571);
                elem.setAttribute("no-logo", true);
                elem.slot = "charts";

                envElement.appendChild(elem);
            }

            _showModal(event) {
                var self = this;
                var envElement = this._parentContainer;
                var currentCharts = [];
                var currentChartObj = {};
                this.currChartCollections = [];
                let navChildren =
                    Polymer.FlattenedNodesObserver.getFlattenedNodes(envElement).filter(n => n.nodeType === Node.ELEMENT_NODE);
                var numChildren = navChildren.length;
                for (var index = 0; index < numChildren; index++) {
                    var currentChild = navChildren[index];
                    currentCharts.push({ "node": currentChild.nodeName, "id": currentChild.plotId });
                    currentChartObj[currentChild.plotId] = currentChild.measurements;
                    if (currentChild.nodeName != "EPIVIZ-GENES-TRACK") {
                        currentChild.measurements.forEach(function(m) {
                            var tempM = JSON.parse(JSON.stringify(m));
                            if (!tempM["annotation"]) {
                                tempM["annotation"] = {};
                            }
                            tempM["annotation"]["collection"] = currentChild.plotId;
                            self.currChartCollections.push(tempM);
                        });
                    }
                }
                this.currentChartObj = currentChartObj;
                this.set("_existingChartMeasurements", currentCharts);

                var collections = [];
                var mData = envElement.measurementAll.raw();
                
                mData = mData.concat(self.currChartCollections);
                mData.forEach(function(m) {
                    if (!collections.includes(m.annotation["collection"])) {
                        collections.push(m.annotation["collection"]);
                    }
                });

                this.set("collections", collections);
                this.set("selectedCollection", null);
                this.set("selectedMeasurements", []);
                // this.set("filters", [])
                for (var k in this.filters) {
                    self.filters[k] = [];
                }
                this.set("filters", self.filters)
                this.set("selectedChart", "MultiStackedLineTrack");
                this.selectedChart = "MultiStackedLineTrack";
                this._chartSelectionChanged();

                // this.$.modal.positionTarget = document;

                this.$.modal.open();
                this.$.modal.refit();

                if(this.shadowRoot.querySelector("#cardElem")) {
                    this.shadowRoot.querySelector("#cardElem")._selected = {};
                    this.shadowRoot.querySelector("#cardElem").filters = self.filters;
                }
            }

            /**
             * show the measurement browser
             */
            _chartSelectionChanged(event) {
                var self = this;
                var envElement = self._parentContainer;

                // if (!self.selection || self.selection == {}) {
                    self.selection = {};
                    // self.selectedMeasurements = [];
                    // self.selectedExistingMeasurements = [];
                    self.selection.chartType = self.selectedChart;
                    self.measurements = envElement.measurementSet;

                    if (event && event.target.nodeName === "PAPER-ITEM") {
                        $(event.target).parent().parent()[0].selected = null;
                    }

                    if (self.selection.chartType == "GenesTrack") {
                        var data = envElement.measurementAll.subset(function (m) { return m.defaultChartType() == "Genes Track" });
                        var datasourceGroups = {};
                        data.foreach(function (m) {
                            if (data.dataprovider && data.dataprovider != m.dataprovider()) { return; }
                            if (data.annotation) {
                                for (var key in data.annotation) {
                                    if (!data.annotation.hasOwnProperty(key)) { continue; }
                                    if (!m.annotation() || m.annotation()[key] != data.annotation[key]) { return; }
                                }
                            }
                            datasourceGroups[m.datasourceGroup()] = ["Genes track", false];
                        });

                        data = data.raw();

                        // self.set("_jsonMeasurements", data.raw());
                    }
                    else if (self.selection.chartType.indexOf("Blocks") != -1) {
                        var data = envElement.measurementAll;
                        var source = "epiviz";
                        data = data.subset(function(m) {
                            return m.type() == "range";
                        });

                        data = data.raw();

                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }
                    }
                    else if (self.selection.chartType.indexOf("Plot") != -1) {
                        var data = envElement.measurementAll;
                        var source = "epiviz";
                        data = data.subset(function(m) {
                            return m.type() != "range" && ["tiledb", "tabix"].includes(m.annotation()["_filetype"]);
                        });

                        data = data.raw();

                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }
                    }
                    else if (self.selection.chartType.indexOf("Gwas") != -1) {
                        var data = envElement.measurementAll;
                        var source = "epiviz";
                        data = data.subset(function(m) {
                            return ["gwas"].includes(m.annotation()["_filetype"]);
                        });

                        data = data.raw();

                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }
                    }
                    else if (self.selection.chartType.indexOf("Transcript") != -1) {
                        var data = envElement.measurementAll;
                        var source = "epiviz";
                        data = data.subset(function(m) {
                            return ["transcript"].includes(m.annotation()["_filetype"]);
                        });

                        data = data.raw();

                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }
                    }
                    else if (self.selection.chartType.indexOf("Interaction") != -1) {
                        var data = envElement.measurementAll;
                        var source = "epiviz";
                        data = data.subset(function(m) {
                            return ["interaction_bigbed"].includes(m.annotation()["_filetype"]);
                        });

                        data = data.raw();

                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }
                    }
                    else {

                        var data = envElement.measurementAll;
                        data = data.subset(function(m) {
                            return m.type() != "range" && ["bigwig"].includes(m.annotation()["_filetype"]);
                        });
                        data = data.raw();
                        data = data.concat(self.currChartCollections);
                        var source = "epiviz";
                        if (this.selectedCollection && this.selectedCollection != "") {
                            data = data.filter(function (m) { return m["annotation"]["collection"] == self.selectedCollection});
                        }

                        // self.set("_jsonMeasurements", data.raw());
                    }
                    var nData = [];
                    var mData = data; //.raw();
                    mData.forEach(function (d, i) {

                        if (d.annotation["genome"] == self._parentContainer.genome) {
                            var temp = d.annotation;
                            if (temp == undefined) {
                                temp = {};
                            }

                            delete temp["tags"];
                            // delete d["type"];
                            delete d["datasourceId"];
                            delete d["datasourceGroup"];
                            delete d["dataprovider"];
                            delete d["formula"];
                            delete d["defaultChartType"];
                            delete d["metadata"];
                            delete d["minValue"];
                            delete d["maxValue"];

                            d.annotation = temp;
                            nData.push(d);
                        }
                    });

                    // if(!self._jsonMeasurements) {
                        self.set("_jsonMeasurements", nData);
                    // } else if (self._jsonMeasurements !== nData) {
                        // self.set("_jsonMeasurements", nData);
                    // }

                    self.$.modal.refit();
                    // self.$.modal.center();
                    
                // }
                // else {
                //     self.selection.chartType = self._charts[self.selectedChart];

                //     self.selectedMeasurements = [];
                //     self.selectedExistingMeasurements = [];

                //     if (self.selection.chartType == "GenesTrack") {
                //         var data = envElement.measurementSet.subset(function (m) { return m.defaultChartType() == "Genes Track" });
                //         var datasourceGroups = {};
                //         data.foreach(function (m) {
                //             if (data.dataprovider && data.dataprovider != m.dataprovider()) { return; }
                //             if (data.annotation) {
                //                 for (var key in data.annotation) {
                //                     if (!data.annotation.hasOwnProperty(key)) { continue; }
                //                     if (!m.annotation() || m.annotation()[key] != data.annotation[key]) { return; }
                //                 }
                //             }
                //             datasourceGroups[m.datasourceGroup()] = ["Genes track", false];
                //         });

                //         // self.set("_jsonMeasurements", data.raw());
                //     }
                // }
                
                // this.$.modal.refit();
            }

            _close() {
                this.selectedChart = null;
                var newCharts = this.shadowRoot.querySelector("data-filter.new-charts");
                var currCharts = this.shadowRoot.querySelector("data-filter.curr-charts");
                if (newCharts) {
                    newCharts._deselectAll();
                }
                if (currCharts) {
                    currCharts._deselectAll();
                }
                this.set("selectedMeasurements", []);
                this.set("selectedExistingMeasurements", []);
                // this.set("_jsonMeasurements", []);
            }

            _submit() {
                var envElement = this._parentContainer;
                var fids;
                var fmeasurements;
                if (this.tabSelected === 1) {
                    fids = this.selectedExistingMeasurements.map(x => x.id);
                    fmeasurements = this.currentChartObj[fids[0]];
                } else if (this.tabSelected === 0) {
                    fids = this.selectedMeasurements.map(x => x.id);
                    fmeasurements = envElement.measurementAll.subset(function (m) { return fids.includes(m.id()) });
                    fmeasurements = fmeasurements.raw();
                }


                this.selection = {};
                this.selection.chartType = this.selectedChart;

                var chartElem = document.createElement(this._chartTypes[this.selection.chartType]);
                chartElem.slot = "charts";
                chartElem.range = envElement.range;
                var chartElemType = chartElem._createChart();

                chartElem.setAttribute("measurements", JSON.stringify(fmeasurements));
                envElement.appendChild(chartElem);

                this._close();
            }

            /**
             * handles form show modal action
             */
            showAdd(target, callback) {
                this.callback = callback;
                this.$.modal.positionTarget = document;
                this.$.modal.open();
            }

            /**
             * handles form close modal action
             */
            closeAddDialog() {
                this.$.modal.close();
            }
        };

        customElements.define(EpivizAddChart.is, EpivizAddChart);
    </script>
</dom-module>