UI: Keep Grid visible on the DAG run page by moving Graph to a tab

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

@@ -53,7 +53,6 @@ import { useGridRuns } from "src/queries/useGridRuns.ts";
 
 import { DagBreadcrumb } from "./DagBreadcrumb";
 import { Gantt } from "./Gantt/Gantt";
-import { Graph } from "./Graph";
 import { Grid } from "./Grid";
 import { NavTabs, type NavTab } from "./NavTabs";
 import { PanelButtons } from "./PanelButtons";
@@ -97,7 +96,8 @@ export const DetailsLayout = ({ children, error, isLoading, outletContext, tabs
   const { t: translate } = useTranslation();
   const { dagId = "", runId } = useParams();
   const { data: dag } = useDagServiceGetDag({ dagId });
-  const [dagView, setDagView] = useLocalStorage<DagView>(DEFAULT_DAG_VIEW_KEY, "grid");
+  const [storedDagView, setDagView] = useLocalStorage<DagView>(DEFAULT_DAG_VIEW_KEY, "grid");
+  const dagView = storedDagView === "graph" ? "grid" : storedDagView;
   const panelGroupRef = useRef<ImperativePanelGroupHandle | null>(null);
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -213,7 +213,7 @@ export const DetailsLayout = ({ children, error, isLoading, outletContext, tabs
   // Treat "gantt" as "grid" for panel layout persistence so switching between them doesn't reset sizes.
   const panelViewKey = dagView === "gantt" ? "grid" : dagView;
   const minSize = dagView === "gantt" && Boolean(runId) ? 35 : 6;
-  const defaultSize = Math.max(dagView === "graph" ? 70 : 20, minSize);
+  const defaultSize = Math.max(20, minSize);
 
   return (
     <HoverProvider>
@@ -276,9 +276,7 @@ export const DetailsLayout = ({ children, error, isLoading, outletContext, tabs
                     showVersionIndicatorMode={showVersionIndicatorMode}
                   />
                   <Box flex={1} minH={0} overflow="hidden">
-                    {dagView === "graph" ? (
-                      <Graph />
-                    ) : dagView === "gantt" && Boolean(runId) ? (
+                    {dagView === "gantt" && Boolean(runId) ? (
                       <SharedScrollBox scrollRef={sharedGridGanttScrollRef}>
                         <Flex alignItems="flex-start" gap={0} maxW="100%" minW={0} overflow="clip" w="100%">
                           <Grid
@@ -361,7 +359,7 @@ export const DetailsLayout = ({ children, error, isLoading, outletContext, tabs
                   {/* Collapse button positioned next to the resize handle */}
 
                   <Panel
-                    defaultSize={dagView === "graph" ? 30 : 80}
+                    defaultSize={80}
                     id="details-panel"
                     minSize={20}
                     order={2}

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

@@ -26,6 +26,7 @@ import { useLocalStorage } from "usehooks-ts";
 import { useDagRunServiceGetDagRun, useStructureServiceStructureData } from "openapi/queries";
 import type { Direction } from "src/components/Graph/DirectionDropdown";
 import { DownloadButton } from "src/components/Graph/DownloadButton";
+import { GraphTaskFilters } from "src/components/GraphTaskFilters";
 import { edgeTypes, nodeTypes } from "src/components/Graph/graphTypes";
 import type { CustomNodeProps } from "src/components/Graph/reactflowUtils";
 import { useGraphLayout } from "src/components/Graph/useGraphLayout";
@@ -40,6 +41,7 @@ import { getReactFlowThemeStyle } from "src/theme";
 
 import { FitViewOnLayout } from "./components/FitViewOnLayout";
 import { GraphControls } from "./components/GraphControls";
+import { GraphSettings } from "./components/GraphSettings";
 import { useFilteredNodesAndEdges } from "./hooks/useFilteredNodesAndEdges";
 import { useGraphSearchParams } from "./hooks/useGraphSearchParams";
 import { useGraphFilteredNodes } from "./useGraphFilteredNodes";
@@ -218,6 +220,10 @@ export const Graph = () => {
           />
         ) : undefined}
         <DownloadButton name={dagId} />
+        <Box display="flex" flexDirection="column" gap={2} position="absolute" right={2} top={2} zIndex={4}>
+          <GraphSettings />
+          <GraphTaskFilters />
+        </Box>
       </ReactFlow>
     </Box>
   );

airflow-core/src/airflow/ui/src/layouts/Details/Graph/components/GraphSettings.tsx

@@ -0,0 +1,88 @@
+import { Popover, Portal, Select, VStack } from "@chakra-ui/react";
+import type { SelectValueChangeDetails } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import { MdSettings } from "react-icons/md";
+import { useParams } from "react-router-dom";
+import { useLocalStorage } from "usehooks-ts";
+
+import { DagVersionSelect } from "src/components/DagVersionSelect";
+import { DirectionDropdown } from "src/components/Graph/DirectionDropdown";
+import { IconButton } from "src/components/ui";
+import { dependenciesKey } from "src/constants/localStorage";
+
+const deps = ["all", "immediate", "tasks"];
+
+type Dependency = (typeof deps)[number];
+
+export const GraphSettings = () => {
+  const { t: translate } = useTranslation(["common", "dag"]);
+  const { dagId = "" } = useParams();
+  const [dependencies, setDependencies, removeDependencies] = useLocalStorage<Dependency>(
+    dependenciesKey(dagId),
+    "tasks",
+  );
+
+  const handleDepsChange = (event: SelectValueChangeDetails<{ label: string; value: Array<string> }>) => {
+    if (event.value[0] === undefined || event.value[0] === "tasks" || !deps.includes(event.value[0])) {
+      removeDependencies();
+    } else {
+      setDependencies(event.value[0]);
+    }
+  };
+
+  const options = [
+    { label: translate("dag:panel.dependencies.options.onlyTasks"), value: "tasks" },
+    { label: translate("dag:panel.dependencies.options.externalConditions"), value: "immediate" },
+    { label: translate("dag:panel.dependencies.options.allDagDependencies"), value: "all" },
+  ];
+
+  return (
+    <Popover.Root autoFocus={false} positioning={{ placement: "bottom-end" }}>
+      <Popover.Trigger asChild>
+        <IconButton label={translate("dag:panel.buttons.options")}>
+          <MdSettings />
+        </IconButton>
+      </Popover.Trigger>
+      <Portal>
+        <Popover.Positioner>
+          <Popover.Content>
+            <Popover.Arrow />
+            <Popover.Body display="flex" flexDirection="column" gap={4} maxH="70vh" overflowY="auto" p={2}>
+              <DagVersionSelect />
+
+              <Select.Root
+                // @ts-expect-error The expected option type is incorrect
+                collection={{ items: options }}
+                data-testid="dependencies"
+                onValueChange={handleDepsChange}
+                size="sm"
+                value={[dependencies]}
+              >
+                <Select.Label fontSize="xs">{translate("dag:panel.dependencies.label")}</Select.Label>
+                <Select.Control>
+                  <Select.Trigger>
+                    <Select.ValueText placeholder={translate("dag:panel.dependencies.label")} />
+                  </Select.Trigger>
+                  <Select.IndicatorGroup>
+                    <Select.Indicator />
+                  </Select.IndicatorGroup>
+                </Select.Control>
+                <Select.Positioner>
+                  <Select.Content>
+                    {options.map((option) => (
+                      <Select.Item item={option} key={option.value}>
+                        {option.label}
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Select.Root>
+
+              <DirectionDropdown graphId={dagId} />
+            </Popover.Body>
+          </Popover.Content>
+        </Popover.Positioner>
+      </Portal>
+    </Popover.Root>
+  );
+};