feat(calm-hub-ui): POC of a new Diff View between architectures

[aamanrebello]

First step towards addressing #2289.

Description

CALM Hub UI Diff Feature Plan

Aim

Build a battle-ready CALM architecture diff experience in calm-hub-ui that can compare two architecture JSON files and identify:

• nodes added, removed, modified, unchanged
• relationships/edges added, removed, modified, unchanged
• renamed nodes and renamed edges
• structural renames where the unique-id changed but the node/relationship is otherwise unchanged

Done so far

• Created diff types in src/model/diff.ts
• Implemented core comparison logic in src/service/diff-service.ts
  • node add/remove detection
  • node modification detection
  • node rename detection
  • relationship add/remove detection
  • relationship modification detection
  • relationship rename detection
• Added test fixtures in src/fixtures/diff-test-architectures.json
• Added src/service/diff-service.test.ts
• Verified the diff-service tests pass
• Add tests for harder edge cases to stress the diff logic
  • edge/relationship rename detection
  • ambiguous rename matching when multiple candidates exist
  • relationship modifications beyond destination changes
  • metadata/interface changes on nodes or relationships
  • duplicate unique-id handling or invalid shapes
• Polish and UX:
  • color-code added/removed/modified/renamed elements
• Integrate with UI:
  • add a /diff route in src/App.tsx
  • create a Diff.tsx container page
  • add DiffGraphPanel.tsx for side-by-side architecture graphs
  • add DiffPanel.tsx for diff summary and details
  • extend parseCALMData() and node/edge rendering to support diff status styling
• Add unit tests for UI:
  • Ensure coverage is comprehensive on both logic and UX.

What is left

• Polish and UX:
  • optionally add a toggle to hide unchanged items
  • add a JSON diff/detail view for property-level changes
• Integrate with main CalmHub
• Apply to timelines

Screenshots:

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📚 Documentation update
• 🎨 Code style/formatting changes
• ♻️ Refactoring (no functional changes)
• ⚡ Performance improvements
• ✅ Test additions or updates
• 🔧 Chore (maintenance, dependencies, CI, etc.)

Affected Components

• CLI (cli/)
• Schema (calm/)
• CALM AI (calm-ai/)
• CALM Hub (calm-hub/)
• CALM Hub UI (calm-hub-ui/)
• CALM Server (calm-server/)
• CALM Widgets (calm-widgets/)
• Documentation (docs/)
• Shared (shared/)
• VS Code Extension (calm-plugins/vscode/)
• Dependencies
• CI/CD

Commit Message Format ✅

Testing

• I have tested my changes locally
• I have added/updated unit tests
• All existing tests pass

Checklist

• My commits follow the conventional commit format
• I have updated documentation if necessary
• I have added tests for my changes (if applicable)
• My changes follow the project's coding standards

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: aamanrebello / name: aamanrebello (3cc566c, 09d583d, 155e4f0, 1779272, 7ba2cd7, a70afe5, a9c2912, cd4779b)
• ✅ login: rocketstack-matt / name: Matthew Bain (64826ab)

[aamanrebello]

/easycla

[aamanrebello]

Video evidence:

video1066756758.mp4

[rocketstack-matt]

For consideration alongside this PR — I've raised #2442 as an alternative implementation that pushes the diff detection logic out of calm-hub-ui and into @finos/calm-models/diff, with a thin runDiff runner in @finos/calm-shared and a new calm diff CLI command.

The architectural intent matches @markscott-ms's comment on #2289 — same diff function backing the UI, the CLI (with --exit-code for "is this really a patch bump?" gating), and any future hub backend, rather than UI-only.

The UI in #2442 uses your components from this PR with import paths rewired to the shared module — same screen, same behaviour. Test fixtures and unit tests are largely ported from your work.

The two PRs are mutually exclusive and only one should land. Posting it so reviewers can compare the two approaches end-to-end and pick the one they prefer; happy to close #2442 if folks would rather keep the diff UI-only at this stage.

[aamanrebello]

For consideration alongside this PR — I've raised #2442 as an alternative implementation that pushes the diff detection logic out of calm-hub-ui and into @finos/calm-models/diff, with a thin runDiff runner in @finos/calm-shared and a new calm diff CLI command.

The architectural intent matches @markscott-ms's comment on #2289 — same diff function backing the UI, the CLI (with --exit-code for "is this really a patch bump?" gating), and any future hub backend, rather than UI-only.

The UI in #2442 uses your components from this PR with import paths rewired to the shared module — same screen, same behaviour. Test fixtures and unit tests are largely ported from your work.

The two PRs are mutually exclusive and only one should land. Posting it so reviewers can compare the two approaches end-to-end and pick the one they prefer; happy to close #2442 if folks would rather keep the diff UI-only at this stage.

Have approved your PR and moved this one to draft. I think it makes sense to have diff logic in calm-models, and the test cases have been devised by making Copilot (with different models) repeatedly think of missing edge cases so they are pretty solid. I am confident the diff logic should be reliable.