correctly make depiction text fields solid

src/plugin/depiction.ts

@@ -88,10 +88,9 @@ class Depiction {
         return new Vector2D(x, y);
     }
 
-    public draw(withClarityNodes: boolean = false) {
+    public draw() {
         this.structure.selectAll("*").remove();
 
-        if (withClarityNodes) this.appendClarityNodes();
         this.appendBondVisuals();
         this.appendTexts();
     }
@@ -164,12 +163,14 @@ class Depiction {
             .data(data)
             .enter()
             .append('text')
+            .attr('filter', "url(#solid-background)")
             .attr('style', (x: any) => x.style)
             .attr('x', (x: any) => x.x)
             .attr('y', (x: any) => x.y)
             .attr('dominant-baseline', (x: any) => x['dominant-baseline'])
             .attr('text-anchor', (x: any) => x['text-anchor'])
             .each(function (x: any) {
+                
                 for (var i = 0; i < x.tspans.length; i++) {
                     d3.select(this)
                         .append('tspan')
@@ -179,34 +180,6 @@ class Depiction {
             });
     }
 
-    /**
-     * Add small white circle on the background of atoms with label
-     * just to make the interaction lines pretty.
-     *
-     * @memberof Depiction
-     */
-    private appendClarityNodes(): void {
-        let data = this.atoms
-            .filter(x => x.labels.length > 0)
-            ?.map(x => x.labels)
-            ?.reduce((a, b) => a.concat(b));
-
-
-        this.structure.selectAll()
-            .data(data)
-            .enter().append('circle')
-            .classed('pdb-lig-env-svg-shadow-node', true)
-            .attr('cx', (x: any) => x.x)
-            .attr('cy', (x: any) => x.y)
-            .attr('r', (x: any) => { 
-                let intermediate = x.style.match(/font-size:\d+\.{0,1}\d*px/g)[0];
-                let nmb = intermediate.match(/\d+/g)[0];
-                
-                return isNaN(nmb) ? 15 : parseInt(nmb);
-            });
-    }
-
-
     public getCenter(ids: string[]): Vector2D {
         let coords = new Array<Vector2D>();
 

src/plugin/manager.ts

@@ -229,7 +229,7 @@ class Visualization {
 
         return d3.json(ligandUrl)
             .catch(e => this.processError(e, `Component ${ligandId} was not found.`))
-            .then((d: any) => this.addDepiction(d, true))
+            .then((d: any) => this.addDepiction(d))
             .then(() => this.centerScene());
     }
 
@@ -239,13 +239,11 @@ class Visualization {
      *
      * @param {*} depiction Content of annotation.json file generated by
      * the PDBeChem process.
-     * @param {*} withClarityNodes Control if shadow nodes should be drawn
-     * in the background of nodes with labels
      * @memberof Visualization
      */
-    public addDepiction(depiction: any, withClarityNodes: boolean) {
+    public addDepiction(depiction: any) {
         this.depiction = new Depiction(this.depictionRoot, depiction);
-        this.depiction.draw(withClarityNodes);
+        this.depiction.draw();
     }
 
 
@@ -871,10 +869,21 @@ class Visualization {
         //     // ["arrow-vdw", "#9B7653"],
         //     // ["arrow-metal", "#008080"],
         //     // ["arrow-aromatic", "#AD4379"],
-        // ]);
+        let defs = this.svg.append('defs')
+
+        // proper background for depiction tspans
+        // gracefully coppied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
+        let filter = defs.append('filter')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', 1)
+            .attr('height', 1)
+            .attr('id', 'solid-background')
+        
+        filter.append('feFlood').attr('flood-color', 'white')
+        filter.append('feComposite').attr('in', 'SourceGraphic')
 
-        this.svg
-            .append('defs')
+        defs
             .append('marker')
             .attr('id', 'clash')
             .attr("markerWidth", 15)