[airflow] branch v2-5-test updated: Fix graph zoom scale (#30355)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch v2-5-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v2-5-test by this push:
     new c468c0f8cd Fix graph zoom scale (#30355)
c468c0f8cd is described below

commit c468c0f8cd7ec14a927b9c7eb2c5548884f90c10
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Wed Mar 29 13:37:29 2023 -0400

    Fix graph zoom scale (#30355)
    
    (cherry picked from commit 8e0be0603e519b9b615e775c27df9fdc62c00587)
---
 airflow/www/static/js/graph.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index 8ca4a99fc7..60f919e019 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -241,6 +241,7 @@ function draw() {
 }
 
 let zoom = null;
+const maxZoom = 0.3;
 
 function setUpZoomSupport() {
   // Set up zoom support for Graph
@@ -257,11 +258,13 @@ function setUpZoomSupport() {
   const padding = width * 0.05;
 
   // Calculate applicable scale for zoom
-  const zoomScale = Math.min(Math.min(width / graphWidth, height / 
graphHeight)) * 0.8;
+
+  const zoomScale = Math.min(Math.min(width / graphWidth, height / 
graphHeight), maxZoom) * 0.8;
 
   zoom.translate([(width / 2) - ((graphWidth * zoomScale) / 2) + padding, 
padding]);
   zoom.scale(zoomScale);
   zoom.event(innerSvg);
+  zoom.scaleExtent([0, maxZoom]);
 }
 
 function highlightNodes(nodes) {
@@ -628,7 +631,7 @@ function focusGroup(nodeId, followMouse = true) {
     ];
 
     // Calculate zoom scale to fill most of the canvas with the node/cluster 
in focus.
-    const scale = Math.min(Math.min(width / nodeWidth, height / nodeHeight), 
1) * 0.2;
+    const scale = Math.min(Math.min(width / nodeWidth, height / nodeHeight), 
maxZoom) * 0.8;
 
     // Move the graph so that the node that was expanded/collapsed is centered 
around
     // the mouse click.