[GitHub] [airflow] pierrejeambrun commented on a diff in pull request #29413: Add a new graph inside of the grid view

["pierrejeambrun (via GitHub)" <gi...@apache.org>]

pierrejeambrun commented on code in PR #29413:
URL: https://github.com/apache/airflow/pull/29413#discussion_r1122340683


##########
airflow/www/static/js/utils/index.ts:
##########
@@ -49,6 +48,44 @@ const finalStatesMap = () =>
     ["no_status", 0],
   ]);
 
+interface GroupSummaryProps {
+  group: Task;
+  runId?: string;
+  mappedStates: TaskInstance["mappedStates"];
+}
+
+const getGroupAndMapSummary = ({
+  group,
+  runId,
+  mappedStates,
+}: GroupSummaryProps) => {
+  let totalTasks = 0;
+  const childTaskMap = finalStatesMap();
+  if (!!group.children && !group.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 (childTaskMap.has(stateKey)) {
+          childTaskMap.set(stateKey, (childTaskMap.get(stateKey) || 0) + 1);
+        }
+      }
+    });
+  } else if (group.isMapped && mappedStates) {
+    Object.keys(mappedStates).forEach((stateKey) => {

Review Comment:
   Nit: If you need access to keys and values, Object.entries can be a little easier. It has less support than Object.keys but babel should be able to transform that. (We might want to check, I don't see the browserlist target in our package.json)



##########
airflow/www/static/js/dag/index.tsx:
##########
@@ -30,13 +31,24 @@ import Main from "./Main";
 // create shadowRoot
 const root = document.querySelector("#root");
 const shadowRoot = root?.attachShadow({ mode: "open" });
+
 const cache = createCache({
   container: shadowRoot,
   key: "c",
 });
 const mainElement = document.getElementById("react-container");
 
 if (mainElement) {
+  const styleTag = document.createElement("style");
+  // We need to set the z-index manually to make sure edges inside of groups still work
+  let style = reactFlowStyle.toString();
+  style += `

Review Comment:
   To avoid this we could set a `background-color: transparent` on nodes that are taskgroup when expended/isOpen.
   
   I tried playing around with z-index trying to avoid the `!important` but it looks like the stacking contexts are a bit tricky there.



-- 
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: commits-unsubscribe@airflow.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org