From 557e4e803e31f60cdad13b4a449656cc31f8fb32 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 11 Apr 2025 11:50:43 +1000
Subject: [PATCH 1/5] It is working

---
 .../{ => FlowDiagram}/FlowDiagram.vue         | 318 +++++++++---------
 .../messages2/FlowDiagram/useLayout.ts        |  48 +++
 .../src/components/messages2/MessageView.vue  |   2 +-
 src/Frontend/src/resources/Message.ts         |   2 +-
 4 files changed, 214 insertions(+), 156 deletions(-)
 rename src/Frontend/src/components/messages2/{ => FlowDiagram}/FlowDiagram.vue (50%)
 create mode 100644 src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts

diff --git a/src/Frontend/src/components/messages2/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
similarity index 50%
rename from src/Frontend/src/components/messages2/FlowDiagram.vue
rename to src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index 44a004bb5..a77539135 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-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, { MessageStatus } from "@/resources/Message";
-import { NServiceBusHeaders } from "@/resources/Header";
+import { onMounted, ref, nextTick } from "vue";
+import { type DefaultEdge, MarkerType, type Node, type Styles, useVueFlow, VueFlow, XYPosition } from "@vue-flow/core";
+import TimeSince from "../../TimeSince.vue";
+import routeLinks from "@/router/routeLinks.ts";
+import Message, { MessageIntent, MessageStatus, SagaInfo } from "@/resources/Message.ts";
+import { NServiceBusHeaders } from "@/resources/Header.ts";
 import { ControlButton, Controls } from "@vue-flow/controls";
-import { useMessageStore } from "@/stores/MessageStore";
+import { useMessageStore } from "@/stores/MessageStore.ts";
 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";
+import { useLayout } from "@/components/messages2/FlowDiagram/useLayout.ts";
 
 enum MessageType {
   Event = "Event message",
@@ -19,173 +20,182 @@ enum MessageType {
   Command = "Command message",
 }
 
-interface MappedMessage {
-  nodeName: string;
+const store = useMessageStore();
+const { state } = storeToRefs(store);
+
+async function getConversation(conversationId: string) {
+  await store.loadConversation(conversationId);
+
+  return store.conversationData.data;
+}
+
+class SagaInvocation {
   id: string;
+  sagaType: string;
+  isSagaCompleted: boolean;
+  isSagaInitiated: boolean;
+
+  constructor(saga: SagaInfo, message: Message) {
+    const sagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.SagaId);
+    const originatedSagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.OriginatingSagaId);
+    this.id = saga.saga_id;
+    this.sagaType = saga.saga_type;
+    this.isSagaCompleted = saga.change_status === "Completed";
+    this.isSagaInitiated = sagaIdHeader === undefined && originatedSagaIdHeader !== undefined;
+  }
+}
+
+interface NodeData {
+  label: string;
+  timeSent: string;
   messageId: string;
   sendingEndpoint: EndpointDetails;
   receivingEndpoint: EndpointDetails;
-  parentId: string;
-  parentEndpoint: string;
-  type: MessageType;
   isError: boolean;
-  sagaName: string;
-  link: {
-    name: string;
-    nodeName: string;
-  };
-  timeSent: string;
-  level: number;
-  width: number;
-  XPos: number;
+  sagaInvocations: SagaInvocation[];
+  isPublished: boolean;
+  isTimeout: boolean;
+  isEvent: boolean;
+  isCommand: boolean;
+  message: Message;
+  type: MessageType;
 }
 
-const nodeSpacingX = 300;
-const nodeSpacingY = 200;
+class MessageNode implements Node<NodeData> {
+  readonly id: string;
+  readonly type: string;
+  readonly data: NodeData;
+  readonly position: XYPosition;
+  readonly draggable: boolean;
+
+  constructor(message: Message) {
+    this.id = message.id;
+    this.type = "message";
+    this.position = { x: 0, y: 0 };
+    this.draggable = false;
+
+    const isPublished = message.message_intent === MessageIntent.Publish;
+    const isTimeout = getHeaderByKey(message, NServiceBusHeaders.IsSagaTimeoutMessage)?.toLowerCase() === "true";
+    this.data = {
+      label: message.message_type,
+      timeSent: message.time_sent,
+      messageId: message.message_id,
+      sendingEndpoint: message.sending_endpoint,
+      receivingEndpoint: message.receiving_endpoint,
+      isError: message.status !== MessageStatus.Successful && message.status !== MessageStatus.ResolvedSuccessfully,
+      sagaInvocations: message.invoked_sagas?.map((saga) => new SagaInvocation(saga, message)) || [],
+      isPublished,
+      isTimeout,
+      isEvent: isPublished && isTimeout,
+      isCommand: !isPublished && isTimeout,
+      message,
+      type: isPublished ? MessageType.Event : isTimeout ? MessageType.Timeout : MessageType.Command,
+    };
+  }
+}
 
