keywords-section.html

<link rel="import" href="external-scripts.html">
<link rel="import" href="nextprot-elements-shared-styles.html">

<!--
`keywords-section`
Keywords section present on function, medical, sequence, and structures pages.
##### Example
          <keywords-section categories='["Biological process","Molecular function", "Technical term"]' exceptions='["KW-0002", "KW-0181", "KW-0903", "KW-0374", "KW-0582"]'></keywords-section>
@demo demo/keywords-section-demo.html
-->
<dom-module id="keywords-section">
  <template>
    <style include="nextprot-elements-shared-styles">
      :host {
        display: block;
      }
      .blue-well {
        margin-left: 10px;
      }
    </style>
    <div id="keywords-header" class="category-header">
      <h4 id="[[title]]-title" class="category-title">Keywords</h4>
      <paper-spinner-lite id="spinner" active></paper-spinner-lite>
    </div>
    <div class="category-main">
      <template is="dom-repeat" items="[[_toArray(data)]]" as="category">
        <template is="dom-repeat" items="[[_toArray(category.value)]]" as="annotations">
          <div class="row category-row">
            <div>
              <h4 class="annotation-category-title text-align-left"> [[annotations.name]]</h4>
            </div>
            <div>
              <template is="dom-repeat" items="[[annotations.value]]" as="annotation" sort="_sortAlphabetically">
                <div class="row annotation-row">
                  <div class="annotation-title-container">
                    <p class="annotation-title">[[annotation.cvTermName]]</p>
                    <div class="annotation-labels">
                      <a class="accession-code-link btn selectable" href="/term/[[annotation.cvTermAccessionCode]]">[[annotation.cvTermAccessionCode]]</a>
                      <span id="[[annotation.cvTermAccessionCode]]-button" class="colored-label definition-button" on-tap="_toggle">Definition</span>
                    </div>
                  </div>
                </div>
                <iron-collapse id="[[annotation.cvTermAccessionCode]]-container">
                  <div class="well blue-well">
                    [[annotation.cvTermDescription]]
                  </div>
                </iron-collapse>
              </template>
            </div>
          </div>
        </template>
      </template>
    </div>
  </template>
  <script>
    Polymer({
      is: 'keywords-section',
      properties: {
        nxConfig: {
          type: Object,
          value: {}
        },
        nxEntryData: {
          type: String,
          value: ""
        },
        lazyLoading: {
          type: Boolean,
          value: false,
        },
        categories: {
          type: Array
        },
        categoryAccessions: {
          type: Object,
          value: {}
        },
        exceptions: {
          type: Array,
          value: []
        },
        count: {
          type: Number,
          notify: true
        }
      },
      ready: function(){
        var nx = new Nextprot.Client("keywords-section", "ndu");
        if (this.nxConfig.env) nx.updateEnvironment(this.nxConfig.env);
        var self=this;

        if(this.lazyLoading) {
          if(Object.getOwnPropertyNames(JSON.parse(decodeURIComponent(this.nxEntryData))).length == 0) {
            self.$.spinner.active = true;
          } else {
            let rawData = JSON.parse(decodeURIComponent(this.nxEntryData)).keywords;
            let processedData = nx.convertToTupleMap({ entry: rawData }, 'uniprot-keyword');
            var keywordList = self.getKeywordsByView(processedData.annot);
            self.$.spinner.active = false;
          }
        } else {
          nx.getAnnotationsByCategory(self.nxConfig.entry, "uniprot-keyword")
                  .then(function (data) {
                    var keywordList = self.getKeywordsByView(data.annot);
                    self.$.spinner.active = false;
                  }).catch(function (err) {
            // catch any error that happened so far
            console.log("Argh, broken: " + err.message);
            console.log("Error at line : " + err.stack);
            self.$.spinner.active = false;
            self.count = 0;
          });
        }
      },
      getKeywordsByView: function(list){
        var count=0;
        var data = {};
        var self = this;
        list.forEach(function (k) {
          var category = k.cvTermType;
          var accessions = self.categoryAccessions[k.cvTermType];
          if (self.categories.indexOf(k.cvTermType)!==-1) {
            if ((accessions===undefined && self.exceptions.indexOf(k.cvTermAccessionCode)===-1)
                || (accessions!==undefined && accessions.indexOf(k.cvTermAccessionCode)!==-1)) {
              if (data[k.cvTermType]) data[k.cvTermType].push(k);
              else data[k.cvTermType] = [k];
            }
          }
        });
        data = Object.keys(data).map(function (key) {
          var temp = {};
          temp[key] = data[key];
          return temp
        });
        var sortCategories = this._categorySorter(this.categories);
        data = data.sort(sortCategories);
        data.forEach(function(d){d[Object.keys(d)[0]].forEach(function(d2){count+=1;})});
        this.data = data;
        this.count = count;
      },
      _toggle: function(mouseEvent){
        var srcElementId = mouseEvent.target.id || mouseEvent.target.parentNode.id;
        this.$$("#"+srcElementId.replace('button','container')).toggle();
      },
      _toArray: function(obj) {
        if (typeof obj === 'object') {
          return Object.keys(obj).map(function(key) {
            return {
              name: key,
              value: obj[key]
            };
          });
        }
        return null;
      },
      _sortAlphabetically: function(a,b){
        return a.description.toLowerCase() > b.description.toLowerCase() ? 1 : -1;
      },
      _categorySorter: function(categories){
        return function(a,b){
          return categories.indexOf(Object.keys(a)[0]) > categories.indexOf(Object.keys(b)[0])? 1 : -1;
        }
      }
    });
  </script>
</dom-module>