Improve graph view refresh (#16696)

* Improve graph view refresh

- only refresh if state has actually changed

- stop refresh if all states are final

- swap out `.attr()` to `.prop()` for handling `checked` see https://stackoverflow.com/questions/5874652/prop-vs-attr

* check only on final states instead of pending

airflow/www/static/js/graph.js

@@ -364,14 +364,29 @@ function setFocusMap(state) {
 
 const stateIsSet = () => !!Object.keys(stateFocusMap).find((key) => stateFocusMap[key]);
 
+let prevTis;
+
 function handleRefresh() {
   $('#loading-dots').css('display', 'inline-block');
   $.get(getTaskInstanceURL)
     .done(
       (tis) => {
+        // only refresh if the data has changed
+        if (prevTis !== tis) {
         // eslint-disable-next-line no-global-assign
-        taskInstances = JSON.parse(tis);
-        updateNodesStates(taskInstances);
+          taskInstances = JSON.parse(tis);
+          const states = Object.values(taskInstances).map((ti) => ti.state);
+          updateNodesStates(taskInstances);
+
+          // end refresh if all states are final
+          if (!states.some((state) => (
+            ['success', 'failed', 'upstream_failed', 'skipped', 'removed'].indexOf(state) === -1))
+          ) {
+            $('#auto_refresh').prop('checked', false);
+            clearInterval(refreshInterval);
+          }
+        }
+        prevTis = tis;
         setTimeout(() => { $('#loading-dots').hide(); }, 500);
         $('#error').hide();
       },
@@ -409,7 +424,7 @@ $('#auto_refresh').change(() => {
 
 function initRefresh() {
   if (localStorage.getItem('disableAutoRefresh')) {
-    $('#auto_refresh').removeAttr('checked');
+    $('#auto_refresh').prop('checked', false);
   }
   startOrStopRefresh();
   d3.select('#refresh_button').on('click', () => handleRefresh());

airflow/www/static/js/tree.js

@@ -457,7 +457,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (getActiveRuns()) {
           handleRefresh();
         } else {
-          $('#auto_refresh').removeAttr('checked');
+          $('#auto_refresh').prop('checked', false);
         }
       }, 3000); // run refresh every 3 seconds
     } else {
@@ -480,7 +480,7 @@ document.addEventListener('DOMContentLoaded', () => {
   function initRefresh() {
     // default to auto-refresh if there are any active dag runs
     if (getActiveRuns() && !localStorage.getItem('disableAutoRefresh')) {
-      $('#auto_refresh').attr('checked', true);
+      $('#auto_refresh').prop('checked', true);
     }
     startOrStopRefresh();
     d3.select('#refresh_button').on('click', () => handleRefresh());