mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-22 19:23:31 +00:00
fix(frontend): keep density tooltip values single-line
This commit is contained in:
@@ -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, and the tooltip header must let long entity names consume the available width before truncating rather than clipping against an arbitrary fixed label cap.
|
||||
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.
|
||||
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
|
||||
|
||||
@@ -70,7 +70,7 @@ export const DensityMap: Component<DensityMapProps> = (props) => {
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-[9px] uppercase tracking-wide text-muted">Current</span>
|
||||
<span class="text-[11px] font-semibold text-emerald-400">
|
||||
<span class="whitespace-nowrap text-[11px] font-semibold text-emerald-400">
|
||||
{densityMap.formatValue(hover().value)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -79,7 +79,9 @@ export const DensityMap: Component<DensityMapProps> = (props) => {
|
||||
fallback={
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-[9px] uppercase tracking-wide text-muted">Peak</span>
|
||||
<span class="text-[11px] font-semibold text-base-content">No sample</span>
|
||||
<span class="whitespace-nowrap text-[11px] font-semibold text-base-content">
|
||||
No sample
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@@ -97,7 +99,7 @@ export const DensityMap: Component<DensityMapProps> = (props) => {
|
||||
>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-[9px] uppercase tracking-wide text-muted">Peak</span>
|
||||
<span class="text-[11px] font-semibold text-base-content">
|
||||
<span class="whitespace-nowrap text-[11px] font-semibold text-base-content">
|
||||
{formatDetailValue(detail().peakValue)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -654,6 +654,8 @@ describe('shared primitive guardrails', () => {
|
||||
expect(densityMapSource).toContain('data-density-map-tooltip-sparkline="true"');
|
||||
expect(densityMapSource).toContain('grid-cols-[auto_minmax(0,1fr)_auto]');
|
||||
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).not.toContain('timeRangeToMs');
|
||||
expect(densityMapSource).not.toContain('createSignal');
|
||||
expect(densityMapSource).not.toContain('ctx.fillRect');
|
||||
|
||||
Reference in New Issue
Block a user