Embed is not working properly

Notebooks
1

In my notebook, I have a cell that selects a node from my SVG map and redraws it.
When I embed the notebook using an iframe, I don’t need to select that cell and the map displays correctly.

<iframe width="100%" height="1313" frameborder="0"
  src="https://observablehq.com/embed/@neocartocnrs/nemo?cells=viewof+rayon%2Cviewof+vue%2Cmap"></iframe>

But when I embed it using JavaScript, I have to select this update cell.

<div id="observablehq-viewof-rayon-a4d8bd68"></div>
<div id="observablehq-viewof-vue-a4d8bd68"></div>
<div id="observablehq-map-a4d8bd68"></div>
<div id="observablehq-update-a4d8bd68"></div>
<p>Credit: <a href="https://observablehq.com/@neocartocnrs/nemo">Le point Nemo by Nicolas Lambert</a></p>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/@neocartocnrs/nemo.js?v=4";
new Runtime().module(define, name => {
  if (name === "viewof rayon") return new Inspector(document.querySelector("#observablehq-viewof-rayon-a4d8bd68"));
  if (name === "viewof vue") return new Inspector(document.querySelector("#observablehq-viewof-vue-a4d8bd68"));
  if (name === "map") return new Inspector(document.querySelector("#observablehq-map-a4d8bd68"));
  if (name === "update") return new Inspector(document.querySelector("#observablehq-update-a4d8bd68"));
  return ["buffered"].includes(name);
});
</script>

Why is there this difference in behavior?
It’s a bit annoying because it forces me to call a cell that returns content I don’t want to display.

Here is the notebook in question:
https://observablehq.com/@neocartocnrs/nemo

2

In iframe embeds we automatically run cells that haven’t been included but may produce side effects, but we hide their output. This was done to accommodate those notebooks that rely on side effects even though they are discouraged.

In JS embeds you can simply return an empty object to include side effect cells without displaying them:

  if (name === "update") return {};
1 Like
3

It’s very clear. Thank you very much. :folded_hands: