continue working on new layout for compound query

Former-commit-id: 13a5f19e1ca5e4c53333500354862a17bf47ffb1

ippisite/ippidb/templates/base.html

@@ -18,21 +18,27 @@
         <script src="/static/js/ippidb.js" type="text/javascript"></script>
 
         <script type="text/javascript">
+            
             var modifyUrl = function(paramName, paramValue){
                 var url = new URL(location.href);
-                if(paramValue!=null){
-                    url.searchParams.set(paramName, paramValue);
-                }else if(Array.isArray(paramValue)){
+                if(Array.isArray(paramValue)){
                     url.searchParams.delete(paramName);
                     paramValue.forEach(function(value){
-                        url.searchParams.append(value);
+                        url.searchParams.append(paramName,value);
                     });
+                } else if (paramValue!=null){
+                    url.searchParams.set(paramName, paramValue);
                 }else{
                     url.searchParams.delete(paramName);
                 }
                 var modifiedUrl = url.toString();
                 window.location = modifiedUrl;
+                $('#loadingModal').modal();
             };
+            var changeSelection = function(paramName){ 
+                var selectedFields = $('input[name='+ paramName +']:checked').map(function(_, el) { return $(el).val(); }).get(); 
+                modifyUrl(paramName, selectedFields); 
+            } 
         </script>
 
     </head>
@@ -136,5 +142,21 @@
                 </div>
             </div>
         </div>
+
+<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Loading...</h5>
+      </div>
+      <div class="modal-body">
+        <div class="progress">
+            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
     </body>
 </html>

ippisite/ippidb/templates/compound_list.html

@@ -29,20 +29,17 @@
 
 <div class="container-fluid">
 <div class="row flex-xl-nowrap">
-  <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
-<form>
-  {% include "multiselection_list_menu.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" all_param_name="ppis_all" all_param_value=ppis_all %}
-  {% include "multiselection_list_menu.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" all_param_name="diseases_all" all_param_value=diseases_all %}
-  {% include "multiselection_list_menu.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" all_param_name="taxonomies_all" all_param_value=taxonomies_all %}
-  {% include "multiselection_list_menu.html" with label="Bound complex" selected_list=selected_boundcomplexes unselected_list=boundcomplexes param_name="boundcomplex" all_param_name="boundcomplexes_all" all_param_value=boundcomplexes_all %}
-  <input type="hidden" name="display" value="{{ display }}" />
-</form>
-</div>
 
-<main class="col-12 col-md-9 col-xl-10 pl-md-5 bd-content" role="main">
+<main class="col-12" role="main">
     <form>
         <div class="row">
-        <span class="col-md-10"><span>{{ count }} compounds</span>
+       {% include "multiselection_button.html" with label="PPI" %}
+       {% include "multiselection_button.html" with label="Disease" %}
+       {% include "multiselection_button.html" with label="Organism" %}
+       {% include "multiselection_button.html" with label="Bound complex" %}
+        </div>
+        <div class="row">
+        <span class="col-md-6"><span>{{ count }} compounds</span>
             {% if selected_ppis or selected_diseases or selected_taxonomies or selected_boundcomplexes %}
                 <span>&nbsp;-&nbsp;filters:&nbsp;</span>
                 {% if selected_ppis %}
@@ -130,4 +127,10 @@
     {% endif %}
   </ul>
 </nav>
+
+  {% include "multiselection_modal.html" with label="PPI" selected_list=selected_ppis unselected_list=ppis param_name="ppi" all_param_name="ppis_all" all_param_value=ppis_all %}
+  {% include "multiselection_modal.html" with label="Disease" selected_list=selected_diseases unselected_list=diseases param_name="disease" all_param_name="diseases_all" all_param_value=diseases_all %}
+  {% include "multiselection_modal.html" with label="Organism" selected_list=selected_taxonomies unselected_list=taxonomies param_name="taxonomy" all_param_name="taxonomies_all" all_param_value=taxonomies_all %}
+  {% include "multiselection_modal.html" with label="Bound complex" selected_list=selected_boundcomplexes unselected_list=boundcomplexes param_name="boundcomplex" all_param_name="boundcomplexes_all" all_param_value=boundcomplexes_all %}
+
 {% endblock %}

ippisite/ippidb/templates/multiselection_list_menu.html → ippisite/ippidb/templates/multiselection_modal.html

+<div class="modal fade" id="modal-{{ label }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">{{ label }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
   <fieldset class="form-group row border border-info m-2">
     <div class="bg-info col-12">
         <legend>{{ label }}
@@ -13,7 +23,7 @@
     {% for element in selected_list  %}
     <div class="form-check col-12">
       <label class="form-check-label">
-        <input id="selected-{{ element.id }}" class="form-check-input text-right" type="checkbox" checked value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
+        <input id="selected-{{ element.id }}" class="form-check-input text-right" type="checkbox" checked value="{{ element.id }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
         {{ element.name }}
       </label>
     </div>
@@ -21,9 +31,17 @@
     {% for element in unselected_list %}
     <div class="form-check col-12">
       <label class="form-check-label">
-        <input class="form-check-input text-right" type="checkbox" value="{{ element.id }}" onchange="this.form.submit()" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
+        <input class="form-check-input text-right" type="checkbox" value="{{ element.id }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
         {{ element.name }}
       </label>
     </div>
     {% endfor %}
   </fieldset>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" onclick="$('#modal-{{ label }}').modal('hide'); changeSelection('{{ param_name }}');">Apply</button>
+      </div>
+    </div>
+  </div>
+</div>