{% extends "base.html" %}
{% block title %} GeneNetwork {% endblock %}

<link rel="stylesheet"
      type="text/css"
      href="{{ url_for('css', filename='uikit/css/uikit.min.css') }}" />
{% block css %}
<link rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='/new/css/index_page.css') }}" />
<link rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='/new/css/toots.css') }}" />
<style TYPE="text/css">

 p.interact { display: none; }


 .media {
     padding-bottom:10px;
     border-bottom: 1px solid #c8ccc9;
 }

 .media img {

     width: 95%;
     height: 100%;
     border-radius: 5px;
     /*transform: scale(1.1); image small?*/
     border:1px solid #c8ccc9;
 }

 .toots {
     margin:0 auto;
     max-width: 500px;
     height: 160px;
     position: relative;
     border-radius:10px;
     background-color: #F9F9F9;

 }

 h2 {
     margin-bottom: 0px;
 }

 ul {
     margin-top: 0px;
 }

 .toot {
     padding-top:8px;     
     background:#f9f9f9;
     color:#000;
     
 }

</style>
{% endblock %}
{% block search %}
{% include "gsearch.html" %}
{% endblock %}
{% block content %}
{{ flash_me() }}
<div class="container-fluid" style="min-width: 1210px;">
    {% if anon_collections | length > 0 %}
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Import Anonymous Collections</h3>
        </div>
        <div class="panel-body">
            <p>
                There
                {% if anon_collections | length > 1 %}
                are
                {% else %}
                is
                {% endif %}
                {{ anon_collections | length }} anonymous
                collection
                {% if anon_collections | length > 1 %}s{% endif %}
                associated with your current session. What do you wish to do?
            </p>
            <p class="text-danger" style="font-weight: bold;">
                <small>
                    If you choose to ignore this, the anonymous collections will be
                    eventually deleted and lost.
                </small>
            </p>
            <form action="{{ url_for("handle_anonymous_collections") }}" method="post">
                <div class="form-group">
                    <input type="radio" id="rdo-import" value="import" name="anon_choice" />
                    <label for="rdo-import">Import</label>
                    <input type="radio" id="rdo-delete" value="delete" name="anon_choice" />
                    <label for="rdo-delete">Delete</label>
                </div>
                <input type="submit" class="btn btn-warning" value="Submit" />
            </form>
        </div>
    </div>
    {% endif %}
    <div class="row" style="width: 100%;">
        <div class="col-xs-4"
             style="margin-right:50px;
                    min-width: 530px;
                    max-width: 550px">
            <section id="search">
                <div class="page-header">
                    <h2>Select and Search</h2>
                </div>
                <form method="get"
                      action="/search"
                      target="_blank"
                      id="searchform"
                      name="SEARCHFORM"
                      data-gn_server_url="{{ gn_server_url }}">
                    <fieldset>
                        <div style="padding-left: 20px;
                                    padding-right: 20px"
                             class="form-horizontal">
                            <div class="form-group">
                                <label for="species"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important">Species:</label>
                                <div class="col-xs-10 controls input-append"
                                     style="display: flex;
                                            padding-left: 20px">
                                    <div class="col-9">
                                        <select name="species"
                                                id="species"
                                                class="form-control"
                                                style="width: 340px !important">
                                            <option>Loading...</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="group"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important">Group:</label>
                                <div class="col-xs-10 controls input-append"
                                     style="display: flex;
                                            padding-left: 20px">
                                    <div class="col-9">
                                        <select name="group"
                                                id="group"
                                                class="form-control"
                                                style="width: 340px !important">
                                            <option>Loading...</option>
                                        </select>
                                        <i class="icon-question-sign"></i>
                                    </div>
                                    <div class="col-3" style="margin-left: 10px;">
                                        <button type="button" id="group_info" class="btn form-control info-button">
                                            <span class="glyphicon glyphicon-flag"></span> Info
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tissue"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important">Type:</label>
                                <div class="col-xs-10 controls input-append"
                                     style="display: flex;
                                            padding-left: 20px">
                                    <div class="col-9">
                                        <select name="type"
                                                id="type"
                                                class="form-control"
                                                style="width: 340px !important">
                                            <option>Loading...</option>
                                        </select>
                                    </div>
                                    <div class="col-3" style="margin-left: 10px;">
                                        <button type="button" id="dataset_info" class="btn form-control info-button">
                                            <span class="glyphicon glyphicon-flag"></span> Info
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="dataset"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important">Dataset:</label>
                                <div class="col-xs-10 controls" style="display: flex; padding-left: 20px;">
                                    <div class="col-9">
                                        <select name="dataset"
                                                id="dataset"
                                                class="form-control"
                                                style="max-width: 550px;
                                                      width: 450px !important">
                                            <option>Loading...</option>
                                        </select>
                                        <i class="icon-question-sign"></i>
                                    </div>
                                </div>
                            </div>
                            <!--  GET ANY  SEARCH -->
                            <div class="form-group">
                                <label for="or_search"
                                       class="col-xs-1 control-label"
                                       style="padding-left: 0px;
                                            padding-right: 0px;
                                            width: 65px !important">Get Any:</label>
                                <div class="col-xs-10 controls" style="padding-left: 20px;">
                                    <div class="col-8 autocomplete">
                                        <textarea id="myInput"
                                                  onkeyup="pressed(event)"
                                                  name="search_terms_or"
                                                  rows="1"
                                                  class="form-control search-query"
                                                  style="resize: vertical;
                                                      max-width: 550px;
                                                      width: 450px !important"
                                                  id="or_search"></textarea>
                                    </div>
                                </div>
                            </div>
                            <!--  GET ANY HELP   -->
                            <div class="form-group">
                                <label for="btsearch"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important"></label>
                                <div class="col-xs-10 controls" style="padding-left: 20px;">
                                    <div class="col-12 controls">
                                        Enter terms, genes, ID numbers in the <b>Search</b> field.
                                        <br>
                                        Use <b>*</b> or <b>?</b> wildcards (Cyp*a?, synap*).
                                        <br>
                                        Use <b>quotes</b> for terms such as <i>"tyrosine kinase"</i>.
                                        <div>
                                            <strong>
                                                <a style="text-decoration: none"
                                                   href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries"
                                                   target="_blank">see more hints</a>
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="and_search"
                                       class="col-xs-1 control-label"
                                       style="padding-left: 0px;
                                            padding-right: 0px;
                                            width: 65px !important">Combined:</label>
                                <div class="col-xs-10 controls" style="padding-left: 20px;">
                                    <div class="col-8 autocomplete">
                                        <textarea id="myInput"
                                                  onkeyup="pressed(event)"
                                                  name="search_terms_and"
                                                  rows="1"
                                                  class="form-control search-query"
                                                  style="resize: vertical;
                                                      max-width: 550px;
                                                      width: 450px !important"
                                                  id="and_search"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="btsearch"
                                       class="col-xs-1 control-label"
                                       style="width: 65px !important"></label>
                                <div class="col-xs-10 controls" style="display: flex; padding-left: 20px;">
                                    <div class="col-2 controls">
                                        <button id="btsearch" class="btn btn-primary form-control">
                                            <span class="glyphicon glyphicon-search"></span> Search
                                        </button>
                                    </div>
                                    <div class="col-2 align-self-end controls" style="padding-left: 20px;">
                                        <button type="button" id="make_default" class="btn form-control info-button">
                                            <span class="glyphicon glyphicon-pushpin"></span> Lock Menu
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!--  SEARCH, MAKE DEFAULT -->
                            <div class="form-group"></div>
                            <input type="hidden" name="accession_id" value="None" class="form-control">
                            <input type="hidden" name="FormID" value="searchResult" class="form-control">
                        </div>
                    </fieldset>
                </form>
            </section>
            <section id="advanced">
                <div class="page-header">
                    <h2>Advanced Commands</h2>
                </div>
                <p>
                    You can also use advanced commands. Copy these simple examples into the Get Any field for single term searches and Combined for searches with multiple terms:
                </p>
                <ul>
                    <li>
                        <b>POSITION=(chr1 25 30)</b> finds genes, markers, or transcripts on
                        chromosome 1 between 25 and 30 Mb.
                    </li>
                    <li>
                        <b>MEAN=(15 16)</b> in the <b>Combined</b> field finds
                        highly expressed genes (15 to 16 log2 units)
                    </li>
                    <li>
                        <b>RANGE=(1.5 2.5)</b> in the <b>Any</b> field finds traits with values with a specified fold-range (minimum = 1).
                        Useful for finding "housekeeping genes" <b>(1.0 1.2)</b> or highly variable molecular assays <b>(10 100)</b>.
                    </li>
                    <li>
                        <b>LRS=(15 1000)</b> or <b>LOD=(2 8)</b> finds all traits with peak LRS or LOD scores between lower and upper limits.
                    </li>
                    <li>
                        <b>LRS=(9 999 Chr4 122 155)</b> finds all traits on Chr 4 from 122 and 155 Mb with LRS scores between 9 and 999.
                    </li>
                    <li>
                        <b>cisLRS=(15 1000 5)</b> or <b>cisLOD=(2 8 5)</b> finds all cis eQTLs with peak LRS or LOD scores between lower and upper limits,
                        with an <b>inclusion</b> zone of 5 Mb around the parent gene.
                    </li>
                    <li>
                        <b>transLRS=(15 1000 5)</b> or <b>transLOD=(2 8 5)</b> finds all trans eQTLs with peak LRS or LOD scores between lower and upper limits,
                        with an <b>exclusion</b> zone of 5 Mb around the parent gene. You can also add a fourth term specifying which chromosome you want the transLRS to be on
                        (for example transLRS=(15 1000 5 7) would find all trans eQTLs with peak LRS on chromosome 7 that is also a trans eQTL with exclusionary zone of 5Mb).
                    </li>
                    <li>
                        <b>POSITION=(Chr4 122 130) cisLRS=(9 999 10)</b>
                        finds all traits on Chr 4 from 122 and 155 Mb with cisLRS scores
                        between 9 and 999 and an inclusion zone of 10 Mb.
                    </li>
                    <li>
                        <b>RIF=mitochondrial</b> searches RNA databases for <a href="https://en.wikipedia.org/wiki/GeneRIF">GeneRIF</a> links.
                    </li>
                    <li>
                        <b>WIKI=nicotine</b> searches <a href="http://gn1.genenetwork.org/webqtl/main.py?FormID=geneWiki">GeneWiki</a> for genes that you or other users have annotated
                        with the word <i>nicotine</i>.
                    </li>
                    <li>
                        <b>GO:0045202</b> searches for synapse-associated genes listed in the
                        <a href="http://amigo.geneontology.org/amigo/medial_search?q=GO%3A0045202">Gene Ontology</a>.
                    </li>
                    <li>
                        <b>RIF=diabetes LRS=(9 999 Chr2 100 105) transLRS=(9 999 10)</b>
                        finds diabetes-associated transcripts with peak <a href="{{ url_for("gn_docs_blueprint.glossary") }}#E">trans eQTLs</a> on Chr 2 between 100 and 105 Mb with LRS
                        scores between 9 and 999.
                    </li>
                </ul>
            </section>
        </div>
        <div class="col-xs-4" style="width: 600px !important;">
            <section id="tutorials">
                <div class="page-header">
                    <h2>Tutorials</h2>
                </div>
                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <strong><a class="uk-link-text" href="/tutorials">Webinars & Courses</a></strong>
                        <br>
                        In-person courses, live webinars and webinar recordings
                        <br>
                        <a href="/tutorials" class="uk-icon-link" uk-icon="laptop" ratio="2"></a>
                    </div>
                    <div>
                        <strong><a class="uk-link-text" href="/tutorials">Tutorials</a></strong>
                        <br>
                        Tutorials: Training materials in HTML, PDF and video formats
                        <br>
                        <a href="/tutorials" class="uk-icon-link" uk-icon="file-text" ratio="2"></a>
                    </div>
                    <div>
                        <strong><a class="uk-link-text" href="/tutorials">Documentation</a></strong>
                        <br>
                        Online manuals, handbooks, fact sheets and FAQs
                        <br>
                        <a href="/tutorials" class="uk-icon-link" uk-icon="album" ratio="2"></a>
                    </div>
                </div>
            </section>
            <section id="news-section">
                <div class="page-header">
                    <h2>News</h2>
                </div>
                <div id="mastadon"
                     style="height: 405px;
                         overflow: scroll;
                         overflow-x: hidden">
                    <a class="mastodon-feed"
                       target="_blank"
                       href="https://genomic.social/@genenetwork"
                       data-toot-limit="5">Genenetwork mastadon</a>
                </div>
                <div align="right">
                    <a href="https://genomic.social/@genenetwork">more news items...</a>
                </div>
            </section>
            <section id="websites">
                <div class="page-header">
                    <h2>Links</h2>
                </div>
                <ul>
                    <li>Github</li>
                    <ul>
                        <li>
                            <a href="https://github.com/genenetwork/genenetwork2">GN2 Source Code</a>
                        </li>
                        <li>
                            <a href="https://github.com/genenetwork/genenetwork3">GN3 Source Code</a>
                        </li>
                        <li> 
                            <a href="https://github.com/genenetwork/genenetwork">GN1 Source Code</a>
                        </li>
                        <li>
                            <a href="https://github.com/genenetwork/sysmaintenance">System Maintenance Code</a>
                        </li>
                    </ul>
                </ul>
                <ul>
                    <li>GeneNetwork 2</li>
                    <ul>
                        <li>
                            <a href="https://genenetwork.org/">Main website</a> at UTHSC
                        </li>
                        <li><a href="https://fallback.genenetwork.org/">Backup</a> instance of GN2</li>
                    </ul>

                </ul>
                <ul>
                    <li>GeneNetwork v1</li>
                    <ul>
                        <li>
                            <a href="http://gn1.genenetwork.org/">Main website</a> at UTHSC
                        </li>
                    </ul>
                </ul>
                <ul>
                    <li>Affiliates</li>
                    <ul>
                        <li>
                            <b><a href="http://gn1.genenetwork.org">GeneNetwork 1</a> at UTHSC</b>
                        </li>
                        <li>
                            <a href="https://systems-genetics.org/">Systems Genetics</a> at EPFL
                        </li>
                        <li>
                            <a href="http://bnw.genenetwork.org/">Bayesian Network Web Server</a> at UTHSC
                        </li>
                        <li>
                            <a href="https://www.geneweaver.org/">GeneWeaver</a>
                        </li>
                        <li>
                            <a href="https://phenogen.org/">PhenoGen</a> at University of Colorado
                        </li>
                        <li>
                            <a href="http://www.webgestalt.org/">WebGestalt</a> at Baylor
                        </li>
                    </ul>
                </ul>
                <ul>
                    <li>GeneNetwork hosted portals</li>
                    <ul>
                        <li>
                            <a href="https://www.opar.io/">Omics Portal For Addiction Research</a>
                        </li>
                        <li>
                            <a href="https://msk.genenetwork.org/">GN4MSK musculoskeletal</a>
                        </li>
                        <li>
                            <a href="https://genecup.org/">GeneCup: Mining PubMed for Gene Relationships using Custom Ontologies</a>
                        </li>
                    </ul>
                </ul>
            </section>
        </div>
    </div>
