allow changing fields displayed in compounds table (#43 WIP)

Former-commit-id: 0f8faab45eb92f23830f8838cc1048352719034c

ippisite/ippidb/templates/base.html

@@ -23,6 +23,11 @@
                 var url = new URL(location.href);
                 if(paramValue!=null){
                     url.searchParams.set(paramName, paramValue);
+                }else if(Array.isArray(paramValue)){
+                    url.searchParams.delete(paramName);
+                    paramValue.forEach(function(value){
+                        url.searchParams.append(value);
+                    });
                 }else{
                     url.searchParams.delete(paramName);
                 }

ippisite/ippidb/templates/compound_t_list.html

@@ -2,27 +2,106 @@
   <thead>
     <tr>
       <th scope="col">#</th>
+      {% if "common_name" in fields %}
       <th scope="col">Common name</th>
+      {% endif %}
+      {% if "molecular_weight" in fields %}
       <th scope="col">Molecular weight</th>
+      {% endif %}
+      {% if "a_log_p" in fields %}
       <th scope="col">AlogP</th>
+      {% endif %}
+      {% if "compound_action_pdb_ids" in fields %}
       <th scope="col">PDB ligand</th>
+      {% endif %}
+      {% if "mddr_phase" in fields %}
       <th scope="col">MDDR phase</th>
+      {% endif %}
+      {% if "available_tests" in fields %}
       <th scope="col">Available tests</th>
-      <th scope="col">Available publications</th>
+      {% endif %}
+      {% if "biblio_refs" in fields %}
+      <th scope="col">Available publications
+      </th>
+      {% endif %}
+      <button type="button" class="btn btn-primary float-right" style="width: inherit!important" data-toggle="modal" data-target="#selectColumns">
+        <i class="fa fa-columns" title="customize columns"></i>
+      </button>
     </tr>
   </thead>
   <tbody>
     {% for compound in compounds %}
       <tr>
         <th scope="col"><span class="badge badge-dark"><a href="/compound/{{ compound.id }}">{{ compound.id }}</a></span></th>
+      {% if "common_name" in fields %}
         <th scope="col">{{ compound.common_name|default_if_none:"-" }}</th>
+      {% endif %}
+      {% if "molecular_weight" in fields %}
         <th scope="col">{{ compound.molecular_weight}}  g/mol</th>
+      {% endif %}
+      {% if "a_log_p" in fields %}
         <th scope="col">{{ compound.a_log_p }}</th>
+      {% endif %}
+      {% if "compound_action_pdb_ids" in fields %}
         <th scope="col">{% for pdb_id in compound.compound_action_pdb_ids %}{{ pdb_id | default_if_none:""}}{% endfor %}</th>
+      {% endif %}
+      {% if "mddr_phase" in fields %}
         <th scope="col"> ? </th>
+      {% endif %}
+      {% if "available_tests" in fields %}
         <th scope="col"> ? </th>
+      {% endif %}
+      {% if "biblio_refs" in fields %}
         <th scope="col">{{ compound.biblio_refs|length }}</th>
+      {% endif %}
       </tr>
     {% endfor %}
   </tbody>
 </table>
+
+<!-- Modal for selection of table columns to be displayed-->
+<div class="modal fade" id="selectColumns" 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">Table columns</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <label><input type="checkbox" name="field" value="common_name" class="mr-1" {% if 'common_name' in fields %}checked="checked"{% endif %} />Common name</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="molecular_weight" class="mr-1" {% if 'molecular_weight' in fields %}checked="checked"{% endif %} />Molecular Weight</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="a_log_p" class="mr-1" {% if 'a_log_p' in fields %}checked="checked"{% endif %} />AlogP</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="compound_action_pdb_ids" class="mr-1" {% if 'compound_action_pdb_ids' in fields %}checked="checked"{% endif %} />PDB ligands</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="mddr_phase" class="mr-1" {% if 'mddr_phase' in fields %}checked="checked"{% endif %} />MDDR phase</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="available_tests" class="mr-1" {% if 'available_tests' in fields %}checked="checked"{% endif %} />Available tests</label>
+        </div>
+        <div class="row">
+          <label><input type="checkbox" name="field" value="biblio_refs" class="mr-1" {% if 'biblio_refs' in fields %}checked="checked"{% endif %} />Available publications</label>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <script>
+        function changeFieldsSelection(){
+            var selectedFields = $('input[name=field]:checked').map(function(_, el) { return $(el).val(); }).get();
+            modifyUrl('fields', selectedFields);
+        }
+        </script>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" onclick="changeFieldsSelection();">Change columns</button>
+      </div>
+    </div>
+  </div>
+</div>

ippisite/ippidb/views.py

@@ -214,6 +214,8 @@ def compound_list(request):
     display = request.GET.get('display')
     if display not in ['l', 't']:
         display = 'v'
+    compound_fields = {f.name: f.verbose_name for f in Compound._meta.get_fields() if not(f.is_relation)}
+    fields = request.GET.get('fields',['id', 'common_name', 'molecular_weight', 'a_log_p', 'compound_action_pdb_ids', 'biblio_refs'])    
     return render(request, 'compound_list.html', {'compounds': compounds,
                                                   'count': count,
                                                   'selected_ppis': selected_ppis,
@@ -228,7 +230,9 @@ def compound_list(request):
                                                   'selected_boundcomplexes': selected_boundcomplexes,
                                                   'boundcomplexes': boundcomplexes,
                                                   'boundcomplexes_all': boundcomplexes_all,
-                                                  'display': display
+                                                  'display': display,
+                                                  'compound_fields': compound_fields,
+                                                  'fields': fields
                                                 })
 
 def compound_card(request, compound_id):