Skip to content

GitLab

vidjil
vidjil
Commit 9b1ea5b3 authored by florian.thonier's avatar florian.thonier
2 Browse files
Options

clone.js : change lists appearances for manual changment

parent b67e4d75
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 38 deletions
browser/css/dark.css
View file @ 9b1ea5b3
......@@ -854,11 +854,13 @@ span.logo {
width: 475px;
}
.menu-highlight {
display: none;
position: relative;
float: left;
width: 250px;
}
.devel-mode {
display: none;
}
.focus {
position: relative;
text-align: center;
......
browser/css/light.css
View file @ 9b1ea5b3
......@@ -854,11 +854,13 @@ span.logo {
width: 475px;
}
.menu-highlight {
display: none;
position: relative;
float: left;
width: 250px;
}
.devel-mode {
display: none;
}
.focus {
position: relative;
text-align: center;
......
browser/css/vidjil.less
View file @ 9b1ea5b3
......@@ -1009,12 +1009,15 @@ span.logo
}
.menu-highlight {
display: none;
position: relative;
float: left;
width: @width_highlight;
}
.devel-mode {
display: none;
}
.focus {
position: relative;
text-align: center;
......
browser/index.html
View file @ 9b1ea5b3
......@@ -214,7 +214,6 @@
<div id="debug_menu" class="menu" onmouseover="showSelector('adminSelector');" style="display : none"> development
<div id="adminSelector" class="selector"><div>
<input type="checkbox" onclick="$('.menu-highlight').toggle()">highlight menu</input><br>
<input type="checkbox" onclick=" this.checked ? $('#fps').css('display', '') : $('#fps').css('display', 'none');">display fps</input></br>
<input type="checkbox" onclick=" this.checked ? console.openLog() : console.closeLog() ;">log</input>
<div class="buttonSelector" onclick="m.changeTimeFormat('delta_date_no_zero', true)"><input type="radio" name="time" value="delta_date_no_zero">day after first sample (no zero)</input></div>
......
browser/js/clone.js
View file @ 9b1ea5b3
......@@ -518,7 +518,7 @@ Clone.prototype = {
* @return {string} content - an HTML code of form
*/
createLocusList: function () {
var content = "<form name='germ'><select NAME='LocusForm' id='germSelector', onChange='m.clones["+ this.index +"].changeLocus(this.form.LocusForm.value);'>";
var content = "<form name='germ'><select class='menu-selector' NAME='LocusForm' id='germSelector', onChange='m.clones["+ this.index +"].changeLocus(this.form.LocusForm.value);'>";
content += "<option value="+ this.germline + ">" + this.germline + "</option>";
for (var i in germline_data) {
......@@ -559,7 +559,7 @@ Clone.prototype = {
createSegmentList: function (segment, locus) {
var segments = {"Vsegment": ["5", "V"], "Dsegment": ["4", "D"], "Jsegment": ["3", "J"]}
var nLocus = locus + segments[segment][1]
var content = "<form name="+ segment +"><select NAME="+segment+" onChange='m.clones["+ this.index +"].changeSegment(this.form." + segment + ".value, " + segments[segment][0] + ");'>";
var content = "<form name="+ segment +"><select class='menu-selector' NAME="+segment+" onChange='m.clones["+ this.index +"].changeSegment(this.form." + segment + ".value, " + segments[segment][0] + ");'>";
content += "<option value="+ this.getGene(segments[segment][0]) + ">" + this.getGene(segments[segment][0]) + "</option>";
if( typeof(locus) == 'undefined' ){
......@@ -708,7 +708,7 @@ Clone.prototype = {
//segmentation info
html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> segmentation "
html += " <button type='button' onclick='m.clones["+ this.index +"].toggle()'>manual edit</button> "; //Use to hide/display lists
html += " <button type='button' class='devel-mode' onclick='m.clones["+ this.index +"].toggle()'>edit</button> "; //Use to hide/display lists
html += this.getHTMLModifState() // icon if manual changement
html += "</td></tr>"
......@@ -730,10 +730,10 @@ Clone.prototype = {
html += "<tr><td> sequence </td><td colspan='" + time_length + "'>" + this.sequence + "</td></tr>"
html += "<tr><td> id </td><td colspan='" + time_length + "'>" + this.id + "</td></tr>"
html += "<tr><td> locus </td><td colspan='" + time_length + "'>" + this.m.systemBox(this.germline).outerHTML + this.germline + "<div id='listLocus' style='display: none'>" + this.createLocusList() + "</div></td></tr>"
html += "<tr><td> V gene (or 5') </td><td colspan='" + time_length + "'>" + this.getGene("5") + "<div id='listVsegment' style='display: none'>" + this.createSegmentList("Vsegment") + "</div></td></tr>"
html += "<tr><td> (D gene) </td><td colspan='" + time_length + "'>" + this.getGene("4") + "<div id='listDsegment' style='display: none'>" + this.createSegmentList("Dsegment") + "</div></td></tr>"
html += "<tr><td> J gene (or 3') </td><td colspan='" + time_length + "'>" + this.getGene("3") + "<div id='listJsegment' style='display: none'>" + this.createSegmentList("Jsegment") + "</div></td></tr>"
html += "<tr><td> locus </td><td colspan='" + time_length + "'>" + this.m.systemBox(this.germline).outerHTML + this.germline + "<div class='div-menu-selector' id='listLocus' style='display: none'>" + this.createLocusList() + "</div></td></tr>"
html += "<tr><td> V gene (or 5') </td><td colspan='" + time_length + "'>" + this.getGene("5") + "<div class='div-menu-selector' id='listVsegment' style='display: none'>" + this.createSegmentList("Vsegment") + "</div></td></tr>"
html += "<tr><td> (D gene) </td><td colspan='" + time_length + "'>" + this.getGene("4") + "<div class='div-menu-selector' id='listDsegment' style='display: none'>" + this.createSegmentList("Dsegment") + "</div></td></tr>"
html += "<tr><td> J gene (or 3') </td><td colspan='" + time_length + "'>" + this.getGene("3") + "<div class='div-menu-selector' id='listJsegment' style='display: none'>" + this.createSegmentList("Jsegment") + "</div></td></tr>"
//other info (clntab)
......
browser/js/segmenter.js
View file @ 9b1ea5b3
......@@ -161,7 +161,7 @@ Segment.prototype = {
//menu-highlight
var div_highlight = document.createElement('div');
div_highlight.className = "menu-highlight"
div_highlight.className = "menu-highlight devel-mode"
div_highlight.onmouseover = function () {
self.m.focusOut()
};
......
browser/js/shortcut.js
View file @ 9b1ea5b3
......@@ -96,8 +96,10 @@ Shortcut.prototype = {
var d_m = $("#debug_menu")
if (d_m.css("display") == "none"){
$("#debug_menu").css("display", "");
$(".devel-mode").show();
}else{
$("#debug_menu").css("display", "none");
$(".devel-mode").hide();
}
}
break;
......
browser/test/QUnit/testFiles/clone_test.js
View file @ 9b1ea5b3
......@@ -89,47 +89,47 @@ test("clone : name", function() {
includes(html, "<tr><td class='header' colspan='5'> representative sequence</td></tr><tr><td> sequence name </td><td colspan='4'>hello</td></tr><tr><td> code </td><td colspan='4'>hello</td></tr><tr><td> length </td><td colspan='4'>19</td></tr><tr><td> size (n-reads (total reads) )</td><td>10 (200)</td><td>10 (100)</td><td>15 (200)</td><td>15 (100)</td></tr><tr><td> size (%)</td><td>5.000 % </td><td>10.000 % </td><td>7.500 % </td><td>15.000 % </td></tr>",
"getHtmlInfo: representative sequence information");
includes(html, "<tr><td class='header' colspan='5'> segmentation <button type='button' onclick='m.clones[0].toggle()'>manual edit</button> </td></tr><tr><td> sequence </td><td colspan='4'>aaaaaaaaaattttttttt</td></tr><tr><td> id </td><td colspan='4'>id1</td></tr>",
includes(html, "<tr><td class='header' colspan='5'> segmentation <button type='button' class='devel-mode' onclick='m.clones[0].toggle()'>edit</button> </td></tr><tr><td> sequence </td><td colspan='4'>aaaaaaaaaattttttttt</td></tr><tr><td> id </td><td colspan='4'>id1</td></tr>",
"getHtmlInfo: segmentation information + modification button");
// Test icon
c1.manuallyChanged = true;
html = c1.getHtmlInfo()
includes(html, "<tr><td class='header' colspan='5'> segmentation <button type='button' onclick='m.clones[0].toggle()'>manual edit</button> <img src='images/icon_fav_on.png' alt='This clone has been manually changed'></td></tr><tr><td> sequence </td><td colspan='4'>aaaaaaaaaattttttttt</td></tr><tr><td> id </td><td colspan='4'>id1</td></tr>",
includes(html, "<tr><td class='header' colspan='5'> segmentation <button type='button' class='devel-mode' onclick='m.clones[0].toggle()'>edit</button> <img src='images/icon_fav_on.png' alt='This clone has been manually changed'></td></tr><tr><td> sequence </td><td colspan='4'>aaaaaaaaaattttttttt</td></tr><tr><td> id </td><td colspan='4'>id1</td></tr>",
"getHtmlInfo: segmentation information + modification button + manuallyChanged icon");
// <tr><td> locus </td><td colspan='4'><span title=\"TRG\" class=\"systemBoxMenu\">G</span>TRG</td></tr> // not tested (order of title/class)
// locus/genes tests
includes(html, "<tr><td> locus </td><td colspan='4'><span title=\"TRG\" class=\"systemBoxMenu\">G</span>TRG<div id='listLocus' style='display: none'>",
includes(html, "<tr><td> locus </td><td colspan='4'><span title=\"TRG\" class=\"systemBoxMenu\">G</span>TRG<div class='div-menu-selector' id='listLocus' style='display: none'>",
"getHtmlInfo: segmentation information (Locus)");
includes(html, "<tr><td> V gene (or 5') </td><td colspan='4'>undefined V<div id='listVsegment' style='display: none'>",
includes(html, "<tr><td> V gene (or 5') </td><td colspan='4'>undefined V<div class='div-menu-selector' id='listVsegment' style='display: none'>",
"getHtmlInfo: segmentation information (V gene)");
includes(html, "<tr><td> (D gene) </td><td colspan='4'>IGHD2*03<div id='listDsegment' style='display: none'>",
includes(html, "<tr><td> (D gene) </td><td colspan='4'>IGHD2*03<div class='div-menu-selector' id='listDsegment' style='display: none'>",
"getHtmlInfo: segmentation information (D gene)");
includes(html, "<tr><td> J gene (or 3') </td><td colspan='4'>IGHV4*01<div id='listJsegment' style='display: none'>",
includes(html, "<tr><td> J gene (or 3') </td><td colspan='4'>IGHV4*01<div class='div-menu-selector' id='listJsegment' style='display: none'>",
"getHtmlInfo: segmentation information (J gene)");
// forms tests
// TODO : Forms corrections after germline.js correction
includes(html, "<form name='germ'><select NAME='LocusForm' id='germSelector', onChange='m.clones[0].changeLocus(this.form.LocusForm.value);'><option value=TRG>TRG</option><option value=TRA>TRA</option>",
includes(html, "<form name='germ'><select class='menu-selector' NAME='LocusForm' id='germSelector', onChange='m.clones[0].changeLocus(this.form.LocusForm.value);'><option value=TRG>TRG</option><option value=TRA>TRA</option>",
"getHtmlInfo: Locus form");
includes(html, "<form name=Vsegment><select NAME=Vsegment onChange='m.clones[0].changeSegment(this.form.Vsegment.value, 5);'><option value=undefined V>undefined V</option><option value=TRGJP2*01>TRGJP2*01</option>",
includes(html, "<form name=Vsegment><select class='menu-selector' NAME=Vsegment onChange='m.clones[0].changeSegment(this.form.Vsegment.value, 5);'><option value=undefined V>undefined V</option><option value=TRGJP2*01>TRGJP2*01</option>",
"getHtmlInfo: V gene form");
includes(html, "<form name=Dsegment><select NAME=Dsegment onChange='m.clones[0].changeSegment(this.form.Dsegment.value, 4);'><option value=IGHD2*03>IGHD2*03</option></select></form></div></td></tr>",
includes(html, "<form name=Dsegment><select class='menu-selector' NAME=Dsegment onChange='m.clones[0].changeSegment(this.form.Dsegment.value, 4);'><option value=IGHD2*03>IGHD2*03</option></select></form></div></td></tr>",
"getHtmlInfo: D gene form");
includes(html, "<form name=Jsegment><select NAME=Jsegment onChange='m.clones[0].changeSegment(this.form.Jsegment.value, 3);'><option value=IGHV4*01>IGHV4*01</option><option value=TRDV3*02>TRDV3*02</option>",
includes(html, "<form name=Jsegment><select class='menu-selector' NAME=Jsegment onChange='m.clones[0].changeSegment(this.form.Jsegment.value, 3);'><option value=IGHV4*01>IGHV4*01</option><option value=TRDV3*02>TRDV3*02</option>",
"getHtmlInfo: J gene form");
// Test after germline manual changement
c1.germline="newLocus"; c1.seg["5"]= "segment5_V"; c1.seg["4"]= "segment4_D"; c1.seg["3"]= "segment3_J";
html = c1.getHtmlInfo()
includes(html, "<form name='germ'><select NAME='LocusForm' id='germSelector', onChange='m.clones[0].changeLocus(this.form.LocusForm.value);'><option value=newLocus>newLocus</option><option value=TRA>TRA</option>",
includes(html, "<form name='germ'><select class='menu-selector' NAME='LocusForm' id='germSelector', onChange='m.clones[0].changeLocus(this.form.LocusForm.value);'><option value=newLocus>newLocus</option><option value=TRA>TRA</option>",
"getHtmlInfo: Locus after manual changement");
includes(html, "<form name=Vsegment><select NAME=Vsegment onChange='m.clones[0].changeSegment(this.form.Vsegment.value, 5);'><option value=segment5_V>segment5_V</option>",
includes(html, "<form name=Vsegment><select class='menu-selector' NAME=Vsegment onChange='m.clones[0].changeSegment(this.form.Vsegment.value, 5);'><option value=segment5_V>segment5_V</option>",
"getHtmlInfo: V gene after manual changement");
includes(html, "<form name=Dsegment><select NAME=Dsegment onChange='m.clones[0].changeSegment(this.form.Dsegment.value, 4);'><option value=segment4_D>segment4_D</option>",
includes(html, "<form name=Dsegment><select class='menu-selector' NAME=Dsegment onChange='m.clones[0].changeSegment(this.form.Dsegment.value, 4);'><option value=segment4_D>segment4_D</option>",
"getHtmlInfo: D gene after manual changement");
includes(html, "<form name=Jsegment><select NAME=Jsegment onChange='m.clones[0].changeSegment(this.form.Jsegment.value, 3);'><option value=segment3_J>segment3_J</option>",
includes(html, "<form name=Jsegment><select class='menu-selector' NAME=Jsegment onChange='m.clones[0].changeSegment(this.form.Jsegment.value, 3);'><option value=segment3_J>segment3_J</option>",
"getHtmlInfo: J gene after manual changement");
c1.seg["5"]= "undefined V"; c1.seg["4"]= "IGHD2*03"; c1.seg["3"]= "IGHV4*01";
......
doc/browser.org
View file @ 9b1ea5b3
......@@ -157,21 +157,28 @@ If you have an admin access, you can grant access to other users ('p').
Clicking on a patient give acccess the "samples" page. Each sample is
a =.fasta=, =.fastq=, =.gz= or =.clntab= file that will be processed by one or several
pipelines.
pipelines with one or several /configurations/ that set software options.
The base configurations are « TRG », « IGH », « multi » (=-g germline=) and « multi+inc » (=-g germline -i=).
See also https://github.com/vidjil/vidjil/blob/master/doc/locus.org.
You can see which samples have been processed with the selected
config, and download the sequence files if they are available ("dl").
config, and access to the results (=See results=, bottom right).
The first click on this button can take a few seconds.
Depending on your granted access, you can add a new sample to the list (=add file=),
download sequence files when they are available (=dl=) or delete sequence files (=X=).
Note that sequence file may be deleted (in particular to save server disk space) while still keeping the results.
Depending on your granted accesses, you can
add a new sample to the list ("add file"),
schedule a processing for a sequence file (select a config and "run"),
or delete a sample ("X").
*** Processing samples
Depending on your granted accesses, you can schedule a processing for a sequence file (select a config and =run=).
The processing can take a few seconds to a few hours, depending on the
software lauched, its options and the size of the sample.
Once the processing is finished, click on the button "see result" and
the browser will load the data of the processed files. The first click
on this button can take a few seconds.
software lauched, the options set in the config, the size of the sample and the server load.
The « reload » button (bottom left) updates the status of the task, that should do =QUEUED= → =ASSIGNED= → =RUNNING= → =COMPLETED=.
It is possible to launch several process at the same time (some will wait in the =QUEUED= / =ASSIGNED= states), and also to launch process while you
are uploading data. Finally, you can safely close the window with the patient database (and even the browser) when some process are queued/launched.
The only thing you should not do is to close completely the browser while sequences are uploading.
* Can I see all the clones ?
......
server/web2py/applications/vidjil/views/patient/edit.html
View file @ 9b1ea5b3
......@@ -25,7 +25,7 @@ info = db.patient[request.vars["id"]]
</tr>
<tr>
<td> <label for="patient_birth" id="patient_birth__label">Birth: </label></td>
<td> <input class="date" id="patient_birth" name="birth" type="text" value="{{=info.birth}}"><span>(yyyy-mm-dd)</span></td>
<td> <input class="date" id="patient_birth" name="birth" type="text" value="{{if info.birth:}}{{=info.birth}}{{pass}}"><span>(yyyy-mm-dd)</span></td>
<td> </td>
</tr>
<tr>
......
server/web2py/applications/vidjil/views/patient/info.html
View file @ 9b1ea5b3
......@@ -115,7 +115,7 @@
{{pass}}
<td>
{{if row.sequence_file.data_file != None and ( row.results_file.id == None or ( status != "RUNNING" and status != "QUEUED" and status != "ASSIGNED") ):}}
{{if auth.can_process_file() :}}
{{if auth.can_process_file() and auth.can_use_config(config_id) :}}
<span class="button" onclick="db.call('default/run_request', { 'sequence_file_id' : '{{=row.sequence_file.id}}', 'config_id' : {{=config_id}} } )"> run >> </span>
{{pass}}
{{pass}}
......
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