Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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" + '
Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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('^' + ".*" + ' Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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('^' + ".*" + ' Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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" + ' Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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('^' + ".*" + ' Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, '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); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Support for index page templating by HammadTheOne · Pull Request #168 · plotly/dashR · GitHub
Skip to content

Support for index page templating - #168

Merged
rpkyle merged 35 commits into
devfrom
42-index-page-templating
Feb 11, 2020
Merged

Support for index page templating#168
rpkyle merged 35 commits into
devfrom
42-index-page-templating

Conversation

@HammadTheOne

@HammadTheOneHammadTheOne commented Jan 14, 2020

Copy link
Copy Markdown
Contributor

This PR adds in custom index functionality by adding in a method to the Dash class which takes in an HTML index string with some necessary defaults, and whatever custom additions or changes a user wants to make, and then renders it above or below the app based on where the code is added. Custom meta_tags, title, and scripts like the Google Tag Manager analytics can be added to the index body and loaded with the script tag.

This functionality brings Dash for R to parity with the major feature set of Dash for Python.

An example of a custom string is below:

string <-
"<!DOCTYPE html>
<html>
<head>
{meta_tags}
<title>{private$name}</title>
{favicon}
{css_tags}
<script type ='text/javascript' src='googleanalytics.js'></script>
</head>
<body>
<p>'This is a custom string!'</p>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'
height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id='react-entry-point'>
<div class='_dash-loading'>Loading...</div>
</div>
<footer>
<script id='_dash-config' type='application/json'> {to_JSON(self$config)} </script>
{scripts_tags}
</footer>
</body>
</html>"

Closes#42

rpkyleand others added 7 commits January 4, 2020 12:33
* Provide support for no_update in Dash for R (#111)
* Use dev_tools_prune_errors instead of pruned_errors (#113)
* Better handling for user-defined error conditions in debug mode (#116)
* Provide support for multiple outputs (#119)
* Provide support for hot reloading in Dash for R (#127)
* Implement support for clientside callbacks in Dash for R (#130)
* Add line number context to stack traces when srcrefs are available (#133)
* Update dash-renderer to 1.2.2 and fix dev tools UI display of stack traces (#137)
* Support for meta tags in Dash for R (#142)
* Fixes for hot reloading interval handling and refreshing apps within viewer pane (#148)
* Support for asynchronous loading/compression in Dash for R (#157)
* Support returning asset URLs via public method within Dash class (#160)
* Minor fix for get_asset_url + docs, add url_base_pathname (#161)
@rpkyle
rpkyle self-requested a review January 14, 2020 19:31
@rpkylerpkyle changed the title 42 index page templatingSupport for index page templatingJan 14, 2020

@rpkylerpkyle left a comment

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.

@HammadTheOne This is well on the way to the final solution, but I think we want to resolve a few things first, namely:

  • adding support for interpolation keys, as outlined in plotly/dash#286
  • providing similar context in the R online help for the index_string method as we provide in Python
  • using the same interface (in terms of argument names/syntax) for index_string as in Python
  • throwing a similar error message in R as we do in Python, so the user can see right away all the keys which are undefined
  • removing the name argument and adding a helpful warning when it is used, for parity with Dash for Python, since title is now available through index customization
  • 🚨 implementing integration tests for the new feature (can borrow heavily from the existing tests on the Python side (e.g. check out the use of index_string in https://github.com/plotly/dash/blob/dev/tests/integration/test_integration.py) to ensure that the index template is properly applied when serving the index

Comment thread.circleci/config.yml
Comment thread.github/CODEOWNERS
Comment threadDESCRIPTION Outdated
Comment threadDESCRIPTION
Comment threadDESCRIPTION
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
if (!is.null(private$custom_index)) {
interpolated_index <- glue::glue(private$custom_index)

private$.index <- interpolated_index

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.

One thing I don't think I see here that we likely want to implement are the interpolation keys -- see the comments in this merged PR for more info:

plotly/dash#286

Let me know if I can help with anything here, but the general goal is to make the implementation as similar as we can to what currently exists on the Python side (within reason!).

@HammadTheOneHammadTheOneJan 19, 2020

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.

Implemented in 036e4e5. It's not as clean as I'd want it to be, but I'd be interested to hear your thoughts on it.

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.

I've tried to make the implementation a little more concise while aiming for 🌴 code, in 5ae7549 and 39d52e0.

@rpkylerpkyle left a comment

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.

💃 Pending minor comments, and the addition of tests. I can try to help a bit with the latter today, unless you're ready to tackle those. Nice work on tackling this feature, once this is merged, Dash for R will be just about at parity with all major functionality in Dash for Python! 🏆

Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated
Comment threadR/dash.R Outdated

requiredKeys <- c("app_entry", "config", "scripts")

checks <- sapply(requiredKeys, function(x) grepl(x, names(kwargs)))

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.

Nice, this is creative -- I wouldn't have thought of doing it this way.

I wonder if this might be a little more succinct, though; you try something like

 stop(sprintf("Did you forget to include %s in your index string?", paste(setdiff(required_keys, names(kwargs)), collapse = ", ")))

For generating the vector of booleans (logicals), I'd suggest using vapply instead of sapply; I try to avoid the latter when writing package code since it is not type-safe.

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.

I think I found a way to make this a little more concise in 5ae7549.

Comment threadDESCRIPTION Outdated
@rpkyle
rpkyle merged commit 3733ead into devFeb 11, 2020
@rpkyle
rpkyle deleted the 42-index-page-templating branch February 11, 2020 22:27
This was referenced Feb 12, 2020
rpkyle added a commit that referenced this pull request Feb 13, 2020
* Autoset routes and requests pathname prefixes (#165)
* Inspect environment variables for host & port (#167)
* Support for index page templating (#168)
* Add support for config-aware relative paths (#172)
* Add unit tests for index customization (#176)
* Send status code of 1 when unit tests fail (#177)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@HammadTheOne@Marc-Andre-Rivet@rpkyle