⚡ Bolt: Prevent per-frame Map allocation in KnowledgeGraph - #205
servathadi wants to merge 1 commit into
Conversation
Caches the `nodeMap` in `KnowledgeGraph` to prevent per-frame `new Map()` memory allocation within the `requestAnimationFrame` loop, reducing garbage collection spikes and improving animation framerates. Co-authored-by: servathadi <116760885+servathadi@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
1 participant
💡 What:
Moved the instantiation of
nodeMap = new Map()out of therequestAnimationFramerendering loop inKnowledgeGraph.tsx. It is now computed once inside auseEffectwhenever the node list changes, and cached within auseRef(nodeMapRef). The render loop now just accesses the pre-computed cached map.🎯 Why:
In JavaScript/React, instantiating a new
Mapand populating it with hundreds of items during a per-framerequestAnimationFramehot loop triggers significant memory allocations (60+ times a second). This quickly fills the heap, forcing the garbage collector (GC) to run frequently, causing noticeable stuttering (GC pauses) during the canvas animation.📊 Impact:
Reduces per-frame object allocation to zero for this lookup structure. The
simulatefunction now runs with fewer garbage collection pauses, producing a significantly smoother animation at high frame rates, especially for users on low-power devices.🔬 Measurement:
Start the application and navigate to the
/exploreroute containing theKnowledgeGraphvisualization. Use Chrome DevTools Performance tab, record an interaction for 10 seconds, and observe the Memory heap graph. The "sawtooth" pattern of memory growth and GC drops will be noticeably reduced, and the Main thread will show fewer GC interruptions during rendering frames.PR created automatically by Jules for task 1882304459859448622 started by @servathadi