You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2022/03/10 22:43:32 UTC
[airflow] branch memoize-status-box created (now 84f2b37)
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a change to branch memoize-status-box
in repository https://gitbox.apache.org/repos/asf/airflow.git.
at 84f2b37 fix test
This branch includes the following new commits:
new f8fd31d reduce grid task instance rerenders
new 84f2b37 fix test
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[airflow] 01/02: reduce grid task instance rerenders
Posted by bb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch memoize-status-box
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit f8fd31d2a3304ceb9f233879fc641cf5db8dba51
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Thu Mar 10 17:40:57 2022 -0500
reduce grid task instance rerenders
---
airflow/www/package.json | 1 +
airflow/www/static/js/tree/StatusBox.jsx | 18 +++++++++++++++---
airflow/www/static/js/tree/dagRuns/Bar.jsx | 3 ++-
airflow/www/static/js/tree/renderTaskRows.jsx | 4 ++--
4 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/airflow/www/package.json b/airflow/www/package.json
index c5a4f3a..7e6f3e8 100644
--- a/airflow/www/package.json
+++ b/airflow/www/package.json
@@ -87,6 +87,7 @@
"framer-motion": "^4",
"jquery": ">=3.5.0",
"jshint": "^2.13.4",
+ "lodash": "^4.17.21",
"moment-timezone": "^0.5.28",
"nvd3": "^1.8.6",
"react": "^17.0.2",
diff --git a/airflow/www/static/js/tree/StatusBox.jsx b/airflow/www/static/js/tree/StatusBox.jsx
index c22f0b2..3dba51e 100644
--- a/airflow/www/static/js/tree/StatusBox.jsx
+++ b/airflow/www/static/js/tree/StatusBox.jsx
@@ -20,6 +20,7 @@
/* global stateColors */
import React from 'react';
+import { isEqual } from 'lodash';
import {
Flex,
Box,
@@ -30,7 +31,7 @@ import { callModal } from '../dag';
import InstanceTooltip from './InstanceTooltip';
const StatusBox = ({
- group, instance, containerRef, extraLinks = [], ...rest
+ group, instance, containerRef, extraLinks = [],
}) => {
const {
executionDate, taskId, tryNumber = 0, operator, runId,
@@ -68,7 +69,6 @@ const StatusBox = ({
zIndex={1}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseLeave}
- {...rest}
>
<Box
width="10px"
@@ -82,4 +82,16 @@ const StatusBox = ({
);
};
-export default StatusBox;
+// The default equality function is a shallow comparison and json objects will return false
+// This custom compare function allows us to do a deeper comparison
+const compareProps = (
+ prevProps,
+ nextProps,
+) => (
+ isEqual(prevProps.group, nextProps.group)
+ && isEqual(prevProps.instance, nextProps.instance)
+ && prevProps.extraLinks === nextProps.extraLinks
+ && prevProps.containerRef === nextProps.containerRef
+);
+
+export default React.memo(StatusBox, compareProps);
diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/tree/dagRuns/Bar.jsx
index 21f99a3..2cf6dde 100644
--- a/airflow/www/static/js/tree/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx
@@ -20,6 +20,7 @@
/* global stateColors, moment */
import React from 'react';
+import { isEqual } from 'lodash';
import {
Flex,
Box,
@@ -115,7 +116,7 @@ const compareProps = (
prevProps,
nextProps,
) => (
- JSON.stringify(prevProps.run) === JSON.stringify(nextProps.run)
+ isEqual(prevProps.run, nextProps.run)
&& prevProps.max === nextProps.max
&& prevProps.index === nextProps.index
&& prevProps.totalRuns === nextProps.totalRuns
diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx
index 89e0a53..850911d 100644
--- a/airflow/www/static/js/tree/renderTaskRows.jsx
+++ b/airflow/www/static/js/tree/renderTaskRows.jsx
@@ -120,7 +120,7 @@ const Row = (props) => {
backgroundColor="white"
borderBottom={0}
>
- <Collapse in={isFullyOpen}>
+ <Collapse in={isFullyOpen} unmountOnExit>
<TaskName
onToggle={memoizedToggle}
isGroup={isGroup}
@@ -133,7 +133,7 @@ const Row = (props) => {
</Td>
<Td width={0} p={0} borderBottom={0} />
<Td p={0} align="right" _groupHover={{ backgroundColor: 'rgba(113, 128, 150, 0.1)' }} transition="background-color 0.2s" borderBottom={0}>
- <Collapse in={isFullyOpen}>
+ <Collapse in={isFullyOpen} unmountOnExit>
<TaskInstances dagRunIds={dagRunIds} task={task} containerRef={containerRef} />
</Collapse>
</Td>
[airflow] 02/02: fix test
Posted by bb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch memoize-status-box
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 84f2b3738bec32d4b0a5fc16dcf588f8d0a313a1
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Thu Mar 10 17:42:39 2022 -0500
fix test
---
airflow/www/static/js/tree/renderTaskRows.test.jsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/airflow/www/static/js/tree/renderTaskRows.test.jsx b/airflow/www/static/js/tree/renderTaskRows.test.jsx
index ad47cc0..39d41fc 100644
--- a/airflow/www/static/js/tree/renderTaskRows.test.jsx
+++ b/airflow/www/static/js/tree/renderTaskRows.test.jsx
@@ -127,13 +127,15 @@ describe('Test renderTaskRows', () => {
const groupName = getByText('group_1');
- expect(getAllByTestId('task-instance')).toHaveLength(2);
+ expect(getAllByTestId('task-instance')).toHaveLength(1);
expect(groupName).toBeInTheDocument();
expect(getByTestId('closed-group')).toBeInTheDocument();
fireEvent.click(groupName);
expect(getByTestId('open-group')).toBeInTheDocument();
+ // task instances are only rendered when their group is expanded
+ expect(getAllByTestId('task-instance')).toHaveLength(2);
});
test('Still renders names if there are no instances', () => {