-const store = useMessageStore();
-const { state } = storeToRefs(store);
+function constructNodes(messages: Message[]): Node<NodeData>[] {
+  const messageMap = new Map();
 
-async function getConversation(conversationId: string) {
-  await store.loadConversation(conversationId);
+  messages.forEach((message) => {
+    if (!messageMap.has(message.id)) {
+      messageMap.set(message.id, new MessageNode(message));
+    }
+  });
 
-  return store.conversationData.data;
+  return Array.from(messageMap.values());
 }
 
-function mapMessage(message: Message): MappedMessage {
-  let parentId = "",
-    parentEndpoint = "",
-    sagaName = "";
-  const header = message.headers.find((header) => header.key === NServiceBusHeaders.RelatedTo);
-  if (header) {
-    parentId = header.value ?? "";
-    parentEndpoint = message.headers.find((h) => h.key === "NServiceBus.OriginatingEndpoint")?.value ?? "";
-  }
+function getHeaderByKey(message: Message, key: NServiceBusHeaders) {
+  return message.headers.find((header) => header.key === key)?.value;
+}
+
+function constructEdges(nodes: Node<NodeData>[]): DefaultEdge[] {
+  const edges: DefaultEdge[] = [];
+
+  for (const node of nodes) {
+    const message = node.data?.message;
+    if (message === undefined) continue;
+
+    const relatedTo = getHeaderByKey(message, NServiceBusHeaders.RelatedTo);
+    if (!relatedTo && relatedTo !== message.message_id) {
+      continue;
+    }
+
+    let parentMessages = nodes.filter((n) => {
+      const m = n.data?.message;
+      if (m === undefined) return false;
+      return m.receiving_endpoint !== undefined && m.sending_endpoint !== undefined && m.message_id === relatedTo && m.receiving_endpoint.name === message.sending_endpoint.name;
+    });
+
+    if (parentMessages.length === 0) {
+      parentMessages = nodes.filter((n) => {
+        const m = n.data?.message;
+        if (m === undefined) return false;
+        return m.receiving_endpoint !== undefined && m.sending_endpoint !== undefined && m.message_id === relatedTo && m.message_intent !== MessageIntent.Publish;
+      });
 
-  const sagaHeader = message.headers.find((header) => header.key === NServiceBusHeaders.OriginatingSagaType);
-  if (sagaHeader) {
-    sagaName = sagaHeader.value?.split(", ")[0] ?? "";
+      if (parentMessages.length === 0) {
+        console.log(`Fall back to match only on RelatedToMessageId for message with Id '${message.message_id}' matched but link could be invalid.`);
+      }
+    }
+
+    switch (parentMessages.length) {
+      case 0:
+        console.log(
+          `No parent could be resolved for the message with Id '${message.message_id}' which has RelatedToMessageId set. This can happen if the parent has been purged due to retention expiration, an ServiceControl node to be unavailable, or because the parent message not been stored (yet).`
+        );
+        break;
+      case 1:
+        // Log nothing, this is what it should be
+        break;
+      default:
+        console.log(`Multiple parents matched for message id '${message.message_id}' possibly due to more-than-once processing, linking to all as it is unknown which processing attempt generated the message.`);
+        break;
+    }
+
+    for (const parentMessage of parentMessages) {
+      edges.push(addConnection(parentMessage, node));
+    }
   }
 
-  const type = (() => {
-    if (message.headers.find((header) => header.key === NServiceBusHeaders.MessageIntent)?.value === "Publish") return MessageType.Event;
-    else if (message.headers.find((header) => header.key === NServiceBusHeaders.IsSagaTimeoutMessage)?.value?.toLowerCase() === "true") return MessageType.Timeout;
-    return MessageType.Command;
-  })();
+  return edges;
+}
 
+function addConnection(parentMessage: Node<NodeData>, childMessage: Node<NodeData>): DefaultEdge {
   return {
-    nodeName: message.message_type,
-    id: message.id,
-    messageId: message.message_id,
-    sendingEndpoint: message.sending_endpoint,
-    receivingEndpoint: message.receiving_endpoint,
-    parentId,
-    parentEndpoint,
-    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,
-    },
-    timeSent: message.time_sent,
+    id: `${parentMessage.id}##${childMessage.id}`,
+    source: `${parentMessage.id}`,
+    target: `${childMessage.id}`,
+    markerEnd: MarkerType.ArrowClosed,
+    style: {
+      "stroke-dasharray": childMessage.data?.isEvent && "5, 3",
+    } as Styles,
   };
 }
 
-function constructNodes(mappedMessages: MappedMessage[]): Node<MappedMessage>[] {
-  return (
-    mappedMessages
-      //group by level
-      .reduce((groups: MappedMessage[][], message: MappedMessage) => {
-        groups[message.level] = [...(groups[message.level] ?? []), message];
-        return groups;
-      }, [])
-      //ensure each level has their items in the same "grouped" order as the level above
-      .map((group, level, messagesByLevel) => {
-        const previousLevel = level > 0 ? messagesByLevel[level - 1] : null;
-        return group.sort(
-          (a, b) =>
-            (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
-      .flatMap((group, level, messagesByLevel) => {
-        const previousLevel = level > 0 ? messagesByLevel[level - 1] : null;
-        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.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;
-            //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);
-            return {
-              result: [
-                ...result,
-                {
-                  id: `${message.messageId}##${message.receivingEndpoint.name}`,
-                  type: "message",
-                  data: message,
-                  label: message.nodeName,
-                  position: { x: message.XPos * nodeSpacingX, y: message.level * nodeSpacingY },
-                },
-              ],
-              currentWidth: currentParentWidth + message.width,
-              previousParent: parentMessage,
-            };
-          },
-          { result: [] as Node[], currentWidth: 0, previousParent: null as MappedMessage | null }
-        ).result;
-      })
-  );
-}
-
-function constructEdges(mappedMessages: MappedMessage[]): DefaultEdge[] {
-  return mappedMessages
-    .filter((message) => message.parentId)
-    .map((message) => ({
-      id: `${message.parentId}##${message.messageId}`,
-      source: `${message.parentId}##${message.parentEndpoint}`,
-      target: `${message.messageId}##${message.receivingEndpoint.name}`,
-      markerEnd: MarkerType.ArrowClosed,
-      style: {
-        "stroke-dasharray": message.type === MessageType.Event && "5, 3",
-      } as Styles,
-    }));
-}
-
-const elements = ref<(Node | DefaultEdge)[]>([]);
+const nodes = ref<Node[]>([]);
+const edges = ref<DefaultEdge[]>([]);
+const { layout } = useLayout();
+const { fitView } = useVueFlow();
 
 onMounted(async () => {
   if (!state.value.data.conversation_id) return;
 
   const messages = await getConversation(state.value.data.conversation_id);
-  const mappedMessages = messages.map(mapMessage);
-
-  const assignDescendantLevelsAndWidth = (message: MappedMessage, level = 0) => {
-    message.level = level;
-    const children = mappedMessages.filter((mm) => mm.parentId === message.messageId && mm.parentEndpoint === message.receivingEndpoint.name);
-    message.width =
-      children.length === 0
-        ? 1 //leaf node
-        : 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);
-  }
-
-  const nodes = constructNodes(mappedMessages);
-  const edges = constructEdges(nodes.map((n) => n.data as MappedMessage));
 
-  elements.value = [...nodes, ...edges];
+  nodes.value = constructNodes(messages);
+  edges.value = constructEdges(nodes.value);
 });
 
+async function layoutGraph() {
+  nodes.value = layout(nodes.value, edges.value);
+
+  await nextTick(() => {
+    fitView();
+  });
+}
+
 function typeIcon(type: MessageType) {
   switch (type) {
     case MessageType.Timeout:
@@ -211,32 +221,32 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   <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" :only-render-visible-elements="true">
+    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" :fit-view-on-init="true" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
       <Controls position="top-left" class="controls">
         <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 }">
+      <template #node-message="{ id, data }: { id: string; data: NodeData }">
         <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" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
           <div class="node-text">
             <i v-if="data.isError" class="fa pa-flow-failed" />
             <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) }"><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>
+                <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
+                <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
               </strong>
             </div>
             <div class="time-sent">
               <time-since class="time-since" :date-utc="data.timeSent" />
             </div>
-            <template v-if="data.sagaName">
+            <template v-for="saga in data.sagaInvocations" :key="saga.id">
               <i class="fa pa-flow-saga" />
-              <div class="saga lead"><TextEllipses style="width: 182px" :text="data.sagaName" ellipses-style="LeftSide" /></div>
+              <div class="saga lead"><TextEllipses style="width: 182px" :text="saga.sagaType" ellipses-style="LeftSide" /></div>
             </template>
           </div>
         </div>
@@ -255,7 +265,7 @@ const greenColor = hexToCSSFilter("#00c468").filter;
 </style>
 
 <style scoped>
-@import "../list.css";
+@import "../../list.css";
 
 .controls {
   display: flex;
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts b/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
new file mode 100644
index 000000000..1009f7bd2
--- /dev/null
+++ b/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
@@ -0,0 +1,48 @@
+import dagre from "@dagrejs/dagre";
+import { DefaultEdge, Node, Position, useVueFlow } from "@vue-flow/core";
+import { ref } from "vue";
+
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  function layout(nodes: Node[], edges: DefaultEdge[]) {
+    // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = false;
+    dagreGraph.setGraph({ rankdir: "TB" });
+
+    for (const node of nodes) {
+      const graphNode = findNode(node.id);
+      if (graphNode === undefined) continue;
+
+      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 });
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    // set nodes with updated positions
+    return nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
+      };
+    });
+  }
+
+  return { graph, layout };
+}
diff --git a/src/Frontend/src/components/messages2/MessageView.vue b/src/Frontend/src/components/messages2/MessageView.vue
index 9c7ce73c4..c22b956fd 100644
--- a/src/Frontend/src/components/messages2/MessageView.vue
+++ b/src/Frontend/src/components/messages2/MessageView.vue
@@ -3,7 +3,7 @@ import { computed, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import NoData from "../NoData.vue";
 import TimeSince from "../TimeSince.vue";
-import FlowDiagram from "./FlowDiagram.vue";
+import FlowDiagram from "./FlowDiagram/FlowDiagram.vue";
 import SequenceDiagram from "./SequenceDiagram.vue";
 import routeLinks from "@/router/routeLinks";
 import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
diff --git a/src/Frontend/src/resources/Message.ts b/src/Frontend/src/resources/Message.ts
index 7bc049462..ed1386960 100644
--- a/src/Frontend/src/resources/Message.ts
+++ b/src/Frontend/src/resources/Message.ts
@@ -42,7 +42,7 @@ export enum MessageIntent {
   Init = "init",
 }
 
-interface SagaInfo {
+export interface SagaInfo {
   change_status?: string;
   saga_type: string;
   saga_id: string;

From 7a507e5f4aba47781776c96d3ce596292ab4e232 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Fri, 11 Apr 2025 16:19:25 +1000
Subject: [PATCH 2/5] Fixing up issues with flow diagram

Saga was not displaying different statuses
In certain conditions some arrow were missing
---
 src/Frontend/package-lock.json                |  19 +++
 src/Frontend/package.json                     |   1 +
 src/Frontend/src/assets/endpoint-lost.svg     |  11 +-
 src/Frontend/src/assets/saga-completed.svg    |   6 +
 src/Frontend/src/assets/saga-initiated.svg    |   6 +
 src/Frontend/src/assets/saga-trigger.svg      |   7 +
 src/Frontend/src/assets/saga.svg              |   9 -
 .../src/components/messages/FlowDiagram.vue   |   2 +-
 .../messages2/FlowDiagram/FlowDiagram.vue     | 161 ++++++++----------
 .../messages2/FlowDiagram/useLayout.ts        |   4 +-
 10 files changed, 123 insertions(+), 103 deletions(-)
 create mode 100644 src/Frontend/src/assets/saga-completed.svg
 create mode 100644 src/Frontend/src/assets/saga-initiated.svg
 create mode 100644 src/Frontend/src/assets/saga-trigger.svg
 delete mode 100644 src/Frontend/src/assets/saga.svg

diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json
index 7e66459fd..095ff0231 100644
--- a/src/Frontend/package-lock.json
+++ b/src/Frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/legacy-modes": "^6.5.0",
+        "@dagrejs/dagre": "^1.1.4",
         "@tinyhttp/content-disposition": "^2.2.2",
         "@vue-flow/controls": "^1.1.2",
         "@vue-flow/core": "^1.42.5",
@@ -459,6 +460,24 @@
         "node": ">=18"
       }
     },
+    "node_modules/@dagrejs/dagre": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.1.4.tgz",
+      "integrity": "sha512-QUTc54Cg/wvmlEUxB+uvoPVKFazM1H18kVHBQNmK2NbrDR5ihOCR6CXLnDSZzMcSQKJtabPUWridBOlJM3WkDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dagrejs/graphlib": "2.2.4"
+      }
+    },
+    "node_modules/@dagrejs/graphlib": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.2.4.tgz",
+      "integrity": "sha512-mepCf/e9+SKYy1d02/UkvSy6+6MoyXhVxP8lLDfA7BPE1X1d4dR0sZznmbM8/XVJ1GPM+Svnx7Xj6ZweByWUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">17.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
diff --git a/src/Frontend/package.json b/src/Frontend/package.json
index c558c45ed..f799210a3 100644
--- a/src/Frontend/package.json
+++ b/src/Frontend/package.json
@@ -20,6 +20,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/legacy-modes": "^6.5.0",
+    "@dagrejs/dagre": "^1.1.4",
     "@tinyhttp/content-disposition": "^2.2.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.42.5",
