Cell connection-focused view

I’m interested in having a way of quickly viewing together the set of cells that are connected (through normal dataflow or through mutation) to the cell that is currently being edited.

In other words, if I am working on cell C, and C depends on or reads from A and B, and D and E depend on or are written to by C, I would like a button or option that lets me see just A, B, C, D, and E (ideally in that order, ideally with extra iconic/graphical indications about the dataflow and mutation).

I imagine this being presented as a clickable-unclickable icon on C like the arrow that unfolds the cell’s code view. Clicking once would enter the focused view, and clicking again would leave it. Clicking on another cell’s focus button while focused would switch focus to the other cell.

(Relatedly, if I am searching for a string, I would like a filter to see just the cells that match my string, in their entirety. Dynalist’s search function does this.)

2 Likes

It’s not quite what you wanted, since it doesn’t narrow down the cells visible, but that kind of linkage information is available in the minimap. Does that help?

Thanks for the suggestion, I do like the minimap! I was kind of hoping for something where I can edit related cells together, since it’s frequently the case that I want to see how something is defined when I’m using it. In the past, I’ve solved this by dragging cells around in the notebook while I’m using them, but it’s very clunky and things have to be put back in presentation order.

I can get behind an argument that in a perfect world, the cell order when editing should somehow be the same as the order when presenting, but cells take up vertical space in the current interface, so it’s a common pattern to put library/driver-type code out of the way at the end of the notebook. Sometimes I’ll open a separate window to work on both simultaneously, but it would be really nice to have the interface do it for me since the dependency information is right there.

I doubt most users feel this need acutely, though. It only becomes a significant pain point when you’re working on larger or more complex notebooks.

I guess a more general way of addressing the issue would be for Observable to expose its awareness of the notebook’s dependency graph as an API that something like a browser extension could take advantage of to customize presentation. I guess it’s already possible to hack something together that would do this filtering, but it would be a hack.

yeah i’ve been thinking about this too!! like “focus selected cells”, using the existing cell selection feature. so you could select any subset of cells you wanna see, click a button, and see only those till you exit the mode. also useful for looking at a chart and just one helper function that affects it, or for multiple people to work together in a notebook and only look at the pieces they personally care about that moment, etc. to achieve what you specifically asked for, you’d select connected cells and then enter the focus mode.

you can select cells from the cell toolbar, or by pressing Esc and then x while editing a cell, or by command-clicking to the left of a cell:

and i recently added a shortcut to select connected cells with shift-left and shift-right:

just missing that crucial third step lol :sweat_smile:

2 Likes

Cool!! I’ve wanted this for a while, that’s great to hear I’m not alone.

Select up/downstream dependencies and move group is honestly not a terrible workaround for now (for notebooks that aren’t presentation-focused), but filtering to selected definitely seems ideal. I’m working on a project now around figuring out ways to make a reactive notebook/reactive dataflow easier to “walk up and use” for novices, and I think showing a cell in its dataflow “neighborhood” will help.

As a side note, I almost never use the cell selection mode mainly because I forget the keybindings and totally overlooked the check button that appears at the bottom of input boxes. Maybe a more recognizable icon would be a checkbox rather than a check? (It could also just be because I learned on an earlier version of the system and don’t really use those buttons. For a while I’ve really wished Observable supported more functions that act like node manipulations in nested list-making apps like Dynalist/Workflowy, e.g. select and drag across cells to start multi-select, dragging a cell during multi-select moves the group, but maybe there are reasons that can’t be supported.)