Sequence Diagram tooltips (#2326)

Author: PhilBastian

src/Frontend/src/components/messages/MessageView.vue

@@ -10,7 +10,6 @@ import TimeSince from "../TimeSince.vue";
 import moment from "moment";
 import ConfirmDialog from "../ConfirmDialog.vue";
 import FlowDiagram from "./FlowDiagram.vue";
-import SequenceDiagram from "./SequenceDiagram.vue";
 import EditRetryDialog from "../failedmessages/EditRetryDialog.vue";
 import routeLinks from "@/router/routeLinks";
 import { EditAndRetryConfig } from "@/resources/Configuration";
@@ -44,7 +43,6 @@ const showEditRetryModal = ref(false);
 
 const configuration = useConfiguration();
 const isMassTransitConnected = useIsMassTransitConnected();
-const showAllMessages = window.defaultConfig.showAllMessages;
 
 async function loadFailedMessage() {
   const response = await useFetchFromServiceControl(`errors/last/${id.value}`);
@@ -351,13 +349,11 @@ onUnmounted(() => {
                 <h5 :class="{ active: panel === 2 }" class="nav-item" @click.prevent="togglePanel(2)"><a href="#">Message body</a></h5>
                 <h5 :class="{ active: panel === 3 }" class="nav-item" @click.prevent="togglePanel(3)"><a href="#">Headers</a></h5>
                 <h5 v-if="!isMassTransitConnected" :class="{ active: panel === 4 }" class="nav-item" @click.prevent="togglePanel(4)"><a href="#">Flow Diagram</a></h5>
-                <h5 v-if="showAllMessages" :class="{ active: panel === 5 }" class="nav-item" @click.prevent="togglePanel(5)"><a href="#">Sequence Diagram</a></h5>
               </div>
               <StackTraceView v-if="panel === 1 && failedMessage.exception?.stack_trace" :message="failedMessage" />
               <BodyView v-if="panel === 2" :message="failedMessage" />
               <HeadersView v-if="panel === 3" :message="failedMessage" />
               <FlowDiagram v-if="panel === 4" :message="failedMessage" />
-              <SequenceDiagram v-if="showAllMessages && panel === 5" />
             </div>
           </div>
 

src/Frontend/src/components/messages2/FlowDiagram.vue

@@ -41,7 +41,7 @@ const nodeSpacingX = 300;
 const nodeSpacingY = 200;
 
 const store = useMessageStore();
-const { state } = storeToRefs(useMessageStore());
+const { state } = storeToRefs(store);
 
 async function getConversation(conversationId: string) {
   await store.loadConversation(conversationId);

src/Frontend/src/components/messages2/MessageView.vue

@@ -4,6 +4,7 @@ import { RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
 import FlowDiagram from "./FlowDiagram.vue";
+import SequenceDiagram from "./SequenceDiagram.vue";
 import routeLinks from "@/router/routeLinks";
 import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
 import BodyView from "@/components/messages2/BodyView.vue";
@@ -51,6 +52,10 @@ const tabs = computed(() => {
       text: "Flow Diagram",
       component: FlowDiagram,
     });
+    currentTabs.push({
+      text: "Sequence Diagram",
+      component: SequenceDiagram,
+    });
   }
 
   return currentTabs;

src/Frontend/src/components/messages/SequenceDiagram.vue renamed to src/Frontend/src/components/messages2/SequenceDiagram.vue

@@ -5,11 +5,15 @@ import Handlers from "./SequenceDiagram/HandlersComponent.vue";
 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";
 
 const store = useSequenceDiagramStore();
-store.setConversationId("39907d51-12e5-4202-82c3-b2b30077ebd4");
-
 const { maxWidth, maxHeight } = storeToRefs(store);
+
+useTooltips();
+
+onMounted(() => store.refreshConversation());
 </script>
 
 <template>

src/Frontend/src/components/messages2/SequenceDiagram/EndpointTooltip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
+
+defineProps<{ endpoint: Endpoint }>();
+</script>
+
+<template>
+  <div class="endpoint-tooltip">
+    <label>Name:</label>
+    <span>{{ endpoint.name }}</span>
+    <label>NSB Version:</label>
+    <span>{{ endpoint.version }}</span>
+    <label>Host:</label>
+    <span>{{ endpoint.host }}</span>
+  </div>
+</template>
+
+<style>
+.endpoint-tooltip {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: 0.5em;
+}
+
+.endpoint-tooltip label {
+  grid-column: 1;
+  justify-self: end;
+  font-weight: bold;
+  color: #b3b3b3;
+}
+
+.endpoint-tooltip span {
+  word-break: break-all;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue renamed to src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue

@@ -28,11 +28,11 @@ const Endpoint_Image_Width = 20;
 const store = useSequenceDiagramStore();
 const { startX, endpoints } = storeToRefs(store);
 
-const epRefs = ref<SVGTextElement[]>([]);
+const epTextRefs = ref<SVGTextElement[]>([]);
 const endpointItems = computed(() =>
   endpoints.value.map((x, index) => {
     const endpoint = x as EndpointWithLocation;
-    const el = epRefs.value[index];
+    const el = epTextRefs.value[index];
     if (el) {
       const bounds = el.getBBox();
       const previousEndpoint = index > 0 ? endpointItems.value[index - 1] : undefined;
@@ -69,17 +69,17 @@ watch(endpointItems, () => {
 });
 
 watch(startX, () => {
-  epRefs.value = [];
+  epTextRefs.value = [];
   endpoints.value.forEach((endpoint) => ((endpoint as EndpointWithLocation).surround = undefined));
 });
 
-function setEndpointRef(el: SVGTextElement, index: number) {
-  if (el) epRefs.value[index] = el;
+function setEndpointTextRef(el: SVGTextElement, index: number) {
+  if (el) epTextRefs.value[index] = el;
 }
 </script>
 
 <template>
-  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" transform="translate(0,15)">
+  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" transform="translate(0,15)" :ref="(el) => (endpoint.uiRef = el as SVGElement)">
     <rect
       v-if="endpoint.surround"
       :x="endpoint.surround.x"
@@ -93,7 +93,7 @@ function setEndpointRef(el: SVGTextElement, index: number) {
     ></rect>
     <g :transform="`translate(${(endpoint.x ?? Endpoint_Width / 2) - ((endpoint.textWidth ?? 0) + Endpoint_Image_Width) / 2}, 0)`">
       <path fill="var(--gray40)" d="M 0,0 M 18,18 M 0,2 v 14 h 14 v -4 h -6 v -6 h 6 v -4 h -14 M 9,7 v 4 h 9 v -4"></path>
-      <text :x="Endpoint_Image_Width" y="10" alignment-baseline="middle" text-anchor="start" :ref="(el) => setEndpointRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
+      <text :x="Endpoint_Image_Width" y="10" alignment-baseline="middle" text-anchor="start" :ref="(el) => setEndpointTextRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
     </g>
   </g>
 </template>

src/Frontend/src/components/messages2/SequenceDiagram/HandlerTooltip.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useFormatTime } from "@/composables/formatter";
+import { Handler } from "@/resources/SequenceDiagram/Handler";
+
+defineProps<{ handler: Handler }>();
+
+function formatTime(milliseconds: number) {
+  const time = useFormatTime(milliseconds);
+  return `${time.value} ${time.unit}`;
+}
+</script>
+
+<template>
+  <div v-if="handler.id === 'First'">Start of Conversation</div>
+  <div v-else class="handler-tooltip">
+    <div class="title">Processing of Message</div>
+    <div class="details">
+      <label>Processing Time:</label>
+      <span>{{ formatTime(handler.processingTime ?? 0) }}</span>
+      <label>Processing Of:</label>
+      <span>{{ handler.name }}</span>
+      <label v-if="handler.partOfSaga">Sagas Invoked:</label>
+      <span v-if="handler.partOfSaga">{{ handler.partOfSaga }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.handler-tooltip {
+  display: flex;
+  flex-direction: column;
+}
+
+.handler-tooltip .title {
+  font-weight: bold;
+}
+
+.handler-tooltip .details {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: 0.5em;
+}
+
+.handler-tooltip label {
+  grid-column: 1;
+  justify-self: end;
+  font-weight: bold;
+  color: #b3b3b3;
+}
+
+.handler-tooltip span {
+  word-break: break-all;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue renamed to src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue

@@ -43,16 +43,18 @@ const handlerItems = computed(() => {
 
     //determine which side of the handler to render the messageType on. If it's the left side (for a right arrow) then we apply a negative offset
     const messageTypeOffset = handler.direction === Direction.Right ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 20;
-    if (messageTypeOffset < 0) {
-      store.setStartX(-1 * messageTypeOffset);
+    const left = (endpoint?.centre ?? 0) - Handler_Width / 2;
+    const right = (endpoint?.centre ?? 0) + Handler_Width / 2;
+    if (left + messageTypeOffset < 0) {
+      store.setStartX(-1 * (left + messageTypeOffset) + 20);
     }
 
     return {
       id: handler.id,
       endpointName: handler.endpoint.name,
       incomingId: handler.route?.name,
-      left: (endpoint?.centre ?? 0) - Handler_Width / 2,
-      right: (endpoint?.centre ?? 0) + Handler_Width / 2,
+      left,
+      right,
       y,
       height,
       fill,
@@ -61,6 +63,7 @@ const handlerItems = computed(() => {
       messageType: handler.name,
       messageTypeOffset,
       messageTypeHighlight: handler.route?.name === highlightId.value,
+      setUIRef: (el: SVGElement) => (handler.uiRef = el),
     };
   });
 
@@ -76,10 +79,12 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 </script>
 
 <template>
-  <g v-for="(handler, i) in handlerItems" :key="handler.id" :transform="`translate(${handler.left}, ${handler.y})`">
+  <g v-for="(handler, i) in handlerItems" :key="`${handler.id}###${handler.endpointName}`" :transform="`translate(${handler.left}, ${handler.y})`">
     <!--Handler Activation Box-->
-    <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})`" />
+    <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()" />
+      <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"

src/Frontend/src/components/messages2/SequenceDiagram/RouteTooltip.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { RoutedMessage, RoutedMessageType } from "@/resources/SequenceDiagram/RoutedMessage";
+
+defineProps<{ routedMessage: RoutedMessage }>();
+</script>
+
+<template>
+  <div class="route-tooltip">
+    <div class="title">{{ RoutedMessageType[routedMessage.type] }}</div>
+    <div class="details">
+      <label>Message Type:</label>
+      <span>{{ routedMessage.name }}</span>
+      <label>Message Id:</label>
+      <span>{{ routedMessage.messageId }}</span>
+      <label>Sent From:</label>
+      <span>{{ `${routedMessage.sending.name}@${routedMessage.sending.host}` }}</span>
+      <label>Sent To:</label>
+      <span>{{ `${routedMessage.receiving.name}@${routedMessage.receiving.host}` }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.route-tooltip {
+  display: flex;
+  flex-direction: column;
+}
+
+.route-tooltip .title {
+  font-weight: bold;
+}
+
+.route-tooltip .details {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: 0.5em;
+}
+
+.route-tooltip label {
+  grid-column: 1;
+  justify-self: end;
+  font-weight: bold;
+  color: #b3b3b3;
+}
+
+.route-tooltip span {
+  word-break: break-all;
+}
+</style>

src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue renamed to src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue

@@ -36,7 +36,7 @@ const arrows = computed(() =>
     route.fromRoutedMessage.direction = direction;
 
     if (messageTypeOffset < 0) {
-      store.setStartX(-1 * messageTypeOffset);
+      store.setStartX(-1 * messageTypeOffset + 20);
     }
 
     return {
@@ -53,6 +53,7 @@ const arrows = computed(() =>
       highlight: highlightId.value === route.name,
       highlightTextWidth: messageTypeElementBounds?.width,
       highlightTextHeight: messageTypeElementBounds?.height,
+      setUIRef: (el: SVGElement) => (route.uiRef = el),
     };
   })
 );
@@ -78,11 +79,12 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
       </g>
       <!--Message Type and Icon-->
       <g
-        class="clickable"
+        class="clickable message-type"
         :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()"
+        :ref="(el) => arrow.setUIRef(el as SVGElement)"
       >
         <!--19 is width of MessageType icon, plus a gap-->
         <rect
@@ -113,4 +115,8 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 .clickable {
   cursor: pointer;
 }
+
+.message-type text::selection {
+  fill: white;
+}
 </style>