results-sm.html

<!-- body -->

<div class="jumbotron">
  <div class="container text-center">
    <h2>Results for job #{{jobid}}</h2>
    (will only be available for 48 hours)
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm text-center ">
      <h4><i>in silico</i> saturation mutagenesis table for
      sequence <a href="https://www.uniprot.org/uniprot/{{Uniprot_acc}}"
                  target='_blank'>{{Uniprot_acc}}</a>
      </h4>
    </div>
  </div>

  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm-7 py-2">
      <div class="alert alert-danger" style="display: {{div_status}};">
        <strong>Warning:</strong>
        {{perc_noPDB}}% of residues could not be mapped to any PDB
        structure.
        <p>
          <small>Please consider submitting a new job by providing a custom
          PDB structure, e.g. from a homologous sequence or a homology model.
          {{faq_link_noPDB}}</small>
        </p>
      </div>
    </div>
    <div class="col-sm"></div>
  </div>

  <div class="row">
    <div class="col-sm text-center">
      <!-- legend -->
      <div class="py-2">
        <div class="container">
          <img src="./img/sm_legend.png" class="img" alt="legend"
          style="max-height: 70px; max-width: 100%;" id="legend">
          {{faq_link_legend}}
        </div>
      </div>
      <!-- sat. mutagen. table(s) -->
      {{images}}
    </div>
  </div>


  <div class="row">
    <div class="col-sm text-center pt-4">
      <h4>output files {{faq_link_output}}</h4>
    </div>
  </div>

  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm-8 py-2">
      <table class="table table-sm text-center">
        <tbody>
          <tr>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-predictions.txt" target='_blank'>
                Rhapsody predictions<br>(simple view)</a>
            </td>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-predictions-full_vs_reduced.txt"
                 target='_blank'> Rhapsody predictions<br>(detailed view)</a>
            </td>
            <td colspan="2">
              <a href="{{jobdir}}/pph2-short.txt" target='_blank'>
                PolyPhen-2 output</a><br>
              <a href="http://genetics.bwh.harvard.edu/pph2/" target='_blank'>
                (link to website <sup><i class="fas fa-external-link-alt"></i></sup>)
              </a>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-Uniprot2PDB.txt" target='_blank'>
              PDB mapping</a>
            </td>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-features.txt" target='_blank'>
                computed features</a>
            </td>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-log.txt" target='_blank'>
              log file</a>
            </td>
          </tr>
          <tr class="table-info">
            <td></td>
            <td colspan="2">
              <a href="{{jobdir}}" target='_blank'>view folder</a>
            </td>
            <td colspan="2">
              <a href="{{jobdir}}/rhapsody-results.zip" target='_blank'>
              download zip</a>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-sm"></div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="SAVmodal" tabindex="-1" role="dialog"
     aria-labelledby="SAVmodalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="SAVmodalTitle">SAV info</h3>
        <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h5>PDB coordinates</h5>
        <p id="SAVmodalPDBcoords">
          ...
        </p>
        <div id="SAVmodalPredsDiv">
          <h5>predictions</h5>
          <p id="SAVmodalPreds">
            ...
          </p>
        </div>
        <h5>residue-averaged predictions</h5>
        <p id="SAVmodalResAvgPreds">
          ...
        </p>
      </div>
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Save changes
        </button>
      </div> -->
    </div>
  </div>
</div>

