2.3 KiB
2.3 KiB
Three-Pane Layout (Categories/Items/Proof)
Module
Web
Status
VERIFIED
Description
The compare feature implements a three-pane layout with categories, items, and proof panes for side-by-side comparison workflows.
Implementation Details
- Feature directory:
src/Web/StellaOps.Web/src/app/features/compare/components/ - Components:
three-pane-layout(src/Web/StellaOps.Web/src/app/features/compare/components/three-pane-layout.component.ts)categories-pane(src/Web/StellaOps.Web/src/app/features/compare/components/categories-pane.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)compare-viewintegration (src/Web/StellaOps.Web/src/app/features/compare/components/compare-view.component.ts)
- Services:
delta-compute(src/Web/StellaOps.Web/src/app/features/compare/services/delta-compute.service.ts)
- Behavior coverage:
src/Web/StellaOps.Web/src/tests/compare/three-pane-layout.behavior.spec.ts
- Source: Feature matrix scan (corrected during QA verification)
E2E Test Plan
- Setup:
- Log in with a user that has appropriate permissions
- Navigate to compare workflow route
- Ensure compare session test data exists (baseline/current scan pair)
- Core verification:
- Verify the three panes render with deterministic panel ordering
- Verify category selection updates item filter and resets item selection
- Verify selected item/category propagate into proof/categories panes
- Edge cases:
- Verify graceful handling when no category is selected (filter clear)
- Verify responsive layout behavior at reduced viewport widths
- Verify keyboard/accessibility semantics for pane interactions
Verification
- Run ID:
docs/qa/feature-checks/runs/web/three-pane-layout/run-001/ - Date (UTC): 2026-02-11
- Tier 0: PASS (source/symbol verification for compare three-pane components and behavior spec).
- Tier 1: PASS (
npm run testfocused suite: 18 files / 92 tests;npm run buildpassed with known baseline warnings). - Tier 2: PASS (behavioral verification of pane rendering, explain-mode/role propagation, deterministic filtering transitions, and cross-pane state propagation).