<commit_before>{% extends "base.html" %}
{% load static %}

{% block "title" %}Maps - genTB{% endblock %}
{% block extra_css %}
  <link rel="stylesheet" href="{% static "css/nv.d3.css" %}"/>
  <link rel="stylesheet" href="{% static "css/datatables.min.css" %}">
  <link rel="stylesheet" href="{% static "css/leaflet.css" %}"/>
  <link rel="stylesheet" href="{% static "css/genetics-map.css" %}"/>
  <link rel="stylesheet" href="{% static "css/vertical-tabs.css" %}"/>
{% endblock %}
{% block extra_js %}
  <script src="{% static "js/datatables.min.js" %}"></script>
  <script src="{% static "js/d3.js" %}"></script>
  <script src="{% static "js/nv.d3.js" %}"></script>

  <script src="{% static "js/sources-list.js" %}"></script>
  <script src="{% static "js/leaflet.js" %}"></script>
  <script src="{% static "js/genetics-map.js" %}"></script>
  <script src="{% static "js/drugs-chart.js" %}"></script>
  <script src="{% static "js/lineage-chart.js" %}"></script>
  <script src="{% static "js/gene-chart.js" %}"></script>
  <script src="{% static "js/mutations-chart.js" %}"></script>
  <script src="{% static "js/vertical-tabs.js" %}"></script>
{% endblock %}


{% block content %}
    <div class="container">
      <h2 class="page-header">Map <small>visualize TB resistance genotype and phenotype globally.</small>
      </h2>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vertical-tab-container">
            <div class="col-lg-1 col-md-3 col-sm-3 col-xs-3 vertical-tab-menu">
              <!--Okay so this is the tabs that you see on the right of the menu that you actually click on-->
              <div class="list-group" id="data-store">
                <a href="#" class="list-group-item text-center filter-source filter-paper filter-bioproject" id="source-store" data-json-url="{% url 'maps:map.sources' %}">
                  <h2 class="glyphicon glyphicon-list-alt"></h2>
                  <p>All Data</p>
                </a>
                <!--See how this class is active, thats cause thats currently the tab you are looking at-->
                <a href="#" class="list-group-item text-center defaultactive filter-map" id="map-store" data-json-url="{% url 'maps:map.places' %}">
                  <h2 class="glyphicon glyphicon-globe"></h2>
                  <p>World</p>
                </a>
                <a href="#" class="list-group-item text-center filter-drug" id="drug-store" data-json-url="{% url 'maps:map.drugs' %}">
                  <h2 class="icon-flask"></h2>
                  <p>Drug</p>
                </a>
                <a href="#" class="list-group-item text-center filter-lineage" id="lineage-store" data-json-url="{% url 'maps:map.lineages' %}">
                  <h2 class="icon-graph"></h2>
                  <p>Lineage</p>
                </a>
                <a href="#" class="list-group-item text-center filter-genelocus" id="genelocus-store" data-json-url="{% url 'maps:map.locuses' %}">
                  <h2 class="icon-helix"></h2>
                  <p>Gene Locus</p>
                </a>
                <a href="#" class="list-group-item text-center filter-mutation" id="mutation-store" data-json-url="{% url 'maps:map.mutations' %}">
                  <h2 class="icon-mutation"></h2>
                  <p>Mutation</p>
                </a>
              </div>
            </div>
            <div class="col-lg-11 col-md-9 col-sm-9 col-xs-9 vertical-tab max-width">
              <!--Okay so this is that blue thing at the top-->
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    {% if perms.mutations.add_strainsource %}
                      <a href="{% url 'genes:upload' %}" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-upload"></span></a>
                    {% endif %}
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select or deselect a data set by clicking on the <strong>'Name'</strong> from the selection below.{% if perms.mutations.add_strainsource %} You may also upload new data by clicking the upload button on the right side of this box.{% endif %}
                  </div>
                  <div class="sources" id="sources" style="padding: 10px;">
                    <a href="#" class="btn btn-default" id="source_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-list"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                    <a href="#" class="btn btn-default" id="paper_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-book"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                    <a href="#" class="btn btn-default" id="bioproject_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-bookmark"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                  </div>
                </div>
                <div class="vertical-tab-content defaultactive">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select a country by clicking on it and then clicking <strong>'Select Country'</strong> in the popup bubble. Deselecting a country can be done by clicking on the country again and click <strong>Deselect</strong>. When a country is selected it will narrow down the charts in the rest of the tabs. When you select a country, it will be outlined in red.
                  </div>
                  <div class="maps" id="mapid"></div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select a drug by clicking on any of it's bars. Clicking anywhere else on the chart will deselect.
                    You may select grouped or stacked to change the bar type.
                    Selecting/deselecting a circle from the legend in the top right corner includes/excludes that data type. 
                  </div>
                  <div class="d3graph">
                    <!--This is where that cool graphic goes look at hte drug-chart.js to see how the javascript creates the bar chart-->
                    <svg class="drugs" id="drugs"></svg>
                  </div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    Hover over any arc to view the number of strains in each lineage group. Clicking an arc narrows down the plotted data, and clicking the inner circle zooms out to the default view.
                  </div>
                  <div class="d3graph">
                    <div id="row1"></div>
                    <div id="row2"></div>
                  </div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select multiple gene locuses to focus on by clicking the rows. Clicking on the arrows to the right of a column toggles the sort order of the gene locuses between ascending and descending order of that column.
                  </div>
                  <div id="gene_map" style="padding: 15px;"><commit_msg>updating instructions<commit_after>{% extends "base.html" %}
{% load static %}

