From 314ca855bde391f65239d8c795883a4a7fec9519 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Fri, 2 May 2025 13:56:53 -0600
Subject: [PATCH 1/3] adding extensions property to CodeEditor

---
 src/Frontend/src/components/CodeEditor.vue    | 20 +++----
 .../messages2/SagaDiagram/SagaUpdateNode.vue  | 52 ++++++++++++-------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/Frontend/src/components/CodeEditor.vue b/src/Frontend/src/components/CodeEditor.vue
index 7894aee13..c74dc9a07 100644
--- a/src/Frontend/src/components/CodeEditor.vue
+++ b/src/Frontend/src/components/CodeEditor.vue
@@ -19,38 +19,38 @@ const props = withDefaults(
     showGutter?: boolean;
     showCopyToClipboard?: boolean;
     ariaLabel?: string;
-    css?: string;
+    extensions?: Extension[];
   }>(),
-  { readOnly: true, showGutter: true, showCopyToClipboard: true }
+  { readOnly: true, showGutter: true, showCopyToClipboard: true, extensions: () => [] }
 );
 
 const extensions = computed(() => {
-  const extensions: Extension[] = [];
+  const allExtensions: Extension[] = [...(props.extensions || [])];
 
   switch (props.language) {
     case "json":
-      extensions.push(json());
+      allExtensions.push(json());
       break;
     case "xml":
-      extensions.push(xml());
+      allExtensions.push(xml());
       break;
     case "shell":
-      extensions.push(StreamLanguage.define(shell));
+      allExtensions.push(StreamLanguage.define(shell));
       break;
     case "powershell":
-      extensions.push(StreamLanguage.define(powerShell));
+      allExtensions.push(StreamLanguage.define(powerShell));
       break;
     case "csharp":
-      extensions.push(StreamLanguage.define(csharp));
+      allExtensions.push(StreamLanguage.define(csharp));
       break;
   }
 
-  return extensions;
+  return allExtensions;
 });
 </script>
 
 <template>
-  <div class="wrapper" :aria-label="ariaLabel" :class="css">
+  <div class="wrapper" :aria-label="ariaLabel">
     <div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
       <div><slot name="toolbarLeft"></slot></div>
       <div>
diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index ae180c202..2d7fc379f 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -7,6 +7,7 @@ import DiffViewer from "@/components/messages2/DiffViewer.vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { ref, watch, computed } from "vue";
+import { EditorView } from "@codemirror/view";
 import { parse, stringify } from "lossless-json";
 
 // Import the images directly
@@ -17,6 +18,30 @@ import TimeoutIcon from "@/assets/timeout.svg";
 import EventIcon from "@/assets/event.svg";
 import SagaTimeoutIcon from "@/assets/SagaTimeoutIcon.svg";
 
