From 3b3ca15006869a20f8d0ae18a4436e4f1d075f3b Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Fri, 9 May 2025 17:31:52 -0700
Subject: [PATCH 1/2] fix the tippy text on the message node

---
 .../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 0c3247eeb..26518861c 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -225,7 +225,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
       <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" />
         <template #node-message="{ id, data }: { id: string; data: NodeData }">
-          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" />
+          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" v-tippy="'Sending Endpoint'" />
           <div class="node" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
             <div class="node-text">
               <i
@@ -246,7 +246,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
                 <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'"
+                    v-tippy="saga.isSagaInitiated ? 'Saga Initiated / Updated' : !saga.isSagaInitiated && saga.isSagaCompleted ? 'Saga Completed' : 'Message originated from Saga'"
                     :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>
@@ -254,7 +254,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
               </div>
             </div>
           </div>
-          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" />
+          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" v-tippy="'Processing Endpoint'" />
         </template>
       </VueFlow>
     </div>

From 68c90a7802d1689e260b04265d56f998631f7637 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Mon, 12 May 2025 10:29:00 +1000
Subject: [PATCH 2/2] Remove tippy form addresses

Otherwise it can hide the address expanded tooltip
---
 .../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 26518861c..133604a1b 100644
--- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
+++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue
@@ -225,7 +225,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
       <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" />
         <template #node-message="{ id, data }: { id: string; data: NodeData }">
-          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" v-tippy="'Sending Endpoint'" />
+          <TextEllipses class="address" :text="`${data.sendingEndpoint.name}@${data.sendingEndpoint.host}`" />
           <div class="node" :class="{ error: data.isError, 'current-message': id === store.state.data.id }">
             <div class="node-text">
               <i
@@ -254,7 +254,7 @@ const selectedErrorColor = hexToCSSFilter("#e8e6e8").filter;
               </div>
             </div>
           </div>
-          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" v-tippy="'Processing Endpoint'" />
+          <TextEllipses class="address" :text="`${data.receivingEndpoint.name}@${data.receivingEndpoint.host}`" />
         </template>
       </VueFlow>
     </div>