RFC: Canvas and SVG Renderer Implementation Plan #2299
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
Refactor point rendering to support WebGL context pooling, addressing the browser's ~16 context limit when documents have many graphs. Key changes: - Add PointRendererBase abstraction with PixiPointRenderer and NullPointRenderer implementations - Add WebGLContextManager singleton to manage context pool (max 14) - Add PointsState to preserve point data across renderer switches - Add usePointRenderer/usePointRendererArray hooks for React integration - Implement priority-based context allocation (point count + user clicks) - Show placeholder message when context unavailable; clicking prioritizes - Clean up unused PIXI imports throughout codebase Graphs without WebGL contexts now show a helpful message and can be prioritized by clicking/selecting them. When a graph becomes visible or is selected, it requests a context and may evict a lower-priority graph's context if the pool is full. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Document the WebGL context pooling system and point renderer abstraction, including motivation, architecture overview, key components, and usage examples. This provides context for engineers and LLMs working in this area. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive test coverage for the new point rendering architecture: - PointsState: state management and sync with case data - NullPointRenderer: no-op renderer behavior and base class template methods - WebGLContextManager: context pooling, priority, eviction, and yield/release - point-renderer-compat: type guards and compatibility utilities Also export WebGLContextManager class to enable test isolation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update MapPointLayer to use PixiPointRenderer instead of PixiPoints - Update usePixiPointsArray hook to use PointRendererBase types - Update Background, MapBackground, MapInterior to use PointRendererArray - Update Graph and GraphComponent to use PointRendererArray directly - Add x/y coordinates to IPointMetadata for marquee selection support - Update tests for new metadata structure This completes the migration of map components to the new renderer architecture, bringing maps in line with graphs. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove point-renderer-compat.ts and its tests - Rename PixiPointsCompatible -> PointRendererBase - Rename PixiPointsCompatibleArray -> PointRendererArray - Rename pixiPoints -> renderer throughout codebase - Rename pixiPointsArray -> rendererArray - Rename hook files: - use-pixi-points-array.ts -> use-renderer-array.ts - use-pixi-pointer-down.ts -> use-renderer-pointer-down.ts - use-pixi-pointer-down-deselect.ts -> use-renderer-pointer-down-deselect.ts - Rename hook functions: - usePixiPointsArray -> useRendererArray - usePixiPointerDown -> useRendererPointerDown - usePixiPointerDownDeselect -> useRendererPointerDownDeselect - Update point-rendering.md documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move event-to-renderer mapping from PixiPointRenderer to PointRendererBase - Rename getPixiPointRendererDispatcher to getRendererForEvent - Add registerDispatchedEvent() method for subclasses to use - Remove unused hasWebGLContext prop from Graph component - Update point-rendering.md documentation: - Fix usePointRendererArray description (maps, not graphs with multiple Y) - Clarify context recovery vs dynamic context limit in Future Considerations - Remove hasWebGLContext from examples Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove `any` types from DataTip, replacing with IPoint/IPointMetadata - Change hideDataTip to use PointerEvent for consistency with showDataTip - Rename event handlers from onPoint* to onPointer* (onPointerOver, onPointerLeave, onPointerClick, onPointerDragStart, onPointerDrag, onPointerDragEnd) since the pointer is moving, not the point - Move PointRendererArray type to point-renderer-base.ts to avoid circular dependency with inline import - Extract usePointRendererArray into its own file - Rename IPixiDragHandlers to IRendererDragHandlers and usePixiDragHandlers to useRendererDragHandlers - Remove CompatiblePointEventHandler type, use PointEventHandler instead - Fix types in plot components (scatter-plot, case-plot, dot-chart, dot-line-plot, binned-dot-plot, map-point-layer) - Fix case-plot drag to use renderer.setPointPosition() instead of direct property mutation - Remove outdated comments about old/new API compatibility - Update point-rendering.md documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… maps - Delete unused pixi-points.ts (legacy PixiPoints class) - Delete use-renderer-array.ts (replaced by context-based approach) - Remove unused getSpriteForPoint() and migration comments - Rename PixiBackgroundPassThroughEvent to BackgroundPassThroughEvent and move to point-renderer-types.ts for broader applicability - Add WebGL context management for map layers: - Add PointRendererArrayContext for sharing renderer settings - Add useLayerRenderer hook for child layers to get context-managed renderers - Update MapComponent/CodapMap/MapPointLayer to use new context system - Add setupResizeObserver to PointRendererBase for post-init configuration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add skipContextRegistration option to usePointRenderer to prevent unused primary renderer in usePointRendererArray from consuming context slots - Add effect in MapPointLayer to refresh points when renderer changes - Fix canvas replacement in MapPointLayer to clear old canvas before appending new one (old canvas was blocking new canvas from being added) - Update point-rendering.md documentation with new hooks and patterns Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update Cypress helpers and fix test timing issues discovered during CI testing of the point renderer refactoring. Cypress helper updates: - Update axis-helper, graph-canvas-helper, and map-canvas-helper to use new renderer API (rendererArrayMap, getPointsBounds, etc.) Test stability fixes: - Add waits after drag operations for graph/axis rendering to complete - Re-select tiles after drag operations to ensure inspector panel updates - Add existence checks before clicking inspector panel buttons - Wait for cell values to change after formula rerandomize operations - Split table.spec.ts into table.spec.ts and table-index.spec.ts for better parallelization Code fixes discovered during testing: - Fix D3 transition race condition in connecting lines by interrupting existing transitions before starting new ones - Fix stale closure issue in showConnectingLines by reading from store - Add console.log/warn/error capture in Cypress for debugging CI failures Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This plan outlines the approach for adding: - CanvasPointRenderer: Canvas 2D fallback when WebGL contexts exhausted - SVG export utility: Clean SVG generation for image export The plan is intended for team review and discussion before implementation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2299 +/- ##
===========================================
- Coverage 86.69% 69.39% -17.30%
===========================================
Files 724 733 +9
Lines 38770 39292 +522
Branches 9588 9688 +100
===========================================
- Hits 33610 27266 -6344
- Misses 5151 11288 +6137
- Partials 9 738 +729
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
codap-v3
|
||||||||||||||||||||||||||||
| Project |
codap-v3
|
| Branch Review |
CODAP-295-canvas-svg-renderer-plan
|
| Run status |
|
| Run duration | 03m 13s |
| Commit |
|
| Committer | Kirk Swenson |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
4
|
| View all changes introduced in this branch ↗︎ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
This PR adds an implementation plan for two new renderers to address WebGL context limitations and SVG export needs:
Purpose
This is a Request for Comments - the PR contains only the plan document (
v3/doc/point-rendering-plan.md) for team review before implementation begins.Key Design Decisions
Open Questions
Review Request
Please review the plan and leave comments on:
🤖 Generated with Claude Code