Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', '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('^' + ".*" + ' Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, '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" + ' Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, '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('^' + ".*" + ' Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp
, '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); } })(); })(); Configure document-title during updates by stlehmann · Pull Request #1315 · plotly/dash · GitHub
Skip to content

Configure document-title during updates - #1315

Merged
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title
Jul 9, 2020
Merged

Configure document-title during updates#1315
alexcjohnson merged 17 commits into
plotly:devfrom
stlehmann:update-title

Conversation

@stlehmann

Copy link
Copy Markdown
Contributor

This PR addresses #856 and #732. It adds an update_title parameter to Dash.__init__()which can be set to a String or None. If this parameter is set to a String this will be the document title that is shown if Dash is updating. If update_title is set to None or "" the document title will not change at all. This is especially useful for applications with short update intervals to prevent flickering of the document title.

I have not yet added any tests because I didn't know where to put them. If you should request some tests I am more than willing to provide some :)

Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
Comment threadCHANGELOG.md
@alexcjohnson

Copy link
Copy Markdown
Collaborator

@stlehmann thanks, this looks great! Re tests: How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson

How about in test_loading_states.py? The same pattern we used there should work for this purpose, with Lock to pause the callback until you've seen what you want in the browser.

Thanks for the hint. I'll get into it.

Comment threadCHANGELOG.md Outdated
Comment threaddash-renderer/src/components/core/DocumentTitle.react.js Outdated
stlehmannand others added 2 commits June 29, 2020 20:19
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
Co-authored-by: alexcjohnson <johnson.alex.c@gmail.com>
@stlehmann

stlehmann commented Jun 30, 2020

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson I added tests to test_loading_states.py. I tested for update_title being set to default, None, empty and a custom string. Hopefully the test implementation is acceptable. Otherwise just let me know :)

Comment threadtests/integration/renderer/test_loading_states.py Outdated
with lock:
dash_duo.start_server(app)
dash_duo.find_element("#button").click()
assert dash_duo.driver.title == "Updating..."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Very nice tests! One thing though: your callback will execute on page load, right? So holding the lock while starting the server means we're testing the title during the initialization sequence. That's a good thing to test, but I think in at least one of these tests (and maybe all of them) we should test:

  • during startup, we see the correct updating title
  • when the callback is done we see the regular title
  • when the callback is triggered interactively we see the updating title again

Also rather than a simple assert, for robustness I think it'd be better to do a wait.until, in case things don't happen quite in the expected order:

fromdash.testing.waitimportuntiluntil(lambda: dash_duo.driver.title=="Updating...", timeout=1)

And one last thing, if you're feeling adventurous: These test cases are nearly identical so they could be parametrized, something like:

importpytest@pytest.mark.parametrize("kwargs,page_updating_title", [ ({}, "Updating..."), ({"updating_title": None}, "Dash"), ({"updating_title": ""}, "Dash"), ({"updating_title": "Hello World"}, "Hello World") ])deftest_rdls003_update_title_default(dash_duo, updating_title, page_updating_title)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I tried to implement your suggestions. I omitted an explicit test for the correct update title on startup because the callback should be called on startup afaik. I hope this is OK. The parametrize decorator is a great thing. Didn't know that until now, thanks :) Hope I did it all right with the locks. I'm not that sure about it.

def update(n):
with lock:
# check for update-title while processing callback
until(lambda: dash_duo.driver.title == expected_update_title, timeout=1)

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Interesting... this appears to work but I'm kind of surprised it does - it might actually be waiting for the timeout period and then throwing an error silently. That's because the server and the browser side are running in different processes (hence the need for Lock).

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

@alexcjohnson

I'd remove the title check inside the callback, and just put it at the very end of the test, after #button.click() (but still inside the with lock: block)

This was my first shot but that didn't work at that time because I missed the lock inside the callback. Now this works like a charm. I also added the check on startup again.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Beautiful! Thanks for the test updtes. I'm not sure what happened with the Percy run but that's not on your side, just something flaky - I'll sort it out. 💃

@stlehmann

Copy link
Copy Markdown
ContributorAuthor

You are very welcome. Thanks again for the review and the great mentoring. 🙇

@alexcjohnson
alexcjohnson merged commit 7672f73 into plotly:devJul 9, 2020

UNSAFE_componentWillReceiveProps(props) {
if (props.isLoading) {
document.title = 'Updating...';

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

@Marc-Andre-Rivet as we were discussing the other day - the renderer no longer holds this default value at all. That means when the R and Julia implementations update to include this functionality in their renderer, they will need to add this option to the back end at the same time or the default behavior will change to no title changes ever.

@chriddyp

Copy link
Copy Markdown
Member

Update to those passing through GitHub: This feature is now documented in http://dash.plotly.com/external-resources. Look for the title= and update_title=. See the "Customizing Dash's Document or Browser Tab Title", " Update the Document Title Dynamically based off of the URL or Tab", and "Customizing or Removing Dash's "Updating..." Message" sections.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@stlehmann@alexcjohnson@chriddyp