refactore boundingbox calcualtion for cases when label has the minimum coordinates and not atoms

src/plugin/manager.ts

@@ -36,7 +36,7 @@ class Visualization {
 
     private visualsMapper: VisualsMapper;
     private interactionsData: any;
-    private ligandIntxData: any;
+    private ligandIntxData: Model.aggregatedInteractionData;
     private selectedResidueHash: string;
     private nodeDragged: boolean;
 
@@ -308,7 +308,7 @@ class Visualization {
      */   
     
     public async initLigandWeights(ligandId: string){
-        const weightUrl = `https://raw.githubusercontent.com/roshkjr/Learning-sources/main/${ligandId}_atom_residue_intx.json`
+        const weightUrl = Resources.interactionAPI(ligandId, Model.Environment.Development);
         return d3.json(weightUrl)
             .then((d: any) => this.ligandIntxData = d[ligandId]);
     }
@@ -521,43 +521,49 @@ class Visualization {
             this.computeBoundingBox(minX, maxX, minY, maxY);
 
         } else if (this.depiction !== undefined) {
-            let minX: any = d3.min(this.depiction.atoms.map((x: Atom) => x.position.x));
-            let minY: any = d3.min(this.depiction.atoms.map((x: Atom) => x.position.y));
+            let minX: any = d3.min(this.depiction.atoms.map((x: Atom) => x.labels.length==0 ? x.position.x : x.position.x - 50));
+            let minY: any = d3.min(this.depiction.atoms.map((x: Atom) => x.labels.length==0 ? x.position.y : x.position.y - 50));
 
-            let maxX: any = d3.max(this.depiction.atoms.map((x: Atom) => x.position.x));
-            let maxY: any = d3.max(this.depiction.atoms.map((x: Atom) => x.position.y));
+            let maxX: any = d3.max(this.depiction.atoms.map((x: Atom) => x.labels.length==0 ? x.position.x : x.position.x + 50));
+            let maxY: any = d3.max(this.depiction.atoms.map((x: Atom) => x.labels.length==0 ? x.position.y : x.position.y + 50));
 
             this.computeBoundingBox(minX, maxX, minY, maxY);
         }
     }
 
     private computeBoundingBox(minX: number, maxX: number, minY: number, maxY: number) {
-        // The width and the height of the graph
-        let molWidth = Math.max((maxX - minX), this.parent.offsetWidth);
-        let molHeight = Math.max((maxY - minY), this.parent.offsetHeight);
-
-        // how much larger the drawing area is than the width and the height
-        let widthRatio = this.parent.offsetWidth / molWidth;
-        let heightRatio = this.parent.offsetHeight / molHeight;
-
-        // we need to fit it in both directions, so we scale according to
-        // the direction in which we need to shrink the most
-        let minRatio = Math.min(widthRatio, heightRatio) * 0.85;
+        // Calculate the dimensions of the molecule
+        let molWidth = maxX - minX;
+        let molHeight = maxY - minY;
+
+        // Calculate the aspect ratios
+        let molAspectRatio = molWidth / molHeight;
+        let parentAspectRatio = this.parent.offsetWidth / this.parent.offsetHeight;
+
+        // Calculate scaling factor to fit the molecule within the parent dimensions
+        let scale;
+        if (molAspectRatio > parentAspectRatio) {
+        // Molecule is wider than the parent
+        scale = this.parent.offsetWidth / molWidth;
+        } else {
+        // Molecule is taller than the parent
+        scale = this.parent.offsetHeight / molHeight;
+        }
 
-        // the new dimensions of the molecule
-        let newMolWidth = molWidth * minRatio;
-        let newMolHeight = molHeight * minRatio;
+        // Apply a margin (optional)
+        scale *= 0.85;
 
-        // translate so that it's in the center of the window
-        let xTrans = -(minX) * minRatio + (this.parent.offsetWidth - newMolWidth) / 2;
-        let yTrans = -(minY) * minRatio + (this.parent.offsetHeight - newMolHeight) / 2;
+        // Calculate new dimensions after scaling
+        let newMolWidth = molWidth * scale;
+        let newMolHeight = molHeight * scale;
 
-        // do the actual moving
-        this.canvas.attr('transform', `translate(${xTrans}, ${yTrans}) scale(${minRatio})`);
+        // Calculate translation to center the molecule
+        let xTrans = -minX * scale + (this.parent.offsetWidth - newMolWidth) / 2;
+        let yTrans = -minY * scale + (this.parent.offsetHeight - newMolHeight) / 2;
 
-        // tell the zoomer what we did so that next we zoom, it uses the
-        // transformation we entered here
-        let translation = d3.zoomIdentity.translate(xTrans, yTrans).scale(minRatio);
+        // Apply the transformation
+        this.canvas.attr('transform', `translate(${xTrans}, ${yTrans}) scale(${scale})`);
+        let translation = d3.zoomIdentity.translate(xTrans, yTrans).scale(scale);
         this.zoomHandler?.transform(this.svg, translation);
     }