Skip to content
Snippets Groups Projects
Commit cd4c378e authored by Hervé MENAGER's avatar Hervé MENAGER
Browse files

more work in compounds query 

now using typeahead to allow quick search in long lists of filters
we do not choose anymore to display or not all the values for a filter


Former-commit-id: 9fa65758c665c96af9388fc7250302281c5fda4d
parent 708d64e3
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/static/css/ippidb-typeahead.css 0 → 100644
+ 67
− 0
View file @ cd4c378e
.typeahead,
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-menu {
width: 422px;
margin: 12px 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 24px;
}
.tt-suggestion:hover {
cursor: pointer;
color: #fff;
background-color: #0097cf;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
ippisite/ippidb/static/css/ippidb.css
+ 1
− 1
View file @ cd4c378e
......@@ -10,4 +10,4 @@ Description: IPPI-DB Theme
@import url("fonts.css");
@import url("admin-session.css");
@import url("main.css");
\ No newline at end of file
@import url("main.css");
ippisite/ippidb/static/typeahead/typeahead.bundle.min.js 0 → 100644
+ 8
− 0
View file @ cd4c378e
This diff is collapsed.
ippisite/ippidb/templates/base.html
+ 27
− 6
View file @ cd4c378e
......@@ -6,17 +6,18 @@
<title>IPPI-DB {% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/ippidb.css">
<link rel="stylesheet" href="/static/css/ippidb-typeahead.css">
<script src="/static/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/typeahead/typeahead.bundle.min.js"></script>
<script defer src="/static/font-awesome/js/fontawesome-all.min.js"></script>
<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(Array.isArray(paramValue)){
......@@ -38,10 +39,30 @@
modifyUrl(paramName, selectedFields);
}
var removeFromSelection = function(paramName, value){
var selectedFields = $('input[name='+ paramName +']:checked').map(function(_, el) { return $(el).val(); }).get();
selectedFields.remove(value);
modifyUrl(paramName, selectedFields);
var url = new URL(location.href);
var selectedValues = url.searchParams.getAll(paramName);
selectedValues.splice(selectedValues.indexOf(value));
modifyUrl(paramName, selectedValues);
}
var multiselectTypeAhead = function(idSearch, selection, onSelect){
var bh = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: selection,
identify: function(obj) { return obj.id; }
});
$('#'+idSearch).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'source'+idSearch,
display: 'name',
source: bh
});
$('#'+idSearch).on('typeahead:select', onSelect);
};
</script>
</head>
......
ippisite/ippidb/templates/multiselection_modal.html
+ 29
− 26
View file @ cd4c378e
......@@ -8,33 +8,36 @@
</button>
</div>
<div class="modal-body">
<div class="bg-info col-12">
<legend>{{ label }}
{% if not all_param_value %}
<a href="#" class="float-right text-light" title="Display all {{ label }}s" onclick="modifyUrl('{{ all_param_name }}',true);">[+]</a>
{% endif %}
{% if all_param_value == "true" %}
<a href="#" class="float-right text-light" title="Show only top 5 {{ label }}s" onclick="modifyUrl('{{ all_param_name }}',null);">[-]</a>
<input type="hidden" name="{{ all_param_name }}" value="{{ all_param_value }}" />
{% endif %}
</legend>
<input id="search-{{ param_name }}" class="typeahead" type="text">
<script>
var selection{{ param_name }} = [
{% for element in unselected_list %}
{id:'{{ element.id }}', name:'{{ element.name }}'},
{% endfor %}
];
var onSelect = function(evt, obj){
$('[name="{{ param_name }}"][value="'+ obj.id +'"]').prop('checked', true);
}
multiselectTypeAhead('search-{{ param_name }}', selection{{ param_name }}, onSelect);
</script>
<div style="max-height: 15em; overflow-y: auto;">
{% 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 }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
{% endfor %}
{% 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 }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
{% endfor %}
</div>
{% 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 }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
{% endfor %}
{% 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 }}" name="{{ param_name }}" style="width: auto; margin-right: 1em;">
{{ element.name }}
</label>
</div>
{% endfor %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
......
ippisite/ippidb/views.py
+ 0
− 16
View file @ cd4c378e
......@@ -181,26 +181,14 @@ 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'))
ppis_all = request.GET.get('ppis_all', None)
diseases_all = request.GET.get('diseases_all', None)
taxonomies_all = request.GET.get('taxonomies_all', None)
boundcomplexes_all = request.GET.get('boundcomplexes_all', None)
selected_ppis = Ppi.objects.filter(id__in=request.GET.getlist('ppi'))
ppis = Ppi.objects.exclude(id__in=request.GET.getlist('ppi'))
if ppis_all is None:
ppis = ppis[:5]
selected_diseases = Disease.objects.filter(id__in=request.GET.getlist('disease'))
diseases = Disease.objects.exclude(id__in=request.GET.getlist('disease'))
if diseases_all is None:
diseases = diseases[:5]
selected_taxonomies = Taxonomy.objects.filter(id__in=request.GET.getlist('taxonomy'))
taxonomies = Taxonomy.objects.exclude(id__in=request.GET.getlist('taxonomy'))
if taxonomies_all is None:
taxonomies = taxonomies[:5]
selected_boundcomplexes = ProteinDomainBoundComplex.objects.filter(id__in=request.GET.getlist('boundcomplex'))
boundcomplexes = ProteinDomainBoundComplex.objects.exclude(id__in=request.GET.getlist('boundcomplex'))
if boundcomplexes_all is None:
boundcomplexes = boundcomplexes[:5]
sort_by_options = ['id', 'molecular_weight', 'a_log_p', 'nb_aromatic_sssr', 'nb_chiral_centers']
sort_by = request.GET.get('sort_by', 'id')
compounds = compounds.order_by(sort_by)
......@@ -227,16 +215,12 @@ def compound_list(request):
'count': count,
'selected_ppis': selected_ppis,
'ppis': ppis,
'ppis_all': ppis_all,
'selected_diseases': selected_diseases,
'diseases': diseases,
'diseases_all': diseases_all,
'selected_taxonomies': selected_taxonomies,
'taxonomies': taxonomies,
'taxonomies_all': taxonomies_all,
'selected_boundcomplexes': selected_boundcomplexes,
'boundcomplexes': boundcomplexes,
'boundcomplexes_all': boundcomplexes_all,
'display': display,
'compound_fields': compound_fields,
'fields': fields,
......
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