Jupyter Notebook example no longer works

matthewwiese commented 1 year ago

I encounter the following error after executing the second cell in the Jupyter Notebook example:

Javascript error adding output!
ReferenceError: Ideogram is not defined
See your browser Javascript console for more details.

The error as it appears in the browser console:

ReferenceError: Ideogram is not defined
    <anonymous> main.min.js:10
    append_javascript outputarea.js:772
    append_mime_type outputarea.js:710
    append_display_data outputarea.js:671
    append_output outputarea.js:345
    handle_output outputarea.js:256
    output codecell.js:399
    _handle_output_message kernel.js:1199
    i jQuery
    _handle_iopub_message kernel.js:1239
    _finish_ws_message kernel.js:1018
    _msg_queue kernel.js:1009

Part of the difficulty in resolving this is that %%javascript is planned to be deprecated, but that has not yet occurred. Additionally, requirejs is not available in Jupyter Lab, so an example that works across both Notebook and Lab is difficult without what feels like a "hacky" approach.

The best I have been able to come up with that works across both are the following three cells:

%%javascript
const script_elem = document.createElement('script');
script_elem.type = 'text/javascript';
script_elem.src = 'https://cdn.jsdelivr.net/npm/ideogram@1.40.0/dist/js/ideogram.min.js';
document.head.appendChild(script_elem);

%%html
<div id="ideo-container"></div>

%%javascript
const ideogram = new Ideogram({
    organism: 'human',
    container: '#ideo-container',
})

Which is of course far from ideal as it inserts the <script> element into the document's <head> (and does so repeatedly for each execution).

I suppose a wrapper like igv-notebook or igv-jupyter is the way to go, but before I spend time on something like that I'd appreciate your input. Perhaps there's a better approach that I'm missing?

matthewwiese commented 1 year ago

I have just discovered Dash Bio's Ideogram which uses ideogram.js under the hood.

This might be the solution I need for my use case. Not sure about its relevance to providing a Jupyter example, however?

eweitz commented 1 year ago

Thanks for bringing this to my attention, Matt. I don't really use Jupyter, though I did field some questions from Plotly when they integrated Ideogram.js into Dash Bio a few years ago.

I appreciate the pointers to igv-notebook or igv-jupyter. I probably won't have bandwidth to provide a solution like that in the near term. There's a small chance I'll pursue something along those lines next year.

I'd welcome any pull requests or other repositories along those lines. The best I can likely provide in the near term is the basic example that you kindly supplied above. If you have other ideas for a simple Jupyter example, I'm open to suggestions!

matthewwiese commented 1 year ago

I was planning on spending some time on this in the new year, so I'll update if I learn anything actionable!

eweitz commented 1 year ago

This is fixed over in #332.

@matthewwiese, the new code is essentially what you wrote, so if you give me a name and email address I can use in the AUTHORS file, I will add you as a contributor. Either way, thank you!

matthewwiese commented 1 year ago

I appreciate it @eweitz but that code was entirely cobbled together from various StackOverflow answers and elsewhere. Hopefully I can make a more meaningful contribution in the future! :rocket:

eweitz / ideogram

Jupyter Notebook example no longer works #329