embedding viewof error - radio could not be resolved

Community Help
1

I have a notebook which I’m trying to embed in a webpage. When I try and embed a radio button I get an error

viewof p = RuntimeError: radio could not be resolved

I’ve embedded some other cells with no issue. - actually not true, seems only the logo is resolving.

I see in this example a viewof radio button cell can be embedded and when I try and embed from the notebook in the example above, I can. I’ve even copied the radio button cell I want from that example into my notebook but I still get the above error. Here’s a link to my notebook (the cell I want to embed is the first one - viewof p).

https://observablehq.com/d/xxxx

The code I’m using to embed (again, this works for the example notebook from above).

<script type="module">
  import {
    Runtime,
    Inspector
  } from "https://unpkg.com/@observablehq/notebook-runtime?module";

  // Your notebook, compiled as an ES module.
  import notebook from "https://api.observablehq.com/d/xxxjs";

  const renders = {
    "viewof p": "#viewof-p"
  };
  
  for (let i in renders)
    renders[i] = document.querySelector(renders[i]);

  Runtime.load(notebook, (variable) => {

    if (renders[variable.name]){
      return new Inspector(renders[variable.name]);}
  });

I wonder is there something about my notebook (which has lots of data sources) that is leading to this error?

1 Like
2

The underlying issue here is that the “input” cell appears twice in https://api.observablehq.com/d/09fe7ea0f0ac07fd.js

There are a few solutions described in this recent thread. The most future-proof one is to switch to using the v3 module format like this:

<script type="module">
  import {
    Runtime,
    Inspector
  } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

  // Your notebook, compiled as an ES module.
  import define from "https://api.observablehq.com/d/09fe7ea0f0ac07fd.js?v=3";

  const renders = {
    "viewof p": "#viewof-p"
  };

  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]);
    }
  });
  </script>
2 Likes
3

Great. that’s very helpful. Just a follow up. Is it possible to import the default observable styles when embedding? Most of the examples I see don’t do that (i.e., https://jsfiddle.net/5w906pL1/20/)

4

I ended up just copying the observable css from the dev tools.

5

I’m no lawyer, but I wouldn’t recommend copying large amounts of CSS (or other content or code) from other websites to your own site (unless you’re licensed to) as in my understanding that is a violation of copyright.

You could instead use the stylesheet provided with the Observable Inspector by putting this in the <head> of your html:

<link href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css" rel="stylesheet"/>

This is only a subset of the styles used on observablehq.com, but it should be enough to get you started.

1 Like
6

Yeah, I opted not to when I saw the Copyright in the header. Nice to have this as an option. Ta.

1 Like
7

Most of Observable’s styles come from libraries: About 80% are from Tachyons, some are from CodeMirror, ReactCrop and others, and only a small percentage are actual custom classes and rules.

2 Likes