AnnotatorSidebar.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.branding-above {
    padding: 0;
    top: 0;
}

.hidden {
    display:none;
}

.branding-below {
    bottom: 56px;
    position: fixed;
    background-color: #fff;
    top: 0;
}

.branding-text {
    left: 7px;
    position: relative;
    font-size: .9em;
    top: 3px;
}

.ontomaton-header{
    padding-top: 5px;
    background: #f6f7f6;
    height: 75px;
}

.expand-icon {
  cursor: pointer;
}

.col-contain {
    overflow: hidden;
}

h3 {
    margin-left: 0px;
height: 30px;
margin-top: -10px;
text-align: left;
font-size: 0.9em;
background-color: #f6f7f6;
padding-top: 13px;
padding-bottom:11px;
padding-left: 6px;
border-bottom: 2px solid #ccc;
cursor:pointer;
}

.col-one {
    float: left;
    width: 50%;
}

.logo {
    vertical-align: middle;
}

.radio-spacer {
    height: 20px;
}

.pull-left {
float:left;
}

.pull-right {
float:right;
}

.width-100 {
    width: 100%;
}

.service-selection {
   font-size: 0.9em;
   color: #414241;
}

.search-results ul {
list-style:none;
margin-left: -30px;
text-align: left;
}

.term-info {
float:left;
width: 69%;
margin-top:2%;
}

.term-buttons {
float:right;
width: 31%;
}

.search-results ul li{
width:95%;
padding: 4px;
font-weight: bolder;
padding-top: 3px;
font-size: .9em;
padding-bottom: 3px;
background-color: #fff;
margin-bottom:2px;

}

.ontology-result {
    background-color: #fafafa;
    padding: 5px;
    margin: 5px;
}

.search-results ul li a{
color: #5A9C43;
}

.freetext-term {
   text-align:left;
 font-weight: bolder;
 font-size: 1em;
 color: #414241;
}

.ontology-abbr {
margin-left: 10px;
text-align:left;
 font-weight: bolder;
 font-size: .9em;
 color: #414241;
}

.ontology-name {
 text-align:left;
 font-weight: bolder;
 font-size: .8em;
 color: #95A5A5;
}

.term-count {
   text-align:right;
   padding: 7px 5px;
   background-color: #4FBA6F;
   color: #fff;
   border-radius:50%;
   font-size: .8em;
}

