change font for ligand node texts

src/plugin/manager.ts

@@ -58,6 +58,8 @@ class Visualization {
             .attr('width', '100%')
             .attr('height', '100%');
 
+        this.addMarkers();
+
         this.canvas = this.svg.append('g').attr('id', 'vis-root');
         this.linksRoot = this.canvas.append('g').attr('id', 'links');
         this.depictionRoot = this.canvas.append('g').attr('id', 'depiction');
@@ -692,11 +694,11 @@ class Visualization {
             .filter((x: Model.InteractionNode) => !x.residue.isLigand)
             .forEach((x: Model.InteractionNode) => {
                 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;
                 let atom_names = links
                     .map((y: Model.LigandResidueLink) => [].concat.apply([], y.interaction.map(z => z.sourceAtoms)));
-                
+
                 let concated = [].concat.apply([], atom_names);
                 let position: Vector2D = this.depiction.getInitalNodePosition(concated);
 
@@ -835,15 +837,15 @@ class Visualization {
             .attr('transform', () => `translate(${x.x},${x.y}) scale(${x.scale})`);
 
         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);
             otherNodes.push(otherNode);
-        });        
+        });
 
         this.nodes
             .filter((node: Model.InteractionNode) => !otherNodes.includes(node))
             .attr('opacity', 0.4);
-        
+
         this.links
             .filter((l: Model.Link) => !l.containsNode(x))
             //.transition()
@@ -905,6 +907,10 @@ class Visualization {
     private addMarkers() {
         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
         // gracefully copied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
         let filter = defs.append('filter')
@@ -926,7 +932,6 @@ class Visualization {
             .attr("refY", 3)
             .attr("orient", "auto")
             .attr('markerUnits', 'strokeWidth')
-
             .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('style', 'stroke:#FF5050;stroke-width:3px;');

src/styles/pdb-ligand-env-svg.css

@@ -93,7 +93,7 @@
 
 .pdb-lig-env-svg-node text {
     cursor: inherit;
-    font-family: sans-serif;
+    font-family: 'Exo 2', sans-serif;
     stroke: black !important;
     fill: black !important;
 }
@@ -101,13 +101,13 @@
 .pdb-lig-env-svg-node text tspan:first-child {
     cursor: inherit;
     font-weight: 100;
-    font-size: 1em;
+    font-size: 1.1em;
 }
 
 .pdb-lig-env-svg-node text tspan:nth-child(2) {
     cursor: inherit;
     font-weight: lighter;
-    font-size: 0.75em;
+    font-size: 0.8em;
 }
 
 .pdb-lig-env-svg-ligand-res {