🏠 back to Observable

not obvious how to show a cell's formula


When using a spreadsheet, clicking on a cell shows its formula (if it has one). In observablehq, clicking on a variable name or its value does nothing, and you have to click the left margin.

I’m no UI expert, but this seems less discoverable? I posted an observablehq page to a reddit forum and they asked how things are calculated. I don’t know what they tried or what problem they were really having, though.

1 Like


At the moment, there are two cell source-related hints given to Observable visitors:

First, new users are shown a prominent banner at the top of the page which reads:

:wave: Welcome. This is live code! Click the left margin to view or edit.

However, this banner is not displayed on my phone if I hold it in the vertical orientation. That might be one easy-to-address issue.

Second, hovering your mouse pointer over a cell causes the menu button (three vertical dots) to appear in the left margin, and this has a menu item that says “Edit”. (The left margin also has a tooltip which reads “Edit cell”). On my phone, the three dots are always displayed to the left. They might thus be less inviting to curious clicks from new visitors on mobile, but I’m too far removed from the new user experience to say.

This isn’t always true: if the cell outputs an array or javascript object, then clicking on the cell name or value “expands” that array or object.

However, adjusting the way the inspector displays non-HTML-element values in some other way to make the source more accessible could be interesting. It’s always possible, of course, to customize how a value is displayed by wrapping it in a “static view”.

One simple thing you can do as a notebook author to help your readers find the calculations is to “pin” the source of selected cells of interest by clicking the little pushpin icon in the left margin. (I guess you can also write some text that mentions clicking on the left margin).

1 Like


Yeah, pinning open the interesting calculations makes sense. It adds clutter, though.

Another thing is that “Edit” doesn’t seem like that the right label for that menu item. (What if you don’t want to edit?) Perhaps"Show Formula" would be better.

It still seems like clicking a number should show more info about it, even if this doesn’t work for more complicated output.