ul {
-webkit-padding-start: 5px;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  /**
   * On document load, assign click handlers to each button and try to load the
   * user's origin and destination language preferences if previously set.
   */
  $(function() {
    $('#run-annotator').click(runAnnotator);
  });
  
  /**
  * Taken from http://www.mustbebuilt.co.uk/2012/04/20/replaceall-function-for-javascript-and-actionscript/
  */
  function replaceAll(oldStr, removeStr, replaceStr, caseSenitivity){
      var cs = "gi"
      if(caseSenitivity == 1){
          cs = "g";
      }
       var myPattern=new RegExp(removeStr,cs);
       return oldStr.replace(myPattern,replaceStr);
  }
  
  /**
   * Inserts the term in to the spreadsheet.
   */
  function insertTerm(term_id) {
       google.script.run
        .withSuccessHandler(
          function(result, element) {
              
          }).withFailureHandler(
          function(msg, element) {
            showError(msg, $('#button-bar'));
            element.disabled = false;
          })
        .withUserObject(this)
        .replaceTermWithSelectedValue(term_id)
  }
  
  function toggle(id) {
      $("#"+id).toggleClass("hidden");

      var isHidden = $("#" + id).hasClass( "hidden" );
      console.log("Is hidden? " + isHidden); 
      $("#expand-icon-" + id).removeClass(isHidden ? "entypo-minus" : "entypo-plus");
      $("#expand-icon-" + id).addClass(isHidden ? "entypo-plus" : "entypo-minus");
  }

  /**
   * Runs a server-side function to translate the user-selected text and update
   * the sidebar UI with the resulting translation.
   */
  function runAnnotator() {
    this.disabled = true;
    $('#search-results').html('<div id="spinner"><img src="http://l4.yimg.com/dh/ap/default/130116/spinner_white_working.gif"/></div>');
    $('#error').remove();
    
    google.script.run
        .withSuccessHandler(
          function(result, element) {
            // process results
            
            console.log(result);

            var html='<div id="result-accordion" class="accordion">';
            var count= 0;
            for(var term_key in result) {
                
                html += '<h3 onclick="toggle(\'results-' + count + '\')"><span id="expand-icon-results-' + count + '" class="entypo-plus expand-icon" style="font-size: 1.2em"> </span><span class="freetext-term">' + term_key + '</span> - <span class="ontology-name">Results from ' + Object.keys(result[term_key]["results"]).length + ' ontologies.</span></h3>' +
                        '<div id="results-' + count + '" class="hidden">';
                
                for(var ontology_source_key in result[term_key]["results"]) {
                    var ontology_name = result[term_key]["results"][ontology_source_key]["ontology-name"];
                    
                    html += '<div class="clearfix"></div>';
                    
                    html += '<div class="ontology-result"><p style="text-align:left" onclick="toggle(\'ont-' + count + ontology_source_key + '\')"><span id="expand-icon-ont-'  + count + ontology_source_key + '" class="entypo-plus expand-icon"></span><span class="ontology-abbr">' + ontology_source_key + '</span> - <span class="ontology-name">' + ontology_name + '</span></p>';

                    html += '<div id="ont-' + count + ontology_source_key + '" class="hidden ont-results">';
                    html += "<ul>";
                    for(var term_index in result[term_key]["results"][ontology_source_key].terms) {
                        var term = result[term_key]["results"][ontology_source_key].terms[term_index];
                        var label = term["label"];
                    
                        html+= '<li>'+
                                '<div class="term-info">' +
                                    '<a href="'+term["id"] + '" target="_blank">' + term["label"] + '</a>' +
                                '</div>' +
                                '<div class="term-buttons"><button onclick="insertTerm(\'' + term["id"] +  '\')" style="margin-left:-5px">Insert Term</button></div>' +
                                '<div class="clearfix"></div>'+
                            '</li>';
                    }
                    
                    html += "</div></ul></div>";
                }
                
                
                html +='</div>';
                count += 1;
            }
            
            html += "</div>";
            
            $('#search-results').html(html);
            
            element.disabled = false;
            $('#spinner').addClass("hidden");
            
          })
        .withFailureHandler(
          function(msg, element) {
          $('#spinner').addClass("hidden");
            showError(msg, $('#button-bar'));
            element.disabled = false;
          })
        .withUserObject(this)
        .runAnnotator();
  }

  /**
   * Inserts a div that contains an error message after a given element.
   *
   * @param msg The error message to display.
   * @param element The element after which to display the error.
   */
  function showError(msg, element) {
    var div = $('<div id="error" class="error">' + msg + '</div>');
    $(element).after(div);
  }
</script>


<div class="sidebar branding-above" align="center">
<div class="ontomaton-header">
<img src="http://isatab.sf.net/assets/img/tools/ontomaton-tagging.png"/>
</div>
   <div class="block" id="button-bar" style="margin-top:20px">
   
      <button class="share" id="run-annotator">Tag Terms</button>
    </div>
    
    <div id="search-results" class="block form-group search-results" style="height:390px; overflow: scroll; border-top: 1px solid #ccc; padding-top: 10px">
    </div>
</div>

 

<div class="sidebar bottom">
  <img alt="Add-on logo" class="logo"
      src="http://isatab.sourceforge.net/assets/img/isatools-sml.png">
  <span class="gray branding-text">Created by the <a href="http://isa-tools.org" target="_blank">ISA tools</a> team</span>
</div>