{% block "title" %}Maps - genTB{% endblock %}
{% block extra_css %}
  <link rel="stylesheet" href="{% static "css/nv.d3.css" %}"/>
  <link rel="stylesheet" href="{% static "css/datatables.min.css" %}">
  <link rel="stylesheet" href="{% static "css/leaflet.css" %}"/>
  <link rel="stylesheet" href="{% static "css/genetics-map.css" %}"/>
  <link rel="stylesheet" href="{% static "css/vertical-tabs.css" %}"/>
{% endblock %}
{% block extra_js %}
  <script src="{% static "js/datatables.min.js" %}"></script>
  <script src="{% static "js/d3.js" %}"></script>
  <script src="{% static "js/nv.d3.js" %}"></script>

  <script src="{% static "js/sources-list.js" %}"></script>
  <script src="{% static "js/leaflet.js" %}"></script>
  <script src="{% static "js/genetics-map.js" %}"></script>
  <script src="{% static "js/drugs-chart.js" %}"></script>
  <script src="{% static "js/lineage-chart.js" %}"></script>
  <script src="{% static "js/gene-chart.js" %}"></script>
  <script src="{% static "js/mutations-chart.js" %}"></script>
  <script src="{% static "js/vertical-tabs.js" %}"></script>
{% endblock %}


