d3arg.draw does not work in Quarto documents

percyfal commented 1 day ago

Hi,

I'm trying to include a dynamic visualization in a Quarto revealjs presentation but I'm (literally) drawing a blank. Quarto doesn't complain, but the slide shows no visible output. I'm aware this may be an issue with Quarto itself, but it would be nice for demonstration purposes to be able to show an interactive plot in a slide, and maybe you have an intuition for what's going wrong here.

An MWE is as follows:

---
title: tskit arg visualizer
jupyter: python3
format: revealjs
include-in-header:
  - text: |
      <script>
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://d3js.org/d3.v7.min.js';
      document.head.appendChild(script);
      </script>
---

# Test

```{python }
#| label: get-ipython
#| echo: true
#| eval: true
# Check if running in notebook
print(get_ipython().__class__.__name__)

#| label: test-draw-d3
#| echo: false
#| eval: true
from IPython.display import SVG 
import msprime
import tskit_arg_visualizer
ts = msprime.sim_ancestry(4, population_size=100, record_full_arg=True, sequence_length=10000, recombination_rate=1e-6, random_seed=2)
d3arg = tskit_arg_visualizer.D3ARG.from_ts(ts)
d3arg.draw(
    width=100,
    height=100,
    edge_type="ortho",
    sample_order=[1, 0, 7, 2, 3, 6, 4, 5]
)


In the preamble I add the code to load the d3 library with the `include-in-header` directive; I have also tried including it as a regular code block, to no avail. If you save the snippet in `mwe.qmd` you can run the example with `quarto preview mwe.qmd` with a [recent Quarto installation](https://quarto.org/docs/download/).

percyfal commented 1 day ago

The plot thickens. In my recent pixi environment where I installed jupyter and jupyter notebook with pixi add jupyter notebook (basically grabbing the latest versions) the visualization fails even with jupyter notebook. In an old conda environment (from this summer) it works. Both environments run the same Python, tskit_arg_visualizer, jupyter, jupyter notebook versions. I'll keep you posted if I find out what package difference is causing this.

kitchensjn commented 1 day ago

I had been thinking about using the visualizer within a presentation so thanks for looking into this!

I'm not terribly familiar with Quarto but looking at the output HTML for your example, it appears D3 isn't being loaded properly. I believe that this is due to the ordering that the external packages are being called and how it interacts with requirejs. A hacky solution to get it to plot:

Remove the include-in-header section from the front matter of your Quarto document. I don't think that that code is needed here or at least not working as intended.

In the output HTML, add the following code to the top of your <head> section.

<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script><script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script><script src="https://d3js.org/d3.v7.min.js"></script>

Unfortunately, include-in-header always adds to the end of the <head> section which is after requirejs is loaded and where we are running into issues. This ensures that the necessary JavaScript packages are loaded first which allows you to plot your ARGs. I can look into more elegant ways around this to avoid having to go in and edit the HTML. Let me know if that temporary solution works for you!

For your pixi environment, could you run print(get_ipython().__class__.__name__)? This may be related to #86.

percyfal commented 1 day ago

Thanks for looking into this! Unfortunately I can't get the hack to work. In jupyter console called in the pixi environment I get

In [17]: print(get_ipython.__class__.__name__)
method

kitchensjn commented 23 hours ago

Alright, so I believe the issues with pixi are because it doesn't recognize you are running the code in a Jupyter Notebook. Run this in a Python code block at the top of your notebook to ensure that it properly recognizes the environment:

get_ipython().__class__.__name__ = "Shell"

Hopefully that solves the pixi issue. Handling all of the different environments properly has been a major sticking point. Eventually, my goal is that this extra code won't be necessary, but for now it's the quickest solution when we find an environment that hasn't yet been tested.

I will follow up with a cleaner solution for the Quarto issue as that is going to require a bit more work.

kitchensjn / tskit_arg_visualizer

d3arg.draw does not work in Quarto documents #100