Visual Dataflow!

Chiming in on an old thread – I think the visual dataflow graph is immensely clever, and a big step in a good direction, but I don’t find myself using it all that much.

I suspect this is for a few reasons –

First, the minimap is trying to strike a balance between showing local dependency structure and maintaining a view of all the cells. I agree with j-pb in that I don’t think this is necessary – typically I either want to see either the local dependencies, or the entire graph for debugging.

Second, there is no context provided with the minimap — just the fact that a relationship exists. I think that showing a little summary of how a cell is used — maybe by just grabbing the line (truncated or not) where the cell is referenced — would help remind the notebook author about the relationship between the two cells, without jumping around the notebook.

Third, in agreement with tau, is that the minimap is small and off to the side, rather than local to each cell. If feels a little jarring to be editing a cell, move the cursor over to the minimap to see relationships, click to jump to another cell, make another edit, go back to the map, jump again, etc. I think that a local minimap should be as tightly integrated with each cell as possible.

My basic proposal would be something along these lines – having a minimap button, which expand a local dependency graph under the currently selected cell. This dependency graph would show some contextual information about how the current cell is being used.

This approach could be further refined — for example, maybe clicking a button to display the graph isn’t ideal, and instead you could have some subtle local minimap always visible with each cell. Maybe you don’t have a graph at all, and just a list of Dependencies and References, each with some transcluded context showing how the current cell is used.

Anyways, many thanks to the Observable team for your hard work – these notebooks are quickly becoming my first choice for an environment to think in.

11 Likes

This has been suggested in a Github issue:

4 Likes

Added to Next! Click through for my cute video…

A few notes

  • It’s in a sidebar pane you can turn on and off. “Always-on” had been one of the main design constraints of the original (since before we knew that “visual dataflow” was going to take the form of a minimap), but the way it turned out, and the way the Next sidebar turned out, this felt more natural. It gives us a little more breathing room, but I do miss being able to notice connections ambiently out of the corner of my eye; at some point I wanna explore making the sidebar icon dynamic…
  • Thanks to being in a sidebar pane, it scrolls normally instead of doing that wild parallax thing. :sweat_smile:
  • We always show little whiskers for which side cells have wires on, i.e., which have any inputs or any outputs. (Well, there are some edge case nuances I’m ironing out, but basically.) One of the issues with the original is that it was kinda useless (except as an esoteric table of contents!) until you focused a cell; now you get a global peek at which cells are all the way upstream, all the way downstream, or orphaned.
  • It’s available on small screens!! Finally!! Notebook menu → “View” → “Show minimap”.
  • It shows multiplayer presence, which is pretty fun for chasing coworkers around long notebooks.
  • It’s currently missing a couple things from the original. It doesn’t flash when cells re-evaluate; it was always tricky to make that performant, and I haven’t missed it much yet tbh. It doesn’t yet show +, –, ± icons in Compare mode, but I wanna get that back soon — I really need it!

Cheers, lemme know how it works :v:

9 Likes

Oh also:

You can now use Shift-Cmd-J to jump to the previously focused cell. E.g. if you use Cmd-J to jump to a cell definition, or if you click a cell in the minimap, you can do Shift-Cmd-J to get back to where you were working.

4 Likes

Fantastic update and it makes notebook navigation so much easier and the ability to return from a ctrl-j using shift-ctrl-j is wonderful.

2 Likes