Issue 2204 - added modal to compare up to 3 analysis#2236
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an “Analysis Comparison” modal to the facility Analysis Dashboard, enabling users to select and compare up to three analysis items side-by-side from the dashboard UI.
Changes:
- Added dashboard UI controls (“Compare Analysis” button) and a new modal to select up to 3 analyses and render their detail cards side-by-side.
- Added component state and selection logic to manage modal open/close, selection toggling, and showing comparison details.
- Added CSS styles for the comparison modal, compare button, and category badges.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/app/data-evaluation/facility/analysis/analysis-dashboard/analysis-dashboard.component.ts | Adds modal state + selection logic for choosing up to 3 analysis items and showing comparison details. |
| src/app/data-evaluation/facility/analysis/analysis-dashboard/analysis-dashboard.component.html | Adds “Compare Analysis” button, comparison modal markup, and overlays modal state into the existing overlay logic. |
| src/app/data-evaluation/facility/analysis/analysis-dashboard/analysis-dashboard.component.css | Adds styling for the compare modal layout, compare button, and category badges. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/app/data-evaluation/facility/analysis/analysis-dashboard/analysis-dashboard.component.ts
Show resolved
Hide resolved
|
|
||
| <div> | ||
| <button class="btn action-btn m-0" (click)="openCreateAnalysis()">+Add New Analysis</button> | ||
| <div class="d-flex align-items-right"> |
There was a problem hiding this comment.
align-items-right is not a Bootstrap utility class (and it isn’t defined anywhere in the repo), so it has no effect. Use the intended Bootstrap alignment utility (e.g., align-items-center for vertical alignment, and/or justify-content-end for right alignment) or add a defined class.
| <div class="d-flex align-items-right"> | |
| <div class="d-flex align-items-center justify-content-end"> |
| <div class="fw-bold italic d-flex justify-content-center title">Select up to 3 analysis items to compare</div> | ||
| <div class="row g-3 mt-4 mb-4"> |
There was a problem hiding this comment.
Class italic isn’t defined anywhere in the codebase and isn’t a Bootstrap utility. If italics are intended here, use Bootstrap’s fst-italic (or add a local/global .italic style).
src/app/data-evaluation/facility/analysis/analysis-dashboard/analysis-dashboard.component.css
Show resolved
Hide resolved
connects #2204
This pull request adds a new feature to the Analysis Dashboard that allows users to compare up to three analysis items side-by-side. It introduces a modal for selecting and comparing analyses, updates the UI to include a "Compare Analysis" button, and styles the new components appropriately.
New Analysis Comparison Feature:
compareAnalysisModal) that allows users to select up to three analysis items and view their details side-by-side. The modal includes logic for selecting/deselecting items and enabling the "Compare" button only when at least two items are selected.UI and Styling Enhancements:
Data Handling:
facilityAnalysisItems) is kept up-to-date when the selected facility changes, supporting accurate comparison selection.