feat: finished basic warning system

nodes can now register warnings to prevent running the program

ref: N25B-450

src/pages/VisProgPage/VisProg.tsx

@@ -90,6 +90,8 @@ const VisProgUI = () => {
     return () => window.removeEventListener('keydown', handler);
   });
 
+
+
   return (
     <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
       <ReactFlow
@@ -120,6 +122,7 @@ const VisProgUI = () => {
           </Panel>
         <Panel position="bottom-center">
           <button onClick={() => undo()}>undo</button>
+
           <button onClick={() => redo()}>Redo</button>
         </Panel>
         <Controls/>
@@ -187,16 +190,20 @@ function graphReducer() {
  */
 function VisProgPage() {
   const [programValidity, setProgramValidity] = useState<boolean>(true);
-  const sIndex = useFlowStore.getState().severityIndex;
+
+  const {isProgramValid, severityIndex} = useFlowStore();
+
 
   useEffect(() => {
-    setProgramValidity(useFlowStore.getState().isProgramValid)
-  }, [sIndex]);
-
+    setProgramValidity(isProgramValid);
+    // 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]);
   return (
     <>
       <VisualProgrammingUI/>
-      <button onClick={runProgram} disabled={programValidity}>run program</button>
+      <button onClick={runProgram} disabled={!programValidity}>run program</button>
     </>
   )
 }