Merge remote-tracking branch 'origin/demo' into feat/monitoringpage-pim

2026-01-08 09:54:48 +01:00
parent 4356f201ab
commit a2b4847ca4
48 changed files with 3038 additions and 527 deletions
--- a/src/pages/MonitoringPage/Components.tsx
+++ b/src/pages/MonitoringPage/Components.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styles from './MonitoringPage.module.css';
+import useProgramStore from '../../utils/programStore';

 /**
 * HELPER: Unified sender function
@@ -110,38 +111,47 @@ interface StatusListProps {

 // --- STATUS LIST COMPONENT ---
 export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
+
  return (
    <section className={styles.phaseBox}>
      <h3>{title}</h3>
      <ul>
-        {items.length > 0 ? (
-          items.map((item, idx) => {
-            const isAchieved = item.achieved;
-            const showIndicator = type !== 'norm';
-            const canOverride = showIndicator && !isAchieved;
+        {items.map((item, idx) => {
+          let isAchieved = item.achieved;
+          const showIndicator = type !== 'norm';
+          const canOverride = showIndicator && !isAchieved;

-            return (
-              <li key={item.id ?? idx} className={styles.statusItem}>
-                {showIndicator && (
-                  <span 
-                    className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
-                    onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
-                    title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
-                    style={{ cursor: canOverride ? 'pointer' : 'default' }}
-                  >
-                    {isAchieved ? "✔️" : "❌"}
-                  </span>
-                )}
+          const handleOverrideClick = () => {
+            if (!canOverride) return;

-                <span className={styles.itemDescription}>
-                  {item.description || item.label || item.norm}
+            let contextValue = String(item.id);
+
+           
+            if (type === 'trigger' || type === 'cond_norm') {
+              if (item.condition?.id) {
+                contextValue = String(item.condition);
+              }
+            }
+
+            sendUserInterrupt("override", contextValue);
+          };
+
+          return (
+            <li key={item.id ?? idx} className={styles.statusItem}>
+              {showIndicator && (
+                <span 
+                  className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
+                  onClick={handleOverrideClick}
+                >
+                  {isAchieved ? "✔️" : "❌"}
                </span>
-              </li>
-            );
-          })
-        ) : (
-          <p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
-        )}
+              )}
+              <span className={styles.itemDescription}>
+                {item.description || item.label || item.norm}
+              </span>
+            </li>
+          );
+        })}
      </ul>
    </section>
  );
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -4,9 +4,9 @@ import useProgramStore from "../../utils/programStore.ts";
 import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
 import { nextPhase, useExperimentLogger } from ".//MonitoringPageAPI.ts"

-type Goal = { id?: string | number; description?: string; achieved?: boolean };
-type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
-type Norm = { id?: string | number; norm?: string };
+import type { GoalNodeData } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx';
+import type { TriggerNodeData } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx';
+import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx';

 const MonitoringPage: React.FC = () => {
  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
@@ -16,9 +16,32 @@ 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 phaseIds = getPhaseIds();
  const [phaseIndex, setPhaseIndex] = React.useState(0);
+  
+  
+  const handleStreamUpdate = React.useCallback((data: any) => {
+    // Check for phase updates
+    if (data.type === 'phase_update' && data.phase_id) {
+      const allIds = getPhaseIds();
+      const newIndex = allIds.indexOf(data.phase_id);
+      if (newIndex !== -1) {
+        setPhaseIndex(newIndex);
+      }
+    } 
+    
+    
+    else if (data.type === 'trigger_update' || data.type === 'goal_update') {
+    setActiveIds((prev) => ({
+      ...prev,
+      [data.id]: data.achieved // data.id is de key, achieved is true/false
+    }));
+  }
+  }, [getPhaseIds]);
+
+  useExperimentLogger(handleStreamUpdate);

  if (phaseIds.length === 0) {
    return <p className={styles.empty}>No program loaded.</p>;
@@ -26,9 +49,63 @@ const MonitoringPage: React.FC = () => {

  const phaseId = phaseIds[phaseIndex];

-  const goals = getGoalsInPhase(phaseId) as Goal[];
-  const triggers = getTriggersInPhase(phaseId) as Trigger[];
-  const norms = getNormsInPhase(phaseId) as Norm[];
+  const goals = (getGoalsInPhase(phaseId) as any[]).map(g => ({
+    ...g,
+    label: g.name, 
+    achieved: activeIds[g.id] ?? false 
+  }));
+
+
+  const triggers = (getTriggersInPhase(phaseId) as any[]).map(t => ({
+    ...t,
+    label: (() => {
+      // Determine the Condition Prefix
+      let prefix = t.label; // Default fallback
+      if (t.condition?.keyword) {
+        prefix = `if keywords said: "${t.condition.keyword}"`;
+      } else if (t.condition?.name) {
+        prefix = `if LLM belief: ${t.condition.name}`;
+      }
+
+      // Format the Plan Steps
+      // We check if plan exists and has steps
+      const stepLabels = t.plan?.steps?.map((step: any) => {
+     
+        return step.label || step.name || "Action"; 
+      }) || [];
+
+      const planText = stepLabels.length > 0 
+        ? `➔ Do: ${stepLabels.join(", ")}` 
+        : "➔ (No actions set)";
+
+      // "If [Condition] ➔ Do: [Steps]"
+      return `${prefix} ${planText}`;
+    })(),
+    achieved: activeIds[t.id] ?? false 
+  }));
+  const norms = (getNormsInPhase(phaseId) as NormNodeData[])
+    .filter(n => !n.condition)
+    .map(n => ({
+      ...n,
+      label: n.norm, 
+    }));
+    const conditionalNorms = (getNormsInPhase(phaseId) as any[])
+    .filter(n => !!n.condition) // Only items with a condition
+    .map(n => ({
+      ...n,
+      label: (() => {
+        let prefix = "";
+        if (n.condition?.keyword) {
+          prefix = `if keywords said: "${n.condition.keyword}"`;
+        } else if (n.condition?.name) {
+          prefix = `if LLM belief: ${n.condition.name}`;
+        }
+        
+    
+        return `${prefix} ➔ Norm: ${n.norm}`;
+      })(),
+      achieved: activeIds[n.id] ?? false
+    }));

  // Handle logic of 'next' button.
  const handleNext = async () => {
@@ -42,20 +119,27 @@ const MonitoringPage: React.FC = () => {
      setLoading(false);
    }
  };
-  useExperimentLogger();
+
+
  return (
    <div className={styles.dashboardContainer}>
      {/* HEADER */}
      <header className={styles.experimentOverview}>
        <div className={styles.phaseName}>
          <h2>Experiment Overview</h2>
