Commit 41ff5f2e authored by Marc Duez's avatar Marc Duez

browser: rework tag color / solarize color

parent 194f4a1e
/* default color solarizeD */
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
html {
height: 100%;
padding: 0px;
......@@ -144,6 +145,7 @@ line {
.graph_line {
stroke-width: 2.5px;
cursor: pointer;
stroke: #839496;
}
.graph_data {
fill: none;
......@@ -167,6 +169,7 @@ line {
.graph_focus {
stroke-width: 5px;
cursor: pointer;
stroke: #fdf6e3;
}
.axis_m {
stroke: #839496;
......@@ -261,9 +264,11 @@ line {
stroke-width: 2.5px;
stroke: #fdf6e3;
cursor: pointer;
fill: #839496;
}
.circle_focus {
cursor: pointer;
fill: #fdf6e3;
}
.circle_hidden {
-webkit-transition: fill 0.2s;
......@@ -1439,3 +1444,33 @@ table.log textarea {
.console-flex {
flex-grow: 1;
}
.tagColor0 {
background: #dc322f;
}
.tagColor1 {
background: #cb4b16;
}
.tagColor2 {
background: #b58900;
}
.tagColor3 {
background: #268bd2;
}
.tagColor4 {
background: #6c71c4;
}
.tagColor5 {
background: #2aa198;
}
.tagColor6 {
background: #d33682;
}
.tagColor7 {
background: #859900;
}
.tagColor8 {
background: #839496;
}
.inactiveTag {
background-image: linear-gradient(45deg, transparent -25%, #000000 100%, #000000 100%, transparent 0%);
}
/* default color solarizeL */
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
html {
height: 100%;
padding: 0px;
......@@ -144,6 +145,7 @@ line {
.graph_line {
stroke-width: 2.5px;
cursor: pointer;
stroke: #657b83;
}
.graph_data {
fill: none;
......@@ -167,6 +169,7 @@ line {
.graph_focus {
stroke-width: 5px;
cursor: pointer;
stroke: #002b36;
}
.axis_m {
stroke: #657b83;
......@@ -261,9 +264,11 @@ line {
stroke-width: 2.5px;
stroke: #002b36;
cursor: pointer;
fill: #657b83;
}
.circle_focus {
cursor: pointer;
fill: #002b36;
}
.circle_hidden {
-webkit-transition: fill 0.2s;
......@@ -1439,3 +1444,33 @@ table.log textarea {
.console-flex {
flex-grow: 1;
}
.tagColor0 {
background: #dc322f;
}
.tagColor1 {
background: #cb4b16;
}
.tagColor2 {
background: #b58900;
}
.tagColor3 {
background: #268bd2;
}
.tagColor4 {
background: #6c71c4;
}
.tagColor5 {
background: #2aa198;
}
.tagColor6 {
background: #d33682;
}
.tagColor7 {
background: #859900;
}
.tagColor8 {
background: #657b83;
}
.inactiveTag {
background-image: linear-gradient(45deg, transparent -25%, #ffffff 100%, #ffffff 100%, transparent 0%);
}
/* base Vidjil style */
/* @default, @background, @highlight, @select, @secondary and @border have to be defined */
/* default tag color */
@tagColor0 : #DC322F;
@tagColor1 : #cb4b16;
@tagColor2 : #b58900;
@tagColor3 : #268bd2;
@tagColor4 : #6c71c4;
@tagColor5 : #2aa198;
@tagColor6 : #d33682;
@tagColor7 : #859900;
html{
height: 100%;
padding: 0px;
......@@ -176,6 +186,7 @@ line {
.graph_line{
stroke-width : 2.5px;
cursor:pointer;
stroke: @default;
}
.graph_data{
......@@ -204,6 +215,7 @@ line {
.graph_focus{
stroke-width : 5px;
cursor:pointer;
stroke: @select;
}
.axis_m{
......@@ -318,10 +330,12 @@ line {
stroke-width : 2.5px;
stroke : @select;
cursor:pointer;
fill : @default;
}
.circle_focus{
cursor:pointer;
fill : @select;
}
.circle_hidden{
......@@ -1629,4 +1643,35 @@ white-space: pre-line;
.console-flex{
flex-grow : 1;
}
.tagColor0{
background : @tagColor0;
}
.tagColor1{
background : @tagColor1;
}
.tagColor2{
background : @tagColor2;
}
.tagColor3{
background : @tagColor3;
}
.tagColor4{
background : @tagColor4;
}
.tagColor5{
background : @tagColor5;
}
.tagColor6{
background : @tagColor6;
}
.tagColor7{
background : @tagColor7;
}
.tagColor8{
background : @default;
}
.inactiveTag{
background-image : linear-gradient(45deg, transparent -25%, @background 100%, @background 100%, transparent 0%)
}
\ No newline at end of file
......@@ -242,8 +242,8 @@
<div style="float: right" class="menu" onmouseover="showSelector('paletteSelector');"> palette
<div id="paletteSelector" class="selector"><div>
<a class="buttonSelector" onclick="changeStyle(solarizeD)">dark</a>
<a class="buttonSelector" onclick="changeStyle(solarizeL)">light</a>
<a class="buttonSelector" onclick="changeStyle('solarizeD')">dark</a>
<a class="buttonSelector" onclick="changeStyle('solarizeL')">light</a>
</div></div>
</div>
......@@ -322,7 +322,7 @@
<form id="form"></form>
<div id="waiting_screen"> <div id="waiting_mes"></div></div>
</body>
<!-- </body> -->
</html>
......
......@@ -187,7 +187,7 @@ Builder.prototype = {
//reset
listTag.innerHTML = "";
for (var i = 0; i < tagName.length; i++) {
for (var i = 0; i < tag.length; i++) {
(function (i) {
var span3 = document.createElement('span');
span3.onclick = function (tag) {
......@@ -309,7 +309,7 @@ Builder.prototype = {
var input = document.createElement('input');
input.type = "text";
input.id = "new_tag_name";
input.value = tagName[tagID];
input.value = tag[tagID].name;
input.style.width = "100px";
input.style.border = "0px";
input.style.margin = "0px";
......@@ -338,7 +338,7 @@ Builder.prototype = {
event.preventDefault()
var newTagName = document.getElementById("new_tag_name")
.value;
tagName[tagID] = newTagName
tag[tagID].name = newTagName
self.build_tagSelector()
self.build_displaySelector()
self.m.analysisHasChanged = true
......@@ -406,7 +406,7 @@ Builder.prototype = {
listGermline.innerHTML = "";
//init tag list
for (var i = 0; i < tagName.length; i++) {
for (var i = 0; i < tag.length; i++) {
(function (i) {
var span3 = document.createElement('span');
span3.onclick = function (tag) {
......@@ -833,7 +833,7 @@ Builder.prototype = {
break;
case "Tag":
for (var i = 0; i < tagName.length; i++) {
for (var i = 0; i < tag.length; i++) {
var spantag = document.createElement('span');
spantag.className = "tagColorBox tagColor" + i
spantag.id = "fastTag" + i
......
......@@ -41,6 +41,7 @@ function Clone(data, model, hash) {
this.m.clusters[hash]=[hash]
this.m.clones[hash]=this
this.tag = this.getTag();
}
......@@ -363,7 +364,7 @@ Clone.prototype = {
if (this.color) {
return this.color;
} else {
return color['@default'];
"";
}
},
......@@ -376,7 +377,7 @@ Clone.prototype = {
},
getTagName: function () {
return tagName[this.getTag()]
return tag[this.getTag()].name
},
......@@ -385,17 +386,17 @@ Clone.prototype = {
* */
updateColor: function () {
if (this.m.focus == this.hash){
this.color = color['@select'];
this.color = "";
}else if (this.m.colorMethod == "abundance") {
var size = this.getSize()
if (this.m.clusters[this.hash].length==0){ size = this.getSequenceSize() }
if (size == 0){
this.color = color['@default'];
this.color = "";
}else{
this.color = colorGenerator(this.m.scale_color(size * this.m.precision), color_s, color_v);
}
}else if (this.m.colorMethod == "Tag"){
this.color = tagColor[this.tag];
this.color = tag[this.getTag()].color;
}else if (this.m.colorMethod == "dbscan"){
this.color = this.colorDBSCAN;
}else if (this.m.colorMethod == "V" && this.getV() != "undefined V"){
......@@ -415,7 +416,7 @@ Clone.prototype = {
}else if (this.m.colorMethod == "system") {
this.color = this.m.germlineList.getColor(this.germline)
}else{
this.color = color['@default'];
this.color = "";
}
},
......@@ -535,7 +536,7 @@ Clone.prototype = {
},
enable: function (top) {
if (this.top <= top && tagDisplay[this.tag] == 1 && this.id != "other") {
if (this.top <= top && tag[this.getTag()].display && this.id != "other") {
this.active = true;
}
},
......
......@@ -193,7 +193,7 @@ Report.prototype = {
for (var i = 0; i < m.clones.length; i++) {
var polyline = svg_graph.querySelectorAll('[id="polyline'+i+'"]')[0]
var tag = m.clone(i).getTag()
var color = tagColor[tag]
var color = tag[tag].color
if (i == norm) {
polyline.setAttribute("style", "stroke-width:12px");
......@@ -281,7 +281,7 @@ Report.prototype = {
for (var i = 0; i < m.clones.length; i++) {
var circle = svg_sp.querySelectorAll('[id="circle'+i+'"]')[0]
var color = tagColor[m.clone(i).getTag()]
var color = tag[m.clone(i).getTag()].color
circle.setAttribute("stroke", color);
//remove "other" and disabled clones
......@@ -441,7 +441,7 @@ Report.prototype = {
clone : function(cloneID, time) {
if (typeof time == "undefined") time = -1
var color = tagColor[m.clone(cloneID).getTag()]
var color = tag[m.clone(cloneID).getTag()].color
var system = m.clone(cloneID).germline
var clone = $('<div/>', {'class': 'clone'})
......
......@@ -80,7 +80,7 @@ GermlineList.prototype = {
if (typeof this.list[system] != 'undefined' && typeof this.list[system].color != 'undefined' ){
return this.list[system].color
}else{
return color['@default']
return "";
}
},
......
......@@ -322,7 +322,7 @@ List.prototype = {
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d', this.starPath);
path.setAttribute('id', 'color' + cloneID);
path.setAttribute("fill", tagColor[this.m.clone(cloneID).getTag()]);
path.setAttribute("fill", tag[this.m.clone(cloneID).getTag()].color);
svg.appendChild(path);
span_star.appendChild(svg)
......
var myConsole = new Com("flash_container", "log_container", "popup-container", "data-container")
initMenu()
/* Model
......
......@@ -475,11 +475,11 @@ Model.prototype = {
var keys = Object.keys(s.names);
for (var i=0; i<keys.length; i++){
tagName[parseInt(keys[i])] = s.names[keys[i]]
tag[parseInt(keys[i])].name = s.names[keys[i]]
}
for (var i=0; i<s.hide.length; i++){
tagDisplay[s.hide[i]] = 0;
tag[s.hide[i]].display = false;
}
}
......@@ -538,7 +538,6 @@ Model.prototype = {
var clone = this.clone(i)
var n = clone.getNlength();
if (n > n_max) {n_max = n; }
clone.tag = default_tag;
}
this.n_max = n_max
......@@ -560,7 +559,7 @@ Model.prototype = {
for (key in this.data){
if (this.data[key].length == this.samples.number){
this.data_info[key] = {
"color" : tagColor[i],
"color" : tag[i].color,
"isActive" : false
}
i++
......@@ -742,9 +741,9 @@ Model.prototype = {
//tags
analysisData.tags.names = {}
analysisData.tags.hide = []
for (var i=0; i<tagName.length; i++){
analysisData.tags.names[""+i] = tagName[i]
if (!tagDisplay[i]) analysisData.tags.hide.push(i)
for (var i=0; i<tag.length; i++){
analysisData.tags.names[""+i] = tag[i].name
if (!tag[i].display) analysisData.tags.hide.push(i)
}
......@@ -2031,7 +2030,7 @@ Model.prototype = {
this.clone(i).colorDBSCAN = colorGenerator( ( (270 / maxCluster) * (this.tabRandomColor[this.clone(i)] + 1) ), color_s, color_v);
}
else
this.clone(i).colorDBSCAN = color['@default'];
this.clone(i).colorDBSCAN = "";
}
},
......
......@@ -190,7 +190,7 @@ PDF.prototype = {
//clones style
for (var i = 0; i < this.m.clones.length; i++) {
var polyline = elem.querySelectorAll('[id="polyline'+i+'"]')[0]
var color = tagColor[this.m.clone(i).getTag()]
var color = tag[this.m.clone(i).getTag()].color
if (polyline.getAttribute("d").indexOf("Z") != -1){
polyline.setAttribute("style", "stroke-width:0px");
......@@ -208,7 +208,7 @@ PDF.prototype = {
//selected clones style
for (var i = 0; i < this.list.length; i++) {
var polyline = elem.querySelectorAll('[id="polyline'+this.list[i]+'"]')[0]
var color = tagColor[this.m.clone(this.list[i]).getTag()]
var color = tag[this.m.clone(this.list[i]).getTag()].color
polyline.setAttribute("stroke", color);
polyline.setAttribute("style", "stroke-width: "+opt.strokeSize+"px");
......@@ -345,7 +345,7 @@ PDF.prototype = {
info_clone: function (cloneID) {
this.checkPage(20)
var color = tagColor[this.m.clone(cloneID).getTag()]
var color = tag[this.m.clone(cloneID).getTag()].color
this.icon(cloneID, this.marge, this.y - 6, 18, 8)
......@@ -472,7 +472,7 @@ PDF.prototype = {
icon: function (cloneID, x, y, w, h) {
var color = tagColor[m.clone(cloneID).tag]
var color = tag[m.clone(cloneID).tag].color
var polyline = document.getElementById("polyline" + cloneID)
.cloneNode(true);
......
......@@ -291,7 +291,11 @@ ScatterPlot.prototype = {
if (!self.m.clone(p.id)
.isActive()) return "circle_inactive";
if (self.m.clone(p.id)
.isSelected()) return "circle_select";
.isSelected()){
if (self.m.clone(p.id)
.isFocus()) return "circle_focus circle_select";
return "circle_select";
}
if (self.m.clone(p.id)
.isFocus()) return "circle_focus";
return "circle";
......@@ -998,7 +1002,11 @@ ScatterPlot.prototype = {
if (!self.m.clone(p.id)
.isActive()) return "circle_hidden";
if (self.m.clone(p.id)
.isSelected()) return "circle_select";
.isSelected()){
if (self.m.clone(p.id)
.isFocus()) return "circle_focus circle_select";
return "circle_select";
}
if (self.m.clone(p.id)
.isFocus()) return "circle_focus";
return "circle";
......@@ -1579,7 +1587,11 @@ ScatterPlot.prototype = {
if (!self.m.clone(p.id)
.isActive()) return "circle_hidden";
if (self.m.clone(p.id)
.isSelected()) return "circle_select";
.isSelected()){
if (self.m.clone(p.id)
.isFocus()) return "circle_focus circle_select";
return "circle_select";
}
if (self.m.clone(p.id)
.isFocus()) return "circle_focus";
return "circle";
......
......@@ -421,8 +421,8 @@ Segment.prototype = {
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d', this.starPath);
path.setAttribute('id', 'color' + cloneID);
if (typeof this.m.clone(cloneID).tag != 'undefined') path.setAttribute("fill", tagColor[this.m.clone(cloneID).tag]);
else path.setAttribute("fill", color['@default']);
if (typeof this.m.clone(cloneID).tag != 'undefined') path.setAttribute("fill", tag[this.m.clone(cloneID).tag].color);
else path.setAttribute("fill", "");
svg_star.appendChild(path);
......
......@@ -21,107 +21,46 @@
* along with "Vidjil". If not, see <http://www.gnu.org/licenses/>
*/
var scale_color;
var solarizeD = {
'@default':'#839496',
'@background':'#002b36',
'@highlight':'#073642',
'@select':'#fdf6e3',
'@secondary':'#586e75',
'@border':'#284e55'
};
var solarizeL = {
'@default':'#657b83',
'@background':'#eee8d5',
'@highlight':'#fdf6e3',
'@select':'#002b36',
'@secondary':'#93a1a1',
'@border':'#b3c1c1'
};
var color=solarizeL;
var color_s = 0.8; //pureté
var color_v = 0.72; //brightness
var tagColor = [];
tagColor[0] = "#dc322f";
tagColor[1] = "#cb4b16";
tagColor[2] = "#b58900";
tagColor[3] = "#268bd2";
tagColor[4] = "#6c71c4";
tagColor[5] = "#2aa198";
tagColor[6] = "#d33682";
tagColor[7] = "#859900";
tagColor[8] = color['@default'];
var tagName = [];
tagName[0] = "clone 1";
tagName[1] = "clone 2";
tagName[2] = "clone 3";
tagName[3] = "standard";
tagName[4] = "standard (noise)";
tagName[5] = "custom 1";
tagName[6] = "custom 2";
tagName[7] = "custom 3";
tagName[8] = "-/-";
//default tag display
//0=hidden - 1=show
var tagDisplay = [];
tagDisplay[0] = 1;
tagDisplay[1] = 1;
tagDisplay[2] = 1;
tagDisplay[3] = 1;
tagDisplay[4] = 1;
tagDisplay[5] = 1;
tagDisplay[6] = 1;
tagDisplay[7] = 1;
tagDisplay[8] = 1;
tag = [
{"color" : "#dc322f", "name" : "clone 1", "display" : true},
{"color" : "#cb4b16", "name" : "clone 2", "display" : true},
{"color" : "#b58900", "name" : "clone 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}
]
var default_tag=8;
function changeDisplayTag(elem){
var tag = elem.parentNode.id.substr(10);
tagDisplay[tag]=elem.value;
updateTagBox();
}
function nextDisplayTag(elem){
var tag = elem.id.charAt( elem.id.length-1 )
var s =tagDisplay[tag]+1;
if (s > 1) s=0;
tagDisplay[tag]=s;
var id_tag = elem.id.charAt( elem.id.length-1 )
var s = tag[id_tag].display;
tag[id_tag].display = !s;
updateTagBox();
m.update();
}
function initTag(){
for (var i =0; i<tagColor.length; i++){
$(".tagColor"+i).prop("title", tagName[i]);
$(".tagName"+i).html(tagName[i]);
for (var i =0; i<tag.length; i++){
$(".tagColor"+i).prop("title", tag[i].name);
$(".tagName"+i).html(tag[i].name);
}
updateTagBox();
}
function updateTagBox(){
for (var i =0; i<tagColor.length; i++){
if (tagDisplay[i]==1){
$(".tagColor"+i).css({
background : tagColor[i]
});
for (var i =0; i<tag.length; i++){
if (tag[i].display){
$(".tagColor"+i).removeClass("inactiveTag")
}else{
if (tagDisplay[i]==0){
$(".tagColor"+i).css({
"background-color" : tagColor[i],
"background-image" : 'linear-gradient(45deg, transparent -25%, '+color['@background']+' 100%, '+color['@background']+' 100%, transparent 0%)',
"background" : '-moz-linear-gradient(45deg, transparent -25%, '+color['@background']+' 100%, '+color['@background']+' 100%, transparent 0%) repeat scroll 0 0 '+tagColor[i], //firefox
"background-image" : '-webkit-linear-gradient(45deg, transparent -25%, '+color['@background']+' 100%, '+color['@background']+' 100%, transparent 0%)' //chrome
})
}
$(".tagColor"+i).addClass("inactiveTag")
}
}
}
......@@ -158,14 +97,9 @@ var default_tag=8;
function changeStyle(newStyle){
color=newStyle
//less.modifyVars(color);
tagColor[default_tag] = color['@default'];
if (newStyle==solarizeD) document.getElementById("palette").href="css/dark.css";
if (newStyle==solarizeL) document.getElementById("palette").href="css/light.css";
if (newStyle=="solarizeD") document.getElementById("palette").href="css/dark.css";
if (newStyle=="solarizeL") document.getElementById("palette").href="css/light.css";
m.update()
}
......@@ -37,7 +37,6 @@
<script type="text/javascript" src='../../js/crossDomain.js'></script>
<script type="text/javascript" src='../../js/pdf.js'></script>
<script type="text/javascript" src='../../js/database.js'></script>
<script type="text/javascript" src='../../js/conf.js'></script>
<script type="text/javascript" src='../../js/stats.js'></script>
<script type="text/javascript" src="./testFiles/data_test.js"></script>
......
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