Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use modern native ES6 import to load plotly.js bundle instead of requirejs which is no longer under active development #4763

Merged
merged 10 commits into from
Oct 21, 2024
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).

- Fixed a bug in integer validation of arrays that threw an error when an array contained a mix of strings and integers.

- Fixed a bug in JupyterLab >= 4 and Jupyter Notebook >= 7 that caused latex to not render in plotly charts.

- Use modern [native ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to load plotly.js bundle instead of requirejs which is [no longer under active development](https://github.com/requirejs/r.js/compare/2.3.6...2.3.7)

## [5.23.0] - 2024-07-23

### Updated
Expand Down
12 changes: 0 additions & 12 deletions packages/python/plotly/plotly/basedatatypes.py
Original file line number Diff line number Diff line change
Expand Up @@ -3538,12 +3538,6 @@ def to_html(self, *args, **kwargs):
plotly.min.js bundle that is assumed to reside in the same
directory as the HTML file.

If 'require', Plotly.js is loaded using require.js. This option
assumes that require.js is globally available and that it has been
globally configured to know how to find Plotly.js as 'plotly'.
This option is not advised when full_html=True as it will result
in a non-functional html file.

If a string that ends in '.js', a script tag is included that
references the specified path. This approach can be used to point
the resulting HTML file to an alternative CDN or local bundle.
Expand Down Expand Up @@ -3647,12 +3641,6 @@ def write_html(self, *args, **kwargs):
directory because the plotly.js source code will be included only
once per output directory, rather than once per output file.

If 'require', Plotly.js is loaded using require.js. This option
assumes that require.js is globally available and that it has been
globally configured to know how to find Plotly.js as 'plotly'.
This option is not advised when full_html=True as it will result
in a non-functional html file.

If a string that ends in '.js', a script tag is included that
references the specified path. This approach can be used to point
the resulting HTML file to an alternative CDN or local bundle.
Expand Down
43 changes: 4 additions & 39 deletions packages/python/plotly/plotly/io/_base_renderers.py
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,6 @@ def __init__(
self,
connected=False,
full_html=False,
requirejs=True,
global_init=False,
config=None,
auto_play=False,
Expand All @@ -261,7 +260,6 @@ def __init__(
self.auto_play = auto_play
self.connected = connected
self.global_init = global_init
self.requirejs = requirejs
self.full_html = full_html
self.animation_opts = animation_opts
self.post_script = post_script
Expand All @@ -275,27 +273,13 @@ def activate(self):
)
)

if not self.requirejs:
raise ValueError("global_init is only supported with requirejs=True")

if self.connected:
# Connected so we configure requirejs with the plotly CDN
script = """\
<script type="text/javascript">
{win_config}
{mathjax_config}
if (typeof require !== 'undefined') {{
require.undef("plotly");
requirejs.config({{
paths: {{
'plotly': ['{plotly_cdn}']
}}
}});
require(['plotly'], function(Plotly) {{
window._Plotly = Plotly;
}});
}}
</script>
<script type="module">import \"{plotly_cdn}\"</script>
archmoj marked this conversation as resolved.
Show resolved Hide resolved
""".format(
win_config=_window_plotly_config,
mathjax_config=_mathjax_config,
Expand All @@ -309,16 +293,8 @@ def activate(self):
<script type="text/javascript">
{win_config}
{mathjax_config}
if (typeof require !== 'undefined') {{
require.undef("plotly");
define('plotly', function(require, exports, module) {{
{script}
}});
require(['plotly'], function(Plotly) {{
window._Plotly = Plotly;
}});
}}
</script>
<script type="module">{script}</script>
""".format(
script=get_plotlyjs(),
win_config=_window_plotly_config,
Expand All @@ -331,10 +307,7 @@ def to_mimebundle(self, fig_dict):

from plotly.io import to_html

if self.requirejs:
include_plotlyjs = "require"
include_mathjax = False
elif self.connected:
if self.connected:
include_plotlyjs = "cdn"
include_mathjax = "cdn"
else:
Expand Down Expand Up @@ -416,7 +389,6 @@ def __init__(
super(NotebookRenderer, self).__init__(
connected=connected,
full_html=False,
requirejs=True,
global_init=True,
config=config,
auto_play=auto_play,
Expand Down Expand Up @@ -444,7 +416,6 @@ def __init__(
super(KaggleRenderer, self).__init__(
connected=True,
full_html=False,
requirejs=True,
global_init=True,
config=config,
auto_play=auto_play,
Expand Down Expand Up @@ -472,7 +443,6 @@ def __init__(
super(AzureRenderer, self).__init__(
connected=True,
full_html=False,
requirejs=True,
global_init=True,
config=config,
auto_play=auto_play,
Expand All @@ -497,7 +467,6 @@ def __init__(
super(ColabRenderer, self).__init__(
connected=True,
full_html=True,
requirejs=False,
global_init=False,
config=config,
auto_play=auto_play,
Expand Down Expand Up @@ -832,7 +801,6 @@ def __init__(
super(SphinxGalleryHtmlRenderer, self).__init__(
connected=connected,
full_html=False,
requirejs=False,
global_init=False,
config=config,
auto_play=auto_play,
Expand All @@ -844,10 +812,7 @@ def to_mimebundle(self, fig_dict):

from plotly.io import to_html

if self.requirejs:
include_plotlyjs = "require"
include_mathjax = False
elif self.connected:
if self.connected:
include_plotlyjs = "cdn"
include_mathjax = "cdn"
else:
Expand Down
32 changes: 3 additions & 29 deletions packages/python/plotly/plotly/io/_html.py
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,6 @@ def to_html(
plotly.min.js bundle that is assumed to reside in the same
directory as the HTML file.

If 'require', Plotly.js is loaded using require.js. This option
assumes that require.js is globally available and that it has been
globally configured to know how to find Plotly.js as 'plotly'.
This option is not advised when full_html=True as it will result
in a non-functional html file.

If a string that ends in '.js', a script tag is included that
references the specified path. This approach can be used to point
the resulting HTML file to an alternative CDN or local bundle.
Expand Down Expand Up @@ -254,20 +248,10 @@ def to_html(
if isinstance(include_plotlyjs, str):
include_plotlyjs = include_plotlyjs.lower()

# Start/end of requirejs block (if any)
require_start = ""
require_end = ""

# Init and load
load_plotlyjs = ""

# Init plotlyjs. This block needs to run before plotly.js is loaded in
# order for MathJax configuration to work properly
if include_plotlyjs == "require":
require_start = 'require(["plotly"], function(Plotly) {'
require_end = "});"

elif include_plotlyjs == "cdn":
if include_plotlyjs == "cdn":
load_plotlyjs = """\
{win_config}
<script charset="utf-8" src="{cdn_url}"></script>\
Expand Down Expand Up @@ -343,10 +327,8 @@ def to_html(
<div id="{id}" class="plotly-graph-div" \
style="height:{height}; width:{width};"></div>\
<script type="text/javascript">\
{require_start}\
window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
{script};\
{require_end}\
window.PLOTLYENV=window.PLOTLYENV || {{}};{base_url_line}\
{script};\
</script>\
</div>""".format(
mathjax_script=mathjax_script,
Expand All @@ -355,9 +337,7 @@ def to_html(
width=div_width,
height=div_height,
base_url_line=base_url_line,
require_start=require_start,
script=script,
require_end=require_end,
).strip()

if full_html:
Expand Down Expand Up @@ -433,12 +413,6 @@ def write_html(
directory because the plotly.js source code will be included only
once per output directory, rather than once per output file.

If 'require', Plotly.js is loaded using require.js. This option
assumes that require.js is globally available and that it has been
globally configured to know how to find Plotly.js as 'plotly'.
This option is not advised when full_html=True as it will result
in a non-functional html file.

If a string that ends in '.js', a script tag is included that
references the specified path. This approach can be used to point
the resulting HTML file to an alternative CDN or local bundle.
Expand Down
17 changes: 3 additions & 14 deletions packages/python/plotly/plotly/tests/test_io/test_renderers.py
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,6 @@ def assert_offline(html):
assert get_plotlyjs() in html


def assert_requirejs(html):
assert 'require(["plotly"]' in html


def assert_not_requirejs(html):
assert 'require(["plotly"]' not in html


def test_colab_renderer_show(fig1):
pio.renderers.default = "colab"

Expand All @@ -170,7 +162,6 @@ def test_colab_renderer_show(fig1):
html = mock_arg1["text/html"]
assert_full_html(html)
assert_html_renderer_connected(html)
assert_not_requirejs(html)

# check kwargs
mock_kwargs = mock_call_args[1]
Expand Down Expand Up @@ -213,7 +204,6 @@ def test_notebook_connected_show(fig1, name, connected):
# Check html display contents
bundle_html = mock_arg1["text/html"]
assert_not_full_html(bundle_html)
assert_requirejs(bundle_html)

# check kwargs
mock_kwargs = mock_call_args[1]
Expand Down Expand Up @@ -275,7 +265,6 @@ def open_url(url, new=0, autoraise=True):
html = response.content.decode("utf8")
assert_full_html(html)
assert_offline(html)
assert_not_requirejs(html)


# Validation
Expand Down Expand Up @@ -317,12 +306,12 @@ def test_repr_html(renderer):
+ '"></script> '
'<div id="cd462b94-79ce-42a2-887f-2650a761a144" class="plotly-graph-div" '
'style="height:100%; width:100%;"></div> <script type="text/javascript">'
" window.PLOTLYENV=window.PLOTLYENV || {};"
' if (document.getElementById("cd462b94-79ce-42a2-887f-2650a761a144"))'
" window.PLOTLYENV=window.PLOTLYENV || {};"
' if (document.getElementById("cd462b94-79ce-42a2-887f-2650a761a144"))'
' { Plotly.newPlot( "cd462b94-79ce-42a2-887f-2650a761a144",'
' [], {"template":{}},'
' {"responsive": true} ) };'
" </script> </div>"
" </script> </div>"
)
if "text/html" in bundle:
str_bundle = bundle["text/html"]
Expand Down