Re-locate gnqa search box to gnqa.html.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>
Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>

2 files changed, 202 insertions, 210 deletions

diff --git a/gn2/wqflask/templates/base.html b/gn2/wqflask/templates/base.html
index 855eead8..a036f4d2 100644
--- a/gn2/wqflask/templates/base.html
+++ b/gn2/wqflask/templates/base.html
@@ -21,8 +21,8 @@
         <link rel="stylesheet" href="/static/new/css/autocomplete.css" />
         <link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='fontawesome/css/font-awesome.min.css') }}" />
 
-        {% block css %} 
-       {% endblock %}
+        {% block css %}
+        {% endblock %}
         <style>
          .form-rounded {
              border-radius: 1rem;
@@ -33,7 +33,7 @@
          table.dataTable thead .sorting_desc {
              background-image: url({{ url_for("js", filename="DataTables/images/sort_desc_disabled.png") }});
          }
-	 .global_search_input{
+         .global_search_input{
              padding:9px 8px;
              text-decoration: none;
              border: none;
@@ -43,42 +43,21 @@
          .global_search_input:focus{
              outline: none;
          }
-	 .btn-stc {
+         .btn-stc {
              padding:9px 8px;
-
-             border-left:none;
-
-             border-radius:0 40px 40px 0;
-
-             cursor: pointer;
-
-             height: 40px;
+	     border-left:none;
+	     border-radius:0 40px 40px 0;
+	     cursor: pointer;
+	     height: 40px;
              width: 64px;
              margin:0;
              border:1px solid #d3d3d3;
              background-color: white;
-	     position: absolute;
-	     top:0;
+             position: absolute;
+             top:0;
              left: 100%;
-	     right: 0;
-	     border-left: none;
-	 }
-	 .search-hist-btn{
-             padding:15px;
-
-             margin: 0 auto;
-             border-bottom: 1px solid #ccc;
-         }
-         .search-hist-btn a:hover {
-	     text-decoration: None;
-             padding:5px;
-             border-radius: 10px;
-             color:blue;
-             cursor:pointer;
-         }
-	 .search-hist-btn a {
-             font-weight: bold;
-             color:#000;
+             right: 0;
+             border-left: none;
          }
 	</style>
     </head>
@@ -184,173 +163,128 @@
                             </a>
                         </li>
                         {%endif%}
-                        <!--
-                             <li style="margin-left: 20px;">
-                             <a href="http://gn2-staging.genenetwork.org" style="font-weight: bold;" >Use Staging Branch</a>
-                             </li>
-                        -->
                     </ul>
                 </div>
             </div>
         </div>
         <div class="container-fluid" style="width: 100%; min-width: 650px; position: relative;background-color: #d5d5d5; height: 100px;">
-            <form id="gnqna_search_home" method="POST" action="/gnqna" style="display:none;width: 100%;">
-
-                <!--- init gnqa codebase here -->
-                <button type="button"  data-toggle="modal" data-target=".bd-example-modal-lg" style="border:none;text-decoration:underline;outline: none;padding:5px;background-color:  #d5d5d5;margin-left: 30px;">
-                    <i class="fa fa-history fa-2x" aria-hidden="true" title="Search History"></i>
-                </button>
-
-
-                <div  style="width: 100%; display: flex;justify-content: space-evenly;">
-
-                    <input  id="gnqna_search_home_input" style="width:50vw" type="text" autocomplete="off"
-                            required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="querygnqa">
-
-                </div>
-
 
-                <div class="modal fade  bd-example-modal-lg " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
-                    <div class="modal-dialog modal-lg" role="document" >
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h2 class="modal-title" id="exampleModalLabel">Your Search History</h2>
+            {% block search %}
+            <form method="get" action="/gsearch" id="globalsearchform">
+		<div class="form-group">
+                    <div class="controls">
+			<select name="type">
+                            <option value="gene">Genes / Molecules</option>
+                            <option value="phenotype" {% if type=="phenotype" %}selected{% endif %}>Phenotypes</option>
+			</select>
+			<div class="col-8  autocomplete" style="margin-left: 30px;margin-right: 10px;">
+                            <input autocomplete="off" class="global_search_input" id="term" style="width:45vw" type="text" required placeholder="Enter you search term here (ex: cytochrome AND P450)" name="terms">
 
-                            </div>
-                            <div class="modal-body">
-                                <div>
-                                    {% if prev_queries %}
-                                    <div>
-                                        {% for search in prev_queries[:8] %}
-                                        <div class="search-hist-btn" style="display:flex;justify-content: space-between;align-items: center;">
-                                            <form  class="search-hist-btn-form" method="GET" data-link="{{search}}">
-                                                <a  class="search-hist-btn-link" data-link="{{search}}">{{search}}</a>
-                                            </form>
-                                        </div>
-                                        {% endfor %}
-                                    </div>
-                                    {% endif %}
-                                </div>
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-danger " style="color:white" >Delete All</button>
-                                <button type="button" class="btn btn-primary" data-dismiss="modal" style="color:white">Cancel</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+			    <button   type="submit" class="btn-stc" style="position: absolute;  background-color: #336699"><i class="fa fa-search" title="Search " style="color:white;"></i></button>
+			</div>
+			<!-- todo fix text overlap for this;;responsiveness-->
 
-                <form method="get" action="/gsearch" id="globalsearchform">
-                    <div class="form-group">
-                        <div class="controls">
-                            <select name="type">
-                                <option value="gene">Genes / Molecules</option>
-                                <option value="phenotype" {% if type=="phenotype" %}selected{% endif %}>Phenotypes</option>
-                            </select>
-                            <div class="col-8  autocomplete" style="margin-left: 30px;margin-right: 10px;">
-                                <input autocomplete="off" class="global_search_input" id="term" style="width:45vw" type="text" required placeholder="Enter you search term here (ex: cytochrome AND P450)" name="terms">
+			<span style="padding: 5px;margin-left: 65px;" id="gnqna_home">
+                            <a href="/gnqna">GNQA Search</a>
+			</span>
 
-                                <button   type="submit" class="btn-stc" style="position: absolute;  background-color: #336699"><i class="fa fa-search" title="Search " style="color:white;"></i></button>
-                            </div>
+			<span  style="padding: 5px;margin-left: 65px;" >
+                            <a style="text-decoration: none" target="_blank" href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries">
+                                <i  style="text-align: center;color:#336699;;" class="fa fa-question-circle fa-2x" title="see more search hints" aria-hidden="true"></i>
+                            </a>
+			</span>
+		    </div>
+		</div>
+	    </form>
+            {% endblock %}
 
-			    <span style="padding: 5px;margin-left: 65px;" id="gnqna_home">
-                                <a href="/gnqna">GNQA Search</a>
-                            </span>
+            {% block content %}
+            {% endblock %}
 
-                            <span  style="padding: 5px;margin-left: 65px;" >
-                                <a style="text-decoration: none" target="_blank" href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries">
-                                    <i  style="text-align: center;color:#336699;;" class="fa fa-question-circle fa-2x" title="see more search hints" aria-hidden="true"></i>
+            <footer class="footer">
+                <div class="row" style="margin: 10px; width: 100%; min-width: 1200px;">
+                    <div class="col-xs-6">
+                        <p>Web services initiated January, 1994 as
+                            <a href="http://www.ncbi.nlm.nih.gov/pubmed?term=8043953">
+                                The Portable Dictionary of the Mouse Genome
+                            </a>; June 15, 2001 as <a href="https://www.ncbi.nlm.nih.gov/pubmed/15043217">WebQTL</a>; and Jan 5, 2005 as GeneNetwork.
+                        </p>
+                        <p>
+                            This site is currently operated by
+                            <a href="mailto:rwilliams@uthsc.edu">Rob Williams</a>,
+                            <a href="https://thebird.nl/">Pjotr Prins</a>,
+                            <a href="http://www.senresearch.org">Saunak Sen</a>,
+                            <a href="mailto:zachary.a.sloan@gmail.com">Zachary Sloan</a>,
+                            <a href="mailto:acenteno@uthsc.edu">Arthur Centeno</a>,
+                            and <a href="mailto:bonfacemunyoki@gmail.com">Bonface Munyoki</a>.
+                        </p>
+                        <p>Design and code by Pjotr Prins, Shelby Solomon, Zach Sloan, Arthur Centeno, Christan Fischer, Bonface Munyoki, Danny Arends, Arun Isaac, Alex Mwangi, Fred Muriithi, Sam Ockman, Lei Yan, Xiaodong Zhou, Christian Fernandez,
+                            Ning Liu, Rudi Alberts, Elissa Chesler, Sujoy Roy, Evan G. Williams, Alexander G. Williams, Kenneth Manly, Jintao Wang, Robert W. Williams, and
+                            <a href="/credits">colleagues</a>.</p>
+                        <br />
+                        <p>GeneNetwork support from:</p>
+                        <ul>
+                            <li>
+                                <a href="http://citg.uthsc.edu">
+                                    The UT Center for Integrative and Translational Genomics
                                 </a>
-                            </span>
-                        </div>
+                            </li>
+                            <li>
+                                <a href="https://www.nigms.nih.gov/">NIGMS</a>
+                                Systems Genetics and Precision Medicine Project (R01 GM123489, 2017-2026)
+                            </li>
+                            <li>
+                                <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2118709">NSF</a>
+                                Panorama: Integrated Rack-Scale Acceleration for Computational Pangenomics
+                                (PPoSS 2118709, 2021-2016)
+                            </li>
+                            <li>
+                                <a href="https://www.drugabuse.gov/">NIDA</a>
+                                NIDA Core Center of Excellence in Transcriptomics, Systems Genetics, and the Addictome (P30 DA044223, 2017-2022)
+                            </li>
+                            <li>
+                                <a href="http://www.nia.nih.gov/">NIA</a>
+                                Translational Systems Genetics of Mitochondria, Metabolism, and Aging (R01AG043930, 2013-2018)
+                            </li>
+                            <li>
+                                <a href="https://www.ohsu.edu/iniastress-consortium">NIAAA</a>
+                                Integrative Neuroscience Initiative on Alcoholism (U01 AA016662, U01 AA013499, U24 AA013513, U01 AA014425, 2006-2017)
+                            </li>
+                            <li>
+                                <a href="http://www.drugabuse.gov/">NIDA</a>, <a href="http://www.nimh.nih.gov/">NIMH</a>, and <a href="http://www.niaaa.nih.gov/">NIAAA</a>
+                                (P20-DA 21131, 2001-2012)
+                            </li>
+                            <li>
+                                NCI <a href="http://emice.nci.nih.gov/">MMHCC</a> (U01CA105417), NCRR, <span class="broken_link test" href="http://www.birncommunity.org/">BIRN</span>, (U24 RR021760)
+                            </li>
+                        </UL>
+                        <p>Published in
+                            <a href="http://joss.theoj.org/papers/10.21105/joss.00025"><img src="https://camo.githubusercontent.com/846b750f582ae8f1d0b4f7e8fee78bed705c88ba/687474703a2f2f6a6f73732e7468656f6a2e6f72672f7061706572732f31302e32313130352f6a6f73732e30303032352f7374617475732e737667" alt="JOSS" data-canonical-src="http://joss.theoj.org/papers/10.21105/joss.00025/status.svg" style="max-width:100%;"></a>
+                        </p>
+                        <p>
+                            Development and source code on <a href="https://github.com/genenetwork/">github</a> with <a href="https://issues.genenetwork.org/">issue tracker</a> and <a href="https://github.com/genenetwork/genenetwork2/blob/master/README.md">documentation</a>.
+                            {% if version: %}
+                            <p><small>GeneNetwork {{ version }}</small></p>
+                            {% endif %}
+                            <p> It took the server {{ g.request_time() }} seconds to process this page.</p>
                     </div>
-                </form>
-                {% block content %}
-                {% endblock %}
-                <footer class="footer">
-                    <div class="row" style="margin: 10px; width: 100%; min-width: 1200px;">
-                        <div class="col-xs-6">
-                            <p>Web services initiated January, 1994 as
-                                <a href="http://www.ncbi.nlm.nih.gov/pubmed?term=8043953">
-                                    The Portable Dictionary of the Mouse Genome
-                                </a>; June 15, 2001 as <a href="https://www.ncbi.nlm.nih.gov/pubmed/15043217">WebQTL</a>; and Jan 5, 2005 as GeneNetwork.
-                            </p>
-                            <p>
-                                This site is currently operated by
-                                <a href="mailto:rwilliams@uthsc.edu">Rob Williams</a>,
-                                <a href="https://thebird.nl/">Pjotr Prins</a>,
-                                <a href="http://www.senresearch.org">Saunak Sen</a>,
-                                <a href="mailto:zachary.a.sloan@gmail.com">Zachary Sloan</a>,
-                                <a href="mailto:acenteno@uthsc.edu">Arthur Centeno</a>,
-                                and <a href="mailto:bonfacemunyoki@gmail.com">Bonface Munyoki</a>.
-                            </p>
-                            <p>Design and code by Pjotr Prins, Shelby Solomon, Zach Sloan, Arthur Centeno, Christan Fischer, Bonface Munyoki, Danny Arends, Arun Isaac, Alex Mwangi, Fred Muriithi, Sam Ockman, Lei Yan, Xiaodong Zhou, Christian Fernandez,
-                                Ning Liu, Rudi Alberts, Elissa Chesler, Sujoy Roy, Evan G. Williams, Alexander G. Williams, Kenneth Manly, Jintao Wang, Robert W. Williams, and
-                                <a href="/credits">colleagues</a>.</p>
-                            <br />
-                            <p>GeneNetwork support from:</p>
-                            <ul>
-                                <li>
-                                    <a href="http://citg.uthsc.edu">
-                                        The UT Center for Integrative and Translational Genomics
-                                    </a>
-                                </li>
-                                <li>
-                                    <a href="https://www.nigms.nih.gov/">NIGMS</a>
-                                    Systems Genetics and Precision Medicine Project (R01 GM123489, 2017-2026)
-                                </li>
-                                <li>
-                                    <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2118709">NSF</a>
-                                    Panorama: Integrated Rack-Scale Acceleration for Computational Pangenomics
-                                    (PPoSS 2118709, 2021-2016)
-                                </li>
-                                <li>
-                                    <a href="https://www.drugabuse.gov/">NIDA</a>
-                                    NIDA Core Center of Excellence in Transcriptomics, Systems Genetics, and the Addictome (P30 DA044223, 2017-2022)
-                                </li>
-                                <li>
-                                    <a href="http://www.nia.nih.gov/">NIA</a>
-                                    Translational Systems Genetics of Mitochondria, Metabolism, and Aging (R01AG043930, 2013-2018)
-                                </li>
-                                <li>
-                                    <a href="https://www.ohsu.edu/iniastress-consortium">NIAAA</a>
-                                    Integrative Neuroscience Initiative on Alcoholism (U01 AA016662, U01 AA013499, U24 AA013513, U01 AA014425, 2006-2017)
-                                </li>
-                                <li>
-                                    <a href="http://www.drugabuse.gov/">NIDA</a>, <a href="http://www.nimh.nih.gov/">NIMH</a>, and <a href="http://www.niaaa.nih.gov/">NIAAA</a>
-                                    (P20-DA 21131, 2001-2012)
-                                </li>
-                                <li>
-                                    NCI <a href="http://emice.nci.nih.gov/">MMHCC</a> (U01CA105417), NCRR, <span class="broken_link test" href="http://www.birncommunity.org/">BIRN</span>, (U24 RR021760)
-                                </li>
-                            </UL>
-                            <p>Published in
-                                <a href="http://joss.theoj.org/papers/10.21105/joss.00025"><img src="https://camo.githubusercontent.com/846b750f582ae8f1d0b4f7e8fee78bed705c88ba/687474703a2f2f6a6f73732e7468656f6a2e6f72672f7061706572732f31302e32313130352f6a6f73732e30303032352f7374617475732e737667" alt="JOSS" data-canonical-src="http://joss.theoj.org/papers/10.21105/joss.00025/status.svg" style="max-width:100%;"></a>
-                            </p>
-                            <p>
-                                Development and source code on <a href="https://github.com/genenetwork/">github</a> with <a href="https://issues.genenetwork.org/">issue tracker</a> and <a href="https://github.com/genenetwork/genenetwork2/blob/master/README.md">documentation</a>.
-                                {% if version: %}
-                                <p><small>GeneNetwork {{ version }}</small></p>
-                                {% endif %}
-                                <p> It took the server {{ g.request_time() }} seconds to process this page.</p>
-                        </div>
-                        <div class="col-xs-2">
-                            <a href="http://www.python.org/" target="_blank">
-                                <img src="/static/new/images/PythonLogo.png" alt="Python Powered" border="0">
-                            </a>
-                            <a href="http://www.neuinfo.org" target="_blank">
-                                <img src="/static/new/images/Nif.png" alt="Registered with Nif" border="0">
-                            </a>
-                        </div>
+                    <div class="col-xs-2">
+                        <a href="http://www.python.org/" target="_blank">
+                            <img src="/static/new/images/PythonLogo.png" alt="Python Powered" border="0">
+                        </a>
+                        <a href="http://www.neuinfo.org" target="_blank">
+                            <img src="/static/new/images/Nif.png" alt="Registered with Nif" border="0">
+                        </a>
                     </div>
-                </footer>
+                </div>
+	    </footer>
                 <!--http://stackoverflow.com/questions/14045515/how-can-i-reuse-one-bootstrap-modal-div-->
                 <!-- Modal -->
                 <div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                    <div class="modal-body">
-                        <p>.</p>
-                    </div>
+                <div class="modal-body">
+                    <p>.</p>
                 </div>
+		</div>
                 <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>
                 <script src="/static/new/javascript/search_autocomplete.js"></script>
@@ -367,10 +301,6 @@
                 <script type="text/javascript">
                  $(document).ready(function() {
 
-                     $("#btn-hist-gnqa").on("click",function() {
-                         $("#exampleModal").modal("show")
-                     })
-
                      const urlParams = new  URLSearchParams(window.location.search)
                      let term = urlParams.get("terms")
 
@@ -418,12 +348,6 @@
                      let timeToLoad = document.createElement("p");
                      timeToLoad.innerHTML = "It took your browser " + ((Date.now() - pageLoadStart) / 1000) + " second(s) to render this page";
                      document.querySelector("footer .row .col-xs-6").appendChild(timeToLoad);
-                     $(".search-hist-btn-form").each(function(
-                         let item = $(this);
-                         item.on("click", (e) = {
-                             item.attr("action", `/gnqna/hist/search/${item.data("link")}`).submit();
-                         })
-                     ));
                 </script>
     </body>
 </html>
diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html
index b16e2d2e..21a396eb 100644
--- a/gn2/wqflask/templates/gnqa.html
+++ b/gn2/wqflask/templates/gnqa.html
@@ -1,9 +1,6 @@
 {% extends "base.html" %}
 {% block title %}GNQA{% endblock %}
 
-{% block content %} <!-- Start of body -->
-
-
 {% block css %}
 <link rel="stylesheet" type="text/css" href="/static/new/css/llm.css">
 <style>
@@ -18,14 +15,78 @@
      background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center;
      z-index: 10000;
  }
-
  .gnqa-copy p {
      font-size: 16px;
      line-height: 1.5;
  }
+ .search-hist-btn{
+     padding:15px;
+
+     margin: 0 auto;
+     border-bottom: 1px solid #ccc;
+ }
+ .search-hist-btn a:hover {
+     text-decoration: None;
+     padding:5px;
+     border-radius: 10px;
+     color:blue;
+     cursor:pointer;
+ }
+ .search-hist-btn a {
+     font-weight: bold;
+     color:#000;
+ }
+ #gnqna_search_home input{
+     min-width: 25em;
+ }
 </style>
 {% endblock %}
 
+{% block search %}
+<form class="row" id="gnqna_search_home" method="POST" action="/gnqna">
+    <!--- init gnqa codebase here -->
+    <div class="col-sm-1">
+	<button type="button" data-toggle="modal" data-target=".bd-example-modal-lg" class="btn btn-link btn-sm ">
+            <i class="fa fa-history fa-2x" aria-hidden="true" title="Search History"></i>
+	</button>
+    </div>
+
+	<input class="col-sm-6 text-center" id="gnqna_search_home_input" type="text" autocomplete="off"
+               required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="querygnqa"/>
+</form>
+{% endblock %}
+
+<div class="modal fade  bd-example-modal-lg " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg" role="document" >
+		<div class="modal-content">
+                    <div class="modal-header">
+			<h2 class="modal-title" id="exampleModalLabel">Your Search History</h2>
+
+                    </div>
+                    <div class="modal-body">
+			<div>
+                            {% if prev_queries %}
+                            <div>
+				{% for search in prev_queries[:8] %}
+				<div class="search-hist-btn" style="display:flex;justify-content: space-between;align-items: center;">
+                                    <form  class="search-hist-btn-form" method="GET" data-link="{{search}}">
+					<a  class="search-hist-btn-link" data-link="{{search}}">{{search}}</a>
+                                    </form>
+				</div>
+				{% endfor %}
+                            </div>
+                            {% endif %}
+			</div>
+                    </div>
+                    <div class="modal-footer">
+			<button type="button" class="btn btn-danger " style="color:white" >Delete All</button>
+			<button type="button" class="btn btn-primary" data-dismiss="modal" style="color:white">Cancel</button>
+                    </div>
+		</div>
+            </div>
+</div>
+
+{% block content %} <!-- Start of body -->
 <section class="container-fluid">
 
     <div id="loader"></div>
@@ -55,23 +116,30 @@
 <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>
 <script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
+     $("#btn-hist-gnqa").on("click",function() {
+	 $("#exampleModal").modal("show")
+     });
+
+     $(".search-hist-btn-form").each(function(){
+	 let item = $(this);
+	 item.on("click", (e) => {
+	     item.attr("action", `/gnqna/hist/search/${item.data("link")}`).submit();
+	 })
+     });
      $("#gnqna_search").keypress(function(event) {
-         if (event.keyCode === 13) {
-             $('#gnqna_form').submit();
-             let spinner = $("#loader")
-             spinner.show()
-         }
-     })
-     $('#globalsearchform').hide()
-     $('#gnqna_search_home').show()
+	 if (event.keyCode === 13) {
+	     $('#gnqna_form').submit();
+	     let spinner = $("#loader")
+	     spinner.show()
+	 }
+     });
      $('footer').hide()
      $("#gnqna_search_home_input").keypress(function(event) {
-         if (event.keyCode === 13) {
-             console.log("clicked this button")
-             $('#gnqna_search_home').submit();
-             let spinner = $("#loader")
-             spinner.show();
-         }
+	 if (event.keyCode === 13) {
+	     $('#gnqna_search_home').submit();
+	     let spinner = $("#loader")
+	     spinner.show();
+	 }
      })
  });
 </script>