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/04/04 19:46:17 UTC
[airflow] branch clean-grid-data updated: Improve selection rerenders
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch clean-grid-data
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/clean-grid-data by this push:
new 9f1f7d19f1 Improve selection rerenders
9f1f7d19f1 is described below
commit 9f1f7d19f1790761327cafd08c35e2e8b7c08dc6
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Mon Apr 4 15:31:50 2022 -0400
Improve selection rerenders
---
airflow/www/static/js/tree/StatusBox.jsx | 20 ++++++++++----------
airflow/www/static/js/tree/Tree.jsx | 18 ++++++++++--------
airflow/www/static/js/tree/api/useTreeData.js | 6 +-----
airflow/www/static/js/tree/dagRuns/Bar.jsx | 8 +++-----
airflow/www/static/js/tree/dagRuns/index.jsx | 4 ++++
airflow/www/static/js/tree/renderTaskRows.jsx | 7 ++++---
6 files changed, 32 insertions(+), 31 deletions(-)
diff --git a/airflow/www/static/js/tree/StatusBox.jsx b/airflow/www/static/js/tree/StatusBox.jsx
index 1c26f5e9fb..95ed8f23bd 100644
--- a/airflow/www/static/js/tree/StatusBox.jsx
+++ b/airflow/www/static/js/tree/StatusBox.jsx
@@ -17,7 +17,7 @@
* under the License.
*/
-/* global stateColors */
+/* global stateColors, window */
import React from 'react';
import { isEqual } from 'lodash';
@@ -29,7 +29,6 @@ import {
import InstanceTooltip from './InstanceTooltip';
import { useContainerRef } from './context/containerRef';
-import { useSelection } from './context/selection';
export const boxSize = 10;
export const boxSizePx = `${boxSize}px`;
@@ -46,20 +45,22 @@ export const SimpleStatus = ({ state, ...rest }) => (
);
const StatusBox = ({
- group, instance,
+ group, instance, onSelect,
}) => {
const containerRef = useContainerRef();
- const { selected, onSelect } = useSelection();
- const { runId, taskId } = instance;
const { colors } = useTheme();
+ const { runId, taskId } = instance;
const hoverBlue = `${colors.blue[100]}50`;
// Fetch the corresponding column element and set its background color when hovering
const onMouseEnter = () => {
- if (selected.runId !== runId) {
- [...containerRef.current.getElementsByClassName(`js-${runId}`)]
- .forEach((e) => { e.style.backgroundColor = hoverBlue; });
- }
+ [...containerRef.current.getElementsByClassName(`js-${runId}`)]
+ .forEach((e) => {
+ // Only change the background color if it isn't already selected
+ if (window.getComputedStyle(e).backgroundColor !== 'rgb(190, 227, 248)') {
+ e.style.backgroundColor = hoverBlue;
+ }
+ });
};
const onMouseLeave = () => {
[...containerRef.current.getElementsByClassName(`js-${runId}`)]
@@ -103,7 +104,6 @@ const compareProps = (
) => (
isEqual(prevProps.group, nextProps.group)
&& isEqual(prevProps.instance, nextProps.instance)
- && prevProps.extraLinks === nextProps.extraLinks
);
export default React.memo(StatusBox, compareProps);
diff --git a/airflow/www/static/js/tree/Tree.jsx b/airflow/www/static/js/tree/Tree.jsx
index 508a986d97..162fad3993 100644
--- a/airflow/www/static/js/tree/Tree.jsx
+++ b/airflow/www/static/js/tree/Tree.jsx
@@ -32,6 +32,7 @@ import {
Flex,
useDisclosure,
Button,
+ Progress,
} from '@chakra-ui/react';
import { useTreeData } from './api';
@@ -47,7 +48,7 @@ const sidePanelKey = 'showSidePanel';
const Tree = () => {
const scrollRef = useRef();
const tableRef = useRef();
- const [tableWidth, setTableWidth] = useState('100%');
+ const [tableWidth, setTableWidth] = useState();
const { data: { groups = {}, dagRuns = [] } } = useTreeData();
const { isRefreshOn, toggleRefresh, isPaused } = useAutoRefresh();
const isPanelOpen = JSON.parse(localStorage.getItem(sidePanelKey));
@@ -67,15 +68,15 @@ const Tree = () => {
const dagRunIds = dagRuns.map((dr) => dr.runId);
useEffect(() => {
- if (tableRef && tableRef.current) {
+ if (tableRef && tableRef.current && dagRuns.length > 0) {
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(runsContainer.clientWidth, 0);
+ runsContainer.scrollBy(runsContainer.scrollWidth, 0);
}
}
- }, [tableRef, isOpen]);
+ }, [tableRef, scrollRef, isOpen, dagRuns]);
return (
<Box>
@@ -114,12 +115,13 @@ const Tree = () => {
flexGrow={1}
minWidth={isOpen && '300px'}
>
- <Table>
- <Thead display="block" pr="10px" position="sticky" top={0} zIndex={2} bg="white">
+ {!tableWidth && <Progress isIndeterminate />}
+ <Table visibility={tableWidth ? 'visible' : 'hidden'}>
+ <Thead pr="10px" position="sticky" top={0} zIndex={2} bg="white" display="block">
<DagRuns tableWidth={tableWidth} />
</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">
+ {/* TODO: remove hardcoded values. 665px is roughly the total header+footer height */}
+ <Tbody width="100%" maxHeight="calc(100vh - 665px)" minHeight="500px" ref={tableRef} pr="10px" display="block">
{groups.children && renderTaskRows({
task: groups, dagRunIds, tableWidth,
})}
diff --git a/airflow/www/static/js/tree/api/useTreeData.js b/airflow/www/static/js/tree/api/useTreeData.js
index ed83a6d28e..a9bf0a9882 100644
--- a/airflow/www/static/js/tree/api/useTreeData.js
+++ b/airflow/www/static/js/tree/api/useTreeData.js
@@ -53,13 +53,9 @@ const useTreeData = () => {
stopRefresh();
console.error(e);
}
- return {
- groups: {},
- dagRuns: [],
- };
+ return emptyData;
}, {
// only enabled and refetch if the refresh switch is on
- // enabled: isRefreshOn,
refetchInterval: isRefreshOn && autoRefreshInterval * 1000,
initialData: emptyData,
});
diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/tree/dagRuns/Bar.jsx
index cb4ab310ae..f807b607c7 100644
--- a/airflow/www/static/js/tree/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx
@@ -33,23 +33,20 @@ import { MdPlayArrow } from 'react-icons/md';
import DagRunTooltip from './Tooltip';
import { useContainerRef } from '../context/containerRef';
-import { useSelection } from '../context/selection';
import Time from '../Time';
const BAR_HEIGHT = 100;
const DagRunBar = ({
- run, max, index, totalRuns,
+ run, max, index, totalRuns, isSelected, onSelect,
}) => {
const containerRef = useContainerRef();
- const { selected, onSelect } = useSelection();
const { colors } = useTheme();
const hoverBlue = `${colors.blue[100]}50`;
- const isSelected = run.runId === selected.runId;
// Fetch the corresponding column element and set its background color when hovering
const onMouseEnter = () => {
- if (selected.runId !== run.runId) {
+ if (!isSelected) {
[...containerRef.current.getElementsByClassName(`js-${run.runId}`)]
.forEach((e) => { e.style.backgroundColor = hoverBlue; });
}
@@ -128,6 +125,7 @@ const compareProps = (
&& prevProps.max === nextProps.max
&& prevProps.index === nextProps.index
&& prevProps.totalRuns === nextProps.totalRuns
+ && prevProps.isSelected === nextProps.isSelected
);
export default React.memo(DagRunBar, compareProps);
diff --git a/airflow/www/static/js/tree/dagRuns/index.jsx b/airflow/www/static/js/tree/dagRuns/index.jsx
index 0f4017fe28..8d2478ab3f 100644
--- a/airflow/www/static/js/tree/dagRuns/index.jsx
+++ b/airflow/www/static/js/tree/dagRuns/index.jsx
@@ -29,6 +29,7 @@ import {
import { useTreeData } from '../api';
import DagRunBar from './Bar';
import { getDuration, formatDuration } from '../../datetime_utils';
+import { useSelection } from '../context/selection';
const DurationTick = ({ children, ...rest }) => (
<Text fontSize={10} color="gray.400" right={1} position="absolute" whiteSpace="nowrap" {...rest}>
@@ -38,6 +39,7 @@ const DurationTick = ({ children, ...rest }) => (
const DagRuns = ({ tableWidth }) => {
const { data: { dagRuns = [] } } = useTreeData();
+ const { selected, onSelect } = useSelection();
const durations = [];
const runs = dagRuns.map((dagRun) => {
const duration = getDuration(dagRun.startDate, dagRun.endDate);
@@ -99,6 +101,8 @@ const DagRuns = ({ tableWidth }) => {
max={max}
index={i}
totalRuns={runs.length}
+ isSelected={selected.runId === run.runId}
+ onSelect={onSelect}
/>
))}
</Flex>
diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx
index 3a7fa02e35..91ed84e0da 100644
--- a/airflow/www/static/js/tree/renderTaskRows.jsx
+++ b/airflow/www/static/js/tree/renderTaskRows.jsx
@@ -56,7 +56,7 @@ const renderTaskRows = ({
));
const TaskInstances = ({
- task, dagRunIds, selectedRunId,
+ task, dagRunIds, selectedRunId, onSelect,
}) => (
<Flex justifyContent="flex-end">
{dagRunIds.map((runId) => {
@@ -75,7 +75,7 @@ const TaskInstances = ({
? (
<StatusBox
instance={instance}
- extraLinks={task.extraLinks}
+ onSelect={onSelect}
group={task}
/>
)
@@ -96,7 +96,7 @@ const Row = (props) => {
tableWidth,
} = props;
const { colors } = useTheme();
- const { selected } = useSelection();
+ const { selected, onSelect } = useSelection();
const hoverBlue = `${colors.blue[100]}50`;
const isGroup = !!task.children;
@@ -171,6 +171,7 @@ const Row = (props) => {
dagRunIds={dagRunIds}
task={task}
selectedRunId={selected.runId}
+ onSelect={onSelect}
/>
</Collapse>
</Td>