Skip to content

🤖🤖🤖 perf(history): cache timeline labels and isolate hover updates - #82

Merged
buggedcom merged 2 commits into
mainfrom
perf/timeline-label-formatting
Oct 12, 2026
Merged

buggedcom merged 2 commits into
mainfrom
perf/timeline-label-formatting

Conversation

@buggedcom

Copy link
Copy Markdown
Owner

Summary

Hovering the history chart previously requested a full panel render and repeatedly rebuilt timeline labels. Cache date formatters and scale data, retain toolbar date references, and send hover timestamps directly to the toolbar.

 chart hover
-  reactive panel state → full panel render → recompute timeline labels
+  toolbar properties → toolbar update → reuse unchanged timeline labels
  • Includes the formatter cache, timeline memoization, hover isolation, regression coverage, and rebuilt frontend bundle.
  • Keeps comparison hover timestamps and hover clearing synchronized.

Type of change

  • Bug fix
  • Refactor / code quality
  • Tests

Evidence

  • Before: Five regression tests fail without timeline memoization, stable toolbar dates, and hover isolation.
    After: All pass; 215 scoped unit tests pass across 33 files.
  • Before: The previously served HA bundle averaged 122 ms per step in a 20-step hover-update benchmark; settled idle produced six 80–95 ms long tasks in five seconds.
    After: The same benchmark averaged 16 ms per step. A final 40-step mouse sweep averaged 16.7 ms, handled all 40 hover events, and kept the toolbar marker synchronized. No long tasks were observed during the final five-second idle sample or sweep.
  • Timings include two animation-frame waits per step and are not CPU execution times. The supplied URL had truncated page state; the restored entities and date range were held constant for the before/after comparison. With formatter/scale caching already active, restoring full panel updates remained within the same frame interval, so no separate timing gain is claimed for hover isolation.

Testing

  • Scoped frontend unit tests: 215 passing
  • Relevant Storybook stories: 3 passing
  • Manually tested in Home Assistant using Chrome DevTools
  • New GIVEN/WHEN/THEN regression tests verified against unfixed code
  • pnpm build
  • pnpm sb:build
  • pnpm format
  • pnpm lint:types

Checklist

  • Commit messages follow Conventional Commits
  • Frontend bundle rebuilt and committed
  • Type checking passes
  • Formatter and ESLint auto-fixes pass

Merge Danger

Door: two-way

Revert the commits and rebuild the bundle to restore the previous behavior.

Blast Radius: frontend

History panel hover markers, comparison markers, and timeline labels. Cache invalidation includes bounds, scale configuration, width, zoom, locale, and translation identity. No backend or persisted-state migration.

Oliver Lillie and others added 2 commits October 12, 2026 16:04
Timeline label formatters called value.toLocaleString(options) /
toLocaleTimeString(options) on every call, each of which constructs a
fresh Intl.DateTimeFormat internally — one of the most expensive browser
ops. The timeline recomputes all tick labels on every render, which fires
on every pointer-move frame while hovering the chart, so this was a top
main-thread self-time hotspot.

Cache formatters by locale + options and reuse them via .format().
Measured hover frame cost: ~657ms -> ~553ms avg.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@buggedcom
buggedcom merged commit a21c627 into main Oct 12, 2026
14 of 15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant