structure-display.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<!--
`structure-display`
Search and Display structures from UnicarbKB by composition

IMPORTANT!!!! ADD paper button to bower.json

@demo demo/index.html
-->

<dom-module id="structure-display">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment">
      :host {
        display: block;
      }

      a {
        color: white;
      }

      h3 {
        color: #000;
      }

      .dropdown-padding{
        padding-right: 30px;
      }

      paper-button.red {
        background-color: #eb2011;
        color: white;
      }

      paper-icon-button.red {
        color: #eb2011;
      }

      imgSize {
        max-width: 300px;
      }
    </style>

    <iron-ajax
            id="structureRequest"
            handle-as="json"
            method="GET"
            last-response="{{ajaxResponse}}"
            on-response="_handleResponse"
            on-error="_handleError">
    </iron-ajax>

    <iron-ajax
            id="sysRequest"
            url$="[[apiServer]]/api/systems"
            handle-as="json"
            method="GET"
            last-response="{{systemType}}"
            on-error="_handleError">
    </iron-ajax>
    <iron-ajax
            id="taxRequest"
            url$="[[apiServer]]/api/taxonomies"
            handle-as="json"
            method="GET"
            last-response="{{taxType}}"
            on-error="_handleError">
    </iron-ajax>
    <div>
      <h3>Selected Composition: {{_compositionToString(selectedStructure)}}</h3>
      <h3>Glycan Filter</h3>
      <paper-dropdown-menu label="Glycan Type" class="dropdown-padding" vertical-align="bottom" horizontal-align="left">
        <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{typeSelected}}" attr-for-selected="name">
          <template is="dom-repeat" items="{{glycanType.type}}">
            <paper-item name="{{item}}">{{item}}</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>

      <paper-dropdown-menu label="Taxonomy" class="dropdown-padding" vertical-align="bottom" horizontal-align="left">
        <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{taxSelected}}" attr-for-selected="name">
          <paper-item name="ALL">ALL</paper-item>
          <template is="dom-repeat" items="{{taxType}}">
            <paper-item name="{{item.species}}">{{item.species}}</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>

      <paper-dropdown-menu label="System" class="dropdown-padding" vertical-align="bottom" horizontal-align="left">
        <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{sysSelected}}" attr-for-selected="name">
          <paper-item name="ALL">ALL</paper-item>
          <template is="dom-repeat" items="{{systemType}}">
            <paper-item name="{{item.name}}">{{item.name}}</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
      <template is="dom-if" if="{{showExtraction}}">
        <paper-button on-click="_sendToEpitopeExtractor" raised class="red">Send to Epitope Extractor</paper-button>
      </template>
    </div>

    <div id="struContainer">
      <template is="dom-if" if="{{introMessage}}">
        <p>Click on the nodes in the Visualizer to get structures with a particular composition.</p>
      </template>
      <template is="dom-if" if="{{connectError}}">
        <p>Cannot connect to the server. Please use the contact form to report the problem. </p>
      </template>
      <template is="dom-if" if="{{searchProgress}}">
        <p>Search in progress...</p>
      </template>
      <template is="dom-if" if="{{_countStructures(ajaxResponse)}}">
        <p>No structure has been found with this composition.</p>
      </template>
      <div class="layout horizontal wrap">
        <template is="dom-repeat" items="[[ajaxResponse]]">
          <div class="layout horizontal">
            <a href="http://glyconnect.expasy.org/glycan/[[item.id]]" target="_blank">
              <img class="imgSize"  src$="[[apiServer]]/api/cartoon/[[item.id]]?format=cfg">
            </a>
            <paper-icon-button class="red" on-click="removeStructure" icon="icons:cancel"></paper-icon-button>
          </div>
        </template>
      </div>
    </div>

  </template>

  <script>
    /** @polymerElement */
    class StructureDisplay extends Polymer.Element {
      static get is() { return 'structure-display'; }
      static get properties() {
        return {
          apiServer:{
            type: String,
            reflectToAttribute: true
          },
          selectedStructure: {
            type: String,
            reflectToAttribute: true
          },
          introMessage : {
            type: Boolean,
            value: true
          },
          searchProgress : {
            type: Boolean,
            value: false
          },
          connectError : {
            type: Boolean,
            value: false
          },
          typeSelected: {
            type: String,
            value: 'ALL',
            reflectToAttribute: true
          },
          taxSelected: {
            type: String,
            value: 'ALL',
            reflectToAttribute: true
          },
          sysSelected: {
            type: String,
            value: 'ALL',
            reflectToAttribute: true
          },
          showExtraction: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          },
          autoScroll: {
            type: Boolean,
            value: false,
            reflectToAttribute: true
          }
        };
      }

      static get observers() {
        return [
          'structureApiCall(selectedStructure,typeSelected,sysSelected,taxSelected)'
        ]
      }

      connectedCallback(){
        super.connectedCallback();
        this.glycanType = {'type':['ALL','N-LINKED','O-LINKED','FREE']};
        this.$.taxRequest.generateRequest();
        this.$.sysRequest.generateRequest();
      }

      _countStructures (response){
        if(response) {
          return response.length <= 0;
        }
        return false;
      }

      removeStructure(e){

        var index = this.ajaxResponse.indexOf(e.model.get('item'));
        this.splice('ajaxResponse', index, 1);
      }

     structureApiCall(selectedStructure,typeSelected,sysSelected,taxSelected){
        this.ajaxResponse = null;
        if(selectedStructure !== '' && selectedStructure){
          this.introMessage = false;
          this.connectError = false;
          this.searchProgress = true;

          this.$.structureRequest.url = this.apiServer+'/api/structures?composition='+selectedStructure;

          if(typeSelected !== '' && typeSelected !== 'ALL'){
            this.$.structureRequest.url += '&glycanType='+typeSelected;
          }
          if(sysSelected !== '' && sysSelected !== 'ALL'){
            this.$.structureRequest.url += '&system='+sysSelected+'&';
          }
          if(taxSelected !== '' && taxSelected !== 'ALL'){
            this.$.structureRequest.url += '&taxonomy='+taxSelected;
          }
          this.$.structureRequest.generateRequest();
        }
      }

      _handleError (){
        this.searchProgress = false;
        this.connectError = true;
        if(this.autoScroll) {
          this.$.struContainer.scrollIntoView({block: "start", behavior: "smooth"});
        }
      }

      _reset () {
        this.typeSelected = null;
        this.taxSelected = null;
        this.sysSelected = null;
      }

      _handleResponse (){
        this.searchProgress = false;
        if(this.autoScroll){
          this.$.struContainer.scrollIntoView({block: "start", behavior: "smooth"});
        }
      }

      _sendToEpitopeExtractor(){
        var epitopeExtractorServer= 'http://glycoproteome.expasy.org/epextractor/tool/glyconnect?autoRun=true&structures=';

        for(var i = 0; i< this.ajaxResponse.length; i++){
          //Check to remove all the empty indexes (the one that has been removed by the user).
          if(this.ajaxResponse[i].id !== '' ){
            epitopeExtractorServer = epitopeExtractorServer + this.ajaxResponse[i].id+',';
          }
        }

        window.open(epitopeExtractorServer.slice(0, -1),'_blank');
      }

      _compositionToString(composition) {
        var tokens = composition.split(',');
        var outputString = '';
        if (tokens[0] !== "0") {
          outputString += 'H' + tokens[0];
        }
        if (tokens[1] !== "0") {
          outputString += 'N' + tokens[1];
        }
        if (tokens[2] !== "0") {
          outputString += 'F' + tokens[2];
        }
        if (tokens[3] !== "0") {
          outputString += 'S' + tokens[3];
        }
        if (tokens[4] !== "0") {
          outputString += 'G' + tokens[4];
        }
        if (tokens[5] !== "0") {
          outputString += 'P' + tokens[5];
        }
        if (tokens[6] !== "0") {
          outputString += 's' + tokens[6];
        }
        if (tokens[7] !== "0") {
          outputString += 'p' + tokens[7];
        }
        if (tokens[11] !== "0") {
          outputString += 'm' + tokens[11];
        }
        if (tokens[12] !== "0") {
          outputString += 'a' + tokens[12];
        }
        return outputString;
      }
    }

    window.customElements.define(StructureDisplay.is, StructureDisplay);

  </script>
</dom-module>