feat(visualization): redesign color settings popover (#4486)

Author: ChristianHuehn

plans/2026-05-13-redesign-color-settings-popover.md

@@ -1,7 +1,7 @@
 ---
 name: redesign-color-settings-popover
 issue: ""
-state: progress
+state: complete
 version: <next>
 date: 2026-05-13
 git_commit: 7708617904d4310f0896fc9b9f666235d6eab2f6
@@ -12,6 +12,8 @@ tags: [plan, visualization, metricsBar, colorSettingsPopover, daisyui, restyle]
 
 # Redesign the Color settings popover
 
+> **Superseded** by `plans/color_metric_popover/2026-06-11-restyle-color-metric-popover.md` — the popover is being migrated to a new mockup-based layout. Phases 1–2 of this plan were implemented and remain in place until the new plan lands.
+
 ## Goal
 
 The Color settings popover currently looks broken (`RestyleImages/BadMenu.png`): a 150 px-wide slider rail floats in a 640 px container leaving the number inputs orphaned at the edges, two full-width red-outline reset buttons dominate the visual hierarchy, and the color picker rows sit sparsely in a popover much wider than they need to be. The Label settings panel (`features/labelSettings/components/labelSettingsPanel/labelSettingsPanel.component.html`) is the visual reference — calm, scannable, no oversized destructive buttons. Bring the Color popover to that standard by re-arranging the existing sub-components and demoting the reset buttons. No sub-component refactors.

plans/color_metric_popover/2026-06-11-restyle-color-metric-popover.md

@@ -0,0 +1,75 @@
+---
+name: restyle-color-metric-popover
+issue: ""
+state: complete
+version: 1
+date: 2026-06-11
+tags: [plan, visualization, metricsBar, colorSettingsPopover, markedPackages, restyle]
+---
+
+# Restyle the Color settings popover to the new mockup
+
+Mockup: `plans/color_metric_popover/restyle_color_metric.png`
+Supersedes: `plans/2026-05-13-redesign-color-settings-popover.md`
+
+## Goal
+
+Migrate the Color settings popover to the mockup's single-column layout: header with metric name, slider row, distribution chart, segmented gradient mode, bands list with node counts, a folder-overrides section (backed by markedPackages), and an invert/reset footer.
+
+Decisions (clarified with user):
+
+- **Styling**: structure only — adopt the mockup's layout/sections/controls but use existing DaisyUI/Tailwind theme tokens (no cream/mono theme).
+- **Gradient modes**: keep all 4 `ColorMode` values as a segmented control (Absolute / Focused / Weighted / Relative). No behavior change.
+- **Folder overrides**: reuse the markedPackages state (shared with sidebar). Swatch click recolors with arbitrary colors, × unmarks, "Pin a folder color…" opens a folder search that marks a new package.
+- **Scope**: phased — restyle first, folder overrides second. The 2026-05-22 metrics-bar distributions plan stays separate.
+
+## Tasks
+
+### 1. Restyle existing controls into the mockup layout
+
+- Fixed narrow popover width (~420px), single column; drop the `w-[640px]`/`w-80` dynamic width logic
+- Header row: swatch dot + "Color by <metric>" + reset-thresholds icon button (right) — replaces the inline "Reset thresholds" button
+- Slider row: min input — slider rail with value labels above — max input
+- DISTRIBUTION section: section label, "<metric> × quantile %" caption, quantile diagram resized to fit the column (replace hardcoded 550×250 SVG size)
+- GRADIENT MODE: segmented control (DaisyUI join) for all 4 modes
+- BANDS section: one row per band — swatch + value range + node count; swatch opens the existing color picker (replaces the labelled picker rows); keep the "selected" row
+- Footer: Invert colors toggle (left) + Reset colors button (right)
+- Delta mode / unary metric: keep the simplified narrow variant (delta pickers + selected + footer), as today
+
+### 2. Folder overrides section (markedPackages)
+
+- Selector providing marked packages with descendant file counts
+- Section: "FOLDER OVERRIDES" label + "<n> pinned" + helper text ("These folders use a fixed color instead of the metric. Click a swatch to recolor.")
+- Row: swatch (click → color picker, dispatch `markPackages` with new color) + path + file count + × (`unmarkPackage`)
+- "Pin a folder color…": inline folder search (autocomplete over folder paths) that marks the chosen folder
+- Section always shows the pin button; list renders only when packages exist
+
+### 3. Tests + changelog
+
+- Unit tests for new selector(s), band counts, and folder-override interactions
+- `Changed` entry in `visualization/CHANGELOG.md`
+
+## Steps
+
+- [x] Complete Task 1: restyle existing controls into the mockup layout
+- [x] Complete Task 2: folder overrides section
+- [x] Complete Task 3: tests + changelog
+
+## Review Feedback Addressed
+
+1. **Invert/Reset placement**: Moved the Invert colors toggle + Reset colors row from the popover footer to between the Bands section and Folder Overrides.
+2. **Reset scope**: `Reset colors` now also resets the gradient mode (`dynamicSettings.colorMode`) — outside delta mode only, since the control is not visible there.
+3. **Picker light-dismiss bug**: Choosing a color closed the popover because the mat-menu picker rendered in a CDK overlay on `document.body`, outside the native `[popover]`, triggering light dismiss. Replaced with `cc-inline-color-picker`, which renders the `color-chrome` panel inside the popover DOM (fixed-positioned so it escapes the scrollable override list).
+4. **Override list density**: Rows sit in a `gap-0.5` container capped at `max-h-36` (~5 rows) with `overflow-y-auto`; full path shown as tooltip on each row and each search suggestion.
+5. **Folder search auto-close**: The search closes on blur when empty (typed terms keep it open); the suggestion list prevents the input blur on mousedown so clicking a suggestion with an empty term still pins it.
+6. **Invert/Reset row sizing**: The row looked oversized next to the dense column — "Invert colors" now uses `text-sm` and the Reset colors button renders as `btn-sm` via a new opt-in `small` input on `cc-reset-settings-button` (other popovers keep the full-size default).
+7. **Sub-agent review findings (all 12 fixed)**: inline picker closes on `pointerdown` instead of `click` so a drag released outside the panel keeps the picked color (pending `(onChange)` value is emitted if the close races the 100ms `onChangeComplete` debounce); panel also closes on container scroll, window resize, and popover close; Escape cancels the folder search without light-dismissing the popover (`preventDefault`); `mousedown` preventDefault moved from the suggestion `<ul>` (broke scrollbar dragging) to the buttons; helper copy corrected (marking colors tint folder floors, not buildings) with an "n files" tooltip on counts; both selectors skip excluded nodes; count attribution rewritten as an O(leaves×depth) path walk-up; `rounded-btn` (removed in DaisyUI 5) replaced with `rounded-md`; nested pins avoid their marked parent's color (reducer would drop them); gradient radio group got `role="radiogroup"` and a per-popover `name`; reset tooltip is delta-aware; new tests for all of the above plus the header threshold reset and the diagram size inputs. Components were also rewired through feature stores/services (`FolderOverridesStore/Service`, `MapColorsStore.setMapColors`) to satisfy the dependency-cruiser rule `feature-only-stores-can-import-ngrx-store`.
+
+## Notes
+
+- Band counts: `colorCategoryCounts$` (`ui/codeMap/codeMap.render.service.ts`) already tracks positive/neutral/negative node counts — reuse or derive a selector from `metricDataSelector` + `colorRangeSelector`
+- Marked-package recoloring is no longer limited to the 5 `markingColors` — verify rendering and sidebar handle arbitrary hex colors
+- Header reset icon resets thresholds only; footer "Reset colors" keeps its current behavior (colors + invert checkbox)
+- Verified headless via Electron + Playwright (`xvfb-run`): popover layout, segmented gradient mode, band counts, pin/recolor/unpin folder overrides (pinned `/root` → count 8 across both sample maps), invert toggle, threshold reset. Delta-mode variant covered by unit tests only.
+- New files: `colorBandRow.component.*`, `folderOverrides.component.*`, `markedPackagesWithCounts.selector.*`, `markableFolderPaths.selector.*` (all under `features/metricsBar/`); diagram got `diagramWidth`/`diagramHeight`/`showAxisLabels` inputs
+- `npm run build`, full `npm test` (367 suites), and `npm run format:check` all pass

plans/color_metric_popover/restyle_color_metric.png

@@ -13,13 +13,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 - **Label Size slider**: New slider in the Label Settings panel scales floating label text (name, metric value, and "+N more" badge) between 0.75× and 2.5×. The setting is preserved in scenarios.
 - **File Explorer sidebar**: The file tree was redesigned as a dedicated left-side sidebar drawer that overlays the codemap. The drawer adds a Shown/Flattened/Hidden chip row at the top, a sort control, and click-to-edit popovers for the active flatten and exclude rules.
 - **Collapsible File Explorer**: The sidebar can now be collapsed via the `«` button in the header. Collapsed mode shows a small floating search box (with the kebab Flatten/Exclude menu) pinned at the top-left, freeing the full viewport for the codemap. Re-expand with the folder-tree button.
+- **Folder overrides in the Color settings popover**: Marked packages can now be managed directly from the Color popover. A new "Folder Overrides" section lists each pinned folder with its file count, lets you recolor it via a swatch click (any color, no longer limited to the five marking colors), unpin it, and pin new folders through an inline folder search.
 
 ### Changed
 
 - **Inspector sidebar**: The attribute sidebar was redesigned as the "Inspector" — a right-side drawer (`features/sidebarInspector/`) that slides in when a building is selected and closes via ✕ (which also deselects the building) or by deselecting. It shows the selected node's path with a copy-to-clipboard button and badges for the node type (file/folder) and a folder's file count, the current Area/Height/Color/Edge metric mapping with the selected node's value per mapped metric (buildings show their own values, folders the aggregate of the contained files; the color block carries an `inverted` marker), and all node metrics with severity-colored bars sized by the value's share of the whole map — a building with 100 rloc in a 1,000-rloc map fills 10% (severity respects higher-is-better metric directions). A `map | range` toggle in the METRICS header switches the bars between comparing against the whole map and comparing against the min/max range of all files. The header and metric mapping stay pinned at the top; only the metrics list scrolls. Metrics with empty (zero) values and no delta are greyed out and grouped in a collapsible "Empty metrics" section below the valued metrics; in comparison mode a metric that dropped to zero stays in the main list so its delta remains visible. Delta values and delta file counts are still shown in comparison mode. The Σ/median attribute-type toggle was removed.
 - **Floating metrics bar**: Replaced the top-of-page ribbon with a single rounded card that floats just above the bottom bar (`features/metricsBar/`). Each metric segment (Scenario, Area, Height, Color, Edges, Labels) opens a native popover for search and settings; the bar uses DaisyUI primitives and is free of `@angular/material`.
 - **Metric settings popovers**: Restyled the Area, Height, Color, and Edge settings popovers to match the Label settings panel — same DaisyUI spacing (`gap-2.5 py-2 px-5`) and a full `btn btn-outline btn-error` reset button that stretches to the popover width.
-- **Color settings popover layout**: Re-laid out the Color settings popover so the threshold slider rail aligns with the number inputs, the `Reset thresholds` button sits inline at the end of the slider row, the popover narrows to `w-80` in delta or unary-metric mode, and the bottom row reads `Invert Colors` (left) → `Reset colors` (right).
+- **Color settings popover layout**: Redesigned the Color settings popover as a single narrow column: a header with the metric name and a reset-thresholds icon, the threshold slider, a compact "Distribution" quantile chart, the gradient mode as a segmented control (Absolute / Focused / Weighted / Relative), a "Bands" list showing each color band with its building count and a click-to-recolor swatch, followed by an Invert colors toggle and the `Reset colors` button (which now also resets the gradient mode) above the folder overrides. The popover narrows further in delta or unary-metric mode.
 - **Faster blacklist operations**: Adding or removing flatten and exclude patterns is significantly faster on large codebases — the matching engines are now cached and only rebuilt when the blacklist itself changes.
 
 ### Fixed 🐞

visualization/CHANGELOG.md

@@ -0,0 +1,13 @@
+<div class="flex items-center gap-2">
+    <cc-inline-color-picker
+        [hexColor]="color()"
+        [ariaLabel]="'Recolor ' + mapColorFor()"
+        (colorChange)="handleColorChange($event)"
+    ></cc-inline-color-picker>
+    <span class="min-w-0 flex-1 truncate text-sm">
+        {{ mapColorFor() | mapColorLabel: colorRange() : nodeMetricRange() : colorMetric() }}
+    </span>
+    @if (count() !== null) {
+        <span class="text-xs opacity-60 tabular-nums">{{ count() }}</span>
+    }
+</div>

visualization/app/codeCharta/features/metricsBar/components/colorSettingsPopover/colorBandRow.component.html

@@ -0,0 +1,55 @@
+import { TestBed } from "@angular/core/testing"
+import { State } from "@ngrx/store"
+import { MockStore, provideMockStore } from "@ngrx/store/testing"
+import { render, screen } from "@testing-library/angular"
+import { setMapColors } from "../../../../state/store/appSettings/mapColors/mapColors.actions"
+import { defaultState } from "../../../../state/store/state.manager"
+import { ColorBandRowComponent } from "./colorBandRow.component"
+
+describe("ColorBandRowComponent", () => {
+    async function setup(inputs: { mapColorFor: string; count?: number | null }) {
+        const renderResult = await render(ColorBandRowComponent, {
+            inputs,
+            providers: [provideMockStore({ initialState: defaultState }), { provide: State, useValue: { getValue: () => defaultState } }]
+        })
+        return { component: renderResult.fixture.componentInstance }
+    }
+
+    it("should render the band count when one is provided", async () => {
+        // Arrange & Act
+        await setup({ mapColorFor: "positive", count: 312 })
+
+        // Assert
+        expect(screen.getByText("312")).not.toBeNull()
+    })
+
+    it("should not render a count when none is provided", async () => {
+        // Arrange & Act
+        await setup({ mapColorFor: "selected" })
+
+        // Assert
+        expect(screen.getByText("selected")).not.toBeNull()
+        expect(screen.queryByText("null")).toBeNull()
+    })
+
+    it("should resolve its color from the map colors", async () => {
+        // Arrange & Act
+        const { component } = await setup({ mapColorFor: "positive" })
+
+        // Assert
+        expect(component.color()).toBe(defaultState.appSettings.mapColors.positive)
+    })
+
+    it("should dispatch setMapColors for its map color when the picker emits", async () => {
+        // Arrange
+        const { component } = await setup({ mapColorFor: "neutral" })
+        const store = TestBed.inject(MockStore)
+        const dispatchSpy = jest.spyOn(store, "dispatch")
+
+        // Act
+        component.handleColorChange("#123456")
+
+        // Assert
+        expect(dispatchSpy).toHaveBeenCalledWith(setMapColors({ value: { neutral: "#123456" } }))
+    })
+})

visualization/app/codeCharta/features/metricsBar/components/colorSettingsPopover/colorBandRow.component.spec.ts

@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core"
+import { toSignal } from "@angular/core/rxjs-interop"
+import { MapColors } from "../../../../codeCharta.model"
+import { defaultMapColors } from "../../../../state/store/appSettings/mapColors/mapColors.reducer"
+import { MapColorLabelPipe } from "../../../../ui/colorPickerForMapColor/mapColorLabel.pipe"
+import { ColorMetricService } from "../../services/colorMetric.service"
+import { ColorRangeService } from "../../services/colorRange.service"
+import { MapColorsService } from "../../services/mapColors.service"
+import { SelectedColorMetricDataService } from "../../services/selectedColorMetricData.service"
+import { InlineColorPickerComponent } from "./inlineColorPicker.component"
+
+export type BandMapColor = keyof Omit<MapColors, "labelColorAndAlpha" | "markingColors" | "isColorRangeInverted" | "areDeltaColorsInverted">
+
+@Component({
+    selector: "cc-color-band-row",
+    templateUrl: "./colorBandRow.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [InlineColorPickerComponent, MapColorLabelPipe]
+})
+export class ColorBandRowComponent {
+    constructor(
+        private readonly colorMetricService: ColorMetricService,
+        private readonly colorRangeService: ColorRangeService,
+        private readonly selectedColorMetricDataService: SelectedColorMetricDataService,
+        private readonly mapColorsService: MapColorsService
+    ) {}
+
+    readonly mapColorFor = input.required<BandMapColor>()
+    readonly count = input<number | null>(null)
+
+    readonly colorMetric = toSignal(this.colorMetricService.colorMetric$(), { initialValue: "" })
+    readonly colorRange = toSignal(this.colorRangeService.colorRange$(), { initialValue: { from: 0, to: 0 } })
+    readonly nodeMetricRange = toSignal(this.selectedColorMetricDataService.selectedColorMetricData$(), {
+        initialValue: { values: [] as number[], minValue: 0, maxValue: 0 }
+    })
+    private readonly mapColors = toSignal(this.mapColorsService.mapColors$(), { initialValue: defaultMapColors })
+
+    readonly color = computed(() => this.mapColors()[this.mapColorFor()] as string)
+
+    handleColorChange(newHexColor: string) {
+        this.mapColorsService.setMapColors({ [this.mapColorFor()]: newHexColor })
+    }
+}

visualization/app/codeCharta/features/metricsBar/components/colorSettingsPopover/colorBandRow.component.ts

@@ -0,0 +1,12 @@
+<div class="flex flex-col gap-1">
+    <span class="text-xs uppercase tracking-wider opacity-60">Bands</span>
+    @if (!isDeltaState()) {
+        <cc-color-band-row mapColorFor="positive" [count]="colorCategoryCounts().positive"></cc-color-band-row>
+        <cc-color-band-row mapColorFor="neutral" [count]="colorCategoryCounts().neutral"></cc-color-band-row>
+        <cc-color-band-row mapColorFor="negative" [count]="colorCategoryCounts().negative"></cc-color-band-row>
+    } @else {
+        <cc-color-band-row mapColorFor="positiveDelta"></cc-color-band-row>
+        <cc-color-band-row mapColorFor="negativeDelta"></cc-color-band-row>
+    }
+    <cc-color-band-row mapColorFor="selected"></cc-color-band-row>
+</div>