(airflow) branch main updated: Sort version/try and update query key for dag graph (#47350)

[potiuk]

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 b09e7b12aad Sort version/try and update query key for dag graph 
(#47350)
b09e7b12aad is described below

commit b09e7b12aad96d90d57e9412e804df66100dd54b
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Tue Mar 4 12:44:25 2025 -0500

    Sort version/try and update query key for dag graph (#47350)
---
 airflow/ui/src/components/DagVersionSelect.tsx    |  2 +-
 airflow/ui/src/components/Graph/useGraphLayout.ts | 12 ++++++++++--
 airflow/ui/src/components/TaskTrySelect.tsx       |  9 +++++++--
 airflow/ui/src/layouts/Details/Graph/Graph.tsx    |  4 +++-
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/airflow/ui/src/components/DagVersionSelect.tsx 
b/airflow/ui/src/components/DagVersionSelect.tsx
index 2dbb6089561..996448c6d81 100644
--- a/airflow/ui/src/components/DagVersionSelect.tsx
+++ b/airflow/ui/src/components/DagVersionSelect.tsx
@@ -48,7 +48,7 @@ const DagVersionSelect = ({ disabled = false }: { readonly 
disabled?: boolean })
         DagVersionService.getDagVersions({
           dagId,
         }).then((data: DAGVersionCollectionResponse) => {
-          const options = data.dag_versions.map((version: DagVersionResponse) 
=> {
+          const options = [...data.dag_versions].reverse().map((version: 
DagVersionResponse) => {
             const versionNumber = version.version_number.toString();
 
             return {
diff --git a/airflow/ui/src/components/Graph/useGraphLayout.ts 
b/airflow/ui/src/components/Graph/useGraphLayout.ts
index 9093ac7a308..2ec635ed5d2 100644
--- a/airflow/ui/src/components/Graph/useGraphLayout.ts
+++ b/airflow/ui/src/components/Graph/useGraphLayout.ts
@@ -231,9 +231,17 @@ const generateElkGraph = ({
 type LayoutProps = {
   dagId: DAGResponse["dag_id"];
   openGroupIds: Array<string>;
+  versionNumber?: number;
 } & StructureDataResponse;
 
-export const useGraphLayout = ({ arrange = "LR", dagId, edges, nodes, 
openGroupIds = [] }: LayoutProps) =>
+export const useGraphLayout = ({
+  arrange = "LR",
+  dagId,
+  edges,
+  nodes,
+  openGroupIds = [],
+  versionNumber,
+}: LayoutProps) =>
   useQuery({
     queryFn: async () => {
       const font = `bold 18px 
${globalThis.getComputedStyle(document.body).fontFamily}`;
@@ -265,5 +273,5 @@ export const useGraphLayout = ({ arrange = "LR", dagId, 
edges, nodes, openGroupI
 
       return { edges: formattedEdges, nodes: flattenedData.nodes };
     },
-    queryKey: ["graphLayout", nodes.length, openGroupIds, arrange, dagId],
+    queryKey: ["graphLayout", nodes.length, openGroupIds, arrange, dagId, 
versionNumber, edges.length],
   });
diff --git a/airflow/ui/src/components/TaskTrySelect.tsx 
b/airflow/ui/src/components/TaskTrySelect.tsx
index ac4e499858b..1964ea4fcca 100644
--- a/airflow/ui/src/components/TaskTrySelect.tsx
+++ b/airflow/ui/src/components/TaskTrySelect.tsx
@@ -70,8 +70,13 @@ export const TaskTrySelect = ({ onSelectTryNumber, 
selectedTryNumber, taskInstan
   const logAttemptDropdownLimit = 10;
   const showDropdown = finalTryNumber > logAttemptDropdownLimit;
 
+  // For some reason tries aren't sorted by try_number
+  const sortedTries = [...(tiHistory?.task_instances ?? [])].sort(
+    (tryA, tryB) => tryA.try_number - tryB.try_number,
+  );
+
   const tryOptions = createListCollection({
-    items: (tiHistory?.task_instances ?? []).map((ti) => ({
+    items: sortedTries.map((ti) => ({
       task_instance: ti,
       value: ti.try_number.toString(),
     })),
@@ -119,7 +124,7 @@ export const TaskTrySelect = ({ onSelectTryNumber, 
selectedTryNumber, taskInstan
         </Select.Root>
       ) : (
         <HStack>
-          {tiHistory?.task_instances.map((ti) => (
+          {sortedTries.map((ti) => (
             <TaskInstanceTooltip key={ti.try_number} taskInstance={ti}>
               <Button
                 colorPalette="blue"
diff --git a/airflow/ui/src/layouts/Details/Graph/Graph.tsx 
b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
index b77592c66bc..6d00493992a 100644
--- a/airflow/ui/src/layouts/Details/Graph/Graph.tsx
+++ b/airflow/ui/src/layouts/Details/Graph/Graph.tsx
@@ -79,16 +79,18 @@ export const Graph = () => {
   const { openGroupIds } = useOpenGroups();
 
   const selectedColor = colorMode === "dark" ? selectedDarkColor : 
selectedLightColor;
+  const versionNumber = selectedVersion === undefined ? undefined : 
parseInt(selectedVersion, 10);
 
   const { data: graphData = { arrange: "LR", edges: [], nodes: [] } } = 
useStructureServiceStructureData({
     dagId,
-    versionNumber: selectedVersion === undefined ? undefined : 
parseInt(selectedVersion, 10),
+    versionNumber,
   });
 
   const { data } = useGraphLayout({
     ...graphData,
     dagId,
     openGroupIds,
+    versionNumber,
   });
 
   const refetchInterval = useAutoRefresh({ dagId });