Can a notebook be 'too big'?

Community Help
1

When I try to embed a cell from a relatively ‘big’ notebook that relies heavily on Jeremy’s inputs, I get the error:

viewof value = RuntimeError: select could not be resolved

Here’s an example of the error in a page hosted on GitHub.

If I strip away all the cells except for my desired dropdown, however, it works.

Here’s an example of a working embed page hosted on GitHub

Not always, but sometimes, the browser console will return an error message:

[Violation] 'requestAnimationFrame' handler took 63ms

Is it possible that the embed is failing because my notebook is too large?

2

I think you’re running into the issue with the v1 modules served by Observable’s API described in these threads.

The recommended solution is to switch to using the V3 runtime. I think changing the script in your HTML file to the following should work (not tested!):

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
const renders = {
  "viewof value": "#labels",
};

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

const runtime = new Runtime();
const main = runtime.module(define, name => {
  if (renders[name]) {
    return new Inspector(renders[name]);
  }
});
2 Likes
3

Thanks Bryan. Unfortunately it still doesn’t work. That is, the rendered error message disappeared, but now the console returns:

Uncaught
observable_embed_timeout.html:26 
 ReferenceError: define is not defined
    at observable_embed_timeout.html:26

(So maybe it did work, but now there’s another error in my notebook that I need to sort out)?

Regarding the runtime version - I am surprised that the ?v=3 doesn’t refer to notebook version. Isn’t the runtime already defined as v4 here:
https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js

… I had also tried changing the @4 to @3 when I was messing around, but went with v4 per Jeremy’s very well elaborated guide on this topic.

4

Ah, my bad, I screwed up the code! Change define to notebook:

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
const renders = {
  "viewof value": "#labels",
};

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

const runtime = new Runtime();
const main = runtime.module(notebook, name => {
  if (renders[name]) {
    return new Inspector(renders[name]);
  }
});

You were importing the Observable runtime library v4 correctly, but you needed to add ?v=3 to the import statement for your own notebook.

5

Got it! :slight_smile: Thank you.

I got it in a slightly different way, following Jeremy’s example:


      import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
      import notebook from "https://api.observablehq.com/d/d1345cfb039d5b19.js?v=3";
      
      new Runtime().module(notebook, name => {
  if (name === "viewof value") {
    return new Inspector(document.querySelector("#labels"));
  }
});

… but I’ll switch over the your solution to allow me to define multiple cells.

Thanks for this!

1 Like