Commit 77d5dede authored by Mathieu Giraud's avatar Mathieu Giraud

Merge branch 'feature-c/4104-n-afficher-dans-le-graph-que-les-clones-du-sample-courant' into 'dev'

Focus on clones in one sample (graph) + More sorting options (list)

Closes #3870 and #4104

See merge request !564
parents bd8c5f7e c4fc2195
Pipeline #128845 failed with stages
in 10 seconds
......@@ -576,7 +576,7 @@ line {
font-weight: bold;
}
.list_sort {
margin-right: 30px;
margin-right: 20px;
float: right;
}
/*style segmenter element*/
......@@ -2259,3 +2259,9 @@ form .form_label {
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: #333333;
}
.list_lock_on {
color: #839496;
}
......@@ -577,7 +577,7 @@ line {
font-weight: bold;
}
.list_sort {
margin-right: 30px;
margin-right: 20px;
float: right;
}
/*style segmenter element*/
......@@ -2260,3 +2260,9 @@ form .form_label {
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: #cccccc;
}
.list_lock_on {
color: #657b83;
}
......@@ -2257,6 +2257,12 @@ form .form_label {
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: #cccccc;
}
.list_lock_on {
color: #657b83;
}
body {
line-height: 20px;
}
......
......@@ -2252,6 +2252,12 @@ form .form_label {
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: #333333;
}
.list_lock_on {
color: #777777;
}
#resolution5 {
opacity: 0;
}
......
......@@ -2254,6 +2254,12 @@ form .form_label {
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: #cccccc;
}
.list_lock_on {
color: #657b83;
}
#mid-container {
font-size: 125%;
}
......
......@@ -723,7 +723,7 @@ line {
}
.list_sort{
margin-right : 30px;
margin-right : 20px;
float: right;
}
......@@ -2602,4 +2602,12 @@ form {
pointer-events: none;
opacity: 0.4;
cursor: auto;
}
.list_lock_off {
color: @border;
}
.list_lock_on {
color: @default;
}
\ No newline at end of file
......@@ -177,12 +177,19 @@
</div>
<div class="menu" id="filter_menu" onmouseenter="builder.build_displaySelector();" onmouseover="showSelector('filterSelector');" > filter
<div id="filterSelector" class="selector"><div>
<div id="filterSelector" class="selector">
<div>
<div class="menu_box">
<span id="top_label"></span></br>
<input id="top_slider" type="range" min="5" max="100" step="5" value="10" onchange="m.displayTop(this.value)" />
<span id="top_label"></span></br>
<input id="top_slider" type="range" min="5" max="100" step="5" value="10" onchange="m.displayTop(this.value)" />
</div>
</div></div>
<div class="menu_box">
<div id="filter_switch_sample" title="Hide clones that are not present in the current sample">
<input id="filter_switch_sample_check" type="checkbox"></input> Focus on clones of one sample
</div>
</div>
</div>
</div>
</div>
<div class="menu" id="settings_menu" onmouseenter="builder.build_settings();" onmouseover=" showSelector('settingsSelector');" > settings
......
......@@ -391,6 +391,13 @@ Builder.prototype = {
document.getElementById("top_slider")
.max = max_top;
// init switch onlyOneSample
var onlyOneSample = document.getElementById("filter_switch_sample_check")
onlyOneSample.checked = this.m.show_only_one_sample
//init notation
if (this.m.notation_type == "scientific") {
document.getElementById("notation").checked = true
......
......@@ -581,9 +581,17 @@ Graph.prototype = {
if (clone.top > self.display_limit)return ' M 0,' + self.resizeH;
var size = []
var selected_point = this.m.t
var value_selected_point = this.m.clone(id).getSize(selected_point)
for (var i = 0; i < this.graph_col.length; i++) {
if (seq_size) size[i] = this.m.clone(id).getSequenceSize(this.m.samples.order[i])
else size[i] = this.m.clone(id).getSize(this.m.samples.order[i])
// bypass clone size if it is not present in the current timepoint; TODO, add a switch on this behavior
if (this.m.show_only_one_sample && value_selected_point == 0) {
size[i] = 0
} else {
if (seq_size) size[i] = this.m.clone(id).getSequenceSize(this.m.samples.order[i])
else size[i] = this.m.clone(id).getSize(this.m.samples.order[i])
}
}
var x = this.graph_col[0];
......
......@@ -43,16 +43,17 @@ function List(id_list, id_data, model, database) {
this.index = [];
this.index_cluster = [];
this.index_data = {};
this.sort_lock = true; // By default, lock the list in the current state
this.build();
this.sort_option = {
"-" : function () {},
"size" : function(){self.sortListBy(function(id){return self.m.clone(id).getSize();})},
"V/5'" : function(){self.sortListByV()},
"J/3'" : function(){self.sortListByJ()}
}
this.sort_option_selected = "size"; // Store the selected sort method
this.selectedAxis = {};
}
......@@ -281,6 +282,11 @@ List.prototype = {
sort.className = "list_sort_select"
sort.onchange = function() {
self.sort_option[this.value]()
self.sort_option_selected = this.value
// close the lock
self.sort_lock = true
var div = document.getElementById("div_sortLock")
div.className = "icon-lock-1 list_lock_on"
}
for (var key in this.sort_option) {
......@@ -292,6 +298,27 @@ List.prototype = {
sort_span.appendChild(document.createTextNode("sort by "));
sort_span.appendChild(sort);
var lock_div = document.createElement("icon")
lock_div.id = "div_sortLock"
lock_div.className = "icon-lock-1 list_lock_on"
lock_div.title = "Keep list sorted"
lock_div.onclick = function(){
var div = document.getElementById("div_sortLock")
if (self.sort_lock == true){
self.sort_lock = false
div.className = "icon-lock-open list_lock_off"
div.title = "Freeze list"
// Apply sort method at unlock
self.sort_option[self.sort_option_selected]()
} else {
self.sort_lock = true
div.className = "icon-lock-1 list_lock_on"
div.title = "Keep list sorted"
}
}
sort_span.appendChild( lock_div )
var axis_span = document.createElement('span');
axis_span.className = "list_axis devel-mode";
......@@ -344,8 +371,10 @@ List.prototype = {
this.updateElem(list);
this.update_data_list()
//TODO check order
document.getElementById("list_sort_select").selectedIndex = 0;
// Apply selected sort function if no sort lock
if (this.sort_lock == false){
this.sort_option[this.sort_option_selected]()
}
},
/**
......
......@@ -126,6 +126,14 @@ Model.prototype = {
$(this).removeClass('hovered');
});
this.show_only_one_sample = false
$("#filter_switch_sample").click(function(){
self.show_only_one_sample = !self.show_only_one_sample
var check = document.getElementById("filter_switch_sample_check")
check.checked = self.show_only_one_sample
self.update()
})
// Table of conversion between axes name and distribution names
this.distrib_convertion = {
......
......@@ -53,6 +53,31 @@ class TestCluster < BrowserTest
end
def test_05_switch_onlyOneSample
cloneId = '4'
sleep 1
# exist will not work as the clone is present, but not visible.
# So use the number of points of the line [with new smooth line, there is no formula]
polyline4 = $b.path(:id => "polyline"+cloneId )
assert ( polyline4.attribute_value("d").split(',').length == 12 ), ">> clone is present in the graph by default"
# switch the filter on, current sample include cloneId
$b.menu_filter.click
$b.div(:id => "filter_switch_sample").click
assert ( $b.clone_in_list(cloneId).exists? ), ">> clone is present in the list"
assert ( polyline4.attribute_value("d").split(',').length == 12 ), ">> clone is still present in the graph if switched in filter menu (and correct sample)"
# change current sample, will not include cloneId
$b.send_keys :arrow_right
sleep 1
polyline4 = $b.path(:id => "polyline"+cloneId )
assert ( polyline4.attribute_value("d").split(',').length == 2 ), ">> clone is NOT present in the graph if switched in filter menu and sample with size at 0 for this clone"
end
# Not really a test
def test_zz_close
......
# coding: utf-8
load 'vidjil_browser.rb'
load 'browser_test.rb'
#browser test suite
class TestList < BrowserTest
def setup
super
if not defined? $b
set_browser("/doc/analysis-example2.vidjil", "/doc/analysis-example2.analysis")
if $b.div(id: 'tip-container').present?
$b.div(:id => 'tip-container').div(:class => 'tip_1').element(:class => 'icon-cancel').click
end
end
end
def after_tests
end
def test_00_list_clones
sleep 1
# tester la presence du lock
lock = $b.listLock()
assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock start in good state (locked)"
# tester l'ordre des clones
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
end
def test_01_xxx
# cahnger de sample, verifier que l'ordre est rester le meme
$b.send_keys :arrow_right
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
end
def test_02_xxx
# Enlever le lock
lock = $b.listLock()
lock.click
assert ( lock.attribute_value("class") == "icon-lock-open list_lock_off"), "lock in good state after click (unlocked)"
# verifier que l'ordre a déjà changer (automatique sort)
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_5" ), "opening; correct id of the first element (clone other)"
end
def test_03_xxx
# changer de sample
$b.send_keys :arrow_right
sleep 0.1
# verifier que l'ordre est redevenu celui du cas 1
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
end
def test_04_xxx
# verouiller de nouveau
lock = $b.listLock()
lock.click
assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock in good state after second click (locked)"
# changer de sample
$b.send_keys :arrow_right
sleep 0.1
# verifier que l'ordre est rester le cas 1
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
end
def test_05_xxx
# # tester de changer la valeur de la methode (size => V/5')
$b.select(:id => 'list_sort_select').click
$b.send_keys :arrow_down
$b.send_keys :arrow_down
$b.send_keys :enter
sleep 0.1
lock = $b.listLock()
# verifier que le lock est bien levé
assert ( lock.attribute_value("class") == "icon-lock-1 list_lock_on"), "lock in good state after change of sort method (locked)"
# voir qu'il y a bien une reorganisation de la liste
listClone = $b.list()
l0 = listClone.div(index: 0)
assert ( l0.id == "listElem_0" ), "opening; correct id of the first element"
end
# Not really a test
def test_zz_close
close_everything
end
end
......@@ -376,6 +376,11 @@ class VidjilBrowser < Watir::Browser
return div(:id => 'list_clones')
end
def listLock()
return element(:id => "div_sortLock")
end
def until(extra = {})
default = {timeout: 3}
default.merge(extra)
......
......@@ -164,6 +164,10 @@ The number of displayed clones can be changed with the filter menu.
- If your dataset contains sampling dates (for example for diagnosis/follow-up samples), you can switch between sample keys and dates in “settings \> sample key”
- By default, the graph shows clones present in any sample.
You can instead choose to show only the clones present in the selected sample with “filter \> focus on clones of one sample“.
## The plot view and the plot presets
The grid view shows the clones scattered according to some axes.
......
......@@ -156,6 +156,14 @@ do a correct gathering.
{
"cdr3": {"start": 10, "stop": 20}
}
},
{
"id": "clone5",
"name": "clone_showOnlyOneSample",
"sequence": "GATACAaaaaaccccc",
"reads": [ 1021, 0 ],
"germline": "TRG",
"top": 5
}
]
}
......
Markdown is supported
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