feat: timeline minimap#712
Merged
lcottercertinia merged 29 commits intocertinia:mainfrom Jan 28, 2026
Merged
Conversation
- Added skyline area chart to show a overview of the timeline based on type that took most time
- Highlights what takes time in a slice to you can target problematic areas
- Split into 1px slice and the slice color is based on the frame type that took the most time.
- Viewport lens to show main timeline current viewport window on minimap
- Cursor / ruler vertical line on the main timeline that mirrors the cursor position from the minimap
fix: Enhance SelectionHighlightRenderer for better visibility
- Updated selection highlight rendering to account for vertical pan position and ensure markers remain visible.
fix: Update AxisRenderer for consistent label positioning
- Adjusted label positioning logic to remove minimap offset, ensuring correct placement in the main timeline.
With a 1 px slice of the minimap the color of deeper frame are prioritised e.g those with a visual edge After that we also apply category based weightings so that this like DML and SOQL stand out on methods calls. For example, Method - parent (100 ms), dml child (50ms). Imagine within the 1px slice 50 % of each frame is visible (1 on top of other). The dml would get a 5x weighting on top of methods meaning it would be treated as if it contributed 250ms. making that the dominant color of the bucket. This helps to highlight important sections that consume governors.
…g and measurement display
…ing and update tooltip styles
…d timeline interactions - Implement MeasurementOrchestrator to manage measurement and area zoom functionalities, including lifecycle management, resizing, and rendering. - Introduce MinimapOrchestrator to handle minimap interactions, state management, and rendering, including keyboard shortcuts and viewport synchronization. - Both orchestrators utilize callbacks for communication with the FlameChart and maintain a clear separation of concerns.
…election management
…ods and orchestrators
…te category resolution
…and improve layer management
…pre-allocated arrays
…for accurate resize handling
…endering - Added MinimapBarGeometry class to manage PixiJS geometry for vertical bar rendering in the minimap. - Introduced a grow-only buffer strategy and direct typed array access for performance improvements. - Updated MinimapDensityQuery to utilize skyline algorithm for category resolution and caching mechanisms. - Refactored MinimapRenderer to use mesh-based rendering for skyline visualization, improving performance significantly. - Removed legacy polygon rendering logic in favor of bar geometry for skyline representation.
…eatures and interactions
lcottercertinia
approved these changes
Jan 28, 2026
lcottercertinia
approved these changes
Jan 28, 2026
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
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
Adds a minimap overview panel to the timeline, providing bird's-eye
navigation for massive Apex debug logs. The minimap displays a
density-based skyline visualization with a 2D viewport lens, enabling
instant navigation across the entire log without losing context.
User-Facing Features
color-coded categories and opacity-based density visualization
main timeline (both time range and depth)
viewport to that position
selection
zoom range
zoom
timeline up/down
timeline
start/end, 0 resets (when hovering minimap)
viewport lens
Technical Details
and interaction handlers
Float32Arrays for density bar rendering
density computation instead of O(N) traversal
pre-allocated arrays for smooth rendering
machine for drag modes (create, move, resize)
management
matches
timeline via callbacks
redrawn on resize or data change
🧩 Type of change (check all applicable)
📷 Screenshots / gifs / video [optional]
Show off your UI changes.
🔗 Related Issues
fixes #
resolves #245
closes #
related #446
✅ Tests added?
📚 Docs updated?
Anything else we need to know? [optional]