Skip to content

Commit 7c84e0e

Browse files
authored
Merge pull request #367 from ImagingDataCommons/idc-test-sp
MVP
2 parents 692b3f4 + 25f81cb commit 7c84e0e

File tree

3 files changed

+118
-23
lines changed

3 files changed

+118
-23
lines changed

static/css/search.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,28 @@ body {
164164
.tooltip_ex:hover .tooltiptext_ex {
165165
visibility: visible; }
166166

167+
168+
169+
.tooltip_info .tooltiptext_info {
170+
visibility: hidden;
171+
width: 500px;
172+
background-color: black;
173+
color: #fff;
174+
text-align: center;
175+
border-radius: 6px;
176+
padding: 5px 0;
177+
position: absolute;
178+
z-index: 1; }
179+
180+
.tooltip_info:hover .tooltiptext_info {
181+
visibility: visible; }
182+
183+
.tooltip_rhs {
184+
right: 20px;
185+
}
186+
187+
188+
167189
.spinner {
168190
position: fixed;
169191
width: 100%;

static/js/image_search.js

Lines changed: 87 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
9595
if (reset) {
9696
strt = $('#' + slideDiv).slider("option", "min");
9797
end = $('#' + slideDiv).slider("option", "max");
98+
$('#' + slideDiv).removeClass('used');
99+
}
100+
else{
101+
$('#' + slideDiv).addClass('used');
98102
}
99103

100104
vals = [strt, end];
@@ -415,15 +419,15 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
415419
$('.'+graphClass).animate({height: height}, 800);
416420
};
417421

418-
window.addNone = function(elem, parStr)
422+
window.addNone = function(elem, parStr, updateNow)
419423
{
420424
var id = parStr+$(elem).parent()[0].id+"_btw";
421425

422426
if (elem.checked){
423427
if (!(id in window.filterObj)) {
424-
window.filterObj[id] = new Object();
428+
window.filterObj[id] = new Array();
425429
}
426-
window.filterObj[id]['none'] = true;
430+
window.filterObj[id]['none'] = true;_
427431
}
428432

429433
else{
@@ -441,7 +445,10 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
441445
var slideNm = $(elem).parent()[0].id+"_slide";
442446
//updatePlotBinsForSliders(slideNm);
443447
mkFiltText();
444-
updateFacetsData(true);
448+
449+
if (updateNow) {
450+
updateFacetsData(true);
451+
}
445452
}
446453

447454
var updatePlotBinsForSliders = function(slideName){
@@ -498,13 +505,13 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
498505
position: 'absolute',
499506
top: -25,
500507
left: -5,
501-
}).hide();
508+
});
502509

503510
var tooltipR = $('<div class="slide_tooltip slide_tooltipB tooltipR" />').text('stuff').css({
504511
position: 'absolute',
505512
top: 20,
506513
right: -5,
507-
}).hide();
514+
});
508515

509516

