Skip to content

JsonDiff

Two tool results side by side with the difference between them: changed fields for JSON, a line diff for text. Used by replay A/B compare in the inspector.

DataIsland

Examples

Field diff

The same call on two targets. Ignored fields (ids, timestamps) are counted, not listed.

local

OK41 ms · 212 B · 53 tokens
localjson
{
  "items": [
    {
      "id": "iss_1",
      "title": "Fix login"
    }
  ]
}

prod

OK88 ms · 240 B · 60 tokens
prodjson
{
  "items": [
    {
      "id": "iss_9",
      "title": "Fix login page"
    }
  ],
  "next": "c2"
}

2 differencesField by field1 difference ignored

  1. Changed$.items[0].title"Fix login"→"Fix login page"
  2. Added$.next"c2"
Example
<JsonDiff
  a={{ title: 'local', value: a.result, status: { label: 'OK', tone: 'success' }, meta: '41 ms · 212 B' }}
  b={{ title: 'prod', value: b.result, status: { label: 'OK', tone: 'success' }, meta: '88 ms · 240 B' }}
  mode={diff.mode}
  equal={diff.equal}
  changes={diff.changes}
  ignored={diff.ignored}
/>

Text fallback

When a side is not JSON the diff is line by line. panes={false} shows only the diff.

2 differencesLine by line (not JSON)

  Issue created.− created acme#1+ created acme#7
Example
<JsonDiff a={a} b={b} mode="text" equal={false} changes={[]} lines={diff.lines} panes={false} />

Usage

Usage
import { JsonDiff } from '@switchboard/ui'

// diff = core diffResults(a, b, ignorePaths)
<JsonDiff a={paneA} b={paneB} mode={diff.mode} equal={diff.equal} changes={diff.changes} lines={diff.lines} ignored={diff.ignored} more={diff.more} />

Props

Every component also takes mix, for css() and mixins applied after its own style.

JsonDiff

JsonDiff props
PropTypeDefaultDescription
a / b*JsonDiffSide–{ title, value, meta?, status? }: pane title (target name), result value, quiet meta, result badge.
mode*'json' | 'text'–Field list (json) or line diff (text).
equal*boolean–Shows "Same results" and no list.
changes*JsonDiffChange[]–{ path, kind: added | removed | changed, a?, b? }.
linesJsonDiffLine[]–Text mode: { op: same | add | del, text }.
ignorednumber0Differences hidden by ignore paths (shown as a count).
morenumber0Changes over the listing cap.
panesbooleantrueRender the two result panes above the diff.

Also accepts every <section> attribute. Computes nothing: pass the diff from core diffResults.

Accessibility

  • The summary is role="status" text ("3 differences", "2 differences ignored").
  • Each change names its kind in text (visually hidden next to the + / − / ~ mark); colour is never the only cue.
  • The line diff is a named <pre>; each line starts with + or −.

Guidance

Do

  • Show time, size and tokens per side in meta.
  • Say how many differences were ignored.

Don’t

  • Hide differences silently.
  • Render unredacted results.