<div dir="ltr"><br><div class="gmail_extra"><br><br><div class="gmail_quote">On Thu, Jul 10, 2014 at 8:15 AM, Cyrille Rossant <span dir="ltr"><<a href="mailto:cyrille.rossant@gmail.com" target="_blank">cyrille.rossant@gmail.com</a>></span> wrote:<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">
<font color="#0000ff">
Let's say I have a Javascript application that can read files in a<br>
custom JSON format. I want to create an IPython extension where:<br>
<br>
* some Python functions may return objects in this format<br>
* the notebook understands this format and uses my JS app to display them<br>
* cell outputs in that format are saved in the JSON notebook, along<br>
with other representations (text, image)</font></blockquote><div><br></div><div>if I understand what you're trying to do, you should be able to get *part* of this by having your Python code return Javascript fragments for rendering in the notebook cell. </div>
<div><br></div><div>Your fragments would be your (a) JSON data combined with (b) whatever JS invocation you need to display it or interact with it in the cell.</div><div><br></div><div>For example:</div><div><br></div><div>
<pre style="padding:0px;font-size:14px;color:rgb(51,51,51);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:0px;margin-bottom:0px;line-height:17.000059127807617px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;border:none;background-color:rgb(247,247,247)">
<span class="" style="color:rgb(0,128,0)">from</span> <span class="" style="color:rgb(0,0,255);font-weight:bold">IPython.display</span> <span class="" style="color:rgb(0,128,0)">import</span> <span class="">Javascript</span></pre>
<pre style="padding:0px;font-size:14px;color:rgb(51,51,51);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:0px;margin-bottom:0px;line-height:17.000059127807617px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;border:none;background-color:rgb(247,247,247)">
<span class="">Javascript("</span></pre><pre style="padding:0px;font-size:14px;color:rgb(51,51,51);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:0px;margin-bottom:0px;line-height:17.000059127807617px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;border:none;background-color:rgb(247,247,247)">
<span class="">  var data = {<i>your JSON data here</i>};</span></pre><pre style="padding:0px;font-size:14px;color:rgb(51,51,51);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:0px;margin-bottom:0px;line-height:17.000059127807617px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;border:none;background-color:rgb(247,247,247)">
<span class="">  <i>invoke_your_function</i>(data);</span></pre><pre style="padding:0px;font-size:14px;color:rgb(51,51,51);border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;margin-top:0px;margin-bottom:0px;line-height:17.000059127807617px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;border:none;background-color:rgb(247,247,247)">
")</pre></div><div><br></div><div>You can also have your objects implement _repr_javascript_() which would generate the above fragment.</div><div><br></div><div>In addition, you will want to make sure your Javascript library is loaded.  There are subtleties here, including lots of possible race conditions where your cell is executed before your libraries are fully loaded. To avoid this case, preface your fragments with the right calls to 'require.js', see:  <a href="http://requirejs.org/">http://requirejs.org/</a>  </div>
<div><br></div><div>For detailed examples of most of this, see my notebook:  <a href="http://nbviewer.ipython.org/github/payne92/notebooks/blob/master/00%20Javascript%20In%20Notebooks.ipynb">http://nbviewer.ipython.org/github/payne92/notebooks/blob/master/00%20Javascript%20In%20Notebooks.ipynb</a></div>
<div> <br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><font color="#0000ff">What's the best way to do it? Should I create a custom mime type<br>

"application/myapp", and extend the notebook to use the JS app for<br>
that mime type (if that's even possible)?</font></blockquote><div><br></div><div>I think this opens up a can of worms (certainly relative to the approach above).   Going this route, you start to introduce dependencies on how the notebook is served, and you make the notebook itself less portable.</div>
<div><br></div><div>I hope this is helpful.  (and if you have any feedback on my example notebook, please let me know).</div><div><br></div><div>-andy</div></div></div></div>