Merge pull request #383 from avinxshKD/fix/indexeddb-workspace-persistence

Hybrid workspace persistence: move graph/session metadata to IndexedDB with localStorage fallback

Author: pradeeban

DEV-GUIDE.md

@@ -8,3 +8,41 @@ The file open size limit is configured in [src/toolbarActions/toolbarFunctions.j
 - `MAX_FILE_SIZE` is derived from it as bytes.
 
 To change the limit, update `MAX_FILE_SIZE_MB` only.
+
+## Workspace persistence (hybrid storage)
+
+Workspace persistence now uses a hybrid model:
+
+- Files/binary artifacts (imports/exports) stay on the browser filesystem path.
+- Graph/session metadata is stored in IndexedDB (`concore-editor-storage`) when available.
+- Local storage is used as a fallback if IndexedDB is unavailable.
+
+### IndexedDB schema (v1)
+
+- `graphs` store (key: `id`): graph snapshot payloads used by autosave/recovery.
+- `meta` store (key: `key`):
+	- `graph_order`
+	- `session`
+	- `author_name`
+	- `migrated_local_storage_v1`
+
+### Migration behavior
+
+On first successful IndexedDB init, legacy localStorage data is migrated once:
+
+- all graph snapshots from `ALL_GRAPHS`
+- session metadata from `SESSION_STATE` (if present)
+- author metadata from `AUTHOR_NAME`
+
+### Fallback behavior
+
+If IndexedDB cannot be initialized, the app stays functional with localStorage fallback.
+The same public storage manager API is used in both cases.
+
+### Manual verification checklist
+
+1. Open multiple graphs, switch active tab, reload page.
+2. Confirm open tabs and active tab are restored.
+3. Edit graphs and verify autosave keeps action history.
+4. Corrupt one graph record manually and confirm app still loads remaining workspace.
+5. Simulate IndexedDB unavailability and verify fallback load/save still works.

src/GraphWorkspace.jsx

@@ -13,15 +13,65 @@ const GraphComp = (props) => {
     const { dispatcher, superState } = props;
 
     React.useEffect(() => {
-        const allIDs = localStorageManager.getAllGraphs();
-        const validIDs = allIDs.filter((id) => typeof id === 'string' && id && localStorageManager.get(id) !== null);
-        if (validIDs.length !== allIDs.length) {
-            allIDs.filter((id) => !validIDs.includes(id)).forEach((id) => localStorageManager.remove(id));
-        }
-        if (validIDs.length === 0) return;
-        dispatcher({ type: T.ADD_GRAPH_BULK, payload: validIDs.map((graphID) => ({ graphID })) });
+        let mounted = true;
+        const restoreWorkspace = async () => {
+            await localStorageManager.initialize();
+            if (!mounted) return;
+
+            const session = localStorageManager.getSession();
+            const allIDs = Array.isArray(session?.openGraphIDs) && session.openGraphIDs.length
+                ? session.openGraphIDs
+                : localStorageManager.getAllGraphs();
+            const validIDs = allIDs.filter(
+                (id) => typeof id === 'string' && id && localStorageManager.get(id) !== null,
+            );
+            if (validIDs.length !== allIDs.length) {
+                allIDs.filter((id) => !validIDs.includes(id)).forEach((id) => localStorageManager.remove(id));
+            }
+
+            if (Array.isArray(session?.fileState)) {
+                dispatcher({ type: T.SET_FILE_STATE, payload: session.fileState });
+            }
+            if (typeof session?.uploadedDirName === 'string') {
+                dispatcher({ type: T.SET_DIR_NAME, payload: session.uploadedDirName });
+            }
+
+            if (validIDs.length === 0) return;
+            dispatcher({
+                type: T.ADD_GRAPH_BULK,
+                payload: {
+                    graphs: validIDs.map((graphID) => ({ graphID })),
+                    activeGraphID: session?.activeGraphID || null,
+                },
+            });
+        };
+        restoreWorkspace();
+
+        return () => {
+            mounted = false;
+        };
     }, []);
 
+    React.useEffect(() => {
+        const openGraphIDs = superState.graphs
+            .map((graph) => graph.graphID)
+            .filter((graphID) => typeof graphID === 'string' && graphID);
+        const activeGraphID = superState.curGraphIndex >= 0 && superState.curGraphIndex < superState.graphs.length
+            ? superState.graphs[superState.curGraphIndex].graphID
+            : null;
+        localStorageManager.saveSession({
+            openGraphIDs,
+            activeGraphID,
+            fileState: superState.fileState,
+            uploadedDirName: superState.uploadedDirName,
+        });
+    }, [
+        superState.graphs,
+        superState.curGraphIndex,
+        superState.fileState,
+        superState.uploadedDirName,
+    ]);
+
     // Remote server implementation - Not being used.
     // useEffect(() => {
     //     if (!loadedFromStorage) return;

src/component/fileBrowser.jsx

@@ -53,6 +53,10 @@ const LocalFileBrowser = ({ superState, dispatcher }) => {
     }, [superState.fileState]);
 
     const handleSelectFile = (data) => {
+        if (!data.fileObj) {
+            toast.info('File handle is not available after reload. Re-open the file/directory.');
+            return;
+        }
         const fileExtensions = ['exe'];
         const fileExt = data.fileObj.name.split('.').pop().toLowerCase();
         if (fileExtensions.includes(fileExt)) {