Skip to content
Snippets Groups Projects
Commit d75d3fc8 authored by Marcelo Querino Lima Alfonso's avatar Marcelo Querino Lima Alfonso
Browse files

modifications for color scale syncro and possible single circle with same size

parent eccd6be6
No related branches found
No related tags found
1 merge request!5Refactored code for diplaying aggregated ligand interactions
Hide whitespace changes
Inline Side-by-side
src/plugin/depiction.ts
+ 105
− 30
View file @ d75d3fc8
......@@ -149,10 +149,15 @@ class Depiction {
public addCircles(weights: any, colorScheme: string): void {
this.atoms.forEach(x => {
x.value = weights.filter(y => y.atom == x.name).map(z => z.value)[0]
/**
* This has been changed so we can highlight every Atom
*/
let valueTo = weights.filter(y => y.atom == x.name).map(z => z.value)[0];
if (valueTo === undefined) valueTo = '0.00';
x.value = valueTo;
});
})
const data = this.atoms.filter(x => x.value >0);
const data = this.atoms;
const intxWeights = weights.map(x => x.value);
const gradient = new Model.Gradient(intxWeights, colorScheme).getScales();
const q1 = d3.quantile(intxWeights, 0.25);
......@@ -162,31 +167,42 @@ class Depiction {
const secondScale = gradient.secondScale;
const thirdScale = gradient.thirdScale;
this.weight.selectAll("*").remove();
this.weight.selectAll()
.data(data)
.enter()
.each(function(x: any){
if(x.value >= q1){
d3.select(this)
.append('circle')
.attr('cx', x.position.x)
.attr('cy', x.position.y)
.attr('r', secondScale.radiusScale(x.value))
.attr('fill', secondScale.colorScale(x.value))
.attr("fill-opacity", "0.5")
if(x.value >= q3){
d3.select(this)
.append('circle')
.attr('cx', x.position.x)
.attr('cy', x.position.y)
.attr('r', thirdScale.radiusScale(x.value))
.attr('fill', thirdScale.colorScale(x.value))
.attr("fill-opacity", "0.5")
}
}
});
const colorScale = d3.scaleLinear(
[0, 0.01, d3.max(data.map(x => x.value))],
["#ffffff","#a0bb9e","#505d4f"]
);
this.weight.selectAll("*").remove();
/**
* Here is your original weight drawing function
*/
// this.weight.selectAll()
// .data(data)
// .enter()
// .each(function(x: any){
// if(x.value >= q1){
// d3.select(this)
// .append('circle')
// .attr('cx', x.position.x)
// .attr('cy', x.position.y)
// .attr('r', secondScale.radiusScale(x.value))
// .attr('fill', secondScale.colorScale(x.value))
// .attr("fill-opacity", "0.5")
// if(x.value >= q3){
// d3.select(this)
// .append('circle')
// .attr('cx', x.position.x)
// .attr('cy', x.position.y)
// .attr('r', thirdScale.radiusScale(x.value))
// .attr('fill', thirdScale.colorScale(x.value))
// .attr("fill-opacity", "0.5")
// }
// }
// });
/**
* Here is your original second weight drawing function
*/
this.weight.selectAll()
.data(data)
.enter()
......@@ -194,9 +210,35 @@ class Depiction {
.attr("class", x => `${x.name}_Circles weightCircles`)
.attr("cx", x => x.position.x)
.attr("cy", x => x.position.y)
.attr("r", x => firstScale.radiusScale(x.value))
.attr("fill", x=> firstScale.colorScale(x.value))
.attr("fill-opacity", "0.5")
/**
* I've replaced the radiusScale to be the same as the first
* weight drawing function (not sure if this is the best)
*/
// .attr("r", x => firstScale.radiusScale(x.value))
.attr("r", (x) => {
if(x.value >= q1) return secondScale.radiusScale(x.value);
if(x.value >= q3) return thirdScale.radiusScale(x.value);
return firstScale.radiusScale(x.value);
})
/**
* Fill now uses the same colorScale of the heatmap component
*/
// .attr("fill", x=> firstScale.colorScale(x.value))
.attr("fill", x=> colorScale(x.value))
/**
* Since this is drawn below "structure" I've noticed fill-opacity
* does not change anything actually
*/
// .attr("fill-opacity", "0.5")
.attr("fill-opacity", "1.0")
/**
* This is a fill-opacity function if we want to drawn "weight"
* on top of "structure"
*/
// .attr("fill-opacity", (x:Atom) => {
// if (x.value+"" === "0.00") return 0.0;
// return "0.8";
// })
.on('mouseenter', (x:Atom, i:number, g:any) => {
this.atomMouseEnterEventHandler(x, g[i], false);
})
......@@ -204,6 +246,28 @@ class Depiction {
this.atomMouseLeaveEventHandler(false);
});
/**
* This is code I tested in the case we drawn "weight"
* on top of "structure"
*/
// this.hideStructureLabels();
// this.weight
// .selectAll()
// .data(data)
// .enter()
// .append('g')
// .attr('filter', 'labels')
// .each(function (x: Atom) {
// if (x.labels.length > 0) {
// for (var i = 0; i < x.labels.length; i++) {
// d3.select(this)
// .append('path')
// .attr('d', x.labels[i].d)
// .style("background-color", "white")
// .attr('fill', x.labels[i].fill)
// }
// }
// });
}
/**
......@@ -254,6 +318,7 @@ class Depiction {
.data(data)
.enter()
.append('g')
.attr('class', 'structureLabels')
.attr('filter', 'labels')
.each(function (x: any) {
for (var i = 0; i < x.labels.length; i++) {
......@@ -267,6 +332,15 @@ class Depiction {
});
}
// /**
// * Remove depiction structure labels
// * @private
// * @memberof Depiction
// */
// private hideStructureLabels() {
// d3.selectAll('.structureLabels').remove();
// }
/**
* Finds the center of an array of atoms
* @param {string} ids atom ids
......@@ -310,6 +384,7 @@ class Depiction {
}
private highlightAtom(element) {
this.removeHighlights();
d3.select(element)
.style("stroke", "#FBBD1D")
.style("stroke-width", 5);
......
src/plugin/manager.ts
+ 5
− 1
View file @ d75d3fc8
......@@ -124,7 +124,11 @@ class Visualization {
private ligHeatmapMouseoverEventHandler(e: any) {
if (this.depiction === undefined) return;
const atomName = e.detail.name; // CustomEvent
const atom = this.depiction.atoms.filter(x => x.value >0 && x.name === atomName);
/**
* This has been changed so we can highlight every Atom
*/
// const atom = this.depiction.atoms.filter(x => x.value >0 && x.name === atomName);
const atom = this.depiction.atoms.filter(x => x.name === atomName);
const selection = d3.select(`.${atomName}_Circles`);
const nodes = selection.nodes();
......
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