feat: show the JSON of a document type, an index or a property

[QuantumExplorer]

Basic explanation

What this does: Clicking a document type, an index or a property in the diagram opens the inspector. The inspector explains what you clicked in plain words, but until now it never showed the JSON the contract actually wrote. It now ends with a JSON of the document type / index / property section: the JSON exactly as written, collapsed until opened, with light syntax highlighting and a Copy button.

Value: you can see the exact source behind any part of the diagram, and copy it, without leaving the page and finding the contract file.

Risks: Low. Display only. The model and the diagram are unchanged.

Before and after

• Before: clicking the DPNS identityId index showed its fields and chips (no nulls), but not the JSON behind them.
• After: the same inspector ends with a collapsed section. Opened, it reads:

{
  "name": "identityId",
  "nullSearchable": false,
  "properties": [
    {
      "records.identity": "asc"
    }
  ]
}

• A document type shows its whole schema: properties, indices, required, config keywords.
• An object property shows its members. For example, DPNS records includes properties.identity.
• In compare mode the section says which version it shows. It is labelled "as in head", or "as in base" when the head removed the element. For example, with ?base=example:dpns&head=example:marketplace, the removed preorder type shows the base's schema.

What was done

• src/components/JsonView.tsx (new): a collapsed JSON block with a Copy button. If the clipboard is refused, Copy selects the text instead.
• src/model/jsonTokens.ts (new): splits pretty-printed JSON into keys, strings, numbers and literals, for highlighting. The tokens join back into the exact text.
• src/model/introspect.ts: writtenProperty(schema, path) returns a property as written, members included, by its dotted path. A field's written leaves members out, because each member is a field of its own.
• InspectorPanel.tsx: the section is added to document types, indexes and properties, with the compare-mode label from diff.status. The diff's key2 is now exported for that label.
  • A property the head removed is not in the merged type's head schema. It falls back to the base's written, which leaves out an object's members.
  • System fields such as $ownerId have no JSON section.
• styles.css: styles for the block. Its colours come from the existing theme variables, so light and dark both work.
• README: a line under Interaction, and the new model file in the layout list.

How Has This Been Tested?

• npx vitest run: 82 passing. New tests:
  • tokenizeJson: the tokens join back into the text; it tells keys from string values, including an escaped quote in a key; it finds numbers and literals.
  • writtenProperty: returns a top-level property, an object with its members, and a nested member; returns undefined for a system field or a path the schema lacks.
• npx tsc -b --noEmit and npm run build: clean.
• Checked in the browser, running the Vite dev server:
  • DPNS domain: the JSON parses back to the whole schema, 14 top-level keys.
  • records: the property JSON includes properties.
  • identityId: the index JSON is as shown above.
  • Compare mode (?base=example:dpns&head=example:marketplace): the removed preorder shows "JSON of the document type · as in base" with the base's schema.

This branches from main. The layout and cost PRs (#3, #4) also add sections to the inspector, so whichever merges second may need a small rebase in InspectorPanel.tsx.

🤖 Generated with Claude Code

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 1aac9609-8fdd-4782-a4c8-dc99f6d516f2

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}