</div>

{% endblock %}
<script language="javascript"
        type="text/javascript"
        src="{{ url_for('js', filename='uikit/js/uikit-icons.min.js') }}"></script>
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}"
        type="text/javascript"></script>
<script src="{{ url_for('js', filename='bootstrap/js/bootstrap.min.js') }}"
        type="text/javascript"></script>
{% block js %}
<!--Note this is locally built emfed package see source file:https://github.com/sampsyo/emfed -->

<script src="{{ url_for('static', filename='/new/javascript/emfed.bundle.js') }}"
        type="module"></script>
<script src="{{ url_for('static', filename='/new/javascript/dataset_select_menu_orig.js') }}"
        type="text/javascript"></script>
<script>

 $(document).on('submit', '#searchform', function(event){

     event.preventDefault()
     let user_searches = [];
     $(".search-query").each(function() {
         this_search = $(this).val().trim();
         if (this_search != ""){
             user_searches.push(this_search);
         }
     });

     for (i=0; i<user_searches.length; ++i){
         saveBeforeSubmit(user_searches[i])
     }
     $( "#searchform" )[0].submit();

 });
 function pressed(e) {
     // Has the enter key been pressed?
     if ( (window.event ? event.keyCode : e.which) == 13) {
         e.preventDefault();
         // If enter key has been pressed and the search fields are non-empty
         // manually submit the <form>

         if( event.target.value.trim() != "" ) {
             saveBeforeSubmit(event.target.value.trim())
             $("#searchform").prop("action", "/search")
             $("#searchform")[0].submit();
         }
         
     }
 }
 
 
</script>
{% endblock %}