Improve task filtering UX

airflow/www/static/js/dag/details/FilterTasks.tsx

@@ -28,9 +28,11 @@ import {
 } from "@chakra-ui/react";
 import useFilters from "src/dag/useFilters";
 import { MdArrowDropDown } from "react-icons/md";
+import { useGridData } from "src/api";
+import { getTask } from "src/utils";
 
 interface Props {
-  taskId: string;
+  taskId: string | null;
 }
 
 const FilterTasks = ({ taskId }: Props) => {
@@ -40,50 +42,72 @@ const FilterTasks = ({ taskId }: Props) => {
     resetRoot,
   } = useFilters();
 
-  const onFilterUpstream = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: true,
-      filterDownstream: false,
-    });
+  const {
+    data: { groups },
+  } = useGridData();
 
-  const onFilterDownstream = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: false,
-      filterDownstream: true,
-    });
+  const label = "Filter upstream and/or downstream of a task";
 
-  const onFilterAll = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: true,
-      filterDownstream: true,
-    });
+  if (!root && !taskId) return null;
 
-  const label = "Filter upstream and/or downstream of a task";
+  const onFilterUpstream = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: true,
+        filterDownstream: false,
+      });
+  };
+
+  const onFilterDownstream = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: false,
+        filterDownstream: true,
+      });
+  };
+
+  const onFilterAll = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: true,
+        filterDownstream: true,
+      });
+  };
+
+  const task = root ? getTask({ taskId: root, task: groups }) : undefined;
 
   return (
     <Menu>
       <MenuButton
         as={Button}
-        variant="outline"
+        variant={root ? "solid" : "outline"}
         colorScheme="blue"
         transition="all 0.2s"
         title={label}
         aria-label={label}
         mt={2}
       >
         <Flex>
-          {!root ? "Filter Tasks " : "Clear Task Filter "}
+          {root
+            ? `Filtered on ${task?.label || "unknown"}`
+            : "Filter DAG by task"}
           <MdArrowDropDown size="16px" />
         </Flex>
       </MenuButton>
       <MenuList>
-        <MenuItem onClick={onFilterUpstream}>Filter Upstream</MenuItem>
-        <MenuItem onClick={onFilterDownstream}>Filter Downstream</MenuItem>
-        <MenuItem onClick={onFilterAll}>Filter Upstream & Downstream</MenuItem>
-        {!!root && <MenuItem onClick={resetRoot}>Reset Root</MenuItem>}
+        {!!root && <MenuItem onClick={resetRoot}>Reset</MenuItem>}
+        {!!taskId && (
+          <>
+            <MenuItem onClick={onFilterUpstream}>Only upstream</MenuItem>
+            <MenuItem onClick={onFilterDownstream}>Only downstream</MenuItem>
+            <MenuItem onClick={onFilterAll}>
+              Both upstream & downstream
+            </MenuItem>
+          </>
+        )}
       </MenuList>
     </Menu>
   );

airflow/www/static/js/dag/details/Header.tsx

@@ -124,7 +124,7 @@ const Header = ({ mapIndex }: Props) => {
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
-      {mapIndex !== undefined && (
+      {mapIndex !== undefined && mapIndex !== -1 && (
         <BreadcrumbItem isCurrentPage mt={4}>
           <BreadcrumbLink
             _hover={isMappedTaskDetails ? { cursor: "default" } : undefined}

airflow/www/static/js/dag/details/index.tsx

@@ -287,7 +287,7 @@ const Details = ({
               />
             </>
           )}
-          {taskId && runId && <FilterTasks taskId={taskId} />}
+          <FilterTasks taskId={taskId} />
         </Flex>
       </Flex>
       <Divider my={2} />