From 66853892752b42cd2734a2a740e37bf45ac93f33 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 9 Apr 2025 13:58:37 +1000
Subject: [PATCH 1/4] Improvements to Flow diagram

---
 src/Frontend/package-lock.json                | 14 ++-
 src/Frontend/package.json                     |  1 +
 src/Frontend/src/assets/endpoint.svg          |  8 +-
 src/Frontend/src/components/TimeSince.vue     | 14 ++-
 .../components/failedmessages/MessageList.vue |  4 +-
 .../components/heartbeats/LastHeartbeat.vue   |  2 +-
 .../src/components/messages/MessageView.vue   |  4 +-
 .../src/components/messages2/FlowDiagram.vue  | 99 ++++++++++++-------
 .../src/components/messages2/MessageView.vue  |  4 +-
 9 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index 31406d620..7e66459fd 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -17,6 +17,7 @@
         "bootstrap": "^5.3.5",
         "bootstrap-icons": "^1.11.3",
         "codemirror": "^6.0.1",
+        "hex-to-css-filter": "^6.0.0",
         "lodash.debounce": "^4.0.8",
         "lossless-json": "^4.0.2",
         "memoize-one": "^6.0.0",
@@ -4560,6 +4561,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hex-to-css-filter": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hex-to-css-filter/-/hex-to-css-filter-6.0.0.tgz",
+      "integrity": "sha512-nQMSn+lEF2C1ddyMVBIyIPWRnaH0ZwFi2dcTtAop6cUyY0AbkA6uI/evpkvEHMD9G9DlHf8xraMJIIJ74S+MKA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=6.10.2"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -6898,7 +6911,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index 3ea860e86..c558c45ed 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -26,6 +26,7 @@
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "hex-to-css-filter": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",
diff --git a/src/Frontend/src/assets/endpoint.svg b/src/Frontend/src/assets/endpoint.svg
index 3769d43c6..6e23ac345 100644
--- a/src/Frontend/src/assets/endpoint.svg
+++ b/src/Frontend/src/assets/endpoint.svg
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="100%" height="100%" viewBox="0 0 15 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <g transform="matrix(1,0,0,1,-0,-1)">
+    <g transform="matrix(-1,0,0,-1,15,13)">
         <g id="endpoint" transform="matrix(-0.777778,2.50152e-16,-2.50152e-16,-0.777778,332.889,66.8889)">
-            <path d="M424.129,84.652L424.11,80.864L417.632,80.88L417.728,73.087L424.079,73.103L424.091,69.328L410,69.27L409.945,84.711L424.129,84.652Z" style="fill:rgb(146,158,158);fill-rule:nonzero;"/>
+            <path d="M424.129,84.652L424.11,80.864L417.632,80.88L417.728,73.087L424.079,73.103L424.091,69.328L410,69.27L409.945,84.711L424.129,84.652Z" fill="currentColor" style="fill-rule:nonzero;"/>
             <g transform="matrix(1,-8.74748e-18,-1.16633e-17,1.28571,1.68478e-13,-22)">
-                <rect x="419" y="75" width="9" height="4" style="fill:rgb(146,158,158);fill-rule:nonzero;"/>
+                <rect x="419" y="75" width="9" height="4" fill="currentColor" style="fill-rule:nonzero;"/>
             </g>
         </g>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/Frontend/src/components/TimeSince.vue b/src/Frontend/src/components/TimeSince.vue
index 85583ddd4..c3faf2a37 100644
--- a/src/Frontend/src/components/TimeSince.vue
+++ b/src/Frontend/src/components/TimeSince.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
+import { Tippy } from "vue-tippy";
 
 const emptyDate = "0001-01-01T00:00:00";
 
@@ -8,17 +9,17 @@ const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?
 
 let interval: number | undefined = undefined;
 
-const title = ref(),
+const title = ref<string[]>([]),
   text = ref();
 
 function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
+    title.value = props.titleValue ? [props.titleValue] : [`${m.local().format("LLLL")} (local)`, `${m.utc().format("LLLL")} (UTC)`];
   } else {
     text.value = props.defaultTextOnFailure;
-    title.value = props.titleValue ?? props.defaultTextOnFailure;
+    title.value = [props.titleValue ?? props.defaultTextOnFailure];
   }
 }
 
