feat(frontend): filter trace tree to key spans#4404
Open
mmabrouk wants to merge 1 commit into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
size:L
📝 WalkthroughSummary by CodeRabbit
WalkthroughThis PR implements key-span visibility filtering for trace trees. Users can toggle between viewing all spans or only "key" spans (defined by type, name pattern, or error status) via a new settings option. The feature adds filtering logic, updates the settings state type, refines the settings UI, integrates filtering into the tree display with a hidden-count banner, and adjusts wrapper component layouts. ChangesKey Spans Visibility Filtering
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/oss/src/components/SharedDrawers/SessionDrawer/components/SessionTree/index.tsx (1)
15-15: ⚡ Quick winUse
@/oss/*alias for the shared settings type import.Line 15 uses a deep relative import across modules; switch this to the alias path to keep imports stable and consistent.
Suggested change
-import {TraceTreeSettingsState} from "../../../TraceDrawer/components/TraceTreeSettings/types" +import {TraceTreeSettingsState} from "`@/oss/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/types`"As per coding guidelines, "Use
@/oss/*path alias for shared utilities, helpers, types, hooks, and state that work the same in both EE and OSS" and "Never use relative paths for cross-package imports; use explicit path aliases instead".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 733d8054-aa87-4867-9b61-82a659bd931c
📒 Files selected for processing (7)
web/oss/src/components/SharedDrawers/SessionDrawer/components/SessionTree/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceDrawerContent.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTree/assets/spanVisibility.tsweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTree/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/types.ts
Contributor
Railway Preview Environment
|
Collapse the trace tree to the spans that carry signal (LLM, tool, agent, retrieval, output parsers, and errors) and hide structural wrappers such as RunnableSequence and RunnableLambda. Key spans is the default view, with an "All spans" option in the tree settings popover and a notice showing how many spans were hidden. The filter rules live in spanVisibility.ts as editable span-type and name-pattern definitions, so the definition of a key span can change without touching the traversal logic. Also fixes a pre-existing layout bug where the trace drawer splitter dividers stopped short of the bottom on tall screens.
mmabrouk
force-pushed
the
feat/trace-key-spans-filter
branch
from
f452eff to
414deb6
Compare
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTree/index.tsx (1)
34-34: ⚡ Quick winType the settings parameter.
The
settingsparameter is typed asany. UseTraceTreeSettingsStatefor type safety (already imported on line 28).🔧 Suggested fix
-export const TreeContent = ({value, settings}: {value: TraceSpanNode; settings: any}) => { +export const TreeContent = ({value, settings}: {value: TraceSpanNode; settings: TraceTreeSettingsState}) => {
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d59f909c-0e68-431f-835d-704ed4bf5216
📒 Files selected for processing (7)
web/oss/src/components/SharedDrawers/SessionDrawer/components/SessionTree/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceContent/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceDrawerContent.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTree/assets/spanVisibility.tsweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTree/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/index.tsxweb/oss/src/components/SharedDrawers/TraceDrawer/components/TraceTreeSettings/types.ts
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Trace trees from agent frameworks (LangChain, n8n, and similar) are full of structural wrapper spans (RunnableSequence, RunnableMap, RunnableLambda, ChatPromptTemplate) that bury the spans you actually care about. This adds a visibility filter to the trace drawer that collapses the tree down to its key spans, the same idea as LangSmith's "Most relevant" view.
Key spans is now the default. A span counts as key when it does real work (LLM, chat, agent, tool, or retrieval), when its name marks it as meaningful (output parsers), or when it ended in an error. The root span is always kept. Wrapper ancestors are removed and the key spans they contained are promoted up to the nearest kept ancestor, so a noisy
root -> RunnableSequence -> ChatOpenAIcollapses toroot -> ChatOpenAI.The settings popover (the existing cog in the tree toolbar) gains a "Visibility" section with "All spans" and "Key spans". When key spans hides something, a notice appears right after the tree: "N spans hidden by key spans" with a "Show all" shortcut.
How the filter is defined
The point of this design is that the definition of a key span will change over time, so the rules live in one place and are easy to edit. See
TraceTree/assets/spanVisibility.ts:KEY_SPAN_TYPES: the span categories treated as real work.KEY_SPAN_NAME_PATTERNS: name patterns that rescue a meaningful span whose type is a generic wrapper (output parsers report aschain).keySpanRules: an array of{id, description, test}predicates. A span is key if any rule matches. Add or remove a rule without touching the traversal.filterKeySpansdoes the pruning and returns the new tree plus a hidden count. It never mutates the input.Also in this PR
Two pre-existing layout bugs in the trace drawer are fixed. The splitter dividers (left tree pane and right side panel) stopped short of the bottom on tall screens because of hardcoded
h-[calc(100%-48px)]andh-[87vh]heights and a Spin wrapper that did not fill its container. They now use flexbox height (flex-1 min-h-0).Notes
TraceTreeSettingsis shared with the session drawer tree. The visibility section is gated behind ashowVisibilityprop, so sessions are unaffected.CustomTreeComponentremains (a kept span that is the last sibling and has kept children can show a short trailing line). It predates this PR and is out of scope. Happy to fix it separately.Test plan
CleanShot.2026-05-22.at.18.19.02.mp4