proteomics-view.html

<link rel="import" href="protein-overview.html">
<link rel="import" href="isoform-selector.html">
<link rel="import" href="triple-viewer.html">
<link rel="import" href="keywords-section.html">
<link rel="import" href="xrefs-section.html">
<link rel="import" href="nextprot-elements-shared-styles.html">
<!--
TO TEST :
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-->

<!--
`proteomics-view`
View listing sequence annotations.

#### Example

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

@demo demo/proteomics-view-demo.html
-->
<dom-module id="proteomics-view">
    <template>
        <style include="nextprot-elements-shared-styles">
            :host {
                display: block;
                background:#ECF0F1;
                overflow-y: auto;
            }
            .ext-link:after {
                content: "\f08e";
                font-family: "FontAwesome";
                font-size: 11px;
                margin-left: 5px;
                vertical-align: middle;
            }
        </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 class="row nxSection">
            <isoform-selector nx-config="[[nxConfig]]" iso-name={{isoName}} nx-entry-data="[[nxEntryData]]"
                              lazy-loading="[[lazyLoading]]"
                              feature-viewer-ready="{{featureViewerReady}}"></isoform-selector>
            <triple-viewer nx-config="[[nxConfig]]" iso-name=[[isoName]] feature-list='[{
        "APIRef": "sequence",
        "metadata": {"name": "Sequence"}
      },
      {
        "APIRef": "propeptide",
        "metadata": {
          "name": "Propeptide",
          "className": "pro",
          "color": "#B3B3B3",
          "type": "rect",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "mature-protein",
        "metadata": {
          "name": "Mature protein",
          "className": "mat",
          "color": "#B3B3C2",
          "type": "rect",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "signal-peptide",
        "metadata": {
          "name": "Signal peptide",
          "className": "sign",
          "color": "#B3B3E1",
          "type": "rect",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "peroxisome-transit-peptide",
        "metadata": {
          "name": "Transit peptide",
          "className": "pero",
          "color": "#B3B3F0",
          "type": "rect",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "mitochondrial-transit-peptide",
        "metadata": {
          "name": "Transit peptide",
          "className": "mito",
          "color": "#B3B3F0",
          "type": "rect",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "disulfide-bond",
        "metadata": {
          "name": "Disulfide bond",
          "className": "dsB",
          "color": "#B3B3E1",
          "type": "path",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "initiator-methionine",
        "metadata": {
          "name": "Initiator Met",
          "className": "initMeth",
          "color": "#B3B3D1",
          "type": "unique",
          "filter": "Processing"
        }
      },
      {
        "APIRef": "modified-residue",
        "metadata": {
          "name": "Modified residue",
          "className": "modifRes",
          "color": "#B3C2B3",
          "type": "unique",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "cross-link",
        "metadata": {
          "name": "Cross-link",
          "className": "crossLink",
          "color": "#B3C2C2",
          "type": "unique",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "glycosylation-site",
        "metadata": {
          "name": "Glycosylation",
          "className": "glycoSite",
          "color": "#B3C2D1",
          "type": "unique",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "lipidation-site",
        "metadata": {
          "name": "Lipidation",
          "className": "lipidation",
          "color": "#A3B5DB",
          "type": "unique",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "selenocysteine",
        "metadata": {
          "name": "Non-standard AA",
          "className": "seleno",
          "color": "#859DE7",
          "type": "unique",
          "filter": "Modified Residue"
        }
      },
      {
        "APIRef": "antibody-mapping",
        "metadata": {
          "name": "Antibody",
          "className": "anti",
          "color": "#B3C2F0",
          "type": "rect",
          "filter": "Antibody"
        }
      },
      {
        "APIRef": "peptide-mapping",
        "metadata": {
          "name": "Peptide",
          "className": "pep",
          "color": "#B3E1D1",
          "type": "rect",
          "filter": "Peptide",
          "height": 8
        }
      },
      {
        "APIRef": "srm-peptide-mapping",
        "metadata": {
          "name": "SRM Peptide",
          "className": "srmPep",
          "color": "#B3E1F0",
          "type": "rect",
          "filter": "Peptide",
          "height": 8
        }
      },
      {
        "APIRef": "isoform-mapping",
        "metadata": {}
      }]' nx-entry-data="[[nxEntryData]]"
                           lazy-loading="[[lazyLoading]]"
                           feature-viewer-ready="{{featureViewerReady}}"></triple-viewer>
        </div>

        <div class="row">
            <div id="nxKeywords" class="col-md-12">
                <keywords-section categories='["Technical term"]'
                                  category-accessions='{"Technical term": ["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='["GlyGen", "EPD","MaxQB","PaxDb","PeptideAtlas","PhosphoSitePlus","Proteomes","PRIDE","SWISS-2DPAGE","DOSAC-COBS-2DPAGE","UCD-2DPAGE","OGP","REPRODUCTION-2DPAGE","TopDownProteomics","ProteomicsDB", "CPTAC", "ABCD", "jPOST", "MassIVE", "HPA", "MetOSite", "SwissPalm"]' nx-config="[[nxConfig]]" view="proteomics" count="{{xrefsCount}}">
                </xrefs-section>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: 'proteomics-view',
            properties: {
                nxConfig: {
                    type: Object,
                    value: {}
                },
                isoName: {
                    type: String
                },
                goldOnly: {
                    type: Boolean,
                    value: false
                },
                keywordsCount: {
                    type: Number,
                    observer: "_checkKeywords"
                },

                xrefsCount: {
                    type: Number,
                    observer: "_checkXrefs"
                },
                nxEntryData: {
                    type: String,
                    value: ""
                },
                lazyLoading: {
                    type: Boolean,
                    value: false,
                },
                featureViewerReady: {
                    type: Boolean,
                    value: false,
                    notify: true
                }
            },
            _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>