Rendering imported cells

Community Help
1

I am trying to embed this notebook, but I can’t seem to get the form at the top (viewof allParameters) to render within a div. I suspect this has to do with the way I’m importing this cell from another notebook.

When I console.log the names of the cells in the runtime.module callback, I see all the cells except the imported ones.

Here’s the embed code I’m using:

<div id="allParameters"></div>
<div id="chart"></div>
<script type="module">
    import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    import notebook from "https://api.observablehq.com/@gallowayevan/nm-line-chart.js?v=3";

    const renders = {
        "viewof allParameters": "#allParameters",
        "chart": "#chart",
    };

    for (let i in renders)
        renders[i] = document.querySelector(renders[i]);

    new Runtime().module(notebook, name => {
        console.log(name)
        if (renders[name])
            return new Inspector(renders[name]);
    });
</script>

Thanks!

2

Ah, this is interesting. For some reason the runtime isn’t aware that the imported cell is reachable. (See @mike’s post below for a clear explanation of what’s happening).

For a quick workaround, try naming this cell in your current notebook:

viewof allParameters

to this:

viewAllParameters = viewof allParameters

And then replace the reference to viewof allParameters with viewAllParameters in your embedding code:

    const renders = {
        "viewAllParameters": "#allParameters",
        "chart": "#chart",
    };
3

That does the trick! Thanks @bgchen.

More generally, should I be importing viewof cells differently, or not doing it at all? That is, is this a bad pattern?

4

What you posted first is probably what I would have tried, so I don’t think it’s a bad pattern at all. I was a little surprised that it didn’t work, so maybe there should be another note in the tutorial? @jashkenas

5

I haven’t looked into it more fully yet — but from surface appearances, this looks like a bug that we need to fix.

6

The issue is that the observer function you pass to runtime.module is only invoked for symbols that are defined by the notebook itself, not for symbols that are imported. So, you need to give the cell that references the imported cell a name (as @bgchen suggested) in order to make it available for embedding.

But I think we can fix this on our side so that imported symbols are observable too (i.e., the observer function is invoked for each import in addition to cells defined in the main notebook), and then you won’t need to give imported symbols an additional name for embeds.

2 Likes