Merge branch 'feat/editor-user-feedback' into temp_screenshot_manual

# Conflicts:
#	src/pages/VisProgPage/VisProg.tsx
#	src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx

src/pages/VisProgPage/VisProg.tsx

@@ -4,13 +4,16 @@ import {
   Panel,
   ReactFlow,
   ReactFlowProvider,
-  MarkerType,
+  MarkerType, getOutgoers
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import warningStyles from './visualProgrammingUI/components/WarningSidebar.module.css'
 import {type CSSProperties, useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
+import {type EditorWarning, globalWarning} from "./visualProgrammingUI/components/EditorWarnings.tsx";
+import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.tsx";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
@@ -42,6 +45,7 @@ const selector = (state: FlowState) => ({
   nodes: state.nodes,
   edges: state.edges,
   onNodesChange: state.onNodesChange,
+  onNodesDelete: state.onNodesDelete,
   onEdgesDelete: state.onEdgesDelete,
   onEdgesChange: state.onEdgesChange,
   onConnect: state.onConnect,
@@ -67,6 +71,7 @@ const VisProgUI = () => {
   const {
     nodes, edges,
     onNodesChange,
+    onNodesDelete,
     onEdgesDelete,
     onEdgesChange,
     onConnect,
@@ -89,15 +94,36 @@ const VisProgUI = () => {
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
   });
+  const {unregisterWarning, registerWarning} = useFlowStore();
+  useEffect(() => {
+
+    if (checkPhaseChain()) {
+      unregisterWarning(globalWarning,'INCOMPLETE_PROGRAM');
+    } else {
+      // create global warning for incomplete program chain
+      const incompleteProgramWarning : EditorWarning = {
+        scope: {
+          id: globalWarning,
+          handleId: undefined
+        },
+        type: 'INCOMPLETE_PROGRAM',
+        severity: "ERROR",
+        description: "there is no complete phase chain from the startNode to the EndNode"
+      }
+
+      registerWarning(incompleteProgramWarning);
+    }
+  },[edges, registerWarning, unregisterWarning])
 
   return (
-    <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
+    <div className={`${styles.innerEditorContainer} round-lg border-lg flex-row`} style={({'--flow-zoom': zoom} as CSSProperties)}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
         defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
         nodeTypes={NodeTypes}
         onNodesChange={onNodesChange}
+        onNodesDelete={onNodesDelete}
         onEdgesDelete={onEdgesDelete}
         onEdgesChange={onEdgesChange}
         onReconnect={onReconnect}
@@ -108,9 +134,11 @@ const VisProgUI = () => {
         onNodeDragStop={endBatchAction}
         preventScrolling={scrollable}
         onMove={(_, viewport) => setZoom(viewport.zoom)}
+        reconnectRadius={15}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}
+        style={{flexGrow: 3}}
       >
         <Panel position="top-center" className={styles.dndPanel}>
           <DndToolbar/> {/* contains the drag and drop panel for nodes */}
@@ -122,9 +150,13 @@ const VisProgUI = () => {
           <button onClick={() => undo()}>Undo</button>
           <button onClick={() => redo()}>Redo</button>
         </Panel>
+        <Panel position="center-right" className={warningStyles.warningsSidebar}>
+          <WarningsSidebar/>
+        </Panel>
         <Controls/>
         <Background/>
       </ReactFlow>
+
     </div>
   );
 };
@@ -143,7 +175,24 @@ function VisualProgrammingUI() {
     </ReactFlowProvider>
   );
 }
- 
+
+const checkPhaseChain = (): boolean => {
+  const {nodes, edges} = useFlowStore.getState();
+
+  function checkForCompleteChain(currentNodeId: string): boolean {
+    const outgoingPhases = getOutgoers({id: currentNodeId}, nodes, edges)
+      .filter(node => ["end", "phase"].includes(node.type!));
+
+    if (outgoingPhases.length === 0) return false;
+    if (outgoingPhases.some(node => node.type === "end" )) return true;
+
+    const next = outgoingPhases.map(node => checkForCompleteChain(node.id))
+      .find(result => result);
+    return !!next;
+  }
+
+  return checkForCompleteChain('start');
+};
 
 /**
  * houses the entire page, so also UI elements
@@ -152,9 +201,20 @@ function VisualProgrammingUI() {
  */
 function VisProgPage() {
   const [showSimpleProgram, setShowSimpleProgram] = useState(false);
+  const [programValidity, setProgramValidity] = useState<boolean>(true);
+  const {isProgramValid, severityIndex} = useFlowStore();
   const setProgramState = useProgramStore((state) => state.setProgramState);
 
-  const runProgram = () => {
+  const validity = () => {return isProgramValid();}
+
+  useEffect(() => {
+    setProgramValidity(validity);
+    // the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,
+    // however this would cause unneeded updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [severityIndex]);
+
+  const processProgram = () => {
     const phases = graphReducer();       // reduce graph
     setProgramState({ phases });          // <-- save to store
     setShowSimpleProgram(true);          // show SimpleProgram
@@ -165,17 +225,19 @@ function VisProgPage() {
     return (
     <div>
       <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
-        Back to Editor ◀ 
+        Back to Editor ◀
       </button>
       <MonitoringPage/>
     </div>
     );
   }
 
+
+
   return (
     <>
       <VisualProgrammingUI/>
-      <button onClick={runProgram}>Run Program</button>
+      <button onClick={processProgram} disabled={!programValidity}>Run Program</button>
     </>
   )
 }