architecture-as-code icon indicating copy to clipboard operation
architecture-as-code copied to clipboard
verified publisher icon finos

Replace CALM Hub UI's visualiser with the one from calm-explorer

Open pmerrison opened this issue 3 weeks ago • 3 comments

Description

This PR replaces the cytoscape based visualiser in calm-hub-ui with the one from experimental/calm-vizualiser. It includes re-themeing it to match the existing colour scheme, and brings along the node details panel.

This PR does not bring over any of the other UI elements, we can think about what else we might want for a follow up PR

Type of Change

  • [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
  • [x] ✨ 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/)
  • [ ] Shared (shared/)
  • [ ] CALM Widgets (calm-widgets/)
  • [ ] CALM Hub (calm-hub/)
  • [X] CALM Hub UI (calm-hub-ui/)
  • [ ] Documentation (docs/)
  • [ ] VS Code Extension (calm-plugins/vscode/)
  • [ ] Dependencies
  • [ ] CI/CD

Commit Message Format ✅

Testing

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

Checklist

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

pmerrison avatar Nov 25 '25 12:11 pmerrison

Nice! It would be great if the code in individual files was simpler and modularised though - currently there is a lot of stuff in each file.

aamanrebello avatar Nov 25 '25 13:11 aamanrebello

CLA Signed

The committers listed above are authorized under a signed CLA.

  • :white_check_mark: login: pmerrison / name: Paul Merrison (09a25ea783876e31f6d11fc0f4eb49219f55d1c2, 2e08db8872f2667ee6963678ee9ed26f12451629, 31dc70e2ad209592a08cebca5a4f7763b5ecbb9a, 3417ee4f8cb1c89830765d3063f2f02f79062483, 365df6b2a96967900f43d2c75591aedfeec5a233, 37ea8548204a8aa8ad6a46f5531eab73e40dd16c, 3a335262fbc84262bf03d1494b60417d1f061f8c, 4163e790e2563edf3f2c46c736579907ff366a06, 6ea33e5c364cf02519b376b60237f49e9e792de5, 7e09f2a903f0ace315c280bb74a309196b03d757, 9e967d5d459f67450f1444552605e51fd92ca02c, c28824e7f7049fe32d5554f09f2f4fbebc69948f, c604af07776f45deb473dd38cd4dc3b749375903, ecf57dc7b3ea0aa2406bd74651cfcb6c9c118543, f0597f8d02c9dd40692f0f41c22485228c25a46f, fc8848cdc275023a8c8cc960077398aa787f4708)

linux-foundation-easycla[bot] avatar Nov 25 '25 14:11 linux-foundation-easycla[bot]

@aidanm3341 - I think I've addressed all your comments now, here's a summary of what I've changed

Quick Wins

  1. Function syntax conversion - Converted 4 components from arrow functions to function syntax (ArchitectureGraph, CustomNode, FloatingEdge, SystemGroupNode)
  2. CSS variable removal - Removed duplicate CSS variables from index.css, kept hardcoded hex values matching theme/colors.ts

Testing

  1. floatingEdges.ts tests - Added 9 tests for getEdgeParams() function

Feature Restoration

  1. Drawer title - Restored title state and display showing file name or CALM Hub metadata

Major Refactoring

  1. Removed options relationship logic - Deleted expandOptionsRelationships() function and its tests (simplifies architecture-only visualization)
  2. calmTransformer.ts refactoring - Split into: - nodeParser.ts - Node parsing with identifyContainerNodes(), parseNodes() - relationshipParser.ts - Relationship parsing with extractFlowTransitions(), parseRelationships() - Main file reduced from 478 to 228 lines, now a clean orchestrator
  3. ControlsPanel.tsx refactoring - Split into: - controls-panel/ControlsPanelHeader.tsx - controls-panel/ControlCard.tsx - controls-panel/ControlRequirementItem.tsx - controls-panel/AIGFMappingSection.tsx - Main file reduced from 453 to 71 lines
  4. FlowsPanel.tsx refactoring - Split into: - flows-panel/FlowsPanelHeader.tsx - flows-panel/FlowCard.tsx - flows-panel/FlowTransitionItem.tsx - flows-panel/AIGFGovernanceSection.tsx - Main file reduced from 312 to 61 lines

Documentation

  1. Optional fields documentation - Added clarifying comments explaining why fields are optional in CustomNode.tsx and FloatingEdge.tsx

Verification

  1. ADR functionality - All 213 tests pass, including ADR-related tests

New files created: 13 Files modified: 10

pmerrison avatar Nov 28 '25 12:11 pmerrison