diff --git a/src/Frontend/src/assets/endpoint-lost.svg b/src/Frontend/src/assets/endpoint-lost.svg
index 2be2dd02c..a6c73ab95 100644
--- a/src/Frontend/src/assets/endpoint-lost.svg
+++ b/src/Frontend/src/assets/endpoint-lost.svg
@@ -1 +1,10 @@
-<?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 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="endpoint-lost"><path d="M19.054,11.155l1.937,-1.938l0.861,0.861l-1.937,1.937l1.937,1.938l-0.861,0.861l-1.937,-1.938l-1.937,1.938l-0.861,-0.861l1.937,-1.938l-1.937,-1.937l0.861,-0.861l1.937,1.938Z" style="fill:#ce4844;"/><g><path d="M11.395,10.953l0,-2.978l-3.971,-0l0,-4.964l3.971,0l0,-2.978l-10.92,0l0,10.92l10.92,0Z" style="fill:#ce4844;fill-rule:nonzero;"/><rect x="8.417" y="4.004" width="5.956" height="2.978" style="fill:#ce4844;"/></g></g></svg>
\ No newline at end of file
+<?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 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="endpoint-lost">
+        <path d="M19.054,11.155l1.937,-1.938l0.861,0.861l-1.937,1.937l1.937,1.938l-0.861,0.861l-1.937,-1.938l-1.937,1.938l-0.861,-0.861l1.937,-1.938l-1.937,-1.937l0.861,-0.861l1.937,1.938Z" style="fill:#ce4844;"/>
+        <g>
+            <path d="M11.395,10.953l0,-2.978l-3.971,-0l0,-4.964l3.971,0l0,-2.978l-10.92,0l0,10.92l10.92,0Z" style="fill:#ce4844;fill-rule:nonzero;"/>
+            <rect x="8.417" y="4.004" width="5.956" height="2.978" style="fill:#ce4844;"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/Frontend/src/assets/saga-completed.svg b/src/Frontend/src/assets/saga-completed.svg
new file mode 100644
index 000000000..e63f5a58e
--- /dev/null
+++ b/src/Frontend/src/assets/saga-completed.svg
@@ -0,0 +1,6 @@
+<?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 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect width="15" height="15" style="fill:#333333;fill-rule:nonzero;"/>
+    <rect x="4" y="4" width="7" height="7" style="fill:#E6E6E6;fill-rule:nonzero;"/>
+</svg>
diff --git a/src/Frontend/src/assets/saga-initiated.svg b/src/Frontend/src/assets/saga-initiated.svg
new file mode 100644
index 000000000..969373a9c
--- /dev/null
+++ b/src/Frontend/src/assets/saga-initiated.svg
@@ -0,0 +1,6 @@
+<?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 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+   <rect width="15" height="15" style="fill:#333333;fill-rule:nonzero;"/>
+    <polygon points="4.986,4 11.048,7.5 4.986,11" style="fill:#E6E6E6;fill-rule:nonzero;"/>
+</svg>
diff --git a/src/Frontend/src/assets/saga-trigger.svg b/src/Frontend/src/assets/saga-trigger.svg
new file mode 100644
index 000000000..0b809af35
--- /dev/null
+++ b/src/Frontend/src/assets/saga-trigger.svg
@@ -0,0 +1,7 @@
+<?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 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect width="15" height="15" style="fill:#333333"/>
+    <line x1="2.986" x2="9.051" y1="12" y2="5.935" stroke-width="2" stroke-miterlimit="10" style="stroke:#E6E6E6;fill-rule:nonzero;"/>
+    <polygon points="10.493,8.571 11.986,3 6.415,4.492" style="fill:#E6E6E6;fill-rule:nonzero;"/>
+</svg>
diff --git a/src/Frontend/src/assets/saga.svg b/src/Frontend/src/assets/saga.svg
deleted file mode 100644
index f284fcc52..000000000
--- a/src/Frontend/src/assets/saga.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?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 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g>
-        <path d="M6,5.362C4.217,4.655 3,3.411 3,0L1,0C1,5.082 3.461,6.665 6,7.482L6,5.362Z" style="fill-rule:nonzero;"/>
-        <path d="M14.911,12.17C14.382,8.505 12.209,7.217 10,6.508L10,8.617C11.462,9.184 12.54,10.097 12.906,12.236L11.724,12.275L14.042,16L16.11,12.13L14.911,12.17Z" style="fill-rule:nonzero;"/>
-    </g>
-    <path d="M9,12.201L9,0L7,0L7,12.201L5.806,12.201L8,16L10.194,12.201L9,12.201Z" style="fill-rule:nonzero;"/>
-</svg>
diff --git a/src/Frontend/src/components/messages/FlowDiagram.vue b/src/Frontend/src/components/messages/FlowDiagram.vue
index 210accdb2..e2eaea508 100644
--- a/src/Frontend/src/components/messages/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages/FlowDiagram.vue
@@ -371,7 +371,7 @@ function typeIcon(type: MessageType) {
 }
 
 .pa-flow-saga {
-  background-image: url("@/assets/saga.svg");
+  background-image: url("@/assets/saga-completed.svg");
   background-position: center;
   background-repeat: no-repeat;
   height: 15px;
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index a77539135..b5268c242 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
-import { type DefaultEdge, MarkerType, type Node, type Styles, useVueFlow, VueFlow, XYPosition } from "@vue-flow/core";
+import { type DefaultEdge, MarkerType, type Node, useVueFlow, VueFlow, XYPosition } from "@vue-flow/core";
 import TimeSince from "../../TimeSince.vue";
 import routeLinks from "@/router/routeLinks.ts";
 import Message, { MessageIntent, MessageStatus, SagaInfo } from "@/resources/Message.ts";
@@ -39,10 +39,18 @@ class SagaInvocation {
     const sagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.SagaId);
     const originatedSagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.OriginatingSagaId);
     this.id = saga.saga_id;
