Merge branch 'dev' into dependabot/npm_and_yarn/npm_and_yarn-79fa654eaf

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.

package-lock.json

@@ -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;
@@ -84,6 +134,7 @@ const GraphComp = (props) => {
                 isOpen={superState.confirmModal.open}
                 title="Confirm"
                 message={superState.confirmModal.message}
+                actions={superState.confirmModal.actions}
                 onConfirm={() => {
                     if (superState.confirmModal.onConfirm) superState.confirmModal.onConfirm();
                     dispatcher({ type: T.SET_CONFIRM_MODAL, payload: { open: false, message: '', onConfirm: null } });

src/GraphWorkspace.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)) {

src/component/fileBrowser.jsx

@@ -3,14 +3,34 @@ import ParentModal from './ParentModal';
 import './confirmModal.css';
 
 const ConfirmModal = ({
-    isOpen, title, message, onConfirm, onCancel,
+    isOpen, title, message, onConfirm, onCancel, actions,
 }) => (
     <ParentModal ModelOpen={isOpen} closeModal={onCancel} title={title}>
         <div className="confirm-modal-content">
             <div className="confirm-modal-message">{message}</div>
             <div className="confirm-modal-actions">
-                <button type="button" className="confirm-btn" onClick={onConfirm}>Yes</button>
-                <button type="button" className="cancel-btn" onClick={onCancel}>No</button>
+                {
+                    actions && actions.length
+                        ? actions.map((action) => (
+                            <button
+                                key={action.label}
+                                type="button"
+                                className={action.className || 'cancel-btn'}
+                                onClick={() => {
+                                    if (action.onClick) action.onClick();
+                                    onCancel();
+                                }}
+                            >
+                                {action.label}
+                            </button>
+                        ))
+                        : (
+                            <>
+                                <button type="button" className="confirm-btn" onClick={onConfirm}>Yes</button>
+                                <button type="button" className="cancel-btn" onClick={onCancel}>No</button>
+                            </>
+                        )
+                }
             </div>
         </div>
     </ParentModal>

src/component/modals/ConfirmModal.jsx

@@ -5,6 +5,7 @@
 .confirm-modal-message {
   margin-bottom: 20px;
   font-size: 1.1em;
+  white-space: pre-line;
 }
 .confirm-modal-actions {
   display: flex;

src/component/modals/confirmModal.css

@@ -1,7 +1,7 @@
 import { toast } from 'react-toastify';
 import Axios from 'axios';
 import { actionType as T } from '../../reducer';
-import { EXECUTION_ENGINE_URL } from '../../serverCon/config';
+import serverConConfig, { EXECUTION_ENGINE_URL } from '../../serverCon/config';
 import GraphLoadSave from './5-load-save';
 // import {
 //     postGraph, updateGraph, forceUpdateGraph, getGraph, getGraphWithHashCheck,
@@ -11,6 +11,86 @@ import {
 } from '../../serverCon/crud_http';
 
 class GraphServer extends GraphLoadSave {
+    static isSyncConflictError(err) {
+        const msg = (err && err.message ? err.message : '').toLowerCase();
+        return msg.includes('different history')
+            || msg.includes('latest changes')
+            || msg.includes('can not update');
+    }
+
+    showSyncConflictModal(reason) {
+        const localHash = this.actionArr.length ? this.actionArr.at(-1).hash : 'None';
+        const setModal = (remoteHash) => {
+            const message = [
+                reason || 'Sync conflict detected.',
+                `Local hash: ${localHash}`,
+                `Remote hash: ${remoteHash || 'Remote history is newer/different'}`,
+                'Choose how to resolve this conflict.',
+            ].join('\n');
+            this.dispatcher({
+                type: T.SET_CONFIRM_MODAL,
+                payload: {
+                    open: true,
+                    message,
+                    actions: [
+                        {
+                            label: 'Pull remote',
+                            className: 'confirm-btn',
+                            onClick: () => this.forcePullFromServer(),
+                        },
+                        {
+                            label: 'Force push local',
+                            className: 'confirm-btn',
+                            onClick: () => {
+                                if (this.serverID) {
+                                    forceUpdateGraph(this.serverID, this.getGraphML()).catch((err) => {
+                                        toast.error(err.response?.data?.message || err.message);
+                                    });
+                                } else {
+                                    postGraph(this.getGraphML()).then((serverID) => {
+                                        this.set({ serverID });
+                                    }).catch((err) => {
+                                        toast.error(err.response?.data?.message || err.message);
+                                    });
+                                }
+                            },
+                        },
+                        {
+                            label: 'Open remote in new tab',
+                            className: 'cancel-btn',
+                            onClick: () => {
+                                if (!this.serverID) return;
+                                const remotePath = serverConConfig.getGraph(this.serverID);
+                                const remoteURL = `${serverConConfig.baseURL}${remotePath}`;
+                                window.open(remoteURL, '_blank', 'noopener,noreferrer');
+                            },
+                        },
+                        {
+                            label: 'Cancel',
+                            className: 'cancel-btn',
+                            onClick: null,
+                        },
+                    ],
+                },
+            });
+        };
+        if (!this.serverID) {
+            setModal('Unknown');
+            return;
+        }
+        getGraph(this.serverID).then((graphXML) => {
+            try {
+                const doc = new DOMParser().parseFromString(graphXML, 'application/xml');
+                const hashes = doc.getElementsByTagName('hash');
+                setModal(hashes.length ? (hashes[hashes.length - 1].textContent || '') : '');
+            } catch {
+                setModal('Unavailable');
+            }
+        }).catch(() => {
+            setModal('Unavailable');
+        });
+    }
+
     set(config) {
         const { serverID } = config;
         super.set(config);
@@ -73,6 +153,10 @@ class GraphServer extends GraphLoadSave {
             updateGraph(this.serverID, this.getGraphML()).then(() => {
 
             }).catch((err) => {
+                if (GraphServer.isSyncConflictError(err)) {
+                    this.showSyncConflictModal('Cannot push: local and remote histories diverged.');
+                    return;
+                }
                 toast.error(err.response?.data?.message || err.message);
             });
         } else {
@@ -127,8 +211,12 @@ class GraphServer extends GraphLoadSave {
         if (this.serverID) {
             getGraphWithHashCheck(this.serverID, this.actionArr.at(-1).hash).then((graphXML) => {
                 this.setGraphML(graphXML);
-            }).catch(() => {
-
+            }).catch((err) => {
+                if (GraphServer.isSyncConflictError(err)) {
+                    this.showSyncConflictModal('Cannot pull: local and remote histories diverged.');
+                    return;
+                }
+                toast.error(err.response?.data?.message || err.message);
             });
         } else {
             toast.success('Not on server');