From 3c226de62fda79286f172bcab1523c8dfae1b3e0 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 23 Mar 2026 21:13:01 +0100
Subject: [PATCH] fix: use diagramContentHash for Route Flow instead of
 groupName

The deployed backend doesn't return groupName on ExecutionDetail or
ExecutionSummary (Docker build cache issue). Switch diagram lookup to
use diagramContentHash which is always available in the detail response.

- Dashboard: useDiagramLayout(detail.diagramContentHash) instead of
  useDiagramByRoute(groupName, routeId)
- ExchangeDetail: same change

Route Flow now renders correctly in both the slide-in panel and the
full exchange detail page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Dashboard/Dashboard.tsx           | 5 ++---
 ui/src/pages/ExchangeDetail/ExchangeDetail.tsx | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index 2e3ab8aa..08a48dac 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -7,7 +7,7 @@ import {
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useSearchExecutions, useExecutionStats, useStatsTimeseries, useExecutionDetail } from '../../api/queries/executions';
-import { useDiagramByRoute } from '../../api/queries/diagrams';
+import { useDiagramLayout } from '../../api/queries/diagrams';
 import { useGlobalFilters } from '@cameleer/design-system';
 import type { ExecutionSummary } from '../../api/types';
 import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
@@ -46,8 +46,7 @@ export default function Dashboard() {
     [searchResult],
   );
 
-  const selectedRow = rows.find(r => r.id === selectedId);
-  const { data: diagram } = useDiagramByRoute(detail?.groupName ?? selectedRow?.groupName, detail?.routeId);
+  const { data: diagram } = useDiagramLayout(detail?.diagramContentHash ?? null);
 
   const totalCount = stats?.totalCount ?? 0;
   const failedCount = stats?.failedCount ?? 0;
diff --git a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
index 1d5b8b18..8f30f43f 100644
--- a/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/ui/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -6,7 +6,7 @@ import {
 } from '@cameleer/design-system';
 import { useExecutionDetail, useProcessorSnapshot } from '../../api/queries/executions';
 import { useCorrelationChain } from '../../api/queries/correlation';
-import { useDiagramByRoute } from '../../api/queries/diagrams';
+import { useDiagramLayout } from '../../api/queries/diagrams';
 import { mapDiagramToRouteNodes } from '../../utils/diagram-mapping';
 import styles from './ExchangeDetail.module.css';
 
@@ -41,7 +41,7 @@ export default function ExchangeDetail() {
   const { data: detail, isLoading } = useExecutionDetail(id ?? null);
   const [timelineView, setTimelineView] = useState<'gantt' | 'flow'>('gantt');
   const { data: correlationData } = useCorrelationChain(detail?.correlationId ?? null);
-  const { data: diagram } = useDiagramByRoute(detail?.groupName, detail?.routeId);
+  const { data: diagram } = useDiagramLayout(detail?.diagramContentHash ?? null);
 
   const procList = detail ? (detail.processors?.length ? detail.processors : (detail.children ?? [])) : [];