[airflow] branch main updated: Fix Grid autoscroll with ResizeObserver (#23022)

[bb...@apache.org]

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

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new cc3503e368 Fix Grid autoscroll with ResizeObserver (#23022)
cc3503e368 is described below

commit cc3503e368b479dd2251bdd6906edd8775710757
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Mon Apr 18 10:07:34 2022 -0500

    Fix Grid autoscroll with ResizeObserver (#23022)
---
 airflow/www/static/js/tree/Tree.jsx           | 33 ++++++++++++++++-----------
 airflow/www/static/js/tree/dagRuns/index.jsx  |  4 ++--
 airflow/www/static/js/tree/renderTaskRows.jsx |  3 +--
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/tree/Tree.jsx
index c45b04ddd7..a9d46f07dd 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/tree/Tree.jsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 
-/* global localStorage */
+/* global localStorage, ResizeObserver */
 
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect } from 'react';
 import {
   Table,
   Tbody,
@@ -47,11 +47,11 @@ const sidePanelKey = 'showSidePanel';
 const Tree = () => {
   const scrollRef = useRef();
   const tableRef = useRef();
-  const [tableWidth, setTableWidth] = useState('100%');
   const { data: { groups = {}, dagRuns = [] } } = useTreeData();
   const { isRefreshOn, toggleRefresh, isPaused } = useAutoRefresh();
   const isPanelOpen = JSON.parse(localStorage.getItem(sidePanelKey));
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
+  const dagRunIds = dagRuns.map((dr) => dr.runId);
 
   const { clearSelection } = useSelection();
   const toggleSidePanel = () => {
@@ -64,18 +64,25 @@ const Tree = () => {
     onToggle();
   };
 
-  const dagRunIds = dagRuns.map((dr) => dr.runId);
+  const scrollOnResize = new ResizeObserver(() => {
+    const runsContainer = scrollRef.current;
+    // Set scroll to top right if it is scrollable
+    if (runsContainer && runsContainer.scrollWidth > runsContainer.clientWidth) {
+      runsContainer.scrollBy(tableRef.current.offsetWidth, 0);
+    }
+  });
 
   useEffect(() => {
     if (tableRef && tableRef.current) {
-      setTableWidth(tableRef.current.offsetWidth);
-      const runsContainer = scrollRef.current;
-      // Set initial scroll to top right if it is scrollable
-      if (runsContainer && runsContainer.scrollWidth > runsContainer.clientWidth) {
-        runsContainer.scrollBy(tableRef.current.offsetWidth, 0);
-      }
+      const table = tableRef.current;
+
+      scrollOnResize.observe(table);
+      return () => {
+        scrollOnResize.unobserve(table);
+      };
     }
-  }, [tableRef, isOpen]);
+    return () => {};
+  }, [tableRef, scrollOnResize]);
 
   return (
     <Box>
@@ -116,12 +123,12 @@ const Tree = () => {
         >
           <Table>
             <Thead display="block" pr="10px" position="sticky" top={0} zIndex={2} bg="white">
-              <DagRuns tableWidth={tableWidth} />
+              <DagRuns />
             </Thead>
             {/* TODO: remove hardcoded values. 665px is roughly the total heade+footer height */}
             <Tbody display="block" width="100%" maxHeight="calc(100vh - 665px)" minHeight="500px" ref={tableRef} pr="10px">
               {renderTaskRows({
-                task: groups, dagRunIds, tableWidth,
+                task: groups, dagRunIds,
               })}
             </Tbody>
           </Table>
diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx b/airflow/www/static/js/tree/dagRuns/index.jsx
index ed3918db8a..4632cede89 100644
--- a/airflow/www/static/js/tree/dagRuns/index.jsx
+++ b/airflow/www/static/js/tree/dagRuns/index.jsx
@@ -37,7 +37,7 @@ const DurationTick = ({ children, ...rest }) => (
   </Text>
 );
 
-const DagRuns = ({ tableWidth }) => {
+const DagRuns = () => {
   const { data: { dagRuns = [] } } = useTreeData();
   const { selected, onSelect } = useSelection();
   const durations = [];
@@ -68,7 +68,7 @@ const DagRuns = ({ tableWidth }) => {
         backgroundColor="white"
         zIndex={2}
         borderBottom={0}
-        width={`${tableWidth - (runs.length * 16)}px`}
+        width="100%"
       >
         {!!runs.length && (
         <>
diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx
index f549e6d986..36fc64c195 100644
--- a/airflow/www/static/js/tree/renderTaskRows.jsx
+++ b/airflow/www/static/js/tree/renderTaskRows.jsx
@@ -95,7 +95,6 @@ const Row = (props) => {
     prevTaskId,
     isParentOpen = true,
     dagRunIds,
-    tableWidth,
   } = props;
   const { colors } = useTheme();
   const { selected, onSelect } = useSelection();
@@ -147,7 +146,7 @@ const Row = (props) => {
           position="sticky"
           left={0}
           borderBottom={0}
-          width={`${tableWidth - (dagRunIds.length * columnWidth)}px`}
+          width="100%"
           zIndex={1}
         >
           <Collapse in={isFullyOpen} unmountOnExit>