build: merge

ref: N25B-402

src/pages/VisProgPage/VisProg.tsx

@@ -9,6 +9,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import {useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
+import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
@@ -153,6 +154,10 @@ function runProgramm() {
   ).then((res) => {
     if (!res.ok) throw new Error("Failed communicating with the backend.")
     console.log("Successfully sent the program to the backend.");
+
+    // store reduced program in global program store for further use in the UI
+    // when the program was sent to the backend successfully:
+    useProgramStore.getState().setProgramState(structuredClone(program));
   }).catch(() => console.log("Failed to send program to the backend."));
 }
 

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,
     }
 }