Feature Request: Hiding Cell

Feedback
1

It would be great if we could hide certain cell from view. Because sometimes we just want to show the interactive document without showing the code (especially the import cell).

2

Hi @alijaya. I understand your question to be commenting on the Observable UI, so the couple links below may not directly respond to your concern. Because your profile on the forum is just a couple of days old, and just in case you haven’t come across them before…

Outside of the Observable UI, you can opt in to render specific cells in an HTML document:

If you find yourself struggling with aesthetic bits, check around–there are a few nice tricks among users:

2 Likes
3

For notebooks hosted on observablehq.com itself, it’s unlikely that a way to completely hide cells will be added, see this post:

1 Like
4

Ah thanks for the reply :smiley:… that’s what I need :smiley:

5

I am also looking for such feature. My notebook is pretty complex with lot of code and variables, but ultimately gives page size visualization. I want to hide/shrink all coding cells in exported code. Is there a workaround for this? I tried looking at inspector.css, but can’t infer how to apply styling to accomplish this. But maybe there is another way?

6

What do you mean by “exported code”? If you embed your notebook elsewhere you have full control over which cells should get displayed. But inside the ObservableHQ editor you will always have at least one output row per cell, even if it is blank.

The order of cells in Observable notebooks is arbitrary. If you want to draw attention to some cells, you can move them to the top, and section off other areas of your notebook through the use of horizontal lines and headings, e.g.:

md`---
## Appendix`
7

@mootari What do you mean by “exported code”?

… → “Download Code”

8

From the downloaded folder, open index.html in your editor and replace the lines

const runtime = new Runtime();
const main = runtime.module(define, Inspector.into(document.body));

with

const runtime = new Runtime();
const inspect = Inspector.into(document.body);

const cells = new Set(["foo", "bar"]); // The cells that you want to display.
const main = runtime.module(define, name => cells.has(name) ? inspect() : undefined);

where “foo” and “bar” are just examples of cell names.

2 Likes
9

I also have a use case for hiding a cell. I have a Covid-19 by state notebook at https://observablehq.com/@dmaynard/covid-19-us-states-explorer This notebook allows the user to either choose the Top-k states for a given variable OR manually choose the states to include. Manually selection requires 50 checkboxes which takes up a lot of screen real estate. If the user has choose to see the top 5 states in terms of new cases per 100,000 I would like to hide the 50 checkboxes. Is there a way to wrap the viewof checkbox in html and hide this DOM element via code?

11

Maybe something like this dmaynard?

viewof excluded = { return (selectionModeTxt == "5") 
  ? md`<hr>`
  : checkbox(stateCodes)}
12

Thank you for the suggestion. When I read it I thought Aha, that’s so easy, but alas I tried it and the 50 checkboxes still get displayed. My theory is that because the variable excluded has a static dependency (referenced in the source) to checkbox then checkbox get gets re-evaluated (and displayed) even though the dynamic reference is never called. I did include you suggestion and updated the page since it still works the same way.
David Maynard

13

This will work:

viewof excluded = selectionModeTxt === "0"
  ? checkbox(stateCodes)
  : Object.assign(html`<hr>`, {value: null})

An HR element by itself can be used as a view, but since its value is initially undefined, any cell referencing excluded won’t run (and will display its previous value). However, if you explicit set the element’s value to null, then downstream cells will run immediately.

A similar technique is used here:

4 Likes
14

Wonderful. It worked perfectly and helped enlighten me about Observable data flow. Thank you very much.
David

15

Glad you got this to work - I have no idea where I would even put the code snippet mentioned above. Could you share a little more about your solution and perhaps show wherer had now you used this code snippet?

16

This did not work for me - it prints the cells in the list but does not display the main graph.

17

Never mind - user error :frowning: - this did work - thanks for the help!

1 Like
18

I don’t know whether I miss something. And I don’t understand the above answers too. But I found main.variable().define simply solved my problem, i.e. don’t pass observe() to variable() function

1 Like
19

@qcgm1978 Perfect! Your answer also worked for me!

Thanks for sharing