chenyulin0719 commented on code in PR #186:
URL: https://github.com/apache/yunikorn-web/pull/186#discussion_r1566666544


##########
src/app/components/queue-v2/queues-v2.component.ts:
##########
@@ -69,23 +69,76 @@ export class QueueV2Component implements OnInit {
         if (data && data.rootQueue) {
           this.rootQueue = data.rootQueue;
           queueVisualization(this.rootQueue as QueueInfo)
+          setTimeout(() => this.adjustToScreen(),1000) // since the 
ngAfterViewInit hook is not working, we used setTimeout instead
         }
       });
   }
+
+  adjustToScreen() {
+    const fitButton = document.getElementById('fitButton');
+    fitButton?.click(); 
+  }
 }
 
 function queueVisualization(rawData : QueueInfo){
+  let numberOfNode = 0;
+  const duration = 750;
+
   const svg = select('.visualize-area').append('svg')
                .attr('width', '100%')
                .attr('height', '100%')
-              
-    const svgWidth = 1150;
-    const svgHeight = 600;
+                  
+    function fitGraphScale(){
+      const baseSvgElem = svg.node() as SVGGElement;
+      const bounds = baseSvgElem.getBBox();
+      const parent = baseSvgElem.parentElement as HTMLElement;
+      const fullWidth = parent.clientWidth;
+      const fullHeight = parent.clientHeight;
+      
+      const xfactor: number = fullWidth / bounds.width;
+      const yfactor: number = fullHeight / bounds.height;
+      let scaleFactor: number = Math.min(xfactor, yfactor);
+
+       // Add some padding so that the graph is not touching the edges
+       const paddingPercent = 0.9;
+       scaleFactor = scaleFactor * paddingPercent;
+       return scaleFactor
+    }
+
+    function centerGraph() {
+        const bbox = (svgGroup.node() as SVGGElement).getBBox();
+        const cx = bbox.x + bbox.width / 2;
+        const cy = bbox.y + bbox.height / 2;
+        return {cx, cy};
+    }
 
-    // Center the group
+    function adjustVisulizeArea(duration : number = 0){
+      const scaleFactor = fitGraphScale();
+      const {cx, cy} = centerGraph();
+      svg.transition().duration(duration).call(zoom.translateTo, cx, cy)
+      .on("end", function() {
+        svg.transition().duration(duration).call(zoom.scaleBy, scaleFactor)

Review Comment:
   1.5 sec delay (750ms to center + 750ms zoom out/in ) is too long to me. 
   I would prefer 200 ms + 500 ms. 
   However, it's a matter of personal preference, not a strict request for 
change.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to