Skip to content

Add JSON export and import for portable graphs - #5

Merged
clioo merged 1 commit into
clioo:mainfrom
rashidazarang:json-import-export
Aug 6, 2026
Merged

clioo merged 1 commit into
clioo:mainfrom
rashidazarang:json-import-export

Conversation

@rashidazarang

Copy link
Copy Markdown
Contributor

What

PNG export captures a picture of a graph, but there was no way to get the graph itself out of one browser and into another (or share one with a friend, or keep a versioned copy in a repo). This adds a portable JSON path, two icon buttons in the header:

  • Download — serializes the active document to <graph-name>.json (pretty-printed, application/json), reusing the existing downloadBlob helper. Filenames are slugged from the graph name ("Retrieval — v2" → retrieval-v2.json).
  • Import — file picker → parseDocumentJson, which reuses sanitizeDocument — the same integrity boundary persisted state already goes through — and returns null on malformed JSON or JSON that isn't a graph document, surfaced as a toast instead of a crash.

Design choice: import never clobbers

importGraph lands the imported document as a new graph in the active project and switches to it (mirroring createGraph: clean history, selection cleared). Importing can't destroy the graph you were looking at, and a bad file changes nothing.

Tests

  • Round-trip through the integrity boundary (documentToJsonBlob → parseDocumentJson → normalizeDocument equality).
  • Rejection: malformed JSON, valid-JSON-but-not-a-document, missing defaults.
  • Filename slugging incl. unicode dashes and empty names.
  • Store: import adds a graph, activates it, inherits the active project, starts with clean undo history.
npm test          # 33 passed + 7 companion (no new failures)
npm run build     # clean

Note: the two storage-failure tests in store.test.ts fail on main before this branch — that's #3, independent of this change.

PNG export captures a picture of a graph, but there was no way to get the
graph itself out of one browser and into another. This adds a portable
JSON path:

- Download: a header button serializes the active document to
  <graph-name>.json (pretty-printed, application/json) through the
  existing downloadBlob helper.
- Import: a header button opens a file picker; the file is parsed with
  parseDocumentJson, which reuses sanitizeDocument — the same integrity
  boundary persisted state goes through — and returns null on malformed
  JSON or non-graph JSON instead of throwing.
- importGraph lands the imported document as a NEW graph in the active
  project and switches to it, so importing never clobbers the graph you
  were looking at. History starts clean, mirroring createGraph.

Tests cover the round-trip through the integrity boundary, malformed and
non-document rejection, filename slugging, and the store-level import.

Note: the two storage failure tests in store.test.ts fail on main before
this change (see the separate fix PR); no new failures are introduced.
@clioo
clioo merged commit ceff086 into clioo:main Aug 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants