Merge branch 'feat/monitoringpage-pim' into feat/monitoringpage

src/pages/VisProgPage/VisProg.tsx

@@ -9,8 +9,10 @@ import {
 import '@xyflow/react/dist/style.css';
 import {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 useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
@@ -50,7 +52,8 @@ const selector = (state: FlowState) => ({
   undo: state.undo,
   redo: state.redo,
   beginBatchAction: state.beginBatchAction,
-  endBatchAction: state.endBatchAction
+  endBatchAction: state.endBatchAction,
+  scrollable: state.scrollable
 });
 
 // --| define ReactFlow editor |--
@@ -74,7 +77,8 @@ const VisProgUI = () => {
     undo,
     redo,
     beginBatchAction,
-    endBatchAction
+    endBatchAction,
+    scrollable
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
   // adds ctrl+z and ctrl+y support to respectively undo and redo actions
@@ -103,6 +107,7 @@ const VisProgUI = () => {
         onConnect={onConnect}
         onNodeDragStart={beginBatchAction}
         onNodeDragStop={endBatchAction}
+        preventScrolling={scrollable}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}
@@ -166,14 +171,15 @@ function runProgramm() {
  */ 
 function graphReducer() {
   const { nodes } = useFlowStore.getState();
-  return nodes
-    .filter((n) => n.type == 'phase')
+  return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
     .map((n) => {
       const reducer = NodeReduces['phase'];
       return reducer(n, nodes)
     }); 
 }
 
+
+
 /**
  * houses the entire page, so also UI elements
  * that are not a part of the Visual Programming UI