feat(observe): ExecutionDetail with tree view, headers, and resizable drawer#6325
feat(observe): ExecutionDetail with tree view, headers, and resizable drawer#6325jocelynlin-wd wants to merge 7 commits intomainfrom
Conversation
… drawer
## Summary
Ports the legacy `ExecutionDetails.jsx` (~984 lines) into the `@flowiseai/observe` SDK as a composable `ExecutionDetail` orchestrator.
- **`ExecutionDetail`**: split-pane (sidebar tree + node detail) with sidebar header that holds the agentflow chip, Copy-ID chip, formatted updated date, and refresh button. Auto-selects the first STOPPED node (or first top-level otherwise) on initial tree build.
- **`ExecutionTreeSidebar`**: `@mui/x-tree-view` `RichTreeView` with a custom `TreeItem2` slot — per-branch border colored from `AGENTFLOW_ICONS`, status-icon variants on each row, virtual `Iteration #N` containers, controlled expand/collapse defaulting to all-expanded.
- **`useExecutionTree`** rewritten to mirror the legacy three-pass `buildTreeData`: `previousNodeIds` parent→child with most-recent disambiguation, iteration grouping under the latest parent instance, sub-tree linking inside virtual containers, iterations-first sibling sort, and recursive `FLOWISE_CREDENTIAL_ID` scrub. Iteration container status is the legacy `ERROR > INPROGRESS > all-FINISHED > UNKNOWN` rollup.
- **`useDrawerWidths`** + `useResizableSidebar({ inverted })` extension drive a resizable `ExecutionsViewer` Drawer (parity with the legacy left-edge drag handle). Adds a public `ExecutionsViewerProps.drawer?: { defaultWidth?, minWidth?, maxWidth? }` override.
- **`AGENTFLOW_ICONS`** lifted from `atoms/NodeIcon.tsx` to `core/primitives/agentflowIcons.ts` so the tree slot can consume it without re-importing through `atoms`.
- **`ExecutionDetailProps.agentflow?: AgentflowRef`** seeds the header chip while the detail endpoint loads (server-side `getExecutionById` doesn't perform the agentflow join — only `getAllExecutions` does).
- Adds `@mui/x-tree-view` as a runtime dep.
## Test plan
- [x] `pnpm -C packages/observe test:coverage` — 331 tests pass, all `coverageThreshold` entries met (85.37% statements / 82.98% branches overall; `useExecutionTree` 96.5% / 85.18%, new `useDrawerWidths` 100% / 90.9%, `ExecutionDetail` 89.18% / 92.5%).
- [x] Manually verify in `packages/observe/examples` (`pnpm dev` after copying `.env.example` to `.env`):
- List → row click opens the resizable Drawer; left-edge handle widens/narrows.
- Tree shows status icons for each row plus rolled-up status on virtual iteration containers; `IconLoader` spins for INPROGRESS rows.
- Agentflow chip is clickable and opens the canvas in a new tab when `VITE_AGENTFLOW_CANVAS_URL` is set; non-clickable otherwise.
- Copy-ID chip flips inline to `Copied!` for 2s. **Behavior change from legacy**: legacy dispatched a Redux/notistack snackbar toast ("ID copied to clipboard") via the host app; the SDK can't assume a snackbar provider exists, so the confirmation is rendered on the chip itself.
- Refresh button re-fetches; date formatted as `MMM d, yyyy h:mm a`.
- Standalone `<ExecutionDetail>` demo by execution id renders the same surface without the list.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces significant enhancements to the observability SDK, including a new ExecutionTreeSidebar component using @mui/x-tree-view, improved tree-building logic in useExecutionTree to support iteration grouping and previous-node parenting, and a resizable drawer for execution details. I have identified several areas for improvement: the ExecutionDetail component needs a unique key in the ExecutionsViewer to prevent state leakage between executions, the 'copied' state reset logic in ExecutionDetail should be moved to a useEffect for safety, the O(N^2) complexity in useExecutionTree should be optimized, and the tree indexing in ExecutionTreeSidebar should be memoized.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request enhances the observability module by introducing a resizable execution detail drawer and a hierarchical tree sidebar utilizing @mui/x-tree-view. The core tree-building logic was refactored to support complex parenting and iteration grouping, and client-side credential redaction was added. Feedback identifies a logic error in the drawer width calculation that could lead to minWidth exceeding maxWidth on small viewports, with a specific suggestion to constrain the minimum width by the maximum width.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request significantly refactors the observability features, introducing a more robust execution tree building logic based on previousNodeIds and iteration grouping. It migrates the sidebar to MUI's RichTreeView, adds resizable panels for both the sidebar and the detail drawer, and improves the UI with better status indicators, date formatting, and navigation chips. Feedback was provided to ensure the 'Copied!' state is only triggered upon a successful clipboard operation and to implement proper user-facing error handling for such failures.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
j-sanaa
left a comment
j-sanaa
left a comment
There was a problem hiding this comment.
Tested the changes and everything looks good!
Not sure if Iteration Node is a part of the scope of these changes but the outputs of the child nodes are not being displayed
Iteration metadata (parentNodeId/iterationIndex) is nested under `data` in the runtime payload per IAgentflowExecutedData; the SDK was reading from the top level so virtual Iteration #N containers never materialized and iteration children dangled at root. Same shape fix applies to humanInputAgentflow detection in useNodeData. Iteration parent input now shows "No data" matching legacy's `data.input.question || '*No data*'` fallback, and virtual Iteration #N containers are selectable with empty Input/Output panels. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Thanks for catching this. Should be fixed now Screen.Recording.2026-05-01.at.5.20.41.PM.mov |
2 participants
Summary
Ports the legacy
ExecutionDetails.jsx(~984 lines) into the@flowiseai/observeSDK as a composableExecutionDetailorchestrator.ExecutionDetail: split-pane (sidebar tree + node detail) with sidebar header that holds the agentflow chip, Copy-ID chip, formatted updated date, and refresh button. Auto-selects the first STOPPED node (or first top-level otherwise) on initial tree build.ExecutionTreeSidebar:@mui/x-tree-viewRichTreeViewwith a customTreeItem2slot — per-branch border colored fromAGENTFLOW_ICONS, status-icon variants on each row, virtualIteration #Ncontainers, controlled expand/collapse defaulting to all-expanded.useExecutionTreerewritten to mirror the legacy three-passbuildTreeData:previousNodeIdsparent→child with most-recent disambiguation, iteration grouping under the latest parent instance, sub-tree linking inside virtual containers, iterations-first sibling sort, and recursiveFLOWISE_CREDENTIAL_IDscrub. Iteration container status is the legacyERROR > INPROGRESS > all-FINISHED > UNKNOWNrollup.useDrawerWidths+useResizableSidebar({ inverted })extension drive a resizableExecutionsViewerDrawer (parity with the legacy left-edge drag handle). Adds a publicExecutionsViewerProps.drawer?: { defaultWidth?, minWidth?, maxWidth? }override.AGENTFLOW_ICONSlifted fromatoms/NodeIcon.tsxtocore/primitives/agentflowIcons.tsso the tree slot can consume it without re-importing throughatoms.ExecutionDetailProps.agentflow?: AgentflowRefseeds the header chip while the detail endpoint loads (server-sidegetExecutionByIddoesn't perform the agentflow join — onlygetAllExecutionsdoes).@mui/x-tree-viewas a runtime dep.Test plan
pnpm -C packages/observe test:coverage— 331 tests pass, allcoverageThresholdentries met (85.37% statements / 82.98% branches overall;useExecutionTree96.5% / 85.18%, newuseDrawerWidths100% / 90.9%,ExecutionDetail89.18% / 92.5%).packages/observe/examples(pnpm devafter copying.env.exampleto.env):IconLoaderspins for INPROGRESS rows.VITE_AGENTFLOW_CANVAS_URLis set; non-clickable otherwise.Copied!for 2s. Behavior change from legacy: legacy dispatched a Redux/notistack snackbar toast ("ID copied to clipboard") via the host app; the SDK can't assume a snackbar provider exists, so the confirmation is rendered on the chip itself.MMM d, yyyy h:mm a.<ExecutionDetail>demo by execution id renders the same surface without the list.FLOWISE-576
Demo
execution-detail-demo1-clickable-agentflow.mov
execution-detail-demo2-non-clickable-agentflow.mov