feat: optimised timeline - sub pixel / LOD rendering #707
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Antyhing smaller than 2px will be added to a bucket instead of drawn as a rectangle. This is to show small frame in a performant way. Giving detail to the timeline areas with version small frames next to each other. Normally we just wouldn't render them.
…tch color caching
…and bucket aggregation - Added TemporalSegmentTree class to manage event data efficiently, replacing O(n) iteration with O(log n) queries. - Introduced pre-computed aggregates for faster rendering and memory efficiency. - Updated TimelineMarkerRenderer to use pre-blended opaque marker colors for improved performance. - Enhanced RectangleManager tests to validate new bucket aggregation logic and color blending. - Created comprehensive tests for TemporalSegmentTree to ensure correct functionality across various scenarios. - Updated flamechart types to accommodate new segment tree structures and constants.
- Updated EventBatchRenderer and SearchStyleRenderer to create and render buckets grouped by color for improved performance. - Modified BucketColorResolver to export category colors and unknown category color for centralized access. - Enhanced LegacyViewportCuller to aggregate PixelBuckets by category. - Adjusted TemporalSegmentTree to utilize pre-initialized maps for category colors and buckets. - Updated tests to reflect changes in bucket structure, ensuring compatibility with new Map-based bucket handling. - Improved documentation and comments for clarity on rendering processes and performance optimizations.
… color handling in LegacyViewportCuller and TemporalSegmentTree
…tangles - Added MeshMarkerRenderer for efficient rendering of timeline markers using PixiJS Mesh, including viewport culling and severity-based stacking. - Introduced MeshRectangleRenderer for rendering timeline events with original colors, leveraging pre-computed rectangles and buckets. - Created MeshSearchStyleRenderer to render rectangles with search-aware styling, desaturating non-matched events while retaining original colors for matched events. - Developed RectangleGeometry for managing PixiJS Geometry with efficient buffer updates for rectangle rendering. - Implemented a custom rectangle shader supporting both WebGL and WebGPU for maximum compatibility and performance.
Sometimes the truncation tooltip would not be shown especially when panned in y direction.
…ents - Refactored AxisRenderer, EventBatchRenderer, SearchStyleRenderer, TimelineMarkerRenderer, and FlameChart to utilize SpritePool for efficient sprite management. - Enhanced performance by reducing garbage collection overhead and leveraging GPU batching with a shared 1x1 white texture. - Updated rendering logic to use sprites instead of graphics objects, improving rendering speed and reducing draw calls. - Added renderer type option in TimelineOptions to switch between 'sprite' and 'mesh' rendering approaches for flexibility in performance testing.
…implement cssColorToPixi function for color parsing
lcottercertinia
approved these changes
Jan 14, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📝 PR Overview
Improves level of detail on the timeline and show granular event we normally did not show for performance reasons.
This give the user more context and help to visually show where the most chatty areas are.
Uses a bucketing system to aggregate multiple frame into buckets 2px wide.
To create the bar code effect we draw the first pixel and leave the second blank.
The bucket colors are determine by a prioirity followed by frame count as a tie breaker.
The priority is 'DML', 'SOQL', 'Method', 'Code Unit', 'System Method', 'Flow', 'Workflow' e.g if a bucket contains a dml the bucket will be dml colored.
🧩 Type of change (check all applicable)
📷 Screenshots / gifs / video [optional]
Show off your UI changes.
Before
After
🔗 Related Issues
fixes #
resolves #
closes #
related #564
✅ Tests added?
📚 Docs updated?
Anything else we need to know? [optional]