-    this.sagaType = saga.saga_type;
+    this.sagaType = this.toName(saga.saga_type);
     this.isSagaCompleted = saga.change_status === "Completed";
     this.isSagaInitiated = sagaIdHeader === undefined && originatedSagaIdHeader !== undefined;
   }
+
+  private toName(type: string) {
+    const clazz = type.split(",")[0];
+    let objectName = clazz.split(".").pop() ?? "";
+    objectName = objectName.replace("+", ".");
+
+    return objectName;
+  }
 }
 
 interface NodeData {
@@ -55,8 +63,8 @@ interface NodeData {
   sagaInvocations: SagaInvocation[];
   isPublished: boolean;
   isTimeout: boolean;
-  isEvent: boolean;
   isCommand: boolean;
+  isEvent: boolean;
   message: Message;
   type: MessageType;
 }
@@ -76,6 +84,12 @@ class MessageNode implements Node<NodeData> {
 
     const isPublished = message.message_intent === MessageIntent.Publish;
     const isTimeout = getHeaderByKey(message, NServiceBusHeaders.IsSagaTimeoutMessage)?.toLowerCase() === "true";
+    const sagas = message.invoked_sagas ?? [];
+
+    if (message.originates_from_saga) {
+      sagas.push(message.originates_from_saga);
+    }
+
     this.data = {
       label: message.message_type,
       timeSent: message.time_sent,
@@ -83,11 +97,11 @@ class MessageNode implements Node<NodeData> {
       sendingEndpoint: message.sending_endpoint,
       receivingEndpoint: message.receiving_endpoint,
       isError: message.status !== MessageStatus.Successful && message.status !== MessageStatus.ResolvedSuccessfully,
-      sagaInvocations: message.invoked_sagas?.map((saga) => new SagaInvocation(saga, message)) || [],
+      sagaInvocations: sagas.map((saga) => new SagaInvocation(saga, message)),
       isPublished,
       isTimeout,
-      isEvent: isPublished && isTimeout,
-      isCommand: !isPublished && isTimeout,
+      isEvent: isPublished && !isTimeout,
+      isCommand: !isPublished && !isTimeout,
       message,
       type: isPublished ? MessageType.Event : isTimeout ? MessageType.Timeout : MessageType.Command,
     };
@@ -169,8 +183,9 @@ function addConnection(parentMessage: Node<NodeData>, childMessage: Node<NodeDat
     target: `${childMessage.id}`,
     markerEnd: MarkerType.ArrowClosed,
     style: {
-      "stroke-dasharray": childMessage.data?.isEvent && "5, 3",
-    } as Styles,
+      strokeDasharray: childMessage.data?.isPublished ? "5, 3" : "",
+      strokeWidth: 2,
+    },
   };
 }
 
@@ -189,32 +204,23 @@ onMounted(async () => {
 });
 
 async function layoutGraph() {
-  nodes.value = layout(nodes.value, edges.value);
+  nodes.value = layout(nodes.value, edges.value, showAddress.value);
 
   await nextTick(() => {
     fitView();
   });
 }
 
-function typeIcon(type: MessageType) {
-  switch (type) {
-    case MessageType.Timeout:
-      return "pa-flow-timeout";
-    case MessageType.Event:
-      return "pa-flow-event";
-    default:
-      return "pa-flow-command";
-  }
-}
-
-const showAddress = ref(false);
+const showAddress = ref(true);
 
-function toggleAddress() {
+async function toggleAddress() {
   showAddress.value = !showAddress.value;
+  await layoutGraph();
 }
 
 const blackColor = hexToCSSFilter("#000000").filter;
-const greenColor = hexToCSSFilter("#00c468").filter;
+const greenColor = hexToCSSFilter("#1E5E3C").filter;
+const errorColor = hexToCSSFilter("#be514a").filter;
 </script>
 
 <template>
@@ -222,7 +228,7 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   <LoadingSpinner v-else-if="store.conversationData.loading" />
   <div v-else id="tree-container">
     <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" :fit-view-on-init="true" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
-      <Controls position="top-left" class="controls">
+      <Controls :show-interactive="false" position="top-left" class="controls">
         <ControlButton v-tippy="showAddress ? `Hide endpoints` : `Show endpoints`" @click="toggleAddress">
           <i class="fa pa-flow-endpoint" :style="{ filter: showAddress ? greenColor : blackColor }"></i>
         </ControlButton>
@@ -233,21 +239,27 @@ const greenColor = hexToCSSFilter("#00c468").filter;
         </div>
         <div class="node" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
           <div class="node-text">
-            <i v-if="data.isError" class="fa pa-flow-failed" />
-            <i class="fa" :class="typeIcon(data.type)" v-tippy="data.type" />
+            <i class="fa" :class="{ 'pa-flow-timeout': data.isTimeout, 'pa-flow-command': data.isCommand, 'pa-flow-event': data.isEvent }" v-tippy="data.type" />
             <div class="lead">
               <strong>
                 <RouterLink v-if="data.isError" :to="{ path: routeLinks.messages.failedMessage.link(id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
                 <RouterLink v-else :to="{ path: routeLinks.messages.successMessage.link(data.messageId, id) }"><TextEllipses style="width: 204px" :text="data.label" ellipses-style="LeftSide" /></RouterLink>
               </strong>
             </div>
+            <i v-if="data.isError" class="fa pa-flow-failed" :style="id !== store.state.data.id ? { filter: errorColor } : {}" />
             <div class="time-sent">
               <time-since class="time-since" :date-utc="data.timeSent" />
             </div>
-            <template v-for="saga in data.sagaInvocations" :key="saga.id">
-              <i class="fa pa-flow-saga" />
-              <div class="saga lead"><TextEllipses style="width: 182px" :text="saga.sagaType" ellipses-style="LeftSide" /></div>
-            </template>
+            <div class="sagas" v-if="data.sagaInvocations.length > 0">
+              <div class="saga" v-for="saga in data.sagaInvocations" :key="saga.id">
+                <i
+                  class="fa"
+                  v-tippy="saga.isSagaInitiated ? 'Message originated from Saga' : !saga.isSagaInitiated && saga.isSagaCompleted ? 'Saga Completed' : 'Saga Initiated / Updated'"
+                  :class="{ 'pa-flow-saga-initiated': saga.isSagaInitiated, 'pa-flow-saga-completed': !saga.isSagaInitiated && saga.isSagaCompleted, 'pa-flow-saga-trigger': !saga.isSagaInitiated && !saga.isSagaCompleted }"
+                />
+                <div class="sagaName"><TextEllipses style="width: 182px" :text="saga.sagaType" ellipses-style="LeftSide" /></div>
+              </div>
+            </div>
           </div>
         </div>
         <div v-if="showAddress">
@@ -278,6 +290,17 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   height: 60vh;
 }
 
+.sagas {
+  background-color: #333333;
+}
+
+.saga {
+  display: flex;
+}
+
+.sagaName {
+  color: #e6e6e6;
+}
 .node {
   --vf-handle: var(--vf-node-color, #1a192b);
   --vf-box-shadow: var(--vf-node-color, #1a192b);
@@ -298,7 +321,7 @@ const greenColor = hexToCSSFilter("#00c468").filter;
 }
 
 .node .error {
-  border-color: red;
+  border-color: #be514a;
 }
 
 .node text {
@@ -308,7 +331,7 @@ const greenColor = hexToCSSFilter("#00c468").filter;
 .node .time-sent .time-since {
   margin-left: 20px;
   padding-top: 0;
-  color: #777f7f;
+  color: #262727;
   text-transform: capitalize;
 }
 
@@ -319,9 +342,7 @@ const greenColor = hexToCSSFilter("#00c468").filter;
 .node-text i {
   display: inline-block;
   position: relative;
-  top: -1px;
   margin-right: 5px;
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(346deg) brightness(104%) contrast(104%);
 }
 
 .node-text .lead {
@@ -330,15 +351,6 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   top: 4px;
 }
 
-.error .node-text .lead,
-.current-message.error .node-text .lead {
-  width: 184px;
-}
-
-.node-text .lead.saga {
-  font-weight: normal;
-}
-
 .address {
   color: #777f7f;
   font-size: 0.8em;
@@ -355,36 +367,10 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   background-color: #be514a !important;
 }
 
-.current-message.error .node-text,
-.current-message .node-text .lead {
-  color: #fff !important;
-}
-
-.error .node-text i:not(.pa-flow-saga) {
-  filter: brightness(0) saturate(100%) invert(46%) sepia(9%) saturate(4493%) hue-rotate(317deg) brightness(81%) contrast(82%);
-}
-
-.current-message.error .node-text i {
-  color: #fff;
-  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7475%) hue-rotate(21deg) brightness(100%) contrast(106%);
-}
-
-.current-message.error .node-text strong {
-  color: #fff;
-}
-
-.current-message.error .node-text .time-sent .time-since {
-  color: #ffcecb !important;
-}
-
 .error {
   border-color: #be514a;
 }
 
-.current-message.error .node-text a {
-  color: #fff;
-}
-
 .current-message.error .node-text a:hover {
   cursor: text;
   text-decoration: none;
@@ -394,18 +380,6 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   color: #000;
 }
 
-.error .node-text a {
-  color: #be514a;
-}
-
-.error .node-text .time-sent .time-since {
-  color: #be514a;
-}
-
-.error .node-text .lead.saga {
-  color: #be514a;
-}
-
 .error .node-text a:hover {
   text-decoration: underline;
 }
@@ -426,13 +400,26 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   width: 15px;
 }
 
-.pa-flow-saga {
-  background-image: url("@/assets/saga.svg");
+.pa-flow-saga-completed {
+  background-image: url("@/assets/saga-completed.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+.pa-flow-saga-initiated {
+  background-image: url("@/assets/saga-initiated.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 15px;
+  width: 15px;
+}
+.pa-flow-saga-trigger {
+  background-image: url("@/assets/saga-trigger.svg");
   background-position: center;
   background-repeat: no-repeat;
   height: 15px;
   width: 15px;
-  margin-left: 20px;
 }
 
 .pa-flow-timeout {
@@ -458,10 +445,4 @@ const greenColor = hexToCSSFilter("#00c468").filter;
   height: 15px;
   width: 15px;
 }
-
-path.link {
-  fill: none;
-  stroke: #ccc;
-  stroke-width: 2px;
-}
 </style>
diff --git a/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts b/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
index 1009f7bd2..7f58dd711 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
+++ b/src/Frontend/src/components/messages2/FlowDiagram/useLayout.ts
@@ -7,7 +7,7 @@ export function useLayout() {
 
   const graph = ref(new dagre.graphlib.Graph());
 
-  function layout(nodes: Node[], edges: DefaultEdge[]) {
+  function layout(nodes: Node[], edges: DefaultEdge[], showAddress: boolean) {
     // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
     const dagreGraph = new dagre.graphlib.Graph();
 
@@ -22,7 +22,7 @@ export function useLayout() {
       const graphNode = findNode(node.id);
       if (graphNode === undefined) continue;
 
-      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 150, height: graphNode.dimensions.height || 50 });
+      dagreGraph.setNode(node.id, { width: graphNode.dimensions.width || 250, height: (graphNode.dimensions.height || 55) + (showAddress ? 40 : 0) });
     }
 
     for (const edge of edges) {

From d3d3cd24eb597bea9b089bf89daccc253d290406 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 14 Apr 2025 09:46:36 +1000
Subject: [PATCH 3/5] increase the size

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

diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index b5268c242..d3d3ed6f7 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -286,8 +286,8 @@ const errorColor = hexToCSSFilter("#be514a").filter;
 }
 
 #tree-container {
-  width: 90vw;
-  height: 60vh;
+  width: 92vw;
+  height: 70vh;
 }
 
 .sagas {

From 2bebee5ab7bd399690c188a92e29ab776ad15768 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 14 Apr 2025 11:17:50 +1000
Subject: [PATCH 4/5] Adjusted logging based on feedback

---
 .../src/components/messages2/FlowDiagram/FlowDiagram.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index d3d3ed6f7..84789796a 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -150,13 +150,13 @@ function constructEdges(nodes: Node<NodeData>[]): DefaultEdge[] {
       });
 
       if (parentMessages.length === 0) {
-        console.log(`Fall back to match only on RelatedToMessageId for message with Id '${message.message_id}' matched but link could be invalid.`);
+        console.debug(`Fall back to match only on RelatedToMessageId for message with Id '${message.message_id}' matched but link could be invalid.`);
       }
     }
 
     switch (parentMessages.length) {
       case 0:
-        console.log(
+        console.warn(
           `No parent could be resolved for the message with Id '${message.message_id}' which has RelatedToMessageId set. This can happen if the parent has been purged due to retention expiration, an ServiceControl node to be unavailable, or because the parent message not been stored (yet).`
         );
         break;
@@ -164,7 +164,7 @@ function constructEdges(nodes: Node<NodeData>[]): DefaultEdge[] {
         // Log nothing, this is what it should be
         break;
       default:
-        console.log(`Multiple parents matched for message id '${message.message_id}' possibly due to more-than-once processing, linking to all as it is unknown which processing attempt generated the message.`);
+        console.warn(`Multiple parents matched for message id '${message.message_id}' possibly due to more-than-once processing, linking to all as it is unknown which processing attempt generated the message.`);
         break;
     }
 

From fed81a1200e77a7c48f4f3c78e6c1198ac32b4b6 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 14 Apr 2025 11:36:49 +1000
Subject: [PATCH 5/5] Zoom into selected node

---
 .../src/components/messages2/FlowDiagram/FlowDiagram.vue    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
index 84789796a..8432156d8 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -207,7 +207,9 @@ async function layoutGraph() {
   nodes.value = layout(nodes.value, edges.value, showAddress.value);
 
   await nextTick(() => {
-    fitView();
+    if (store.state.data.id) {
+      fitView({ nodes: [store.state.data.id], maxZoom: 0.9 });
+    }
   });
 }
 
@@ -227,7 +229,7 @@ const errorColor = hexToCSSFilter("#be514a").filter;
   <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 :nodes="nodes" :edges="edges" :min-zoom="0.1" :fit-view-on-init="true" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
+    <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" :max-zoom="1.2" :only-render-visible-elements="true" @nodes-initialized="layoutGraph">
       <Controls :show-interactive="false" position="top-left" class="controls">
         <ControlButton v-tippy="showAddress ? `Hide endpoints` : `Show endpoints`" @click="toggleAddress">
           <i class="fa pa-flow-endpoint" :style="{ filter: showAddress ? greenColor : blackColor }"></i>