# Embedding all cells but one in the right order

**URL:** <https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877>\
**Category:** Help\
**Created:** [April 10, 2019, 6:12pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877 "2019-04-10T18:12:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 10, 2019, 6:12pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/1 "2019-04-10T18:12:45Z")

</div>

I’d like to embed every cell in one of my notebooks but one in my blog. Based on the guidance [here](https://observablehq.com/@zivepstein/downloading-and-embedding-notebooks), I thought I could try something like the code below. It does work, but it made all my cells to be rendered out of order. ☹

```auto
Runtime.load(notebook, (cell) => {
  if (cell.name === "excludeThis") {
    return {
      fulfilled: (value) => {
        document.getElementById("chart").appendChild(value);
      }
    };
  }
});

```

I did find a couple of solutions, but I just wondered if there was a better way of tackling this. Both of my solutions involved modifying notebook before I pass it on to Runtime.load.

1st solution: In my case, the cell I wanted to get rid of was the first cell. So, simply:

```auto
// Remove the title
notebook.modules[0].variables.shift()

```

2nd solution: If I know what the name of the cell I want to exclude is, then I can filter the array for everything but that cell.

```auto
// Code to remove a cell with a certain name
var variables = notebook.modules[0].variables
var filtered = variables.filter((object, index, arr) => {
    return object.name != 'title';
});
notebook.modules[0].variables = filtered

```

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 10, 2019, 6:49pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/2 "2019-04-10T18:49:48Z")

</div>

I think your first code snippet has a typo (presumably you actually have:

```auto
  if (cell.name !== "excludeThis") {

```

instead.)

In the first code snippet, the elements are appended as children of the `chart` element when the cells become “fulfilled” – not in the order that they occur in the notebook JS file. This means that the ordering of the cells can even change if cells are executed multiple times! For that reason, that code should probably only be used for displaying a single cell, as in its original form.

(That code also won’t properly display cells whose output is a value rather than an HTML element.)

For displaying multiple cells it’s probably best to use something like [`Inspector.into`](https://github.com/observablehq/inspector/blob/master/README.md#Inspector_into), as I think you might be in your two solutions (?). Something that could go wrong with those solutions though is that you are actually removing those cells from the notebook entirely, so cells in your notebook that depend on them will break.

Here’s some import code which uses a modification of `Inspector.into` that allows you to filter cells from being displayed while still letting them execute in the runtime:

```auto
<script type="module">

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "./YOUR-NOTEBOOK.js";

// modified from https://github.com/observablehq/inspector/blob/master/src/index.js#L51
const intoFilter = function(container, filterFunc) {
  if (typeof container === "string") {
    container = document.querySelector(container);
    if (container == null) throw new Error("container not found");
  }
  return function(variable) {
    if (filterFunc(variable.name))
      return new Inspector(container.appendChild(document.createElement("div")));
  };
};

// you can enter an arbitrary filtering function as the second argument to intoFilter.
// it should take the variable name (a string) as an input and return a boolean
Runtime.load(notebook, intoFilter(document.body, (name) => name !== "excludeThis"));

</script>

```

---

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 10, 2019, 7:33pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/3 "2019-04-10T19:33:20Z")

</div>

> [@bgchen](#):
>
> I think your first code snippet has a typo (presumably you actually have:
> 
> ```auto
> if (cell.name !== "excludeThis") {
> 
> ```
> 
> instead.)

Yep - that was a typo. Sorry!

Thank you for this solution :)🙂 This makes sense!

---

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 10, 2019, 7:39pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/4 "2019-04-10T19:39:48Z")

</div>

@bgchen I have a question though. I had looked at [that exact same code](https://github.com/observablehq/inspector/blob/master/src/index.js#L51) to try and do something similar to what you did.

How did you know that the function would get the variable as an input?

`return function(variable) {`

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [April 10, 2019, 7:53pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/5 "2019-04-10T19:53:05Z")

</div>

Good question! The relevant code that calls that function in `Runtime.load` is [this line](https://github.com/observablehq/runtime/blob/master/src/load.js#L25).

```auto
 else if (module === main) module.variable(observer(v, i, m.variables)).define(v.name, v.inputs, v.value);

```

Here, `observer` is the function returned by `intoFilter` (or `Inspector.into`) and you can see that it’s passed `v` (the variable), `i` (an integer giving its order in the module) and `m.variables` (the array of variables).

As an aside: I suspect that `Runtime.load` and the v1 runtime modules currently served by Observable’s API will be deprecated at some point (`Runtime.load` was removed from the official docs a few months ago…). In the v3 runtime modules (try appending ?v=3 to a notebook’s JS file URL), it appears that the `observer` function is passed the cell name as a string. This is incompatible with the behavior I’m using above (though `intoFilter` is not hard to fix).

---

<div class="post-metadata">

**Author:** ![bluprince13](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bluprince13/32/1646_2.png) [@bluprince13](https://talk.observablehq.com/u/bluprince13)\
**Post date:** [April 10, 2019, 7:55pm UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/6 "2019-04-10T19:55:43Z")

</div>

Ah interesting. Thank you for explaining! 🙏

---

<div class="post-metadata">

**Author:** ![kchalas](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kchalas](https://talk.observablehq.com/u/kchalas)\
**Post date:** [September 20, 2019, 11:01am UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/7 "2019-09-20T11:01:00Z")

</div>

Just trying this in a new simple html page to test embedding, attempting to embed just the two cells I want - the main visualization, and a dropdown (select) control.

it seems I should be able to use the above code to achieve this, but the page throws an error ‘r is not iterable’.

![32](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/c61b0e9bf41fe8099539ff8b8136ac65fb553bea.png)

```
<html>
        

        <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/@kchalas/calendar-heatmap-too.js?v=3";

            // modified from https://github.com/observablehq/inspector/blob/master/src/index.js#L51
            const intoFilter = function(container, filterFunc) {
                if (typeof container === "string") {
                container = document.querySelector(container);
                if (container == null) throw new Error("container not found");
                }
                return function(variable) {
                if (filterFunc(variable.name))
                    return new Inspector(container.appendChild(document.createElement("div")));
                };
            };
            
            // you can enter an arbitrary filtering function as the second argument to intoFilter.
            // it should take the variable name (a string) as an input and return a boolean
            Runtime.load(notebook, intoFilter(document.body, (name) => {
                console.log(name);
                name !== "excludeThis"
            }));
            
        </script>

</html>
```

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [September 20, 2019, 11:21am UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/8 "2019-09-20T11:21:35Z")

</div>

I think the recommended way is now [https://observablehq.com/@observablehq/downloading-and-embedding-notebooks](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks).

---

<div class="post-metadata">

**Author:** ![kchalas](https://avatars.discourse-cdn.com/v4/letter/k/2bfe46/32.png) [@kchalas](https://talk.observablehq.com/u/kchalas)\
**Post date:** [September 20, 2019, 11:45am UTC](https://talk.observablehq.com/t/embedding-all-cells-but-one-in-the-right-order/1877/9 "2019-09-20T11:45:35Z")

</div>

thanks, you’re right and i did try that option first. i will open a different topic on the issues i am facing with that approach. thanks