Embedding all cells but one in the right order

Community Help
2

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

  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, 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:

<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>
1 Like