feat: adds inspection panel to show node inputs #11263
Conversation
lucaseduoli
requested review from
edwinjosechittilappilly,
mfortman11 and
rodrigosnader
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes introduce an Inspection Panel feature to the Flow Page that displays configurable template fields for selected nodes. Additionally, visibility logic is refined in input field rendering components to include stricter guards for optional handles and input type requirements. Changes
Sequence DiagramsequenceDiagram
participant User
participant PageComponent
participant Store
participant InspectionPanel
participant InspectionPanelFields
participant InspectionPanelField
User->>PageComponent: Select node (genericNode)
PageComponent->>Store: Retrieve selectedNode
Store-->>PageComponent: Return selectedNode
PageComponent->>InspectionPanel: Render with selectedNode & isVisible
activate InspectionPanel
InspectionPanel->>InspectionPanelHeader: Render header with node info
InspectionPanel->>InspectionPanelFields: Render fields with template data
activate InspectionPanelFields
InspectionPanelFields->>InspectionPanelFields: Filter & sort template fields
InspectionPanelFields->>InspectionPanelField: Render field for each template item
activate InspectionPanelField
InspectionPanelField->>Store: Fetch auth & flow context
InspectionPanelField->>InspectionPanelField: Render parameter component with metadata
deactivate InspectionPanelField
deactivate InspectionPanelFields
deactivate InspectionPanel
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 3 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches🧪 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 |
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is ❌ Your patch check has failed because the patch coverage (0.57%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #11263 +/- ##
==========================================
- Coverage 34.03% 33.95% -0.09%
==========================================
Files 1407 1411 +4
Lines 66661 66833 +172
Branches 9839 9903 +64
==========================================
+ Hits 22689 22692 +3
- Misses 42787 42956 +169
Partials 1185 1185
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx (1)
99-118: Fix “empty input_types” handling — current logic can hide both handle and input (non-editable field).Right now
!optionalHandleis used to decide whether to renderCustomParameterComponent(Line 230), but an empty array ([]) is truthy, so fields withinput_types: []will hide the input. Meanwhile,displayHandlemay also be false (e.g., ModelInput with emptyinput_types, or other conditions), leaving the row with no handle and no editor.Also, mutating
optionalHandleinsideuseEffect(Line 99-103) won’t fix this reliably and is an anti-pattern for props.Proposed fix
@@ - useEffect(() => { - if (optionalHandle && optionalHandle.length === 0) { - optionalHandle = null; - } - }, [optionalHandle]); + const hasHandle = + Array.isArray(optionalHandle) && optionalHandle.length > 0; @@ const hasInputTypes = - optionalHandle && - Array.isArray(optionalHandle) && - optionalHandle.length > 0; + hasHandle; @@ const displayHandle = (!LANGFLOW_SUPPORTED_TYPES.has(type ?? "") || - (optionalHandle && optionalHandle.length > 0)) && + hasHandle) && !isToolMode && (!hasRefreshButton || isModelInput) && (!isModelInput || hasInputTypes); // Hide handle for ModelInput when input_types is empty @@ - {!optionalHandle && data.node?.template[name] !== undefined && ( + {!hasHandle && data.node?.template[name] !== undefined && ( <CustomParameterComponent handleOnNewValue={handleOnNewValue} name={name} nodeId={data.id} inputId={id} templateData={data.node?.template[name]!} templateValue={data.node?.template[name].value ?? ""} editNode={false} handleNodeClass={handleNodeClass} nodeClass={data.node!} placeholder={ isToolMode ? DEFAULT_TOOLSET_PLACEHOLDER : data.node?.template[name].placeholder } isToolMode={isToolMode} nodeInformationMetadata={nodeInformationMetadata} proxy={proxy} /> )}Also applies to: 229-250
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx (1)
748-777: Avoid unsafe cast:nodes.find(...) as AllNodeTypecan yieldundefined(and hides real bugs).This is a small correctness/maintainability improvement: compute
selectedNodeasAllNodeType | nullwithout casting.Proposed fix
@@ const selectedNodeId = showInspectionPanel ? lastSelection.nodes[0].id : null; - const selectedNode = selectedNodeId - ? (nodes.find((n) => n.id === selectedNodeId) as AllNodeType) - : null; + const selectedNode: AllNodeType | null = selectedNodeId + ? (nodes.find((n) => n.id === selectedNodeId) ?? null) + : null;
🤖 Fix all issues with AI agents
In
@src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx:
- Around line 35-50: The current visibility filter returns true for any template
with input_types, but that can produce a blank row when NodeInputField hides its
editor due to optionalHandle and also hides the handle when refresh_button is
true on non-model inputs; update the check in the renderer (the hasHandle logic
around template.input_types) to first use Array.isArray(template.input_types) &&
template.input_types.length > 0 and then exclude templates where
template.refresh_button === true && template.type !== "model" (or otherwise
ensure such templates render a visible editor/handle); locate the template
checks in this function and adjust the boolean logic so fields that would end up
with neither editor nor handle are filtered out (or alternatively, ensure
NodeInputField/optionalHandle logic is changed to prevent blank rows
consistently).
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx:
- Around line 71-80: The useMemo for nodeInformationMetadata is missing
dependencies and can produce stale values; update the dependency array of the
useMemo that defines nodeInformationMetadata to include currentFlowId,
currentFlowName, and data?.type in addition to the existing shouldDisplayApiKey
and name (and optionally keep data?.node?.id if you still need it) so the memo
recalculates when currentFlowId, currentFlowName, or data.type change.
- Around line 94-101: The name matching is too broad: replace the substring
check `name.includes("code")` with a precise check so unrelated fields like
"encode" aren't hidden; update the condition in InspectionPanelField.tsx so the
hidden branch only triggers for an explicit code field (e.g., keep `(name ===
"code" && type === "code")` and change the proxy case to check the proxy's
declared field like `proxy?.field === "code"` or `proxy && proxy.field ===
"code"`) so only actual proxy fields that target "code" hide the element.
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx:
- Line 81: Remove the stray comment line containing "Made with Bob" from the
InspectionPanelFields.tsx file: locate the comment in the InspectionPanelFields
component (or nearby top-level file header) and delete that line so no stray
comment remains; then run the project's lint/format step to ensure no trailing
whitespace or formatting issues.
- Around line 52-77: The render loop over allFields can crash if
data.node?.template[templateField] is undefined; modify the map in
InspectionPanelFields to guard against missing template entries by checking that
const template = data.node?.template?.[templateField] exists before returning an
<InspectionPanelField/>; if template is undefined, either skip rendering that
iteration (return null) or render a safe fallback with defaults, and ensure
getFieldTitle is only called when template is present; reference the map over
allFields, the template variable, getFieldTitle, and the InspectionPanelField
component when making the change.
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsx:
- Around line 60-91: The "View Code" icon-only Button in InspectionPanelHeader
should include an accessible label: add an aria-label (e.g., aria-label="View
code") to the Button that currently calls handleOpenCode so screen readers can
identify it (the ShadTooltip is visual-only). Also remove the unnecessary
surrounding <div className="hidden"> that wraps CodeAreaModal (the modal
controls visibility via its open prop) and delete the stray comment "// Made
with Bob" in this component; keep all existing props on CodeAreaModal
(setOpen={setOpenCodeModal}, open={openCodeModal}, setValue={handleSetValue},
nodeClass={data.node}, etc.) unchanged.
🧹 Nitpick comments (2)
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsx (1)
14-47: Panel component looks solid; remove stray comment and sanity-check layering/positioning.Memoization + animation composition looks fine (based on learnings re: avoiding unnecessary rerenders). Please remove the trailing “Made with Bob” comment.
If you’ve seen any overlap issues with menus/toolbars, consider verifying
Panelstacking context (z-index) in the Flow page layout.Also applies to: 53-53
src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx (1)
28-38: Ensurenameis never empty for this component (hook call depends on it).
name = ""+ unconditionaluseFetchDataOnMount(...)makes it easy to accidentally trigger fetch/update logic with an empty parameter id if this component is ever reused incorrectly. Consider makingnamerequired (no default) or adding an invariant at the call sites.Also applies to: 81-87
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsxsrc/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
🧰 Additional context used
📓 Path-based instructions (3)
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsxsrc/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsxsrc/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsxsrc/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsxsrc/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsxsrc/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsxsrc/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: ogabrielluiz
Repo: langflow-ai/langflow PR: 0
File: :0-0
Timestamp: 2025-06-26T19:43:18.260Z
Learning: In langflow custom components, the `module_name` parameter is now propagated through template building functions to add module metadata and code hashes to frontend nodes for better component tracking and debugging.
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Applied to files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/components/nodes/**/*.{tsx,jsx} : Memoize custom React Flow node components using memo() to prevent unnecessary re-renders
Applied to files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
Applied to files:
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsxsrc/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxsrc/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: React Flow should be used for flow graph visualization, with nodes and edges passed as props, and changes handled via onNodesChange and onEdgesChange callbacks.
Applied to files:
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
🧬 Code graph analysis (4)
src/frontend/src/pages/FlowPage/components/InspectionPanel/index.tsx (4)
src/frontend/src/types/flow/index.ts (1)
AllNodeType(42-42)src/frontend/src/utils/utils.ts (1)
cn(38-40)src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsx (1)
InspectionPanelHeader(15-94)src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx (1)
InspectionPanelFields(12-79)
src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsx (3)
src/frontend/src/types/flow/index.ts (1)
NodeDataType(63-72)src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx (1)
NodeIcon(9-49)src/frontend/src/modals/codeAreaModal/index.tsx (1)
CodeAreaModal(34-292)
src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx (2)
src/frontend/src/types/flow/index.ts (1)
NodeDataType(63-72)src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx (1)
InspectionPanelField(28-189)
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx (1)
src/frontend/src/types/flow/index.ts (1)
AllNodeType(42-42)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (52)
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 37/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 46/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 44/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 25/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 30/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 40/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 50/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 47/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 45/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 38/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 41/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 33/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 39/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 43/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 42/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 36/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 31/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 29/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 49/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 34/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 48/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 35/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 32/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 15/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 28/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 27/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 20/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 18/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 16/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 19/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 14/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 26/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 17/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 12/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 21/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 23/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 13/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 24/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 22/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/50
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/50
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Test Starter Templates
🔇 Additional comments (1)
src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx (1)
12-43: Solid field list derivation + ordering logic.The
useMemo+ filter +sortToolModeFields(...)pipeline reads clean and matches the “show all fields in panel” objective.
| // Basic visibility check | ||
| if ( | ||
| !template?.show || | ||
| template?.advanced || | ||
| (template?.tool_mode && isToolMode) | ||
| ) { | ||
| return false; | ||
| } | ||
|
|
||
| // Only show fields that have handles (input_types) | ||
| const hasHandle = template.input_types && template.input_types.length > 0; | ||
| if (!hasHandle) { | ||
| return false; | ||
| } | ||
|
|
||
| return true; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's search for templates/definitions that have both refresh_button and input_types
rg -n "refresh_button|input_types" src/frontend/src --type tsx --type ts --type json -A 2 -B 2 | head -100Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Also search more broadly for template definitions and the NodeInputField component
fd -t f "NodeInputField|template" src/frontend/src --type tsx --type ts | head -20Repository: langflow-ai/langflow
Length of output: 234
🏁 Script executed:
# Look at the actual RenderInputParameters file to see the full context
wc -l src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsxRepository: langflow-ai/langflow
Length of output: 151
🏁 Script executed:
# Get the full file to understand the context better
cat -n src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx | head -80Repository: langflow-ai/langflow
Length of output: 2926
🏁 Script executed:
# Search for NodeInputField usage and displayHandle logic
rg -n "displayHandle|NodeInputField" src/frontend/src -A 3 -B 1 --type tsx --type ts | head -80Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Read the rest of the file to see how shownTemplateFields is used
cat -n src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx | tail -70Repository: langflow-ai/langflow
Length of output: 2549
🏁 Script executed:
# Find NodeInputField component
fd -name "NodeInputField*" src/frontend/srcRepository: langflow-ai/langflow
Length of output: 294
🏁 Script executed:
# Search for refresh_button and input_types (without file type filter)
rg -n "refresh_button" src/frontend/src -A 2 -B 2 | head -80Repository: langflow-ai/langflow
Length of output: 2664
🏁 Script executed:
# Find and read NodeInputField component
find src/frontend/src -name "NodeInputField*" -type fRepository: langflow-ai/langflow
Length of output: 46
🏁 Script executed:
# Read the NodeInputField component
cat -n src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx | head -150Repository: langflow-ai/langflow
Length of output: 5769
🏁 Script executed:
# Search for template definitions or examples with both refresh_button and input_types
rg -n "input_types" src/frontend/src -B 3 -A 3 | grep -E "(input_types|refresh_button)" | head -50Repository: langflow-ai/langflow
Length of output: 6099
🏁 Script executed:
# Read the rest of NodeInputField to see the full rendering logic
cat -n src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx | sed -n '140,200p'Repository: langflow-ai/langflow
Length of output: 2347
🏁 Script executed:
# Check if there are any template definitions/examples that show both refresh_button and input_types together
rg -l "refresh_button" src/frontend/src | head -10Repository: langflow-ai/langflow
Length of output: 404
🏁 Script executed:
# Search for any test data or mock templates with both properties
rg "refresh_button.*input_types|input_types.*refresh_button" src/frontend/src -B 5 -A 5Repository: langflow-ai/langflow
Length of output: 46
🏁 Script executed:
# Read more of NodeInputField to see what renders the actual editor/input
cat -n src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx | sed -n '200,280p'Repository: langflow-ai/langflow
Length of output: 2371
🏁 Script executed:
# Look for parameterRenderComponent usage within NodeInputField
rg -n "parameterRenderComponent\|ParameterRender" src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx -A 3 -B 3Repository: langflow-ai/langflow
Length of output: 46
🏁 Script executed:
# Check what LANGFLOW_SUPPORTED_TYPES contains
rg -n "LANGFLOW_SUPPORTED_TYPES" src/frontend/src/constants/constants.ts -A 10Repository: langflow-ai/langflow
Length of output: 268
🏁 Script executed:
# Check types to understand input_types structure better
cat -n src/frontend/src/types/api/index.ts | sed -n '35,95p'Repository: langflow-ai/langflow
Length of output: 1859
🏁 Script executed:
# Look for any model-type fields with refresh_button to understand the edge case
rg -n "refresh_button" src/frontend/src -B 5 -A 5 | grep -E "(type.*model|refresh_button|input_types)" | head -30Repository: langflow-ai/langflow
Length of output: 788
Address the "blank row" risk where fields have input_types + refresh_button but no visible editor or handle.
The filter passes any field with input_types, but NodeInputField hides its editor when optionalHandle is present (line 230). If such a field also has refresh_button: true and is not a model type, the condition (!hasRefreshButton || isModelInput) becomes false, hiding the handle as well. This leaves an empty row with neither editor nor connection point.
Verify that no field template combines refresh_button: true, non-empty input_types, and type ≠ "model", or if such fields exist, confirm this blank-row rendering is intentional.
Additionally, harden the input_types check to use Array.isArray() for defensive programming, matching the pattern already used elsewhere in NodeInputField (line 109):
Proposed change
- const hasHandle = template.input_types && template.input_types.length > 0;
+ const hasHandle =
+ Array.isArray(template.input_types) && template.input_types.length > 0;
if (!hasHandle) {
return false;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Basic visibility check | |
| if ( | |
| !template?.show || | |
| template?.advanced || | |
| (template?.tool_mode && isToolMode) | |
| ) { | |
| return false; | |
| } | |
| // Only show fields that have handles (input_types) | |
| const hasHandle = template.input_types && template.input_types.length > 0; | |
| if (!hasHandle) { | |
| return false; | |
| } | |
| return true; | |
| // Basic visibility check | |
| if ( | |
| !template?.show || | |
| template?.advanced || | |
| (template?.tool_mode && isToolMode) | |
| ) { | |
| return false; | |
| } | |
| // Only show fields that have handles (input_types) | |
| const hasHandle = | |
| Array.isArray(template.input_types) && template.input_types.length > 0; | |
| if (!hasHandle) { | |
| return false; | |
| } | |
| return true; |
🤖 Prompt for AI Agents
In
@src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx
around lines 35 - 50, The current visibility filter returns true for any
template with input_types, but that can produce a blank row when NodeInputField
hides its editor due to optionalHandle and also hides the handle when
refresh_button is true on non-model inputs; update the check in the renderer
(the hasHandle logic around template.input_types) to first use
Array.isArray(template.input_types) && template.input_types.length > 0 and then
exclude templates where template.refresh_button === true && template.type !==
"model" (or otherwise ensure such templates render a visible editor/handle);
locate the template checks in this function and adjust the boolean logic so
fields that would end up with neither editor nor handle are filtered out (or
alternatively, ensure NodeInputField/optionalHandle logic is changed to prevent
blank rows consistently).
| const nodeInformationMetadata = useMemo(() => { | ||
| return { | ||
| flowId: currentFlowId ?? "", | ||
| nodeType: data?.type?.toLowerCase() ?? "", | ||
| flowName: currentFlowName ?? "", | ||
| isAuth: shouldDisplayApiKey!, | ||
| variableName: name, | ||
| }; | ||
| }, [data?.node?.id, shouldDisplayApiKey, name]); | ||
|
|
There was a problem hiding this comment.
Fix useMemo deps to avoid stale nodeInformationMetadata.
nodeInformationMetadata uses currentFlowId, currentFlowName, and data.type, but they’re not in the dependency list, so metadata can silently go stale.
Proposed fix
const nodeInformationMetadata = useMemo(() => {
return {
flowId: currentFlowId ?? "",
nodeType: data?.type?.toLowerCase() ?? "",
flowName: currentFlowName ?? "",
isAuth: shouldDisplayApiKey!,
variableName: name,
};
- }, [data?.node?.id, shouldDisplayApiKey, name]);
+ }, [currentFlowId, currentFlowName, data?.type, shouldDisplayApiKey, name]);🤖 Prompt for AI Agents
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx
around lines 71 - 80, The useMemo for nodeInformationMetadata is missing
dependencies and can produce stale values; update the dependency array of the
useMemo that defines nodeInformationMetadata to include currentFlowId,
currentFlowName, and data?.type in addition to the existing shouldDisplayApiKey
and name (and optionally keep data?.node?.id if you still need it) so the memo
recalculates when currentFlowId, currentFlowName, or data.type change.
| <div | ||
| className={cn( | ||
| "relative flex min-h-10 w-full flex-wrap items-center justify-between px-3 py-1.5", | ||
| isToolMode && "bg-primary/10", | ||
| (name === "code" && type === "code") || (name.includes("code") && proxy) | ||
| ? "hidden" | ||
| : "", | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the file to understand the full context
cat -n "src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx" | head -120 | tail -40Repository: langflow-ai/langflow
Length of output: 1500
🏁 Script executed:
# Get more context around lines 94-101
wc -l "src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx"Repository: langflow-ai/langflow
Length of output: 162
🏁 Script executed:
# Read the entire file to understand the component structure
cat -n "src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx"Repository: langflow-ai/langflow
Length of output: 7409
🏁 Script executed:
# Search for where this component is used and what name values are passed
rg "InspectionPanelField" --type tsx -A 3 -B 1 | head -100Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Look for field names that might contain "code"
rg "name.*code|code.*name" --type tsx -i | head -50Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Search for InspectionPanelField usage with name parameters
rg "InspectionPanelField" -A 5 -B 2 | head -150Repository: langflow-ai/langflow
Length of output: 5862
🏁 Script executed:
# Search for field definitions that might contain "code" in their names
rg "name.*=.*code|code.*name" --type ts --type tsx -i -A 2 -B 2 | head -100Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Look for template fields that might be passed as name prop
rg "template\[.*code" --type ts --type tsx -A 2 -B 2 | head -50Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Search for what proxy fields might be and their naming patterns
rg "proxy" --type tsx -B 3 -A 3 "InspectionPanel" | head -80Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Find all usages of name.includes pattern in codebase
rg 'name\.includes.*code' --type ts --type tsxRepository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
# Look for InspectionPanelFields.tsx to see how fields are iterated
cat -n "src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx"Repository: langflow-ai/langflow
Length of output: 2970
🏁 Script executed:
# Search for name.includes pattern anywhere in the codebase
rg 'name\.includes' -A 2 -B 2 | head -80Repository: langflow-ai/langflow
Length of output: 5103
🏁 Script executed:
# Look for proxy-related field names in templates
rg '"code"' src/frontend --max-count 50 | grep -i nameRepository: langflow-ai/langflow
Length of output: 4997
🏁 Script executed:
# Search for field definitions/templates that contain "code" in various files
rg '"[^"]*code[^"]*":\s*{' -A 3 src/frontend --max-count 30Repository: langflow-ai/langflow
Length of output: 169
🏁 Script executed:
# Look for proxy field definitions with "code" in their names
rg 'proxy.*true' src/backend -A 2 -B 2 | grep -i code | head -50Repository: langflow-ai/langflow
Length of output: 50376
🏁 Script executed:
# Check NodeInputField to see if it has similar logic
cat -n "src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx" | grep -A 10 -B 10 'name.includes.*code'Repository: langflow-ai/langflow
Length of output: 772
🏁 Script executed:
# Search for proxy field definitions with any field names
rg '"proxy".*"field"' -A 2 -B 2 | head -80Repository: langflow-ai/langflow
Length of output: 50377
🏁 Script executed:
# Look for any fields that might be code-related with proxy
rg 'includes.*code|encode|decode' src/frontend --type ts -A 3 -B 3 | head -100Repository: langflow-ai/langflow
Length of output: 6939
🏁 Script executed:
# Check the actual backend to understand what fields exist
find src/backend -name "*.py" -type f | head -20 | xargs rg 'proxy.*=.*True' -A 2 -B 2 | head -80Repository: langflow-ai/langflow
Length of output: 46
🏁 Script executed:
# Search for actual proxy field patterns and names more carefully
rg '"field"\s*:\s*"[^"]*code' src/backend src/frontend -A 1 -B 1 | head -50Repository: langflow-ai/langflow
Length of output: 1330
🏁 Script executed:
# Check if there are any Python definitions of fields with "code" in name and proxy=True
find src/backend -name "*.py" -type f -exec grep -l "proxy.*True" {} \; | head -5 | xargs grep -B 5 -A 5 'name.*=.*' | grep -i codeRepository: langflow-ai/langflow
Length of output: 46
🏁 Script executed:
# Let's verify the filtering is indeed redundant by checking if any fields pass both filters
python3 << 'EOF'
# Simulate the logic from InspectionPanelFields
test_fields = [
("code", {"show": True, "type": "code"}),
("model_kwargs", {"show": True, "type": "code", "proxy": {"id": "x", "field": "y"}}),
("my_code_field", {"show": True, "type": "str", "proxy": {"id": "x", "field": "z"}}),
("code_handler", {"show": True, "type": "str", "proxy": {"id": "x", "field": "w"}}),
("llm", {"show": True, "type": "BaseLanguageModel", "proxy": {"id": "x", "field": "llm"}}),
]
print("Fields that would be filtered (redundantly hidden in InspectionPanelField):")
for field_name, template in test_fields:
if (field_name == "code" and template.get("type") == "code") or (field_name.includes("code") and template.get("proxy")):
print(f" - {field_name}: includes('code')={field_name.includes('code')}, proxy={bool(template.get('proxy'))}")
EOFRepository: langflow-ai/langflow
Length of output: 150
🏁 Script executed:
# Better approach - check actual field data from real flows
rg -A 15 '"template"\s*:' src/backend/tests/data/grouped_chat.json 2>/dev/null | grep -E '"name"|"type"|"proxy"' | head -40Repository: langflow-ai/langflow
Length of output: 20337
🏁 Script executed:
# Check if fields filtered in InspectionPanelFields ever reach InspectionPanelField
cat -n "src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx" | head -50Repository: langflow-ai/langflow
Length of output: 1946
Tighten the field name matching to avoid unintentionally hiding unrelated fields.
The condition name.includes("code") is overly broad and can hide valid fields with names like "encode", "decode", or any field containing "code" as a substring. Since proxy fields with "field": "code" do exist in the codebase, a more precise predicate is warranted.
Suggested fix
- (name === "code" && type === "code") || (name.includes("code") && proxy)
+ (name === "code" && type === "code") ||
+ (proxy && /(^|_)code($|_)/.test(name))
? "hidden"
: "",🤖 Prompt for AI Agents
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx
around lines 94 - 101, The name matching is too broad: replace the substring
check `name.includes("code")` with a precise check so unrelated fields like
"encode" aren't hidden; update the condition in InspectionPanelField.tsx so the
hidden branch only triggers for an explicit code field (e.g., keep `(name ===
"code" && type === "code")` and change the proxy case to check the proxy's
declared field like `proxy?.field === "code"` or `proxy && proxy.field ===
"code"`) so only actual proxy fields that target "code" hide the element.
| return ( | ||
| <div className="space-y-2 p-3"> | ||
| {allFields.map((templateField: string) => { | ||
| const template = data.node?.template[templateField]; | ||
|
|
||
| return ( | ||
| <InspectionPanelField | ||
| key={`${data.id}-${templateField}`} | ||
| data={data} | ||
| title={getFieldTitle(data.node?.template!, templateField)} | ||
| info={template.info!} | ||
| name={templateField} | ||
| required={template.required} | ||
| id={{ | ||
| inputTypes: template.input_types, | ||
| type: template.type, | ||
| id: data.id, | ||
| fieldName: templateField, | ||
| }} | ||
| proxy={template.proxy} | ||
| showNode={true} | ||
| isToolMode={false} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> |
There was a problem hiding this comment.
Add a defensive guard for missing template entries to avoid runtime crashes.
If data.node.template is mutated/updated between allFields computation and render (or if template keys are sparse), template can be undefined and template.* will throw.
Proposed fix
return (
<div className="space-y-2 p-3">
{allFields.map((templateField: string) => {
- const template = data.node?.template[templateField];
+ const template = data.node?.template?.[templateField];
+ if (!template) return null;
return (
<InspectionPanelField
key={`${data.id}-${templateField}`}
data={data}
title={getFieldTitle(data.node?.template!, templateField)}
- info={template.info!}
+ info={template.info ?? ""}
name={templateField}
- required={template.required}
+ required={!!template.required}
id={{
inputTypes: template.input_types,
type: template.type,
id: data.id,
fieldName: templateField,
}}
proxy={template.proxy}
showNode={true}
isToolMode={false}
/>
);
})}
</div>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <div className="space-y-2 p-3"> | |
| {allFields.map((templateField: string) => { | |
| const template = data.node?.template[templateField]; | |
| return ( | |
| <InspectionPanelField | |
| key={`${data.id}-${templateField}`} | |
| data={data} | |
| title={getFieldTitle(data.node?.template!, templateField)} | |
| info={template.info!} | |
| name={templateField} | |
| required={template.required} | |
| id={{ | |
| inputTypes: template.input_types, | |
| type: template.type, | |
| id: data.id, | |
| fieldName: templateField, | |
| }} | |
| proxy={template.proxy} | |
| showNode={true} | |
| isToolMode={false} | |
| /> | |
| ); | |
| })} | |
| </div> | |
| return ( | |
| <div className="space-y-2 p-3"> | |
| {allFields.map((templateField: string) => { | |
| const template = data.node?.template?.[templateField]; | |
| if (!template) return null; | |
| return ( | |
| <InspectionPanelField | |
| key={`${data.id}-${templateField}`} | |
| data={data} | |
| title={getFieldTitle(data.node?.template!, templateField)} | |
| info={template.info ?? ""} | |
| name={templateField} | |
| required={!!template.required} | |
| id={{ | |
| inputTypes: template.input_types, | |
| type: template.type, | |
| id: data.id, | |
| fieldName: templateField, | |
| }} | |
| proxy={template.proxy} | |
| showNode={true} | |
| isToolMode={false} | |
| /> | |
| ); | |
| })} | |
| </div> | |
| ); |
🤖 Prompt for AI Agents
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx
around lines 52 - 77, The render loop over allFields can crash if
data.node?.template[templateField] is undefined; modify the map in
InspectionPanelFields to guard against missing template entries by checking that
const template = data.node?.template?.[templateField] exists before returning an
<InspectionPanelField/>; if template is undefined, either skip rendering that
iteration (return null) or render a safe fallback with defaults, and ensure
getFieldTitle is only called when template is present; reference the map over
allFields, the template variable, getFieldTitle, and the InspectionPanelField
component when making the change.
| ); | ||
| } | ||
|
|
||
| // Made with Bob |
There was a problem hiding this comment.
Remove the stray “Made with Bob” comment before merging.
🤖 Prompt for AI Agents
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx
at line 81, Remove the stray comment line containing "Made with Bob" from the
InspectionPanelFields.tsx file: locate the comment in the InspectionPanelFields
component (or nearby top-level file header) and delete that line so no stray
comment remains; then run the project's lint/format step to ensure no trailing
whitespace or formatting issues.
| {hasCode && ( | ||
| <ShadTooltip content="View Code" side="left"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| className="h-8 w-8" | ||
| onClick={handleOpenCode} | ||
| > | ||
| <IconComponent name="Code" className="h-4 w-4" /> | ||
| </Button> | ||
| </ShadTooltip> | ||
| )} | ||
| </div> | ||
|
|
||
| {hasCode && openCodeModal && ( | ||
| <div className="hidden"> | ||
| <CodeAreaModal | ||
| setValue={handleSetValue} | ||
| open={openCodeModal} | ||
| setOpen={setOpenCodeModal} | ||
| dynamic={true} | ||
| setNodeClass={(apiClassType, type) => { | ||
| handleNodeClass(apiClassType, type); | ||
| }} | ||
| nodeClass={data.node} | ||
| value={data.node?.template?.code?.value ?? ""} | ||
| componentId={data.id} | ||
| > | ||
| <></> | ||
| </CodeAreaModal> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find BaseModal implementation
rg -n "export.*BaseModal|class BaseModal" src/frontend/src --type tsx --type ts -A 5 | head -50Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
#!/bin/bash
# Find CodeAreaModal implementation
rg -n "export.*CodeAreaModal|function CodeAreaModal" src/frontend/src --type tsx --type ts -A 3 | head -40Repository: langflow-ai/langflow
Length of output: 91
🏁 Script executed:
#!/bin/bash
# Check the full InspectionPanelHeader.tsx file to verify line 96 and surrounding context
wc -l src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxRepository: langflow-ai/langflow
Length of output: 162
🏁 Script executed:
#!/bin/bash
# Read the full file to see context around the lines in question
cat -n src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsxRepository: langflow-ai/langflow
Length of output: 3624
🏁 Script executed:
#!/bin/bash
# Find BaseModal implementation
fd -e ts -e tsx . src/frontend/src | xargs grep -l "export.*BaseModal\|class BaseModal" | head -5Repository: langflow-ai/langflow
Length of output: 453
🏁 Script executed:
#!/bin/bash
# Find CodeAreaModal implementation
fd -e ts -e tsx . src/frontend/src | xargs grep -l "CodeAreaModal" | grep -E "codeAreaModal|CodeAreaModal" | head -5Repository: langflow-ai/langflow
Length of output: 457
🏁 Script executed:
#!/bin/bash
# Find ShadTooltip implementation
fd -e ts -e tsx . src/frontend/src | xargs grep -l "ShadTooltip" | grep -i tooltip | head -5Repository: langflow-ai/langflow
Length of output: 475
🏁 Script executed:
#!/bin/bash
# Search for BaseModal in the codebase
rg -l "BaseModal" src/frontend/src | head -10Repository: langflow-ai/langflow
Length of output: 585
🏁 Script executed:
#!/bin/bash
# Read BaseModal implementation
cat -n src/frontend/src/modals/baseModal/index.tsx | head -100Repository: langflow-ai/langflow
Length of output: 3306
🏁 Script executed:
#!/bin/bash
# Read CodeAreaModal implementation
cat -n src/frontend/src/modals/codeAreaModal/index.tsx | head -150Repository: langflow-ai/langflow
Length of output: 5945
🏁 Script executed:
#!/bin/bash
# Read ShadTooltip implementation
cat -n src/frontend/src/components/common/shadTooltipComponent/index.tsxRepository: langflow-ai/langflow
Length of output: 3183
Add aria-label to icon-only "View Code" button for accessibility.
The button at line 62-69 is icon-only and should have an aria-label for screen readers. While wrapped in ShadTooltip, the tooltip content is visual-only and does not provide accessible labeling. Additionally, remove the unnecessary // Made with Bob comment at line 96 and the redundant hidden wrapper around CodeAreaModal (the modal already manages visibility via the open prop).
Suggested adjustments
@@
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={handleOpenCode}
+ aria-label="View code"
>
<IconComponent name="Code" className="h-4 w-4" />
</Button>
@@
- {hasCode && openCodeModal && (
- <div className="hidden">
- <CodeAreaModal
+ {hasCode && openCodeModal && (
+ <CodeAreaModal
setValue={handleSetValue}
open={openCodeModal}
setOpen={setOpenCodeModal}
dynamic={true}
setNodeClass={(apiClassType, type) => {
handleNodeClass(apiClassType, type);
}}
nodeClass={data.node}
value={data.node?.template?.code?.value ?? ""}
componentId={data.id}
>
- <></>
+ <span />
</CodeAreaModal>
- </div>
)}
@@
-// Made with Bob🤖 Prompt for AI Agents
In
@src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelHeader.tsx
around lines 60 - 91, The "View Code" icon-only Button in InspectionPanelHeader
should include an accessible label: add an aria-label (e.g., aria-label="View
code") to the Button that currently calls handleOpenCode so screen readers can
identify it (the ShadTooltip is visual-only). Also remove the unnecessary
surrounding <div className="hidden"> that wraps CodeAreaModal (the modal
controls visibility via its open prop) and delete the stray comment "// Made
with Bob" in this component; keep all existing props on CodeAreaModal
(setOpen={setOpenCodeModal}, open={openCodeModal}, setValue={handleSetValue},
nodeClass={data.node}, etc.) unchanged.
This pull request introduces a major refactor to the node input editing experience by adding a dedicated, modern Inspection Panel for editing node parameters. The changes separate the editing of node inputs from the main canvas and streamline the user interface for inspecting and modifying node properties. Key updates include new Inspection Panel components, conditional rendering logic, and adjustments to input field visibility.
Inspection Panel feature and UI refactor:
InspectionPanel,InspectionPanelHeader, andInspectionPanelFieldscomponents to provide a dedicated, animated side panel for node inspection and editing. The panel displays when a singlegenericNodeis selected and includes a header, code modal trigger, and a list of editable fields. [1] [2] [3]InspectionPanelinto the main flow page (PageComponent), including logic to determine when the panel should be visible and to fetch the correct node data from the store. [1] [2] [3]Input field visibility and editing logic:
NodeInputFieldto hide input components if the field has a handle, as these fields are now edited exclusively in the Inspection Panel.RenderInputParametersto only show fields with handles and to apply stricter filtering for visibility, ensuring that only relevant parameters are displayed in the node UI.Component abstraction and maintainability:
InspectionPanelField,InspectionPanelFields,InspectionPanelHeader) for improved maintainability and clarity. [1] [2] [3]These changes collectively modernize the node parameter editing workflow, improve UX, and lay the groundwork for future extensibility.
Summary by CodeRabbit
Release Notes
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.