Add a new graph inside of the grid view

airflow/www/package.json

@@ -100,6 +100,7 @@
     "codemirror": "^5.59.1",
     "color": "^4.2.3",
     "d3": "^3.4.4",
+    "d3-7": "npm:d3@7",
     "d3-shape": "^2.1.0",
     "d3-tip": "^0.9.1",
     "dagre-d3": "^0.6.4",
@@ -122,6 +123,7 @@
     "react-router-dom": "^6.3.0",
     "react-table": "^7.8.0",
     "react-textarea-autosize": "^8.3.4",
+    "reactflow": "^11.4.0",
     "redoc": "^2.0.0-rc.72",
     "remark-gfm": "^3.0.1",
     "swagger-ui-dist": "4.1.3",

airflow/www/static/declarations.d.ts

@@ -0,0 +1,20 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+declare module "*.css";

airflow/www/static/js/api/index.ts

@@ -29,6 +29,7 @@ import useMarkFailedTask from "./useMarkFailedTask";
 import useMarkSuccessTask from "./useMarkSuccessTask";
 import useExtraLinks from "./useExtraLinks";
 import useConfirmMarkTask from "./useConfirmMarkTask";
+import useGraphData from "./useGraphData";
 import useGridData from "./useGridData";
 import useMappedInstances from "./useMappedInstances";
 import useDatasets from "./useDatasets";
@@ -55,6 +56,7 @@ export {
   useDatasetEvents,
   useDatasets,
   useExtraLinks,
+  useGraphData,
   useGridData,
   useMappedInstances,
   useMarkFailedRun,

airflow/www/static/js/api/useDatasetDependencies.ts

@@ -25,6 +25,8 @@ import { getMetaValue } from "src/utils";
 import type { DepEdge, DepNode } from "src/types";
 import type { NodeType } from "src/datasets/Graph/Node";
 
+import { getTextWidth } from "src/utils/graph";
+
 interface DatasetDependencies {
   edges: DepEdge[];
   nodes: DepNode[];
@@ -50,17 +52,6 @@ interface Data {
   subGraphs: Graph[];
 }
 
-// Take text and font to calculate how long each node should be
-function getTextWidth(text: string, font: string) {
-  const context = document.createElement("canvas").getContext("2d");
-  if (context) {
-    context.font = font;
-    const metrics = context.measureText(text);
-    return metrics.width;
-  }
-  return text.length * 9;
-}
-
 const generateGraph = ({ nodes, edges, font }: GenerateProps) => ({
   id: "root",
   layoutOptions: {

airflow/www/static/js/api/useGraphData.ts

@@ -0,0 +1,54 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useQuery } from "react-query";
+import axios, { AxiosResponse } from "axios";
+
+import { getMetaValue } from "src/utils";
+import type { DepNode } from "src/types";
+
+const DAG_ID_PARAM = "dag_id";
+
+const dagId = getMetaValue(DAG_ID_PARAM);
+const graphDataUrl = getMetaValue("graph_data_url");
+const urlRoot = getMetaValue("root");
+
+interface GraphData {
+  edges: WebserverEdge[];
+  nodes: DepNode;
+  arrange: string;
+}
+export interface WebserverEdge {
+  label?: string;
+  sourceId: string;
+  targetId: string;
+}
+
+const useGraphData = () =>
+  useQuery("graphData", async () => {
+    const params = {
+      [DAG_ID_PARAM]: dagId,
+      root: urlRoot || undefined,
+      filter_upstream: true,
+      filter_downstream: true,
+    };
+    return axios.get<AxiosResponse, GraphData>(graphDataUrl, { params });
+  });
+
+export default useGraphData;

airflow/www/static/js/dag/InstanceTooltip.tsx

@@ -20,7 +20,7 @@
 import React from "react";
 import { Box, Text } from "@chakra-ui/react";
 
-import { finalStatesMap } from "src/utils";
+import { getGroupAndMapSummary } from "src/utils";
 import { formatDuration, getDuration } from "src/datetime_utils";
 import type { TaskInstance, Task } from "src/types";
 import Time from "src/components/Time";
@@ -36,33 +36,16 @@ const InstanceTooltip = ({
 }: Props) => {
   if (!group) return null;
   const isGroup = !!group.children;
+  const { isMapped } = group;
   const summary: React.ReactNode[] = [];
 
-  const isMapped = group?.isMapped;
-
-  const numMap = finalStatesMap();
-  let numMapped = 0;
-  if (isGroup && group.children && !isMapped) {
-    group.children.forEach((child) => {
-      const taskInstance = child.instances.find((ti) => ti.runId === runId);
-      if (taskInstance) {
-        const stateKey =
-          taskInstance.state == null ? "no_status" : taskInstance.state;
-        if (numMap.has(stateKey))
-          numMap.set(stateKey, (numMap.get(stateKey) || 0) + 1);
-      }
-    });
-  }
-
-  if (isMapped && mappedStates) {
-    Object.keys(mappedStates).forEach((stateKey) => {
-      const num = mappedStates[stateKey];
-      numMapped += num;
-      numMap.set(stateKey || "no_status", num);
-    });
-  }
+  const { totalTasks, childTaskMap } = getGroupAndMapSummary({
+    group,
+    runId,
+    mappedStates,
+  });
 
-  numMap.forEach((key, val) => {
+  childTaskMap.forEach((key, val) => {
     if (key > 0) {
       summary.push(
         // eslint-disable-next-line react/no-array-index-key
@@ -78,15 +61,15 @@ const InstanceTooltip = ({
   return (
     <Box py="2px">
       {group.tooltip && <Text>{group.tooltip}</Text>}
-      {isMapped && numMapped > 0 && (
+      {isMapped && totalTasks > 0 && (
         <Text>
-          {numMapped} mapped task
+          {totalTasks} mapped task
           {isGroup && " group"}
-          {numMapped > 1 && "s"}
+          {totalTasks > 1 && "s"}
         </Text>
       )}
       <Text>
-        {isGroup || isMapped ? "Overall " : ""}
+        {isGroup || totalTasks ? "Overall " : ""}
         Status: {state || "no status"}
       </Text>
       {(isGroup || isMapped) && summary}

airflow/www/static/js/dag/Main.tsx

@@ -31,6 +31,7 @@ import Details from "./details";
 import Grid from "./grid";
 import FilterBar from "./nav/FilterBar";
 import LegendRow from "./nav/LegendRow";
+import useToggleGroups from "./useToggleGroups";
 
 const detailsPanelKey = "hideDetailsPanel";
 const minPanelWidth = 300;
@@ -69,6 +70,7 @@ const Main = () => {
   const [hoveredTaskState, setHoveredTaskState] = useState<
     string | null | undefined
   >();
+  const { openGroupIds, onToggleGroups } = useToggleGroups();
 
   // Add a debounced delay to not constantly trigger highlighting certain task states
   const onStatusHover = debounce(
@@ -157,6 +159,8 @@ const Main = () => {
                 isPanelOpen={isOpen}
                 onPanelToggle={onPanelToggle}
                 hoveredTaskState={hoveredTaskState}
+                openGroupIds={openGroupIds}
+                onToggleGroups={onToggleGroups}
               />
             </Box>
             {isOpen && (
@@ -175,7 +179,10 @@ const Main = () => {
                   bg="white"
                   height="100%"
                 >
-                  <Details />
+                  <Details
+                    openGroupIds={openGroupIds}
+                    onToggleGroups={onToggleGroups}
+                  />
                 </Box>
               </>
             )}