Advanced Embedding - howto render all cells except certain cells

Community Help
1

I’m following this example: Advanced embeds | Observable documentation

and I see how I can select one cell to embed. How might I render all cells except one or two cells?

If you don’t want to render the entire notebook, define a custom function to control which cells are rendered and where they go. For example, to render just the cell named “chart” into the DOM element with the same id, say:

new Runtime().module(notebook, name => {
  if (name === "chart") {
    return new Inspector(document.querySelector("#chart"));
  }
});

In my case I’m trying to embed all cells except the one called “notebook_title” from this notebook.

As an extension, what if I wanted to exclude another cell called “hide_me”?

2

WIth iframe embeds you currently only have the choice to embed the entire notebook or a subset of named cells.

If your question is about custom embeds, then you can invert your filtering, returning a falsish value instead of an observer for this particular cell:

{
  const {Runtime, Inspector} = await import("https://esm.sh/@observablehq/runtime");
  const {default: define} = await import("https://api.observablehq.com/@bcrock/into_the_great_public_domain.js?v=4");
  
  const container = document.createElement("div");
  const inspect = Inspector.into(container);
  
  new Runtime().module(define, name => {
    if(name !== "notebook_title") return inspect(name);
  });
  
  return container;
}

I’ve given this example as a notebook cell, but hopefully you’ll be able to adapt it. (If not, let me know!)

1 Like
3

Thanks mootari! yes that was the answer I was looking for, but I am having trouble adapting it to an HTML page. I have one example working, but when I modify it to match your pattern, I can’t get the page to load. I’ve tried a bunch of variations but so far no luck. Any suggestions? Thank you!

image
image1050×736 21.8 KB

4

In your first example, note how you’re not doing anything with container: it just sits there and will be garbage collected, unless you append it to the document’s body. Also, any dynamic imports can be replaced with static imports, since your script type is “module”.

Long story short, change your second example to:

const inspect = Inspector.into("#observablehq-974acc8");
new Runtime().module(define, name => {
  if(name !== "notebook_title") return inspect(name);
});
5

Thanks again. You had a typo in the 97a4acc8 but I found it and it works as expected. It’s also helpful to know that containers need to be attached to a body, and to know that the two patterns of imports are dynamic vs static. I guess that means that cell and module scripts have different requirements for scripting, I’ll keep an eye out for that.

6

Next time please share the actual code instead of a screenshot.

The main difference here is that cells aren’t modules, and therefore can’t use static imports (which need to go at the top of a script).

For other differences have a look at

7

Sorry about the screenshot - I was trying to paste code but was having trouble pasting the code in my message… it seems like the page was trying to render my HTML. I just researched to find the preformatted text button, and if this renders properly, I get it now.

<HTML><HEAD></HEAD><BODY>
Test HTML
</BODY></HTML>
1 Like