pierrejeambrun commented on code in PR #60241:
URL: https://github.com/apache/airflow/pull/60241#discussion_r2672797793
##########
airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskNames.tsx:
##########
@@ -17,137 +17,168 @@
* under the License.
*/
import { Box, chakra, Flex, Link } from "@chakra-ui/react";
+import type { VirtualItem } from "@tanstack/react-virtual";
import type { MouseEvent } from "react";
+import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { FiChevronUp } from "react-icons/fi";
import { Link as RouterLink, useParams, useSearchParams } from
"react-router-dom";
import { TaskName } from "src/components/TaskName";
-import { type HoverContextType, useHover } from "src/context/hover";
+import { useHover } from "src/context/hover";
import { useOpenGroups } from "src/context/openGroups";
import type { GridTask } from "./utils";
type Props = {
- depth?: number;
- nodes: Array<GridTask>;
- onRowClick?: () => void;
+ readonly depth?: number;
+ readonly nodes: Array<GridTask>;
+ readonly onRowClick?: () => void;
+ readonly virtualItems?: Array<VirtualItem>;
};
+const ROW_HEIGHT = 20;
+
const indent = (depth: number) => `${depth * 0.75 + 0.5}rem`;
-const onMouseEnter = (
- event: MouseEvent<HTMLDivElement>,
- nodeId: string,
- setHoveredTaskId: HoverContextType["setHoveredTaskId"],
-) => {
- const tasks =
document.querySelectorAll<HTMLDivElement>(`#${event.currentTarget.id}`);
+export const TaskNames = ({ nodes, onRowClick, virtualItems }: Props) => {
+ const { t: translate } = useTranslation("dag");
+ const { hoveredTaskId, setHoveredTaskId } = useHover();
+ const { toggleGroupId } = useOpenGroups();
+ const { dagId = "", groupId, taskId } = useParams();
+ const [searchParams] = useSearchParams();
- tasks.forEach((task) => {
- task.style.backgroundColor = "var(--chakra-colors-info-subtle)";
- });
+ const handleMouseEnter = useCallback(
+ (event: MouseEvent<HTMLDivElement>) => {
+ const { nodeId } = event.currentTarget.dataset;
- setHoveredTaskId(nodeId);
-};
+ if (nodeId !== undefined) {
+ setHoveredTaskId(nodeId);
+ }
+ },
+ [setHoveredTaskId],
+ );
-const onMouseLeave = (nodeId: string, setHoveredTaskId:
HoverContextType["setHoveredTaskId"]) => {
- const tasks =
document.querySelectorAll<HTMLDivElement>(`#task-${nodeId.replaceAll(".",
"-")}`);
+ const handleMouseLeave = useCallback(() => setHoveredTaskId(undefined),
[setHoveredTaskId]);
- tasks.forEach((task) => {
- task.style.backgroundColor = "";
- });
+ const handleToggleGroup = useCallback(
+ (event: MouseEvent<HTMLSpanElement>) => {
+ event.preventDefault();
+ event.stopPropagation();
+ const groupNodeId = event.currentTarget.dataset.groupId;
- setHoveredTaskId(undefined);
-};
+ if (groupNodeId !== undefined) {
+ toggleGroupId(groupNodeId);
+ }
+ },
+ [toggleGroupId],
+ );
-export const TaskNames = ({ nodes, onRowClick }: Props) => {
- const { t: translate } = useTranslation("dag");
- const { setHoveredTaskId } = useHover();
- const { toggleGroupId } = useOpenGroups();
- const { dagId = "", groupId, taskId } = useParams();
- const [searchParams] = useSearchParams();
+ const search = searchParams.toString();
+
+ // If virtualItems is provided, use virtualization; otherwise render all ite
Review Comment:
Nit:
```suggestion
// If virtualItems is provided, use virtualization; otherwise render all
items
```
--
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]
