From d8cae9f838ead68440f2560ad25dc85e806e98a7 Mon Sep 17 00:00:00 2001
From: Pim Hutting <p.r.p.hutting@students.uu.nl>
Date: Fri, 16 Jan 2026 14:25:26 +0100
Subject: [PATCH] feat: added reset experiment (in UI)

ref:N25B-400
---
 src/pages/MonitoringPage/MonitoringPage.tsx   | 35 ++++++++++++++++---
 src/pages/MonitoringPage/MonitoringPageAPI.ts | 17 ++++-----
 src/pages/VisProgPage/VisProg.tsx             |  6 ++--
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/pages/MonitoringPage/MonitoringPage.tsx b/src/pages/MonitoringPage/MonitoringPage.tsx
index 5d34d95..1733898 100644
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
 import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './MonitoringPageComponents.tsx';
-import { nextPhase, useExperimentLogger, useStatusLogger, pauseExperiment, playExperiment, resetExperiment, resetPhase, type ExperimentStreamData, type GoalUpdate, type TriggerUpdate, type CondNormsStateUpdate, type PhaseUpdate } from ".//MonitoringPageAPI.ts"
+import { nextPhase, useExperimentLogger, useStatusLogger, pauseExperiment, playExperiment, resetPhase, type ExperimentStreamData, type GoalUpdate, type TriggerUpdate, type CondNormsStateUpdate, type PhaseUpdate } from ".//MonitoringPageAPI.ts"
+import { graphReducer, runProgramm } from '../VisProgPage/VisProg.tsx';
 
 import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx';
 
@@ -39,6 +40,8 @@ const MonitoringPage: React.FC = () => {
   const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
   const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
   const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+  
 
   // Can be used to block actions until feedback from CB.
   const [loading, setLoading] = React.useState(false);
@@ -134,6 +137,31 @@ const handleStatusUpdate = React.useCallback((data: any) => {
   //For pings that update conditional norms
   useStatusLogger(handleStatusUpdate);
 
+const resetExperiment = React.useCallback(async () => {
+  try {
+    setLoading(true);
+
+    const phases = graphReducer();
+    setProgramState({ phases });
+
+    //reset monitoring page
+    setActiveIds({});      //remove active items
+    setPhaseIndex(0);      //Go to first phase
+    setGoalIndex(0);       // Reset goal indicator
+    setIsFinished(false);  // Reset experiment done
+
+    //inform backend
+    await runProgramm(); 
+    
+    console.log("Experiment & UI successfully reset to start.");
+  } catch (err) {
+    console.error("Failed to reset program:", err);
+  } finally {
+    setLoading(false);
+  }
+}, [graphReducer, setProgramState]);
+
+
   if (phaseIds.length === 0) {
     return <p className={styles.empty}>No program loaded.</p>;
   }
@@ -223,9 +251,6 @@ const handleStatusUpdate = React.useCallback((data: any) => {
         case "nextPhase":
           await nextPhase();
           break;
-        case "resetPhase":
-          await resetPhase();
-          break;
         case "resetExperiment":
           await resetExperiment();
           break;
@@ -324,7 +349,7 @@ const handleStatusUpdate = React.useCallback((data: any) => {
             {/*Restart Experiment button*/}
             <button 
               className={styles.restartExperiment}
-              onClick={() => handleButton("resetExperiment")}
+              onClick={() => resetExperiment()}
               disabled={loading}
               >
                 ⟲
diff --git a/src/pages/MonitoringPage/MonitoringPageAPI.ts b/src/pages/MonitoringPage/MonitoringPageAPI.ts
index 36cae5a..7706ed3 100644
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -44,21 +44,17 @@ export async function resetPhase(): Promise<void> {
 }
 
 /**
- * Sends an API call to the CB for going to reset the experiment
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function resetExperiment(): Promise<void> {
-  const type = "reset_experiment"
-  const context = ""
-  sendAPICall(type, context)
-}
-
+ * Sends an API call to the CB for going to pause experiment
+*/
 export async function pauseExperiment(): Promise<void> {
   const type = "pause"
   const context = "true"
   sendAPICall(type, context)
 }
 
+/**
+ * Sends an API call to the CB for going to resume experiment
+*/
 export async function playExperiment(): Promise<void> {
   const type = "pause"
   const context = "false"
@@ -111,6 +107,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v
     };
   }, []); 
 }
+
 /**
  * A hook that listens to the status stream that updates active conditional norms
  * via updates sent from the backend
@@ -131,5 +128,5 @@ export function useStatusLogger(onUpdate?: (data: any) => void) {
       } catch (err) { console.warn("Status stream error:", err); }
     };
     return () => eventSource.close();
-  }, []); // LEGE dependency array
+  }, []);
 }
\ No newline at end of file
diff --git a/src/pages/VisProgPage/VisProg.tsx b/src/pages/VisProgPage/VisProg.tsx
index ec2747c..7d7aa1f 100644
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -144,9 +144,9 @@ function VisualProgrammingUI() {
     </ReactFlowProvider>
   );
 }
-
+ 
 // currently outputs the prepared program to the console
-function runProgramm() {
+export function runProgramm() {
   const phases = graphReducer();
   const program = {phases}
   console.log(JSON.stringify(program, null, 2));
@@ -170,7 +170,7 @@ function runProgramm() {
 /**
  * Reduces the graph into its phases' information and recursively calls their reducing function
  */ 
-function graphReducer() {
+export function graphReducer() {
   const { nodes } = useFlowStore.getState();
   return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
     .map((n) => {