{% extends sitebase.html %}
{% block head %}
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/ol.css" type="text/css">
<style type="text/css">
  #map-canvas { height: 500px; }

  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 180px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    content: "✖";
  }
</style>
<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/ol.js"></script>

<script type="text/javascript">
  // -> Borrowed from https://stackoverflow.com/q/32102584
  // internal function to avoid duplication of code
  function _generate_iconFeature(sid, lat, lng) {
    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')),
      study_id: sid,
    });
    return iconFeature;
  }
  // adding features via the lat/long
  var iconFeatures = [];
  {% for sid, lat, lng in lat_longs %}
    {% if lat > -90 and lat < 90 and lng > -180 and lng < 180 %}
      iconFeatures.push(_generate_iconFeature({% raw sid %}, {% raw lat %}, {% raw lng %}));
    {% end %}
  {% end %}
  // creating new verctor &layer for the markers
  var vectorSource = new ol.source.Vector({ features: iconFeatures });
  var vectorLayer = new ol.layer.Vector({ source: vectorSource });

  $( document ).ready(function() {
    // creating map
    var map = new ol.Map({
      target: 'map-canvas',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        vectorLayer
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([{% raw qiita_config.stats_map_center_longitude %}, {% raw qiita_config.stats_map_center_latitude %}]),
        zoom: 4
      })
    });

    var closer = document.getElementById('map-canvas-popup-closer');
    closer.onclick = function() {
      overlay.setPosition(undefined);
      closer.blur();
      return false;
    };
    var container = document.getElementById('map-canvas-popup');
    var overlay = new ol.Overlay({
      element: container,
      positioning: 'bottom-center',
      autoPan: true,
      offset: [0, 0],
      autoPanAnimation: {
        duration: 250
      }
    });
    map.addOverlay(overlay);

    map.on('click', function(evt) {
      var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) {
          return feature;
        });
      if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        var content = document.getElementById('map-canvas-popup-content');
        var study_id = feature.get('study_id');
        var text = 'Sample from study: ' + study_id;
        {% if user is not None %}
          content.innerHTML = '<a target="_blank" href="{% raw qiita_config.portal_dir %}/study/description/' + study_id + '">' + text + '</a>';
        {% else %}
          content.innerHTML = text;
        {% end %}
        overlay.setPosition(coordinates);
      }
    });
  });

</script>

{% end %}
{% block content %}
  <div id="jumbotron" class="jumbotron">
    <small>Generated on: {{time}}</small>
    <br/><br/>
    <table width="100%">
    <thead>
      <tr>
        <th>Studies</th>
        <th>Unique Samples per Visibility Status</th>
        <th>Public Samples per Data Type</th>
        <th>Users</th>
        <th>Jobs</th>
      </tr>
    </thead>
      <tr>
        <td>
          {% for k in number_studies %}
            <i>{{k}}</i>: {{ "{:,}".format(int(number_studies[k])) }} <br/>
          {% end %}
          {% if num_studies_ebi and num_studies_ebi is not None %}
            <i>submitted to EBI</i>: {{ "{:,}".format(int(num_studies_ebi)) }}
          {% end %}
        </td>
        <td>
          {% for k, v in number_of_samples.items() %}
            <i>{{k}}</i>: {{ "{:,}".format(int(v)) }} <br/>
          {% end %}
          {% if num_samples_ebi and num_samples_ebi is not None %}
            <i>submitted to EBI</i>: {{ "{:,}".format(int(num_samples_ebi)) }} <br/>
          {% end %}
          {% if number_samples_ebi_prep and number_samples_ebi_prep is not None %}
            <i>submitted to EBI (prep)</i>: {{ "{:,}".format(int(number_samples_ebi_prep)) }}
          {% end %}
        </td>
        <td>
          {% for k, v in per_data_type_stats.items() %}
            <i>{{k}}</i>: {{ "{:,}".format(int(v)) }} <br/>
          {% end %}
        </td>

        {% if num_users and num_users is not None %}
          <td>{{ "{:,}".format(int(num_users)) }}</td>
        {% end %}

        {% if num_processing_jobs and num_processing_jobs is not None %}
          <td>{{ "{:,}".format(int(num_processing_jobs)) }}</td>
        {% end %}
      </tr>
    </table>
  </div>

  <div id="map-canvas"></div>
  <div id="map-canvas-popup" class="ol-popup">
    <a href="#" id="map-canvas-popup-closer" class="ol-popup-closer"></a>
    <div id="map-canvas-popup-content"></div>
  </div>

  {% if random_study_id is not None %}
    <div id="jumbotron" class="jumbotron">
      <h2>Check out this random public study from the database!</h2>
      <h3>{{ random_study_title }}</h3>
      <p align="justify">{{ random_study_info['study_abstract'] }}</p>
      <p>
      {% if user is not None %}
          <a href="{% raw qiita_config.portal_dir %}/study/description/{{ random_study_id }}">Go to the study <span class="glyphicon glyphicon-arrow-right"></span></a>
      {% else %}
          <h4>Log in above to see this and other public studies</h4>
      {% end %}
      </p>
    </div>
  {% end %}

  {% if img and img is not None %}
    <div>
      <h5>Data usage</h5>
      <img height="100%" width="100%" src="{% raw img %}"/>
    </div>
  {% end %}

{% end %}