@@ -34,5 +35,10 @@ onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>
-  <span :title="title">{{ text }}</span>
+  <Tippy>
+    <template #content>
+      <div v-for="row in title" :key="row">{{ row }}</div>
+    </template>
+    <span>{{ text }}</span>
+  </Tippy>
 </template>
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.vue
index d01bc4a50..216559345 100644
--- a/src/Frontend/src/components/failedmessages/MessageList.vue
+++ b/src/Frontend/src/components/failedmessages/MessageList.vue
@@ -4,6 +4,7 @@ import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
 import { FailedMessageStatus, ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { hexToCSSFilter } from "hex-to-css-filter";
 
 export interface IMessageList {
   getSelectedMessages(): ExtendedFailedMessage[];
@@ -89,6 +90,7 @@ defineExpose<IMessageList>({
   isAnythingDisplayed,
   numberDisplayed,
 });
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -122,7 +124,7 @@ defineExpose<IMessageList>({
                 <span v-if="message.edited" :title="'Message was edited'" class="label sidebar-label label-info metadata-label">Edited</span>
 
                 <span class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :dateUtc="message.time_of_failure"></time-since></span>
-                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ message.receiving_endpoint.name }}</span>
+                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ message.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ message.receiving_endpoint.host }}</span>
                 <span class="metadata" v-if="message.redirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ message.redirect }}</span>
                 <!-- for deleted messages-->
diff --git a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
index bc60b02a0..f34ff30a4 100644
--- a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
+++ b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
@@ -13,7 +13,7 @@ defineProps<{ date?: string; tooltipTarget: string }>();
         <p>No heartbeat data received for this {{ tooltipTarget }}.</p>
         <p>Have you installed and configured the <a target="_blank" href="https://docs.particular.net/monitoring/heartbeats/install-plugin">heartbeats plugin</a> for this {{ tooltipTarget }}?</p>
       </template>
-      <span title="Last Heartbeat">No data available</span>
+      <span>No data available</span>
     </tippy>
   </p>
 </template>
diff --git a/src/Frontend/src/components/messages/MessageView.vue b/src/Frontend/src/components/messages/MessageView.vue
index 786b428fe..c0a4f66d9 100644
--- a/src/Frontend/src/components/messages/MessageView.vue
+++ b/src/Frontend/src/components/messages/MessageView.vue
@@ -24,6 +24,7 @@ import HeadersView from "@/components/messages/HeadersView.vue";
 import StackTraceView from "@/components/messages/StacktraceView.vue";
 import { stringify, parse } from "lossless-json";
 import xmlFormat from "xml-formatter";
+import { hexToCSSFilter } from "hex-to-css-filter";
 
 let refreshInterval: number | undefined;
 let pollingFaster = false;
