Embedded notebook shows input value at bottom of cell

Community Help
1

I am really loving these notebooks as design calc worksheets, and would like to embed notebooks into my website. However, one issue I am having is that when I have inputs, the input value is displayed in the bottom of the cell in the embedded notebook, but not on the original.

embedded example : https://www.kinson.io/post/design-load-combos/

image

workbook: https://beta.observablehq.com/@jchatkinson/design-load-combinations-for-buildings

Any ideas how to get consistant behavior on both (ie, don’t show the input value in the bottom of cell)

2

It looks like the default Inspector object that is created for each cell of your notebook by the line:

Runtime.load(notebook, Inspector.into(document.getElementById('obs-notebook')));

(which you presumably pasted from @jashkenas’s embedding tutorial), creates an extra div for the value of each of your HTML input cells. This is probably a bug / oversight in the way that the notebook-inspector module treats viewof cells that our friends at Observable HQ will fix now that you’ve brought it to their attention.

In the meantime though, the following hack will make those extra divs disappear. If you add this CSS rule, the extra cells will disappear:

.observablehq--number {
  display: none
}

Unfortunately, this also hides all cells of the notebook which output an unformatted JS Number. For your notebook in particular, this means that the two cells that compute the “Factored load” (cell Ff and the last cell in your appendix) will be hidden as well. Fortunately, you can easily work around this. I’m guessing that your notebook is still in progress and you can do without unformatted number output cells in the final version. So you can just embed Ff or the result of the Factored load function in a template literal in some other cell which won’t be affected by this CSS rule.

In case you want to hide the appendix altogether, note that you can edit the Runtime.load call (quoted above) so that it calls Inspector.into on the cells you care about, and return true on everything else. See the discussion in @jashkenas’s embedding tutorial and the embedding code on its linked Breakout example for some ideas.

3

Thanks for the great answer, @bgchen!

Inspector.into isn’t creating an “extra” div, per se — it’s just that viewof creates two variables, both viewof a and just a, and Inspector.into inspects everything.

For now, the best way to handle this is to name the cells you care about, and use new Inspector for each variable that you’d like to embed on the page. That way you don’t have to show your “Imports and other misc things” either…

4

Thanks for the advice @bgchen and @jashkenas!

I would ideally like to keep the simplicity of dropping in a link with a hugo shortcode

{{< notebook "url_to_notebook" >}}

to embed the notebooks, so I guess I will have to dig into this a little more to figure out a way that is generalized but also allows for selective rendering of cells.

5

Just a thought, but if you add a metadata cell to your notebook, like so:

embed = ["intro", "D", "L", "S", "W", "E", "table"]

… then your Hugo shortcode can look at that value to decide what to render, and in what order.

6

Thanks to you for the clarification! One question: will there be any changes to the way Inspector or Runtime.load interact with viewof cells or should we just keep this behavior in mind for the future?

7

@bgchen — There’s currently no plan to change the behavior of Inspector.into() it’s a simple, “brute” function that blindly renders every variable in the runtime’s main module, in order, into a given container.

Useful for debugging or extremely simple examples, but for any sophisticated use case, you’re expected to use new Inspector — or your own custom rendering strategy — yourself.

1 Like