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.

Sign up for GitHub

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

Jump to bottom

require.js is loaded after plotly needs it #141

Closed
leogout opened this issue May 16, 2019 · 4 comments · Fixed by #275
Closed

require.js is loaded after plotly needs it #141

leogout opened this issue May 16, 2019 · 4 comments · Fixed by #275

Comments

@leogout
Copy link
Contributor

leogout commented May 16, 2019

I tried to use plotly in a notebook with the following code (from plotly's doc):

import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
import numpy as np

init_notebook_mode()

N = 500
random_x = np.linspace(0, 1, N)
random_y = np.random.randn(N)

trace = go.Scatter(
    x = random_x,
    y = random_y
)

iplot([trace], filename='basic-line')

It runs well in my local jupyterlab instance:
image

But when I try to launch it with voila it gives me a blank output cell with the error:
image

When I inspected the template I found that plotly tries to use require.js before it gets imported (in the base template it is at the bottom of the file)

How can I get my graph to work with voila ?
@leogout
Copy link
Contributor Author

leogout commented May 16, 2019

I just tried to put require.js in the head of the template (not ideal I know) but it works and my plot renders. I'll use a custom template for now but I would love to hear your thoughts about this.

@leogout
Copy link
Contributor Author

leogout commented May 16, 2019 •
edited
Loading

If someone else stumble upon this issue, what I did to fix it is:
Duplicate the folder venv\share\jupyter\voila\template\default and rename it plotly (for example).
Edit the plotly\nbconvert_templates\base.tpl file that you just copied accordingly to your needs. Personnaly, I needed to load require.js at the top of the template.
Then, run your notebook with: voila your_notebook.ipynb --template=plotly

@scottlittle
Copy link

scottlittle commented May 26, 2019 •
edited
Loading

@leogout Thanks for sharing this. What was the explicit code that you used for loading require.js in your base.tpl file?

@leogout
Copy link
Contributor Author

leogout commented May 27, 2019 •
edited
Loading

In the template I overrided, I used this code (click me): 

{%- extends 'basic.tpl' -%}
{% from 'mathjax.tpl' import mathjax %}

{%- block header -%}
<!DOCTYPE html>
<html>
<head>
{%- block html_head -%}
<meta charset="utf-8" />
{% set nb_title = nb.metadata.get('title', '') or resources['metadata']['name'] %}
<title>Voila: {{nb_title}}</title>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/font-awesome.min.css" type="text/css" />

{%- block html_head_js -%}

<script src="{{resources.base_url}}voila/static/jquery.min.js"></script>

<script
    src="{{resources.base_url}}voila/static/require.min.js"
    integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA="
    crossorigin="anonymous">
</script>

<script id="jupyter-config-data" type="application/json">
{
    "baseUrl": "{{resources.base_url}}",
    "kernelId": "{{resources.kernel_id}}"
}
</script>
{%- endblock html_head_js -%}


{%- block html_head_css -%}
{%- endblock html_head_css -%}
{%- endblock html_head -%}
</head>
{%- endblock header -%}


{% block footer %}
{% block footer_js %}
<script>
requirejs.config({ baseUrl: '{{resources.base_url}}voila/', waitSeconds: 30})
requirejs(
    [
        "static/main",
    {% for ext in resources.nbextensions -%}
        "{{resources.base_url}}voila/nbextensions/{{ ext }}.js",
    {% endfor %}
    ]
)
</script>

{% endblock footer_js %}
{{ super() }}
</html>
{% endblock footer %}

alexisduque added a commit to alexisduque/voila that referenced this issue Jul 1, 2019
@alexisduque
requirejs should be loaded in the header
539fed1 
this fix voila-dashboards#141
@alexisduque alexisduque mentioned this issue Jul 1, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

requirejs should be loaded in the header with plotly alexisduque/voila
2 participants
@scottlittle @leogout