pathway-viewer.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../network-viewer/network-viewer.html">
<script src="../async/dist/async.min.js"></script>

<script src="images/hipathia_legend.js"></script>


<link rel="import" href="../iron-list/iron-list.html">


<dom-module id="pathway-viewer">
    <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-alignment iron-flex-factors iron-positioning">
         :host {
            box-sizing: border-box;
            position: relative;
            font-size: 13px;
            font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, 'sans-serif' !important;
            height: 100%;
            width: 100%;
            @apply(--layout-vertical);
        }

        #main {
            box-sizing: border-box;
            position: relative;
            height: 100%;
            width: 100%;
            @apply(--layout-horizontal);
        }

         :host[show-hipathia-legend]>#main {
            height: calc(100% - 200px) !important;
        }

        #categories,
        #circuits {
            @apply(--layout-flex);
            overflow-y: auto;
        }

        #left {
            position: relative;
            box-sizing: border-box;
            width: calc(100% - 300px);
            height: 100%;
        }

        #left-label {
            @apply(--layout-horizontal);
            @apply(--layout-center);
            height: 25px;
        }

        #right {
            position: relative;
            box-sizing: border-box;
            width: 300px;
            height: 100%;
            padding: 0 0 0 10px;
            @apply(--layout-vertical);
        }

        network-viewer {
            box-sizing: border-box;
            height: calc(100% - 25px);
        }

        network-viewer,
        .box,
         :host::content .right-box {
            border: 1px solid var(--divider-color);
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
            background-color: var(--text-primary-color);
        }

        .label:not(:first-child),
         :host::content.right-label:not(:first-child) {
            padding-top: 10px;
        }

         :host::content.right-label,
        .label {
            @apply(--layout-horizontal);
            @apply(--layout-center);
            color: var(--secondary-text-color);
            height: 25px;
            padding-left: 5px;
        }
        /* List items */

        .listbox>div {
            cursor: pointer;
            padding: 1px 4px;
            border: 1px solid transparent;
            color: #555;
        }

        .listbox>div:hover {
            background-color: var(--hover-color);
            border-color: var(--accent-color);
        }

        .listbox>div[data-checked] {
            background-color: var(--accent-color);
        }

        .listbox>div>span[data-haschanged] {
            margin-right: 3px;
            color: #000;
            font-weight: bold;
        }

        .listbox>div>span[data-down][data-haschanged]:before,
        .listbox>div>span[data-up][data-haschanged]:before {
            margin-right: 3px;
            color: #aaa;
        }

        .listbox>div>span[data-up][data-haschanged]:before {
            font-family: 'FontAwesome';
            content: '\f176';
        }

        .listbox>div>span[data-down][data-haschanged]:before {
            font-family: 'FontAwesome';
            content: '\f175';
        }

        .listbox>div>span[data-upsig][data-haschanged]:before {
            color: #cc0000;
        }

        .listbox>div>span[data-downsig][data-haschanged]:before {
            color: #005aa3;
        }

        .button {
            background-color: var(--dark-button-color) !important;
            color: var(--text-primary-color) !important;
        }

        .button:hover {
            background-color: var(--light-button-color) !important;
        }
    </style>
    <template>
        <div hidden$="{{!showHipathiaLegend}}" style="text-align:right;">
            <img src$="{{_hipathiaLegendImage}}"></img>
        </div>
        <div id="main">
            <div id="left">
                <div id="left-label">
                    <div class="label" style="font-size:20px;">{{leftTitle}}</div>
                    <div class="flex"></div>
                    <content select=".left-label"></content>
                    <div class="stv-btn stv-btn-shdw" title="Export SVG image" on-click="handleExportImage">
                        <i class="fa fa-image"></i>
                    </div>
                    <div class="stv-btn stv-btn-shdw" title="Center network" on-click="handleCenterNetwork" style="border-left:0">
                        <i class="fa fa-crosshairs"></i>
                    </div>
                    <div class="stv-btn stv-btn-shdw" title="Width adjust" on-click="handleAdjustWidthNetwork" style="border-left:0">
                        <i class="fa fa-arrows-h"></i>
                    </div>
                    <div class="stv-btn stv-btn-shdw" title="Height adjust" on-click="handleAdjustHeightNetwork" style="border-left:0">
                        <i class="fa fa-arrows-v"></i>
                    </div>

                </div>
                <!-- <network-viewer id="networkViewer" disable-context-menu></network-viewer> -->
                <!-- <network-viewer lite></network-viewer> -->
                <!-- <network-viewer hide-node-render hide-edge-render></network-viewer> -->
                <!-- <network-viewer lite hide-node-render hide-edge-render></network-viewer> -->
                <network-viewer id="networkViewer" hide-bar hide-tool-bar hide-edition-bar hide-status-bar hide-node-render hide-edge-render hide-external disable-context-menu></network-viewer>
            </div>
            <div id="right">
                <div class="label horizontal layout">
                    <div>{{categoryLabel}}:</div>
                    <div class="flex"></div>
                    <span hidden="{{hideAltered}}" style="color:#000">{{countChanged(categories)}}</span>
                    <span hidden="{{hideAltered}}" style="color:#666">&nbsp;altered</span>
                </div>
                <div class="horizontal layout">
                    <input class="stv" type="text" placeholder="Filter..." value="{{categorySearchString::input}}">
                    <div class="stv-btn button" style="border-right-width:0;border-left-width:0;" on-click="handleSignificanceSort"><i class="fa fa-sort-amount-asc"></i></div>
                    <div class="stv-btn button" on-click="handleAlphaSort"><i class="fa fa-sort-alpha-asc"></i></div>
                </div>
                <div id="categories" class="box listbox">
                    <template is="dom-repeat" items="{{categories}}" filter="{{computeCategoryFilter(categorySearchString)}}" sort="{{checkCategorySort(categorySortType, categorySortOrder)}}">
                        <div on-click="handleCategoryClick" data-checked$="{{isSelected(item, selectedCategory)}}">
                            <span data-up$="{{item.up}}" data-upsig$="{{item.upsig}}" data-haschanged$="{{item.haschanged}}"></span>
                            <span data-down$="{{item.down}}" data-downsig$="{{item.downsig}}" data-haschanged$="{{item.haschanged}}"></span>
                            <span data-haschanged$="{{item.haschanged}}">{{item.name}}</span>
                        </div>
                    </template>
                </div>


                <div class="label horizontal layout">
                    <label class="stv">{{circuitLabel}}:</label>
                    <div class="flex"></div>
                    <span hidden="{{hideAltered}}" style="color:#000">{{countChanged(circuits)}}</span>
                    <span hidden="{{hideAltered}}" style="color:#666">&nbsp;altered</span>
                </div>
                <div id="circuits" class="box listbox">
                    <template is="dom-repeat" items="{{circuits}}">
                        <div on-click="handleCircuitClick" data-checked$="{{isSelected(item, selectedCircuit)}}">
                            <span data-up$="{{item.up}}" data-upsig$="{{item.upsig}}" data-haschanged$="{{item.haschanged}}"></span>
                            <span data-down$="{{item.down}}" data-downsig$="{{item.downsig}}" data-haschanged$="{{item.haschanged}}"></span>
                            <span data-haschanged$="{{item.haschanged}}">{{item.shortname}}</span>
                        </div>
                    </template>
                </div>

                <content select=".right-label"></content>
                <content select=".right-box"></content>
            </div>

        </div>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'pathway-viewer',
        properties: {
            categories: {
                type: Array
            },
            circuits: {
                type: Array
            },
            selectedCategory: {
                type: Object
            },
            selectedCircuit: {
                type: Object
            },
            leftTitle: {
                type: String,
                value: 'Pathway viewer'
            },
            sessionFileNameMap: {
                type: Object,
                value: {}
            },
            pathType: {
                type: String,
                reflectToAttribute: true,
                value: ''
            },
            path: {
                type: String,
                reflectToAttribute: true,
                value: ''
            },
            backgroundColor: {
                type: String,
                value: '#F1F5F5'
            },
            hideAltered: {
                type: Boolean,
                reflectToAttribute: true,
                value: false
            },
            showHipathiaLegend: {
                type: Boolean,
                reflectToAttribute: true,
                value: false
            },
            _hipathiaLegendImage: {
                type: String,
                value: HIPATHIA_LEGEND_IMAGE
            },
            categoryLabel: {
                type: String,
                value: 'Categories'
            },
            circuitLabel: {
                type: String,
                value: 'Circuits'
            },
            nodeAttributeMapping: {
                type: Object,
                value: function() {
                    return {}
                }
            },
            edgeAttributeMapping: {
                type: Object,
                value: function() {
                    return {}
                }
            }
        },
        observers: [
            'pathTypeChanged(pathType, path)'
        ],
        ready: function() {
            var me = this;
            this.$.networkViewer.backgroundColor = this.backgroundColor;
            this.set('categories', []);
            this.set('circuits', []);

            this.set('categorySortType', 'significance');
            this.set('categorySortOrder', 'desc');
        },
        clean: function() {
            this.set('categories', null);
            this.set('selectedCategory', null);
            this.set('circuits', null);
            this.set('selectedCircuit', null);
            this.set('leftTitle', 'Pathway viewer');
            this.set('sessionFileNameMap', {});
            this.$.networkViewer.startOver();
        },
        handleExportImage: function() {
            var text = this.$.networkViewer.exportSVG();
            var blob = new Blob([text], {
                type: "image/svg+xml"
            });
            saveAs(blob, this.leftTitle.replace(/[^a-zA-Z0-9._\-]/g, "_") + '.svg');
        },
        handleCenterNetwork: function() {
            this.$.networkViewer.centerNetwork();
        },
        handleAdjustWidthNetwork: function() {
            this.$.networkViewer.adjustWidthNetwork();
        },
        handleAdjustHeightNetwork: function() {
            this.$.networkViewer.adjustHeightNetwork();
        },
        reload: function() {
            this.pathTypeChanged(this.pathType, this.path);
        },
        pathTypeChanged: function(pathType, path) {
            if (pathType != '') {
                if (pathType == 'url') {
                    this.loadInfoFromUrl();
                } else if (pathType == 'session') {
                    this.loadInfoFromSession();
                }
            } else {
                console.log('Pathway viewer, please provide pathType attributes.');
            }
        },
        loadInfoFromUrl: function() {
            var me = this;
            this._openRemoteFile('./' + this.path + '/path_info.json', function(content) {
                me._loadCategories(JSON.parse(content));
            });
        },
        loadInfoFromSession: function() {
            var me = this;
            var pathInfo = this.sessionFileNameMap[this.path + '/path_info.json'];
            if (pathInfo == null) {
                pathInfo = this.sessionFileNameMap['path_info.json'];
            }
            if (pathInfo != null) {
                SteviaManager.getFileContent(pathInfo._id, function(content) {
                    me._loadCategories(content);
                });
            }
        },
        _loadCategories: function(categories) {
            var selectedCategory;
            for (var i = 0; i < categories.length; i++) {
                var cat = categories[i];
                if (this.selectedCategory != null && this.selectedCategory.id == cat.id) {
                    selectedCategory = cat;
                }
            }
            categories.sort(this.checkCategorySort('alpha', 'asc'));
            this.set('categories', categories);
            if (selectedCategory != null) {
                this.selectCategory(selectedCategory);
            } else {
                this.selectCategory(categories[0]);
            }
        }, 
        _categoryDetailsFromID: function (categoryId) {
            var categories = this.categories;
            for(var i = 0; i < categories.length; i++){
                if(categories[i].id==categoryId) {
                    var x = categories[i];
                    return x;
                    }
                }                
        },
        loadFile: function(filePath, cb) {
            if (this.pathType == 'url') {
                this._openRemoteFile(filePath, function(content) {
                    cb(content);
                });
            } else if (this.pathType == 'session') {
                SteviaManager.getFileContent(this.sessionFileNameMap[filePath]._id, function(content) {
                    cb(content);
                });
            }
        },
        loadFiles: function(filePathList, callback) {
            var me = this;
            var createTask = function(filePath) {
                if (me.pathType == 'url') {
                    return function(cb) {
                        me._openRemoteFile(filePath, function(content) {
                            cb(null, content);
                        });
                    }
                } else if (me.pathType == 'session') {
                    return function(cb) {
                        SteviaManager.getFileContent(me.sessionFileNameMap[filePath]._id, function(content) {
                            cb(null, content);
                        });
                    }
                }
            }
            var tasks = [];
            for (var i = 0; i < filePathList.length; i++) {
                var filePath = filePathList[i];
                tasks.push(createTask(filePath));
            }
            async.parallel(tasks, function(err, results) {
                callback(results);
            });
        },
        computeCategoryFilter: function(string) {
            if (!string || string == '') {
                // set filter to null to disable filtering
                return null;
            } else {
                string = string.toLowerCase();
                return function(c) {
                    var tokens = [];
                    for (var i = 0; i < c.paths.length; i++) {
                        var p = c.paths[i];
                        if (p.tokens != null && Array.isArray(p.tokens)) {
                            var tokens = tokens.concat(p.tokens)
                        }
                    }
                    return (c.name.toLowerCase().indexOf(string) != -1 ||
                        c.id.toLowerCase().indexOf(string) != -1 ||
                        tokens.indexOf(string) != -1);
                };
            }
        },
        handleCategoryClick: function(e) {
            var category = e.model.item;
            console.log(category);
            this.selectCategory(category);
        },
        handleCircuitClick: function(e) {
            var circuit = e.model.item;
            console.log(circuit);
            this.selectCircuit(circuit);
        },
        _circuitDetailsFromName: function (circuitName) {
            var categories = this.categories;
            for(var i = 0; i < categories.length; i++){ 
                var circuits = this.categories[i].paths;
                for(var j = 0; j < circuits.length; j++){
                    if(circuits[j].name==circuitName) {
                        //var x = circuits[j];
                        var circuit = circuits[j];  
                        var category = categories[i];
                        var selectedCirInCat = [{circuit:circuit}, {category:category}];  
                        return selectedCirInCat;
                        }
                    }
            }                
        },
        selectCategory: function(category) {
            var me = this;
            this.loadFiles([
                me.path + '/' + category.id + '.sif',
                me.path + '/' + category.id + '.natt',
                me.path + '/' + category.id + '.eatt'
            ], function(results) {
                var sif = results[0];
                var natt = results[1];
                var eatt = results[2];
                category.paths.sort(me.checkCategorySort('significance', 'desc'));
                me.set('circuits', category.paths);
                me.set('leftTitle', category.name + ' (' + category.id + ')');
                me.set('selectedCategory', category);

                me.$.networkViewer.startOver();
                me.$.networkViewer.backgroundColor = me.backgroundColor;
                me.$.networkViewer.loadSif(sif);
                me.$.networkViewer.loadNodeAttributes(natt, true);
                me.$.networkViewer.loadEdgeAttributes(eatt, true);

                //Node attribute processing
                var ncolmap = {};
                for (var i = 0; i < me.$.networkViewer.vertexColumns.length; i++) {
                    var col = me.$.networkViewer.vertexColumns[i];
                    ncolmap[col.name] = col;
                }

                if (me.nodeAttributeMapping['label'] != null) {
                    me.$.networkViewer.setVertexDefaultLabelAttribute(me.nodeAttributeMapping['label']);
                } else if (ncolmap['label'] != null) {
                    me.$.networkViewer.setVertexDefaultLabelAttribute('label');
                }
                var nodeDisplayProperties = ['labelSize', 'opacity', 'shape', 'color', 'strokeColor', 'size', 'strokeSize'];
                for (var i = 0; i < nodeDisplayProperties.length; i++) {
                    var dp = nodeDisplayProperties[i];
                    if (me.nodeAttributeMapping[dp] != null && ncolmap[dp] != null) {
                        me.$.networkViewer.$.nodeRender.applyDirect(me.nodeAttributeMapping[dp], dp);
                    } else if (ncolmap[dp] != null) {
                        me.$.networkViewer.$.nodeRender.applyDirect(dp, dp);
                    }
                }

                //Edge attribute processing
                var ecolmap = {};
                for (var i = 0; i < me.$.networkViewer.edgeColumns.length; i++) {
                    var col = me.$.networkViewer.edgeColumns[i];
                    ecolmap[col.name] = col;
                }
                if (me.edgeAttributeMapping['label'] != null) {
                    me.$.networkViewer.setEdgeDefaultLabelAttribute(me.edgeAttributeMapping['label']);
                } else if (ncolmap['label'] != null) {
                    me.$.networkViewer.setEdgeDefaultLabelAttribute('label');
                }
                var edgeDisplayProperties = ['labelSize', 'opacity', 'shaft', 'shape', 'bidirectional', 'color', 'size'];
                for (var i = 0; i < edgeDisplayProperties.length; i++) {
                    var dp = edgeDisplayProperties[i];
                    if (me.edgeAttributeMapping[dp] != null && ecolmap[dp] != null) {
                        me.$.networkViewer.$.edgeRender.applyDirect(me.edgeAttributeMapping[dp], dp);
                    } else if (ecolmap[dp] != null) {
                        me.$.networkViewer.$.edgeRender.applyDirect(dp, dp);
                    }
                }

                me.fire('select-category', category);
                me.$.networkViewer.adjustWidthNetwork();

            });
        },
        selectCategoryById: function(id) {
            var found;
            for (var i = 0; i < this.categories.length; i++) {
                var c = this.categories[i];
                if (c.id == id) {
                    found = c;
                    break;
                }
            }
            if (found != null) {
                this.selectCategory(c);
            }
        },
        selectCircuit: function(circuit) {
            var me = this;
            if (this.selectedCircuit != null && circuit.id === this.selectedCircuit.id) {
                this.set('selectedCircuit', null);
                this.$.networkViewer.$.nodeRender.removeVisualSet('opacity');
                this.$.networkViewer.$.edgeRender.removeVisualSet('opacity');
            } else {
                this.set('selectedCircuit', circuit);
                // Backward compatibility
                var attrId = circuit.id.split('__').pop();
                // ------------------------------------------
                this.$.networkViewer.$.nodeRender.applyVisualSet({
                    attribute: attrId,
                    displayProperty: 'opacity',
                    type: "discrete",
                    matches: {
                        "1": "1",
                        "0": "0.1"
                    },
                    points: [],
                    parse: "string",
                    enabled: true
                });
                this.$.networkViewer.$.edgeRender.applyVisualSet({
                    attribute: attrId,
                    displayProperty: 'opacity',
                    type: "discrete",
                    matches: {
                        "1": "1",
                        "0": "0.1"
                    },
                    points: [],
                    parse: "string",
                    enabled: true
                });
            }
            me.fire('select-circuit', this.selectedCircuit);
        },

        isSelected: function(item, selected) {
            return selected != null && item.id === selected.id;
        },
        checkCategorySort: function(type, order) {
            if (type == 'alpha') {
                if (order == 'asc') {
                    return function(a, b) {
                        return a.name.localeCompare(b.name)
                    }
                } else {
                    return function(a, b) {
                        return b.name.localeCompare(a.name)
                    }
                }
            } else {
                if (order == 'asc') {
                    return function(a, b) {
                        if (a.haschanged && !b.haschanged) {
                            return 1;
                        }
                        if (b.haschanged && !a.haschanged) {
                            return -1;
                        }
                        return a.name.localeCompare(b.name)
                    }
                } else {
                    return function(a, b) {
                        if (a.haschanged && !b.haschanged) {
                            return -1;
                        }
                        if (b.haschanged && !a.haschanged) {
                            return 1;
                        }
                        return a.name.localeCompare(b.name)
                    }
                }
            }
        },
        countChanged: function(list) {
            var count = 0;
            if (Array.isArray(list)) {
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    // console.log(pw.haschanged);
                    if (item.haschanged === true) {
                        count++;
                    }
                }
            }
            return count;
        },
        handleAlphaSort: function(e) {
            var icon = e.currentTarget.firstChild;
            this.set('categorySortType', 'alpha');
            if (icon.classList.contains('fa-sort-alpha-asc')) {
                icon.classList.remove('fa-sort-alpha-asc');
                icon.classList.add('fa-sort-alpha-desc');
                this.set('categorySortOrder', 'desc');
            } else {
                icon.classList.remove('fa-sort-alpha-desc');
                icon.classList.add('fa-sort-alpha-asc');
                this.set('categorySortOrder', 'asc');
            }
        },
        handleSignificanceSort: function(e) {
            var icon = e.currentTarget.firstChild;
            this.set('categorySortType', 'significance');
            if (icon.classList.contains('fa-sort-amount-asc')) {
                icon.classList.remove('fa-sort-amount-asc');
                icon.classList.add('fa-sort-amount-desc');
                this.set('categorySortOrder', 'desc');
            } else {
                icon.classList.remove('fa-sort-amount-desc');
                icon.classList.add('fa-sort-amount-asc');
                this.set('categorySortOrder', 'asc');
            }
        },
        /* ************** */
        /* ************** */
        /* Help functions */
        /* ************** */
        _openRemoteFile: function(filepath, cb) {
            var me = this;
            var request = new XMLHttpRequest();
            request.onload = function() {
                cb(this.responseText);
            };
            request.onerror = function() {
                console.log('Error loading remote file');
            };
            request.open("GET", filepath);
            request.send();
        },
        _openRemoteFileArrayBuffer: function(filepath, cb) {
            var me = this;
            var request = new XMLHttpRequest();
            request.onload = function() {
                cb(this.response);
            };
            request.onerror = function() {
                console.log('Error loading remote file');
            };
            request.open("GET", filepath);
            request.responseType = 'arraybuffer';
            request.send();
        }
    });
</script>