How to integrate JBrowse with Django

Question

[pyramidsnail]

Hi,

I want to integrate the JBrowse genome browser into my website written with the Django framework but have no ideas how to realize it. Anyone can help with how to modify the urls.py and views.py to realize a small test case? (like what they show on the homepage of JBrowse: http://jbrowse.org/)

Many thanks

Answer 1

[cmdcolin]

You can probably put JBrowse in your static assets in django. There are some corner cases like handling Range requests, which I have heard might require special handling. The RangeHTTPServer package from danvk might be able to help though. Alternatively, you might consider fully putting jbrowse on a different apache http server, and using django for just handling certain aspects of your app, just because jbrowse is well suited to being deployed on a fully featured web server (e.g. servers that can handle the HTTP Range request header for bigwigs and bam files).

If the question is how to embed jbrowse on a specific page that has other content on it, then the easiest answer is to simply use an iframe.

If you would like to avoid an iframe, you can also just take a look at the contents of JBrowse's index.html and use it in your template. You will just have to watch out for CSS collisions. JBrowse is almost fully contained in the GenomeBrowser "div" on it's index.html

I'm not too familiar with django but let me know if that helps

[cmdcolin]

This project has started adding Django integration https://github.com/putmantime/CMOD.Django as a backend to https://putmantime.github.io/CMOD/

Answer 2

[bioinfosuite]

I went through the same issue and here is the solution I found: The solution is to put the whole jbrowse folder like in the static directory of your webapp and after call it as follows from your template html:

<iframe style="border: 1px solid #505050;" src="/static/jbrowse/index.html" height="600" width="1000"></iframe>

as you notice I specified the path of the index.html that is located in the jbrowse. You can use also {% load staticfiles %} on the top of your html template and point to the jbrowse index.html as follows src="/static/jbrowse/index.html" src="{% static '/jbrowse/index.html' %}". hope it helps others