feat: add tooltip for explaining task filter traversal (#61401)

* feat: add tooltip for explaining task filter traversal

* fix: lint

Author: OscarLigthart

airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json

@@ -129,6 +129,7 @@
       "direction": "Direction",
       "label": "Filter",
       "mode": "Mode",
+      "modeTooltip": "Static mode keeps the current view when navigating to different tasks, while Traverse mode automatically updates the active filter to the clicked task for easier DAG traversal.",
       "modes": {
         "static": "Static",
         "traverse": "Traverse"

airflow-core/src/airflow/ui/src/layouts/Details/TaskStreamFilter.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 /*!
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -16,12 +18,23 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, ButtonGroup, IconButton, Input, Portal, Separator, Text, VStack } from "@chakra-ui/react";
+import {
+  Button,
+  ButtonGroup,
+  HStack,
+  IconButton,
+  Input,
+  Portal,
+  Separator,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { FiFilter } from "react-icons/fi";
+import { FiFilter, FiInfo } from "react-icons/fi";
 import { useParams, useSearchParams } from "react-router-dom";
 
+import { Tooltip } from "src/components/ui";
 import { Menu } from "src/components/ui/Menu";
 
 export const TaskStreamFilter = () => {
@@ -217,9 +230,18 @@ export const TaskStreamFilter = () => {
 
             {/* Mode Section */}
             <VStack align="stretch" gap={2} width="100%">
-              <Text fontSize="xs" fontWeight="semibold">
-                {translate("dag:panel.taskStreamFilter.mode")}
-              </Text>
+              <HStack gap={1}>
+                <Text fontSize="xs" fontWeight="semibold">
+                  {translate("dag:panel.taskStreamFilter.mode")}
+                </Text>
+                <Tooltip
+                  closeDelay={200}
+                  content={translate("dag:panel.taskStreamFilter.modeTooltip")}
+                  openDelay={0}
+                >
+                  <FiInfo size={12} />
+                </Tooltip>
+              </HStack>
               <ButtonGroup attached colorPalette="brand" size="sm" variant="outline" width="100%">
                 <Button
                   disabled={!hasActiveFilter}