Dynamic save for graphML

Author: Aviral09

src/GraphWorkspace.jsx

@@ -72,6 +72,8 @@ const GraphComp = (props) => {
                         serverID={el.serverID}
                         graphML={el.graphML}
                         projectName={el.projectName}
+                        fileHandle={el.fileHandle}
+                        fileName={el.fileName}
                     />
                 ))}
                 <ZoomComp dispatcher={dispatcher} superState={superState} />

src/component/TabBar.jsx

@@ -60,7 +60,7 @@ const TabBar = ({ superState, dispatcher }) => {
                     id={`tab_${i}`}
                 >
                     <span className="tab-text">
-                        {el.projectName}
+                        {el.fileName || el.projectName}
                     </span>
 
                     {superState.curGraphIndex === i ? (

src/component/fileBrowser.jsx

@@ -21,19 +21,9 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
     }, []);
 
     const [fileState, setFileState] = useState([]);
-    // const [fileState, setFileState] = useState(() => {
-    //     let files = [];
-    //     files = [];
-    //     // if (window.localStorage.getItem('fileList')) {
-    //     //     files = JSON.parse(window.localStorage.getItem('fileList'));
-    //     //     console.log(files);
-    //     //     return files;
-    //     // }
-    //     return { files };
-    // });
 
-    // TODO
     useEffect(() => {
+        // TODO - Loading file list from localStorage. Not supported by browsers.
         // if(window.localStorage.getItem('fileList')) {
         //     const allFiles = window.localStorage.getItem('fileList');
         //     setFileState({ files: allFiles });

src/graph-builder/graph-core/1-core.js

@@ -106,21 +106,6 @@ class CoreGraph {
         this.cy.emit('graph-modified');
     }
 
-    setGraphFileHandle(fileHandle, shouldEmit = true) {
-        this.fileHandle = fileHandle;
-        if (shouldEmit) {
-            this.dispatcher({
-                type: T.SET_PROJECT_DETAILS,
-                payload: {
-                    value: fileHandle,
-                    graphID: this.id,
-                    type: 'filehandle',
-                },
-            });
-        }
-        this.cy.emit('graph-modified');
-    }
-
     setServerID(serverID, shouldEmit = true) {
         this.serverID = serverID;
         if (shouldEmit) {

src/graph-builder/graph-core/5-load-save.js

@@ -56,6 +56,8 @@ class GraphLoadSave extends GraphUndoRedo {
             projectName: this.projectName,
             id: this.id,
             serverID: this.serverID,
+            fileName: null,
+            fileHandle: null,
         };
         this.cy.nodes().forEach((node) => {
             if (this.shouldNodeBeSaved(node.id())) {
@@ -102,7 +104,14 @@ class GraphLoadSave extends GraphUndoRedo {
         const str = graphmlBuilder(this.jsonifyGraph());
         const bytes = new TextEncoder().encode(str);
         const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
-        saveAs(blob, `${fileName || `${this.getName()}-DHGWorkflow`}.graphml`);
+        saveAs(blob, `${fileName || `${this.getName()}-concore`}.graphml`);
+    }
+
+    saveToFolder() {
+        const str = graphmlBuilder(this.jsonifyGraph());
+        const bytes = new TextEncoder().encode(str);
+        const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
+        return blob;
     }
 
     getGraphML() {
@@ -111,7 +120,7 @@ class GraphLoadSave extends GraphUndoRedo {
 
     loadJson(content) {
         content.nodes.forEach((node) => {
-            this.addNode(node.label, node.style, 'ordin', node.position, { }, node.id, 0);
+            this.addNode(node.label, node.style, 'ordin', node.position, {}, node.id, 0);
         });
         content.edges.forEach((edge) => {
             this.addEdge({ ...edge, sourceID: edge.source, targetID: edge.target }, 0);

src/graph-builder/graphml/builder/graphML.js

@@ -1,5 +1,5 @@
 const graphML = ({
-  nodes, edges, id, projectName, actionHistory, serverID,
+  nodes, edges, id, projectName, actionHistory, serverID, fileHandle, fileName,
 }) => ({
   graphml: {
     $: {
@@ -31,6 +31,8 @@ const graphML = ({
           id,
           projectName,
           serverID,
+          fileHandle,
+          fileName,
         },
         node: nodes,
         edge: edges,

src/graph-builder/graphml/builder/index.js

@@ -28,6 +28,8 @@ const builder = (G) => {
         id: G.id,
         actionHistory: G.actionHistory,
         serverID: G.serverID,
+        fileHandle: G.fileHandle,
+        fileName: G.fileName,
     });
     const xml = new xml2js.Builder().buildObject(X);
     return xml;

src/reducer/initialState.js

@@ -36,6 +36,8 @@ const initialGraphState = {
     component: null,
     instance: null,
     id: null,
+    fileHandle: null,
+    fileName: null,
 };
 
 export { initialState, initialGraphState };

src/reducer/reducer.js

@@ -95,6 +95,8 @@ const reducer = (state, action) => {
                     graphID,
                     serverID: action.payload.serverID,
                     graphML: action.payload.graphML,
+                    fileHandle: action.payload.fileHandle || null,
+                    fileName: action.payload.fileName,
                 },
             ],
         };

src/toolbarActions/toolbarFunctions.js

@@ -75,23 +75,38 @@ const downloadImg = (state, setState, format) => {
     getGraphFun(state).downloadImg(format);
 };
 
-// TODO
-// const saveLocal = (state, d) => {
-// };
-
 const saveAction = (state, d, fileName) => {
     getGraphFun(state).saveToDisk(fileName);
 };
 
-const readFile = (state, setState, file) => {
+async function saveGraphMLFile(state) {
+    if (state.curGraphInstance) {
+        const graph = state.graphs[state.curGraphIndex];
+        if (graph.fileHandle) {
+            const stream = await graph.fileHandle.createWritable();
+            await stream.write(getGraphFun(state).saveToFolder());
+            await stream.close();
+        } else {
+            // eslint-disable-next-line no-alert
+            alert('Switch to Edge/Chrome!');
+        }
+    } else {
+        // eslint-disable-next-line no-alert
+        alert('Switch to Edge/Chrome!');
+    }
+}
+
+const readFile = (state, setState, file, fileHandle) => {
     if (file) {
         const fr = new FileReader();
         const projectName = file.name;
         if (file.name.split('.').pop() === 'graphml') {
             fr.onload = (x) => {
                 setState({
                     type: T.ADD_GRAPH,
-                    payload: { projectName, graphML: x.target.result },
+                    payload: {
+                        projectName, graphML: x.target.result, fileHandle, fileName: file.name,
+                    },
                 });
             };
             fr.readAsText(file);
@@ -151,7 +166,7 @@ const toggleServer = (state, dispatcher) => {
 };
 
 export {
-    createNode, editElement, deleteElem, downloadImg, saveAction,
+    createNode, editElement, deleteElem, downloadImg, saveAction, saveGraphMLFile,
     readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
     openShareModal, openSettingModal, viewHistory,
     toggleServer,