{% block content %}
    <div class="container">
      <h2 class="page-header">Map <small>visualize TB resistance genotype and phenotype globally.</small>
      </h2>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vertical-tab-container">
            <div class="col-lg-1 col-md-3 col-sm-3 col-xs-3 vertical-tab-menu">
              <!--Okay so this is the tabs that you see on the right of the menu that you actually click on-->
              <div class="list-group" id="data-store">
                <a href="#" class="list-group-item text-center filter-source filter-paper filter-bioproject" id="source-store" data-json-url="{% url 'maps:map.sources' %}">
                  <h2 class="glyphicon glyphicon-list-alt"></h2>
                  <p>All Data</p>
                </a>
                <!--See how this class is active, thats cause thats currently the tab you are looking at-->
                <a href="#" class="list-group-item text-center defaultactive filter-map" id="map-store" data-json-url="{% url 'maps:map.places' %}">
                  <h2 class="glyphicon glyphicon-globe"></h2>
                  <p>World</p>
                </a>
                <a href="#" class="list-group-item text-center filter-drug" id="drug-store" data-json-url="{% url 'maps:map.drugs' %}">
                  <h2 class="icon-flask"></h2>
                  <p>Drug</p>
                </a>
                <a href="#" class="list-group-item text-center filter-lineage" id="lineage-store" data-json-url="{% url 'maps:map.lineages' %}">
                  <h2 class="icon-graph"></h2>
                  <p>Lineage</p>
                </a>
                <a href="#" class="list-group-item text-center filter-genelocus" id="genelocus-store" data-json-url="{% url 'maps:map.locuses' %}">
                  <h2 class="icon-helix"></h2>
                  <p>Gene Locus</p>
                </a>
                <a href="#" class="list-group-item text-center filter-mutation" id="mutation-store" data-json-url="{% url 'maps:map.mutations' %}">
                  <h2 class="icon-mutation"></h2>
                  <p>Mutation</p>
                </a>
              </div>
            </div>
            <div class="col-lg-11 col-md-9 col-sm-9 col-xs-9 vertical-tab max-width">
              <!--Okay so this is that blue thing at the top-->
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    {% if perms.mutations.add_strainsource %}
                      <a href="{% url 'genes:upload' %}" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-upload"></span></a>
                    {% endif %}
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select or deselect a data set by clicking on the <strong>'Name'</strong> from the selection below.{% if perms.mutations.add_strainsource %} You may also upload new data by clicking the upload button on the right side of this box.{% endif %}
                  </div>
                  <div class="sources" id="sources" style="padding: 10px;">
                    <a href="#" class="btn btn-default" id="source_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-list"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                    <a href="#" class="btn btn-default" id="paper_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-book"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                    <a href="#" class="btn btn-default" id="bioproject_template" style="margin: 10px;">
                      <h1 class="glyphicon glyphicon-bookmark"></h1>
                      <br>
                      <h3>{name}</h3>
                      <p><em>{desc}</em></p>
                    </a>
                  </div>
                </div>
                <div class="vertical-tab-content defaultactive">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select a country by clicking on it and then clicking <strong>'Select Country'</strong> in the popup bubble. Deselecting a country can be done by clicking on the country again and click <strong>Deselect</strong>. When a country is selected it will narrow down the drug and lineage charts. When you select a country, it will be outlined in red.
                  </div>
                  <div class="maps" id="mapid"></div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select a drug by clicking on any of it's bars. Selecting a drug will filter the world map and lineage chart by the selected drug(s). to Clicking anywhere else on the chart will deselect.
                    You may select grouped or stacked to change the bar type.
                    Selecting/deselecting a circle from the legend in the top right corner includes/excludes that data type.
                  </div>
                  <div class="d3graph">
                    <!--This is where that cool graphic goes look at hte drug-chart.js to see how the javascript creates the bar chart-->
                    <svg class="drugs" id="drugs"></svg>
                  </div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    Hover over any arc to view the number of strains in each lineage group. Clicking an arc narrows down the plotted data, and clicking the inner circle zooms out to the default view.  Selecting a lineage arc or the inner circle will filter the world map and drug chart by the selected lineage(s). Click the "Clear filtering" button to deselect all lineages.
                  </div>
                  <div class="d3graph">
                        <button type="button" class="btn btn-outline-dark" id="clear" style="font-size:1.2em; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif">Clear filtering</button>
                        <div id="row1"></div>
                        <div id="row2"></div>
                  </div>
                </div>
                <div class="vertical-tab-content">
                  <div class="alert alert-info" style="margin: 0px;" role="alert">
                    <span class="glyphicon glyphicon-question-sign pull-left" style="font-size:1.2em; padding-right: 8px;"></span>
                    You may select multiple gene locuses to focus on by clicking the rows. Clicking on the arrows to the right of a column toggles the sort order of the gene locuses between ascending and descending order of that column.
                  </div>
                  <div id="gene_map" style="padding: 15px;">
{'fraction_non_alphanumeric': 0.15243186090225563, 'fraction_numerical': 0.00975093984962406, 'mean_word_length': 1.9572694111516415, 'pattern_counts': {'":': 0, '<': 337, '<?xml version=': 0, '>': 337, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1665260', 'n_tokens_mistral': 5202, 'n_tokens_neox': 4712, 'n_words': 1394}