Skip to content

Add styling import / export / reset UI#3

Open
jkemmererupgrade wants to merge 3 commits into
feature/lucide-icon-pickerfrom
feature/styling-import-export
Open

Add styling import / export / reset UI#3
jkemmererupgrade wants to merge 3 commits into
feature/lucide-icon-pickerfrom
feature/styling-import-export

Conversation

@jkemmererupgrade
Copy link
Copy Markdown
Owner

Description

Slice 2 of the 3-slice split of aws#1589 per @kmcginnes's review on that PR. This is the Styling Import / Export / Reset UI. Stacks on slice 1 (aws#1777) because it relies on the lucide:<name> storage convention slice 1 introduces.

Adds three buttons to Settings → General:

  • Export Styling — downloads the current node and edge styling as a pretty-printed JSON file (graph-explorer-styling.json, 2-space indent). Icons are written as symbolic references ("iconUrl": "lucide:plane") so the file is human-readable and version-controllable.
  • Import Styling — accepts a styling JSON, validates it via Zod, applies it as the active styling, and stores it as the reference baseline. The schema accepts a shorthand "icon": "<name>" field that gets converted to "iconUrl": "lucide:<name>" on import.
  • Reset All Styling — resets every node and edge style. If a styling file has been imported this session, restores to those values; otherwise reverts to hardcoded defaults.

The per-type Reset to Default button on NodeStyleDialog now also restores to the imported baseline (when one exists), via a new defaultStylingAtom reference copy and a shared mergeDefaultsIntoUserStyling helper.

The shared toJsonFileData utility gets an optional indent parameter (default: compact, to preserve existing callers' behavior). Slice 2's exporter passes indent: 2.

File format notes (slice 2 ↔ aws#1660)

Slice 2's exported format is intentionally a subset of what #1660's styles: section will look like — same { vertices, edges } record-of-types shape, same lucide:<name> icon refs. When the unified config lands, a slice-2 export can drop straight into #1660 under styles:.

Deliberately NOT in this PR

  • No /defaultStyling static route in app.ts — that's slice 3, folded into the unified config (Unified server configuration file aws/graph-explorer#1660) per kmcginnes's direction.
  • No auto-fetch in AppStatusLoader.tsx — slice 3.
  • No example/defaultStyling.json or Docker-mount docs — slice 3.

Validation

  • pnpm run check:types — clean
  • pnpm run check:lint — 0 errors / 0 warnings (oxlint)
  • pnpm run check:format — clean (oxfmt)
  • pnpm test — 1787 / 1787 pass
  • pnpm coverage — all four thresholds met (statements 65.19%, branches 45.47%, functions 58.81%, lines 72.59%); branches floor auto-bumped from 45 → 45 (genuine improvement from new tests).
  • Manually validated against a live Neptune backend (k8s-port-forwarded). Confirmed: vertex labels/icons/colors apply on import; edge labels/colors apply on import (after correcting the test file's edge names to match the deployed schema); per-type Reset restores to the imported baseline; full Reset works both with and without an import; round-trip Export → Import preserves all styling including lucide:<name> icon refs.

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary (docs/features/settings.md, docs/features/graph-view.md).

Add three buttons to the General Settings page:
- Export: downloads current vertex and edge styling as graph-explorer-styling.json
- Import: loads a JSON file, applies it as the live styling baseline, and stores it in
  defaultStylingAtom so per-type Reset on the node style dialog restores to imported
  values rather than application defaults
- Reset All: reverts every vertex and edge to the imported baseline (or application
  defaults if no file has been imported this session)

Introduce defaultStyling.ts with a Zod schema (DefaultStylingSchema), parseDefaultStyling,
resolveDefaultStyling (converts lucide:<name> shorthand to iconUrl references established
by the Lucide icon picker in PR aws#1777), and userStylingToExportFormat. The file format
round-trips cleanly via lucide:<name> refs.

Add mergeDefaultsIntoUserStyling to userPreferences.ts so imported baselines fill gaps
for unstyled types without overwriting user customisations.

Update toJsonFileData with an optional indent param (defaults unchanged) so the exported
file is human-readable.

Add unit tests for the schema, parse/resolve pipeline, hooks, and reset behaviour.
Update docs/features/settings.md and docs/features/graph-view.md accordingly.

Slice 2 of the 3-slice split of aws#1589.
Stacks on aws#1777 (Lucide icon picker).
…rkers

useResolvedIconUrl is no longer used after VertexIcon switched to DynamicIcon
per maintainer feedback on aws#1777.
@jkemmererupgrade jkemmererupgrade force-pushed the feature/styling-import-export branch from c9fa43c to 9ed29c2 Compare May 28, 2026 21:21
@kmcginnes
Copy link
Copy Markdown

@jkemmererupgrade It looks like I'm not allowed to change the target of this PR now that the original target is merged. Could you update it for me?

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