added depictionOnly property to use the component when 2D depiction abnd...

added depictionOnly property to use the component when 2D depiction abnd substructure higlight is only needed

src/component/component.js

@@ -27,6 +27,7 @@ class pdbLigandEnv extends LitElement {
       substructureColor: { type: String, attribute: 'color' },
       zoomOn: { type: Boolean, attribute: 'zoom-on' },
       namesOn: { type: Boolean, attribute: 'names-on' },
+      depictionOnly: {type: Boolean, attribute: 'depiction-only'},
       env: { type: String, attribute: 'environment' },
     };
   }
@@ -60,7 +61,14 @@ class pdbLigandEnv extends LitElement {
     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.depictionOnly){
+      this.display = new Visualization(this, uiParams, env, true)
+    }
+    else{
+      this.display = new Visualization(this, uiParams, env, false);
+    }
+    
     if (this.pdbId) {
       if (this.entityId) {
         this.display.initCarbohydratePolymerInteractions(this.pdbId, this.bmId, this.entityId);
@@ -96,7 +104,15 @@ class pdbLigandEnv extends LitElement {
     this.display.centerScene();
   }
 
+  set interaction(IntxData) {
+    if(!IntxData || !this.display) return;
+    this.display.ligandIntxData = IntxData;
+  }
+
   set atomWeights(contactType) {
+    if (!contactType || !this.display.ligandIntxData){
+      return;
+    }
     this.display.showWeights(contactType);
   }
 

src/plugin/manager.ts

@@ -45,49 +45,46 @@ class Visualization {
     public fullScreen: boolean;
     // #endregion
 
-    constructor(element: HTMLElement, uiParameters: Config.UIParameters = undefined, env: string = "production") {
+    constructor(element: HTMLElement, uiParameters: Config.UIParameters = undefined, env: string = "production", depictionOnly: Boolean = false) {
         this.parent = element;
         this.environment = this.parseEnvironment(env);
         this.parent.style.cssText += "display: block; height: 100%; width: 100%; position: relative;";
-
-        this.visualsMapper = new VisualsMapper(this.environment);
-        this.rProvider = ResidueProvider.getInstance(this.environment);
-        this.bindingSites = new Array<Model.BindingSite>();
-
-        this.fullScreen = false;
-        this.nodeDragged = false;
-
-        if (uiParameters === undefined) uiParameters = new Config.UIParameters();
-
-        new UI(this.parent, this).register(uiParameters);
-
         this.svg = d3.select(this.parent)
-            .append('div')
-            .attr('id', 'pdb-lig-env-root')
-            .append('svg')
-            .style('background-color', 'white')
-            .attr('xmlns', 'http://www.w3.org/2000/svg')
-            .attr('width', '100%')
-            .attr('height', '100%');
-
+                        .append('div')
+                        .attr('id', 'pdb-lig-env-root')
+                        .append('svg')
+                        .style('background-color', 'white')
+                        .attr('xmlns', 'http://www.w3.org/2000/svg')
+                        .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');
-        this.nodesRoot = this.canvas.append('g').attr('id', 'nodes');
-
-        if (uiParameters.zoom) this.zoomHandler = this.getZoomHandler();
-
-        document.addEventListener(Config.ligandHeatmapMouseoverEvent, e => this.ligHeatmapMouseoverEventHandler(e));
-        document.addEventListener(Config.ligandHeatmapMouseoutEvent, e => this.ligHeatmapMouseoutEventHandler(e));
+        d3.select(this.parent).on('resize', () => this.resize());
 
-        document.addEventListener(Config.molstarClickEvent, e => this.molstarClickEventHandler(e));
-        document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e)); 
-        document.addEventListener(Config.molstarMouseoutEvent, () => this.molstarMouseoutEventHandler());
+        //the below properties are only needed if interactivity with the component is needed. 
+        if(!depictionOnly){
+            this.visualsMapper = new VisualsMapper(this.environment);
+            this.rProvider = ResidueProvider.getInstance(this.environment);
+            this.bindingSites = new Array<Model.BindingSite>();
+            this.fullScreen = false;
+            this.nodeDragged = false;
+            if (uiParameters === undefined) uiParameters = new Config.UIParameters();
+            new UI(this.parent, this).register(uiParameters);
+            this.linksRoot = this.canvas.append('g').attr('id', 'links');
+            this.nodesRoot = this.canvas.append('g').attr('id', 'nodes');
+            if (uiParameters.zoom) this.zoomHandler = this.getZoomHandler();
+
+            document.addEventListener(Config.ligandHeatmapMouseoverEvent, e => this.ligHeatmapMouseoverEventHandler(e));
+            document.addEventListener(Config.ligandHeatmapMouseoutEvent, e => this.ligHeatmapMouseoutEventHandler(e));
+    
+            document.addEventListener(Config.molstarClickEvent, e => this.molstarClickEventHandler(e));
+            document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e)); 
+            document.addEventListener(Config.molstarMouseoutEvent, () => this.molstarMouseoutEventHandler());
 
-        d3.select(this.parent).on('resize', () => this.resize());
-        this.addMarkers();
+        }
+    
+        // this.addMarkers();
     }
 
     // #region event handlers