highlight on handlers

Author: PhilBastian

src/Frontend/src/components/messages/SequenceDiagram.vue

@@ -7,7 +7,7 @@ import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
 import { storeToRefs } from "pinia";
 
 const store = useSequenceDiagramStore();
-store.setConversationId("b4dac7d7-4571-4f26-aa32-b29c0030c95f");
+store.setConversationId("39907d51-12e5-4202-82c3-b2b30077ebd4");
 
 const { maxWidth, maxHeight } = storeToRefs(store);
 </script>

src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue

@@ -10,7 +10,7 @@ const Handler_Gap = 20;
 const Handler_Width = 14;
 
 const store = useSequenceDiagramStore();
-const { handlers, endpointCentrePoints } = storeToRefs(store);
+const { handlers, endpointCentrePoints, highlightId } = 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 === highlightId.value) return "var(--highlight-background)";
       return "var(--gray60)";
     })();
     const icon = (() => {
@@ -41,7 +42,8 @@ const handlerItems = computed(() => {
     })();
 
     return {
-      key: handler.id,
+      id: handler.id,
+      incomingId: handler.route?.name,
       left: (endpoint?.centre ?? 0) - Handler_Width / 2,
       right: (endpoint?.centre ?? 0) + Handler_Width / 2,
       y,
@@ -51,11 +53,12 @@ const handlerItems = computed(() => {
       iconSize,
       messageType: handler.name,
       messageTypeOffset: handler.direction === Direction.Right ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 20,
+      messageTypeHighlight: handler.route?.name === highlightId.value,
     };
   });
 
   store.setMaxHeight(nextY);
-  store.setHandlerLocations(result.map((handler) => ({ id: handler.key, left: handler.left, right: handler.right, y: handler.y, height: handler.height })));
+  store.setHandlerLocations(result.map((handler) => ({ id: handler.id, left: handler.left, right: handler.right, y: handler.y, height: handler.height })));
 
   return result;
 });
@@ -67,15 +70,28 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 
 <template>
   <g>
-    <g v-for="(handler, i) in handlerItems" :key="handler.key" :transform="`translate(${handler.left}, ${handler.y})`">
+    <g v-for="(handler, i) in handlerItems" :key="handler.id" :transform="`translate(${handler.left}, ${handler.y})`">
       <!--Handler Activation Box-->
-      <rect :width="Handler_Width" :height="handler.height" :fill="handler.fill" />
+      <rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
       <path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
       <!--Message Type and Icon-->
-      <g v-if="handler.messageType" :transform="`translate(${handler.messageTypeOffset}, 4)`" fill="var(--gray40)">
+      <g
+        v-if="handler.messageType"
+        :transform="`translate(${handler.messageTypeOffset}, 4)`"
+        class="clickable"
+        :fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
+        @mouseover="() => store.setHighlightId(handler.incomingId)"
+        @mouseleave="() => store.setHighlightId()"
+      >
         <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>
       </g>
     </g>
   </g>
 </template>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue

@@ -8,10 +8,9 @@ const Arrow_Head_Width = 4;
 const Message_Type_Margin = 4;
 
 const store = useSequenceDiagramStore();
-const { routes, handlerLocations } = storeToRefs(store);
+const { routes, handlerLocations, highlightId } = storeToRefs(store);
 
 const messageTypeRefs = ref<SVGTextElement[]>([]);
-const highlightId = ref<string | undefined>();
 
 const arrows = computed(() =>
   routes.value.map((route, index) => {
@@ -56,9 +55,6 @@ const arrows = computed(() =>
 function setMessageTypeRef(el: SVGTextElement, index: number) {
   if (el) messageTypeRefs.value[index] = el;
 }
-function setHighlightId(arrowId?: string) {
-  highlightId.value = arrowId;
-}
 </script>
 
 <template>
@@ -72,8 +68,8 @@ function setHighlightId(arrowId?: string) {
         class="clickable"
         :transform="`translate(${arrow.messageTypeOffset}, ${arrow.y - 7.5 - Message_Type_Margin})`"
         :fill="arrow.highlight ? 'var(--highlight)' : 'black'"
-        @mouseover="() => setHighlightId(arrow.id)"
-        @mouseleave="() => setHighlightId()"
+        @mouseover="() => store.setHighlightId(arrow.id)"
+        @mouseleave="() => store.setHighlightId()"
       >
         <rect v-if="arrow.highlight && arrow.messageTypeOffset" :width="arrow.highlightTextWidth + 19 + 4 + 4" :height="arrow.highlightTextHeight + 4 + 4" fill="var(--highlight-background)" />
         <svg :x="Message_Type_Margin" :y="Message_Type_Margin" width="15" height="15" viewBox="0 0 32 32">

src/Frontend/src/stores/SequenceDiagramStore.ts

@@ -22,7 +22,7 @@ export interface HandlerLocation {
 }
 
 export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () => {
-  const conversationId = ref("");
+  const conversationId = ref<string>();
 
   const endpoints = ref<Endpoint[]>([]);
   const handlers = ref<Handler[]>([]);
@@ -31,8 +31,10 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
   const maxWidth = ref(150);
   const maxHeight = ref(150);
   const handlerLocations = ref<HandlerLocation[]>([]);
+  const highlightId = ref<string>();
 
   watch(conversationId, async () => {
+    if (!conversationId.value) return;
     const response = await useFetchFromServiceControl(`conversations/${conversationId.value}`);
     if (response.status === 404) {
       return;
@@ -64,6 +66,10 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     handlerLocations.value = locations;
   }
 
+  function setHighlightId(id?: string) {
+    highlightId.value = id;
+  }
+
   return {
     setConversationId,
     endpoints,
@@ -73,10 +79,12 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
     maxWidth,
     maxHeight,
     handlerLocations,
+    highlightId,
     setMaxWidth,
     setMaxHeight,
     setEndpointCentrePoints,
     setHandlerLocations,
+    setHighlightId,
   };
 });