Skip to content
GitLab
Commit 55be9905 authored by Mathieu Giraud's avatar Mathieu Giraud
Browse files

Merge branch 'feature-c/sequence_feature_local_settings' into 'dev' 

aligner.js; store collumns and feature layers selection in localstorage

See merge request !1236
parents a965b4e7 061030dd
Pipeline #732008 failed with stages
in 54 minutes and 55 seconds
Hide whitespace changes
Inline Side-by-side
browser/js/aligner.js
View file @ 55be9905
......@@ -73,11 +73,18 @@ Aligner.prototype = {
var id = "aligner_checkbox_"+mc.id;
clone.title = mc.title;
input.id = id;
input.checked = mc.enabled;
if (localStorage.getItem(`aligner_layers_${mc.title}`)){
input.checked = localStorage.getItem(`aligner_layers_${mc.title}`) === "true"
self.toggleLayers(mc.layers, input.checked, true);
} else {
input.checked = mc.enabled;
}
clone.setAttribute("for", id);
text.innerHTML = mc.text;
this.connect_checkbox(clone, mc.layers);
this.connect_checkbox(clone, mc.title, mc.layers);
menuC.appendChild(clone);
}
}
......@@ -87,6 +94,7 @@ Aligner.prototype = {
var self = this;
var available_axis = AXIS_ALIGNER;
this.selectedAxis = []
var menu = document.getElementById("segmenter_axis_select");
for (var i in available_axis) {
......@@ -107,22 +115,35 @@ Aligner.prototype = {
axis_input.setAttribute('value', axis_p.name);
axis_input.setAttribute('id', "sai"+i); // segmenter axis input
axis_input.className = "aligner-checkbox-input";
if (axis_p.name == "Size" ||
axis_p.name == "[IMGT] Productivity" ||
axis_p.name == "[IMGT] VIdentity" ) axis_input.setAttribute('checked', "");
// control if a value is present in localsettings
if (localStorage.getItem(`aligner_axis_${axis_p.name}`)){
if (localStorage.getItem(`aligner_axis_${axis_p.name}`) == "true"){
if (this.selectedAxis.length < 5) {
this.selectedAxis.push(Axis.prototype.getAxisProperties(axis_p.name))
axis_input.setAttribute('checked', "");
}
}
} else {
if (axis_p.name == "Size" ||
axis_p.name == "[IMGT] Productivity" ||
axis_p.name == "[IMGT] VIdentity" ){
if (this.selectedAxis.length < 5) {
axis_input.setAttribute('checked', "");
this.selectedAxis.push(Axis.prototype.getAxisProperties(axis_p.name))
}
}
}
axis_label.appendChild(axis_input);
axis_label.appendChild(axis_text);
axis_option.appendChild(axis_label);
menu.appendChild(axis_label);
this.connect_axisbox(axis_label, axis_p.name);
$(axis_input).unbind("click");
self.connect_axisbox(axis_input);
}
this.selectedAxis = [Axis.prototype.getAxisProperties("[IMGT] Productivity"),
Axis.prototype.getAxisProperties("[IMGT] VIdentity"),
Axis.prototype.getAxisProperties("Size")];
},
// return list of external data that need to be refreshed to display enabled layers
......@@ -207,29 +228,56 @@ Aligner.prototype = {
},
//check axis selected in menu to update and update axisBox dom elements accordingly
connect_axisbox:function (elem){
getSelectedAxis:function (){
var self = this;
$(elem).click(function(e) {
var menu = document.getElementById("segmenter_axis_select");
var inputs = menu.getElementsByTagName("input");
var selectedAxis = [];
for (var i in inputs)
if (inputs[i].checked) selectedAxis.push(Axis.prototype.getAxisProperties(inputs[i].value));
if (selectedAxis.length <= 5){
self.selectedAxis = selectedAxis;
self.update();
}else{
console.log({ msg: "Data columns selection is limited to 5.<br/>Please disable some axis before adding new one.", type: "flash", priority: 2 });
this.checked = false;
}
e.stopPropagation();
})
var menu = document.getElementById("segmenter_axis_select");
var inputs = menu.getElementsByTagName("input");
var selectedAxis = [];
for (var i in inputs){
if (inputs[i].checked) selectedAxis.push(inputs[i].value);
}
console.default.log( `${selectedAxis.length} selectedAxis: ${selectedAxis}`)
return selectedAxis
},
//check axis selected in menu to update and update axisBox dom elements accordingly
connect_axisbox:function (elem, title){
var self = this;
$(function () {
$(elem).find('input').unbind("click");
$(elem).find('input').click(function(e){
var input = elem.getElementsByTagName("input")[0];
var axis = Axis.prototype.getAxisProperties(input.value)
var selectedAxis = self.getSelectedAxis()
if (input.checked){
if (selectedAxis.length > 5 ){
console.log({ msg: "Data columns selection is limited to 5.<br/>Please disable some axis before adding new one.", type: "flash", priority: 2 });
input.checked = false;
return
} else {
self.selectedAxis.push(axis)
self.update()
}
} else if (!input.checked){
var index = self.selectedAxis.indexOf(axis)
self.selectedAxis.splice(index, 1)
self.update()
}
if (localStorage){
localStorage.setItem(`aligner_axis_${title}`, input.checked)
}
});
});
},
connect_checkbox: function(elem, layers){
connect_checkbox: function(elem, title, layers){
var self = this;
//connect event to checkbox and checkbox_label
......@@ -237,6 +285,9 @@ Aligner.prototype = {
$(elem).find('input').unbind("click");
$(elem).find('input').click(function(e){
var input = elem.getElementsByTagName("input")[0];
if (localStorage){
localStorage.setItem(`aligner_layers_${title}`, input.checked)
}
self.toggleLayers(layers, input.checked, true);
e.stopPropagation();
});
......
browser/test/cypress/integration/test_aligner.js
View file @ 55be9905
......@@ -96,7 +96,53 @@ describe('Aligner', function () {
return
})
it('Aligner align menu', function() {
it('Aligner menu, settings keep collumns', function() {
cy.openAnalysis("doc/analysis-example2.vidjil")
cy.selectClone(0)
// Start with size + imgt productivity + imgt identity
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Size > .sizeBox')
.should("exist")
.should("be.visible")
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Sequence')
.should("not.exist")
// Set quality layer to true, verify that div is present
cy.get("#sai0") // size col
.should("be.checked")
.click({force: true})
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Size > .sizeBox')
.should("not.exist")
cy.get("#sai1") // seq length
.should("not.be.checked")
.click({force: true})
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Sequence')
.should("exist")
// Reload page but keep settings
cy.reload()
cy.setBrowser(url)
cy.openAnalysis("doc/analysis-example2.vidjil")
cy.selectClone(0)
// Check if checkbox is correctly setted, and quality layer visible when a clone is selected
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Size > .sizeBox')
.should("not.exist")
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Sequence')
.should("exist")
// Test limit of five concurent element selected
cy.get("#sai0").should("not.be.checked")
.click({force: true}).should("be.checked")
cy.get("#sai2").should("not.be.checked")
.click({force: true}).should("be.checked")
cy.get("#sai3").should("not.be.checked") // Click on 6th element
.click({force: true}).wait(50).should("not.be.checked")
})
it('Aligner align menu - alignement layers', function() {
cy.openAnalysis("doc/analysis-example2.vidjil")
//select/align clones
......@@ -123,7 +169,7 @@ describe('Aligner', function () {
return
})
it('Aligner highlight menu', function() {
it('Aligner highlight menu - layer visible', function() {
cy.openAnalysis("doc/analysis-example2.vidjil")
//select/align clones
......@@ -228,4 +274,53 @@ describe('Aligner', function () {
.should("be.visible")
})
it('Aligner menu, settings keep features/layers', function() {
cy.openAnalysis("doc/analysis-example2.vidjil")
cy.selectClone(0)
cy.get('#seq0 > .sequence-holder > .seq-fixed > .axisBox > .Size > .sizeBox')
.should("exist")
.should("be.visible")
// Set quality layer to TRUE, verify that div is present
cy.get('.seq_layer_quality > div')
.should("not.exist")
cy.get("#aligner_checkbox_Quality")
.should("not.be.checked")
.click({force: true})
.should("be.checked")
cy.get('.seq_layer_quality > div')
.should("exist")
// Set VDJ layer to FALSE, verify that div is NOT visible
cy.get('#seq0 > .sequence-holder > .seq-mobil > .sequence-holder2 > :nth-child(1) > .seq_layer_V')
.should('not.have.css', 'display', 'none')
cy.get("#aligner_checkbox_VDJ")
.should("be.checked")
.click({force: true})
.should("not.be.checked")
cy.get('#seq0 > .sequence-holder > .seq-mobil > .sequence-holder2 > :nth-child(1) > .seq_layer_V')
.should('have.css', 'display', 'none')
// Reload page but keep settings
cy.reload()
cy.setBrowser(url)
cy.openAnalysis("doc/analysis-example2.vidjil")
cy.selectClone(0)
// Quality layer still TRUE
cy.get("#aligner_checkbox_Quality").should("be.checked")
cy.get('.seq_layer_quality > div').should("exist")
// VDJ layer still FALSE
cy.get("#aligner_checkbox_VDJ").should("not.be.checked")
cy.get('#seq0 > .sequence-holder > .seq-mobil > .sequence-holder2 > :nth-child(1) > .seq_layer_V')
.should('have.css', 'display', 'none')
})
})
doc/vidjil-format.md
View file @ 55be9905
......@@ -129,13 +129,18 @@ do a correct gathering.
{
"id": "clone-001",
"sequence": "CTCATACACCCAGGAGGTGGAGCTGGATATTGATACTACGAAATCTAATTGAAAATGATTCTGGGGTCTATTACTGTGCCACCTGGGCCTTATTATAAGAAACTCTTTGGCAGTGGAAC",
"reads" : [ 243241, 14717 ],
"reads" : [ 243241, 14717 ],
"germline": "TRG",
"top": 1,
"seg":
{
"5": {"name": "TRGV5*01", "start": 1, "stop": 87, "delRight": 5},
"3": {"name": "TRGJ1*02", "start": 89, "stop": 118, "delLeft": 0}
"5": {"name": "TRGV5*01", "start": 1, "stop": 87, "delRight": 5},
"3": {"name": "TRGJ1*02", "start": 89, "stop": 118, "delLeft": 0},
"quality": {
"start": 1,
"stop": 118,
"seq": "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!TAATTGAAAATGATTCTGGGGTCTATTACTGTGCCACCTGGGCCTTATTATAAGA!!!!!!!!!!!!!!!!!!!"
}
}
},
{
......
Supports Markdown
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