biojs2iPython

[wilzbach]

Based on `biojs2galaxy we could create a similar approach for IPython/Jupyter notebooks.

Infos about IPython

Widgets in iPython are described here and defined in IPEP23.

A widget just consists of one Backbone view which gets the model injected by the WidgetManager. So basically there is already a two-way communication lifecycle for a model.
(The JS Widget implements also the save function of a Backbone view and listens to updates).

The Backend sends the Model JSON to the JavaScript WidgetMgr which then creates the view (a simple example).

I found also an example with D3.

(Two months ago I posted some thoughts about this to the BioJulia community.)

[mpschr]

That would be great. I gave it a try a couple of month ago with the jHeatmap component: https://github.com/jheatmap/jheatmap-ipython

[abstatic]

Hi @greenify @mpschr I would like to work on this as my gsoc project. I already have past experience with IPython notebooks, python and js.

[wilzbach]

@abstatic - that's nice to hear. Don't hesitate to go ahead, play with it and create a simple component.
Here's a simple roadmap that could get you on the right track. Let's know your progress.

1. Create a table widget in Jupyter (-> learn Jupyter widgets)
2. Visualize FASTA in JS (could be based on the table widget, -> learn more about widget integration)
3. Start to reuse existing BioJS components for visualizations (-> learn about all the gotchas involved with using real BioJS components)

Don't forget that there is BioPython and ideally we want to have visualizations for most of their formats ;-)

[abstatic]

@greenify thanks for prompt reply! I will get straight down to work and develop the notebooks and post them here for review.

[wilzbach]

@abstatic you might want to ping @dblank as he has a lot of experience in integrating dynamic content to IPython/Jupyter & he would be one of the mentors for the project.

[dsblank]

I'm following along here, too. :)

I would also add that the widget approach is an obvious candidate, but has some serious limitations (such as not being able to be seen unless one has a live kernel). That would make BioJS widgets invisible via nbviewer. Note in this notebook that there are no widgets visible:

http://nbviewer.jupyter.org/github/ipython/ipython-in-depth/blob/master/examples/Interactive%20Widgets/Custom%20Widget%20-%20Hello%20World.ipynb

[mpschr]

That's cool guys - I once did a small study on the jHeatmap component: https://github.com/jheatmap/jheatmap-ipython

Feel free to use it as a use-case - I guess it is a good scenario as people often work with data-frames that could be seen as heatmaps.

Have fun

[zsameem]

Hi guys. I have been trying to follow as suggested by @greenify above. I wanted to ask you all what the best way to inject a javascript library (say biojs-io-fasta) is into a jupyter notebook. I have been using the %%html magic of jupyter notebook.

%%html
<script src="path-to-biojs-io-fasta></script>

Then if I do something like

%%javascript
var Fasta = require('biojs-io-fasta')
//use the parser as usual

I get require js errors like context not loaded in the console. Jupyter itself uses requrejs to load javascript files.

[abstatic]

@zsameem try using it in conjunction with browserify ? It might help.

[wilzbach]

Hi @zsameem

1. you can use browserify -s <global-name> - it will generate an UMD bundle for the supplied export name or use requirejs.config({paths: {foo: '<path-to-foo>'}}) (warning: these approaches might solve your problem temporarily, but please read 2).
2. Browserify is a good technology, but "old" technology. There are newer tools now like WebPack and we will most likely switch to SystemJS. This is part of the Web Components GSoC projects, but I definitely recommend reading the issue at biojs3
3. As @dsblank pointed out there are (at least) three approaches

• using the widgetAPI
• using html/js magics
• using custom.js

None of them is perfect and each has their gotchas. Browse the web how people integrate d3 with IPython/Jupyter - this will give you quite a couple of ideas ;-)

Have a look at declarative widgets they seem to be doing roughly what we want and they focus on web components (we want to get this done in biojs3) and already do a lot of stuff that we want too (e.g. data binding). I really liked what I saw on their online demo.

[zsameem]

Hi @greenify

I went through the links. Tried following code to embed the biojs-io-fasta library.

require.config({
paths:{ "fasta":"path-to-biojs-io-fasta" } });

require(['fasta'], function(fasta){
console.log(fasta);
});

When I check the console, the output is
undefined
Do you have any idea as to why the output is undefined?

[rohanjaswal2507]

@zsameem Is it the exact code snippet you are using?

[rohanjaswal2507]

Please follow the progress here: https://github.com/rohanjaswal2507/biojsIPython
I would love to have your suggestions and opinions.

[cesarr]

@rohanjaswal2507 Thank you for starting this effort! I think it's important and very useful.