Compare commits
4 Commits
refactor/m
...
feat/simpl
| Author | SHA1 | Date | |
|---|---|---|---|
|
2ecb33dcde | ||
|
|
15c9fc6f4d | ||
|
|
9dae45e398 | ||
|
|
bd93b04bfd |
@@ -8,9 +8,6 @@
|
||||
background-color: #242424;
|
||||
|
||||
--accent-color: #008080;
|
||||
--panel-shadow:
|
||||
0 1px 2px white,
|
||||
0 8px 24px rgba(190, 186, 186, 0.253);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -18,14 +15,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--panel-shadow:
|
||||
0 1px 2px rgba(221, 221, 221, 0.178),
|
||||
0 8px 24px rgba(27, 27, 27, 0.507);
|
||||
}
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './MonitoringPage.module.css';
|
||||
|
||||
/**
|
||||
* HELPER: Unified sender function
|
||||
* In a real app, you might move this to a /services or /hooks folder
|
||||
*/
|
||||
const sendUserInterrupt = async (type: string, context: string) => {
|
||||
try {
|
||||
const response = await fetch("http://localhost:8000/button_pressed", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ type, context }),
|
||||
});
|
||||
if (!response.ok) throw new Error("Backend response error");
|
||||
console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
|
||||
} catch (err) {
|
||||
console.error(`Failed to send interrupt:`, err);
|
||||
}
|
||||
};
|
||||
|
||||
// --- GESTURE COMPONENT ---
|
||||
export const GestureControls: React.FC = () => {
|
||||
const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
|
||||
|
||||
const gestures = [
|
||||
{ label: "Body Talk 1", value: "animations/Stand/BodyTalk/Speaking/BodyTalk_1" },
|
||||
{ label: "Thinking 8", value: "animations/Stand/Gestures/Thinking_8" },
|
||||
{ label: "Thinking 1", value: "animations/Stand/Gestures/Thinking_1" },
|
||||
{ label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.gestures}>
|
||||
<h4>Gestures</h4>
|
||||
<div className={styles.gestureInputGroup}>
|
||||
<select
|
||||
value={selectedGesture}
|
||||
onChange={(e) => setSelectedGesture(e.target.value)}
|
||||
>
|
||||
{gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
|
||||
</select>
|
||||
<button onClick={() => sendUserInterrupt("gesture", selectedGesture)}>
|
||||
Actuate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- PRESET SPEECH COMPONENT ---
|
||||
export const SpeechPresets: React.FC = () => {
|
||||
const phrases = [
|
||||
{ label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
|
||||
{ label: "Repeat please", text: "Could you repeat that please" },
|
||||
{ label: "About yourself", text: "Tell me something about yourself" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.speech}>
|
||||
<h4>Speech Presets</h4>
|
||||
<ul>
|
||||
{phrases.map((phrase, i) => (
|
||||
<li key={i}>
|
||||
<button
|
||||
className={styles.speechBtn}
|
||||
onClick={() => sendUserInterrupt("speech", phrase.text)}
|
||||
>
|
||||
"{phrase.label}"
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- DIRECT SPEECH (INPUT) COMPONENT ---
|
||||
export const DirectSpeechInput: React.FC = () => {
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const handleSend = () => {
|
||||
if (!text.trim()) return;
|
||||
sendUserInterrupt("speech", text);
|
||||
setText(""); // Clear after sending
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.directSpeech}>
|
||||
<h4>Direct Pepper Speech</h4>
|
||||
<div className={styles.speechInput}>
|
||||
<input
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="Type message..."
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
|
||||
/>
|
||||
<button onClick={handleSend}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- interface for goals/triggers/norms/conditional norms ---
|
||||
type StatusItem = {
|
||||
id?: string | number;
|
||||
achieved?: boolean;
|
||||
description?: string;
|
||||
label?: string;
|
||||
norm?: string;
|
||||
};
|
||||
|
||||
interface StatusListProps {
|
||||
title: string;
|
||||
items: StatusItem[];
|
||||
type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
|
||||
}
|
||||
|
||||
// --- 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;
|
||||
|
||||
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>
|
||||
)}
|
||||
|
||||
<span className={styles.itemDescription}>
|
||||
{item.description || item.label || item.norm}
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
|
||||
)}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// --- Robot Connected ---
|
||||
export const RobotConnected = () => {
|
||||
|
||||
/**
|
||||
* The current connection state:
|
||||
* - `true`: Robot is connected.
|
||||
* - `false`: Robot is not connected.
|
||||
* - `null`: Connection status is unknown (initial check in progress).
|
||||
*/
|
||||
const [connected, setConnected] = useState<boolean | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Open a Server-Sent Events (SSE) connection to receive live ping updates.
|
||||
// We're expecting a stream of data like that looks like this: `data = False` or `data = True`
|
||||
const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
|
||||
eventSource.onmessage = (event) => {
|
||||
|
||||
// Expecting messages in JSON format: `true` or `false`
|
||||
console.log("received message:", event.data);
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
try {
|
||||
setConnected(data)
|
||||
}
|
||||
catch {
|
||||
console.log("couldnt extract connected from incoming ping data")
|
||||
}
|
||||
|
||||
} catch {
|
||||
console.log("Ping message not in correct format:", event.data);
|
||||
}
|
||||
};
|
||||
|
||||
// Clean up the SSE connection when the component unmounts.
|
||||
return () => eventSource.close();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>Connection:</h3>
|
||||
<p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
.dashboardContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
|
||||
grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
|
||||
grid-template-areas:
|
||||
"header logs"
|
||||
"main logs"
|
||||
"footer footer";
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text-main);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.experimentOverview {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
color: color;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--panel-shadow);
|
||||
position: static; /* ensures it scrolls away */
|
||||
}
|
||||
|
||||
.phaseProgress {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.phase {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.completed {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: rgb(255, 123, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connected {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pausePlayInactive{
|
||||
background-color: gray;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pausePlayActive{
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.next {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.restartPhase{
|
||||
background-color: rgb(255, 123, 0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.restartExperiment{
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* MAIN GRID */
|
||||
.phaseOverview {
|
||||
grid-area: main;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
gap: 1rem;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--panel-shadow);
|
||||
|
||||
}
|
||||
|
||||
.phaseBox {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--panel-shadow);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.phaseOverviewText {
|
||||
grid-column: 1 / -1; /* make the title span across both columns */
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 0; /* remove default section margin */
|
||||
padding: 0.25rem 0; /* smaller internal space */
|
||||
}
|
||||
|
||||
.phaseOverviewText h3{
|
||||
margin: 0; /* removes top/bottom whitespace */
|
||||
padding: 0; /* keeps spacing tight */
|
||||
}
|
||||
|
||||
.phaseBox h3 {
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.checked::before {
|
||||
content: '✔️ ';
|
||||
}
|
||||
|
||||
/* LOGS */
|
||||
.logs {
|
||||
grid-area: logs;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
box-shadow: var(--panel-shadow);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.logs textarea {
|
||||
width: 100%;
|
||||
height: 83%;
|
||||
margin-top: 0.5rem;
|
||||
background-color: Canvas;
|
||||
color: CanvasText;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.logs button {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--panel-shadow);
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.controlsSection {
|
||||
grid-area: footer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
box-shadow: var(--panel-shadow);
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.controlsSection button {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--panel-shadow);
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.gestures,
|
||||
.speech,
|
||||
.directSpeech {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.speechInput {
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.speechInput input {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
background-color: Canvas;
|
||||
color: CanvasText;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.speechInput button {
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
background-color: Canvas;
|
||||
color: CanvasText;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 900px) {
|
||||
.phaseOverview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.controlsSection {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
import React from 'react';
|
||||
import styles from './MonitoringPage.module.css';
|
||||
import useProgramStore from "../../utils/programStore.ts";
|
||||
import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './Components';
|
||||
import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } 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 };
|
||||
|
||||
|
||||
/**
|
||||
* Helper function for handling the experiment controls buttons.
|
||||
* @param buttonType - Type of button that was pressed.
|
||||
* @param setLoading - Reference to the function that sets the current loading value.
|
||||
* @param _context - (Optional) context parameter that could get used in an API call.
|
||||
* @param _endpoint - (Optional) context parameter that could get used in an API call.
|
||||
*/
|
||||
const handleButton = async (buttonType: string, setLoading: React.Dispatch<React.SetStateAction<boolean>>, _context?: string, _endpoint?: string,) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
switch (buttonType) {
|
||||
case "pause":
|
||||
await pauseExperiment();
|
||||
break;
|
||||
case "play":
|
||||
await playExperiment();
|
||||
break;
|
||||
case "nextPhase":
|
||||
await nextPhase();
|
||||
break;
|
||||
case "resetPhase":
|
||||
await resetPhase();
|
||||
break;
|
||||
case "resetExperiment":
|
||||
await resetExperiment();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines the pages experiment controls section
|
||||
* @returns an JSX React element
|
||||
*/
|
||||
const experimentControls = () => {
|
||||
// Define use states for playing and loading
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [isPlaying, setIsPlaying] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className={styles.experimentControls}>
|
||||
<h3>Experiment Controls</h3>
|
||||
<div className={styles.controlsButtons}>
|
||||
{/*Pause button*/}
|
||||
<button
|
||||
className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
|
||||
onClick={() => {
|
||||
setIsPlaying(false);
|
||||
handleButton("pause", setLoading);}
|
||||
}
|
||||
disabled={loading}
|
||||
>❚❚</button>
|
||||
|
||||
{/*Play button*/}
|
||||
<button
|
||||
className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
|
||||
onClick={() => {
|
||||
setIsPlaying(true);
|
||||
handleButton("play", setLoading);}
|
||||
}
|
||||
disabled={loading}
|
||||
>▶</button>
|
||||
|
||||
{/*Next button*/}
|
||||
<button
|
||||
className={styles.next}
|
||||
onClick={() => handleButton("nextPhase", setLoading)}
|
||||
disabled={loading}
|
||||
>
|
||||
⏭
|
||||
</button>
|
||||
|
||||
{/*Restart Phase button*/}
|
||||
<button
|
||||
className={styles.restartPhase}
|
||||
onClick={() => handleButton("resetPhase", setLoading)}
|
||||
disabled={loading}
|
||||
>
|
||||
↩
|
||||
</button>
|
||||
|
||||
{/*Restart Experiment button*/}
|
||||
<button
|
||||
className={styles.restartExperiment}
|
||||
onClick={() => handleButton("resetExperiment", setLoading)}
|
||||
disabled={loading}
|
||||
>
|
||||
⟲
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const MonitoringPage: React.FC = () => {
|
||||
const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
|
||||
const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
|
||||
const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
|
||||
const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
|
||||
|
||||
// Can be used to block actions until feedback from CB.
|
||||
|
||||
|
||||
const phaseIds = getPhaseIds();
|
||||
const [phaseIndex, _] = React.useState(0);
|
||||
|
||||
if (phaseIds.length === 0) {
|
||||
return <p className={styles.empty}>No program loaded.</p>;
|
||||
}
|
||||
|
||||
const phaseId = phaseIds[phaseIndex];
|
||||
|
||||
const goals = getGoalsInPhase(phaseId) as Goal[];
|
||||
const triggers = getTriggersInPhase(phaseId) as Trigger[];
|
||||
const norms = getNormsInPhase(phaseId) as Norm[];
|
||||
|
||||
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*Experiment Controls*/}
|
||||
{experimentControls()}
|
||||
|
||||
<div className={styles.connectionStatus}>
|
||||
{RobotConnected()}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* MAIN GRID */}
|
||||
|
||||
<main className={styles.phaseOverview}>
|
||||
<section className={styles.phaseOverviewText}>
|
||||
<h3>Phase Overview</h3>
|
||||
</section>
|
||||
|
||||
<StatusList title="Goals" items={goals} type="goal" />
|
||||
<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"
|
||||
/>
|
||||
</main>
|
||||
|
||||
{/* LOGS */}
|
||||
<aside className={styles.logs}>
|
||||
<h3>Logs</h3>
|
||||
<div className={styles.logHeader}>
|
||||
<span>Global:</span>
|
||||
<button>ALL</button>
|
||||
<button>Add</button>
|
||||
<button className={styles.live}>Live</button>
|
||||
</div>
|
||||
<textarea defaultValue="Example Log: much log"></textarea>
|
||||
</aside>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer className={styles.controlsSection}>
|
||||
<GestureControls />
|
||||
<SpeechPresets />
|
||||
<DirectSpeechInput />
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MonitoringPage;
|
||||
@@ -1,64 +0,0 @@
|
||||
const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
|
||||
|
||||
|
||||
/**
|
||||
* HELPER: Unified sender function
|
||||
* In a real app, you might move this to a /services or /hooks folder
|
||||
*/
|
||||
const sendAPICall = async (type: string, context: string, endpoint?: string) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}${endpoint ?? ""}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ type, context }),
|
||||
});
|
||||
if (!response.ok) throw new Error("Backend response error");
|
||||
console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
|
||||
} catch (err) {
|
||||
console.error(`Failed to send api call:`, err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Sends an API call to the CB for going to the next phase.
|
||||
* In case we can't go to the next phase, the function will throw an error.
|
||||
*/
|
||||
export async function nextPhase(): Promise<void> {
|
||||
const type = "next_phase"
|
||||
const context = ""
|
||||
sendAPICall(type, context)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sends an API call to the CB for going to reset the currect phase
|
||||
* In case we can't go to the next phase, the function will throw an error.
|
||||
*/
|
||||
export async function resetPhase(): Promise<void> {
|
||||
const type = "reset_phase"
|
||||
const context = ""
|
||||
sendAPICall(type, context)
|
||||
}
|
||||
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
|
||||
export async function pauseExperiment(): Promise<void> {
|
||||
const type = "pause"
|
||||
const context = "true"
|
||||
sendAPICall(type, context)
|
||||
}
|
||||
|
||||
export async function playExperiment(): Promise<void> {
|
||||
const type = "pause"
|
||||
const context = "false"
|
||||
sendAPICall(type, context)
|
||||
}
|
||||
@@ -126,10 +126,3 @@
|
||||
outline: red solid 2pt;
|
||||
filter: drop-shadow(0 0 0.25rem red);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: var(--panel-shadow);
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@@ -16,7 +16,7 @@ import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
|
||||
import styles from './VisProg.module.css'
|
||||
import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
|
||||
import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
|
||||
import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
|
||||
import SimpleProgram from "../SimpleProgram/SimpleProgram.tsx";
|
||||
|
||||
// --| config starting params for flow |--
|
||||
|
||||
@@ -140,7 +140,7 @@ function VisualProgrammingUI() {
|
||||
}
|
||||
|
||||
// currently outputs the prepared program to the console
|
||||
function runProgramm() {
|
||||
function runProgram() {
|
||||
const phases = graphReducer();
|
||||
const program = {phases}
|
||||
console.log(JSON.stringify(program, null, 2));
|
||||
@@ -183,20 +183,20 @@ function VisProgPage() {
|
||||
const [showSimpleProgram, setShowSimpleProgram] = useState(false);
|
||||
const setProgramState = useProgramStore((state) => state.setProgramState);
|
||||
|
||||
const runProgram = () => {
|
||||
const onClick = () => {
|
||||
const phases = graphReducer(); // reduce graph
|
||||
setProgramState({ phases }); // <-- save to store
|
||||
setShowSimpleProgram(true); // show SimpleProgram
|
||||
runProgramm(); // send to backend if needed
|
||||
runProgram(); // send to backend if needed
|
||||
};
|
||||
|
||||
if (showSimpleProgram) {
|
||||
return (
|
||||
<div>
|
||||
<button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
|
||||
<button onClick={() => setShowSimpleProgram(false)}>
|
||||
Back to Editor ◀
|
||||
</button>
|
||||
<MonitoringPage/>
|
||||
<SimpleProgram/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -204,7 +204,7 @@ function VisProgPage() {
|
||||
return (
|
||||
<>
|
||||
<VisualProgrammingUI/>
|
||||
<button onClick={runProgram}>run program</button>
|
||||
<button onClick={onClick}>run program</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
176
test/pages/simpleProgram/SimpleProgram.test.tsx
Normal file
176
test/pages/simpleProgram/SimpleProgram.test.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
|
||||
import useProgramStore from "../../../src/utils/programStore";
|
||||
|
||||
/**
|
||||
* Helper to preload the program store before rendering.
|
||||
*/
|
||||
function loadProgram(phases: Record<string, unknown>[]) {
|
||||
useProgramStore.getState().setProgramState({ phases });
|
||||
}
|
||||
|
||||
describe("SimpleProgram", () => {
|
||||
beforeEach(() => {
|
||||
loadProgram([]);
|
||||
});
|
||||
|
||||
test("shows empty state when no program is loaded", () => {
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("No program loaded.")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders first phase content", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [{ id: "n1", norm: "Be polite" }],
|
||||
goals: [{ id: "g1", description: "Finish task", achieved: true }],
|
||||
triggers: [{ id: "t1", label: "Keyword trigger" }],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("Be polite")).toBeInTheDocument();
|
||||
expect(screen.getByText("Finish task")).toBeInTheDocument();
|
||||
expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders empty messages when phase has no data", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [],
|
||||
goals: [],
|
||||
triggers: [],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getAllByText("No norms defined.").length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getAllByText("No goals defined.").length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getAllByText("No triggers defined.").length).toBeGreaterThanOrEqual(1);
|
||||
expect(
|
||||
screen.getByText("No conditional norms defined.")
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("allows navigating between phases", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [],
|
||||
goals: [],
|
||||
triggers: [],
|
||||
},
|
||||
{
|
||||
id: "phase-2",
|
||||
norms: [{ id: "n2", norm: "Be careful" }],
|
||||
goals: [],
|
||||
triggers: [],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByText("Next ▶"));
|
||||
|
||||
expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
|
||||
expect(screen.getByText("Be careful")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("prev button is disabled on first phase", () => {
|
||||
loadProgram([{ id: "phase-1", norms: [], goals: [], triggers: [] }]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("◀ Prev")).toBeDisabled();
|
||||
});
|
||||
|
||||
test("next button is disabled on last phase", () => {
|
||||
loadProgram([{ id: "phase-1", norms: [], goals: [], triggers: [] }]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("Next ▶")).toBeDisabled();
|
||||
});
|
||||
|
||||
test("prev and next buttons enable/disable correctly when navigating", () => {
|
||||
loadProgram([
|
||||
{ id: "p1", norms: [], goals: [], triggers: [] },
|
||||
{ id: "p2", norms: [], goals: [], triggers: [] },
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
const prev = screen.getByText("◀ Prev");
|
||||
const next = screen.getByText("Next ▶");
|
||||
|
||||
expect(prev).toBeDisabled();
|
||||
expect(next).not.toBeDisabled();
|
||||
|
||||
fireEvent.click(next);
|
||||
|
||||
expect(prev).not.toBeDisabled();
|
||||
expect(next).toBeDisabled();
|
||||
});
|
||||
|
||||
test("renders achieved and unachieved goals with correct icons", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [],
|
||||
goals: [
|
||||
{ id: "g1", description: "Done goal", achieved: true },
|
||||
{ id: "g2", description: "Failed goal", achieved: false },
|
||||
],
|
||||
triggers: [],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("✔")).toBeInTheDocument();
|
||||
expect(screen.getByText("✖")).toBeInTheDocument();
|
||||
expect(screen.getByText("Done goal")).toBeInTheDocument();
|
||||
expect(screen.getByText("Failed goal")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders fallback labels when optional fields are missing", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [{}],
|
||||
goals: [{}],
|
||||
triggers: [{}],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("Unnamed norm")).toBeInTheDocument();
|
||||
expect(screen.getByText("Unnamed goal")).toBeInTheDocument();
|
||||
expect(screen.getByText("Unnamed trigger")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("does not crash when navigating beyond boundaries", () => {
|
||||
loadProgram([
|
||||
{ id: "p1", norms: [], goals: [], triggers: [] },
|
||||
{ id: "p2", norms: [], goals: [], triggers: [] },
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
fireEvent.click(screen.getByText("Next ▶"));
|
||||
fireEvent.click(screen.getByText("Next ▶"));
|
||||
|
||||
expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByText("◀ Prev"));
|
||||
fireEvent.click(screen.getByText("◀ Prev"));
|
||||
|
||||
expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,83 +0,0 @@
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
|
||||
import useProgramStore from "../../../src/utils/programStore";
|
||||
|
||||
/**
|
||||
* Helper to preload the program store before rendering.
|
||||
*/
|
||||
function loadProgram(phases: Record<string, unknown>[]) {
|
||||
useProgramStore.getState().setProgramState({ phases });
|
||||
}
|
||||
|
||||
describe("SimpleProgram", () => {
|
||||
beforeEach(() => {
|
||||
loadProgram([]);
|
||||
});
|
||||
|
||||
test("shows empty state when no program is loaded", () => {
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("No program loaded.")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders first phase content", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [{ id: "n1", norm: "Be polite" }],
|
||||
goals: [{ id: "g1", description: "Finish task", achieved: true }],
|
||||
triggers: [{ id: "t1", label: "Keyword trigger" }],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("Be polite")).toBeInTheDocument();
|
||||
expect(screen.getByText("Finish task")).toBeInTheDocument();
|
||||
expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("allows navigating between phases", () => {
|
||||
loadProgram([
|
||||
{
|
||||
id: "phase-1",
|
||||
norms: [],
|
||||
goals: [],
|
||||
triggers: [],
|
||||
},
|
||||
{
|
||||
id: "phase-2",
|
||||
norms: [{ id: "n2", norm: "Be careful" }],
|
||||
goals: [],
|
||||
triggers: [],
|
||||
},
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
|
||||
expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByText("Next ▶"));
|
||||
|
||||
expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
|
||||
expect(screen.getByText("Be careful")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("prev button is disabled on first phase", () => {
|
||||
loadProgram([
|
||||
{ id: "phase-1", norms: [], goals: [], triggers: [] },
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("◀ Prev")).toBeDisabled();
|
||||
});
|
||||
|
||||
test("next button is disabled on last phase", () => {
|
||||
loadProgram([
|
||||
{ id: "phase-1", norms: [], goals: [], triggers: [] },
|
||||
]);
|
||||
|
||||
render(<SimpleProgram />);
|
||||
expect(screen.getByText("Next ▶")).toBeDisabled();
|
||||
});
|
||||
});
|
||||
@@ -85,14 +85,30 @@ describe('useProgramStore', () => {
|
||||
).toThrow('phase with id:"missing-phase" not found');
|
||||
});
|
||||
|
||||
// this test should be at the bottom to avoid conflicts with the previous tests
|
||||
it('should clone program state when setting it (no shared references should exist)', () => {
|
||||
useProgramStore.getState().setProgramState(mockProgram);
|
||||
const changeableMockProgram: ReducedProgram = {
|
||||
phases: [
|
||||
{
|
||||
id: 'phase-1',
|
||||
norms: [{ id: 'norm-1' }],
|
||||
goals: [{ id: 'goal-1' }],
|
||||
triggers: [{ id: 'trigger-1' }],
|
||||
},
|
||||
{
|
||||
id: 'phase-2',
|
||||
norms: [{ id: 'norm-2' }],
|
||||
goals: [{ id: 'goal-2' }],
|
||||
triggers: [{ id: 'trigger-2' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
useProgramStore.getState().setProgramState(changeableMockProgram);
|
||||
|
||||
const storedProgram = useProgramStore.getState().getProgramState();
|
||||
|
||||
// mutate original
|
||||
(mockProgram.phases[0].norms as any[]).push({ id: 'norm-mutated' });
|
||||
(changeableMockProgram.phases[0].norms as any[]).push({ id: 'norm-mutated' });
|
||||
|
||||
// store should NOT change
|
||||
expect(storedProgram.phases[0]['norms']).toHaveLength(1);
|
||||
|
||||
Reference in New Issue
Block a user