fix: debounce toolbar hover events to stop flickering (#1330)#1338
Conversation
The toolbar expand/collapse is driven by ipyevents mouseenter/mouseleave events that swap the widget's children. In webview-based frontends such as VS Code Jupyter, swapping the children re-renders the widget, which in turn fires another mouseenter/mouseleave, creating a feedback loop that makes the toolbar flicker rapidly and require multiple clicks to open. Add `throttle_or_debounce="debounce"` with a 250 ms `wait` to every toolbar hover Event so the child swap only happens after the mouse events settle, breaking the re-render -> event feedback loop while leaving click-to-toggle unaffected. Fixes #1330
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough
ChangesToolbar hover debounce
Estimated code review effort: 2 (Simple) | ~10 minutes Related Issues: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Tick the box to add this pull request to the merge queue (same as
|
There was a problem hiding this comment.
Pull request overview
This PR addresses toolbar flickering in webview-based Jupyter frontends (e.g., VS Code Jupyter) by debouncing ipyevents hover handlers so rapid mouseenter/mouseleave storms don’t trigger repeated widget re-renders and feedback loops.
Changes:
- Adds
throttle_or_debounce="debounce"andwait=250to all toolbar hoveripyevents.Eventregistrations inleafmap/toolbar.py. - Standardizes hover handling behavior across the various toolbar/widget builders that use the same expand/collapse-on-hover pattern.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@leafmap/toolbar.py`:
- Around line 550-555: The hover debounce setup for toolbar widgets is
duplicated in multiple toolbar-building functions, making `ipyevents.Event`
configuration hard to maintain. Create a shared helper such as
`_hover_toolbar_event(widget, wait=250)` that returns the debounced
mouseenter/mouseleave event, then replace each inline `ipyevents.Event(...)`
block in the toolbar constructors with that helper so the shared config lives in
one place.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 679aa78f-61cf-4027-920b-a9a52f08d4da
📒 Files selected for processing (1)
leafmap/toolbar.py
- Pin ipyevents>=0.8.0 in requirements.txt. The debounce kwargs (wait / throttle_or_debounce) have been supported since ipyevents 0.8.0, so pinning the minimum guarantees pip upgrades an older install and the new kwargs cannot raise a TypeError at runtime (Copilot). - Centralize the debounced hover-event configuration in a single _toolbar_hover_event() factory plus TOOLBAR_HOVER_DEBOUNCE_MS / TOOLBAR_HOVER_MODE constants, and use it across all 18 toolbar hover handlers instead of duplicating the wait=250 / "debounce" literals (Copilot).
|
🚀 Deployed on https://6a497276135c7ae3bc86b073--opengeos.netlify.app |
Summary
Fixes #1330.
The toolbar (wrench icon) expands/collapses on hover via
ipyeventsmouseenter/mouseleaveevents that swap the widget's children. In webview-based frontends such as VS Code Jupyter, swapping the children re-renders the widget, which itself fires anothermouseenter/mouseleave. That creates a feedback loop: expand → re-render → leave → collapse → re-render → enter → expand … so the toolbar flickers rapidly and needs multiple clicks to open.Fix
Add
throttle_or_debounce="debounce"with a 250 mswaitto every toolbar hoveripyevents.Event(18 handlers acrosstoolbar.py, all sharing the same pattern). Debouncing coalesces the rapid enter/leave storm into a single settled event, so the child swap only happens after the mouse stops moving — breaking the re-render → event feedback loop.ToggleButtonobserver, not debounced).Testing
python -m py_compile leafmap/toolbar.py— OK.leafmap.Map()builds with the toolbar;throttle_or_debounce/waitkwargs validated against ipyevents 2.0.4.The flicker is specific to webview frontends (VS Code) and is not reproducible in a headless browser, so this relies on the mechanism above rather than an automated end-to-end check. Reporter (@meetk3011) can confirm in VS Code.
Summary by CodeRabbit