Repository: bokeh/bokeh

Issue:
NBViewer rendering broken
Plots generated in an IPython Notebook with Bokeh-0.4.4 do not render on NBViewer, whereas 0.4.2p1 works fine. This is a little strange, as (ostensibly) NBViewer should render a notebook exactly as it would appear live. An issue (https://github.com/ipython/nbviewer/issues/253) has been filed with nbviewer, although I expect this will probably have to be addressed on the Bokeh side.

[0.4.2 works](http://nbviewer.ipython.org/github/kdodia/global_temperature/blob/042/Temperature_Plot.ipynb)

[0.4.4 is broken](http://nbviewer.ipython.org/github/kdodia/global_temperature/blob/044_broken/Temperature_Plot.ipynb)



Discussion:
Copied from the nbviewer issue referenced above:

> Peeking into the console reveals this error: 
> ![error](https://cloud.githubusercontent.com/assets/4944634/2726488/e958a3c2-c5bb-11e3-9c4d-eac8865fe356.png)
> 
> A quick google search on that suggests [this](http://stackoverflow.com/questions/10291693/cannot-read-property-getcontext-of-null-using-canvas) as the issue, namely that the script is attempting to reference a canvas element before it is loaded into the DOM.

Steps to reproduce:

Fork https://github.com/kdodia/bokeh-issue-559 and clone into [localdir]
`conda update conda` (this is just what we do now, right?)

```
cd [localdir]
git checkout 042
conda install bokeh=0.4.2
ipython notebook --no-mathjax test.ipynb
```

Run all cells, confirm the `bokeh_version` is `0.4.2p1`, save.

```
git add test.ipynb; git commit -m"042 run"; git push
git checkout 044
conda install bokeh=0.4.4
ipython notebook --no-mathjax test.ipynb
```

Run all cells, confirm the `bokeh_version` is `0.4.4`, save.

```
git add test.ipynb; git commit -m"044 run"; git push
```

Then pull up the notebooks in [nbviewer](http://nbviewer.ipython.org/) from each branch.

I can confirm this issue, I will try to investigate into the problem... so assigning to myself.

git bisect gives me this commit as the first failing...

```
(bokeh-dev)damian@damian-S400CA:/media/datos/Desarrollos/bokeh$ git bisect good
d969f9ef70004e4483470b132d75dd38d1e1de3f is the first bad commit
commit d969f9ef70004e4483470b132d75dd38d1e1de3f
Author: Mateusz Paprocki <mattpap@gmail.com>
Date:   Tue Mar 11 15:27:21 2014 +0100

    Allow to use development frontend files in HTMLFileSession

    Possible configurations:

    session = HTMLFileSession("some.html")

    session.save(resources='inline')"
    session.save(resources='relative', rootdir='.')"
    session.save(resources='relative-dev', rootdir='.')"
    session.save(resources='absolute')"
    session.save(resources='absolute-dev')"

:040000 040000 bf086f297d034056b40d3220581effcbf81b3dfe 4383f5f1e2f05fd0c7162bacd0d437e4eba2ba05 M  bokeh
```

@mattpap, any hints?

Here is a link to the commit, for reference: https://github.com/ContinuumIO/bokeh/commit/d969f9ef70004e4483470b132d75dd38d1e1de3f  Just glancing at it, it looks like

```
    <script type="text/javascript">
        {%- for snippet in js_snippets %}
        {{ snippet|indent(12) }}
        {%- endfor %}
    </script>
```

got moved from `<body>` to `<head>`

In fact, before that commit, it was not in `body` neither... it was "floating in the empty space"? :wink: 
Anyway, this `<script>` does not belong to `head`? Or I missing something?

I'm not sure. @kdodia had a link about there being problems when the canvas was attempted to be used before the DOM was actually initialized (if I understood correctly) so it caught my eye. But I think you said it was just missing the `<div>` completely? so maybe not...

shouldn't we not even have head and body tags when outputting to the notebook?

> Anyway, this `<script>` does not belong to head?

It's all about initialization order. I will look into this in the evening.

This is the change I made:

```
--- a/bokeh/templates/base.html
+++ b/bokeh/templates/base.html
@@ -19,15 +19,15 @@
             {{ js|indent(12) }}
         </script>
         {%- endfor %}
-        <script type="text/javascript">
-            {%- for snippet in js_snippets %}
-            {{ snippet|indent(12) }}
-            {%- endfor %}
-        </script>
     </head>
     <body>
         {%- for snippet in html_snippets %}
         {{ snippet|indent(8) }}
         {%- endfor %}
+        <script type="text/javascript">
+            {%- for snippet in js_snippets %}
+            {{ snippet|indent(12) }}
+            {%- endfor %}
+        </script>
     </body>
 </html>

```

And it is working...

Perhaps I'm missing something... what _is_ different in that change?

@damianavila, as @hhuuggoo mentioned, we shouldn't output complete document, just a html fragment (currently `NotebookSession` inherits from `HTMLFileSession`, if this is the one we are speaking here about, because there is also `NotebookServerSession`).

On a side note, I'm curious what transformations does IPython to embedded html code.

OK, another try... it also fix the issue:

```
--- a/bokeh/templates/base.html
+++ b/bokeh/templates/base.html
@@ -20,9 +20,11 @@
         </script>
         {%- endfor %}
         <script type="text/javascript">
+        $(document).ready(function() {
             {%- for snippet in js_snippets %}
             {{ snippet|indent(12) }}
             {%- endfor %}
+        });
         </script>
     </head>
     <body>
```

What do you think?

Answering to @kdodia, what I am trying to do is "run" the js after the browser has loaded the HTML elements into the DOM...

Is this using the embed functionality?
On Apr 23, 2014 1:00 PM, "Damián Avila" notifications@github.com wrote:

> Answering to @kdodia https://github.com/kdodia, what I am trying to do
> is "run" the js after the browser has loaded the HTML elements into the
> DOM...
> 
> ## 
> 
> Reply to this email directly or view it on GitHubhttps://github.com/ContinuumIO/bokeh/issues/559#issuecomment-41186965
> .

This is just whatever the `NotebookSession` currently uses.

which does not use the embedding stuff NotebookServerSession is the one that does the embedding stuff.

#562 should take care of this issue

> #562 should take care of this issue

Do you mean the embedding stuff... not this #559 issue, don't?

yes the session refactor/embedding work in #562 should resolve this issue when it's complete

oh... I had not time to check #562 yet... I will take a look soon, thanks.

@damianavila I was confused by https://github.com/ContinuumIO/bokeh/issues/559#issuecomment-41178946 because to my eyes the code was identical, jejeje. But I see https://github.com/ContinuumIO/bokeh/issues/559#issuecomment-41185042 now and that makes sense.

@kdodia Great!


Resolving patch:
diff --git a/bokeh/embed.py b/bokeh/embed.py
--- a/bokeh/embed.py
+++ b/bokeh/embed.py
@@ -65,6 +65,7 @@ def notebook_div(plot_object):
 
     '''
     ref = plot_object.get_ref()
+    resources = Resources()
     elementid = str(uuid.uuid4())
 
     js = PLOT_JS.render(
@@ -74,7 +75,7 @@ def notebook_div(plot_object):
         all_models = serialize_json(plot_object.dump()),
     )
     script = PLOT_SCRIPT.render(
-        plot_js = js,
+        plot_js = resources.js_wrapper(js),
     )
     div = PLOT_DIV.render(elementid=elementid)
     html = NOTEBOOK_DIV.render(


Test patch: