refactor: adapted to fit the split made in monitoringPage

ref: N25B-450

src/pages/VisProgPage/VisProg.tsx

@@ -7,19 +7,18 @@ import {
   MarkerType, getOutgoers
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import {graphReducer, runProgram} from "./VisProgLogic.tsx";
 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 EditorWarning, globalWarning} from "./visualProgrammingUI/components/EditorWarnings.tsx";
 import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.tsx";
-import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.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';
 
 // --| config starting params for flow |--
@@ -176,41 +175,6 @@ 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.");
-
-    // 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);
-}
-
-/**
- * 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)
-    }); 
-}
-
 const checkPhaseChain = (): boolean => {
   const {nodes, edges} = useFlowStore.getState();
 
@@ -229,7 +193,6 @@ const checkPhaseChain = (): boolean => {
   return checkForCompleteChain('start');
 };
 
-
 /**
  * houses the entire page, so also UI elements
  * that are not a part of the Visual Programming UI
@@ -247,10 +210,18 @@ function VisProgPage() {
     // however this would cause unneeded updates
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [severityIndex]);
+
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+
+  const processProgram = () => {
+    const phases = graphReducer();       // reduce graph
+    setProgramState({ phases });          // <-- save to store
+    runProgram();                        // send to backend if needed
+  };
   return (
     <>
       <VisualProgrammingUI/>
-      <button onClick={runProgram} disabled={!programValidity}>Run Program</button>
+      <button onClick={processProgram} disabled={!programValidity}>Run Program</button>
     </>
   )
 }

src/pages/VisProgPage/VisProgLogic.tsx

@@ -0,0 +1,43 @@
+import useProgramStore from "../../utils/programStore";
+import orderPhaseNodeArray from "../../utils/orderPhaseNodes";
+import useFlowStore from './visualProgrammingUI/VisProgStores';
+import { NodeReduces } from './visualProgrammingUI/NodeRegistry';
+import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";
+
+/**
+ * Reduces the graph into its phases' information and recursively calls their reducing function
+ */
+export 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)
+    });
+}
+
+
+/**
+ * Outputs the prepared program to the console and sends it to the backend
+ */
+export 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.");
+
+    // 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);
+}