This is an automated email from the ASF dual-hosted git repository. bbovenzi pushed a commit to branch improve-grid-data in repository https://gitbox.apache.org/repos/asf/airflow.git
commit de2d5c380e25e233bbc1b1be2945c9e241f8d6d6 Author: Brent Bovenzi <[email protected]> AuthorDate: Mon Apr 4 18:08:23 2022 -0400 Improve selection rerenders --- airflow/www/static/js/tree/StatusBox.jsx | 17 ++++++++--------- airflow/www/static/js/tree/Tree.jsx | 2 +- 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 ++++--- 5 files changed, 20 insertions(+), 18 deletions(-) diff --git a/airflow/www/static/js/tree/StatusBox.jsx b/airflow/www/static/js/tree/StatusBox.jsx index 1c26f5e9fb..af57e1ddd3 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,21 @@ 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 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) => { + const bg = window.getComputedStyle(e).backgroundColor; + // Don't apply hover if it is already selected + if (bg !== 'rgb(190, 227, 248)') e.style.backgroundColor = hoverBlue; + }); }; const onMouseLeave = () => { [...containerRef.current.getElementsByClassName(`js-${runId}`)] @@ -103,7 +103,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 610829326c..8ba66da6a4 100644 --- a/airflow/www/static/js/tree/Tree.jsx +++ b/airflow/www/static/js/tree/Tree.jsx @@ -72,7 +72,7 @@ const Tree = () => { 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(tableRef.current.offsetWidth, 0); } } }, [tableRef, isOpen]); 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..878863b96d 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={run.runId === selected.runId} + onSelect={onSelect} /> ))} </Flex> diff --git a/airflow/www/static/js/tree/renderTaskRows.jsx b/airflow/www/static/js/tree/renderTaskRows.jsx index 3a7fa02e35..25baf54973 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,8 +75,8 @@ const TaskInstances = ({ ? ( <StatusBox instance={instance} - extraLinks={task.extraLinks} group={task} + onSelect={onSelect} /> ) : <Box width={boxSizePx} data-testid="blank-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>
