doupache commented on code in PR #186:
URL: https://github.com/apache/yunikorn-web/pull/186#discussion_r1572296754
##########
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:
@chenyulin0719, I've changed the total duration to 1 second, which is even
smoother. Thanks for the feedback!
--
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]
