Keep density map tooltip sparkline on its own rail

This commit is contained in:
rcourtman
2026-04-01 20:27:01 +01:00
parent 7e6f904e65
commit b44e5457df
3 changed files with 11 additions and 7 deletions
@@ -230,7 +230,7 @@ connections` visible as the API-backed alternative for Proxmox and
`frontend-modern/src/routing/resourceLinks.ts` instead of freezing raw
route strings or provider-local link builders inside feature panels.
15. Keep shared summary-card emphasis coherent. When shared summary primitives enter an `inactive` state, `SummaryMetricCard`, `InteractiveSparkline`, and `DensityMap` must all demote background context together so storage, infrastructure, and workloads read as one interaction model instead of mixing page-local opacity, sticky-shell, or highlight rules.
16. Keep density-map summaries overview-first. When a shared summary density map receives row focus or chart-hover emphasis, `frontend-modern/src/components/shared/DensityMap.tsx`, `frontend-modern/src/components/shared/useDensityMapState.ts`, and `frontend-modern/src/components/shared/densityMapModel.ts` must preserve the multi-entity overview rows and keep focused-entity detail in the hover tooltip instead of swapping the card into a single-series chart, dimming the rest of the map into unusable background noise, duplicating cursor-value tooltip copy, or adding persistent card chrome that steals heatmap space. The card body must stay overview-first; the tooltip may carry the active entity identity, current value, peak, and mini sparkline, shared tooltip shells must follow semantic surface tokens instead of forcing a dark palette in light mode, the tooltip header must let long entity names consume the available width before truncating rather than clipping against an arbitrary fixed label cap, and numeric metric readouts such as `16.9 MB/s` or `37.4 MB/s` must stay single-line instead of wrapping the unit onto a second row.
16. Keep density-map summaries overview-first. When a shared summary density map receives row focus or chart-hover emphasis, `frontend-modern/src/components/shared/DensityMap.tsx`, `frontend-modern/src/components/shared/useDensityMapState.ts`, and `frontend-modern/src/components/shared/densityMapModel.ts` must preserve the multi-entity overview rows and keep focused-entity detail in the hover tooltip instead of swapping the card into a single-series chart, dimming the rest of the map into unusable background noise, duplicating cursor-value tooltip copy, or adding persistent card chrome that steals heatmap space. The card body must stay overview-first; the tooltip may carry the active entity identity, current value, peak, and mini sparkline, shared tooltip shells must follow semantic surface tokens instead of forcing a dark palette in light mode, the tooltip header must let long entity names consume the available width before truncating rather than clipping against an arbitrary fixed label cap, numeric metric readouts such as `16.9 MB/s` or `37.4 MB/s` must stay single-line instead of wrapping the unit onto a second row, and the mini sparkline must keep its own dedicated rail so longer readouts do not squeeze it out of the tooltip.
17. Keep sparkline scrubbing source-local and sibling-sync timestamp-based. The chart a user is actively scrubbing in `frontend-modern/src/components/shared/InteractiveSparkline.tsx` and `frontend-modern/src/components/shared/useInteractiveSparklineState.ts` must keep its dashed hover cursor on the real local mouse `x`, while sibling cards may map the shared hover timestamp onto their own timelines. Shared cursor sync must not snap the source chart back onto the nearest sample timestamp, the rendered SVG/canvas hover cursor must bind to the actual numeric cursor coordinate rather than a boolean guard state, the time cursor must span the chart viewport instead of collapsing to the series height, and the hover tooltip must track the pointer instead of anchoring to the chart top edge while following the active theme rather than a hardcoded dark shell.
18. Keep shared contextual focus canonical after adoption. Once a summary or table surface enters route-backed contextual focus, future additions must extend `frontend-modern/src/components/shared/contextualFocus.ts` and its guardrail tests rather than forking another helper for workload IDs, resource IDs, or scroll-preserving same-route selection.
19. Keep shared infrastructure/resource selectors on the canonical agent-facet
@@ -106,11 +106,13 @@ export const DensityMap: Component<DensityMapProps> = (props) => {
</Show>
)}
</Show>
<Show when={hoveredFocusDetail()?.sparklinePath}>
{(path) => (
</div>
<Show when={hoveredFocusDetail()?.sparklinePath}>
{(path) => (
<div class="mt-1 flex justify-end">
<svg
viewBox="0 0 64 22"
class="ml-0.5 h-4 w-[56px] shrink-0 overflow-visible"
class="h-4 w-[72px] overflow-visible"
aria-hidden="true"
data-density-map-tooltip-sparkline="true"
>
@@ -123,9 +125,9 @@ export const DensityMap: Component<DensityMapProps> = (props) => {
stroke-width="1.75"
/>
</svg>
)}
</Show>
</div>
</div>
)}
</Show>
</div>
</TooltipPortal>
)}
@@ -656,6 +656,8 @@ describe('shared primitive guardrails', () => {
expect(densityMapSource).not.toContain('max-w-[94px]');
expect(densityMapSource).toContain('whitespace-nowrap text-[11px] font-semibold text-emerald-400');
expect(densityMapSource).toContain('whitespace-nowrap text-[11px] font-semibold text-base-content');
expect(densityMapSource).toContain('mt-1 flex justify-end');
expect(densityMapSource).toContain('w-[72px] overflow-visible');
expect(densityMapSource).not.toContain('timeRangeToMs');
expect(densityMapSource).not.toContain('createSignal');
expect(densityMapSource).not.toContain('ctx.fillRect');