{% 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 %}