[airflow] 02/05: Improve graph view load time for dags with open groups (#17821)

[kaxilnaik]

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

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

commit d5ec5c7ccc8eb06a311d4289b73e4ddc57d74810
Author: Emil Ejbyfeldt <eejbyfe...@liveintent.com>
AuthorDate: Thu Aug 26 14:53:44 2021 +0200

    Improve graph view load time for dags with open groups (#17821)
    
    * Only draw once during initial graph setup
    
    The previous behavior could cause significat slowness for when loading
    the graph view for large dags with many task groups.
    
    * Improve name and fix camelCased
    
    * Fix indent
    
    * PR suggestions remove args
    
    (cherry picked from commit bfdda083d684b279b6b07e79080373ae4d36939a)
---
 airflow/www/static/js/graph.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index 5d8ab8e..7aeedb1 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -149,6 +149,8 @@ function draw() {
       // A group node
       if (d3.event.defaultPrevented) return;
       expandGroup(nodeId, node);
+      draw();
+      focusGroup(nodeId);
     } else if (nodeId in tasks) {
       // A task node
       const task = tasks[nodeId];
@@ -451,6 +453,9 @@ function groupTooltip(nodeId, tis) {
 function updateNodesStates(tis) {
   for (const nodeId of g.nodes()) {
     const { elem } = g.node(nodeId);
+    if (!elem) {
+      return;
+    }
     elem.setAttribute('class', `node enter ${getNodeState(nodeId, tis)}`);
     elem.setAttribute('data-toggle', 'tooltip');
 
@@ -594,7 +599,7 @@ function focusGroup(nodeId) {
 }
 
 // Expands a group node
-function expandGroup(nodeId, node, focus = true) {
+function expandGroup(nodeId, node) {
   node.children.forEach((val) => {
     // Set children nodes
     g.setNode(val.id, val.value);
@@ -631,12 +636,6 @@ function expandGroup(nodeId, node, focus = true) {
     }
   });
 
-  draw();
-
-  if (focus) {
-    focusGroup(nodeId);
-  }
-
   saveExpandedGroup(nodeId);
 }
 
@@ -683,7 +682,7 @@ function expandSavedGroups(expandedGroups, node) {
 
   node.children.forEach((childNode) => {
     if (expandedGroups.has(childNode.id)) {
-      expandGroup(childNode.id, g.node(childNode.id), false);
+      expandGroup(childNode.id, g.node(childNode.id));
 
       expandSavedGroups(expandedGroups, childNode);
     }
@@ -700,6 +699,9 @@ expandGroup(null, nodes);
 // Expand the node that were previously expanded
 expandSavedGroups(expandedGroups, nodes);
 
+// Draw once after all groups have been expanded
+draw();
+
 // Restore focus (if available)
 if (g.hasNode(focusNodeId)) {
   focusGroup(focusNodeId);