stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
9ca2de05dff9c7db11eb49df6d4e47bbfe7a99f6
git.stella-ops.org/docs/features/checked/web/visual-graph-diff-with-change-highlights.md
master 5bca406787 save checkpoint: save features
2026-02-12 10:27:23 +02:00

2.3 KiB
Raw Blame History

Visual Graph Diff with Change Highlights

Module

Web

Status

VERIFIED

Description

Full graph diff component with change type highlighting (added/removed/changed), layout engine, split-view, connected element detection, and Storybook stories. Originally marked TODO in advisory but now implemented.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/shared/components/graph-diff/
  • Components:
    • graph-diff (src/Web/StellaOps.Web/src/app/shared/components/graph-diff/graph-diff.component.ts)
    • graph-split-view (src/Web/StellaOps.Web/src/app/shared/components/graph-diff/graph-split-view.component.ts)
  • Engine/Models:
    • src/Web/StellaOps.Web/src/app/shared/components/graph-diff/graph-diff-engine.ts
    • src/Web/StellaOps.Web/src/app/shared/components/graph-diff/graph-diff.models.ts
  • Behavior coverage:
    • src/Web/StellaOps.Web/src/tests/graph/visual-graph-diff-with-change-highlights.behavior.spec.ts
  • Source: Feature matrix scan

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to the relevant page/section where this feature appears
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify side-by-side comparison view renders correctly with two versions
    • Verify additions, removals, and changes are visually highlighted
    • Verify diff data matches the expected delta between versions
  • Edge cases:
    • Verify graceful handling when backend API is unavailable (error state)
    • Verify responsive layout at different viewport sizes
    • Verify accessibility (keyboard navigation, screen reader labels, ARIA attributes)

Verification

  • Run ID: docs/qa/feature-checks/runs/web/visual-graph-diff-with-change-highlights/run-001/
  • Date (UTC): 2026-02-11
  • Tier 0: PASS (graph-diff component, split-view component, engine/models, and supported behavior harness paths/symbols verified).
  • Tier 1: PASS (npm run test focused + regression include suite: 40 files / 184 tests; npm run build passed with baseline warnings only).
  • Tier 2: PASS (change-highlight rendering, connected-element emphasis, split/unified interaction behavior, and deterministic ordering semantics verified via Angular behavior harness).