stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity
Files
cf5b72974f923126944f4dcd47e85864ebb31a3b
git.stella-ops.org/docs/features/unchecked/web/node-diff-table-component.md

3.4 KiB
Raw Blame History

Node Diff Table Component (Tabular SBOM Change Comparison)

Module

Web

Status

IMPLEMENTED

Description

Tabular component-change diff view with filter chips (added/removed/modified/unchanged), debounced search, multi-column sorting, row selection with bulk actions, pagination, and CSV export capability for SBOM lineage comparison.

Implementation Details

  • Feature directory: src/Web/StellaOps.Web/src/app/features/compare/
  • Components:
    • actionables-panel (src/Web/StellaOps.Web/src/app/features/compare/components/actionables-panel/actionables-panel.component.ts)
    • baseline-rationale (src/Web/StellaOps.Web/src/app/features/compare/components/baseline-rationale/baseline-rationale.component.ts)
    • baseline-selector (src/Web/StellaOps.Web/src/app/features/compare/components/baseline-selector.component.ts)
    • categories-pane (src/Web/StellaOps.Web/src/app/features/compare/components/categories-pane.component.ts)
    • compare-view (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view.component.ts)
    • compare-view (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view/compare-view.component.ts)
    • degraded-mode-banner (src/Web/StellaOps.Web/src/app/features/compare/components/degraded-mode-banner/degraded-mode-banner.component.ts)
    • delta-summary-strip (src/Web/StellaOps.Web/src/app/features/compare/components/delta-summary-strip.component.ts)
    • envelope-hashes (src/Web/StellaOps.Web/src/app/features/compare/components/envelope-hashes/envelope-hashes.component.ts)
    • export-actions (src/Web/StellaOps.Web/src/app/features/compare/components/export-actions/export-actions.component.ts)
    • graph-mini-map (src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts)
    • items-pane (src/Web/StellaOps.Web/src/app/features/compare/components/items-pane.component.ts)
    • proof-pane (src/Web/StellaOps.Web/src/app/features/compare/components/proof-pane.component.ts)
    • three-pane-layout (src/Web/StellaOps.Web/src/app/features/compare/components/three-pane-layout.component.ts)
    • trust-indicators (src/Web/StellaOps.Web/src/app/features/compare/components/trust-indicators.component.ts)
    • ... and 3 more components
  • Services:
    • compare-export (src/Web/StellaOps.Web/src/app/features/compare/services/compare-export.service.ts)
    • compare (src/Web/StellaOps.Web/src/app/features/compare/services/compare.service.ts)
    • delta-compute (src/Web/StellaOps.Web/src/app/features/compare/services/delta-compute.service.ts)
    • user-preferences (src/Web/StellaOps.Web/src/app/features/compare/services/user-preferences.service.ts)
  • Source: SPRINT_20251229_001_006_FE_node_diff_table.md

E2E Test Plan

  • Setup:
    • Log in with a user that has appropriate permissions
    • Navigate to /compare/:currentId
    • 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)