add slider-based filter for molecular weight

Former-commit-id: 6e14ea4702c022d0f04ff83db5da8899df0905c3

ippisite/ippidb/templates/compound_list.html

@@ -38,10 +38,11 @@
        {% include "multiselection_button.html" with label="Disease" param_name="disease" %}
        {% include "multiselection_button.html" with label="Organism" param_name="taxonomy" %}
        {% include "multiselection_button.html" with label="Bound complex" param_name="boundcomplex" %}
+       {% include "slider_button.html" with label="Molecular weight" param_name="molecular_weight" %}
         </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 %}
+            {% if selected_ppis or selected_diseases or selected_taxonomies or selected_boundcomplexes or molecular_weight != molecular_weight_max %}
                 <span>&nbsp;-&nbsp;filters:&nbsp;</span>
                 {% if selected_ppis %}
                     {% for selected in selected_ppis %}
@@ -63,6 +64,9 @@
                         {% include "selected_badge.html" with param_name="boundcomplex" selected=selected %}
                     {% endfor %}
                 {% endif %}
+                {% if molecular_weight != molecular_weight_max %}
+                    {% include "slider_badge.html" with param_name="molecular_weight" param_value=molecular_weight param_label="MW cutoff" %}
+                {% endif %}
             {% endif %}
         </span>
         <div class="dropdown">
@@ -134,5 +138,6 @@
   {% 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 %}
+  {% include "slider_modal.html" with label="Molecular Weight" param_name="molecular_weight" param_min=molecular_weight_min param_max=molecular_weight_max param_value=molecular_weight step='0.01' param_label='Select a cutoff value for the molecular weight of the compounds to be selected'%}
 
 {% endblock %}

ippisite/ippidb/templates/slider_badge.html

+<span class="badge badge-info" style="font-size: 100%">{{ param_label }}: {{ param_value }}
+    <a href="#" style="color: white;" onclick="removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
+</span>&nbsp;

ippisite/ippidb/templates/slider_button.html

+<button type="button" class="btn btn-primary btn-lg m-1" style="width: inherit!important" data-toggle="modal" data-target="#modal-{{ param_name }}">
+  <i class="fa fa-filter"></i>{{ label }}
+</button>

ippisite/ippidb/templates/slider_modal.html

+<div class="modal fade" id="modal-{{ param_name }}" 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">
+        <label for="{{ param_name }}">{{ param_label }}</label>
+        <input id="{{ param_name }}" class="custom-range" type="range" min="{{ param_min }}" max="{{ param_max }}" value="{{ param_value }}" step="{{ step }}" onchange="$('#{{ param_name }}_textvalue').html($('#{{ param_name }}').val());"> <p>Current value: <code id="{{ param_name }}_textvalue">{{ param_value }}</code></p>
+      </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-{{ param_name }}').modal('hide'); modifyUrl('{{ param_name }}',$('#{{ param_name }}').val());">Apply</button>
+      </div>
+    </div>
+  </div>
+</div>

ippisite/ippidb/views.py

 import json
 
+from django.db.models import Max, Min
 from django.shortcuts import render
 from django.http import HttpResponseRedirect, Http404
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
@@ -189,6 +190,13 @@ def compound_list(request):
         compounds = compounds.filter(compoundaction__ppi_id__ppicomplex__complex__protein__organism__id__in=request.GET.getlist('taxonomy'))
     if request.GET.get('boundcomplex'):
         compounds = compounds.filter(compoundaction__ppi_id__ppicomplex__complex__id__in=request.GET.getlist('boundcomplex'))
+    mw_max = Compound.objects.all().aggregate(Max('molecular_weight'))['molecular_weight__max'].to_eng_string()
+    mw_min = Compound.objects.all().aggregate(Min('molecular_weight'))['molecular_weight__min'].to_eng_string()
+    if request.GET.get('molecular_weight'):
+        molecular_weight = request.GET.get('molecular_weight')
+        compounds = compounds.filter(molecular_weight__lte=molecular_weight)
+    else:
+        molecular_weight = mw_max
     selected_families = PpiFamily.objects.filter(id__in=request.GET.getlist('family'))
     families = PpiFamily.objects.exclude(id__in=request.GET.getlist('family'))
     selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
@@ -223,6 +231,7 @@ def compound_list(request):
     for sort_by_option_id in sort_by_option_ids:
         sort_by_options[sort_by_option_id] = {'name': compound_fields[sort_by_option_id], 'order':'ascending', 'id': sort_by_option_id}
         sort_by_options['-'+sort_by_option_id] = {'name': compound_fields[sort_by_option_id], 'order':'descending', 'id': sort_by_option_id}
+    
     fields = request.GET.getlist('fields',['id', 'common_name', 'molecular_weight', 'a_log_p', 'compound_action_pdb_ids', 'biblio_refs'])    
     if 'id' not in fields:
         fields.append('id')
@@ -242,7 +251,10 @@ def compound_list(request):
                                                   'compound_fields': compound_fields,
                                                   'fields': fields,
                                                   'sort_by': sort_by,
-                                                  'sort_by_options': sort_by_options
+                                                  'sort_by_options': sort_by_options,
+                                                  'molecular_weight_max': mw_max,
+                                                  'molecular_weight_min': mw_min,
+                                                  'molecular_weight': molecular_weight
                                                 })
 
 def compound_card(request, compound_id):