-          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <p><strong>Phase</strong> {` ${phaseIndex + 1}`} </p>
          <div className={styles.phaseProgress}>
-            <span className={`${styles.phase} ${styles.completed}`}>1</span>
-            <span className={`${styles.phase} ${styles.completed}`}>2</span>
-            <span className={`${styles.phase} ${styles.current}`}>3</span>
-            <span className={styles.phase}>4</span>
-            <span className={styles.phase}>5</span>
+            {phaseIds.map((id, index) => (
+              <span 
+                key={id} 
+                className={`${styles.phase} ${
+                  index < phaseIndex ? styles.completed : 
+                  index === phaseIndex ? styles.current : ""
+                }`}
+              >
+                {index + 1}
+              </span>
+            ))}
          </div>
        </div>

@@ -92,10 +176,10 @@ const MonitoringPage: React.FC = () => {
        <StatusList title="Triggers" items={triggers} type="trigger" />
        <StatusList title="Norms" items={norms} type="norm" />
        <StatusList 
-          title="Conditional Norms" 
-          items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]} 
-          type="cond_norm" 
-        />
+        title="Conditional Norms" 
+        items={conditionalNorms} 
+        type="cond_norm" 
+      />
      </main>

      {/* LOGS */}
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -23,31 +23,28 @@ export async function nextPhase(): Promise<void> {
 * A hook that listens to the experiment stream and logs data to the console.
 * It does not render anything.
 */
-export function useExperimentLogger() {
+export function useExperimentLogger(onUpdate?: (data: any) => void) {
  useEffect(() => {
-    console.log("Starting Experiment Stream listener...");
-    
    const eventSource = new EventSource(`${API_BASE}/experiment_stream`);

    eventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
-        
-        console.log(" [Experiment Update Received] ", parsedData);
-        
+        if (onUpdate) {
+          onUpdate(parsedData);
+        }
      } catch (err) {
-        console.warn("Received non-JSON experiment data:", event.data);
+        console.warn("Stream parse error:", err);
      }
    };

    eventSource.onerror = (err) => {
-      console.error("SSE Connection Error (Experiment Stream):", err);
+      console.error("SSE Connection Error:", err);
      eventSource.close();
    };

    return () => {
-      console.log("Closing Experiment Stream listener...");
      eventSource.close();
    };
-  }, []);
+  }, [onUpdate]);
 }