locally saving one last edited copy, overwrites last save

src/App.css

@@ -67,6 +67,7 @@ html, body {
   .sidebar{
     width:100%;
     flex-direction:row;
+    overflow-x: auto;
   }
   .svg-container{
     width:100%;

src/App.jsx

@@ -32,6 +32,15 @@ const theme = createTheme({
 
 });
 
+const saveToLocalStorage = (key, data) => {
+  localStorage.setItem(key, JSON.stringify(data));
+};
+
+const loadFromLocalStorage = (key) => {
+  const data = localStorage.getItem(key);
+  return data ? JSON.parse(data) : null;
+};
+
 function App() {
   const [graph, setGraph] = useState({ nodes: [], edges: [] });
   const [platformModel, setPlatformModel] = useState(null)
@@ -45,9 +54,32 @@ function App() {
   const [highlightNodePM, setHighlightedNodePM] = useState(null);
   const [highlightedEdgePM, setHighlightedEdgePM] = useState(null);
   const fileInputRef = useRef(null);
-
+  const [savedData, setSavedData] = useState(null);
   const message_size = 20;
 
+  useEffect(() => {
+    const data = loadFromLocalStorage('model');
+    if (data) {
+      setSavedData(data);
+    }
+  }, []);
+
+  const handleSave = () => {
+    const dataToSave = {
+      application: { tasks: graph.nodes, messages: graph.edges },
+      platform: platformModel
+    };
+    saveToLocalStorage('model', dataToSave);
+    setSavedData(dataToSave);
+  };
+
+  const handleSavedLoad = () => {
+    if (savedData) {
+      setJsonData(savedData);
+    }
+  };
+
+
   // Message injection time is the time at which the message is injected into the network, 0 denotes absence of any delay
   const message_injection_time = 0;
 
@@ -244,7 +276,7 @@ function App() {
     <ThemeProvider theme={theme}>
       <div className="app-container">
         <div className="sidebar">
-          <h1>Schedule Visualization</h1>
+          <h1>Distributed Scheduling</h1>
 
           {jsonData &&
             <>
@@ -266,6 +298,8 @@ function App() {
           <input type="file" accept=".json" ref={fileInputRef} style={{ display: 'none' }} onChange={handleFileChange} />
           <button className="button" onClick={handleFileUpload}>Upload JSON</button>
           <button className="button" onClick={loadDefaultJSON}>Load Default JSON</button>
+          {jsonData && <button className="button" onClick={handleSave}>Save Locally</button>}
+          {savedData && <button className="button" onClick={handleSavedLoad}>Load Last Saved</button>}
           <footer style={{ padding: '20px 0', marginTop: 'auto' }}>
             <Container maxWidth="sm">
               <Typography variant="body1" align="center">

src/slidersPM.jsx

@@ -8,9 +8,10 @@ function SlidersPM({ highlightedEdge, graph, setGraph }) {
     return <div></div>;
   }
   const edge = graph.links.find(edge => edge.start_node == highlightedEdge.start_node && edge.end_node == highlightedEdge.end_node)
-  console.log(edge);
-  console.log(highlightedEdge);
+  console.log("selected edge", edge);
+  console.log("highlighted", highlightedEdge);
   console.log(graph);
+
   const handleSliderChange = (slider, newValue) => {
     // Update the graph state immutably
     setGraph(prevGraph => {
@@ -19,13 +20,14 @@ function SlidersPM({ highlightedEdge, graph, setGraph }) {
         // Check if the current edge is the one to update
         if (edge_.id === edge.id) {
           // Update the specific property based on the slider
+          console.log("updated Edge", { ...edge_, [slider]: newValue });
           return { ...edge_, [slider]: newValue };
         }
         return edge_; // Return other edges unmodified
       });
 
       // Return a new graph object with the updated nodes array
-      return { ...prevGraph, edges: updatedEdges };
+      return { ...prevGraph, links: updatedEdges };
     });
   }
   return (