Commit b5928f7b authored by Vidjil Team's avatar Vidjil Team

merge - easy annotations on patients and samples, refactoring of #info-row

Great work by @RyanHerb
parents 5b6fe331 c60722e2
......@@ -124,16 +124,12 @@ line {
border-color: #333333;
}
.info_row {
padding-left: 20px;
min-width: 100px;
display: inline-block;
}
.info_row_content {
width: 100%;
display: inline-block;
width: 345px;
}
#info_point {
margin-top: 15px;
}
#info_data_file {
font-size: 200%;
......@@ -474,7 +470,7 @@ line {
}
.systemBoxNameMenu {
display: inline-block;
min-width: 70px;
min-width: 67px;
height: 20px;
cursor: pointer;
}
......@@ -794,7 +790,8 @@ a:hover {
color: #fdf6e3;
}
.button,
.button_right {
.button_right,
.button_left {
cursor: pointer;
font-size: 13px;
padding: 0px 3px;
......@@ -806,6 +803,10 @@ a:hover {
.button_right {
float: right;
}
.button_left {
float: left;
margin-right: -27px;
}
.button2 {
border: solid;
border-width: 1px;
......@@ -1033,6 +1034,13 @@ span.alert {
text.alert {
fill: red;
}
span.warningReads {
margin-left: .5em;
display: inline-block;
width: 1em;
text-align: center;
cursor: help;
}
.sp_menu_anchor {
position: relative;
top: 0px;
......@@ -1600,3 +1608,80 @@ table.log textarea {
#db_table_container.info_table {
height: 50%;
}
.sample_details {
float: left;
width: 50%;
}
.reads_details {
float: right;
width: 50%;
}
.clear {
clear: both;
}
.centered {
text-align: center;
}
.info_container {
display: block;
padding: 5px;
border: 1px solid;
overflow-wrap: break-word;
overflow-y: hidden;
max-width: 457px;
min-height: 32px;
max-height: 32px;
position: fixed;
width: 100%;
background-color: #000000;
-webkit-transition: max-height 0.8s ease-out;
-moz-transition: max-height 0.8s ease-out;
transition: max-height 0.8s ease-out;
z-index: 1;
}
.info_container:hover {
max-height: 400px;
z-index: 2;
}
.patient_info_text {
margin-bottom: 5px;
}
.patient_info {
margin-bottom: 45px;
}
textarea#edit_value {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
width: 470px;
min-height: 45px;
}
#top_info {
display: inline-flex;
font-weight: bold;
}
.save_info.button {
vertical-align: top;
padding-right: 0px;
margin-right: 0px;
}
.vertical_space {
margin-top: 5px;
margin-bottom: 5px;
}
.inline-block_10 {
display: inline-block;
width: 10%;
vertical-align: top;
}
.inline-block_90 {
display: inline-block;
width: 90%;
vertical-align: top;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
......@@ -124,16 +124,12 @@ line {
border-color: #cccccc;
}
.info_row {
padding-left: 20px;
min-width: 100px;
display: inline-block;
}
.info_row_content {
width: 100%;
display: inline-block;
width: 345px;
}
#info_point {
margin-top: 15px;
}
#info_data_file {
font-size: 200%;
......@@ -474,7 +470,7 @@ line {
}
.systemBoxNameMenu {
display: inline-block;
min-width: 70px;
min-width: 67px;
height: 20px;
cursor: pointer;
}
......@@ -794,7 +790,8 @@ a:hover {
color: #002b36;
}
.button,
.button_right {
.button_right,
.button_left {
cursor: pointer;
font-size: 13px;
padding: 0px 3px;
......@@ -806,6 +803,10 @@ a:hover {
.button_right {
float: right;
}
.button_left {
float: left;
margin-right: -27px;
}
.button2 {
border: solid;
border-width: 1px;
......@@ -1033,6 +1034,13 @@ span.alert {
text.alert {
fill: red;
}
span.warningReads {
margin-left: .5em;
display: inline-block;
width: 1em;
text-align: center;
cursor: help;
}
.sp_menu_anchor {
position: relative;
top: 0px;
......@@ -1600,3 +1608,80 @@ table.log textarea {
#db_table_container.info_table {
height: 50%;
}
.sample_details {
float: left;
width: 50%;
}
.reads_details {
float: right;
width: 50%;
}
.clear {
clear: both;
}
.centered {
text-align: center;
}
.info_container {
display: block;
padding: 5px;
border: 1px solid;
overflow-wrap: break-word;
overflow-y: hidden;
max-width: 457px;
min-height: 32px;
max-height: 32px;
position: fixed;
width: 100%;
background-color: #ffffff;
-webkit-transition: max-height 0.8s ease-out;
-moz-transition: max-height 0.8s ease-out;
transition: max-height 0.8s ease-out;
z-index: 1;
}
.info_container:hover {
max-height: 400px;
z-index: 2;
}
.patient_info_text {
margin-bottom: 5px;
}
.patient_info {
margin-bottom: 45px;
}
textarea#edit_value {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
width: 470px;
min-height: 45px;
}
#top_info {
display: inline-flex;
font-weight: bold;
}
.save_info.button {
vertical-align: top;
padding-right: 0px;
margin-right: 0px;
}
.vertical_space {
margin-top: 5px;
margin-bottom: 5px;
}
.inline-block_10 {
display: inline-block;
width: 10%;
vertical-align: top;
}
.inline-block_90 {
display: inline-block;
width: 90%;
vertical-align: top;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
......@@ -2,6 +2,8 @@
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
@infoContainerHeight : 32px;
@locusSpacingMargin : 12px;
/* default tag color */
@tagColor0 : #DC322F;
......@@ -157,18 +159,13 @@ line {
}
.info_row {
padding-left: 20px;
min-width: 100px;
display: inline-block;
}
.info_row_content {
width: 100%;
display: inline-block;
width : 345px;
}
#info_point {
margin-top: 15px;
}
#info_data_file
......@@ -589,7 +586,7 @@ line {
.systemBoxNameMenu {
display: inline-block;
min-width: 70px;
min-width: 67px;
height: 20px;
cursor : pointer;
}
......@@ -941,7 +938,7 @@ a:hover {
color: @select;
}
.button, .button_right{
.button, .button_right, .button_left{
cursor:pointer;
font-size: 13px;
padding: 0px 3px;
......@@ -955,6 +952,11 @@ a:hover {
float: right;
}
.button_left {
float: left;
margin-right: -27px;
}
.button2 {
border: solid;
border-width: 1px;
......@@ -1185,6 +1187,13 @@ text.warning { fill: orange; }
span.alert { color: red; }
text.alert { fill: red; }
span.warningReads {
margin-left: .5em;
display:inline-block;
width: 1em;
text-align:center;
cursor: help}
.sp_menu_anchor{
position: relative;
top: 0px;
......@@ -1815,3 +1824,98 @@ flex-grow : 1;
#db_table_container.info_table {
height: 50%
}
.sample_details {
float: left;
width: 50%;
}
.reads_details {
float: right;
width: 50%;
}
.clear {
clear: both;
}
.centered {
text-align: center;
}
.info_container{
display: block;
padding: 5px;
border: 1px solid;
overflow-wrap: break-word;
overflow-y: hidden;
max-width: 457px;
min-height: @infoContainerHeight;
max-height: @infoContainerHeight;
position: fixed;
width: 100%;
background-color: @background;
-webkit-transition: max-height 0.8s ease-out;
-moz-transition: max-height 0.8s ease-out;
transition: max-height 0.8s ease-out;
z-index: 1;
}
.info_container:hover {
max-height: 400px;
z-index: 2;
}
.patient_info_text {
margin-bottom: 5px;
}
.patient_info {
margin-bottom: 45px;
margin-bottom: 45px;
}
textarea#edit_value {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
//display:block;
position: fixed;
width: @width_left_container - 5px;
min-height: 45px;
}
#top_info {
display: inline-flex;
font-weight: bold;
}
.save_info.button {
vertical-align: top;
padding-right: 0px;
margin-right: 0px;
}
.vertical_space {
margin-top: 5px;
margin-bottom: 5px;
}
.inline-block_10 {
display: inline-block;
width: 10%;
vertical-align: top;
}
.inline-block_90 {
display: inline-block;
width: 90%;
vertical-align: top;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
......@@ -68,10 +68,13 @@
<!-- TOP-CONTAINER -->
<div id="top-container">
<div class="menu" id="top_info">
<!--Div is filled programmatically -->
</div>
<div class="menu" id="db_menu" onmouseover="showSelector('dbSelector');" style="display : none">patients
<div id="dbSelector" class="selector"><div>
<div class="menu_box">
<a class="buttonSelector" onclick="javascript:db.reload()">open patient</a>
<a class="buttonSelector" onclick="javascript:db.call('patient/index')">open patient</a>
<a class="buttonSelector" onclick="javascript:db.save_analysis()">save analysis</a>
</div>
<div class="menu_box">
......
This diff is collapsed.
......@@ -836,7 +836,7 @@ Clone.prototype = {
//segmentation info
html += "<tr><td class='header' colspan='" + (time_length + 1) + "'> segmentation "
html += " <button type='button' class='devel-mode' onclick='m.clones["+ this.index +"].toggle()'>edit</button> "; //Use to hide/display lists
html += " <button type='button' onclick='m.clones["+ this.index +"].toggle()'>edit</button> "; //Use to hide/display lists
html += this.getHTMLModifState() // icon if manual changement
html += "</td></tr>"
......
......@@ -580,6 +580,9 @@ Database.prototype = {
});
var fd = new FormData();
fd.append("fileToUpload", blob);
fd.append("patient_info", self.m.info);
fd.append("samples_info", self.m.samples.info);
fd.append("samples_id", self.m.samples.ids);
$.ajax({
type: "POST",
......@@ -818,7 +821,6 @@ Database.prototype = {
return args
},
// Log functions, to server
// 'quiet' is set to true to avoid infinite loops with timeouts
log : function (lvl, msg) { this.request('default/logger', {'lvl': lvl, 'msg': msg}, true) },
......
......@@ -53,13 +53,6 @@ var sp = new ScatterPlot("visu", m); // Scatterplot (both grid and b
var segment = new Segment("bot-container", m); // Segmenter
/* [WIP] Builder
* The builder completes some informations in the menu and provide some tools
* TODO replace with a menu and info view
*/
var builder = new Builder(m);
/* Similarity
* retrieve and compute everything related to the similarity matrix
*/
......@@ -84,6 +77,13 @@ var report = new Report(m)
var db = new Database(m);
/* [WIP] Builder
* The builder completes some informations in the menu and provide some tools
* TODO replace with a menu and info view
*/
var builder = new Builder(m);
/* [WIP] Shortcut (optional)
* This provides keyboard shortcuts to interact with the browser.
*/
......
......@@ -483,6 +483,14 @@ Model.prototype = {
return timestamp
},
getInfoTime: function(time) {
var time = typeof time !== 'undefined' ? time : this.t
var info = "-"
if (typeof this.samples.info != 'undefined' && this.samples.info != null)
info = this.samples.info[time]
return info
},
/**
* return the soft version used to produce all samples results <br>
* return "multiple" if different soft have been used for different samples
......@@ -1437,6 +1445,8 @@ Model.prototype = {
switch (format) {
case "name":
case "names":
//TODO resolve thid hack
case "short_name":
if (typeof this.samples.names != 'undefined' && this.samples.names[timeID] != ""){
result = this.samples.names[timeID]
......@@ -1451,7 +1461,7 @@ Model.prototype = {
break;
case "sampling_date":
if ((typeof this.samples.timestamp != 'undefined') && this.samples.timestamp[timeID])
if ((typeof this.samples.timestamp != 'undefined') && this.samples.timestamp[timeID] && this.samples.timestamp[timeID] != "None")
result = this.samples.timestamp[timeID].split(" ")[0]
break;
......@@ -1475,6 +1485,12 @@ Model.prototype = {
}
}
}
break;
default:
if (typeof this.samples[format] != 'undefined') {
result = this.samples[format][timeID];
}
break;
}
return result
},
......
......@@ -505,6 +505,7 @@ Model_loader.prototype = {
var analysisData = {
producer : "browser",
info : this.info,
timestamp : timestamp,
vidjil_json_version : VIDJIL_JSON_VERSION,
samples : this.samples,
......
......@@ -16,12 +16,12 @@ class TestMultilocus < BrowserTest
end
def test_00_info_segmentation
assert ($b.div(:id => 'info_segmented').text.include? '742 377 reads (94.35%)'), ' Incorrect number of segmented reads'
assert ($b.div(:id => 'info_segmented').text.include? '742 377 (94.35%)'), ' Incorrect number of segmented reads'
end
def test_00_info_reads
assert ($b.div(:id => 'info_total').text.include? '786 861 reads'), 'Incorrect number of reads'
assert ($b.div(:id => 'info_total').text.include? '786 861'), 'Incorrect number of reads'
end
def test_00_default_point_name
......
......@@ -205,6 +205,7 @@ def get_data():
config_name = db.config[request.vars["config"]].name
command = db.config[request.vars["config"]].command
data["patient_id"] = request.vars["patient"]
data["patient_name"] = patient_name
data["config_name"] = config_name
data["dataFileName"] = patient_name + " (" + config_name + ")"
......@@ -213,11 +214,13 @@ def get_data():
data["samples"]["info"] = []
data["samples"]["timestamp"] = []
data["samples"]["db_key"] = []
data["samples"]["ids"] = []
for i in range(len(data["samples"]["original_names"])) :
data["samples"]["original_names"][i] = data["samples"]["original_names"][i].split('/')[-1]
data["samples"]["info"].append('')
data["samples"]["timestamp"].append('')
data["samples"]["db_key"].append('')
data["samples"]["ids"].append('')
## récupération des infos stockées sur la base de données
query = db( ( db.patient.sample_set_id == db.sample_set_membership.sample_set_id)
......@@ -232,6 +235,7 @@ def get_data():
for i in range(len(data["samples"]["original_names"])) :
data_file = data["samples"]["original_names"][i]
if row.sequence_file.data_file == data_file :
data["samples"]["ids"][i] = row.sequence_file.id
data["samples"]["original_names"][i] = filename
data["samples"]["timestamp"][i] = str(row.sequence_file.sampling_date)
data["samples"]["info"][i] = row.sequence_file.info
......@@ -361,6 +365,15 @@ def save_analysis():
analyze_date = datetime.datetime.fromtimestamp(ts).strftime('%Y-%m-%d %H:%M:%S')
)
db(db.patient.id == request.vars['patient']).update(info = request.vars['patient_info']);
ids = request.vars['samples_id'].split(',')
infos = request.vars['samples_info'].split(',')
# TODO find way to remove loop ?
for i in range(0, len(ids)):
db(db.sequence_file.id == int(ids[i])).update(info = infos[i])
patient_name = db.patient[request.vars['patient']].first_name + " " + db.patient[request.vars['patient']].last_name
res = {"success" : "true",
......
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