@@ -278,6 +279,7 @@ onMounted(async () => {
 onUnmounted(() => {
   stopRefreshInterval();
 });
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -315,7 +317,7 @@ onUnmounted(() => {
                   <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink>
                 </span>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
-                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
+                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ failedMessage.receiving_endpoint.host }}</span>
                 <span v-if="failedMessage.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ failedMessage.redirect }}</span>
               </div>
diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram.vue
index e7df88228..cb6f68642 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { type DefaultEdge, MarkerType, VueFlow, type Styles, type Node } from "@vue-flow/core";
+import { type DefaultEdge, MarkerType, type Node, type Styles, VueFlow } from "@vue-flow/core";
 import TimeSince from "../TimeSince.vue";
 import routeLinks from "@/router/routeLinks";
-import Message from "@/resources/Message";
+import Message, { MessageStatus } from "@/resources/Message";
 import { NServiceBusHeaders } from "@/resources/Header";
-import { Controls } from "@vue-flow/controls";
+import { ControlButton, Controls } from "@vue-flow/controls";
 import { useMessageStore } from "@/stores/MessageStore";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import { storeToRefs } from "pinia";
+import EndpointDetails from "@/resources/EndpointDetails.ts";
+import { hexToCSSFilter } from "hex-to-css-filter";
+import TextEllipses from "@/components/TextEllipses.vue";
 
 enum MessageType {
   Event = "Event message",
@@ -20,8 +23,8 @@ interface MappedMessage {
   nodeName: string;
   id: string;
   messageId: string;
-  sendingEndpoint: string;
-  receivingEndpoint: string;
+  sendingEndpoint: EndpointDetails;
+  receivingEndpoint: EndpointDetails;
   parentId: string;
   parentEndpoint: string;
   type: MessageType;
@@ -74,15 +77,12 @@ function mapMessage(message: Message): MappedMessage {
     nodeName: message.message_type,
     id: message.id,
     messageId: message.message_id,
-    sendingEndpoint: message.sending_endpoint?.name,
-    receivingEndpoint: message.receiving_endpoint?.name,
+    sendingEndpoint: message.sending_endpoint,
+    receivingEndpoint: message.receiving_endpoint,
     parentId,
     parentEndpoint,
     type,
-    isError:
-      message.headers.findIndex(function (x) {
-        return x.key === NServiceBusHeaders.ExceptionInfoExceptionType;
-      }) > -1,
+    isError: message.status !== MessageStatus.Successful && message.status !== MessageStatus.ResolvedSuccessfully,
     sagaName,
     link: {
       name: `Link ${message.id}`,
@@ -105,8 +105,8 @@ function constructNodes(mappedMessages: MappedMessage[]): Node[] {
         const previousLevel = level > 0 ? messagesByLevel[level - 1] : null;
         return group.sort(
           (a, b) =>
-            (previousLevel?.findIndex((plMessage) => a.parentId === plMessage.messageId && a.parentEndpoint === plMessage.receivingEndpoint) ?? 1) -
-            (previousLevel?.findIndex((plMessage) => b.parentId === plMessage.messageId && b.parentEndpoint === plMessage.receivingEndpoint) ?? 1)
+            (previousLevel?.findIndex((plMessage) => a.parentId === plMessage.messageId && a.parentEndpoint === plMessage.receivingEndpoint.name) ?? 1) -
+            (previousLevel?.findIndex((plMessage) => b.parentId === plMessage.messageId && b.parentEndpoint === plMessage.receivingEndpoint.name) ?? 1)
         );
       })
       //flatten to actual flow diagram nodes, with positioning based on parent node/level
@@ -115,7 +115,7 @@ function constructNodes(mappedMessages: MappedMessage[]): Node[] {
         return group.reduce(
           ({ result, currentWidth, previousParent }, message) => {
             //position on current level needs to be based on parent Node, so see if one exists
-            const parentMessage = previousLevel?.find((plMessage) => message.parentId === plMessage.messageId && message.parentEndpoint === plMessage.receivingEndpoint) ?? null;
+            const parentMessage = previousLevel?.find((plMessage) => message.parentId === plMessage.messageId && message.parentEndpoint === plMessage.receivingEndpoint.name) ?? null;
             //if the current parent node is the same as the previous parent node, then the current position needs to be to the right of siblings
             const currentParentWidth = previousParent === parentMessage ? currentWidth : 0;
             const startX = parentMessage == null ? 0 : parentMessage.XPos! - parentMessage.width! / 2;
@@ -125,7 +125,7 @@ function constructNodes(mappedMessages: MappedMessage[]): Node[] {
               result: [
                 ...result,
                 {
-                  id: `${message.messageId}##${message.receivingEndpoint}`,
+                  id: `${message.messageId}##${message.receivingEndpoint.name}`,
                   type: "message",
                   data: message,
                   label: message.nodeName,
@@ -148,7 +148,7 @@ function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
     .map((message) => ({
       id: `${message.parentId}##${message.messageId}`,
       source: `${message.parentId}##${message.parentEndpoint}`,
-      target: `${message.messageId}##${message.receivingEndpoint}`,
+      target: `${message.messageId}##${message.receivingEndpoint.name}`,
       markerEnd: MarkerType.ArrowClosed,
       style: {
         "stroke-dasharray": message.type === MessageType.Event && "5, 3",
@@ -166,7 +166,7 @@ onMounted(async () => {
 
   const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
     message.level = level;
-    const children = mappedMessages.filter((mm) => mm.parentId === message.messageId && mm.parentEndpoint === message.receivingEndpoint);
+    const children = mappedMessages.filter((mm) => mm.parentId === message.messageId && mm.parentEndpoint === message.receivingEndpoint.name);
     message.width =
       children.length === 0
         ? 1 //leaf node
@@ -188,6 +188,14 @@ function typeIcon(type: MessageType) {
       return "pa-flow-command";
   }
 }
+
+const showAddress = ref(false);
+
+function toggleAddress() {
+  showAddress.value = !showAddress.value;
+}
+
+const blackColor = hexToCSSFilter("#000000").filter;
 </script>
 
 <template>
@@ -195,27 +203,37 @@ function typeIcon(type: MessageType) {
   <LoadingSpinner v-else-if="store.conversationData.loading" />
   <div v-else id="tree-container">
     <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
-      <Controls />
+      <Controls position="top-left" class="controls">
+        <ControlButton v-tippy="`Show endpoints`" @click="toggleAddress">
+          <i class="fa pa-flow-endpoint" :style="{ filter: blackColor }"></i>
+        </ControlButton>
+      </Controls>
       <template #node-message="{ data }: { data: MappedMessage }">
+        <div v-if="showAddress">
+          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" />
+        </div>
         <div class="node" :class="{ error: data.isError, 'current-message': data.id === store.state.data.id }">
-          <div class="node-text wordwrap">
+          <div class="node-text">
             <i v-if="data.isError" class="fa pa-flow-failed" />
-            <i class="fa" :class="typeIcon(data.type)" :title="data.type" />
-            <div class="lead right-side-ellipsis" :title="data.nodeName">
+            <i class="fa" :class="typeIcon(data.type)" v-tippy="data.type" />
+            <div class="lead">
               <strong>
-                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }">{{ data.nodeName }}</RouterLink>
-                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }">{{ data.nodeName }}</RouterLink>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(data.id) }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, data.id) }"><TextEllipses style="width: 204px" :text="data.nodeName" ellipses-style="LeftSide" /></RouterLink>
               </strong>
             </div>
-            <span class="time-sent">
+            <div class="time-sent">
               <time-since class="time-since" :date-utc="data.timeSent" />
-            </span>
+            </div>
             <template v-if="data.sagaName">
               <i class="fa pa-flow-saga" />
-              <div class="saga lead right-side-ellipsis" :title="data.sagaName">{{ data.sagaName }}</div>
+              <div class="saga lead"><TextEllipses style="width: 182px" :text="data.sagaName" ellipses-style="LeftSide" /></div>
             </template>
           </div>
         </div>
+        <div v-if="showAddress">
+          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" />
+        </div>
       </template>
     </VueFlow>
   </div>
@@ -230,6 +248,12 @@ function typeIcon(type: MessageType) {
 <style scoped>
 @import "../list.css";
 
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 #tree-container {
   width: 90vw;
   height: 60vh;
@@ -240,7 +264,6 @@ function typeIcon(type: MessageType) {
   --vf-box-shadow: var(--vf-node-color, #1a192b);
   background: var(--vf-node-bg);
   border-color: var(--vf-node-color, #1a192b);
-  padding: 10px;
   border-radius: 3px;
   font-size: 12px;
   border-width: 1px;
@@ -249,11 +272,6 @@ function typeIcon(type: MessageType) {
   text-align: left;
 }
 
-.right-side-ellipsis {
-  direction: rtl;
-  text-align: left;
-}
-
 .node {
   background-color: #fff;
   border-color: #cccbcc;
@@ -269,7 +287,6 @@ function typeIcon(type: MessageType) {
 }
 
 .node .time-sent .time-since {
-  display: block;
   margin-left: 20px;
   padding-top: 0;
   color: #777f7f;
@@ -290,7 +307,6 @@ function typeIcon(type: MessageType) {
 
 .node-text .lead {
   display: inline-block;
-  width: 204px;
   position: relative;
   top: 4px;
 }
@@ -302,7 +318,12 @@ function typeIcon(type: MessageType) {
 
 .node-text .lead.saga {
   font-weight: normal;
-  width: 182px;
+}
+
+.address {
+  color: #777f7f;
+  font-size: 0.8em;
+  width: 264px;
 }
 
 .current-message {
@@ -370,6 +391,14 @@ function typeIcon(type: MessageType) {
   text-decoration: underline;
 }
 
+.pa-flow-endpoint {
+  background-image: url("@/assets/endpoint.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+
 .pa-flow-failed {
   background-image: url("@/assets/failed-msg.svg");
   background-position: center;
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index dda2845f9..9c7ce73c4 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -19,6 +19,7 @@ import ExportMessageButton from "@/components/messages2/ExportMessageButton.vue"
 import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
 import MetadataLabel from "@/components/messages2/MetadataLabel.vue";
+import { hexToCSSFilter } from "hex-to-css-filter";
 import LoadingOverlay from "@/components/LoadingOverlay.vue";
 
 const route = useRoute();
@@ -76,6 +77,7 @@ watch(
   },
   { immediate: true }
 );
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -116,7 +118,7 @@ watch(
               <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
               <span v-else class="metadata"><i class="fa fa-clock-o"></i> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
               <template v-if="state.data.receiving_endpoint">
-                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
+                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ state.data.receiving_endpoint.host }}</span>
               </template>
               <span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>

From 70a7ece058383a423f9cfe05b39c4cfdf42b1d01 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 9 Apr 2025 15:43:25 +1000
Subject: [PATCH 2/4] Removing unnecessary nulls

---
 .../src/components/messages2/FlowDiagram.vue  | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram.vue
index cb6f68642..44a004bb5 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram.vue
@@ -35,9 +35,9 @@ interface MappedMessage {
     nodeName: string;
   };
   timeSent: string;
-  level?: number;
-  width?: number;
-  XPos?: number;
+  level: number;
+  width: number;
+  XPos: number;
 }
 
 const nodeSpacingX = 300;
@@ -84,6 +84,9 @@ function mapMessage(message: Message): MappedMessage {
     type,
     isError: message.status !== MessageStatus.Successful && message.status !== MessageStatus.ResolvedSuccessfully,
     sagaName,
+    level: 0,
+    width: 0,
+    XPos: 0,
     link: {
       name: `Link ${message.id}`,
       nodeName: message.id,
@@ -92,12 +95,12 @@ function mapMessage(message: Message): MappedMessage {
   };
 }
 
-function constructNodes(mappedMessages: MappedMessage[]): Node[] {
+function constructNodes(mappedMessages: MappedMessage[]): Node<MappedMessage>[] {
   return (
     mappedMessages
       //group by level
       .reduce((groups: MappedMessage[][], message: MappedMessage) => {
-        groups[message.level!] = [...(groups[message.level!] ?? []), message];
+        groups[message.level] = [...(groups[message.level] ?? []), message];
         return groups;
       }, [])
       //ensure each level has their items in the same "grouped" order as the level above
@@ -118,9 +121,9 @@ function constructNodes(mappedMessages: MappedMessage[]): Node[] {
             const parentMessage = previousLevel?.find((plMessage) => message.parentId === plMessage.messageId && message.parentEndpoint === plMessage.receivingEndpoint.name) ?? null;
             //if the current parent node is the same as the previous parent node, then the current position needs to be to the right of siblings
             const currentParentWidth = previousParent === parentMessage ? currentWidth : 0;
-            const startX = parentMessage == null ? 0 : parentMessage.XPos! - parentMessage.width! / 2;
+            const startX = parentMessage == null ? 0 : parentMessage.XPos - parentMessage.width / 2;
             //store the position of the node against the message, so child nodes can use it to determine their start position
-            message.XPos = startX + (currentParentWidth + message.width! / 2);
+            message.XPos = startX + (currentParentWidth + message.width / 2);
             return {
               result: [
                 ...result,
@@ -129,10 +132,10 @@ function constructNodes(mappedMessages: MappedMessage[]): Node[] {
                   type: "message",
                   data: message,
                   label: message.nodeName,
-                  position: { x: message.XPos * nodeSpacingX, y: message.level! * nodeSpacingY },
+                  position: { x: message.XPos * nodeSpacingX, y: message.level * nodeSpacingY },
                 },
               ],
-              currentWidth: currentParentWidth + message.width!,
+              currentWidth: currentParentWidth + message.width,
               previousParent: parentMessage,
             };
           },
@@ -170,12 +173,17 @@ onMounted(async () => {
     message.width =
       children.length === 0
         ? 1 //leaf node
-        : children.map((child) => (child.width == null ? assignDescendantLevelsAndWidth(child, level + 1) : child)).reduce((sum, { width }) => sum + width!, 0);
+        : children.map((child) => (child.width === 0 ? assignDescendantLevelsAndWidth(child, level + 1) : child)).reduce((sum, { width }) => sum + width, 0);
     return message;
   };
-  for (const root of mappedMessages.filter((message) => !message.parentId)) assignDescendantLevelsAndWidth(root);
+  for (const root of mappedMessages.filter((message) => !message.parentId)) {
+    assignDescendantLevelsAndWidth(root);
+  }
+
+  const nodes = constructNodes(mappedMessages);
+  const edges = constructEdges(nodes.map((n) => n.data as MappedMessage));
 
-  elements.value = [...constructNodes(mappedMessages), ...constructEdges(mappedMessages)];
+  elements.value = [...nodes, ...edges];
 });
 
 function typeIcon(type: MessageType) {
@@ -196,16 +204,17 @@ function toggleAddress() {
 }
 
 const blackColor = hexToCSSFilter("#000000").filter;
+const greenColor = hexToCSSFilter("#00c468").filter;
 </script>
 
 <template>
   <div v-if="store.conversationData.failed_to_load" class="alert alert-info">FlowDiagram data is unavailable.</div>
   <LoadingSpinner v-else-if="store.conversationData.loading" />
   <div v-else id="tree-container">
-    <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true">
+    <VueFlow v-model="elements" :min-zoom="0.1" :fit-view-on-init="true" :only-render-visible-elements="true">
       <Controls position="top-left" class="controls">
-        <ControlButton v-tippy="`Show endpoints`" @click="toggleAddress">
-          <i class="fa pa-flow-endpoint" :style="{ filter: blackColor }"></i>
+        <ControlButton v-tippy="showAddress ? `Hide endpoints` : `Show endpoints`" @click="toggleAddress">
+          <i class="fa pa-flow-endpoint" :style="{ filter: showAddress ? greenColor : blackColor }"></i>
         </ControlButton>
       </Controls>
       <template #node-message="{ data }: { data: MappedMessage }">

From c7fe71202833b1f5318a2a7fd976fa1aba07e35d Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 10 Apr 2025 10:12:30 +1000
Subject: [PATCH 3/4] Revert changes

---
 src/Frontend/src/components/TimeSince.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/Frontend/src/components/TimeSince.vue b/src/Frontend/src/components/TimeSince.vue
index c3faf2a37..85583ddd4 100644
--- a/src/Frontend/src/components/TimeSince.vue
+++ b/src/Frontend/src/components/TimeSince.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
-import { Tippy } from "vue-tippy";
 
 const emptyDate = "0001-01-01T00:00:00";
 
@@ -9,17 +8,17 @@ const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?
 
 let interval: number | undefined = undefined;
 
-const title = ref<string[]>([]),
+const title = ref(),
   text = ref();
 
 function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = props.titleValue ? [props.titleValue] : [`${m.local().format("LLLL")} (local)`, `${m.utc().format("LLLL")} (UTC)`];
+    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
   } else {
     text.value = props.defaultTextOnFailure;
-    title.value = [props.titleValue ?? props.defaultTextOnFailure];
+    title.value = props.titleValue ?? props.defaultTextOnFailure;
   }
 }
 
@@ -35,10 +34,5 @@ onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>
-  <Tippy>
-    <template #content>
-      <div v-for="row in title" :key="row">{{ row }}</div>
-    </template>
-    <span>{{ text }}</span>
-  </Tippy>
+  <span :title="title">{{ text }}</span>
 </template>

From 1a82407bfaa750065754e355970162505319846e Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 10 Apr 2025 10:27:14 +1000
Subject: [PATCH 4/4] window is not nullable

---
 src/Frontend/src/composables/autoRefresh.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/composables/autoRefresh.ts b/src/Frontend/src/composables/autoRefresh.ts
index 7bdca8d8a..bce7176a3 100644
--- a/src/Frontend/src/composables/autoRefresh.ts
+++ b/src/Frontend/src/composables/autoRefresh.ts
@@ -9,7 +9,7 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, defau
 
   function stopTimer() {
     if (refreshInterval !== null) {
-      window?.clearTimeout(refreshInterval);
+      window.clearTimeout(refreshInterval);
       refreshInterval = null;
     }
   }
@@ -18,7 +18,7 @@ export default function useAutoRefresh(refreshAction: () => Promise<void>, defau
     if (timeout.value === null) return;
 
     stopTimer();
-    refreshInterval = window?.setTimeout(() => {
+    refreshInterval = window.setTimeout(() => {
       executeAndResetTimer();
     }, timeout.value as number);
   }