bbovenzi commented on code in PR #60241:
URL: https://github.com/apache/airflow/pull/60241#discussion_r2670502894
##########
airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx:
##########
@@ -103,63 +109,99 @@ export const Grid = ({ dagRunState, limit, runType,
showGantt, triggeringUser }:
tasks: flatNodes,
});
+ const handleRowClick = useCallback(() => setMode(NavigationModes.TASK),
[setMode]);
+ const handleCellClick = useCallback(() => setMode(NavigationModes.TI),
[setMode]);
+ const handleColumnClick = useCallback(() => setMode(NavigationModes.RUN),
[setMode]);
+
+ const rowVirtualizer = useVirtualizer({
+ count: flatNodes.length,
+ estimateSize: () => ROW_HEIGHT,
+ getScrollElement: () => scrollContainerRef.current,
+ overscan: 5,
+ });
+
+ const virtualItems = rowVirtualizer.getVirtualItems();
+
+ const virtualizationContextValue = useMemo(() => ({ rowVirtualizer }),
[rowVirtualizer]);
+
return (
- <Flex
- justifyContent="flex-start"
- outline="none"
- position="relative"
- pt={20}
- ref={gridRef}
- tabIndex={0}
- width={showGantt ? "1/2" : "full"}
- >
- <Box display="flex" flexDirection="column" flexGrow={1}
justifyContent="end" minWidth="200px">
- <TaskNames nodes={flatNodes} onRowClick={() => setMode("task")} />
- </Box>
- <Box position="relative">
- <Flex position="relative">
- <DurationAxis top="100px" />
- <DurationAxis top="50px" />
- <DurationAxis top="4px" />
- <Flex flexDirection="column-reverse" height="100px"
position="relative">
- {Boolean(gridRuns?.length) && (
- <>
- <DurationTick bottom="92px" duration={max} />
- <DurationTick bottom="46px" duration={max / 2} />
- <DurationTick bottom="-4px" duration={0} />
- </>
+ <GridVirtualizationContext.Provider value={virtualizationContextValue}>
+ <Flex
+ flexDirection="column"
+ justifyContent="flex-start"
+ outline="none"
+ position="relative"
+ pt={20}
+ ref={gridRef}
+ tabIndex={0}
+ width={showGantt ? "1/2" : "full"}
+ >
+ <Flex paddingRight={4} position="relative" width="100%">
+ {/* Task names header spacer - fills available space to match task
names column below */}
+ <Box flexGrow={1} flexShrink={0} height="100px" minWidth="200px" />
+ <Flex flexShrink={0} position="relative">
+ <DurationAxis top="100px" />
+ <DurationAxis top="50px" />
+ <DurationAxis top="4px" />
+ <Flex flexDirection="column-reverse" height="100px"
position="relative">
+ {Boolean(gridRuns?.length) && (
+ <>
+ <DurationTick bottom="92px" duration={max} />
+ <DurationTick bottom="46px" duration={max / 2} />
+ <DurationTick bottom="-4px" duration={0} />
+ </>
+ )}
+ </Flex>
+ <Flex flexDirection="row-reverse">
+ {gridRuns?.map((dr: GridRunsResponse) => (
+ <Bar key={dr.run_id} max={max} onClick={handleColumnClick}
run={dr} />
+ ))}
+ </Flex>
+ {selectedIsVisible === undefined || !selectedIsVisible ? undefined
: (
+ <Link to={`/dags/${dagId}`}>
+ <IconButton
+ aria-label={translate("grid.buttons.resetToLatest")}
+ height="98px"
+ loading={isLoading}
+ minW={0}
+ ml={1}
+ title={translate("grid.buttons.resetToLatest")}
+ variant="surface"
+ zIndex={1}
+ >
+ <FiChevronsRight />
+ </IconButton>
+ </Link>
)}
</Flex>
- <Flex flexDirection="row-reverse">
- {gridRuns?.map((dr: GridRunsResponse) => (
- <Bar
- key={dr.run_id}
- max={max}
- nodes={flatNodes}
- onCellClick={() => setMode("TI")}
- onColumnClick={() => setMode("run")}
- run={dr}
- />
- ))}
- </Flex>
- {selectedIsVisible === undefined || !selectedIsVisible ? undefined :
(
- <Link to={`/dags/${dagId}`}>
- <IconButton
- aria-label={translate("grid.buttons.resetToLatest")}
- height="98px"
- loading={isLoading}
- minW={0}
- ml={1}
- title={translate("grid.buttons.resetToLatest")}
- variant="surface"
- zIndex={1}
- >
- <FiChevronsRight />
- </IconButton>
- </Link>
- )}
</Flex>
- </Box>
- </Flex>
+ {/* Height accounts for: navbar, tabs, header bar chart (100px), and
padding */}
+ <Box height="calc(100vh - 250px)" overflow="auto" position="relative"
ref={scrollContainerRef}>
Review Comment:
250px is the height of the content above. Percentage wouldn't work. I could
try something else.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
