Added features for aggregated ligand interaction view and interactivity with heat map

src/component/component.js

@@ -21,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: Array, attribute: 'contact-type'},
+      contactType: {type: Array, attribute: 'contact-type', noAccessors: true},
       chainId: { type: String, attribute: 'pdb-chain-id' },
       substructureHighlight: { type: Array, attribute: 'substructure' },
       substructureColor: { type: String, attribute: 'color' },
@@ -31,11 +31,27 @@ class pdbLigandEnv extends LitElement {
     };
   }
 
+  // Create custom accessors for contactType
+  set contactType(value) {
+    let prevCType = this._contactType + "";
+    this._contactType = value;
+    if (prevCType.length > 0) {
+      this.renderLigandEnv();
+    }
+  } 
+  get contactType() { return this._contactType; }
+
   constructor() {
     super();
   }
 
   async connectedCallback() {
+    this.renderLigandEnv();
+  }
+
+  renderLigandEnv() {
+    this.innerHTML = "";
+
     this.highlightSubstructure = [];
     let uiParams = new Config.UIParameters();
     uiParams.zoom = this.zoomOn;