Technologies used
- Angular and TypeScript
- RxJS and NgRx
- SVG or Canvas rendering adapter
- REST or GraphQL data services
- Web Workers for expensive layout work
- Automated accessibility and component tests
Data-rich interface case study
Knowledge Graph UI for Clear, Context-Preserving Exploration
An Angular interaction architecture that helps users find entities, understand relationships and investigate connected information without losing context.
Project overview
This exploration defined a maintainable frontend for navigating a graph of entities and relationships. The interface combined search, filters, a visual canvas and a synchronized details panel. Users could begin with a known entity, expand only relevant relationships and return to earlier investigation states.
The goal was not to place every node on one canvas. It was to translate a complex connected dataset into a guided, explainable workflow that remained useful on smaller screens and to people who do not use a pointing device.
Business problem
Dense graph visualizations quickly become unreadable. Rendering thousands of elements hurts performance, while relying on spatial position alone excludes keyboard and assistive-technology users. Investigation workflows also fail when selecting a new node destroys the context that led to it.
The product needed progressive discovery, stable navigation history and a clear separation between domain data, UI state and the chosen rendering library.
My responsibilities
- Mapped the discovery journey from search through relationship expansion and evidence review.
- Defined Angular component, state-management and visualization-adapter boundaries.
- Designed loading, empty, partial-data and high-density states.
- Specified keyboard interaction and a structured list alternative to the visual graph.
- Established performance budgets for visible nodes, layout work and data requests.
- Created reusable patterns for selection, filtering, breadcrumbs and detail inspection.
Experience principles
- Reveal relationships progressively.
- Keep selection and filters predictable.
- Preserve investigation history.
- Explain why entities are connected.
- Offer equivalent non-visual navigation.
- Keep rendering technology replaceable.
Architecture and implementation
Normalized graph state
Entities and relationships were stored by identifier rather than duplicated inside nested view models. Separate state represented the current selection, filters, expanded neighborhoods and history. Selectors derived the visible subgraph, keeping the rendering layer focused on presentation.
Visualization adapter
An adapter translated typed domain models into renderer-specific nodes and edges. Angular components did not depend directly on one graph library. This boundary made it possible to compare SVG and Canvas approaches, test transformation logic independently and change rendering technology without rewriting domain workflows.
Progressive loading
The first response returned a focused neighborhood rather than the complete graph. Expansion fetched only the selected relationship set, cached previous results and cancelled stale requests through RxJS. Expensive layout work could move to a Web Worker so the main thread remained responsive.
Accessible equivalent
A synchronized structured list exposed the same entities and relationships as the canvas. Keyboard commands moved selection, the details heading received focus after an explicit open action, and color was never the only carrier of relationship meaning.
Challenges and solutions
Visual overload
Challenge: Too many simultaneous nodes obscured useful relationships.
Solution: Neighborhood limits, relationship filters, clustering and deliberate expand actions kept the initial view understandable.
Main-thread pressure
Challenge: Layout calculations and DOM updates could make interaction sluggish.
Solution: Rendering budgets, batched updates, memoized selectors and worker-based layout protected interaction responsiveness.
Non-visual access
Challenge: A spatial canvas has little inherent semantic structure.
Solution: The list view, descriptive relationship text, predictable focus and full keyboard operations exposed an equivalent investigation path.
Measurable results
The architecture established concrete validation criteria while avoiding invented production claims:
- Visible-node and edge limits could be enforced and tested.
- Graph rendering was isolated from normalized domain state.
- Search, selection, expansion and backtracking had explicit testable states.
- The same information was available through visual and structured-list presentations.
A production implementation would measure task completion, time to identify a relevant relationship, interaction latency, layout duration, error recovery and accessibility test coverage.