+// Define the monospace theme for CodeEditor
+const monospaceTheme = EditorView.baseTheme({
+  "&": {
+    fontFamily: "monospace",
+    fontSize: "0.75rem",
+    backgroundColor: "#f2f2f2",
+  },
+  ".cm-editor": {
+    fontFamily: "monospace",
+    fontSize: "0.75rem",
+    backgroundColor: "#f2f2f2",
+  },
+  ".cm-scroller": {
+    backgroundColor: "#f2f2f2",
+  },
+});
+
+// Define types for JSON values and properties
+type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+interface JsonObject {
+  [key: string]: JsonValue;
+}
+type JsonArray = Array<JsonValue>;
+
 const props = defineProps<{
   update: SagaUpdateViewModel;
   showMessageData?: boolean;
@@ -177,7 +202,7 @@ const hasStateChanges = computed(() => {
 
             <!-- Initial state display -->
             <div v-else-if="update.IsFirstNode" class="json-container">
-              <CodeEditor css="monospace-code" :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" />
+              <CodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" :extensions="[monospaceTheme]" />
             </div>
 
             <!-- No changes message -->
@@ -404,6 +429,14 @@ const hasStateChanges = computed(() => {
   background-color: transparent;
 }
 
+/* Override CodeEditor wrapper styles */
+.json-container :deep(.wrapper) {
+  border-radius: 0;
+  border: none;
+  background-color: #f2f2f2;
+  margin-top: 0;
+}
+
 .no-changes-message {
   padding: 1rem;
   text-align: center;
@@ -418,23 +451,6 @@ const hasStateChanges = computed(() => {
   color: #a94442;
 }
 
-/* Monospace font styling that matches DiffViewer */
-:deep(.monospace-code) {
-  border-radius: 0;
-  border: none;
-  background-color: #f2f2f2;
-}
-
-:deep(.monospace-code) .cm-editor {
-  font-family: monospace;
-  font-size: 0.75rem;
-  background-color: #f2f2f2;
-}
-
-:deep(.monospace-code) .cm-scroller {
-  background-color: #f2f2f2;
-}
-
 @-webkit-keyframes blink-border {
   0%,
   100% {

From 759e59d9431181982391d6024eeb01d2586c0f29 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Fri, 2 May 2025 13:58:50 -0600
Subject: [PATCH 2/3] removing vendor-specific CSS

---
 .../messages2/SagaDiagram/SagaUpdateNode.vue  | 93 -------------------
 1 file changed, 93 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 2d7fc379f..4120b7430 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -313,9 +313,6 @@ const hasStateChanges = computed(() => {
 
 .cell-inner-side--active {
   border: solid 5px #00a3c4;
-  -webkit-animation: blink-border 1.8s ease-in-out;
-  -moz-animation: blink-border 1.8s ease-in-out;
-  -o-animation: blink-border 1.8s ease-in-out;
   animation: blink-border 1.8s ease-in-out;
 }
 
@@ -451,96 +448,6 @@ const hasStateChanges = computed(() => {
   color: #a94442;
 }
 
-@-webkit-keyframes blink-border {
-  0%,
-  100% {
-    border-color: #00a3c4;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #00a3c4;
-  }
-}
-
-@-moz-keyframes blink-border {
-  0%,
-  100% {
-    border-color: #00a3c4;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #00a3c4;
-  }
-}
-
-@-o-keyframes blink-border {
-  0%,
-  100% {
-    border-color: #00a3c4;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #00a3c4;
-  }
-}
-
-@keyframes blink-border {
-  0%,
-  100% {
-    border-color: #00a3c4;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #00a3c4;
-  }
-}
-
-@-moz-keyframes blink-border {
-  0%,
-  100% {
-    border-color: #000000;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #000000;
-  }
-}
-
-@-o-keyframes blink-border {
-  0%,
-  100% {
-    border-color: #000000;
-  }
-  20%,
-  60% {
-    border-color: #cccccc;
-  }
-  40%,
-  80% {
-    border-color: #000000;
-  }
-}
-
 @keyframes blink-border {
   0%,
   100% {

From 120dfee7efe898df1047594b3ca69a9461385916 Mon Sep 17 00:00:00 2001
From: Christian <christian.quiros+github@gmail.com>
Date: Fri, 2 May 2025 14:52:03 -0600
Subject: [PATCH 3/3] max height for saga initialized state

---
 .../components/messages2/SagaDiagram/SagaUpdateNode.vue    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
index 4120b7430..681bc883a 100644
--- a/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
+++ b/src/Frontend/src/components/messages2/SagaDiagram/SagaUpdateNode.vue
@@ -201,7 +201,7 @@ const hasStateChanges = computed(() => {
             </div>
 
             <!-- Initial state display -->
-            <div v-else-if="update.IsFirstNode" class="json-container">
+            <div v-else-if="update.IsFirstNode" class="json-container json-container--first-node">
               <CodeEditor :model-value="sagaUpdateStateChanges.formattedState || ''" language="json" :showCopyToClipboard="false" :showGutter="false" :extensions="[monospaceTheme]" />
             </div>
 
@@ -426,6 +426,11 @@ const hasStateChanges = computed(() => {
   background-color: transparent;
 }
 
+.json-container--first-node {
+  max-height: 300px;
+  overflow: auto;
+}
+
 /* Override CodeEditor wrapper styles */
 .json-container :deep(.wrapper) {
   border-radius: 0;