From 39f013c47fae038dc50c6ef19f1067529c836d6b Mon Sep 17 00:00:00 2001
From: Pim Hutting <p.r.p.hutting@students.uu.nl>
Date: Thu, 8 Jan 2026 14:51:02 +0100
Subject: [PATCH] feat: goals now update in UI

ref: N25B-400
---
 src/pages/MonitoringPage/Components.tsx       | 11 ++++++++--
 src/pages/MonitoringPage/MonitoringPage.tsx   | 21 ++++++++++++++++---
 src/pages/MonitoringPage/MonitoringPageAPI.ts |  1 +
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/pages/MonitoringPage/Components.tsx b/src/pages/MonitoringPage/Components.tsx
index c5fe47b..c60a702 100644
--- a/src/pages/MonitoringPage/Components.tsx
+++ b/src/pages/MonitoringPage/Components.tsx
@@ -119,7 +119,7 @@ export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) =>
           let isAchieved = item.achieved;
           const showIndicator = type !== 'norm';
           const canOverride = showIndicator && !isAchieved;
-
+          const isCurrentGoal = type === 'goal' && item.isCurrent;
           const handleOverrideClick = () => {
             if (!canOverride) return;
             let contextValue = String(item.id);
@@ -136,7 +136,14 @@ export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) =>
                   {isAchieved ? "✔️" : "❌"}
                 </span>
               )}
-              <span className={styles.itemDescription}>
+             <span 
+                className={styles.itemDescription}
+                style={{ 
+                  textDecoration: isCurrentGoal ? 'underline' : 'none',
+                  fontWeight: isCurrentGoal ? 'bold' : 'normal',
+                  color: isCurrentGoal ? '#007bff' : 'inherit' 
+                }}
+              >
                 {item.description || item.label || item.norm}
               </span>
             </li>
diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 3385274..3d354ec 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -17,6 +17,7 @@ const MonitoringPage: React.FC = () => {
   // Can be used to block actions until feedback from CB.
   const [loading, setLoading] = React.useState(false);
   const [activeIds, setActiveIds] = React.useState<Record<string, boolean>>({});
+  const [goalIndex, setGoalIndex] = React.useState(0);
 
   const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
@@ -29,11 +30,25 @@ const MonitoringPage: React.FC = () => {
       const newIndex = allIds.indexOf(data.phase_id);
       if (newIndex !== -1) {
         setPhaseIndex(newIndex);
+        setGoalIndex(0); //when phase change we reset the index
       }
     } 
-    
-    
-    else if (data.type === 'trigger_update' || data.type === 'goal_update') {
+    else if (data.type === 'goal_update') {
+    // We find which goal in the current phase matches this ID
+    const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]);
+    const gIndex = currentPhaseGoals.findIndex((g: any) => g.id === data.id);
+    if (gIndex !== -1) {
+      setGoalIndex(gIndex);
+      console.log(`Goal index updated to ${gIndex} for goal ID ${data.id}`);
+    }
+
+      setActiveIds((prev) => ({
+        ...prev,
+        [data.id]: true
+      }));
+    }
+
+    else if (data.type === 'trigger_update') {
     setActiveIds((prev) => ({
       ...prev,
       [data.id]: data.achieved // data.id is de key, achieved is true/false
diff --git a/src/pages/MonitoringPage/MonitoringPageAPI.ts b/src/pages/MonitoringPage/MonitoringPageAPI.ts
index b85a1eb..bf222c4 100644
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -31,6 +31,7 @@ export function useExperimentLogger(onUpdate?: (data: any) => void) {
       try {
         const parsedData = JSON.parse(event.data);
         if (onUpdate) {
+          console.log(event.data);
           onUpdate(parsedData);
         }
       } catch (err) {