function-view.html

<link rel="import" href="protein-overview.html">
<link rel="import" href="generic-annotation-section.html">
<link rel="import" href="keywords-section.html">
<link rel="import" href="xrefs-section.html">
<link rel="import" href="nextprot-elements-shared-styles.html">

<!--
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/calipho-sib/nextprot-js/master/dist/nextprot.min.js"></script>
-->

<!--
`function-view`
View listing protein function annotations.

#### Example

          <function-view nx-config='{"entry": "P52701"}'></function-view>

@demo demo/function-view-demo.html
-->
<dom-module id="function-view">
  <template>
    <style include="nextprot-elements-shared-styles">
      :host {
        display: block;
        background:#f8f8f8;
        overflow-y: auto;
      }
    </style>
    <div class="row">
      <div id="nxOverview" class="col-md-12">
        <protein-overview nx-config="[[nxConfig]]" nx-entry-data="[[nxEntryData]]" lazy-loading="[[lazyLoading]]"></protein-overview>
      </div>
    </div>
    <div id="noDataWarning" class='alert alert-warning noData' hidden>There is no function information available in neXtProt for [[nxConfig.entry]].
      <template is="dom-if" if="[[hasPredictions]]">
        Functional predictions have been submitted <a href="entry/[[nxConfig.entry]]/function-predictions">here</a>. Suggestions for updates are welcome! Please <a href="javascript:location='mailto:\u0073\u0075\u0070\u0070\u006f\u0072\u0074\u0040\u006e\u0065\u0078\u0074\u0070\u0072\u006f\u0074\u002e\u006f\u0072\u0067';void 0">contact us</a>
      </template>
      <template is="dom-if" if="[[!hasPredictions]]">
        Suggestions for updates and submission of functional predictions are welcome! Please <a href="javascript:location='mailto:\u0073\u0075\u0070\u0070\u006f\u0072\u0074\u0040\u006e\u0065\u0078\u0074\u0070\u0072\u006f\u0074\u002e\u006f\u0072\u0067';void 0">contact us</a>
      </template>
    </div>
    <div class="row">
      <div id="nxAnnotations" class="col-md-12">
        <generic-annotation-section id="annotationElement" section="function" gold-only="[[nxConfig.goldOnly]]"
                                    categories='["FUNCTION-INFO", "CATALYTIC-ACTIVITY", "TRANSPORT-ACTIVITY", "ACTIVITY-REGULATION", "COFACTOR", "COFACTOR-INFO",
                                      "BIOPHYSICOCHEMICAL-PROPERTY", "GO-MOLECULAR-FUNCTION", "GO-BIOLOGICAL-PROCESS",
                                      "PATHWAY", "ALLERGEN", "MISCELLANEOUS", "CAUTION"]'
                                    category-titles='{"FUNCTION_INFO": "OVERVIEW", "CATALYTIC_ACTIVITY": "ENZYMATIC ACTIVITY", "ACTIVITY_REGULATION": "ENZYMATIC ACTIVITY",
                                    "COFACTOR": "ENZYMATIC ACTIVITY", "COFACTOR_INFO": "ENZYMATIC ACTIVITY", "MISCELLANEOUS": "NOTE"}'
                                    nx-config="[[nxConfig]]" count="{{annotationsCount}}">
        </generic-annotation-section>
      </div>
    </div>
    <div class="row">
      <div id="nxKeywords" class="col-md-12">
        <keywords-section categories='["Molecular function", "Biological process", "Technical term"]'
                          exceptions='["KW-0002", "KW-0903", "KW-0374", "KW-0582", "KW-1267"]'
                          nx-config="[[nxConfig]]" count="{{keywordsCount}}"
                          nx-entry-data="[[nxEntryData]]" lazy-loading="[[lazyLoading]]">
        </keywords-section>
      </div>
    </div>
    <div class="row">
      <div id="nxXrefs" class="col-md-12">
        <xrefs-section categories='["GuidetoPHARMACOLOGY", "SwissLipids", "BioCyc", "BRENDA", "SABIO-RK", "CAZy", "ESTHER", "MEROPS", "MoonProt", "PeroxiBase", "Pharos", "REBASE", "SFLD", "GeneWiki", "GenomeRNAi", "PRO", "MoonDB", "BioGRID-ORCS","PathwayCommons"]'
                       nx-config="[[nxConfig]]" view="function" count="{{xrefsCount}}">
        </xrefs-section>

      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'function-view',
      properties: {
        nxConfig: {
          type: Object,
          value: {}
        },
        nxEntryData: {
          type: String,
          value: ""
        },
        lazyLoading: false,
        annotationsCount: {
          type: Number,
          value: -1,
          observer: "_checkAnnotations"
        },
        keywordsCount: {
          type: Number,
          observer: "_checkKeywords"
        },
        xrefsCount: {
          type: Number,
          observer: "_checkXrefs"
        },
        hasPredictions: {
          type: Boolean,
          value: false
        }
      },

      ready: function () {
        this._initApiClient();
        var self = this;
        this._npClient.getJSON("/function-predictions/"+ this.nxConfig.entry +".json", "true")
                .then(function (response) {
                  self.hasPredictions = Object.keys(response.predictions).length > 0;
                })
                .catch(function (error) {
                  console.log("Argh, broken: " + error.message);
                  console.log("Error at line : " + error.stack);
                })
      },

      _initApiClient: function () {
        this._npClient = new Nextprot.Client("neXtProt function prediction view", "Calipho Group");
        this._npClient.updateEnvironment("dev");
        if (this.nxConfig.env) {
          this._npClient.updateEnvironment(this.nxConfig.env);
        }
      },

      _checkAnnotations: function(){
        if(this.annotationsCount===0) this.$.nxAnnotations.hidden=true;
        else this.$.nxAnnotations.hidden=false;
        this.$.noDataWarning.hidden=!this.$.nxAnnotations.hidden;
      },
      _checkKeywords: function(){
        this.keywordsCount===0 ? this.$.nxKeywords.hidden=true : this.$.nxKeywords.hidden=false;
      },
      _checkXrefs: function(){
        this.xrefsCount===0 ? this.$.nxXrefs.hidden=true : this.$.nxXrefs.hidden=false;
      }
    });
  </script>
</dom-module>