Skip to content

Commit

Permalink
backup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Crazy-Jack
Crazy-Jack committed Dec 26, 2021
1 parent daca1be commit 1b2fe9f
Show file tree
Hide file tree
Showing 4 changed files with 1,588 additions and 11 deletions.
82 changes: 82 additions & 0 deletions cirDraw/static/tools/js/legendSelection.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/////////////////
function linkedToggleBoxLegend() {
$('.box').on('click', function(e){
e.preventDefault();
var toggle = (this_block) => {
// var new_opacity;
if (this_block.style.opacity == 0.1) {
var new_opacity = 1
var new_text_decoration = ""
} else {
var new_opacity = 0.1
var new_text_decoration = "line-through"
}

// gene name
var gene_name = this_block.children[0].innerText;
// console.log($(`.box-chipseq-legend-gene-${gene_name}`))
var box_genes_div = $(`.box-chipseq-legend-gene-${gene_name}`)
var label_genes_div = $(`.label-chipseq-legend-gene-${gene_name}`)
console.log(gene_name)
box_genes_div.css('opacity', new_opacity)
label_genes_div.css('text-decoration', new_text_decoration)

};


// box-chipseq-legend-gene-${gene_name}

toggle($(this)[0]);
// $(this).css('opacity', '0.1');
// console.log($(this)[0].children[0].innerText);
});

$('.box').on('click', function(e){
e.preventDefault();
});

}


function linkedToggleCircleLegend() {
$('.box-contain').on('click', function(e){
e.preventDefault();
var toggle_circle = (this_block) => {
// gene name
var condition_name = this_block.children[0].innerText;
console.log(this_block.children[0].innerText)
console.log($(`.chipseq-legend-condition-${condition_name}`))
var circle_condition_div = $(`.chipseq-legend-condition-${condition_name}`)
console.log(circle_condition_div.css('text-decoration') == 'none solid rgb(33, 37, 41)')

if (circle_condition_div.css('text-decoration') == 'none solid rgb(33, 37, 41)') {
console.log("Change from white")
// console.log(circle_condition_div)
circle_condition_div.css('text-decoration', "line-through")
} else {
console.log("Change from not white")
circle_condition_div.css('text-decoration', "")
}


};


// box-chipseq-legend-gene-${gene_name}

toggle_circle($(this)[0]);
// $(this).css('opacity', '0.1');
// console.log($(this)[0].children[0].innerText);
});


// use the switch to change data

// distribution plot

// main chipseq plot

// sites count plot

}

61 changes: 50 additions & 11 deletions cirDraw/static/tools/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -988,29 +988,42 @@ $(document).ready(function () {
else {
$('#legend_container_chipseq').html("<div id='legend_container_chipseq'></div>");
$('#duration_container_chipseq').html("<div id='duration_container_chipseq'></div>");


var colorList = mydatasets_chipseq;
colorize = function(colorList) {
var container = document.getElementById('legend_container_chipseq');

for (var item in colorList) {
// console.log(item);

var boxContainer = document.createElement("DIV");
var box = document.createElement("DIV");
var label = document.createElement("DIV");
var label_invisible = document.createElement("DIV");

var gene_name = colorList[item]['label']
label_invisible.className = "hidden click-toggle"
label_invisible.innerHTML = `<span>${gene_name}</span>`

// dataset len

label.innerHTML = colorList[item]['label'] + " ";
box.className = "box";
box.className = `box box-chipseq-legend-gene-${gene_name}`;

box.style.backgroundColor = colorList[item]['backgroundColor'];
box.style.borderColor = colorList[item]['backgroundColor'];
box.style.textIndent = '20em';

box.style.opacity = 1;

boxContainer.className = "box-contain";
label.className = "label";
label.className = `label label-chipseq-legend-gene-${gene_name}`;
label.style.textDecoration = ""

boxContainer.appendChild(box);
boxContainer.appendChild(label);
label.appendChild(label_invisible)
box.appendChild(label_invisible)

container.appendChild(boxContainer);

Expand All @@ -1024,6 +1037,7 @@ $(document).ready(function () {
var boxContainer = document.createElement("DIV");
var box = document.createElement("DIV");
var label = document.createElement("DIV");
var label_invisible = document.createElement("DIV");

// dataset len
var gene_name = colorList[item]['label']
Expand All @@ -1035,19 +1049,29 @@ $(document).ready(function () {
// label.innerHTML +="&nbsp;&nbsp;<span class='tooltips_info' title='hello' data-tipso='" + explain_text + "'><i class='fas fa-question-circle'></i></span>"
// }

box.className = "box";
box.className = `box box-chipseq-legend-gene-${gene_name}`;

box.style.backgroundColor = colorList[item]['backgroundColor'];
box.style.borderColor = colorList[item]['backgroundColor'];
box.style.textIndent = '20em';
var width = Math.round(colorList[item]['data'].length / max_len * 120);
box.style.width = width+"px";
box.style.opacity = 1;

boxContainer.className = "stats-contain";
label.className = "label";
label.className = `label label-chipseq-legend-gene-${gene_name}`;
label.style.textDecoration = ""

label_invisible.className = "hidden click-toggle"
label_invisible.innerHTML = `<span>${gene_name}</span>`

boxContainer.appendChild(box);
boxContainer.appendChild(label);
label.appendChild(label_invisible);
box.appendChild(label_invisible);

container.appendChild(boxContainer);


}

Expand All @@ -1069,18 +1093,19 @@ $(document).ready(function () {
var boxContainer_t = document.createElement("DIV");
var box = document.createElement("DIV");
var label = document.createElement("DIV");
var label_invisible = document.createElement("DIV");

if (colorList_dose[item] == -1) {
label.innerHTML = "FullMedium"
}
else {
label.innerHTML = "CSS+" + colorList_dose[item] + "nM";
label.innerHTML = "CSS" + colorList_dose[item] + "nM";
}

if (colorList_dose[item] == -1) {
box.className = "circle-nosolid";
box.className = `circle-nosolid`;
} else {
box.className = "circle";
box.className = `circle`;
}


Expand All @@ -1099,13 +1124,23 @@ $(document).ready(function () {
box.style.width = size + "px";

box.style.textIndent = '40em';


boxContainer2.className = "box-contain";
boxContainer2.className = `box-contain`;
boxContainer2.style.width = "120px";


boxContainer.className = "circle-contain";
boxContainer_t.className = "label-contain";
label.className = "label";

label.className = `label chipseq-legend-condition-${label.innerHTML}`;
label.style.textDecoration = ""

label_invisible.className = "hidden click-toggle"
label_invisible.innerHTML = `<span>${label.innerHTML}</span>`

boxContainer2.appendChild(label_invisible);

boxContainer.appendChild(box);

boxContainer2.appendChild(boxContainer);
Expand All @@ -1115,12 +1150,16 @@ $(document).ready(function () {

container.appendChild(boxContainer2);



}
};
colorize_dose(colorList_dose);


/////////////////
linkedToggleBoxLegend();
linkedToggleCircleLegend();

window.chipseq_mainChart = new Chart(ctx3, {
type: 'ScatterWithLine',
data: {
Expand Down
Loading

0 comments on commit 1b2fe9f

Please sign in to comment.