Skip to content

Mindmap Node Save Sequence Diagram ​

This document describes how mindmap nodes are saved from the Studio component through IndexedDB to the Go Echo backend.

Overview ​

The persistence architecture follows a local-first pattern:

  1. User edits are immediately persisted to IndexedDB (offline-capable)
  2. Changes are queued in syncQueue for backend sync
  3. SyncManager periodically flushes the queue to the server
  4. Backend processes changes and commits to PostgreSQL

Sequence Diagram ​

Key Components ​

ComponentFileResponsibility
StudioStudio.tsxReact component with useReducer for state; useEffect detects changes
Persistencepersistence.tsAsync functions to save nodes/deltas to IndexedDB
db (MindmapBuildDB)db.tsIndexedDB wrapper with nodes, maps, syncQueue stores
SyncManagersync-manager.tsBackground sync loop, queue compression, retry logic
API Clientclient.tsAxios wrapper for HTTP calls to backend
Backendinternal/api/server.goGo Echo handlers processing batch updates

Data Flow Details ​

1. Auto-Save Effect (Studio.tsx) ​

typescript
useEffect(() => {
  const changes: NodeChange[] = []
  // Compare currentNodes vs prevNodes.current
  // Collect creates, updates, deletes
  if (changes.length > 0) {
    mindmapPersistence.persistNodeChanges(changes)
  }
  prevNodes.current = currentNodes
}, [nodes])

2. IndexedDB Schema (db.ts) ​

Three object stores:

  • nodes - Cached node data (indexed by userId, mapId)
  • maps - Mindmap metadata
  • syncQueue - Pending changes for backend sync

3. Sync Queue Compression (sync-manager.ts) ​

Multiple updates to the same node are coalesced:

NODE_UPDATE(id=1, text="A") + NODE_MOVE(id=1, x=10)
  → NODE_COALESCED_UPDATE(id=1, { text: "A", x: 10 })

4. Backend Processing (sync.go / server.go) ​

go
// (POST /api/v1/nodes/batch)
func (s *Server) BatchUpdateNodesApiV1NodesBatchPost(ctx echo.Context, params BatchUpdateNodesApiV1NodesBatchPostParams) error {
	// ... binds BatchUpdateNodes request and runs processed, skipped, err := syncSvc.ProcessBatch(...)
}

Error Handling ​

  • Offline: Changes queue locally; sync resumes when online
  • Network errors: Exponential backoff retry (1s, 2s, 4s)
  • 409 Conflict: Ignored (idempotent creates)
  • beforeunload: Triggers sync to prevent data loss