Excalidraw throttling of events #7641
Conversation
WalkthroughThe pull request updates the package version in Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Collab
participant Portal
User->>Collab: Call syncScene(elements, files)
Collab->>Collab: Invoke throttledSyncScene(elements, files) [delay: SCENE_SYNC_TIMEOUT]
Collab->>Portal: Check sceneInitilized and broadcast scene updates
Possibly Related PRs
Suggested Reviewers
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
… excalidraw-perf
… excalidraw-perf
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/domain/common/whiteboard/excalidraw/collab/Collab.ts (1)
133-133: Fix typo in property name.The property name has a typo:
sceneInitilizedshould besceneInitialized.- this.portal.sceneInitilized = false; + this.portal.sceneInitialized = false;Also applies to: 187-187, 200-200
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
package.json(1 hunks)src/domain/common/whiteboard/excalidraw/collab/Collab.ts(6 hunks)src/domain/common/whiteboard/excalidraw/collab/Portal.ts(2 hunks)src/domain/common/whiteboard/excalidraw/collab/excalidrawAppConstants.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🧰 Additional context used
📓 Path-based instructions (1)
`src/**/*.{ts,tsx,js}`: Review the React.js/TypeScript/JavaS...
src/**/*.{ts,tsx,js}: Review the React.js/TypeScript/JavaScript code for best practices and potential bugs.
Ensure that the code adheres to TypeScript's typing system and modern standards.
Use the following code guide documentation in the codebase: 'docs/code-guidelines.md'.
Ensure sufficient error handling and logging is present, but note:
- We have a global error handler in place. So local
try/catchblocks are not required unless they provide value beyond what the global error handler already covers.- Avoid flagging the absence of local error handling in cases where the global error handler suffices.
- Avoid flagging the absence of logging in cases where the global logger is already in place (graphql usage).
Inform about the recommendation of not using non-null assertion,
except on GraphQL queries where the variable is asserted non-null and followed by a
skip:with the same variable.
Examples:
- Not Required: there's a skip
{
variables: { templateId: templateId! },
skip: !templateId,
}Check for common security vulnerabilities such as:
- SQL Injection
- XSS (Cross-Site Scripting)
- CSRF (Cross-Site Request Forgery)
- Insecure dependencies
- Sensitive data exposure
src/domain/common/whiteboard/excalidraw/collab/Portal.tssrc/domain/common/whiteboard/excalidraw/collab/excalidrawAppConstants.tssrc/domain/common/whiteboard/excalidraw/collab/Collab.ts
🔇 Additional comments (4)
src/domain/common/whiteboard/excalidraw/collab/excalidrawAppConstants.ts (1)
44-47: LGTM! Performance optimization through throttling.The timing adjustments effectively reduce event frequency:
- Mouse location updates throttled to 10fps (100ms) from ~30fps
- Full scene sync interval doubled to 10 seconds
- Scene updates throttled to 10ms intervals
src/domain/common/whiteboard/excalidraw/collab/Portal.ts (1)
46-46: LGTM! Improved semantic naming.Renaming
socketInitializedtosceneInitilizedbetter reflects that we're waiting for scene initialization, not just socket connection.src/domain/common/whiteboard/excalidraw/collab/Collab.ts (2)
426-442: LGTM! Well-implemented throttling mechanism.The throttling implementation effectively reduces scene update frequency while maintaining data consistency through version tracking.
218-228: LGTM! Optimized event handling.Good optimization to prevent mouse location handling until scene initialization is complete, which can improve loading times.
|
merged as part of release 10 |
The emission of the following events is throttled, meaning the client sends fewer events, thus less data
mouse location events throttled to 10 times per second (30 previously)
element mutation events throttled to 100 times per second (200 previously)
client will not handle mouse location events until the scene is fully initialized
todo
Summary by CodeRabbit
Chores
Refactor