From bfc53d59b75cad037c1b37aeeaf0ad9febeb0e72 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 11 Apr 2025 09:49:01 +0800
Subject: [PATCH 1/7] selection of messages and navigation to selection

---
 .../SequenceDiagram/HandlersComponent.vue     | 40 ++++++++++++++--
 .../SequenceDiagram/RoutesComponent.vue       | 46 ++++++++++++++++---
 .../src/stores/SequenceDiagramStore.ts        | 21 +++++++--
 3 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index b7a23eb27..630f799e6 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -10,7 +10,7 @@ const Handler_Gap = 20;
 const Handler_Width = 14;
 
 const store = useSequenceDiagramStore();
-const { handlers, endpointCentrePoints, highlightId } = storeToRefs(store);
+const { handlers, endpointCentrePoints, highlightId, selectedId } = storeToRefs(store);
 
 const messageTypeRefs = ref<SVGTextElement[]>([]);
 
@@ -27,6 +27,7 @@ const handlerItems = computed(() => {
     const fill = (() => {
       if (handler.id === "First") return "black";
       if (handler.state === HandlerState.Fail) return "var(--error)";
+      if (handler.route?.name === selectedId.value) return "var(--highlight)";
       if (handler.route?.name === highlightId.value) return "var(--highlight-background)";
       return "var(--gray60)";
     })();
@@ -51,6 +52,8 @@ const handlerItems = computed(() => {
 
     return {
       id: handler.id,
+      messageId: { id: handler.selectedMessage?.message_id, uniqueId: handler.selectedMessage?.id },
+      isError: handler.state === HandlerState.Fail,
       endpointName: handler.endpoint.name,
       incomingId: handler.route?.name,
       left,
@@ -63,6 +66,7 @@ const handlerItems = computed(() => {
       messageType: handler.name,
       messageTypeOffset,
       messageTypeHighlight: handler.route?.name === highlightId.value,
+      messageTypeSelected: handler.route?.name === selectedId.value,
       setUIRef: (el: SVGElement) => (handler.uiRef = el),
     };
   });
@@ -81,18 +85,32 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 <template>
   <g v-for="(handler, i) in handlerItems" :key="`${handler.id}###${handler.endpointName}`" :transform="`translate(${handler.left}, ${handler.y})`">
     <!--Handler Activation Box-->
-    <g :ref="(el) => handler.setUIRef(el as SVGElement)">
-      <rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
+    <g :ref="(el) => handler.setUIRef(el as SVGElement)" class="activation-box">
+      <rect
+        :width="Handler_Width"
+        :height="handler.height"
+        :class="{
+          clickable: handler.incomingId && !handler.messageTypeSelected,
+        }"
+        :fill="handler.fill"
+        @mouseover="() => store.setHighlightId(handler.incomingId)"
+        @mouseleave="() => store.setHighlightId()"
+        @click="handler.incomingId && !handler.messageTypeSelected && store.navigateTo(handler.messageId.uniqueId, handler.messageId.id, handler.isError)"
+      />
       <path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
     </g>
     <!--Message Type and Icon-->
     <g
       v-if="handler.messageType"
       :transform="`translate(${handler.messageTypeOffset}, 4)`"
-      class="clickable"
-      :fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
+      :class="{
+        clickable: !handler.messageTypeSelected,
+        'message-type': true,
+        highlight: handler.messageTypeHighlight || handler.messageTypeSelected,
+      }"
       @mouseover="() => store.setHighlightId(handler.incomingId)"
       @mouseleave="() => store.setHighlightId()"
+      @click="handler.incomingId && !handler.messageTypeSelected && store.navigateTo(handler.messageId.uniqueId, handler.messageId.id, handler.isError)"
     >
       <path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
       <text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
@@ -104,4 +122,16 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 .clickable {
   cursor: pointer;
 }
+
+.activation-box:focus {
+  outline: none;
+}
+
+.message-type {
+  fill: var(--gray40);
+}
+
+.message-type.highlight {
+  fill: var(--highlight);
+}
 </style>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
index 37178a071..ca1284683 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
@@ -3,12 +3,13 @@ import { Direction, RoutedMessageType } from "@/resources/SequenceDiagram/Routed
 import { computed, ref } from "vue";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
+import { HandlerState } from "@/resources/SequenceDiagram/Handler";
 
 const Arrow_Head_Width = 10;
 const Message_Type_Margin = 4;
 
 const store = useSequenceDiagramStore();
-const { routes, handlerLocations, highlightId } = storeToRefs(store);
+const { selectedId, routes, handlerLocations, highlightId } = storeToRefs(store);
 
 const messageTypeRefs = ref<SVGTextElement[]>([]);
 
@@ -41,6 +42,9 @@ const arrows = computed(() =>
 
     return {
       id: route.name,
+      selected: route.name === selectedId.value,
+      messageId: { uniqueId: route.fromRoutedMessage.selectedMessage.id, id: route.fromRoutedMessage.selectedMessage.message_id },
+      isHandlerError: route.processingHandler?.state === HandlerState.Fail,
       fromX,
       y,
       direction,
@@ -73,25 +77,30 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
         <path v-if="arrow.direction === Direction.Left" :d="`M${arrow.toHandlerCentre + 1} ${arrow.y} l10,-7.5 0,15z`" fill="black" />
       </g>
       <!--Highlight Arrow-->
-      <g v-if="arrow.highlight" :transform="`translate(${arrow.toHandlerCentre},${arrow.y})`" stroke="var(--highlight)" fill="var(--highlight)">
+      <g v-if="arrow.highlight || arrow.selected" :transform="`translate(${arrow.toHandlerCentre},${arrow.y})`" stroke="var(--highlight)" fill="var(--highlight)">
         <path :d="`M0 0 v${arrow.height - 6}`" stroke-width="2" />
         <path :d="`M0 ${arrow.height} l-3,-6 6,0z`" />
       </g>
       <!--Message Type and Icon-->
       <g
-        class="clickable message-type"
+        :class="{
+          clickable: !arrow.selected,
+          'message-type': true,
+          highlight: arrow.highlight,
+          selected: arrow.selected,
+        }"
         :transform="`translate(${arrow.messageTypeOffset}, ${arrow.y - 7.5 - Message_Type_Margin})`"
-        :fill="arrow.highlight ? 'var(--highlight)' : 'black'"
         @mouseover="() => store.setHighlightId(arrow.id)"
         @mouseleave="() => store.setHighlightId()"
+        @click="!arrow.selected && store.navigateTo(arrow.messageId.uniqueId, arrow.messageId.id, arrow.isHandlerError)"
         :ref="(el) => arrow.setUIRef(el as SVGElement)"
       >
         <!--19 is width of MessageType icon, plus a gap-->
         <rect
-          v-if="arrow.highlight && arrow.messageTypeOffset"
+          v-if="(arrow.highlight || arrow.selected) && arrow.messageTypeOffset"
           :width="arrow.highlightTextWidth + 19 + Message_Type_Margin + Message_Type_Margin"
           :height="arrow.highlightTextHeight + Message_Type_Margin + Message_Type_Margin"
-          fill="var(--highlight-background)"
+          class="border"
         />
         <svg :x="Message_Type_Margin" :y="Message_Type_Margin" width="15" height="15" viewBox="0 0 32 32">
           <path
@@ -116,7 +125,32 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
   cursor: pointer;
 }
 
+.message-type {
+  fill: black;
+  outline: none;
+}
+
+.message-type.selected {
+  fill: white;
+}
+
+.message-type .border {
+  fill: var(--highlight-background);
+}
+
+.message-type.selected .border {
+  fill: var(--highlight);
+}
+
+.message-type:not(.selected).highlight {
+  fill: var(--highlight);
+}
+
 .message-type text::selection {
   fill: white;
 }
+
+.message-type.selected text::selection {
+  background-color: black;
+}
 </style>
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
index 456b155b3..028a522ba 100644
--- a/src/Frontend/src/stores/SequenceDiagramStore.ts
+++ b/src/Frontend/src/stores/SequenceDiagramStore.ts
@@ -1,10 +1,12 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
-import { ref, watch } from "vue";
-import { ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
+import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+import { friendlyTypeName, ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
 import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
 import { Handler } from "@/resources/SequenceDiagram/Handler";
 import { MessageProcessingRoute } from "@/resources/SequenceDiagram/RoutedMessage";
 import { useMessageStore } from "./MessageStore";
+import { useRouter } from "vue-router";
+import routeLinks from "@/router/routeLinks";
 
 export interface EndpointCentrePoint {
   name: string;
@@ -25,6 +27,8 @@ export const Endpoint_Width = 260;
 
 export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () => {
   const messageStore = useMessageStore();
+  const { state } = storeToRefs(messageStore);
+  const router = useRouter();
 
   const startX = ref(Endpoint_Width / 2);
   const endpoints = ref<Endpoint[]>([]);
@@ -36,6 +40,8 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
   const handlerLocations = ref<HandlerLocation[]>([]);
   const highlightId = ref<string>();
 
+  const selectedId = computed(() => `${friendlyTypeName(state.value.data.message_type ?? "")}(${state.value.data.id})`);
+
   watch(
     () => messageStore.conversationData.data,
     (conversationData) => {
@@ -80,6 +86,13 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     if (messageStore.state.data.conversation_id) messageStore.loadConversation(messageStore.state.data.conversation_id);
   }
 
+  function navigateTo(messageUniqueId: string | undefined, messageId: string | undefined, isError: boolean) {
+    if (messageUniqueId == null) return;
+    if (!isError && messageId == null) return;
+
+    router.push({ path: isError ? routeLinks.messages.failedMessage.link(messageUniqueId) : routeLinks.messages.successMessage.link(messageId!, messageUniqueId) });
+  }
+
   return {
     startX,
     endpoints,
@@ -90,6 +103,7 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     maxHeight,
     handlerLocations,
     highlightId,
+    selectedId,
     setStartX,
     setMaxWidth,
     setMaxHeight,
@@ -97,6 +111,7 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     setHandlerLocations,
     setHighlightId,
     refreshConversation,
+    navigateTo,
   };
 });
 

From 14769a365ce3a078440b9e0f466d49b700c3d52d Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 11 Apr 2025 10:53:46 +0800
Subject: [PATCH 2/7] fix rect size error

---
 .../components/messages2/SequenceDiagram/RoutesComponent.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
index ca1284683..f5b608f0f 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue
@@ -98,8 +98,8 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
         <!--19 is width of MessageType icon, plus a gap-->
         <rect
           v-if="(arrow.highlight || arrow.selected) && arrow.messageTypeOffset"
-          :width="arrow.highlightTextWidth + 19 + Message_Type_Margin + Message_Type_Margin"
-          :height="arrow.highlightTextHeight + Message_Type_Margin + Message_Type_Margin"
+          :width="(arrow.highlightTextWidth ?? 0) + 19 + Message_Type_Margin + Message_Type_Margin"
+          :height="(arrow.highlightTextHeight ?? 0) + Message_Type_Margin + Message_Type_Margin"
           class="border"
         />
         <svg :x="Message_Type_Margin" :y="Message_Type_Margin" width="15" height="15" viewBox="0 0 32 32">

From 6cb92b732544876c02cbfc73d92d8e56570bf42c Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 11 Apr 2025 11:07:58 +0800
Subject: [PATCH 3/7] keep endpoints visible during scroll

---
 src/Frontend/src/components/messages2/SequenceDiagram.vue  | 7 ++++---
 .../messages2/SequenceDiagram/EndpointsComponent.vue       | 6 +++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram.vue b/src/Frontend/src/components/messages2/SequenceDiagram.vue
index 62a508b4a..cc842c752 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram.vue
@@ -6,10 +6,11 @@ import Routes from "./SequenceDiagram/RoutesComponent.vue";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 import useTooltips from "./SequenceDiagram/tooltipOverlay.ts";
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 
 const store = useSequenceDiagramStore();
 const { maxWidth, maxHeight } = storeToRefs(store);
+const endpointYOffset = ref(0);
 
 useTooltips();
 
@@ -17,12 +18,12 @@ onMounted(() => store.refreshConversation());
 </script>
 
 <template>
-  <div class="outer">
+  <div class="outer" @scroll="(ev) => (endpointYOffset = (ev.target as Element).scrollTop)">
     <svg class="sequence-diagram" :width="`max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)`" :height="maxHeight + 20">
-      <Endpoints />
       <Timeline />
       <Handlers />
       <Routes />
+      <Endpoints :yOffset="endpointYOffset" />
     </svg>
   </div>
 </template>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
index df2890cd7..ded1ec7b2 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
@@ -25,6 +25,10 @@ interface EndpointSurround {
 const Endpoint_Gap = 30;
 const Endpoint_Image_Width = 20;
 
+defineProps<{
+  yOffset: number;
+}>();
+
 const store = useSequenceDiagramStore();
 const { startX, endpoints } = storeToRefs(store);
 
@@ -79,7 +83,7 @@ function setEndpointTextRef(el: SVGTextElement, index: number) {
 </script>
 
 <template>
-  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" transform="translate(0,15)" :ref="(el) => (endpoint.uiRef = el as SVGElement)">
+  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" :transform="`translate(0,${yOffset + 15})`" :ref="(el) => (endpoint.uiRef = el as SVGElement)">
     <rect
       v-if="endpoint.surround"
       :x="endpoint.surround.x"

From 866bee0e682623cf00459b2c36a0062dd8e82666 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 11 Apr 2025 13:42:08 +0800
Subject: [PATCH 4/7] fix sequence model creator when first message is not
 included

---
 src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts b/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts
index db8313fc4..3ce04dad6 100644
--- a/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts
+++ b/src/Frontend/src/resources/SequenceDiagram/SequenceModel.ts
@@ -72,10 +72,10 @@ export class ModelCreator implements ConversationModel {
       sendingHandler.addOutMessage(routedMessage);
     }
 
-    const start = firstOrderHandlers.find((h) => h.id === ConversationStartHandlerName);
+    const start = firstOrderHandlers.filter((h) => h.id === ConversationStartHandlerName);
     const orderByHandledAt = firstOrderHandlers.filter((h) => h.id !== ConversationStartHandlerName).sort((a, b) => (a.handledAt?.getTime() ?? 0) - (b.handledAt?.getTime() ?? 0));
 
-    this.#handlers = [start!, ...orderByHandledAt];
+    this.#handlers = [...start, ...orderByHandledAt];
   }
 
   get endpoints(): Endpoint[] {

From 04127fc4ce0de8cf173208af15301b2a1cd3b82a Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Fri, 11 Apr 2025 15:11:26 +0800
Subject: [PATCH 5/7] handle handler state not being known due to missing
 incoming message

---
 .../messages2/SequenceDiagram/HandlersComponent.vue           | 4 ++--
 .../components/messages2/SequenceDiagram/tooltipOverlay.ts    | 3 ++-
 src/Frontend/src/resources/SequenceDiagram/Handler.ts         | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 630f799e6..7f1c3a0ec 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -27,8 +27,8 @@ const handlerItems = computed(() => {
     const fill = (() => {
       if (handler.id === "First") return "black";
       if (handler.state === HandlerState.Fail) return "var(--error)";
-      if (handler.route?.name === selectedId.value) return "var(--highlight)";
-      if (handler.route?.name === highlightId.value) return "var(--highlight-background)";
+      if (handler.route && handler.route.name === selectedId.value) return "var(--highlight)";
+      if (handler.route && handler.route.name === highlightId.value) return "var(--highlight-background)";
       return "var(--gray60)";
     })();
     const icon = (() => {
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts b/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
index f6ec4778b..b72e5f6f5 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/tooltipOverlay.ts
@@ -5,6 +5,7 @@ import { useTippy } from "vue-tippy";
 import EndpointTooltip from "./EndpointTooltip.vue";
 import HandlerTooltip from "./HandlerTooltip.vue";
 import RouteTooltip from "./RouteTooltip.vue";
+import { HandlerState } from "@/resources/SequenceDiagram/Handler";
 
 export default function useTooltips() {
   const store = useSequenceDiagramStore();
@@ -30,7 +31,7 @@ export default function useTooltips() {
     () => handlers.value.map((handler) => handler.uiRef),
     () =>
       handlers.value
-        .filter((handler) => handler.uiRef)
+        .filter((handler) => handler.uiRef && handler.state !== HandlerState.Unknown)
         .forEach((handler) =>
           useTippy(handler.uiRef, {
             interactive: true,
diff --git a/src/Frontend/src/resources/SequenceDiagram/Handler.ts b/src/Frontend/src/resources/SequenceDiagram/Handler.ts
index 03848ca82..d63a39a72 100644
--- a/src/Frontend/src/resources/SequenceDiagram/Handler.ts
+++ b/src/Frontend/src/resources/SequenceDiagram/Handler.ts
@@ -27,6 +27,7 @@ export interface Handler {
 export enum HandlerState {
   Fail,
   Success,
+  Unknown,
 }
 
 export const ConversationStartHandlerName = "First";
@@ -85,7 +86,7 @@ class HandlerItem implements Handler {
   name?: string;
   partOfSaga?: string;
   inMessage?: RoutedMessage;
-  state: HandlerState = HandlerState.Fail;
+  state: HandlerState = HandlerState.Unknown;
   processedAt?: Date;
   processingTime?: number;
   route?: MessageProcessingRoute;

From e5ab10848457f40f810032c48e09b61c33ce3be3 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 14 Apr 2025 11:47:19 +0800
Subject: [PATCH 6/7] switch to using full type name for internal
 identification of handlers/routes

---
 .../components/messages2/SequenceDiagram/HandlerTooltip.vue   | 2 +-
 .../messages2/SequenceDiagram/HandlersComponent.vue           | 2 +-
 src/Frontend/src/resources/SequenceDiagram/Handler.ts         | 4 +++-
 src/Frontend/src/stores/SequenceDiagramStore.ts               | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
index cdcb230fa..0f1d52578 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue
@@ -18,7 +18,7 @@ function formatTime(milliseconds: number) {
       <label>Processing Time:</label>
       <span>{{ formatTime(handler.processingTime ?? 0) }}</span>
       <label>Processing Of:</label>
-      <span>{{ handler.name }}</span>
+      <span>{{ handler.friendlyName }}</span>
       <label v-if="handler.partOfSaga">Sagas Invoked:</label>
       <span v-if="handler.partOfSaga">{{ handler.partOfSaga }}</span>
     </div>
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 7f1c3a0ec..3ea60e6eb 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -63,7 +63,7 @@ const handlerItems = computed(() => {
       fill,
       icon,
       iconSize,
-      messageType: handler.name,
+      messageType: handler.friendlyName,
       messageTypeOffset,
       messageTypeHighlight: handler.route?.name === highlightId.value,
       messageTypeSelected: handler.route?.name === selectedId.value,
diff --git a/src/Frontend/src/resources/SequenceDiagram/Handler.ts b/src/Frontend/src/resources/SequenceDiagram/Handler.ts
index d63a39a72..a7bd3a068 100644
--- a/src/Frontend/src/resources/SequenceDiagram/Handler.ts
+++ b/src/Frontend/src/resources/SequenceDiagram/Handler.ts
@@ -7,6 +7,7 @@ import { friendlyTypeName } from "./SequenceModel";
 export interface Handler {
   readonly id: string;
   name?: string;
+  friendlyName?: string;
   readonly endpoint: Endpoint;
   readonly isPartOfSaga: boolean;
   partOfSaga?: string;
@@ -61,7 +62,8 @@ export function updateProcessingHandler(handler: Handler, message: Message) {
   //TODO: extract logic since it's also currently used in AuditList
   const [hh, mm, ss] = message.processing_time.split(":");
   handler.processingTime = ((parseInt(hh) * 60 + parseInt(mm)) * 60 + parseFloat(ss)) * 1000;
-  handler.name = friendlyTypeName(message.message_type);
+  handler.name = message.message_type;
+  handler.friendlyName = friendlyTypeName(message.message_type);
 
   if ((message.invoked_sagas?.length ?? 0) > 0) {
     handler.partOfSaga = message.invoked_sagas!.map((saga) => friendlyTypeName(saga.saga_type)).join(", ");
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
index 028a522ba..72e6f2634 100644
--- a/src/Frontend/src/stores/SequenceDiagramStore.ts
+++ b/src/Frontend/src/stores/SequenceDiagramStore.ts
@@ -1,6 +1,6 @@
 import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
-import { friendlyTypeName, ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
+import { ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
 import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
 import { Handler } from "@/resources/SequenceDiagram/Handler";
 import { MessageProcessingRoute } from "@/resources/SequenceDiagram/RoutedMessage";
@@ -40,7 +40,7 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
   const handlerLocations = ref<HandlerLocation[]>([]);
   const highlightId = ref<string>();
 
-  const selectedId = computed(() => `${friendlyTypeName(state.value.data.message_type ?? "")}(${state.value.data.id})`);
+  const selectedId = computed(() => `${state.value.data.message_type ?? ""}(${state.value.data.id})`);
 
   watch(
     () => messageStore.conversationData.data,

From fb5e15d2ed41ad9b11d1d01449cf37fe686b1739 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 14 Apr 2025 13:49:17 +0800
Subject: [PATCH 7/7] scroll to selected element on tab load/activate

---
 .../SequenceDiagram/HandlersComponent.vue     | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 3ea60e6eb..402020585 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { HandlerState } from "@/resources/SequenceDiagram/Handler";
-import { computed, ref } from "vue";
+import { computed, onActivated, ref, watch } from "vue";
 import { Direction } from "@/resources/SequenceDiagram/RoutedMessage";
 import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
@@ -13,6 +13,14 @@ const store = useSequenceDiagramStore();
 const { handlers, endpointCentrePoints, highlightId, selectedId } = storeToRefs(store);
 
 const messageTypeRefs = ref<SVGTextElement[]>([]);
+const hasMadeVisible = ref(false);
+const selectedElement = ref<SVGElement>();
+//reset values to allow scroll to element on switching back to this tab
+onActivated(() => {
+  hasMadeVisible.value = false;
+  if (selectedElement.value) scrollToIfSelected(selectedElement.value, selectedId.value);
+});
+watch(selectedId, () => (selectedElement.value = undefined));
 
 const handlerItems = computed(() => {
   let nextY = 0;
@@ -80,10 +88,19 @@ const handlerItems = computed(() => {
 function setMessageTypeRef(el: SVGTextElement, index: number) {
   if (el) messageTypeRefs.value[index] = el;
 }
+
+function scrollToIfSelected(el: SVGElement, handlerId: string | undefined) {
+  if (!hasMadeVisible.value && el && handlerId === selectedId.value) {
+    hasMadeVisible.value = true;
+    selectedElement.value = el;
+    //can't be done immediately since the sequence diagram hasn't completed layout yet
+    setTimeout(() => selectedElement.value!.scrollIntoView(false), 30);
+  }
+}
 </script>
 
 <template>
-  <g v-for="(handler, i) in handlerItems" :key="`${handler.id}###${handler.endpointName}`" :transform="`translate(${handler.left}, ${handler.y})`">
+  <g v-for="(handler, i) in handlerItems" :key="`${handler.id}###${handler.endpointName}`" :ref="(el) => scrollToIfSelected(el as SVGElement, handler.incomingId)" :transform="`translate(${handler.left}, ${handler.y})`">
     <!--Handler Activation Box-->
     <g :ref="(el) => handler.setUIRef(el as SVGElement)" class="activation-box">
       <rect