clone.js : change lists appearances for manual changment

browser/css/dark.css

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}}