save state of python editor

Author: RemDelaporteMathurin

src/App.jsx

@@ -81,6 +81,10 @@ const DnDFlow = () => {
   // Global variables state
   const [globalVariables, setGlobalVariables] = useState([]);
   const [events, setEvents] = useState([]);
+  
+  // Python code editor state
+  const [pythonCode, setPythonCode] = useState("# Define your Python variables and functions here\n# Example:\n# my_variable = 42\n# def my_function(x):\n#     return x * 2\n");
+  
   const [defaultValues, setDefaultValues] = useState({});
   const [isEditingLabel, setIsEditingLabel] = useState(false);
   const [tempLabel, setTempLabel] = useState('');
@@ -223,7 +227,8 @@ const DnDFlow = () => {
       nodeCounter,
       solverParams,
       globalVariables,
-      events
+      events,
+      pythonCode
     };
 
     // Check if File System Access API is supported
@@ -303,7 +308,15 @@ const DnDFlow = () => {
           }
 
           // Load the graph data
-          const { nodes: loadedNodes, edges: loadedEdges, nodeCounter: loadedNodeCounter, solverParams: loadedSolverParams, globalVariables: loadedGlobalVariables, events: loadedEvents } = graphData;
+          const { 
+            nodes: loadedNodes, 
+            edges: loadedEdges, 
+            nodeCounter: loadedNodeCounter, 
+            solverParams: loadedSolverParams, 
+            globalVariables: loadedGlobalVariables, 
+            events: loadedEvents,
+            pythonCode: loadedPythonCode
+          } = graphData;
           setNodes(loadedNodes || []);
           setEdges(loadedEdges || []);
           setSelectedNode(null);
@@ -321,6 +334,7 @@ const DnDFlow = () => {
           });
           setGlobalVariables(loadedGlobalVariables ?? []);
           setEvents(loadedEvents ?? []);
+          setPythonCode(loadedPythonCode ?? "# Define your Python variables and functions here\n# Example:\n# my_variable = 42\n# def my_function(x):\n#     return x * 2\n");
 
           alert('Graph loaded successfully!');
         } catch (error) {
@@ -355,7 +369,15 @@ const DnDFlow = () => {
               return;
             }
 
-            const { nodes: loadedNodes, edges: loadedEdges, nodeCounter: loadedNodeCounter, solverParams: loadedSolverParams, globalVariables: loadedGlobalVariables, events: loadedEvents } = graphData;
+            const { 
+              nodes: loadedNodes, 
+              edges: loadedEdges, 
+              nodeCounter: loadedNodeCounter, 
+              solverParams: loadedSolverParams, 
+              globalVariables: loadedGlobalVariables, 
+              events: loadedEvents,
+              pythonCode: loadedPythonCode
+            } = graphData;
             setNodes(loadedNodes || []);
             setEdges(loadedEdges || []);
             setSelectedNode(null);
@@ -373,6 +395,7 @@ const DnDFlow = () => {
             });
             setGlobalVariables(loadedGlobalVariables ?? []);
             setEvents(loadedEvents ?? []);
+            setPythonCode(loadedPythonCode ?? "# Define your Python variables and functions here\n# Example:\n# my_variable = 42\n# def my_function(x):\n#     return x * 2\n");
 
             alert('Graph loaded successfully!');
           } catch (error) {
@@ -1620,6 +1643,8 @@ const DnDFlow = () => {
           globalVariables={globalVariables}
           setGlobalVariables={setGlobalVariables}
           setActiveTab={setActiveTab}
+          pythonCode={pythonCode}
+          setPythonCode={setPythonCode}
         />
       )}
 

src/GlobalVariablesTab.jsx

@@ -1,12 +1,10 @@
-import React from 'react';
 import { isValidPythonIdentifier } from './utils.js';
 
 
-import { CodeiumEditor } from "@codeium/react-code-editor";
 import PythonCodeEditor from './PythonCodeEditor';
 import './PythonCodeEditor.css';
 
-export const IdeWithAutocomplete = () => {
+export const IdeWithAutocomplete = ({ pythonCode, setPythonCode }) => {
   const handleCodeExecution = (result) => {
     if (result.success) {
       console.log('Code executed successfully:', result);
@@ -19,6 +17,8 @@ export const IdeWithAutocomplete = () => {
   return (
     <div>
       <PythonCodeEditor 
+        code={pythonCode}
+        onCodeChange={setPythonCode}
         onExecute={handleCodeExecution}
         height="500px"
       />
@@ -29,7 +29,9 @@ export const IdeWithAutocomplete = () => {
 const GlobalVariablesTab = ({ 
   globalVariables, 
   setGlobalVariables, 
-  setActiveTab 
+  setActiveTab,
+  pythonCode,
+  setPythonCode
 }) => {
 
   const addGlobalVariable = () => {
@@ -288,7 +290,10 @@ const GlobalVariablesTab = ({
             <p style={{ color: '#bbbbbb', marginBottom: '20px', textAlign: 'center' }}>
               Define Python variables and functions here. They will be available in your event functions and throughout the simulation.
             </p>
-            <IdeWithAutocomplete />
+            <IdeWithAutocomplete 
+              pythonCode={pythonCode}
+              setPythonCode={setPythonCode}
+            />
           </div>
         </div>
       </div>

src/PythonCodeEditor.jsx

@@ -3,17 +3,15 @@ import { CodeiumEditor } from "@codeium/react-code-editor";
 import { getApiEndpoint } from './config.js';
 
 const PythonCodeEditor = ({ 
-  initialCode = "# Define your Python variables and functions here\n# Example:\n# my_variable = 42\n# def my_function(x):\n#     return x * 2\n",
+  code = "# Define your Python variables and functions here\n# Example:\n# my_variable = 42\n# def my_function(x):\n#     return x * 2\n",
   onCodeChange,
   onExecute,
   height = "400px"
 }) => {
-  const [code, setCode] = useState(initialCode);
   const [isExecuting, setIsExecuting] = useState(false);
   const [executionResult, setExecutionResult] = useState(null);
 
   const handleCodeChange = useCallback((newCode) => {
-    setCode(newCode);
     if (onCodeChange) {
       onCodeChange(newCode);
     }