From 5447c72c24568c3e0e7e3fa72cce1ef15f011cd5 Mon Sep 17 00:00:00 2001
From: andreaj00 <56693723+andreaj00@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:09:04 +0100
Subject: [PATCH] Latest debugger event on top (#543)

Co-authored-by: Andrea Jiang <jianga@ethz.ch>
---
 frontend/index.css  |  8 ++++++++
 frontend/index.html | 14 +++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/index.css b/frontend/index.css
index c88f63281..0c46abbd6 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -82,6 +82,14 @@ button {
     overflow: auto;
 }
 
+.log-message {
+    padding: 10px;
+    border: 1px solid #000;
+    border-radius: 5px;
+    margin-top: 5px;
+    overflow: auto;
+}
+
 /* Close connection button*/
 .close-button {
     background-color: #c0392b; /* Red color */
diff --git a/frontend/index.html b/frontend/index.html
index ed77a20bf..23c3be7b2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -76,7 +76,7 @@
 
         function handleOpenWebSocket(){
             const message = `WebSocket connection for Port ${port} established.`
-            setLoggedMessages(prevMessages => [...prevMessages, message]);
+            addLoggedMessage(message);
             console.log(message);
 
             // Clear error messages
@@ -109,6 +109,10 @@
             console.log(`WebSocket connection for Port ${port} closed.`);
         }
 
+        const addLoggedMessage = (newMessage) => {
+            setLoggedMessages(prevMessages => [newMessage, ...prevMessages]);
+        }
+
         const decomposeJSON = (message) => {
             // Note: This decompose function is closely tied to the composition in websocketwriter.go.
             // We expect the following structure:
@@ -135,7 +139,7 @@
             console.log("new message accepted on port: ", port);
 
             // Accept ORIGINAL Log (without modifications)
-            setLoggedMessages(prevMessages => [...prevMessages, incomingMessage]);
+            addLoggedMessage(incomingMessage);
 
             // Send the response on the WebSocket
             let webSocketResponse = {
@@ -153,7 +157,7 @@
             console.log("new message async accepted on port: ", port);
 
             // Accept ORIGINAL Log (without modifications and automatically)
-            setLoggedMessages(prevMessages => [...prevMessages, message]);
+            addLoggedMessage(message);
 
             // Send the response on the WebSocket
             let webSocketResponse = {
@@ -174,7 +178,7 @@
 
             // Accept REPLACED Log
             const acceptingModifiedMessage = JSON.stringify(incomingMessageJSON.current, null, 2)
-            setLoggedMessages(prevMessages => [...prevMessages, acceptingModifiedMessage]);
+            addLoggedMessage(acceptingModifiedMessage);
 
             // Send the response on the WebSocket
 
@@ -423,7 +427,7 @@
                     Accepted Logs:
                     <div id="log-placeholder" className="log-screen json-message">
                         {loggedMessages.map((log, index) => (
-                            <p key={index}>{log}</p>
+                            <p key={index} className="log-message">{log}</p>
                         ))}
                     </div>
                 </div>