Commit 6a11efd3 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

change font for ligand node texts

parent 7cc1645a
...@@ -58,6 +58,8 @@ class Visualization { ...@@ -58,6 +58,8 @@ class Visualization {
.attr('width', '100%') .attr('width', '100%')
.attr('height', '100%'); .attr('height', '100%');
this.addMarkers();
this.canvas = this.svg.append('g').attr('id', 'vis-root'); this.canvas = this.svg.append('g').attr('id', 'vis-root');
this.linksRoot = this.canvas.append('g').attr('id', 'links'); this.linksRoot = this.canvas.append('g').attr('id', 'links');
this.depictionRoot = this.canvas.append('g').attr('id', 'depiction'); this.depictionRoot = this.canvas.append('g').attr('id', 'depiction');
...@@ -692,11 +694,11 @@ class Visualization { ...@@ -692,11 +694,11 @@ class Visualization {
.filter((x: Model.InteractionNode) => !x.residue.isLigand) .filter((x: Model.InteractionNode) => !x.residue.isLigand)
.forEach((x: Model.InteractionNode) => { .forEach((x: Model.InteractionNode) => {
let links = this.presentBindingSite.links.filter((y: Model.LigandResidueLink) => y.containsNode(x) && y.getLinkClass() !== 'hydrophobic'); let links = this.presentBindingSite.links.filter((y: Model.LigandResidueLink) => y.containsNode(x) && y.getLinkClass() !== 'hydrophobic');
links = links.length == 0 ? this.presentBindingSite.links.filter((y: Model.LigandResidueLink) => y.containsNode(x)) : links; links = links.length == 0 ? this.presentBindingSite.links.filter((y: Model.LigandResidueLink) => y.containsNode(x)) : links;
let atom_names = links let atom_names = links
.map((y: Model.LigandResidueLink) => [].concat.apply([], y.interaction.map(z => z.sourceAtoms))); .map((y: Model.LigandResidueLink) => [].concat.apply([], y.interaction.map(z => z.sourceAtoms)));
let concated = [].concat.apply([], atom_names); let concated = [].concat.apply([], atom_names);
let position: Vector2D = this.depiction.getInitalNodePosition(concated); let position: Vector2D = this.depiction.getInitalNodePosition(concated);
...@@ -835,15 +837,15 @@ class Visualization { ...@@ -835,15 +837,15 @@ class Visualization {
.attr('transform', () => `translate(${x.x},${x.y}) scale(${x.scale})`); .attr('transform', () => `translate(${x.x},${x.y}) scale(${x.scale})`);
let otherNodes = [x]; let otherNodes = [x];
this.links.filter((l: Model.Link) => l.containsNode(x)).each((lnk: Model.Link) => { this.links.filter((l: Model.Link) => l.containsNode(x)).each((lnk: Model.Link) => {
let otherNode = lnk.getOtherNode(x); let otherNode = lnk.getOtherNode(x);
otherNodes.push(otherNode); otherNodes.push(otherNode);
}); });
this.nodes this.nodes
.filter((node: Model.InteractionNode) => !otherNodes.includes(node)) .filter((node: Model.InteractionNode) => !otherNodes.includes(node))
.attr('opacity', 0.4); .attr('opacity', 0.4);
this.links this.links
.filter((l: Model.Link) => !l.containsNode(x)) .filter((l: Model.Link) => !l.containsNode(x))
//.transition() //.transition()
...@@ -905,6 +907,10 @@ class Visualization { ...@@ -905,6 +907,10 @@ class Visualization {
private addMarkers() { private addMarkers() {
let defs = this.svg.append('defs') let defs = this.svg.append('defs')
defs
.append('style')
.text("@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@200&display=swap');");
// proper background for depiction tspans // proper background for depiction tspans
// gracefully copied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg // gracefully copied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
let filter = defs.append('filter') let filter = defs.append('filter')
...@@ -926,7 +932,6 @@ class Visualization { ...@@ -926,7 +932,6 @@ class Visualization {
.attr("refY", 3) .attr("refY", 3)
.attr("orient", "auto") .attr("orient", "auto")
.attr('markerUnits', 'strokeWidth') .attr('markerUnits', 'strokeWidth')
.append('path') .append('path')
.attr('d', 'M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z') .attr('d', 'M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z')
.attr('style', 'stroke:#FF5050;stroke-width:3px;'); .attr('style', 'stroke:#FF5050;stroke-width:3px;');
......
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
.pdb-lig-env-svg-node text { .pdb-lig-env-svg-node text {
cursor: inherit; cursor: inherit;
font-family: sans-serif; font-family: 'Exo 2', sans-serif;
stroke: black !important; stroke: black !important;
fill: black !important; fill: black !important;
} }
...@@ -101,13 +101,13 @@ ...@@ -101,13 +101,13 @@
.pdb-lig-env-svg-node text tspan:first-child { .pdb-lig-env-svg-node text tspan:first-child {
cursor: inherit; cursor: inherit;
font-weight: 100; font-weight: 100;
font-size: 1em; font-size: 1.1em;
} }
.pdb-lig-env-svg-node text tspan:nth-child(2) { .pdb-lig-env-svg-node text tspan:nth-child(2) {
cursor: inherit; cursor: inherit;
font-weight: lighter; font-weight: lighter;
font-size: 0.75em; font-size: 0.8em;
} }
.pdb-lig-env-svg-ligand-res { .pdb-lig-env-svg-ligand-res {
......
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