Commit cbe6df2c authored by Mathieu Giraud's avatar Mathieu Giraud
Browse files

index.html, js.clone.js: clonotype

see vdj#1223
parent 3978e689
Pipeline #244155 failed with stages
in 15 seconds
......@@ -83,7 +83,7 @@
Data file (.vidjil):<br />
<input id="upload_json" type="file" name="json" /></br>
<p class='help'>The .vidjil file stores a set of clones on several points.</p>
<p class='help'>The .vidjil file stores a set of clonotypes on several points.</p>
Analysis file (.analysis, optional):<br />
<input id="upload_pref" type="file" name="pref" /></br>
......@@ -106,7 +106,7 @@
<div id="add_clone_menu">
<span class="closeButton" onclick="cancel();">X</span>
<h2>Add clones from sequences</h2>
<h2>Add clonotypes from sequences</h2>
<textarea id="addclone_input" placeholder="Sequence(s) (Fasta)"></textarea>
......@@ -156,7 +156,7 @@
</div>
<div class="menu_box devel-mode">
<a class="buttonSelector" id="add_clones" onclick="javascript:showAddManualCloneMenu()">add
clones from sequences</a>
clonotypes from sequences</a>
</div>
<!--<a class="buttonSelector" onclick="javascript:m.resetAnalysis()">reset analysis</a> -->
<!--<a class="buttonSelector" onclick="javascript:reset()">reset all</a> -->
......@@ -170,11 +170,11 @@
<a class="buttonSelector" id="export_analysis" onclick="javascript:m.saveAnalysis()">export analysis</a>
<a class="buttonSelector" id="export_svg1" onclick="javascript:m.exportViewToPNG(document.querySelector('#visu2_svg'))">export top graph (PNG)</a>
<a class="buttonSelector" id="export_svg2" onclick="javascript:m.exportViewToPNG(document.querySelector('#visu_svg'))">export bottom graph (PNG)</a>
<a class="buttonSelector" id="export_csv" onclick="javascript:m.exportCSV()">export csv (visible clones)</a>
<a class="buttonSelector" id="export_fasta" onclick="javascript:m.exportFasta()">export fasta (selected clones)</a>
<a class="buttonSelector" id="export_airr" onclick="javascript:m.exportCloneAs('airr')">export AIRR (selected clones)</a>
<a class="buttonSelector devel-mode" id="export_json" onclick="javascript:m.exportCloneAs('json')">export JSON (selected clones)</a>
<a class="buttonSelector disabledClass" id="export_fasta_align" onclick="javascript:segment.exportAlignFasta()">export aligned fasta (selected clones)</a>
<a class="buttonSelector" id="export_csv" onclick="javascript:m.exportCSV()">export csv (visible clonotypes)</a>
<a class="buttonSelector" id="export_fasta" onclick="javascript:m.exportFasta()">export fasta (selected clonotypes)</a>
<a class="buttonSelector" id="export_airr" onclick="javascript:m.exportCloneAs('airr')">export AIRR (selected clonotypes)</a>
<a class="buttonSelector devel-mode" id="export_json" onclick="javascript:m.exportCloneAs('json')">export JSON (selected clonotypes)</a>
<a class="buttonSelector disabledClass" id="export_fasta_align" onclick="javascript:segment.exportAlignFasta()">export aligned fasta (selected clonotypes)</a>
</div>
<div class="menu_box devel-mode">
......@@ -191,7 +191,7 @@
<a class="buttonSelector" onclick="m.restoreClusters();">revert to previous clusters</a>
</div>
<div class="menu_box">
<a id="clusterBy_selected" class="buttonSelector" onclick="m.merge();">cluster selected clones</a>
<a id="clusterBy_selected" class="buttonSelector" onclick="m.merge();">cluster selected clonotypes</a>
<a id="clusterBy_5" class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).getGene(5)});">cluster by V/5' </a>
<a id="clusterBy_3" class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).getGene(3)});">cluster by J/3' </a>
<a id="clusterBy_cdr3" class="buttonSelector" onclick="m.clusterBy(function(id){return m.clone(id).getSegAASequence('junction')});">cluster by CDR3 </a>
......@@ -211,7 +211,7 @@
<div class="menu" id="color_menu" onmouseover="showSelector('colorSelector');" > color by
<div class="div-menu-selector"><select id="color_menu_select" class="menu-selector" onchange="m.changeColorMethod(this.value, true, true)">
<option value="Tag">tag</option>
<option value="clone">clone</option>
<option value="clone">clonotype</option>
<option value="cdr3">CDR3</option>
<option value="V">V/5'</option>
<option value="J">J/3'</option>
......@@ -233,8 +233,8 @@
</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
title="Hide clonotypes that are not present in the current sample">
<input id="filter_switch_sample_check" type="checkbox"></input> Focus on clonotypes of one
sample
</div>
</div>
......@@ -288,7 +288,7 @@
</label>
</div>
<div class="menu_box">
N regions in clone names</br>
N regions in clonotype names</br>
<label for="menuCloneNot_nucleotide_number" class="buttonSelector"
onclick="m.changeCloneNotation('nucleotide_number', true, true)">
<input id="menuCloneNot_nucleotide_number" type="radio" name="show_name"
......@@ -613,7 +613,7 @@
<span class="stats_content"></span>
<a class="focus_selected" id="focus_selected">(focus)</a>
<a class="focus_selected" id="hide_selected">(hide)</a>
<span class="button" id="star_selected" title="Tag selected clones">
<span class="button" id="star_selected" title="Tag selected clonotypes">
<i id="tag_icon__multiple" class="icon-star-2"></i></span>
<span id="fixsegmenter" class="button">
<i title="fix the segmenter in his position" class="icon-pin-outline"></i></span>
......@@ -638,13 +638,13 @@
<template id="aligner-F">
<div class="seq-fixed cloneName">
<span class="nameBox" title="clone name">
<span class="delBox"><i class="icon-cancel" title="Unselect this clone"></i></span>
<span class="nameBox" title="clonotype name">
<span class="delBox"><i class="icon-cancel" title="Unselect this clonotype"></i></span>
<span class="nameBox2"></span>
</span>
<span class="axisBox"></span>
<span class="starBox" id="color60"><i id="tag_icon_60" title="clone_tag" class="icon-star-2"></i></span>
<span class="infoBox"><i class="icon-info" title="clone information"></i></span>
<span class="infoBox"><i class="icon-info" title="clonotype information"></i></span>
</div>
</template>
......
......@@ -98,17 +98,17 @@ AXIS_DEFAULT = {
germline: function(){return m.germlineJ.system},
autofill: false
},
"clone consensus length" : {
name: "clone consensus length",
"clonotype consensus length" : {
name: "clonotype consensus length",
doc: "length of the consensus sequence",
fct: function(clone) {return clone.getSequenceLength()},
autofill: true,
color: { fct: function(t){return d3.interpolatePlasma(t)}},
isInAligner: true
},
"clone average read length" : {
name: "clone average read length",
doc: "average length of the reads belonging to each clone",
"clonotype average read length" : {
name: "clonotype average read length",
doc: "average length of the reads belonging to each clonotype",
labels: {
"?": {text:"?", side: "right"}
},
......@@ -123,7 +123,7 @@ AXIS_DEFAULT = {
},
"GC content" : {
name: "GC content",
doc: "%GC content of the consensus sequence of each clone",
doc: "%GC content of the consensus sequence of each clonotype",
fct: function(clone) {return clone.getGCContent()},
autofill: true,
isInAligner: true
......@@ -215,9 +215,9 @@ AXIS_DEFAULT = {
sort : false,
autofill : false
},
"clone consensus coverage": {
name: "clone consensus coverage",
doc: "ratio of the length of the clone consensus sequence to the median read length of the clone",
"clonotype consensus coverage": {
name: "clonotype consensus coverage",
doc: "ratio of the length of the clonotype consensus sequence to the median read length of the clonotype",
// "Coverage between .85 and 1.0 (or more) are good values",
fct: function(clone){return clone.coverage},
scale: {
......@@ -234,7 +234,7 @@ AXIS_DEFAULT = {
autofill: true
},
"size" : {
doc: "ratio of the number of reads of each clone to the total number of reads in the selected locus",
doc: "ratio of the number of reads of each clonotype to the total number of reads in the selected locus",
name: "size",
fct : function(clone,t){return clone.getSize(t)},
scale: { mode: "log"},
......@@ -243,7 +243,7 @@ AXIS_DEFAULT = {
isInAligner:true
},
"size (other sample)" : {
doc: "ratio of the number of reads of each clone to the total number of reads in the selected locus, on a second sample",
doc: "ratio of the number of reads of each clonotype to the total number of reads in the selected locus, on a second sample",
name: "size (other sample)",
fct : function(clone){return clone.getSize(m.tOther)},
scale: {
......@@ -255,7 +255,7 @@ AXIS_DEFAULT = {
},
"number of samples" : {
name: "number of samples",
label: "number of samples sharing each clone",
label: "number of samples sharing each clonotype",
fct : function(clone){return clone.getNumberNonZeroSamples()},
scale: {
mode: "linear",
......@@ -296,7 +296,7 @@ AXIS_DEFAULT = {
//hide : (typeof config === 'undefined' || ! config.clonedb),
},
"cloneDB patients/runs/sets occurrences": {
doc: "number of patients/runs/sets sharing clones in cloneDB",
doc: "number of patients/runs/sets sharing clonotypes in cloneDB",
name: "cloneDB occurrences",
scale: {
"mode": "linear",
......@@ -423,8 +423,8 @@ AXIS_DEFAULT = {
germline: "multi",
autofill: true
},
"clone consensus length2" : {
name: "clone consensus length",
"clonotype consensus length2" : {
name: "clonotype consensus length",
doc: "length of the consensus sequence",
labels: {
"< 50": {text:"< 50", side: "left", type: "bold"},
......
......@@ -647,7 +647,7 @@ Clone.prototype = {
* @param {string} name
* */
changeName: function (newName) {
console.log("changeName() (clone " + this.index + " <<" + newName + ")");
console.log("changeName() (clonotype " + this.index + " <<" + newName + ")");
this.c_name = newName;
this.m.updateElem([this.index]);
this.m.analysisHasChanged = true
......@@ -672,7 +672,7 @@ Clone.prototype = {
var loci = [this.getGene("5").substring(0,3), this.getGene("3").substring(0,3) ]
locus = loci[0]
if (loci[0] != loci[1]) {
console.log("Clone " + this.getName() + "recombines sequences from two separate loci. Using: " + locus)
console.log("Clonotype " + this.getName() + "recombines sequences from two separate loci. Using: " + locus)
}
}
......@@ -1201,7 +1201,7 @@ Clone.prototype = {
changeTag: function (newTag) {
newTag = "" + newTag
newTag = newTag.replace("tag", "");
console.log("changeTag() (clone " + this.index + " <<" + newTag + ")");
console.log("changeTag() (clonotype " + this.index + " <<" + newTag + ")");
this.tag = newTag;
this.m.updateElem([this.index]);
this.m.analysisHasChanged = true;
......@@ -1569,7 +1569,7 @@ Clone.prototype = {
html += "<p>select <a class='button' onclick='m.selectCorrelated(" + this.index + ", 0.90); m.closeInfoBox();'>correlated</a> clones</p>"
html += "<p>select <a class='button' onclick='m.selectCorrelated(" + this.index + ", 0.99); m.closeInfoBox();'>strongly correlated</a> clones</p>"
html += "<p>Download clone information as "
html += "<p>Download clonotype information as "
html += "<a class='button' id='download_info_"+ this.index +"_airr' onclick='m.exportCloneAs(\"airr\", [" + this.index + "])'>AIRR</a>"
html += "<a class='button devel-mode' id='download_info_"+ this.index +"_json' onclick='m.exportCloneAs(\"json\", [" + this.index + "])'>JSON</a>"
html += "</p>"
......@@ -1606,13 +1606,13 @@ Clone.prototype = {
//cluster info
if (isCluster) {
html += header("clone")
html += row_1("clone name", this.getName())
html += header("clonotype")
html += row_1("clonotype name", this.getName())
if (this.hasSizeConstant()){
html += row_1("clone short name", this.getShortName())
html += "<tr><td>clone size (n-reads (total reads))"
html += row_1("clonotype short name", this.getShortName())
html += "<tr><td>clonotype size (n-reads (total reads))"
} else if (this.hasSizeDistrib()) {
html += "<tr><td title='Current size; depending of the number of clones curently not filtered'>current clone size<br/>(n-reads (total reads))"
html += "<tr><td title='Current size; depending of the number of clonotypes curently not filtered'>current clonotype size<br/>(n-reads (total reads))"
}
if (this.normalized_reads && this.m.normalization_mode == this.m.NORM_EXTERNAL) {
html += "<br />[normalized]"
......@@ -1632,7 +1632,7 @@ Clone.prototype = {
}
html += "</td>"
}
html += "</tr><tr><td>clone size (%)</td>"
html += "</tr><tr><td>clonotype size (%)</td>"
for (var k = 0; k < time_length; k++) {
html += "<td>" + this.getStrSize(this.m.samples.order[k]) + "</td>"
}
......@@ -1789,7 +1789,7 @@ Clone.prototype = {
//IMGT info
var other_infos = {"imgt": "<a target='_blank' href='http://www.imgt.org/IMGT_vquest/share/textes/'>IMGT/V-QUEST</a>",
"clonedb": "<a target='_blank' href='http://ecngs.vidjil.org/clonedb'>CloneDB</a> "+ (this.numberSampleSetInCloneDB() > 0 ? "<br /> A similar clone exists in "+this.numberSampleSetInCloneDB()+" other patients/runs/sets" : "")};
"clonedb": "<a target='_blank' href='http://ecngs.vidjil.org/clonedb'>CloneDB</a> "+ (this.numberSampleSetInCloneDB() > 0 ? "<br /> A similar clonotype exists in "+this.numberSampleSetInCloneDB()+" other patients/runs/sets" : "")};
for (var external_tool in other_infos) {
if (typeof this.seg[external_tool] != 'undefined' &&
this.seg[external_tool] !== null) {
......@@ -1809,15 +1809,15 @@ Clone.prototype = {
/*
axisOptions: function() {
return [
"clone consensus length", "clone average read length", "GC content", "N length",
"clonotype consensus length", "clonotype average read length", "GC content", "N length",
"CDR3 length (nt)", "productivity", "productivity-IMGT",
"VIdentity-IMGT", "clone consensus coverage",
"VIdentity-IMGT", "clonotype consensus coverage",
"tag", "coverage", "size", "number of samples", "primers"
];
},
*/
/**
* start to fill a node with clone informations common between segmenter and list
* start to fill a node with clonotype informations common between segmenter and list
* @param {dom_object} div_elem - html element to complete
* */
div_elem: function (div_elem, clear) {
......@@ -1869,7 +1869,7 @@ Clone.prototype = {
span_info.className += " " + this.isWarned() ;
span_info.appendChild(icon('icon-warning-1', this.warnText()));
} else {
span_info.appendChild(icon('icon-info', 'clone information'));
span_info.appendChild(icon('icon-info', 'clonotype information'));
}
}
......@@ -1934,7 +1934,7 @@ Clone.prototype = {
},
unselect: function () {
console.log("unselect() (clone " + this.index + ")")
console.log("unselect() (clonotype " + this.index + ")")
if (this.select) {
this.select = false;
this.m.removeFromOrderedSelectedClones(this.index);
......
......@@ -673,7 +673,7 @@ Report.prototype = {
cloneList : function(time) {
if (typeof time == "undefined") time = -1
var container = this.container('Selected clones')
var container = this.container('Selected clonotypes')
for (var i=0; i<this.list.length; i++){
var cloneID = this.list[i]
......
......@@ -330,7 +330,7 @@ Graph.prototype = {
line_content = document.createElement("td")
line_content.id = this.id +"_listElem_hideNotShare"
line_content.classList.add("graph_listAll")
line_content.textContent = "focus on selected clones"
line_content.textContent = "focus on selected clonotypes"
line_content.colSpan = "2"
line.appendChild(line_content)
table.appendChild(line)
......
......@@ -216,7 +216,7 @@ List.prototype = {
star.className = "starBox";
star_onclick(key, star);
star.appendChild(icon('icon-star-2', 'clone tag'))
star.appendChild(icon('icon-star-2', 'clonotype tag'))
div.appendChild(star)
this.index_data[key] = value;
......@@ -239,7 +239,7 @@ List.prototype = {
var a_split = document.createElement('a')
a_split.className = "button"
a_split.appendChild(icon('icon-plus', 'Show all subclones'))
a_split.appendChild(icon('icon-plus', 'Show all sub-clonotypes'))
a_split.id = "list_split_all"
a_split.onclick = function () {
self.m.split_all(true)
......@@ -247,14 +247,14 @@ List.prototype = {
var a_unsplit = document.createElement('a')
a_unsplit.className = "button"
a_unsplit.appendChild(icon('icon-minus', 'Hide all subclones'))
a_unsplit.appendChild(icon('icon-minus', 'Hide all sub-clonotypes'))
a_unsplit.id = "list_unsplit_all"
a_unsplit.onclick = function () {
self.m.split_all(false)
}
var filter_label = document.createElement('span')
filter_label.appendChild(icon('icon-search-1', 'Search a clone by name, sequence, or V/D/J gene'))
filter_label.appendChild(icon('icon-search-1', 'Search a clonotype by name, sequence, or V/D/J gene'))
var filter_input = document.createElement('input')
filter_input.id = 'filter_input'
......@@ -507,10 +507,10 @@ List.prototype = {
//update cluster icon
if (this.m.clusters[cloneID].length > 1) {
if (clone.split) {
cloneDom.content("clusterBox", icon('icon-minus', 'Hide the subclones').outerHTML)
cloneDom.content("clusterBox", icon('icon-minus', 'Hide the sub-clonotypes').outerHTML)
this.showClusterContent(cloneID, false)
} else {
cloneDom.content("clusterBox", icon('icon-plus', 'Show the subclones').outerHTML)
cloneDom.content("clusterBox", icon('icon-plus', 'Show the sub-clonotypes').outerHTML)
this.hideClusterContent(cloneID, false)
}
self.div_cluster(document.getElementById("cluster" + cloneID), cloneID);
......@@ -578,7 +578,7 @@ List.prototype = {
span_info.onclick = function () {
self.m.displayInfoBox(id);
}
span_info.appendChild(icon('icon-info', 'clone information'));
span_info.appendChild(icon('icon-info', 'clonotype information'));
var img = document.createElement('span');
img.onclick = function () {
......
......@@ -150,16 +150,16 @@ Model.prototype = {
// Particular, take the nb reads value of the distribution
"size": "size",
// Should be in Array format
"clone consensus length" : "lenSeqConsensus",
"clone average read length" : "lenSeqAverage", // make a round on it (into fuse.py) ?
"clonotype consensus length" : "lenSeqConsensus",
"clonotype average read length" : "lenSeqAverage", // make a round on it (into fuse.py) ?
/////////////////////
// Fuse --> Axes
"seg5": "V/5' gene",
"seg4": "D/4' gene",
"seg3": "J/3' gene",
"lenCDR3": "CDR3 length (nt)",
"lenSeqConsensus": "clone consensus length",
"lenSeqAverage": "clone average read length",
"lenSeqConsensus": "clonotype consensus length",
"lenSeqAverage": "clonotype average read length",
}
// List of axe that must be in an array format
this.distrib_axe_is_timmed = {
......@@ -268,16 +268,16 @@ Model.prototype = {
];
this.tag = [
{"color" : "#dc322f", "name" : "clone 1", "display" : true},
{"color" : "#cb4b16", "name" : "clone 2", "display" : true},
{"color" : "#b58900", "name" : "clone 3", "display" : true},
{"color" : "#dc322f", "name" : "clonotype 1", "display" : true},
{"color" : "#cb4b16", "name" : "clonotype 2", "display" : true},
{"color" : "#b58900", "name" : "clonotype 3", "display" : true},
{"color" : "#268bd2", "name" : "standard", "display" : true},
{"color" : "#6c71c4", "name" : "standard (noise)", "display" : true},
{"color" : "#2aa198", "name" : "custom 1", "display" : true},
{"color" : "#d33682", "name" : "custom 2", "display" : true},
{"color" : "#859900", "name" : "custom 3", "display" : true},
{"color" : "", "name" : "-/-", "display" : true},
{"color" : "#bdbdbd", "name" : "smaller clones", "display" : true}
{"color" : "#bdbdbd", "name" : "smaller clonotypes", "display" : true}
]
this.default_tag=8;
......@@ -1496,9 +1496,9 @@ changeAlleleNotation: function(alleleNotation, update, save) {
other_quantifiable_clones.forEach(function(pos) {
var c = self.clone(pos);
c.reads = newOthers[c.germline];
c.name = c.germline + " smaller clones";
c.name = c.germline + " smaller clonotypes";
if (self.someClonesFiltered)
c.name += " + filtered clones";
c.name += " + filtered clonotypes";
})
},
......@@ -2466,7 +2466,7 @@ changeAlleleNotation: function(alleleNotation, update, save) {
var string;
if (clonesIDs.length > 1){
string = "Tag for " + clonesIDs.length + " clones"
string = "Tag for " + clonesIDs.length + " clonotypes"
} else {
if (clonesIDs[0][0] == "s") cloneID = clonesIDs[0].substr(3);
string = "Tag for "+this.clone(clonesIDs[0]).getName()
......@@ -3317,7 +3317,7 @@ changeAlleleNotation: function(alleleNotation, update, save) {
self.shouldRefresh();
self.update();
console.log({ msg: "Clone(s) added!", type: "flash", priority: 1 })
console.log({ msg: "Clonotype(s) added!", type: "flash", priority: 1 })
},
error: function (xhr, textStatus, errorThrown) {
displayAjax(false);
......
......@@ -33,9 +33,9 @@ function ScatterPlot_menu(default_preset) {
"V/J (genes)" : { "x" : "V/5' gene", "y": "J/3' gene", mode:"grid"},
"V/J (alleles)" : { "x" : "V/5 allele", "y": "J/3 allele"},
"V/N length" : { "x" : "V/5' gene", "y": "N length"},
"read length / locus" : { "x" : "clone average read length","y": "locus"},
"read length / locus" : { "x" : "clonotype average read length", "y": "locus"},
//"V/abundance" : { "x" : "V/5' gene", "y": "size"},
"read length distribution" :{ "x" : "clone average read length"},
"read length distribution" :{ "x" : "clonotype average read length"},
"V distribution" : { "x" : "V/5' gene"},
"N length distribution" : { "x" : "N length"},
"CDR3 length distribution" :{ "x" : "CDR3 length (nt)"},
......@@ -43,9 +43,9 @@ function ScatterPlot_menu(default_preset) {
"compare two samples" : { "x" : "size", "y": "size (other sample)"},
//"plot by similarity" : { "x" : "tsneX", "y": "tsneY"},
//"plot by similarity and by locus" : { "x" : "tsneX_system", "y": "tsneY_system"},
"clone average read length / GC content" : { "x":"clone average read length", "y" : "GC content"},
"clone consensus coverage / GC content" : { "x": "clone consensus length", "y" : "GC content"},
"number of samples sharing each clone" : { "x": "number of samples", "y" : "locus"},
"clonotype average read length / GC content" : { "x":"clonotype average read length", "y" : "GC content"},
"clonotype consensus coverage / GC content" : { "x": "clonotype consensus length", "y" : "GC content"},
"number of samples sharing each clonotype " : { "x": "number of samples", "y" : "locus"},
//"interpolated length between BIOMED2 primers (inclusive)" : { "x": "primers", "y" : "size"},
"number of deletions for the segment V/5 in 3" :{ "x": "V/5' deletions in 3'"},
"number of deletions for the segment J/3 in 5" :{ "x": "J/3' deletions in 5'"},
......
......@@ -348,7 +348,7 @@ function processCloneDBContents(results,model) {
final_results['Non viewable samples'] = count_non_viewable;
if (Object.keys(final_results).length === 0)
final_results[''] = "No occurrence of this clone in CloneDB"
final_results[''] = "No occurrence of this clonotype in CloneDB"
final_results.original = results;
final_results.clones_names = clones_results;
......
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