perf: bound SWR cache, clean stale storage, cap annotations

Add LRU cache provider (200 entries) to prevent unbounded SWR memory
growth. Clean up stale PKCE localStorage keys on app init. Cap chart
annotations to 20 visible reference lines with overflow indicator.
This commit is contained in:
Usman Baig
2026-03-10 21:19:33 +01:00
parent 502f4952fc
commit 205cdf314c
7 changed files with 99 additions and 8 deletions

View File

@@ -19,6 +19,8 @@ const ANNOTATION_COLORS: Record<string, string> = {
other: '#a3a3a3',
}
const MAX_VISIBLE_ANNOTATIONS = 20
const ANNOTATION_LABELS: Record<string, string> = {
deploy: 'Deploy',
campaign: 'Campaign',
@@ -254,6 +256,9 @@ export default function Chart({
return markers
}, [annotations, chartData])
const visibleAnnotationMarkers = annotationMarkers.slice(0, MAX_VISIBLE_ANNOTATIONS)
const hiddenAnnotationCount = Math.max(0, annotationMarkers.length - MAX_VISIBLE_ANNOTATIONS)
// ─── Right-click handler ──────────────────────────────────────────
const handleChartContextMenu = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
if (!canManageAnnotations) return
@@ -490,7 +495,7 @@ export default function Chart({
/>
{/* Annotation reference lines */}
{annotationMarkers.map((marker) => {
{visibleAnnotationMarkers.map((marker) => {
const primaryCategory = marker.annotations[0].category
const color = ANNOTATION_COLORS[primaryCategory] || ANNOTATION_COLORS.other
return (
@@ -534,7 +539,7 @@ export default function Chart({
{annotationMarkers.length > 0 && (
<>
<span className="text-[10px] font-medium text-neutral-400 dark:text-neutral-500 mr-1">Annotations:</span>
{annotationMarkers.map((marker) => {
{visibleAnnotationMarkers.map((marker) => {
const primary = marker.annotations[0]
const color = ANNOTATION_COLORS[primary.category] || ANNOTATION_COLORS.other
const count = marker.annotations.length
@@ -577,6 +582,11 @@ export default function Chart({
</button>
)
})}
{hiddenAnnotationCount > 0 && (
<span className="text-[10px] text-neutral-400 dark:text-neutral-500 ml-1">
+{hiddenAnnotationCount} more
</span>
)}
</>
)}
</div>