added better-docs and js-docs for documentation

README.md

-# PDB ligand environment component
+# PDB LigandEnv component
 
-This is a web-component to display ligand structure in 2D along with its interactions. Ligand can be perceived as a set of covalently linked pdb residues (refered to as bound molecule) or a single pdb residue. This depiction can be enriched with a substructure highlight, atom names, and binding site interactions.
+This is a web-component to display ligand structure in 2D along with its interactions. This depiction can be enriched with substructure highlight, atom names, binding site interactions and aggregated protein-ligand interactions.
 
-## Step after cloning (use local server to see demo pages)
+## Installation
 
 ```shell
-npm run install
+npm install
 npm run build
 npm run start
-
-open any of the *.html pages in the demo directory
 ```
+To see demo, copy demo directory to build and open any of the html pages.
 
 ## Component modes
 
 * Mode A: Display bound molecule and its interactions
 * Mode B: Display ligand and its interactions
 * Mode C: Display ligand (chemical component) only
+* Mode D: Display ligand and aggregated interactions
 
-| Mode A | Mode B | Mode C |
-|:------------------: | :-------: | :-------: |
-| <img src="https://www.ebi.ac.uk/~lpravda/imgs/1cbs_REA_200_A.png"/>| <img src="https://www.ebi.ac.uk/~lpravda/imgs/3d12_bm1.png"/> | <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=VIA&size=500"/> |
-| [1cbs REA 200 A](https://www.ebi.ac.uk/pdbe/entry/pdb/1cbs/bound/REA) | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| [wwPDB CCD - VIA](https://pdbe.org/chem/VIA)
+| Mode A | Mode B | Mode C | Mode D |
+|:------------------: | :-------: | :-------: | :-------: |
+| <img src="dependencies/REA_A_200.svg"/>| <img src="dependencies/3d12_bm1.svg"/> | <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=VIA&size=500"/> | asd |
+| [1cbs REA 200 A](https://www.ebi.ac.uk/pdbe/entry/pdb/1cbs/bound/REA) | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| [wwPDB CCD - VIA](https://pdbe.org/chem/VIA) | asd |
 
 ## How to use it
 
-The component can be inserted into the pages by two different ways. Either as a `web-component` using html tag, or directly by using javascript as a `plugin`.
+PDB LigandEnv can be inserted into web pages in two different ways. Either as a `web-component` using html tag, or directly by using javascript as a `plugin`.
 
 Interactions data displayed by the component can come from three different environments `Production`, `Development`, `Internal`. If no environment is specified `Production` is used as default..
 
@@ -74,10 +74,13 @@ A few files needs to be imported in the page before the component is attempted t
 <pdb-ligand-env pdb-res-name="CLR" zoom-on ></pdb-ligand-env>
 ```
 
+```html
+<pdb-ligand-env pdb-res-name="STI", contact-type=["hbond","hydrophobic","vdw"]></pdb-ligand-env>
+```
+
 The component contains a number of properties that can be set, in order to change data that are being displayed. First you need to define a component on the page:
 
 ```html
-
 <pdb-ligand-env id='SIA-component'></pdb-ligand-env>
 ```
 
@@ -87,14 +90,15 @@ and then inject data you want to display e.g.:
 let chemUrl = `https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/SIA/annotation`;
 let interactionsURL = "https://wwwdev.ebi.ac.uk/pdbe/graph-api/pdb/bound_ligand_interactions/4yy1/A/604";
 let component = document.getElementById('SIA-component');
-
-const depiction = await (await fetch(chemUrl)).json();
-const interactionsData = await (await fetch(interactionsURL)).json();
-const atomsToHighlight = ['C10', 'C11', 'O10'];
-
-component.depiction = depiction;
-component.ligandHighlight = atomsToHighlight;
-component.interactions = interactionsData;
+(async() => {
+    const depiction = await (await fetch(chemUrl)).json();
+    const interactionsData = await (await fetch(interactionsURL)).json();
+    const atomsToHighlight = ['C10', 'C11', 'O10'];
+
+    component.depiction = depiction;
+    component.ligandHighlight = atomsToHighlight;
+    component.interactions = interactionsData;
+})()
 ```
 
 ### Plugin
@@ -148,6 +152,13 @@ this.display.initLigandInteractions('1cbs', 200, 'A');
 
 // to display chemical component with atom names only
 this.display.initLigandDisplay('HEM', true);
+
+// to display aggregated protein-ligand interactions
+this.display.initLigandDisplay('STI').then(() => {
+    this.display.initLigandWeights('STI').then(() => {
+        this.display.showWeights(["hydrophobic"]);
+    })
+})
 ````
 
 ## Parameters
@@ -157,7 +168,8 @@ this.display.initLigandDisplay('HEM', true);
 | pdb-id              | string    | No       | PDB id of a protein to retrieve interactions from. `(mode A and B only)` |
 | bound-molecule-id   | string    | No       | PDB bound molecule id `(mode A only)` |
 | pdb-res-name        | string    | No       | PDB residue name aka: *auth_comp_id* `(mode C only)`
-| pdb-res-id          | number    | No       | PDB residue id aka: *auth_seq_id* `(mode B only)`
+| pdb-res-id          | number    | No       | PDB residue id aka: *auth_seq_id* `(mode B only)` |
+| contact-type        | string[]  | No       | protein-ligand contact_type calculated by pdbe-arpeggio `(mode D only)` | 
 | pdb-chain-id        | string    | No       | PDB residue chain aka: *auth_asym_id*  `(mode B only)`|
 | substructure        | string[]  | No       | List of atom names to be highlighted on the ligand structure |
 | color               | string    | No       | HEX representation of the color highlight. `(Default: #D3D3D3)` |

demo/demo_component.html

-<!doctype html>
-<html lang="en">
-
-<head>
-
-  <script src="https://d3js.org/d3.v5.min.js"></script>
-  <!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
-  <link rel="stylesheet" href="http://127.0.0.1:8080/pdb-ligand-env-svg.css" />
-  <!-- UI icons -->
-  <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
-  <!-- Web component polyfill (only loads what it needs) -->
-  <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8">
-  </script>
-  <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
-    charset="utf-8"></script>
-  <!--PDBe interactions component-->
-  <script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-1.0.0-min.js"></script>
-
-</head>
-
-<body>
-
-  <!--Mode A-->
-  <div style="position: relative; float: left;">
-    <div style="width: 500px; height: 500px; position: relative">
-      <pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
-    </div>
-  </div>
-
-  <!--Mode B-->
-  <div style="position: relative; float: left;">
-    <div style="width: 500px; height: 500px; position: relative">
-      <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
-    </div>
-  </div>
-
-  <!--Mode C-->
-  <div style="position: relative; float: left;">
-    <div style="width: 500px; height: 500px; position: relative">
-      <pdb-ligand-env pdb-res-name="CLR" zoom-on names-on></pdb-ligand-env>
-    </div>
-  </div>
-
-</body>
-
-</html>
\ No newline at end of file

gulpfile.js

@@ -4,6 +4,7 @@ const del = require('del');
 const concat = require('gulp-concat');
 const header = require('gulp-header');
 const minify = require("gulp-minify");
+const cp = require('child_process');
 
 const PACKAGE_ROOT_PATH = process.cwd();
 const PKG_JSON = require(path.join(PACKAGE_ROOT_PATH, "package.json"));
@@ -18,7 +19,7 @@ const banner = ['/**',
 ].join('\n');
 
 const license = ['/**',
-    ' * Copyright 2019-2020 Lukas Pravda <lpravda@ebi.ac.uk>',
+    ' * Copyright 2024-2030 Protein Data Bank in Europe <pdbehelp@ebi.ac.uk>',
     ' * European Bioinformatics Institute (EBI, http://www.ebi.ac.uk/)',
     ' * European Molecular Biology Laboratory (EMBL, http://www.embl.de/)',
     ' * Licensed under the Apache License, Version 2.0 (the "License");',
@@ -94,5 +95,11 @@ gulp.task('minifyPlugin', () => {
         .pipe(gulp.dest('build/'));
 });
 
+gulp.task('createDoc', function (cb) {
+    cp.exec('./node_modules/.bin/jsdoc -c jsdoc.json', function(err, stdout, stderr){
+        cb(err);
+    })
+});
+
 gulp.task('default', gulp.series('clean', 'copyAppCSS', 'concat', 'concatCSS',
-    'copyXML', 'copyIndex', 'copyMapping', 'minifyPlugin'));
\ No newline at end of file
+    'copyXML', 'copyIndex', 'copyMapping', 'minifyPlugin', 'createDoc'));
\ No newline at end of file

jsdoc.json

+{
+  "tags": {
+    "allowUnknownTags": true
+  },
+  "opts": {
+    "template": "node_modules/better-docs",
+    "destination": "build/docs"
+  },
+  "plugins": [
+    "node_modules/better-docs/typescript",
+    "plugins/markdown"
+  ],
+  "source": {
+    "includePattern": "\\.(jsx|js|ts|tsx)$",
+    "include": ["README.md", "src/component", "src/plugin"]
+  },
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false,
+    "default": {
+      "outputSourceFiles": true
+    },
+    "path": "ink-docstrap",
+    "theme": "cerulean",
+    "navType": "vertical",
+    "linenums": true,
+    "dateFormat": "MMMM Do YYYY, h:mm:ss a"
+  }
+}
\ No newline at end of file

