Commit f40703b3 authored by Hervé  MENAGER's avatar Hervé MENAGER
Browse files

fix (once again) pagination + changing filters problem

FIX #117
parent 158a635d
Pipeline #16034 passed with stages
in 9 minutes and 6 seconds
......@@ -5,6 +5,10 @@ class QueryUrl {
this.loadingEl = loadingEl
}
unPage() {
this.url.searchParams.delete('page');
}
modify(paramName, paramValue) {
if (Array.isArray(paramValue)) {
// set multiple values for one parameter
......@@ -40,7 +44,7 @@ class QueryUrl {
go() {
var modifiedUrl = this.url.toString();
window.location = modifiedUrl;
window.location.assign(modifiedUrl);
if (this.loadingEl) {
$('#loadingModal').modal();
}
......
var drawSmiles = function(){
$('canvas[data-smiles]').each(function(){
var drawSmiles = function() {
$('canvas[data-smiles]').each(function() {
var el = this;
// only try to draw if the element is visible in the DOM
if(el.offsetParent!==null){
var options = {width:$(el).attr('width'), height: $(el).attr('height'), bondThickness:1};
console.log('drawing compound for smiles', $(el).attr('data-smiles'), options, el.offsetParent);
if (el.offsetParent !== null) {
var options = { width: $(el).attr('width'), height: $(el).attr('height'), bondThickness: 1 };
var theme = $(el).attr('data-draw-theme') || 'light';
var smilesDrawer = new SmilesDrawer.Drawer(options);
SmilesDrawer.parse($(el).attr('data-smiles'), function(tree) {
......@@ -17,4 +16,4 @@ var drawSmiles = function(){
})
};
window.addEventListener("load",drawSmiles);
window.addEventListener("load", drawSmiles);
\ No newline at end of file
......@@ -267,6 +267,7 @@
var toggleCheckBox = function(id){
var cb = $('#'+id);
queryUrl.unPage();
if(cb.prop('checked')==true){
queryUrl.changeSelection(id,cb.prop('checked'));
}else{
......
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ label }}
<a href="#" style="color: #495057;" onclick="queryUrl.modify('{{ param_name }}',null)"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.unPage(); queryUrl.modify('{{ param_name }}',null)"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
\ No newline at end of file
......@@ -41,7 +41,7 @@
<main class="col-12" role="main">
<h1 class="page-title">Query compounds</h1>
<form class="container-fluid">
<div class="container-fluid">
<div class="m-2">
</div>
<div id="mySidenav" class="sidenav">
......@@ -50,7 +50,7 @@
Search
</h1>
<div class="filter_item" style="display: inline-flex; width:100%;">
<input style="width: 100%;" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Search" onchange="queryUrl.modify('q',$('#q').val());">
<input style="width: 100%;" id="q" value="{{ q | default_if_none:"" }}" class="form-control col-9" type="search" placeholder="Search" onchange="queryUrl.unPage(); queryUrl.modify('q',$('#q').val());">
</div>
<hr>
<h1 class="side_menu_title">
......@@ -158,7 +158,7 @@
</label>
<label class="dropdown-item" onclick="toggleCheckBox('inhitest_av')">
<input type="checkbox" id="inhitest_av" {% if inhitest_av %}checked{% endif %}/> Inhibition tests performed
</label>
changeSe </label>
<label class="dropdown-item" onclick="toggleCheckBox('stabtest_av')">
<input type="checkbox" id="stabtest_av" {% if stabtest_av %}checked{% endif %}/> Stabilisation tests performed
</label>
......@@ -286,7 +286,7 @@
{% endif %}
</div>
</form>
</div>
{% if page_obj %}
<div class="container-fluid" style="overflow-x: auto;">
{% if display == 'v' %}
......
{% extends "base.html" %}
{% load customtags %}
{% block title %}compounds list{% endblock %}
{% block content %}
<div class="inner-wrap">
<nav class="breadcrumb breadNav" role="navigation">
<div class="breadNav-label">You are here</div>
<div aria-labelledby="breadcrumb-label">
{% block breadcrumb %} <a href="/compounds/" class="breadNav-link"> > Query compounds</a>{% endblock %}
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<main class="col-12" role="main">
<form>
<div class="row">
{% include "multiselection_button.html" with label="PPI Family" param_name="family" %}
{% include "multiselection_button.html" with label="PPI" param_name="ppi" %}
{% 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" %}
{% include "slider_button.html" with label="AlogP" param_name="a_log_p" %}
{% include "slider_button.html" with label="H donors" param_name="nb_donor_h" %}
</div>
<div class="row">
<span class="col-md-6"><span>{{ compounds.paginator.count }} compounds</span>
{% if selected_ppis or selected_diseases or selected_taxonomies or selected_boundcomplexes or molecular_weight != molecular_weight_max or a_log_p != a_log_p_max or nb_donor_h != nb_donor_h_max%}
<span>&nbsp;-&nbsp;filters:&nbsp;</span>
{% if selected_ppis %}
{% for selected in selected_ppis %}
{% include "selected_badge.html" with param_name="ppi" selected=selected %}
{% endfor %}
{% endif %}
{% if selected_diseases %}
{% for selected in selected_diseases %}
{% include "selected_badge.html" with param_name="disease" selected=selected %}
{% endfor %}
{% endif %}
{% if selected_taxonomies %}
{% for selected in selected_taxonomies %}
{% include "selected_badge.html" with param_name="taxonomy" selected=selected %}
{% endfor %}
{% endif %}
{% if selected_boundcomplexes %}
{% for selected in selected_boundcomplexes %}
{% 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 %}
{% if a_log_p != a_log_p_max %}
{% include "slider_badge.html" with param_name="a_log_p" param_value=a_log_p param_label="AlogP cutoff" %}
{% endif %}
{% if nb_donor_h != nb_donor_h_max %}
{% include "slider_badge.html" with param_name="nb_donor_h" param_value=nb_donor_h param_label="H donors" %}
{% endif %}
{% endif %}
</span>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="sortMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-sort-amount-down" title="sort by"></i>
</button>
<div class="dropdown-menu" aria-labelledby="sortMenuButto">
{% for sort_by_value, sort_by_entry in sort_by_options.items %}
<a class="dropdown-item {% if sort_by_value == sort_by %}active{% endif %}" href="#" onclick="queryUrl.modify('sort_by','{{ sort_by_value }}')">{{ sort_by_entry.name }} ({{ sort_by_entry.order }})</a>
{% endfor %}
</div>
</div>
<span class="btn-group col-md-2">
<a class="btn btn-default btn-outline-primary {% if display == 'v' %}active{% endif %}" href="#" {% if display != 'v' %}onclick="queryUrl.modify('display', 'v')"{% endif %}>
<i class="fa fa-th" title="Thumbnails"></i>
</a>
<a class="btn btn-default btn-outline-primary {% if display == 'l' %}active{% endif %}" href="#" {% if display != 'l' %}onclick="queryUrl.modify('display', 'l')"{% endif %}>
<i class="fa fa-bars" title="List"></i>
</a>
<a class="btn btn-default btn-outline-primary {% if display == 't' %}active{% endif %}" href="#" {% if display != 't' %}onclick="queryUrl.modify('display', 't')"{% endif %}>
<i class="fa fa-table" title="Table"></i>
</a>
</span>
</div>
</form>
{% if compounds.all %}
<div class="row">
{% if display == 'v' %}
{% for compound in compounds %}
{% include "compound_v_item.html" with compound=compound %}
{% endfor %}
{% elif display == 'l'%}
{% for compound in compounds %}
{% include "compound_l_item.html" with compound=compound %}
{% endfor %}
{% else %}
{% include "compound_t_list.html" with compounds=compounds %}
{% endif %}
</div>
{% else %}
<p>Nothing found there!</p>
{% endif %}
</main>
</div>
</div>
<nav>
<ul class="pagination pagination-sm justify-content-end col-12">
{% if compounds.has_previous %}
<li class="page-item">
<a class="page-link" href="?{% url_replace request 'page' compounds.previous_page_number %}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
{% endif %}
<li class="page-item disabled">
<span class="page-link">Page {{ compounds.number }} of {{ compounds.paginator.num_pages }}.</span>
</li>
{% if compounds.has_next %}
<li class="page-item">
<a class="page-link" href="?{% url_replace request 'page' compounds.next_page_number %}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
{% endif %}
<li class="page-item ml-3">
<div class="input-group input-group-sm">
<input id="pageNumber" type="number" min="1" max="{{compounds.paginator.num_pages}}" step="1" placeholder="page #" style="width: 4em;" aria-label="Page number">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" onclick="queryUrl.modify('page',$('#pageNumber').val())">Go</button>
</div>
</div>
</li>
</ul>
</nav>
{% include "multiselection_modal.html" with label="PPI Family" selected_list=selected_families unselected_list=families param_name="family" all_param_name="families_all" all_param_value=families_all %}
{% 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 %}
{% 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='50' param_label='Select a cutoff value for the molecular weight of the compounds to be selected'%}
{% include "slider_modal.html" with label="AlogP" param_name="a_log_p" param_min=a_log_p_min param_max=a_log_p_max param_value=a_log_p step='1' param_label='Select a cutoff value for the AlogP of the compounds to be selected'%}
{% include "slider_modal.html" with label="H donors" param_name="nb_donor_h" param_min=nb_donor_h_min param_max=nb_donor_h_max param_value=nb_donor_h step='1' param_label='Select a cutoff value for the number of H donors in the compounds to be selected'%}
{% endblock %}
......@@ -61,7 +61,7 @@
</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'); queryUrl.changeSelection('{{ param_name }}');">Apply</button>
<button type="button" class="btn btn-primary" onclick="$('#modal-{{ param_name }}').modal('hide'); queryUrl.unPage(); queryUrl.changeSelection('{{ param_name }}');">Apply</button>
</div>
</div>
</div>
......
{% if values %}
{% for value in values %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ value.name|default:value }}
<a href="#" style="color: #495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ value.id|default:value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.unPage(); queryUrl.removeFromSelection('{{ param_name }}', '{{ value.id|default:value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endfor %}
{% endif %}
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%" title="{{ param_value }}">{{ param_label }}: {% include "compound_smiles_draw.html" with id='similar_to' smile=param_value width='30' height='16' theme="dark"%}
<a href="#" style="color: #495057;" onclick="queryUrl.modify(['{{ param_name }}','sort_by'])"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color: #495057;" onclick="queryUrl.unPage(); queryUrl.modify(['{{ param_name }}','sort_by'])"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ param_label }}: {{ param_value_min }} to {{ param_value_max }}
<a href="#" style="color:#495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color:#495057;" onclick="queryUrl.unPage(); queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
\ No newline at end of file
......@@ -19,7 +19,7 @@
</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'); queryUrl.changeSelection('{{ param_name }}',$('#{{ param_name }}').val());">Apply</button>
<button type="button" class="btn btn-primary" onclick="$('#modal-{{ param_name }}').modal('hide'); queryUrl.unPage(); queryUrl.changeSelection('{{ param_name }}',$('#{{ param_name }}').val());">Apply</button>
</div>
</div>
</div>
......
{% if param_value %}
<span class="badge badge-info selected-filters" style="font-size: 100%">{{ param_value }}
<a href="#" style="color:#495057;" onclick="queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
<a href="#" style="color:#495057;" onclick="queryUrl.unPage(); queryUrl.removeFromSelection('{{ param_name }}', '{{ param_value }}')"><i class="remove fa fa-times-circle"></i></a>
</span>&nbsp;
{% endif %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment