feat: add toggle to hide reusable functions from dependency graph#8228
Conversation
Add a "Hide reusable functions" checkbox to the dependency graph settings panel, following the same pattern as the existing "Hide pure markdown" toggle. Cells whose code starts with `def ` (i.e., @app.function cells) can now be hidden from the graph to reduce visual complexity. Closes marimo-team#5007
for more information, see https://pre-commit.ci
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…lass Use a regex to match `def `, `async def `, and `class ` at the start of cell code, covering all reusable definition types.
| if (hasEdge || !isMarkdown) { | ||
| nodes.push(this.createNode(cellId, cellAtom)); | ||
| const isMarkdown = code.startsWith("mo.md"); | ||
| const isReusableFunction = /^(async\s+def|def|class)\s/.test(code); |
There was a problem hiding this comment.
there is better indicators to go off of to check if its re-usable. we can check the serialization from the cellRuntime.
i think we can check cellRuntime.serialization.toLowercase() === "valid"
Replace regex-based detection with cellRuntime.serialization check as suggested by maintainer. A cell is considered reusable when its serialization status is "valid", which is more reliable than pattern matching on the code text.
|
good call, switched to checking `cellRuntime.serialization?.toLowerCase() === "valid"` instead of the regex. much more reliable. |
for more information, see https://pre-commit.ci
|
great addition, thank you @AhmadYasser1 ! |
There was a problem hiding this comment.
Pull request overview
Adds a new dependency-graph setting to optionally hide “reusable” definition cells (based on the existing “Hide pure markdown” pattern) to reduce graph clutter and improve readability.
Changes:
- Extends
GraphSettingswithhideReusableFunctionsand wires it through the dependency graph components. - Adds a new checkbox to the dependency graph settings popover.
- Updates the tree elements builder to filter out reusable-definition cells (when enabled) that have no edges.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/dependency-graph/types.ts | Extends GraphSettings with hideReusableFunctions. |
| frontend/src/components/dependency-graph/panels.tsx | Adds “Hide reusable functions” checkbox to the settings panel UI. |
| frontend/src/components/dependency-graph/elements.ts | Implements filtering logic for markdown-only and reusable-definition cells without edges. |
| frontend/src/components/dependency-graph/dependency-graph.tsx | Initializes the new setting with a default value. |
| frontend/src/components/dependency-graph/dependency-graph-tree.tsx | Threads the new setting into element creation and effect dependencies. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const isMarkdown = code.startsWith("mo.md"); | ||
| const runtime = cellRuntime[cellId]; | ||
| const isReusable = runtime?.serialization?.toLowerCase() === "valid"; | ||
|
|
There was a problem hiding this comment.
isReusable is inferred from cellRuntime.serialization === "valid", but serialization hints are only broadcast in the post-execution hook (render_toplevel_defs). This means the new setting won’t hide reusable-definition cells until after they’ve been executed at least once, and it also diverges from the PR description (“code starts with def ”). Consider deriving the filter from the cell’s source code (e.g., first top-level def/class) or otherwise ensuring the reusable-ness signal is available without relying on post-execution runtime state.
| useEffect(() => { | ||
| syncChanges( | ||
| elementsBuilder.createElements( | ||
| cellIds, | ||
| cellAtoms, | ||
| variables, | ||
| settings.hidePureMarkdown, | ||
| settings.hideReusableFunctions, | ||
| ), | ||
| ); | ||
| }, [cellIds, variables, cellAtoms, syncChanges, settings.hidePureMarkdown]); | ||
| }, [ | ||
| cellIds, | ||
| variables, | ||
| cellAtoms, | ||
| syncChanges, | ||
| settings.hidePureMarkdown, | ||
| settings.hideReusableFunctions, | ||
| ]); |
There was a problem hiding this comment.
TreeElementsBuilder.createElements now depends on cellRuntime (via getNotebook()), but this component doesn’t subscribe to runtime changes. As a result, when a cell’s serialization hint updates (e.g., after executing a cell), the graph won’t recompute/filter nodes unless some other dependency changes. Consider wiring cellsRuntimeAtom (or equivalent) into the dependency graph component tree and including it as an input to createElements / effect deps so the graph stays in sync.
| } | ||
| /> | ||
| <Label htmlFor={functionsCheckboxId}> | ||
| Hide reusable functions |
There was a problem hiding this comment.
The UI label and setting name say “Hide reusable functions”, but the underlying signal (serialization === "Valid") is used for both reusable functions and reusable classes (the editor tooltip explicitly says “function or class”). Consider renaming the setting/label to “Hide reusable definitions” (or similar) to match the actual behavior and avoid confusing users.
| Hide reusable functions | |
| Hide reusable definitions |
There was a problem hiding this comment.
this is ok to ignore as well
Summary
Adds a
Hide reusable functionscheckbox to the dependency graph settings panel, following the existingHide pure markdownpattern. When enabled, cells whose code starts withdef(reusable function cells) without edges are hidden from the graph.Closes #5007
Test Plan
hidePureMarkdownpattern