<script>
  // AREA_DATA is a dictionary containing a description of each area in
  // all images defined in \{\{images\}\}. Its content is defined in
  // \{\{lookup_tables\}\}, a placeholder replaced by results.php
  var AREA_DATA  = {};
  {{lookup_tables}}

  // function for rescaling areas according to image current size
  function rescaleArea(area){
    var area_id = area.id;
    var area_dict = AREA_DATA[area_id];
    var img_id = area_dict['img_id'];
    var img = document.getElementById(img_id);
    // compute rescaling factor
    var rescaling = img.naturalWidth/img.width;
    // rescale area
    let orig_coords = area_dict['coords'];
    let new_coords = [0,0,0,0];
    for (let j=0; j<4; ++j) {
      new_coords[j] = Math.round(orig_coords[j]/rescaling);
    }
    area.coords = new_coords.join();
    // store rescaled variables in area dictionary
    area_dict['x_min']  = new_coords[0];
    area_dict['y_min']  = new_coords[1];
    area_dict['width']  = new_coords[2] -new_coords[0];
    area_dict['height'] = new_coords[3] -new_coords[1];
    area_dict['dx'] = area_dict['width'] / area_dict["num_cols"];
    area_dict['dy'] = area_dict['height']/ area_dict["num_rows"];
    // console.log('Area', area_id, 'resized from', orig_coords.join(),
    // 'to', new_coords.join());
  }

  function updateAreaSize(e){
    var area = e.target;
    rescaleArea(area);
  }

  function updateAllAreaSizes(){
    for (var area_id in AREA_DATA){
      area = document.getElementById(area_id);
      rescaleArea(area);
    }
    console.log('All areas resized.');
  }

  function getPositionOnArea(e, area_id){
    var area_dict = AREA_DATA[area_id];
    var img_id = area_dict['img_id'];
    // only image bounding rectangle is reliable
    var rect = document.getElementById(img_id).getBoundingClientRect();
    // get mouse coordinates wrt area
    var x = e.clientX - rect.left - area_dict['x_min'];
    var y = e.clientY - rect.top  - area_dict['y_min'];
    x = Math.floor(x / area_dict['dx']);
    y = Math.floor(y / area_dict['dy']);
    x = Math.max(0, x);
    y = Math.max(0, y);
    return [x, y];
  }

  function updateTooltip(e){
    // triggered by "hover" event on map areas
    var area_id = e.target.id;
    var area_dict = AREA_DATA[area_id];
    var map_id = area_dict['map_id'];
    // get mouse position on the area
    var xy = getPositionOnArea(e, area_id);
    // update map title that will be displayed in tooltip
    var map = document.getElementById(map_id);
    var msg = area_dict["info_msg"][xy[1]][xy[0]];
    if (! area_id.endsWith("strip")) {
      msg = msg.replace(', ', ',\n');
    }
    $(map).attr('title', msg);
  }

  function hideTooltip(e){
    var area_id = e.target.id;
    var map_id = AREA_DATA[area_id]['map_id'];
    var map = document.getElementById(map_id);
    $(map).attr('title', "");
  }

  function updateModalContent(e){
    // triggered by "click" event on map areas
    var area_id = e.target.id;
    var area_dict = AREA_DATA[area_id];
    var map_id = area_dict['map_id'];
    // get mouse position on the area
    var xy = getPositionOnArea(e, area_id);
    var x = xy[0];
    var y = xy[1];
    // update modal content
    var pdb_coords = AREA_DATA[`${map_id}_strip`]["info_msg"][0][x];
    var preds = AREA_DATA[`${map_id}_table`]["info_msg"][y][x];
    var avg_preds = AREA_DATA[`${map_id}_bplot`]["info_msg"][0][x];
    preds = preds.replace(', ', ',<br>');
    avg_preds = avg_preds.replace(', ', ',<br>');
    document.getElementById("SAVmodalPDBcoords").innerHTML = pdb_coords;
    document.getElementById("SAVmodalPreds").innerHTML = preds;
    document.getElementById("SAVmodalResAvgPreds").innerHTML = avg_preds;
    if (area_id.endsWith("table")) {
      document.getElementById("SAVmodalPredsDiv").style.display = 'initial';
    }
    else {
      document.getElementById("SAVmodalPredsDiv").style.display = 'none';
    }
  }

  $( document ).ready(function() {
    console.log( "document loaded" );
  });

  // rescale maps when all images are loaded
  // and every time the window is resized
  $( window ).on( "ready load resize", function() {
    updateAllAreaSizes();
  });
  $( window ).one( "mouseenter", function() {
    updateAllAreaSizes();
  });

</script>