package.json

@@ -20,6 +20,7 @@
     "@babel/runtime": "^7.12.1",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "babel-loader": "^9.1.3",
+    "better-docs": "^2.7.3",
     "browser-sync": "^2.26.13",
     "camelcase": "^5.0.0",
     "clean-webpack-plugin": "^1.0.1",
@@ -31,6 +32,7 @@
     "gulp-concat": "^2.6.1",
     "gulp-header": "^2.0.9",
     "gulp-minify": "^3.1.0",
+    "jsdoc": "^4.0.2",
     "live-server": "^1.2.1",
     "npm-run-all": "^4.1.3",
     "onchange": "^6.1.1",

src/component/component.js

@@ -3,6 +3,14 @@ import { LitElement } from 'lit-element';
 import "../styles/pdb-ligand-env.css";
 
 // Extend the LitElement base class
+/**
+ * PDB LigandEnv component to display ligand structure in 2D along with its interactions. 
+ * This depiction can be enriched with substructure highlight, atom names, binding site 
+ * interactions and aggregated protein-ligand interactions
+ * @component 
+ * @example <caption> Basic usage </caption>
+ * <pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A" environment="development"></pdb-ligand-env>
+ */
 class pdbLigandEnv extends LitElement {
 
   //Get properties / attribute values
@@ -13,7 +21,7 @@ class pdbLigandEnv extends LitElement {
       entityId: { type: String, attribute: 'entity-id' },
       resName: { type: String, attribute: 'pdb-res-name' },
       resId: { type: Number, attribute: 'pdb-res-id' },
-      contactType: {type: String, attribute: 'contact-type'},
+      contactType: {type: Array, attribute: 'contact-type'},
       chainId: { type: String, attribute: 'pdb-chain-id' },
       substructureHighlight: { type: Array, attribute: 'substructure' },
       substructureColor: { type: String, attribute: 'color' },
@@ -51,7 +59,7 @@ class pdbLigandEnv extends LitElement {
     else if (this.resName){
       this.display.initLigandDisplay(this.resName, names).then(() => {
         if (this.contactType){
-          if(this.display.atomWeights === undefined){
+          if(this.display.ligandIntxData === undefined){
             this.display.initLigandWeights(this.resName).then(() => {
               this.display.showWeights(this.contactType);
             })

src/plugin/depiction.ts

 /**
  * This class contains all the details which are necessary for redrawing
- * RDKIt style 2D molecule depiction on a client side as well as some
- * other logic which should hopefully help with the initial placement of
+ * RDKit style 2D molecule depiction on a client side as well as some
+ * other logic for initial placement of
  * binding partners in the residue-level view.
  *
- * @author Lukas Pravda <lpravda@ebi.ac.uk>
  * @class Depiction
- * @param {string} ccdId PDB CCD id.
- * @param {Atom[]} atoms List of atoms.
- * @param {Bond[]} bonds Visual representation of bonds.
- * They do not correlate 1:1 with a number of bonds!
- * @param {Vector2D} resolution x,y dimension of the image. Needs to be used
- * for a scene shift, so it is centered.
- */
+ * @param {HTMLElement} parent HTMLElement on which depiction to be displayed.
+ * @param {any} root SVG element for the depiction.
+ * @param {any} data Json annotation of ligand SVG
+ **/
 
 class Depiction {
     ccdId: string;
@@ -26,7 +22,7 @@ class Depiction {
     public weight: d3.Selection<SVGGElement, unknown, null, undefined>;
     private structure: d3.Selection<SVGGElement, unknown, null, undefined>;
 
-    constructor(parent: any, root: any, data: any) {
+    constructor(parent: HTMLElement, root: any, data: any) {
         this.root = root;
         this.parent = parent;
         this.highlight = this.root.append('g').attr('id', 'highlight');
@@ -68,7 +64,7 @@ class Depiction {
      * degree and then gets the one with the lowest degree and places
      * the initial residue position along the vector pointing from it.
      *
-     * @param {string[]} atomNames list of atom names the bound residue
+     * @param {string[]} atomNames array of atom names the bound residue
      * has a contact with.
      * @returns {Vector2D} Returns an initial placement of the residue in contact.
      * @memberof Depiction
@@ -92,6 +88,13 @@ class Depiction {
 
         return new Vector2D(x, y);
     }
+    
+    /**
+     * Draws ligand structure by appending svg:path
+     * elements corresponding to bonds and atoms with labels
+     * @param {boolean} true if atom names need to be displayed
+     * @memberof Depiction
+     */
 
     public draw(atomNames: boolean = false) {
         this.structure.selectAll("*").remove();
@@ -102,6 +105,12 @@ class Depiction {
         else this.appendLabels();
     }
 
+    /**
+     * Highlights atoms and bonds connecting them
+     * @param {string[]} atoms array of atom names to higlight
+     * @param {string} color color to be used for higlighting
+     * @memberof Depiction
+     */
     public highlightSubgraph(atoms: Array<string>, color: string = undefined) {
         if (!this.atoms || !atoms) return;
 
@@ -132,7 +141,7 @@ class Depiction {
     /**
      * Adds circles around atoms corresponding to the value of 
      * their weights.The size, color and number of crcles around 
-     * atom indicates the strenght of weight. Currently maximum of
+     * atom indicates the strength of weight. Currently maximum of
      * three circles are drawn
      * @param {any} weights objects with atom names and value of weight
      * @param {string} colorScheme Name of color to be used for circles
@@ -146,19 +155,13 @@ class Depiction {
         })
         const data = this.atoms.filter(x => x.value >0);
         const intxWeights = weights.map(x => x.value);
-        const color = d3[`scheme${colorScheme}`][9]
+        const gradient = new Model.Gradient(intxWeights, colorScheme).getScales();
         const q1 = d3.quantile(intxWeights, 0.25);
         const q3 = d3.quantile(intxWeights, 0.75);
-
-        const IntxWeightMax = Number(d3.max(intxWeights))
-        const firstRadiusScale = d3.scaleLinear([0, IntxWeightMax], [20, 30]);
-        const firstColorScale = d3.scaleLinear([0,IntxWeightMax], ["#FFFFFF", color[4]]);
-
-        const secondRadiusScale = d3.scaleLinear([0,IntxWeightMax], [10, 20]);
-        const secondColorScale = d3.scaleLinear([0, IntxWeightMax], [color[5], color[7]])
-
-        const thirdRadiusScale = d3.scaleLinear([0, IntxWeightMax], [2, 10]);
-        const thirdColorScale = d3.scaleLinear([0, IntxWeightMax], [color[8], color[9]]);
+        
+        const firstScale = gradient.firstScale;
+        const secondScale = gradient.secondScale;
+        const thirdScale = gradient.thirdScale;
         
         this.weight.selectAll()
             .data(data)
@@ -169,16 +172,16 @@ class Depiction {
                     .append('circle')
                         .attr('cx', x.position.x)
                         .attr('cy', x.position.y)
-                        .attr('r', secondRadiusScale(x.value))
-                        .attr('fill', secondColorScale(x.value))
+                        .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', thirdRadiusScale(x.value))
-                            .attr('fill', thirdColorScale(x.value))
+                            .attr('r', thirdScale.radiusScale(x.value))
+                            .attr('fill', thirdScale.colorScale(x.value))
                             .attr("fill-opacity", "0.5")
                     }
                 }
@@ -190,66 +193,19 @@ class Depiction {
             .append('circle')
                 .attr("cx", x => x.position.x)
                 .attr("cy", x => x.position.y)
-                .attr("r", x => firstRadiusScale(x.value))
-                .attr("fill", x=> firstColorScale(x.value))
+                .attr("r", x => firstScale.radiusScale(x.value))
+                .attr("fill", x=> firstScale.colorScale(x.value))
                 .attr("fill-opacity", "0.5")
                 .on('mouseenter', (x:Atom) => this.atomMouseEnterEventHandler(x))
                 .on('mouseleave', () => this.atomMouseLeaveEventHandler());     
             
     }
 
-    // private atomScale(i: number, g:any){
-    //     let selectedAtom = d3.select(g[i]);
-    //     selectedAtom
-    //         .transition()
-    //         .duration(100)
-    //         .attr("r", Number(selectedAtom.attr("r")) * 1.2);
-    // }
-
-    // private atomShrink(i: number, g:any){
-    //     let selectedAtom = d3.select(g[i]);
-    //     selectedAtom
-    //         .transition()
-    //         .duration(100)
-    //         .attr("r", Number(selectedAtom.attr("r")) / 1.2);
-    // }
-
-    private atomMouseEnterEventHandler(x: Atom){
-        // this.atomScale(i, g)
-        this.fireExternalAtomEvent(x, Config.LigandShowAtomEvent);
-    }
-
-    private atomMouseLeaveEventHandler(){
-        // this.atomShrink(i, g);
-        this.fireExternalNullEvent(Config.LigandHideAtomEvent);
-
-    }
-
-    private fireExternalAtomEvent(atom: Atom, eventName: string){
-        const e = new CustomEvent(eventName, {
-            bubbles: true,
-            detail: {
-                tooltip: atom.toTooltip()
-            }
-        });
-        this.parent.dispatchEvent(e);
-
-    }
-
-    private fireExternalNullEvent(eventName: string) {
-        const e = new CustomEvent(eventName, {
-            bubbles: true,
-            detail: {}
-        });
-
-        this.parent.dispatchEvent(e);
-    }
-
-
     /**
-     * Appends to a given selection the visual representation of bonds as svg:path elements.
-     *
+     * Appends to a given selection the visual representation of 
+     * bonds as svg:path elements.
      * representation of the bond visuals.
+     * @private
      * @memberof Depiction
      */
     private appendBondVisuals(): void {
@@ -263,7 +219,7 @@ class Depiction {
 
     /**
      * Append atom name labels to the visualization.
-     *
+     * @private
      * @memberof Depiction
      */
     private appendAtomNames() {
@@ -281,12 +237,8 @@ class Depiction {
     }
 
     /**
-     * Append depiction labels to the visualization. Because RDKIt places
-     * the labels slightly differently this information needs to be
-     * consumed too, because we cannot use just atom position directly.
-     * Also there are all sorts of colorful subscripts and superscripts,
-     * so it is much easier to use it this way.
-     *
+     * Append depiction labels to the visualization.
+     * @private
      * @memberof Depiction
      */
     private appendLabels() {
@@ -310,6 +262,12 @@ class Depiction {
             });
     }
 
+    /**
+     * Finds the center of an array of atoms
+     * @param {string} ids atom ids 
+     * @return {Vector2D} coordinates of center
+     * @memeberof Depiction
+     */
     public getCenter(ids: string[]): Vector2D {
         let coords = new Array<Vector2D>();
 
@@ -328,7 +286,6 @@ class Depiction {
      *
      *
      * @param {Map<string, number>} map
-     * @returns
      * @memberof Depiction
      */
     public sortMap(map: Map<string, number>) {
@@ -346,9 +303,77 @@ class Depiction {
 
         return newMap;
     }
+
+    // #region event handlers
+    /**
+     * Mouse enter event handler for circles around atoms
+     * depicting their weights
+     * @private
+     * @param {Atom} atom object
+     * @memebrof Depiction
+     */
+
+    private atomMouseEnterEventHandler(x: Atom){
+        this.fireExternalAtomEvent(x, Config.LigandShowAtomEvent);
+    }
+
+    /**
+     * Mouse leave event handler for circlea round atoms
+     * depicting their weights
+     * @private
+     * @memberof Depiction
+     */
+    private atomMouseLeaveEventHandler(){
+        this.fireExternalNullEvent(Config.LigandHideAtomEvent);
+
+    }
+    // #endregion
+
+    // #region fire events
+    /**
+     * Dispatches custom event to display atom names and
+     * corresponding weights on tooltip on mouse enter
+     * @private
+     * @param {Atom} atom object
+     * @param {string} eventName name of event
+     * @memeberof Depiction
+     */
+    private fireExternalAtomEvent(atom: Atom, eventName: string){
+        const e = new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {
+                tooltip: atom.toTooltip()
+            }
+        });
+        this.parent.dispatchEvent(e);
+
+    }
+
+    /**
+     * Dispatches event to hide tooltip on mouse leave
+     * @private
+     * @param {string} eventName name of event
+     * @memeberof Depiction 
+     */
+    private fireExternalNullEvent(eventName: string) {
+        const e = new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {}
+        });
+
+        this.parent.dispatchEvent(e);
+    }
+
+    // #endregion
+
 }
 
 
+
+
+
+
+
 /**
  * Atom from the depiction
  *
@@ -376,7 +401,7 @@ class Atom {
      *
      *
      * @param {Atom} other
-     * @returns true if the atoms are equal
+     * @returns {boolean} true if the atoms are equal
      * @memberof Atom
      */
     public equals(other: Atom): boolean {
@@ -479,12 +504,6 @@ class Bond {
     coords: string;
     style: string;
 
-    /**
-     *Creates an instance of the bond.
-     * @param {Atom} a
-     * @param {Atom} b
-     * @memberof Bond
-     */
     constructor(a: Atom, b: Atom, coords: string, style: string) {
         this.bgn = a;
         this.end = b;
@@ -512,7 +531,7 @@ class Bond {
      * Check whether or not a bond contains the atom.
      *
      * @param {Atom} other The other side of the bond
-     * @returns True if the atom is a part of the bond, false otherwise.
+     * @returns {boolean} True if the atom is a part of the bond, false otherwise.
      * @memberof Bond
      */
     public containsAtom(other: Atom) {

src/plugin/manager.ts

+/**
+ * This class contains methods for creating all the visualization
+ * components of the LigandEnv
+ *
+ * @class Visualization
+ * @param {HTMLElement} element HTMLElement to display the visualization
+ * @param {Config.UIParameters} uiParameters UI parameter configurations
+ * @param {string} env environment to fetch data from
+ * 
+ */
 class Visualization {
     // component related
     private parent: HTMLElement;
@@ -26,7 +36,7 @@ class Visualization {
 
     private visualsMapper: VisualsMapper;
     private interactionsData: any;
-    private atomWeights: any;
+    private ligandIntxData: any;
     private selectedResidueHash: string;
     private nodeDragged: boolean;
 
@@ -261,7 +271,7 @@ class Visualization {
      * PDBeChem process.
      *
      * @param {string} ligandId
-     * @returns
+     * @param {boolean} withNames true for displaying atom names
      * @memberof Visualization
      */
     public async initLigandDisplay(ligandId: string, withNames: boolean = false) {
@@ -275,25 +285,25 @@ class Visualization {
 
     
      /**
-     * Download and set atom weights from protein-ligand interactions data.
+     * Download aggregated protein-ligand interactions data.
      *
      * @param {string} ligandId
      * @memberof Visualization
      */   
     
     public async initLigandWeights(ligandId: string){
-        const weightUrl = `https://raw.githubusercontent.com/roshkjr/Learning-sources/main/${ligandId}_atom_intx.json`
+        const weightUrl = `https://raw.githubusercontent.com/roshkjr/Learning-sources/main/${ligandId}_atom_residue_intx.json`
         return d3.json(weightUrl)
-            .then((d: any) => this.atomWeights = d)
-            .catch(e => console.log(e));
+            .then((d: any) => this.ligandIntxData = d);
     }
 
 
     /**
      * Add depiction to the canvas from external resource.
      *
-     * @param {*} depiction Content of annotation.json file generated by
+     * @param {any} depiction Content of annotation.json file generated by
      * the PDBeChem process.
+     * @param {boolean} withNames true for displaying atom names
      * @memberof Visualization
      */
     public addDepiction(depiction: any, withNames: boolean) {
@@ -308,11 +318,11 @@ class Visualization {
      * @param {string} contactType 
      * @memberof Visualization
      */
-    public showWeights(contactType: string){
-        if ((this.depiction === undefined) || (this.atomWeights) === undefined || !(contactType in this.atomWeights)) return;
-        const weight = this.atomWeights[contactType];
+    public showWeights(contactType: string[]){
+        if ((this.depiction === undefined) || (this.ligandIntxData) === undefined) return;
+        const atomPropensity= new Model.LigandIntx(this.ligandIntxData, contactType).getAtomIntxPropensity();
         const colorScheme = "Greens";
-        this.depiction.addCircles(weight, colorScheme);
+        this.depiction.addCircles(atomPropensity, colorScheme);
         if(this.zoomHandler !== undefined){
             this.zoomHandler(this.svg, d3.zoomIdentity)
         };
@@ -353,6 +363,7 @@ class Visualization {
      *
      * @param {*} data Data content of the API end point
      * /pdb/bound_ligand_interactions
+     * @param {boolean} true if atom names to be displayed
      * @memberof Visualization
      */
     public addLigandInteractions(data: any, withNames: boolean = false) {
@@ -377,7 +388,7 @@ class Visualization {
     /**
      * Add bound molecule interactions to the canvas.
      *
-     * @param {*} data Data content of the API end point
+     * @param {any} data Data content of the API end point
      * /pdb/bound_molecule_interactions
      * @param {string} bmId Bound molecule id
      * @memberof Visualization
@@ -397,6 +408,7 @@ class Visualization {
 
 
     // #region menu functions
+    
     /**
      * Export scene into an SVG components. It relies on the availability
      * of the external CSS for SVG styling. Otherwise it does not work.
@@ -690,7 +702,6 @@ class Visualization {
      * @param {Model.InteractionNode} n Interaction node user clicked to
      * @param {number} i index o the interaction node
      * @param {*} g group of interaction nodes
-     * @returns
      * @memberof Visualization
      */
     private selectLigand(n: Model.InteractionNode, i: number, g: any) {
@@ -805,7 +816,7 @@ class Visualization {
 
     /**
      * Setup display of interactions for bound molecule.
-     * * This includes: setup of links, nodes, simulation and subscribing to relevant events.
+     * This includes: setup of links, nodes, simulation and subscribing to relevant events.
      * No depiction is required for this step.
      *
      * @private

src/plugin/residuefactory.ts

@@ -45,7 +45,7 @@ class ResidueProvider {
      * Get single letter abbreviation of the ligand.
      *
      * @param {string} name Name of the chemical compound
-     * @returns Single letter abbreviation of the ligand
+     * @returns {string} Single letter abbreviation of the ligand
      * @memberof ResidueProvider
      */
     public getAminoAcidAbbreviation(name: string): string {
@@ -57,7 +57,6 @@ class ResidueProvider {
      * Fetch single letter abbreviations from API if they are not present
      *
      * @param {string} n
-     * @returns
      * @memberof ResidueProvider
      */
     public downloadAnnotation(r: Model.Residue): void {

src/plugin/resources.ts

@@ -128,7 +128,6 @@ namespace Resources {
      * @param {string} chainId
      * @param {number} resId
      * @param {Model.Environment} env
-     * @returns
      */
     export function ligandInteractionsAPI(pdbId: string, chainId: string, resId: number, env: Model.Environment) {
         let url = '';

src/plugin/ui.ts

@@ -146,7 +146,6 @@ class UI {
      *
      * @param {Config.UIParameters} p Object with annotation which
      * UI elements should be created.
-     * @returns
      * @memberof UI
      */
     public register(p: Config.UIParameters) {