feat(visualization): migrate legend panel to feature architecture - #4491
Merged
Conversation
Rebuild the legend as features/legend with OnPush signal components, daisyui/tailwind styling and the components -> services -> stores layering. The legend is now read-only: map colors are no longer editable from it, folder markings are no longer listed, metric titles lose their external links and the panel has no header. Edge metric rows/swatches and delta mode swatches are kept; the panel renders above the floating metrics bar. Move mapColorLabel.pipe to util/pipes, extract the shared HexMapColor type to codeCharta.model.ts and delete the old ui/legendPanel including its marked-packages e2e tests (folder colors are managed via the Color settings popover's folder overrides now). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe PR migrates the legacy legend into a new zoneless, signals-based ChangesLegend Panel Redesign & Migration
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
visualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.ts (1)
20-33:⚠️ Potential issue | 🟡 MinorEnforce
mapColorForas a required input inColorPickerForMapColorComponentto preventundefineddispatch keys.
visualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.tscurrently declaresmapColorForas@Input() mapColorFor: HexMapColorand uses it as an object key insetMapColors({ value: { [this.mapColorFor]: newHexColor }}). UnlikeColorBandRowComponent’sreadonly mapColorFor = input.required<HexMapColor>(), this component doesn’t enforce presence at the input boundary; switching toinput.required<HexMapColor>()(or decorator-required inputs if you keep@Input) would align the public contract and avoid accidentalundefinedkeys.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@visualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.ts` around lines 20 - 33, The `@Input`() property mapColorFor on ColorPickerForMapColorComponent can be undefined and is later used as an object key in handleColorChange when dispatching setMapColors; change the declaration to enforce a required input (mirror ColorBandRowComponent) by using readonly mapColorFor = input.required<HexMapColor>() (or an equivalent required-input helper) instead of `@Input`() mapColorFor: HexMapColor so the component guarantees mapColorFor is present before handleColorChange dispatches setMapColors({ value: { [this.mapColorFor]: newHexColor } }).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@visualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.ts`:
- Around line 11-16: The `@Component` metadata for the legend row components is
missing standalone: true; update the decorators for LegendColorRowComponent
(legendColorRow.component.ts) and LegendMetricRowComponent
(legendMetricRow.component.ts) by adding standalone: true to the `@Component`({
... }) object alongside the existing imports: [MapColorLabelPipe] so the
metadata becomes valid for standalone Angular components.
---
Outside diff comments:
In
`@visualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.ts`:
- Around line 20-33: The `@Input`() property mapColorFor on
ColorPickerForMapColorComponent can be undefined and is later used as an object
key in handleColorChange when dispatching setMapColors; change the declaration
to enforce a required input (mirror ColorBandRowComponent) by using readonly
mapColorFor = input.required<HexMapColor>() (or an equivalent required-input
helper) instead of `@Input`() mapColorFor: HexMapColor so the component guarantees
mapColorFor is present before handleColorChange dispatches setMapColors({ value:
{ [this.mapColorFor]: newHexColor } }).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c187172e-a4b7-453d-8f5d-84a94d424fd6
⛔ Files ignored due to path filters (1)
plans/legend/redesign-legend.pngis excluded by!**/*.png
📒 Files selected for processing (51)
plans/legend/redesign-legend.mdvisualization/CHANGELOG.mdvisualization/app/codeCharta/codeCharta.component.tsvisualization/app/codeCharta/codeCharta.model.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.spec.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendMetricRow.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendMetricRow.component.spec.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendMetricRow.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendPanel.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendPanel.component.spec.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendPanel.component.tsvisualization/app/codeCharta/features/legend/facade.tsvisualization/app/codeCharta/features/legend/services/areaMetric.service.tsvisualization/app/codeCharta/features/legend/services/attributeDescriptors.service.tsvisualization/app/codeCharta/features/legend/services/colorMetric.service.tsvisualization/app/codeCharta/features/legend/services/colorRange.service.tsvisualization/app/codeCharta/features/legend/services/edgeMetric.service.tsvisualization/app/codeCharta/features/legend/services/heightMetric.service.tsvisualization/app/codeCharta/features/legend/services/isDeltaState.service.tsvisualization/app/codeCharta/features/legend/services/mapColors.service.tsvisualization/app/codeCharta/features/legend/services/selectedColorMetricData.service.tsvisualization/app/codeCharta/features/legend/stores/areaMetric.store.tsvisualization/app/codeCharta/features/legend/stores/attributeDescriptors.store.tsvisualization/app/codeCharta/features/legend/stores/colorMetric.store.tsvisualization/app/codeCharta/features/legend/stores/colorRange.store.tsvisualization/app/codeCharta/features/legend/stores/edgeMetric.store.tsvisualization/app/codeCharta/features/legend/stores/heightMetric.store.tsvisualization/app/codeCharta/features/legend/stores/isDeltaState.store.tsvisualization/app/codeCharta/features/legend/stores/mapColors.store.tsvisualization/app/codeCharta/features/legend/stores/selectedColorMetricData.store.tsvisualization/app/codeCharta/features/metricsBar/components/colorSettingsPopover/colorBandRow.component.spec.tsvisualization/app/codeCharta/features/metricsBar/components/colorSettingsPopover/colorBandRow.component.tsvisualization/app/codeCharta/ui/colorPickerForMapColor/colorPickerForMapColor.component.tsvisualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.htmlvisualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.scssvisualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.tsvisualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.htmlvisualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.scssvisualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.spec.tsvisualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.tsvisualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.selector.tsvisualization/app/codeCharta/ui/legendPanel/legendPanel.component.htmlvisualization/app/codeCharta/ui/legendPanel/legendPanel.component.scssvisualization/app/codeCharta/ui/legendPanel/legendPanel.component.spec.tsvisualization/app/codeCharta/ui/legendPanel/legendPanel.component.tsvisualization/app/codeCharta/ui/legendPanel/legendPanel.e2e.tsvisualization/app/codeCharta/ui/legendPanel/legendPanel.po.tsvisualization/app/codeCharta/util/pipes/mapColorLabel.pipe.spec.tsvisualization/app/codeCharta/util/pipes/mapColorLabel.pipe.ts
💤 Files with no reviewable changes (14)
- visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.selector.ts
- visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html
- visualization/app/codeCharta/ui/legendPanel/legendPanel.po.ts
- visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.spec.ts
- visualization/app/codeCharta/ui/legendPanel/legendPanel.component.ts
- visualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.scss
- visualization/app/codeCharta/ui/legendPanel/legendPanel.e2e.ts
- visualization/app/codeCharta/ui/legendPanel/legendPanel.component.scss
- visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.ts
- visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.scss
- visualization/app/codeCharta/ui/legendPanel/legendMarkedPackages/legendMarkedPackages.component.html
- visualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.ts
- visualization/app/codeCharta/ui/legendPanel/legendBlock/legendBlock.component.html
- visualization/app/codeCharta/ui/legendPanel/legendPanel.component.spec.ts
Comment on lines
+11
to
+16
| @Component({ | ||
| selector: "cc-legend-color-row", | ||
| templateUrl: "./legendColorRow.component.html", | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| imports: [MapColorLabelPipe] | ||
| }) |
There was a problem hiding this comment.
Fix missing standalone metadata in legend row components
@Component metadata in visualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.ts and visualization/app/codeCharta/features/legend/components/legendPanel/legendMetricRow.component.ts uses imports: [...] but lacks standalone: true. Add standalone: true to both @Component({ ... }) decorators to restore valid Angular component metadata.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@visualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.ts`
around lines 11 - 16, The `@Component` metadata for the legend row components is
missing standalone: true; update the decorators for LegendColorRowComponent
(legendColorRow.component.ts) and LegendMetricRowComponent
(legendMetricRow.component.ts) by adding standalone: true to the `@Component`({
... }) object alongside the existing imports: [MapColorLabelPipe] so the
metadata becomes valid for standalone Angular components.
Extract the metric rows, color scale, delta colors, and edge colors blocks plus the rotated toggle button from legendPanel into dedicated section components, mirroring the colorSettingsPopover structure. The panel now only owns open/close state, outside-click handling, and its positioning; each section pulls its own data from the legend services. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Render the legend color swatch as a real svg instead of a span with an img role, and replace the event.target Node assertion in the outside-click guard with instanceof narrowing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
visualization/app/codeCharta/features/legend/components/legendPanel/legendMetricsSection.component.html (1)
5-5: 💤 Low valueConsider using a distinct alias name for clarity.
The
as edgeMetricalias shadows the signal propertyedgeMetric, making it less obvious that references inside the@ifblock use the unwrapped value rather than the signal. A distinct name likeas edgewould improve readability.♻️ Suggested refactor
- `@if` (edgeMetric(); as edgeMetric) { - <cc-legend-metric-row label="Edge" [metricName]="edgeMetric"></cc-legend-metric-row> + `@if` (edgeMetric(); as edge) { + <cc-legend-metric-row label="Edge" [metricName]="edge"></cc-legend-metric-row> }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@visualization/app/codeCharta/features/legend/components/legendPanel/legendMetricsSection.component.html` at line 5, The `@if` block currently aliases the unwrapped signal using the same name `edgeMetric` which shadows the signal; change the alias in the template from `as edgeMetric` to a distinct name (for example `as edge`) and update all references inside that `@if` block to use the new alias (`edge`) instead of `edgeMetric()` or the original signal, ensuring any property or method accesses inside the block refer to the unwrapped alias.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@visualization/app/codeCharta/features/legend/components/legendPanel/legendMetricsSection.component.html`:
- Line 5: The `@if` block currently aliases the unwrapped signal using the same
name `edgeMetric` which shadows the signal; change the alias in the template
from `as edgeMetric` to a distinct name (for example `as edge`) and update all
references inside that `@if` block to use the new alias (`edge`) instead of
`edgeMetric()` or the original signal, ensuring any property or method accesses
inside the block refer to the unwrapped alias.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2dbf80d3-a9dd-40f6-a306-e57e2a727dd1
📒 Files selected for processing (14)
visualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendColorScaleSection.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendColorScaleSection.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendDeltaColorsSection.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendDeltaColorsSection.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendEdgeColorsSection.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendEdgeColorsSection.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendMetricsSection.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendMetricsSection.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendPanel.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendPanel.component.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendPosition.tsvisualization/app/codeCharta/features/legend/components/legendPanel/legendToggleButton.component.htmlvisualization/app/codeCharta/features/legend/components/legendPanel/legendToggleButton.component.ts
✅ Files skipped from review due to trivial changes (2)
- visualization/app/codeCharta/features/legend/components/legendPanel/legendColorScaleSection.component.ts
- visualization/app/codeCharta/features/legend/components/legendPanel/legendPosition.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- visualization/app/codeCharta/features/legend/components/legendPanel/legendColorRow.component.html
Sonar S7651 blocker: outputs must not shadow standard DOM events, so the legend toggle button now emits togglePanel instead of toggle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
This was referenced Jun 19, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Rebuild the legend as features/legend with OnPush signal components, daisyui/tailwind styling and the components -> services -> stores layering. The legend is now read-only: map colors are no longer editable from it, folder markings are no longer listed, metric titles lose their external links and the panel has no header. Edge metric rows/swatches and delta mode swatches are kept; the panel renders above the floating metrics bar.
Move mapColorLabel.pipe to util/pipes, extract the shared HexMapColor type to codeCharta.model.ts and delete the old ui/legendPanel including its marked-packages e2e tests (folder colors are managed via the Color settings popover's folder overrides now).
{Meaningful title}
Please read the CONTRIBUTING.md before opening a PR.
Closes: #
Description
Descriptive pull request text, answering:
Definition of Done
A PR is only ready for merge once all the following acceptance criteria are fulfilled:
Screenshots or gifs
Summary by CodeRabbit
Changed
New Features
Documentation
Tests