') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Add a rate limiter on the slicer's index by almarklein · Pull Request #24 · plotly/dash-slicer · GitHub
Skip to content

Add a rate limiter on the slicer's index - #24

Merged
almarklein merged 11 commits into
mainfrom
ratelimit
Dec 2, 2020
Merged

Add a rate limiter on the slicer's index#24
almarklein merged 11 commits into
mainfrom
ratelimit

Conversation

@almarklein

@almarkleinalmarklein commented Nov 25, 2020•
edited
Loading

Copy link
Copy Markdown
Collaborator

Following up on #23, this PR improves the user experience by trying to keep the effect of a fast-changing index local to the current slicer. While dragging the slider, the current slicer is updated, but the other slicers (for the same scene_id) are not notified, nor will there be a request for new data to the server. When you stop dragging, the final value is "published", so the indicators update and the server provides the full-res data. This means all CPU cycles can be used to keep the current slicer responsive.

This is implemented using an Interval object that is turned on when the slider value is changed, and turned off when the value is published. The interval can be set to just 100ms so there is no perceived waiting time. Note that the behavior is pretty similar to the proposed approach in plotly/dash-core-components#884.

In this PR:

  • The slider.value is rate-limited (with a dcc.Interval) into a store called "index".
  • Renamed some of the private stores, reordered them, and add more documentation for them.
  • Add note in docs about performance of reverse_y=False, and don't use it in our examples (for now).
  • Turn of the part of debugging mode that mad things slow :)
  • More tweaks
  • Remove caching, made Caching of full-res slices clientside #27 to track for future

@almarklein
almarklein marked this pull request as draft November 25, 2020 12:45
@emmanuelle

emmanuelle commented Nov 25, 2020

Copy link
Copy Markdown
Contributor

It looks like there is a problem with the CI.

@almarklein
almarklein marked this pull request as ready for review November 25, 2020 19:28
@almarkleinalmarklein mentioned this pull request Nov 27, 2020
Open
@almarklein

almarklein commented Nov 27, 2020

Copy link
Copy Markdown
CollaboratorAuthor

Ready for review!

@almarkleinalmarklein mentioned this pull request Nov 30, 2020
Merged
14 tasks
emmanuelle
emmanuelle reviewed Dec 1, 2020
View reviewed changes
Comment threaddash_slicer/slicer.py Outdated
@almarklein@emmanuelle
Update dash_slicer/slicer.py
1082986
Co-authored-by: Emmanuelle Gouillart <emma@plot.ly>
This was referenced Dec 1, 2020
Closed
Closed
emmanuelle
emmanuelle reviewed Dec 1, 2020
View reviewed changes
Comment threaddash_slicer/slicer.py
def _create_client_callbacks(self):
"""Create the callbacks that run client-side."""

# setpos (external)

@emmanuelleemmanuelleDec 1, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is some serious Ascii art :-)

@almarkleinalmarkleinDec 1, 2020

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm eager for better ways to use diagrams to document code. In the mean time, ASCII art it is :)

@emmanuelleemmanuelleDec 1, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

http://blockdiag.com/en/ maybe... (usable as a sphinx extension from a "sphinx documentation diagram" Google search :-), did not investigate more).

@emmanuelle

emmanuelle commented Dec 1, 2020

Copy link
Copy Markdown
Contributor

This looks great, feel free to merge when you want (I read the code quicky but I can read it in more details when it's merged as well, and I agree that this rate limitation mechanism is a good thing for performance).

@almarklein
almarklein merged commit 893d0e2 into mainDec 2, 2020
@almarklein
almarklein deleted the ratelimit branch December 2, 2020 10:04
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@emmanuelleemmanuelleemmanuelle left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@almarklein@emmanuelle