Merge branch 'feat/norm-critical-checkbox' into 'demo'

feat: add critical checkbox to the norm node, send it with the program, add test.

See merge request ics/sp/2025/n25b/pepperplus-ui!29

src/App.tsx

@@ -7,7 +7,6 @@ import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
-import MonitoringPage from './pages/MonitoringPage/MonitoringPage.tsx'
 
 function App(){
   const [showLogs, setShowLogs] = useState(false);
@@ -26,7 +25,6 @@ function App(){
             <Route path="/editor" element={<VisProg />} />
             <Route path="/robot" element={<Robot />} />
             <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
-            <Route path="/MonitoringPage" element={<MonitoringPage />} />
         </Routes>
         </main>
         {showLogs && <Logging />}

src/pages/Home/Home.tsx

@@ -23,7 +23,6 @@ function Home() {
         <Link to={"/editor"}>Editor →</Link>
         <Link to={"/template"}>Template →</Link>
         <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
-        <Link to={"/MonitoringPage"}>MonitoringPage →</Link>
       </div>
     </div>
   )

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -1,175 +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: #f5f5f5;
-  font-family: Arial, sans-serif;
-}
-
-/* HEADER */
-.experimentOverview {
-  grid-area: header;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  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: #ccc;
-}
-
-.completed {
-  background-color: #5cb85c;
-  color: white;
-}
-
-.current {
-  background-color: #f0ad4e;
-  color: white;
-}
-
-.connected {
-  color: green;
-  font-weight: bold;
-}
-
-.pause{
-  background-color: green;
-}
-
-.next {
-  background-color: #ccc;
-}
-
-.restartPhase{
-  background-color: rgb(255, 123, 0);
-}
-
-.restartExperiment{
-  background-color: red;
-}
-
-/* MAIN GRID */
-.phaseOverview {
-  grid-area: main;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.phaseBox {
-  background: #f9f9f9;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
-}
-
-.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 #ddd;
-  padding-bottom: 0.4rem;
-}
-
-.checked::before {
-  content: '✔️ ';
-}
-
-/* LOGS */
-.logs {
-  grid-area: logs;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.logs textarea {
-  width: 100%;
-  height: 200px;
-  margin-top: 0.5rem;
-}
-
-/* FOOTER */
-.controlsSection {
-  grid-area: footer;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.gestures,
-.speech,
-.directSpeech {
-  flex: 1;
-}
-
-.speechInput {
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-.speechInput input {
-  flex: 1;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-}
-
-.speechInput button {
-  background: #007bff;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
-/* RESPONSIVE */
-@media (max-width: 900px) {
-  .phaseOverview {
-    grid-template-columns: 1fr;
-  }
-
-  .controlsSection {
-    flex-direction: column;
-  }
-}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import styles from './MonitoringPage.module.css';
-
-export default function MonitoringPage() {
-  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>
-
-        <div className={styles.experimentControls}>
-          <h3>Experiment Controls</h3>
-          <div className={styles.controlsButtons}>
-            <button className={styles.pause}>▶</button>
-            <button className={styles.next}>⏭</button>
-            <button className={styles.restartPhase}>↩</button>
-            <button className={styles.restartExperiment}>⟲</button>
-          </div>
-        </div>
-
-        <div className={styles.connectionStatus}>
-          <h3>Connection:</h3>
-          <p className={styles.connected}>● Robot is connected</p>
-        </div>
-      </header>
-
-      {/* MAIN GRID */}
-      
-      <main className={styles.phaseOverview}>
-        <section className={styles.phaseOverviewText}>
-          <h3>Phase Overview</h3>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Goals</h3>
-          <ul>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Triggers</h3>
-          <ul>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Norms</h3>
-          <ul>
-            <li>Rhyme when talking</li>
-            <li>Talk like a fish</li>
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Conditional Norms</h3>
-          <ul>
-            <li>“RP is sad” - Be nice</li>
-          </ul>
-        </section>
-      </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}>
-        <div className={styles.gestures}>
-          <h4>Controls</h4>
-          <ul>
-            <li>Gesture: Wave Left Hand</li>
-            <li>Gesture: Wave Right Hand</li>
-            <li>Gesture: Left Thumbs Up</li>
-            <li>Gesture: Right Thumbs Up</li>
-          </ul>
-        </div>
-
-        <div className={styles.speech}>
-          <h4>Speech Options</h4>
-          <ul>
-            <li>\"Hello, my name is pepper.\"</li>
-            <li>\"How is the weather today?\"</li>
-            <li>\"I like your outfit, very pretty.\"</li>
-            <li>\"How is your day going?\"</li>
-          </ul>
-        </div>
-
-        <div className={styles.directSpeech}>
-          <h4>Direct Pepper Speech</h4>
-          <ul>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-          </ul>
-          <div className={styles.speechInput}>
-            <input type="text" placeholder="Type message..." />
-            <button>Send</button>
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-}

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -45,7 +45,7 @@ const initialNodes : Node[] = [
     createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
     createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
     createNode('phase-1', 'phase',  {x:200, y:100}, {label: "Phase 1", children : []}),
-    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"]}),     
+    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}),     
 ];
 
 // * Initial edges * /

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts

@@ -8,4 +8,5 @@ export const NormNodeDefaults: NormNodeData = {
   droppable: true,
   norm: "",
   hasReduce: true,
+  critical: false,
 };

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -21,6 +21,7 @@ export type NormNodeData = {
   droppable: boolean;
   norm: string;
   hasReduce: boolean;
+  critical: boolean;
 };
 
 export type NormNode = Node<NormNodeData>
@@ -35,11 +36,16 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const {updateNodeData} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
 
   const setValue = (value: string) => {
     updateNodeData(props.id, {norm: value});
   }
 
+  const setCritical = (value: boolean) => {
+    updateNodeData(props.id, {...data, critical: value});
+  }
+
   return <>
     <Toolbar nodeId={props.id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
@@ -52,6 +58,15 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Critical:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          checked={data.critical || false}
+          onChange={(e) => setCritical(e.target.checked)}
+        />
+      </div>
       <Handle type="source" position={Position.Right} id="norms"/>
     </div>
   </>;
@@ -69,6 +84,7 @@ export function NormReduce(node: Node, _nodes: Node[]) {
       id: node.id,
       label: data.label,
       norm: data.norm,
+      critical: data.critical,
     }
 }
 

test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx

@@ -98,6 +98,7 @@ describe('NormNode', () => {
           droppable: true,
           norm: '',
           hasReduce: true,
+          critical: false
         },
       };
 
@@ -627,6 +628,54 @@ describe('NormNode', () => {
       });
     });
 
+    it('should properly update the store when editing critical checkbox', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+          critical: false,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const checkbox = screen.getByLabelText('Critical:');
+      await user.click(checkbox);
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        expect(state.nodes).toHaveLength(1);
+        expect(state.nodes[0].id).toBe('norm-1');
+        expect(state.nodes[0].data.norm).toBe('');
+        expect(state.nodes[0].data.critical).toBe(true);
+      });
+    });
+
     it('should not affect other nodes when updating one norm node', async () => {
       const norm1: Node = {
         id: 'norm-1',