feat: The Big One UI

src/pages/VisProgPage/VisProg.tsx

@@ -4,20 +4,23 @@ 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 orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
 import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
-import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.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'
-import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
+import {NodeTypes} from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
+import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
+import { graphReducer, runProgramm } from './VisProgLogic.ts';
 
 // --| config starting params for flow |--
 
@@ -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>
   );
 };
@@ -144,42 +176,23 @@ function VisualProgrammingUI() {
   );
 }
 
-// currently outputs the prepared program to the console
-function runProgram() {
-  const phases = graphReducer();
-  const program = {phases}
-  console.log(JSON.stringify(program, null, 2));
-  fetch(
-    "http://localhost:8000/program",
-    {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify(program),
-    }
-  ).then((res) => {
-    if (!res.ok) throw new Error("Failed communicating with the backend.")
-    console.log("Successfully sent the program to the backend.");
+const checkPhaseChain = (): boolean => {
+  const {nodes, edges} = useFlowStore.getState();
 
-    // 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."));
-  console.log(program);
-}
+  function checkForCompleteChain(currentNodeId: string): boolean {
+    const outgoingPhases = getOutgoers({id: currentNodeId}, nodes, edges)
+      .filter(node => ["end", "phase"].includes(node.type!));
 
-/**
- * Reduces the graph into its phases' information and recursively calls their reducing function
- */ 
-function graphReducer() {
-  const { nodes } = useFlowStore.getState();
-  return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
-    .map((n) => {
-      const reducer = NodeReduces['phase'];
-      return reducer(n, nodes)
-    }); 
-}
+    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
@@ -187,10 +200,44 @@ function graphReducer() {
  * @constructor
  */
 function VisProgPage() {
+  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
+  const [programValidity, setProgramValidity] = useState<boolean>(true);
+  const {isProgramValid, severityIndex} = useFlowStore();
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+
+  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
+    runProgramm();                        // send to backend if needed
+  };
+
+  if (showSimpleProgram) {
+    return (
+    <div>
+      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
+        Back to Editor ◀
+      </button>
+      <MonitoringPage/>
+    </div>
+    );
+  }
+
+
+
   return (
     <>
       <VisualProgrammingUI/>
-      <button onClick={runProgram}>Run Program</button>
+      <button onClick={processProgram} disabled={!programValidity}>Run Program</button>
     </>
   )
 }