From 8b276a92a77b9d3f92ca2a3407953c150d5a6e47 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:42:45 +0100
Subject: [PATCH] fix(ui): clicking app or route in exchange header clears
 selection and returns to table

---
 ui/src/pages/Exchanges/ExchangeHeader.tsx |  7 ++++---
 ui/src/pages/Exchanges/ExchangesPage.tsx  | 10 ++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index cee38a37..746745ff 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -11,6 +11,7 @@ import styles from './ExchangeHeader.module.css';
 interface ExchangeHeaderProps {
   detail: ExecutionDetail;
   onCorrelatedSelect?: (executionId: string, applicationName: string, routeId: string) => void;
+  onClearSelection?: () => void;
 }
 
 type StatusVariant = 'success' | 'error' | 'running' | 'warning';
@@ -39,7 +40,7 @@ function formatDuration(ms: number): string {
   return `${ms}ms`;
 }
 
-export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderProps) {
+export function ExchangeHeader({ detail, onCorrelatedSelect, onClearSelection }: ExchangeHeaderProps) {
   const navigate = useNavigate();
   const { data: chainResult } = useCorrelationChain(detail.correlationId ?? null);
   const chain = chainResult?.data;
@@ -69,10 +70,10 @@ export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderPro
           </>
         )}
         <span className={styles.separator} />
-        <button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}`)} title="Show all exchanges for this application">
+        <button className={styles.linkBtn} onClick={() => { onClearSelection?.(); navigate(`/exchanges/${detail.applicationName}`); }} title="Show all exchanges for this application">
           <span className={styles.app}>{detail.applicationName}</span>
         </button>
-        <button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}/${detail.routeId}`)} title="Show all exchanges for this route">
+        <button className={styles.linkBtn} onClick={() => { onClearSelection?.(); navigate(`/exchanges/${detail.applicationName}/${detail.routeId}`); }} title="Show all exchanges for this route">
           <span className={styles.route}>{detail.routeId}</span>
           <GitBranch size={12} className={styles.icon} />
         </button>
diff --git a/ui/src/pages/Exchanges/ExchangesPage.tsx b/ui/src/pages/Exchanges/ExchangesPage.tsx
index e58f1597..e4f70187 100644
--- a/ui/src/pages/Exchanges/ExchangesPage.tsx
+++ b/ui/src/pages/Exchanges/ExchangesPage.tsx
@@ -26,6 +26,10 @@ export default function ExchangesPage() {
     setSelected({ executionId, applicationName, routeId });
   }, []);
 
+  const handleClearSelection = useCallback(() => {
+    setSelected(null);
+  }, []);
+
   const handleSplitterDown = useCallback((e: React.PointerEvent) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const container = containerRef.current;
@@ -62,6 +66,7 @@ export default function ExchangesPage() {
           routeId={selected.routeId}
           exchangeId={selected.executionId}
           onCorrelatedSelect={handleCorrelatedSelect}
+          onClearSelection={handleClearSelection}
         />
       </div>
     </div>
@@ -75,9 +80,10 @@ interface DiagramPanelProps {
   routeId: string;
   exchangeId: string;
   onCorrelatedSelect: (executionId: string, applicationName: string, routeId: string) => void;
+  onClearSelection: () => void;
 }
 
-function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect }: DiagramPanelProps) {
+function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect, onClearSelection }: DiagramPanelProps) {
   const navigate = useNavigate();
   const { timeRange } = useGlobalFilters();
   const timeFrom = timeRange.start.toISOString();
@@ -107,7 +113,7 @@ function DiagramPanel({ appId, routeId, exchangeId, onCorrelatedSelect }: Diagra
   if (detail) {
     return (
       <>
-        <ExchangeHeader detail={detail} onCorrelatedSelect={onCorrelatedSelect} />
+        <ExchangeHeader detail={detail} onCorrelatedSelect={onCorrelatedSelect} onClearSelection={onClearSelection} />
         <ExecutionDiagram
           executionId={exchangeId}
           executionDetail={detail}