🏠 back to Observable

Could expanded views of inspected arrays remember their visible length?

Right now, if I have a cell which returns a long array, the viewable output of the cell can be expanded, similar to the inspector in the browser debugger. By default, an expanded array shows up to 20 items, and then if there are more, shows a little “more” link, to see more values, which can be repeatedly clicked to keep showing 20 more items at a time.

Unfortunately, if any of the cell’s dependencies change and it is recalculated, it reverts to showing only 20 items. (It does at least stay expanded.)

I would appreciate it if the view could remember that it had e.g. 50 items showing, so that I could view the changing content of later items in the array in response to changes in the notebook, e.g. while animating or handling user interaction.

The workaround is to use a custom view, but that’s kind of a pain.

Here’s a gratuitous picture of an expanded array for anyone who isn’t sure what I’m talking about:

3 Likes

Yes, making the inspector sticky is on our list! Currently it’s only smart enough to remember whether the top-level value is expanded or collapsed, but ideally that should apply to the entire object tree, and it should include “more” expansion as well.

2 Likes

Yes, this is still very much desired.

I tried a workaround like
html
${json.show()}
`
but that doesn’t actually print my nested object data… but instead this:

Have you considered something like this?

JSON.stringify(json, null, 2)

Wouldn’t that also require a “… less” action then? Or would collapsing the array revert the output to the initial shortened length?