Sync Flow Simulation - Interactive Visualization

This interactive simulation demonstrates the offline-first data synchronization flow used in the Public Health Engagement & Data Portal. The visualization shows how mutations are created locally, queued for sync, processed by background workers, and how conflicts are detected and resolved.

How It Works

The simulation demonstrates the complete sync flow:

  1. Create Local Mutation: Simulates a user making a change while offline. The mutation is stored in IndexedDB for later synchronization.
  2. Sync to Server: When connectivity returns, pending mutations are pushed to the Sync Service, which writes to DynamoDB for fast queue handling, then background workers process and apply changes to the main database.
  3. Simple Conflict: Demonstrates automatic conflict resolution when two users edit different fields of the same record.
  4. Complex Conflict: Shows scenarios requiring user intervention when the same field is edited with different values.

Interactive Simulation

Use the buttons in the simulation below to explore different scenarios. Watch how data flows through the system components and observe conflict resolution in action.

If the simulation doesn't display properly, you can open it in a new tab.

Key Concepts Demonstrated

Offline-First Storage

The simulation shows how mutations are stored locally in IndexedDB before synchronization. This ensures that field workers can continue operating even when connectivity is unavailable.

Burst Traffic Handling

DynamoDB is used as the sync queue to handle burst writes when hundreds of field workers come back online simultaneously after a network outage. The background worker processes these at a sustainable rate.

Conflict Resolution

The simulation demonstrates two types of conflicts:

  • Simple conflicts: When different fields are edited, changes are automatically merged without user intervention.
  • Complex conflicts: When the same field is edited with different values, the system flags it for user resolution, ensuring data integrity.

Related Content

This simulation complements the Public Health Engagement & Data Portal - System Design document, providing an interactive way to understand the sync flow architecture described in that document.