Files
git.stella-ops.org/docs/features/checked/web/lineage-ui-api-wiring-with-angular-signals.md
2026-02-12 10:27:23 +02:00

4.5 KiB

Lineage UI API Wiring with Angular Signals

Module

Web

Status

VERIFIED

Description

Frontend API client wiring for SBOM lineage graph with Angular signals-based state management. Connects graph visualization, diff/compare panels, and hover card overlays to the backend LineageGraphService API, including Valkey cache integration for compare operations.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/lineage/
  • Routes: lineage.routes.ts
  • Components:
    • attestation-links (src/Web/StellaOps.Web/src/app/features/lineage/components/attestation-links/attestation-links.component.ts)
    • audit-pack-export (src/Web/StellaOps.Web/src/app/features/lineage/components/audit-pack-export/audit-pack-export.component.ts)
    • export-options (src/Web/StellaOps.Web/src/app/features/lineage/components/audit-pack-export/export-options/export-options.component.ts)
    • merkle-display (src/Web/StellaOps.Web/src/app/features/lineage/components/audit-pack-export/merkle-display/merkle-display.component.ts)
    • signing-options (src/Web/StellaOps.Web/src/app/features/lineage/components/audit-pack-export/signing-options/signing-options.component.ts)
    • cgs-badge (src/Web/StellaOps.Web/src/app/features/lineage/components/cgs-badge/cgs-badge.component.ts)
    • compare-panel (src/Web/StellaOps.Web/src/app/features/lineage/components/compare-panel/compare-panel.component.ts)
    • diff-table (src/Web/StellaOps.Web/src/app/features/lineage/components/diff-table/diff-table.component.ts)
    • explainer-step (src/Web/StellaOps.Web/src/app/features/lineage/components/explainer-timeline/explainer-step/explainer-step.component.ts)
    • explainer-timeline (src/Web/StellaOps.Web/src/app/features/lineage/components/explainer-timeline/explainer-timeline.component.ts)
    • export-dialog (src/Web/StellaOps.Web/src/app/features/lineage/components/export-dialog/export-dialog.component.ts)
    • keyboard-shortcuts-help (src/Web/StellaOps.Web/src/app/features/lineage/components/keyboard-shortcuts-help/keyboard-shortcuts-help.component.ts)
    • lineage-compare-panel (src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-compare-panel/lineage-compare-panel.component.ts)
    • lineage-compare (src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-compare/lineage-compare.component.ts)
    • lineage-component-diff (src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-component-diff/lineage-component-diff.component.ts)
    • ... and 32 more components
  • Services:
    • audit-pack (src/Web/StellaOps.Web/src/app/features/lineage/services/audit-pack.service.ts)
    • explainer (src/Web/StellaOps.Web/src/app/features/lineage/services/explainer.service.ts)
    • lineage-export (src/Web/StellaOps.Web/src/app/features/lineage/services/lineage-export.service.ts)
    • lineage-graph (src/Web/StellaOps.Web/src/app/features/lineage/services/lineage-graph.service.ts)
  • Models:
    • src/Web/StellaOps.Web/src/app/features/lineage/components/audit-pack-export/models/audit-pack.models.ts
    • src/Web/StellaOps.Web/src/app/features/lineage/components/diff-table/models/diff-table.models.ts
    • src/Web/StellaOps.Web/src/app/features/lineage/components/explainer-timeline/models/explainer.models.ts
    • src/Web/StellaOps.Web/src/app/features/lineage/components/node-diff-table/models/diff-table.models.ts
    • src/Web/StellaOps.Web/src/app/features/lineage/components/pinned-explanation/models/pinned.models.ts
  • Source: SPRINT_20251229_005_FE_lineage_ui_wiring.md

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /lineage
    • Ensure test data exists (scanned artifacts, SBOM data, or seed data as needed)
  • Core verification:
    • Verify the component renders correctly with sample data
    • Verify interactive elements respond to user input
    • Verify data is fetched and displayed from the correct API endpoints
  • 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: docs/qa/feature-checks/runs/web/lineage-ui-api-wiring-with-angular-signals/run-001/
  • Tier 0 (source): pass ( ier0-source-check.json)
  • Tier 1 (build/tests): pass ( ier1-build-check.json)
  • Tier 2 (behavior): pass ( ier2-e2e-check.json)
  • Verified on (UTC): 2026-02-11T08:05:03Z