510517
var labelMin = $('<div class="labelMin"/>').text(min).css({
@@ -537,13 +544,13 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
537544
nm.push(divName);
538545
var filtName = nm.join('.') + '_btw';
539546

540-
$('#' + divName).append('<div id="' + slideName + '"></div> <input id="' + inpName + '" type="text" value="' + strtInp + '" style="display:none"> <button class="reset"" style="display:block;margin-top:18px" onclick=\'setSlider("' + slideName + '",true,0,0,' + String(isInt) + ', true)\'>Reset</button>');
547+
$('#' + divName).append('<div id="' + slideName + '"></div> <input id="' + inpName + '" type="text" value="' + strtInp + '" style="display:none"> <button class="reset"" style="display:block;margin-top:18px" onclick=\'setSlider("' + slideName + '",true,0,0,' + String(isInt) + ', true)\'>Clear Slider</button>');
541548
$('#'+slideName).append(labelMin);
542-
/*
549+
543550
if (wNone){
544-
$('#' + divName).append( '<input type="checkbox" onchange="addNone(this, \''+parStr+'\')"> None' );
551+
$('#' + divName).append( '<input type="checkbox" data-attr-par="'+parStr+'" class="noneBut" onchange="addNone(this, \''+parStr+'\', true)"> None' );
545552
}
546-
*/
553+
547554

548555
$('#' + slideName).slider({
549556
values: [min, max],
@@ -557,12 +564,13 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
557564

558565
$(this).find('.slide_tooltip').each( function(index){
559566
$(this).text( ui.values[index].toString() );
560-
$(this).show();
567+
561568
});
562569

563570
},
564571

565572
stop: function (event, ui) {
573+
$('#' + slideName).addClass('used');
566574
var val = $('#' + inpName)[0].value;
567575
var valArr = val.split('-');
568576
var attVal = [];
@@ -590,11 +598,11 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
590598
$('#' + slideName).hover(
591599
function(){
592600
//$(this).removeClass("ui-state-active");
593-
$(this).parent().find('.slide_tooltip').show();
601+
$(this).parent().find('.slide_tooltip');
594602
}
595603
,
596604
function(){
597-
$(this).parent().find('.slide_tooltip').hide();
605+
$(this).parent().find('.slide_tooltip');
598606
}
599607
);
600608

@@ -1357,13 +1365,21 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
13571365
nmA = ckey.split('.');
13581366
nm=nmA[nmA.length-1];
13591367
if (nm.endsWith('_btw')){
1360-
if ('rng' in window.filterObj[ckey]){
1368+
1369+
if ( ('rng' in window.filterObj[ckey]) && ('none' in window.filterObj[ckey]) ){
1370+
filtObj[nm] = [window.filterObj[ckey]['rng'],'None']
1371+
}
1372+
1373+
else if ('rng' in window.filterObj[ckey]){
13611374
filtObj[nm] = window.filterObj[ckey]['rng']
13621375
}
1363-
if ('none' in window.filterObj[ckey]){
1376+
else if ('none' in window.filterObj[ckey]){
13641377
noneKey=nm.replace('_btw','');
1365-
filtObj[noneKey]='None';
1378+
filtObj[noneKey]=['None'];
13661379
}
1380+
1381+
1382+
13671383
}
13681384
else {
13691385
filtObj[nm] = window.filterObj[ckey];
@@ -1382,8 +1398,8 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
13821398
var url = '/explore/?counts_only=True&is_json=true&is_dicofdic=True&data_source_type=' + ($("#data_source_type option:selected").val() || 'S');
13831399
var parsedFiltObj=parseFilterObj();
13841400
if (Object.keys(parsedFiltObj).length > 0) {
1385-
1386-
url += '&filters=' + JSON.stringify(parsedFiltObj);
1401+
url += '&filters=' + JSON.stringify(parsedFiltObj);
1402+
//url += '&filters='+JSON.stringify({"age_at_diagnosis":['None' ]});
13871403
}
13881404

13891405
url = encodeURI(url);
@@ -1552,9 +1568,26 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
15521568
var isSlider = $('#'+filterId).find('#'+filterId+'_slide').length>0 ? true : false;
15531569
if (isSlider) {
15541570
var maxx=$('#' + filterId).data('attr-max');
1555-
if(label == 'None') {
1571+
var minx=$('#' + filterId).data('attr-min');
15561572

1557-
} else {
1573+
1574+
if ($('#'+filterId).find('.noneBut').length>0) {
1575+
var inpElem = $('#'+filterId).find('.noneBut')[0];
1576+
}
1577+
1578+
if(label == 'None') {
1579+
setSlider(filterId+"_slide", true, 0, maxx, true,false);
1580+
//var inpElem = $('#'+filterId).find('.noneBut')[0];
1581+
inpElem.checked=true;
1582+
var parStr = $(inpElem).data("attr-par");
1583+
window.addNone(inpElem,parStr,true);
1584+
}
1585+
else {
1586+
if (! (typeof(inpElem)==="undefined")){
1587+
inpElem.checked=false;
1588+
var parStr = $(inpElem).data("attr-par");
1589+
window.addNone(inpElem,parStr,false);
1590+
}
15581591
var selArr = label.split(' To ');
15591592
var strt = parseInt((selArr[0] === '*') ? '0' : selArr[0]);
15601593
var end = parseInt((selArr[1] === '*') ? maxx : selArr[1]);
@@ -1862,6 +1895,40 @@ require(['jquery', 'underscore', 'jquerydt','jqueryui', 'bootstrap','base'],
18621895

18631896
var updateFilters = function (filterCat, dic, dataFetched) {
18641897
var hasSlider = ( $('#'+filterCat+'_slide').length>0 );
1898+
1899+
/*
1900+
if (hasSlider){
1901+
min=0;
1902+
max=0;
1903+
if (dic['filt'].hasOwnProperty('min_max') && (dic['filt']['min_max'].hasOwnProperty('min')) ) {
1904+
min = Math.floor(dic['filt']['min_max']['min']);
1905+
max = Math.ceil(dic['filt']['min_max']['max']);
1906+
}
1907+
1908+
1909+
1910+
$('#'+filterCat+'_slide').slider('option','min',min);
1911+
$('#'+filterCat+'_slide').slider('option','max', max);
1912+
1913+
vals = $('#'+filterCat+'_slide').slider('option','values');
1914+
if ( (vals[0] < min) || !( $('#'+filterCat+'_slide').hasClass('used') )){
1915+
vals[0] = min;
1916+
}
1917+
if ((vals[1]> max) || !( $('#'+filterCat+'_slide').hasClass('used') )){
1918+
vals[1] = max;
1919+
}
1920+
$('#'+filterCat+'_slide').slider('option','values', vals);
1921+
$('#'+filterCat+'_slide').find('.tooltipL').text(vals[0]);
1922+
$('#'+filterCat+'_slide').find('.tooltipR').text(vals[1]);
1923+
$('#'+filterCat+'_input').val(vals[0]+'-'+vals[1]);
1924+
1925+
$('#'+filterCat+'_slide').find('.labelMin').text(min);
1926+
$('#'+filterCat+'_slide').find('.labelMax').text(max);
1927+
1928+
1929+
}
1930+
*/
1931+
18651932
var allListItems=$('#'+filterCat).children('ul').children('li');
18661933
var allFilters=allListItems.children().children('input:checkbox');
18671934
var checkedFilters=allListItems.children().children('input:checked');

templates/idc/explore_data_core.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,10 @@ <h4 class="panel-title">Search Scope</h4>
137137
{% endif %}
138138
<div class="search-configuration filter-panel search-con" role="tabpanel">
139139
<div class="tabpanel panel-default" role="tabpanel">
140-
<div class="panel-heading clearfix"><h4 class="panel-title">Search Configuration</h4>
141-
<span ><br><input id="hide-zeros" type="checkbox" value="hide-zeros" onchange="hideAtt()"> Hide attributes with 0 cases</span>
140+
<div class="panel-heading clearfix"><h4 class="panel-title">Search Configuration <div class="tooltip_info" style="float:right">&#9432;
141+
<div class="tooltiptext_info"> The panel below reports the number of unique cases (or patients) for each attribute within a cohort constructed by adding the given attribute (when absent) to the defined filter.</div>
142+
</div> </h4>
143+
<br><span ><input id="hide-zeros" type="checkbox" value="hide-zeros" onchange="hideAtt()"> Hide attributes with 0 cases</span>
142144

143145
</div>
144146

@@ -384,7 +386,11 @@ <h4 class="panel-title">Search Scope</h4>
384386
<div class="vert">
385387
<div class="filter-panel panel" role="tabpanel">
386388
<div class="tabpanel panel-default" role="tabpanel">
387-
<div class="panel-heading clearfix"><h4 class="panel-title">Search Results</h4><br>
389+
<div class="panel-heading clearfix"><h4 class="panel-title">Search Results <div class="tooltip_info" style="float:right">&#9432;
390+
<div class="tooltiptext_info tooltip_rhs">Each chart below reports the number of cases (or patients) for all attributes
391+
within a given attribute category for the cohort constructed by the defined filter. For certain categories (i.e. Modality) some cases may apply to several attributes within the category.
392+
Hence some attributes that seem to be excluded in the filter definition may have positive case counts.</div>
393+
</div></h4>
388394

389395
<div style="display:none">
390396
<label>Chart Type:</label>

0 commit comments

Comments
 (0)