This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 3e467ba510 Fix prefix group false graph (#32764)
3e467ba510 is described below
commit 3e467ba510d29e912d89115769726111b8bce891
Author: Brent Bovenzi <[email protected]>
AuthorDate: Sat Jul 22 18:23:12 2023 +0800
Fix prefix group false graph (#32764)
* Fix edge rendering for prefix_group_id=false task groups
* Ensure nested prefix_group_id=false works
---
airflow/www/static/js/dag/details/graph/Node.tsx | 1 +
airflow/www/static/js/dag/details/graph/utils.ts | 30 +++++++++-
airflow/www/static/js/utils/graph.ts | 72 +++++++++++-------------
3 files changed, 62 insertions(+), 41 deletions(-)
diff --git a/airflow/www/static/js/dag/details/graph/Node.tsx
b/airflow/www/static/js/dag/details/graph/Node.tsx
index 3655dd27c7..01c2d038f7 100644
--- a/airflow/www/static/js/dag/details/graph/Node.tsx
+++ b/airflow/www/static/js/dag/details/graph/Node.tsx
@@ -47,6 +47,7 @@ export interface CustomNodeProps {
isOpen?: boolean;
isActive?: boolean;
setupTeardownType?: "setup" | "teardown";
+ fullParentNode?: string;
}
export const BaseNode = ({
diff --git a/airflow/www/static/js/dag/details/graph/utils.ts
b/airflow/www/static/js/dag/details/graph/utils.ts
index 4596320246..b1e27fb0ed 100644
--- a/airflow/www/static/js/dag/details/graph/utils.ts
+++ b/airflow/www/static/js/dag/details/graph/utils.ts
@@ -51,10 +51,18 @@ export const flattenNodes = ({
}: FlattenNodesProps) => {
let nodes: ReactFlowNode<CustomNodeProps>[] = [];
const parentNode = parent ? { parentNode: parent.id } : undefined;
+
+ let fullParentNode: string | undefined;
+ if (parent) {
+ fullParentNode =
+ parent.parentNode && !parent.id.startsWith(parent.parentNode)
+ ? `${parent.parentNode}.${parent.id}`
+ : parent.id;
+ }
children.forEach((node) => {
let instance: TaskInstance | undefined;
const group = getTask({ taskId: node.id, task: groups });
- if (!node.id.includes("join_id") && selected.runId) {
+ if (!node.id.endsWith("join_id") && selected.runId) {
instance = group?.instances.find((ti) => ti.runId === selected.runId);
}
const isSelected = node.id === selected.taskId && !!instance;
@@ -82,6 +90,7 @@ export const flattenNodes = ({
}
onToggleGroups(newGroupIds);
},
+ fullParentNode,
...node.value,
},
type: "custom",
@@ -155,8 +164,23 @@ export const buildEdges = ({
type: "custom",
}))
.map((e) => {
- const sourceIds = e.source.split(".");
- const targetIds = e.target.split(".");
+ const sourceNode = nodes.find((n) => n.id === e.source);
+ const targetNode = nodes.find((n) => n.id === e.target);
+
+ // Before finding the depth of the edge, append the parentNode in case
prefix_group_id is false
+ const sourceIds = (
+ sourceNode?.data.fullParentNode &&
+ e.source.startsWith(sourceNode.data.fullParentNode)
+ ? e.source
+ : `${sourceNode?.data.fullParentNode}.${e.source}`
+ ).split(".");
+ const targetIds = (
+ targetNode?.data.fullParentNode &&
+ e.target.startsWith(targetNode.data.fullParentNode)
+ ? e.target
+ : `${targetNode?.data.fullParentNode}.${e.target}`
+ ).split(".");
+
const isSelected =
selectedTaskId &&
(e.source === selectedTaskId || e.target === selectedTaskId);
diff --git a/airflow/www/static/js/utils/graph.ts
b/airflow/www/static/js/utils/graph.ts
index abcf0c5482..ec38f87cf9 100644
--- a/airflow/www/static/js/utils/graph.ts
+++ b/airflow/www/static/js/utils/graph.ts
@@ -76,6 +76,19 @@ const generateGraph = ({
arrange,
}: GenerateProps) => {
const closedGroupIds: string[] = [];
+ let filteredEdges = unformattedEdges;
+
+ const getNestedChildIds = (children: DepNode[]) => {
+ let childIds: string[] = [];
+ children.forEach((c) => {
+ childIds.push(c.id);
+ if (c.children) {
+ const nestedChildIds = getNestedChildIds(c.children);
+ childIds = [...childIds, ...nestedChildIds];
+ }
+ });
+ return childIds;
+ };
const formatChildNode = (
node: DepNode
@@ -106,7 +119,25 @@ const generateGraph = ({
};
}
const isJoinNode = id.includes("join_id");
- if (children?.length) closedGroupIds.push(value.label);
+ if (!isOpen && children?.length) {
+ const childIds = getNestedChildIds(children);
+ filteredEdges = filteredEdges
+ // Filter out internal group edges
+ .filter(
+ (e) =>
+ !(
+ childIds.indexOf(e.sourceId) > -1 &&
+ childIds.indexOf(e.targetId) > -1
+ )
+ )
+ // For external group edges, point to the group itself instead of a
child node
+ .map((e) => ({
+ ...e,
+ sourceId: childIds.indexOf(e.sourceId) > -1 ? node.id : e.sourceId,
+ targetId: childIds.indexOf(e.targetId) > -1 ? node.id : e.targetId,
+ }));
+ closedGroupIds.push(value.label);
+ }
return {
id,
label: value.label,
@@ -119,29 +150,10 @@ const generateGraph = ({
height: isJoinNode ? 10 : 60,
};
};
- const children = nodes.map(formatChildNode);
- const edges = unformattedEdges
- .map((edge) => {
- let { sourceId, targetId } = edge;
- const splitSource = sourceId.split(".");
- const splitTarget = targetId.split(".");
+ const children = nodes.map(formatChildNode);
- if (closedGroupIds.includes(splitSource[splitSource.length - 2])) {
- splitSource.pop();
- sourceId = splitSource.join(".");
- }
- if (closedGroupIds.includes(splitTarget[splitTarget.length - 2])) {
- splitTarget.pop();
- targetId = splitTarget.join(".");
- }
- return {
- ...edge,
- targetId,
- sourceId,
- };
- })
- // Deduplicate edges
+ const edges = filteredEdges
.filter(
(value, index, self) =>
index ===
@@ -149,22 +161,6 @@ const generateGraph = ({
(t) => t.sourceId === value.sourceId && t.targetId === value.targetId
)
)
- .filter((edge) => {
- const splitSource = edge.sourceId.split(".");
- const splitTarget = edge.targetId.split(".");
- if (
- splitSource
- .slice(0, splitSource.length - 1)
- .some((id) => closedGroupIds.includes(id)) ||
- splitTarget
- .slice(0, splitTarget.length - 1)
- .some((id) => closedGroupIds.includes(id))
- ) {
- return false;
- }
- if (edge.sourceId === edge.targetId) return false;
- return true;
- })
.map((e) => ({
id: `${e.sourceId}-${e.targetId}`,
sources: [e.sourceId],
