From 4b130a81fdf8a694b5775e2570c0ee2cf9ba38ae Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Wed, 7 May 2025 15:29:55 -0600
Subject: [PATCH 1/5] timeout bi-directional navigation v1

---
 .../SagaDiagram/SagaDiagramParser.ts          | 19 ++++++
 .../SagaDiagram/SagaOutgoingMessage.vue       | 46 +++++++++++---
 .../SagaOutgoingTimeoutMessage.vue            | 60 ++++++++++++++++++-
 .../messages2/SagaDiagram/SagaUpdateNode.vue  | 46 ++++++++++----
 src/Frontend/src/stores/SagaDiagramStore.ts   | 21 +++++++
 5 files changed, 173 insertions(+), 19 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
index f1854f13e..910f30e9d 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaDiagramParser.ts
@@ -17,6 +17,8 @@ export interface InitiatingMessageViewModel {
   FormattedMessageTimestamp: string;
   IsEventMessage: boolean;
   MessageData: SagaMessageDataItem[];
+  HasRelatedTimeoutRequest?: boolean;
+  MessageId: string;
 }
 export interface SagaTimeoutMessageViewModel extends SagaMessageViewModel {
   TimeoutFriendly: string;
@@ -57,6 +59,18 @@ export interface SagaViewModel {
 export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData: SagaMessageData[]): SagaUpdateViewModel[] {
   if (!sagaHistory || !sagaHistory.changes || !sagaHistory.changes.length) return [];
 
+  const timeoutMessageIds = new Set<string>();
+  sagaHistory.changes.forEach((update) => {
+    if (update.outgoing_messages) {
+      update.outgoing_messages.forEach((msg) => {
+        const delivery_delay = msg.delivery_delay || "00:00:00";
+        if (delivery_delay && delivery_delay !== "00:00:00") {
+          timeoutMessageIds.add(msg.message_id);
+        }
+      });
+    }
+  });
+
   const updates = sagaHistory.changes
     .map((update) => {
       const startTime = new Date(update.start_time);
@@ -107,6 +121,9 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
 
       const hasTimeout = outgoingTimeoutMessages.length > 0;
 
+      // Check if initiating message is a timeout and if so, if it has a corresponding request in the diagram
+      const hasRelatedTimeoutRequest = update.initiating_message?.is_saga_timeout_message && timeoutMessageIds.has(update.initiating_message?.message_id);
+
       return <SagaUpdateViewModel>{
         MessageId: update.initiating_message?.message_id || "",
         StartTime: startTime,
@@ -115,11 +132,13 @@ export function parseSagaUpdates(sagaHistory: SagaHistory | null, messagesData:
         Status: update.status,
         StatusDisplay: update.status === "new" ? "Saga Initiated" : "Saga Updated",
         InitiatingMessage: <InitiatingMessageViewModel>{
+          MessageId: update.initiating_message?.message_id || "",
           MessageType: typeToName(update.initiating_message?.message_type || "Unknown Message") || "",
           FormattedMessageTimestamp: `${initiatingMessageTimestamp.toLocaleDateString()} ${initiatingMessageTimestamp.toLocaleTimeString()}`,
           MessageData: initiatingMessageData,
           IsEventMessage: update.initiating_message?.intent === "Publish",
           IsSagaTimeoutMessage: update.initiating_message?.is_saga_timeout_message || false,
+          HasRelatedTimeoutRequest: hasRelatedTimeoutRequest,
         },
         HasTimeout: hasTimeout,
         IsFirstNode: update.status === "new",
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
index 433a84d78..ac9fa61c6 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
@@ -3,15 +3,35 @@ import MessageDataBox from "./MessageDataBox.vue";
 import CommandIcon from "@/assets/command.svg";
 import EventIcon from "@/assets/event.svg";
 import { SagaMessageViewModel } from "./SagaDiagramParser";
+import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
+import { ref, watch } from "vue";
+const isActive = ref(false);
 
-defineProps<{
+const store = useSagaDiagramStore();
+
+const props = defineProps<{
   message: SagaMessageViewModel;
   showMessageData?: boolean;
 }>();
+
+watch(
+  () => store.selectedMessageId,
+  (newMessageId) => {
+    // Check if this node contains the selected message
+    isActive.value = newMessageId === props.message.MessageId;
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
-  <div class="cell-inner cell-inner-side">
+  <div
+    :class="{
+      'cell-inner': true,
+      'cell-inner-side': true,
+      'cell-inner-side--active': isActive,
+    }"
+  >
     <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
     <h2 class="message-title">{{ message.MessageFriendlyTypeName }}</h2>
     <div class="timestamp">{{ message.FormattedTimeSent }}</div>
@@ -63,10 +83,6 @@ defineProps<{
   margin-left: 1rem;
 }
 
-.cell-inner-side--active {
-  border: solid 2px #000000;
-}
-
 .cell-inner-right {
   position: relative;
   min-height: 2.5rem;
@@ -145,8 +161,10 @@ defineProps<{
 }
 
 .cell-inner-side--active {
-  border: solid 2px #000000;
+  border: solid 5px #00a3c4;
+  animation: blink-border 1.8s ease-in-out;
 }
+
 .saga-icon {
   display: block;
   float: left;
@@ -158,4 +176,18 @@ defineProps<{
   height: 2rem;
   padding: 0.23rem;
 }
+@keyframes blink-border {
+  0%,
+  100% {
+    border-color: #00a3c4;
+  }
+  20%,
+  60% {
+    border-color: #cccccc;
+  }
+  40%,
+  80% {
+    border-color: #00a3c4;
+  }
+}
 </style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index 14170588d..35f6e43a6 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -4,6 +4,7 @@ import MessageDataBox from "./MessageDataBox.vue";
 import TimeoutIcon from "@/assets/TimeoutIcon.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
+import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
   message: SagaTimeoutMessageViewModel;
@@ -12,11 +13,43 @@ const props = defineProps<{
 }>();
 
 const store = useSagaDiagramStore();
+const timeoutMessageRef = ref<HTMLElement | null>(null);
+const isActive = ref(false);
 
+const shouldHighlightAndScroll = computed(() => {
+  return props.message.MessageId === store.selectedMessageId;
+});
+
+// This sets the store with the required values so the timeout invocation node exists, it will react by scrolling to the node
 const navigateToTimeout = () => {
   // Set the selected message ID in the store
   store.setSelectedMessageId(props.message.MessageId);
+  store.scrollToTimeout = true;
 };
+
+watch(
+  [() => store.scrollToTimeoutRequest, () => shouldHighlightAndScroll.value, () => timeoutMessageRef.value !== null],
+  ([scrollRequest, shouldScroll, refExists]) => {
+    if (scrollRequest && shouldScroll && refExists && timeoutMessageRef.value) {
+      timeoutMessageRef.value.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+
+      store.scrollToTimeoutRequest = false;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => store.selectedMessageId,
+  (newMessageId) => {
+    // Check if this node contains the selected message
+    isActive.value = newMessageId === props.message.MessageId;
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
@@ -35,7 +68,14 @@ const navigateToTimeout = () => {
     </div>
     <div class="cell cell--side">
       <div class="cell-inner cell-inner-right"></div>
-      <div class="cell-inner cell-inner-side">
+      <div
+        ref="timeoutMessageRef"
+        :class="{
+          'cell-inner': true,
+          'cell-inner-side': true,
+          'cell-inner-side--active': isActive,
+        }"
+      >
         <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
         <h2 class="message-title" aria-label="timeout message type">{{ message.MessageFriendlyTypeName }}</h2>
         <div class="timestamp" aria-label="timeout message timestamp">{{ message.FormattedTimeSent }}</div>
@@ -96,7 +136,8 @@ const navigateToTimeout = () => {
 }
 
 .cell-inner-side--active {
-  border: solid 2px #000000;
+  border: solid 5px #00a3c4;
+  animation: blink-border 1.8s ease-in-out;
 }
 
 .cell-inner-right {
@@ -176,4 +217,19 @@ const navigateToTimeout = () => {
 .saga-icon--overlap {
   margin-left: -1rem;
 }
+
+@keyframes blink-border {
+  0%,
+  100% {
+    border-color: #00a3c4;
+  }
+  20%,
+  60% {
+    border-color: #cccccc;
+  }
+  40%,
+  80% {
+    border-color: #00a3c4;
+  }
+}
 </style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 681bc883a..006e95a4f 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -52,24 +52,37 @@ const initiatingMessageRef = ref<HTMLElement | null>(null);
 const isActive = ref(false);
 const hasParsingError = ref(false);
 
-// Watch for changes to selectedMessageId
+const shouldHighlightAndScroll = computed(() => {
+  return props.update.MessageId === store.selectedMessageId;
+});
+
+const navigateToTimeoutRequest = () => {
+  store.setSelectedMessageId(props.update.InitiatingMessage.MessageId);
+  store.scrollToTimeoutRequest = true;
+};
+
 watch(
   () => store.selectedMessageId,
   (newMessageId) => {
     // Check if this node contains the selected message
-    const isSelected = props.update.InitiatingMessage.IsSagaTimeoutMessage && newMessageId === props.update.MessageId;
-
-    // Update active state
-    isActive.value = isSelected;
+    isActive.value = newMessageId === props.update.MessageId;
+  },
+  { immediate: true }
+);
 
-    // If this is the selected message, scroll to it
-    if (isSelected && initiatingMessageRef.value) {
+watch(
+  [() => store.scrollToTimeout, () => shouldHighlightAndScroll.value, () => initiatingMessageRef.value !== null],
+  ([scrollTimeout, shouldScroll, refExists]) => {
+    if (scrollTimeout && shouldScroll && refExists && initiatingMessageRef.value) {
       initiatingMessageRef.value.scrollIntoView({
         behavior: "smooth",
         block: "center",
       });
+
+      store.scrollToTimeout = false;
     }
-  }
+  },
+  { immediate: true }
 );
 
 // Format a JSON value for display
@@ -168,7 +181,11 @@ const hasStateChanges = computed(() => {
         <div class="cell-inner cell-inner-center cell-inner--align-bottom">
           <template v-if="update.InitiatingMessage.IsSagaTimeoutMessage">
             <img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
-            <h2 class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
+            <!-- Conditionally make the text a link based on HasRelatedTimeoutRequest -->
+            <a v-if="update.InitiatingMessage.HasRelatedTimeoutRequest" href="#" @click.prevent="navigateToTimeoutRequest" class="saga-status-title saga-status-title--inline timeout-status timeout-status--link" aria-label="timeout invoked">
+              Timeout Invoked
+            </a>
+            <h2 v-else class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
             <br />
           </template>
           <img class="saga-icon saga-icon--center-cell" :src="update.IsFirstNode ? SagaInitiatedIcon : SagaUpdatedIcon" alt="" />
@@ -408,7 +425,16 @@ const hasStateChanges = computed(() => {
   display: inline-block;
   font-size: 1rem;
   font-weight: 900;
-  color: #00a3c4;
+  color: inherit; /* Default to inheriting parent color */
+}
+
+.timeout-status--link {
+  color: #00a3c4; /* Blue color only for links */
+  text-decoration: none;
+}
+
+.timeout-status--link:hover {
+  text-decoration: underline;
 }
 
 /* Styles for DiffViewer integration */
diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts
index 92c0c74c0..f3cbf3f6a 100644
--- a/src/Frontend/src/stores/SagaDiagramStore.ts
+++ b/src/Frontend/src/stores/SagaDiagramStore.ts
@@ -24,6 +24,8 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const fetchedMessages = ref(new Set<string>());
   const messagesData = ref<SagaMessageData[]>([]);
   const selectedMessageId = ref<string | null>(null);
+  const scrollToTimeoutRequest = ref(false);
+  const scrollToTimeout = ref(false);
   const MessageBodyEndpoint = "messages/{0}/body";
 
   // Watch the sagaId and fetch saga history when it changes
@@ -190,6 +192,7 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     fetchedMessages.value.clear();
     messagesData.value = [];
     selectedMessageId.value = null;
+    scrollToTimeoutRequest.value = false;
   }
 
   function formatUrl(template: string, id: string): string {
@@ -254,6 +257,22 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     selectedMessageId.value = messageId;
   }
 
+  watch(scrollToTimeoutRequest, (newValue) => {
+    if (newValue) {
+      setTimeout(() => {
+        scrollToTimeoutRequest.value = false;
+      }, 1000);
+    }
+  });
+
+  watch(scrollToTimeout, (newValue) => {
+    if (newValue) {
+      setTimeout(() => {
+        scrollToTimeout.value = false;
+      }, 1000);
+    }
+  });
+
   return {
     sagaHistory,
     sagaId,
@@ -263,6 +282,8 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     showMessageData,
     messagesData,
     selectedMessageId,
+    scrollToTimeoutRequest,
+    scrollToTimeout,
     setSagaId,
     clearSagaHistory,
     toggleMessageData,

From 4a09f7c47176aacd21f6d9af2a729d98581471b3 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Wed, 7 May 2025 15:48:48 -0600
Subject: [PATCH 2/5] use sequence diagram blue for node selection

---
 .../SagaDiagram/SagaOutgoingMessage.vue       |  6 +++---
 .../SagaOutgoingTimeoutMessage.vue            |  6 +++---
 .../messages2/SagaDiagram/SagaUpdateNode.vue  | 21 ++++---------------
 3 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
index ac9fa61c6..330127ba5 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
@@ -161,7 +161,7 @@ watch(
 }
 
 .cell-inner-side--active {
-  border: solid 5px #00a3c4;
+  border: solid 5px #0b6eef;
   animation: blink-border 1.8s ease-in-out;
 }
 
@@ -179,7 +179,7 @@ watch(
 @keyframes blink-border {
   0%,
   100% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
   20%,
   60% {
@@ -187,7 +187,7 @@ watch(
   }
   40%,
   80% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
 }
 </style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index 35f6e43a6..10c1b6148 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -136,7 +136,7 @@ watch(
 }
 
 .cell-inner-side--active {
-  border: solid 5px #00a3c4;
+  border: solid 5px #0b6eef;
   animation: blink-border 1.8s ease-in-out;
 }
 
@@ -221,7 +221,7 @@ watch(
 @keyframes blink-border {
   0%,
   100% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
   20%,
   60% {
@@ -229,7 +229,7 @@ watch(
   }
   40%,
   80% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
 }
 </style>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 006e95a4f..32ad7e81c 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -181,10 +181,7 @@ const hasStateChanges = computed(() => {
         <div class="cell-inner cell-inner-center cell-inner--align-bottom">
           <template v-if="update.InitiatingMessage.IsSagaTimeoutMessage">
             <img class="saga-icon saga-icon--center-cell" :src="SagaTimeoutIcon" alt="" />
-            <!-- Conditionally make the text a link based on HasRelatedTimeoutRequest -->
-            <a v-if="update.InitiatingMessage.HasRelatedTimeoutRequest" href="#" @click.prevent="navigateToTimeoutRequest" class="saga-status-title saga-status-title--inline timeout-status timeout-status--link" aria-label="timeout invoked">
-              Timeout Invoked
-            </a>
+            <a v-if="update.InitiatingMessage.HasRelatedTimeoutRequest" href="#" @click.prevent="navigateToTimeoutRequest" class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked"> Timeout Invoked </a>
             <h2 v-else class="saga-status-title saga-status-title--inline timeout-status" aria-label="timeout invoked">Timeout Invoked</h2>
             <br />
           </template>
@@ -329,7 +326,7 @@ const hasStateChanges = computed(() => {
 }
 
 .cell-inner-side--active {
-  border: solid 5px #00a3c4;
+  border: solid 5px #0b6eef;
   animation: blink-border 1.8s ease-in-out;
 }
 
@@ -425,16 +422,6 @@ const hasStateChanges = computed(() => {
   display: inline-block;
   font-size: 1rem;
   font-weight: 900;
-  color: inherit; /* Default to inheriting parent color */
-}
-
-.timeout-status--link {
-  color: #00a3c4; /* Blue color only for links */
-  text-decoration: none;
-}
-
-.timeout-status--link:hover {
-  text-decoration: underline;
 }
 
 /* Styles for DiffViewer integration */
@@ -482,7 +469,7 @@ const hasStateChanges = computed(() => {
 @keyframes blink-border {
   0%,
   100% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
   20%,
   60% {
@@ -490,7 +477,7 @@ const hasStateChanges = computed(() => {
   }
   40%,
   80% {
-    border-color: #00a3c4;
+    border-color: #0b6eef;
   }
 }
 </style>

From e49ae44362c57a1f9152a1c870d89266bedb5a9c Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Wed, 7 May 2025 21:40:12 -0600
Subject: [PATCH 3/5] removing non required watches from the store

---
 src/Frontend/src/stores/SagaDiagramStore.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts
index f3cbf3f6a..f0a40f587 100644
--- a/src/Frontend/src/stores/SagaDiagramStore.ts
+++ b/src/Frontend/src/stores/SagaDiagramStore.ts
@@ -257,22 +257,6 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
     selectedMessageId.value = messageId;
   }
 
-  watch(scrollToTimeoutRequest, (newValue) => {
-    if (newValue) {
-      setTimeout(() => {
-        scrollToTimeoutRequest.value = false;
-      }, 1000);
-    }
-  });
-
-  watch(scrollToTimeout, (newValue) => {
-    if (newValue) {
-      setTimeout(() => {
-        scrollToTimeout.value = false;
-      }, 1000);
-    }
-  });
-
   return {
     sagaHistory,
     sagaId,

From 0d1606932b12c203ba9d1e2e3fd2badb52c43f42 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Wed, 7 May 2025 22:16:23 -0600
Subject: [PATCH 4/5] highlight messages on first load

---
 .../SagaDiagram/SagaOutgoingMessage.vue       | 18 ++++++------------
 .../SagaOutgoingTimeoutMessage.vue            | 19 ++++---------------
 .../messages2/SagaDiagram/SagaUpdateNode.vue  | 18 ++++--------------
 src/Frontend/src/stores/SagaDiagramStore.ts   | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
index 330127ba5..ec4766a4c 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingMessage.vue
@@ -4,8 +4,11 @@ import CommandIcon from "@/assets/command.svg";
 import EventIcon from "@/assets/event.svg";
 import { SagaMessageViewModel } from "./SagaDiagramParser";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
-import { ref, watch } from "vue";
-const isActive = ref(false);
+import { computed } from "vue";
+
+const shouldBeActive = computed(() => {
+  return store.selectedMessageId === props.message.MessageId;
+});
 
 const store = useSagaDiagramStore();
 
@@ -13,15 +16,6 @@ const props = defineProps<{
   message: SagaMessageViewModel;
   showMessageData?: boolean;
 }>();
-
-watch(
-  () => store.selectedMessageId,
-  (newMessageId) => {
-    // Check if this node contains the selected message
-    isActive.value = newMessageId === props.message.MessageId;
-  },
-  { immediate: true }
-);
 </script>
 
 <template>
@@ -29,7 +23,7 @@ watch(
     :class="{
       'cell-inner': true,
       'cell-inner-side': true,
-      'cell-inner-side--active': isActive,
+      'cell-inner-side--active': shouldBeActive,
     }"
   >
     <img class="saga-icon saga-icon--side-cell" :src="message.IsEventMessage ? EventIcon : CommandIcon" :alt="message.IsEventMessage ? 'Event' : 'Command'" />
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
index 10c1b6148..0f5658924 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaOutgoingTimeoutMessage.vue
@@ -14,10 +14,8 @@ const props = defineProps<{
 
 const store = useSagaDiagramStore();
 const timeoutMessageRef = ref<HTMLElement | null>(null);
-const isActive = ref(false);
-
-const shouldHighlightAndScroll = computed(() => {
-  return props.message.MessageId === store.selectedMessageId;
+const shouldBeActive = computed(() => {
+  return store.selectedMessageId === props.message.MessageId;
 });
 
 // This sets the store with the required values so the timeout invocation node exists, it will react by scrolling to the node
@@ -28,7 +26,7 @@ const navigateToTimeout = () => {
 };
 
 watch(
-  [() => store.scrollToTimeoutRequest, () => shouldHighlightAndScroll.value, () => timeoutMessageRef.value !== null],
+  [() => store.scrollToTimeoutRequest, () => shouldBeActive.value, () => timeoutMessageRef.value !== null],
   ([scrollRequest, shouldScroll, refExists]) => {
     if (scrollRequest && shouldScroll && refExists && timeoutMessageRef.value) {
       timeoutMessageRef.value.scrollIntoView({
@@ -41,15 +39,6 @@ watch(
   },
   { immediate: true }
 );
-
-watch(
-  () => store.selectedMessageId,
-  (newMessageId) => {
-    // Check if this node contains the selected message
-    isActive.value = newMessageId === props.message.MessageId;
-  },
-  { immediate: true }
-);
 </script>
 
 <template>
@@ -73,7 +62,7 @@ watch(
         :class="{
           'cell-inner': true,
           'cell-inner-side': true,
-          'cell-inner-side--active': isActive,
+          'cell-inner-side--active': shouldBeActive,
         }"
       >
         <img class="saga-icon saga-icon--side-cell" :src="TimeoutIcon" alt="" />
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 32ad7e81c..8cbb54675 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -49,11 +49,10 @@ const props = defineProps<{
 
 const store = useSagaDiagramStore();
 const initiatingMessageRef = ref<HTMLElement | null>(null);
-const isActive = ref(false);
 const hasParsingError = ref(false);
 
-const shouldHighlightAndScroll = computed(() => {
-  return props.update.MessageId === store.selectedMessageId;
+const shouldBeActive = computed(() => {
+  return store.selectedMessageId === props.update.MessageId;
 });
 
 const navigateToTimeoutRequest = () => {
@@ -62,16 +61,7 @@ const navigateToTimeoutRequest = () => {
 };
 
 watch(
-  () => store.selectedMessageId,
-  (newMessageId) => {
-    // Check if this node contains the selected message
-    isActive.value = newMessageId === props.update.MessageId;
-  },
-  { immediate: true }
-);
-
-watch(
-  [() => store.scrollToTimeout, () => shouldHighlightAndScroll.value, () => initiatingMessageRef.value !== null],
+  [() => store.scrollToTimeout, () => shouldBeActive.value, () => initiatingMessageRef.value !== null],
   ([scrollTimeout, shouldScroll, refExists]) => {
     if (scrollTimeout && shouldScroll && refExists && initiatingMessageRef.value) {
       initiatingMessageRef.value.scrollIntoView({
@@ -168,7 +158,7 @@ const hasStateChanges = computed(() => {
           :class="{
             'cell-inner': true,
             'cell-inner-side': true,
-            'cell-inner-side--active': isActive || (update.InitiatingMessage.IsSagaTimeoutMessage && update.MessageId === store.selectedMessageId),
+            'cell-inner-side--active': shouldBeActive || (update.InitiatingMessage.IsSagaTimeoutMessage && update.MessageId === store.selectedMessageId),
           }"
           :data-message-id="update.InitiatingMessage.IsSagaTimeoutMessage ? update.MessageId : ''"
         >
diff --git a/src/Frontend/src/stores/SagaDiagramStore.ts b/src/Frontend/src/stores/SagaDiagramStore.ts
index f0a40f587..6cf02209b 100644
--- a/src/Frontend/src/stores/SagaDiagramStore.ts
+++ b/src/Frontend/src/stores/SagaDiagramStore.ts
@@ -4,6 +4,7 @@ import { SagaHistory, SagaMessage } from "@/resources/SagaHistory";
 import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import Message from "@/resources/Message";
 import { parse } from "lossless-json";
+import { useMessageStore } from "@/stores/MessageStore";
 
 const StandardKeys = ["$type", "Id", "Originator", "OriginalMessageId"];
 export interface SagaMessageDataItem {
@@ -28,6 +29,20 @@ export const useSagaDiagramStore = defineStore("SagaDiagramStore", () => {
   const scrollToTimeout = ref(false);
   const MessageBodyEndpoint = "messages/{0}/body";
 
+  // Get message store to watch for changes
+  const messageStore = useMessageStore();
+
+  // Watch for message_id changes in the MessageStore and update selectedMessageId
+  watch(
+    () => messageStore.state.data.message_id,
+    (newMessageId) => {
+      if (newMessageId) {
+        setSelectedMessageId(newMessageId);
+      }
+    },
+    { immediate: true }
+  );
+
   // Watch the sagaId and fetch saga history when it changes
   watch(sagaId, async (newSagaId) => {
     if (newSagaId) {

From 056ed4b1f6c7adfa444b5bdc5ca724ab7039a602 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Wed, 7 May 2025 22:22:54 -0600
Subject: [PATCH 5/5] fixing warnings in tests

---
 src/Frontend/src/components/messages2/SagaDiagram.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
index 2e135af1b..0a0fe4d64 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
+++ b/src/Frontend/src/components/messages2/SagaDiagram.spec.ts
@@ -255,6 +255,7 @@ function rendercomponent({ initialState = {} }: { initialState?: { MessageStore?
       ],
       stubs: {
         CodeEditor: true,
+        CopyToClipboard: true,
       },
     },
   });