changes in the web-component

demo/demo_component.html

@@ -14,7 +14,7 @@
   <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-0.3.0-min.js"></script>
+  <script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-1.0.0-min.js"></script>
 
 </head>
 
@@ -37,7 +37,7 @@
   <!--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></pdb-ligand-env>
+      <pdb-ligand-env pdb-res-name="CLR" zoom-on names-on></pdb-ligand-env>
     </div>
   </div>
 

dependencies/index.html

@@ -18,7 +18,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
     charset="utf-8"></script>
 
-<script type="module" src="pdb-ligand-env-component-0.3.0-min.js"></script>
+<script type="module" src="pdb-ligand-env-component-1.0.0-min.js"></script>
 <script>
     var renderBmInteractions = function (id, bmId) {
         var int =
@@ -126,9 +126,9 @@
 
     <!--
         Further use in the app for bound molecule interactions:
-        
+
         <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
-        
+
         for ligand interactions:
         <pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
     -->

package.json

 {
   "name": "pdb-ligand-env",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "",
   "main": "app.js",
   "dependencies": {

src/component/component.js

@@ -17,6 +17,7 @@ class pdbLigandEnv extends LitElement {
       substructureHighlight: { type: Array, attribute: 'substructure' },
       substructureColor: { type: String, attribute: 'color' },
       zoomOn: { type: Boolean, attribute: 'zoom-on' },
+      namesOn: { type: Boolean, attribute: 'names-on' },
       env: { type: String, attribute: 'environment' },
     };
   }
@@ -32,9 +33,9 @@ class pdbLigandEnv extends LitElement {
     uiParams.menu = this.pdbId !== undefined;
 
     let env = this.env === undefined ? "production" : this.env;
+    let names = this.namesOn === undefined ? false : this.namesOn;
 
     this.display = new Visualization(this, uiParams, env);
-
     if (this.pdbId) {
       if (this.entityId) {
         this.display.initCarbohydratePolymerInteractions(this.pdbId, this.bmId, this.entityId);
@@ -47,7 +48,7 @@ class pdbLigandEnv extends LitElement {
       }
     }
     else if (this.resName) {
-      this.display.initLigandDisplay(this.resName).then(() => this.display.centerScene());
+      this.display.initLigandDisplay(this.resName, names).then(() => this.display.centerScene());
     }
   }
 
@@ -84,7 +85,11 @@ class pdbLigandEnv extends LitElement {
   }
 
   set zoom(data) {
-    if (this.display !== undefined) this.display.toogleZoom(data);
+    if (this.display !== undefined) this.display.toggleZoom(data);
+  }
+
+  set atomNames(data) {
+    this.display.toggleDepiction(data);
   }
   //#endregion properties
 

src/plugin/depiction.ts

@@ -90,12 +90,12 @@ class Depiction {
         return new Vector2D(x, y);
     }
 
-    public draw(atom_names: boolean = false) {
+    public draw(atomNames: boolean = false) {
         this.structure.selectAll("*").remove();
 
         this.appendBondVisuals();
 
-        if (atom_names) this.appendAtomNames();
+        if (atomNames) this.appendAtomNames();
         else this.appendLabels();
     }
 

src/plugin/manager.ts

@@ -41,8 +41,9 @@ class Visualization {
 
         this.visualsMapper = new VisualsMapper(this.environment);
         this.rProvider = ResidueProvider.getInstance(this.environment);
-        this.fullScreen = false;
         this.bindingSites = new Array<Model.BindingSite>();
+
+        this.fullScreen = false;
         this.nodeDragged = false;
 
         if (uiParameters === undefined) uiParameters = new Config.UIParameters();
@@ -126,7 +127,6 @@ class Visualization {
         });
         this.links?.attr('opacity', 1);
         this.nodes?.attr('opacity', 1);
-
     }
 
     private linkMouseOverEventHandler(x: Model.Link, i: number, g: any) {
@@ -244,13 +244,13 @@ class Visualization {
      * @param {string} chainId chain id aka: auth_asym_id
      * @memberof Visualization
      */
-    public initLigandInteractions(pdbId: string, resId: number, chainId: string) {
+    public initLigandInteractions(pdbId: string, resId: number, chainId: string, withNames: boolean = false) {
         this.pdbId = pdbId;
         let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId, this.environment);
 
         d3.json(url)
             .catch(e => this.processError(e, 'No interactions data are available.'))
-            .then((data: any) => this.addLigandInteractions(data))
+            .then((data: any) => this.addLigandInteractions(data, withNames))
             .then(() => new Promise(resolve => setTimeout(resolve, 1500)))
             .then(() => this.centerScene());
     }
@@ -263,12 +263,12 @@ class Visualization {
      * @returns
      * @memberof Visualization
      */
-    public async initLigandDisplay(ligandId: string) {
+    public async initLigandDisplay(ligandId: string, withNames: boolean = false) {
         const ligandUrl = Resources.ligandAnnotationAPI(ligandId, this.environment);
 
         return d3.json(ligandUrl)
             .catch(e => this.processError(e, `Component ${ligandId} was not found.`))
-            .then((d: any) => this.addDepiction(d))
+            .then((d: any) => this.addDepiction(d, withNames))
             .then(() => this.centerScene());
     }
 
@@ -280,13 +280,26 @@ class Visualization {
      * the PDBeChem process.
      * @memberof Visualization
      */
-    public addDepiction(depiction: any) {
+    public addDepiction(depiction: any, withNames: boolean) {
         this.depiction = new Depiction(this.depictionRoot, depiction);
-        this.depiction.draw();
+        this.depiction.draw(withNames);
     }
 
-    public toggleDepiction(atomNames: boolean) {
-        this.depiction.draw(atomNames);
+
+    /**
+     * Show depiction with/without atom names
+     *
+     * @param {boolean} withNames Controls atom labels to be displayed
+     * @memberof Visualization
+     */
+    public toggleDepiction(withNames: boolean) {
+        if (!this.depiction) return;
+
+        this.depiction.draw(withNames);
+    }
+
+    public toggleZoom(active: boolean) {
+        this.zoomHandler = active ? this.getZoomHandler() : undefined;
     }
 
 
@@ -314,11 +327,6 @@ class Visualization {
     }
 
 
-    public toogleZoom(active: boolean) {
-        this.zoomHandler = active ? this.getZoomHandler() : undefined;
-    }
-
-
     /**
      * Add ligand interactions to the canvas
      *
@@ -326,13 +334,13 @@ class Visualization {
      * /pdb/bound_ligand_interactions
      * @memberof Visualization
      */
-    public addLigandInteractions(data: any) {
+    public addLigandInteractions(data: any, withNames: boolean = false) {
         let key = Object.keys(data)[0];
         let body = data[key][0];
         this.interactionsData = data;
 
         if (this.depiction === undefined || this.depiction.ccdId !== body.ligand.chem_comp_id) {
-            this.initLigandDisplay(body.ligand.chem_comp_id).then(() => {
+            this.initLigandDisplay(body.ligand.chem_comp_id, withNames).then(() => {
                 this.presentBindingSite = new Model.BindingSite().fromLigand(key, body, this.depiction);
                 this.bindingSites.push(this.presentBindingSite);
                 this.setupLigandScene();

src/plugin/ui.ts

@@ -235,7 +235,7 @@ class UI {
                     .on('click', () => this.reinitialize());
             }
 
-            if (p.reinitialize) {
+            if (p.names) {
                 dynamicPanel.append('i')
                     .attr('id', 'pdb-lig-env-names-btn')
                     .attr('title', 'Show/hide atom names')
@@ -313,11 +313,11 @@ class UI {
         let isActive = btn.classed('active');
 
         if (isActive) {
-            this.display.toggleDepiction(true);
+            this.display.toggleDepiction(false);
             btn.style('color', '#637ca0');
             btn.classed('active', false);
         } else {
-            this.display.toggleDepiction(false);
+            this.display.toggleDepiction(true);
             btn.style('color', '');
             btn.classed('active', true);
         }