switch to using full type name for internal identification of handlers/routes

Author: PhilBastian

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>

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,

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(", ");

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,