Visual Diff in Data Applications

Type: UX pattern for version-controlled data applications

Definition

Visual Diff in Data Applications is the user interface pattern where modified data is visually highlighted within the application's existing view. Instead of requiring users to run separate queries to inspect changes, the application shows diffs inline — similar to how code editors highlight changed lines.

This pattern bridges the gap between code review (where diffs are standard) and data review (where diffs have historically been absent).

How It Works

Dolt Workbench implements three levels of visual diff:

  1. Sidebar highlighting: Modified table names are highlighted in yellow in the left panel, giving immediate awareness of which tables were touched
  2. Changed rows view: A "Show Changed Rows Only" checkbox filters the table view to only show rows in the working set — the rows that were inserted, updated, or deleted
  3. Uncommitted changes panel: A button for "Uncommitted changes" shows a complete diff breakdown of all modifications

Why It Matters

Without visual diff, users of AI-powered data tools have no way to verify agent writes before they're permanent. Google Sheets with Gemini is the cautionary example — no diff view, no undo, because no version control underneath. Visual diff transforms the data application from "trust the agent" to "review and approve."

The pattern is essential for any application where AI agents write to databases — without it, the commit confirmation pattern has nothing to show the user.

Relationship to Other Patterns

  • Commit Confirmation Pattern: Visual diff is the mechanism that enables commit confirmation — users need to see the changes before they can confirm them
  • Chat on the Side: The agent's actions are shown in the chat panel, while diffs appear in the main data view
  • Dolt as Agentic Database: Dolt's internal diff tracking makes visual diff possible at the database level
  • Branch-Aware LLM Writes: Branch-level isolation means the working set diff is always clean and reviewable

Examples

  • Dolt Workbench: yellow table highlights, "Show Changed Rows Only," "Uncommitted changes" panel
  • Git GUIs (SourceTree, GitHub Desktop): inline diff views for code
  • Google Docs: suggestion mode highlighting changes before acceptance
  • Factory pipeline: artifact diffs between pipeline stages for human review

Source

From Cursor for SQL — Introducing Agent Mode: "As the agent makes changes, you'll immediately notice visual changes in the workbench. The table names in the left panel are highlighted in yellow to indicate that their data has been modified."