Export + SQL Cells

Feedback
1

When exporting a notebook that contains a SQL Cell for embedding in a website, the SQL Cell does not render correctly (it just displays the result of the query).

For example, compare: SQL cells / Observable / Observable (observablehq.com)

With:

1 Like
2

Also mentioned in Improve SQL Cell table view ¡ Issue #308 ¡ observablehq/feedback ¡ GitHub

1 Like
3

I totally agree this is surprising / confusing; we’re thinking about it. I can at least give you a little background and context.

An Observable notebook is made up of two windows, overlaid on each other, as described in Observable’s Security Model / Observable / Observable — the editor, and the sandbox:

image
image5672×2112 489 KB

Historically these two windows have sorta corresponded to “input” (the editor) and “output” (the sandbox). The editor is where you write code; the sandbox displays the results, whether that’s a JavaScript object inspector or a DOM node, such a visualization or table. To produce a table, even in our official notebooks, we have to write code in the editor; you can hide the code, but it’s still there.

The sandbox runs only on your own computer; if two people are looking at the same notebook, they can see each other’s cursors in the editor, but each of them have their own personal private state in the sandbox. If one slides a slider, it doesn’t slide for the other. We have lots of “Inputs” components, but their state lives only in the “output” of the code, and there’s no (official) way to propagate it or persist it right now.

The SQL cell is different in that both the SQL code and the table of results (“input” and “output”) live entirely in the “editor” window (historically restricted to “input”). In this sense the SQL cell’s results table is “privileged”, and more of a black box than other tables and visualizations you see on Observable. You don’t see all of the code that creates the table. That allows the notebook to hide some implementation details and synchronize some state. It’s a trade-off, but I think improving the SQL experience on Observable is gonna require some of that, because SQL lends itself to more server intermediation than client-side web programming.

Anyway, bringing it back to export / embedding…!!

You can download any notebook as a standalone module, which produces the same output (sandbox) results as you see on observablehq.com. But you don’t get the whole Observable UI as part of that. Notably, exported / embedded notebooks don’t show the cell editors. That makes sense in contexts where you’re building something where the output is the main story. But some notebooks encourage readers to fiddle with the editors (whether it’s a programming tutorial or a data analysis or a graphics demo), and you can’t really get that experience embedded right now.

Since the SQL cell’s results table is part of the editor, it also doesn’t appear in exported / embedded notebooks. But that’s definitely confusing and we gotta revisit it at some point, at least in the Iframe embeds. We also wanna clarify this editor / sandbox thing in the aesthetics and design of the SQL cell; you shouldn’t have to read a whole blog post to intuit its nature.

Thanks for raising a pretty profound question!! :pray:

5 Likes
4

I see this has been marked as resolved here: Embedding of Data Table or SQL cells ¡ Issue #468 ¡ observablehq/feedback (github.com) is there an ETA for when it will be live on the site?