Add reactive notebook minimap for navigating and visualizing dataflow #5707
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
manzt
commented
Jul 21, 2025
|
What do the dot sizes mean? (Some are big, some are small) |
manzt
commented
Jul 21, 2025
frontend/src/components/editor/chrome/wrapper/floating-minimap.tsx
Outdated
Show resolved
Hide resolved
I followed this description of the feature from the Observable docs as closely as I could: https://observablehq.com/documentation/debugging/minimap#connection-types 
small dot == independent, not in dependency tree. large dot == in dependency tree |
manzt
added
enhancement
This introduces a reactive notebook minimap (similar in spirit to Observable), but adapted marimo model where multiple variables can be declared across cells. It lists all cells in order and lets you click to focus any one. Selecting a cell highlights its upstream and downstream connections, making variable flow across the notebook easier to understand without jumping between cells manually.
The updated logic now correctly handles four distinct cases: variables used by the selected cell, variables declared by the selected cell, variables flowing through from ancestors, and variables in downstream cells that will be re-executed. This provides more precise visual feedback about which variables are actually affected by cell selection in the minimap.
The `focusCell` action previously used a boolean `before` parameter to determine whether to focus the cell before or after the current one. This change replaces the boolean with an explicit `mode` parameter that can be "before", "after", or "exact".
increase focus state to include currently focused and last focused
|
I'm happy where this is at. I added a launcher to the bottom. I'm wondering if a hot key for toggling (ctrl + shift + m) could be preferable to the command pallete. I was experimenting with it locally but we could add in a second PR. |
mscolnick
approved these changes
Jul 23, 2025
manzt
added
the
release-highlight
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces a reactive notebook minimap (similar in spirit to Observable), but adapted marimo where multiple variables can be declared across cells. Selecting a cell highlights its upstream and downstream connections, visualizing data flow through the notebook.
For now, it's rendered as a floating window for testing. The current goal is to refine the UX and determine its final placement in the UI. I'd like to avoid burying it in the left panel and instead possibly have a floating window triggered either by button or keyboard shortcut.
Some nuance with Observable's minimap: Since our cells can declare multiple variables, our dataflow tracing is asymmetric. For upstream variabes, we can trace granularly which variables used by the selected cell and find where they were declared. For downstream tracing, we coarsely mark all variables that are in a dependent cell as connected (since they are all dependents).
TODO:
Handle unselected state. Right now, the minimap always shows a focused cell. We should have a state for when nothing is focused.This state is handled, but never shows up becauselastFocusedCellis always defined. Would be nice to have some way to select/deselect items in the minimap. Wondering how it should play with command/edit modes.Fix click selection behavior. We're currently usingUpdatedactions.focusCell({ cellId, before: false }), which causes the next/previous cell to be focused depending on cell state. Instead, we want to focus exactly the clicked cell regardless of position.actions.focusCell({ cellId, mode: "before" | "after" | "exact" }).minimap.mp4