feat: Canvas toolbar update and enhancement#9239
Conversation
…t code formatting - Introduced .editorconfig to enforce coding styles across various file types. - Added .prettierrc for Prettier configuration to standardize code formatting. - Updated settings.json to define tab sizes and formatting options for different languages. - Enhanced canvasControlsComponent with a new dropdown for control buttons, improving UI interaction. - Refactored logCanvasControlsComponent and MemoizedComponents for better structure and consistency.
SonicDMG
temporarily deployed
to
lfoss-1889 - langflow-manual-install PR #9239
Render
Destroyed
|
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 WalkthroughThis update introduces a comprehensive overhaul of code formatting and editor configuration files, including the addition of Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CanvasControls (Dropdown)
participant Canvas
participant Help
User->>CanvasControls: Click dropdown toggle
CanvasControls->>CanvasControls: Open dropdown menu
User->>CanvasControls: Select "Zoom In"/"Zoom Out"/"Zoom 100%"/"Fit"
CanvasControls->>Canvas: Perform zoom/fit action
CanvasControls->>CanvasControls: Close dropdown menu
User->>CanvasControls: Click help icon
CanvasControls->>Help: Show help modal/popup
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
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: 3
🧹 Nitpick comments (4)
src/frontend/.prettierrc (1)
1-14: Add final newline for EditorConfig consistency.The Prettier configuration is well-structured and aligns with project standards. However, the file should end with a newline to match the
insert_final_newline = truesetting in the EditorConfig file."printWidth": 80, "proseWrap": "preserve" -} +}src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx (1)
3-6: Simplify the dual import to avoid confusion.Importing the same component twice with different aliases is unnecessary and can be confusing for maintainability.
-import { - default as ForwardedIconComponent, - default as IconComponent, -} from "@/components/common/genericIconComponent"; +import ForwardedIconComponent from "@/components/common/genericIconComponent";Then update the usage on line 48:
- <IconComponent + <ForwardedIconComponentsrc/frontend/src/components/core/canvasControlsComponent/index.tsx (2)
107-107: Remove duplicate CSS class.The
text-muted-foregroundclass is applied twice in the same className string.- <span className="text-muted-foreground text-sm mr-2 text-muted-foreground"> + <span className="text-muted-foreground text-sm mr-2">
272-291: Remove commented code or implement the functionality.The commented lock/unlock and helper line controls should either be implemented or removed entirely to keep the code clean.
If these features are not ready for this release, remove the commented code:
- {/* <DropdownControlButton - iconName={isInteractive ? "LockOpen" : "Lock"} - tooltipText={isInteractive ? "Lock" : "Unlock"} - onClick={onToggleInteractivity} - backgroundClasses={isInteractive ? "" : "bg-destructive"} - iconClasses={ - isInteractive ? "" : "text-primary-foreground dark:text-primary" - } - testId="lock_unlock_dropdown" - /> */} - {/* <DropdownControlButton - iconName={helperLineEnabled ? "FoldHorizontal" : "UnfoldHorizontal"} - tooltipText={ - helperLineEnabled ? "Hide Helper Lines" : "Show Helper Lines" - } - onClick={onToggleHelperLines} - backgroundClasses={cn(helperLineEnabled && "bg-muted")} - iconClasses={cn(helperLineEnabled && "text-muted-foreground")} - testId="helper_lines_dropdown" - /> */}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.cursor/settings.json(1 hunks).editorconfig(1 hunks)src/frontend/.prettierrc(1 hunks)src/frontend/src/components/core/canvasControlsComponent/index.tsx(5 hunks)src/frontend/src/components/core/logCanvasControlsComponent/index.tsx(1 hunks)src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/components/core/logCanvasControlsComponent/index.tsxsrc/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsxsrc/frontend/src/components/core/canvasControlsComponent/index.tsx
src/frontend/src/components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
All components should be styled using Tailwind CSS utility classes.
Files:
src/frontend/src/components/core/logCanvasControlsComponent/index.tsxsrc/frontend/src/components/core/canvasControlsComponent/index.tsx
src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
Implement dark mode support in components and hooks where needed.
Files:
src/frontend/src/components/core/logCanvasControlsComponent/index.tsxsrc/frontend/src/components/core/canvasControlsComponent/index.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/backend_development.mdc:0-0
Timestamp: 2025-07-18T18:25:54.486Z
Learning: Starter project files auto-format after langflow run; these formatting changes can be committed or ignored
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/@(package*.json|tsconfig.json|tailwind.config.*|vite.config.*) : Frontend configuration files such as package.json, tsconfig.json, and Tailwind/Vite configs must be maintained and updated as needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Format all TypeScript and JavaScript code using the make format_frontend command.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Frontend code must be formatted using the make format_frontend command and linted with make lint before committing changes.
src/frontend/src/components/core/logCanvasControlsComponent/index.tsx (5)
Learnt from: namastex888
PR: #9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.255Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components//@(FlowGraph|nodes)//*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
src/frontend/.prettierrc (10)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/@(package*.json|tsconfig.json|tailwind.config.|vite.config.) : Frontend configuration files such as package.json, tsconfig.json, and Tailwind/Vite configs must be maintained and updated as needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Frontend test files should be located in 'src/frontend/' and use '.test.{ts,tsx,js,jsx}' or '.spec.{ts,tsx,js,jsx}' extensions.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Format all TypeScript and JavaScript code using the make format_frontend command.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Frontend code must be formatted using the make format_frontend command and linted with make lint before committing changes.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Validate input/output behavior and test component initialization and configuration in frontend test files.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/tailwind.config.* : Use Tailwind CSS for styling all frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Use React 18 with TypeScript for all UI components in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/types/**/*.{ts,tsx} : All TypeScript type definitions should be placed in the types directory.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies appropriately in frontend test files to isolate unit tests from external services.
.editorconfig (2)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/backend_development.mdc:0-0
Timestamp: 2025-07-18T18:25:54.486Z
Learning: Starter project files auto-format after langflow run; these formatting changes can be committed or ignored
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/@(package*.json|tsconfig.json|tailwind.config.|vite.config.) : Frontend configuration files such as package.json, tsconfig.json, and Tailwind/Vite configs must be maintained and updated as needed.
.cursor/settings.json (3)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/@(package*.json|tsconfig.json|tailwind.config.|vite.config.) : Frontend configuration files such as package.json, tsconfig.json, and Tailwind/Vite configs must be maintained and updated as needed.
Learnt from: namastex888
PR: #9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.255Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-07-18T18:26:42.027Z
Learning: Applies to docs/docusaurus.config.js : Site configuration such as title, tagline, URL, and navbar items must be managed in docs/docusaurus.config.js.
src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx (13)
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: dolfim-ibm
PR: #8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses React.PropsWithChildren<{}> as the prop type for all icon components using forwardRef, rather than React.SVGProps<SVGSVGElement>. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components//@(FlowGraph|nodes)//*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an index.tsx in your icon directory that exports your icon using forwardRef and passes the isDark prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Use React 18 with TypeScript for all UI components in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: ogabrielluiz
PR: langflow-ai/langflow#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
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons//.@(js|jsx|ts|tsx) : Create a new directory for your icon in src/frontend/src/icons/YourIconName/ and add your SVG as a React component (e.g., YourIconName.jsx). The SVG component must use the isDark prop to support both light and dark mode.
src/frontend/src/components/core/canvasControlsComponent/index.tsx (13)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Use React 18 with TypeScript for all UI components in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: dolfim-ibm
PR: #8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses React.PropsWithChildren<{}> as the prop type for all icon components using forwardRef, rather than React.SVGProps<SVGSVGElement>. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Use Zustand for state management in React components within the frontend; stores should expose both state and setter functions, and be imported via hooks (e.g., useMyStore).
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components//@(FlowGraph|nodes)//*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an index.tsx in your icon directory that exports your icon using forwardRef and passes the isDark prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons//.@(js|jsx|ts|tsx) : Create a new directory for your icon in src/frontend/src/icons/YourIconName/ and add your SVG as a React component (e.g., YourIconName.jsx). The SVG component must use the isDark prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#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.
🔇 Additional comments (11)
.editorconfig (1)
1-53: LGTM! Comprehensive EditorConfig setup.The configuration is well-structured with appropriate settings for each file type. The indentation rules (2 spaces for most files, 4 for Python, tabs for Makefiles) follow standard conventions, and disabling trailing whitespace trimming for Markdown files is a good practice.
src/frontend/src/components/core/logCanvasControlsComponent/index.tsx (1)
10-11: LGTM! Panel repositioning is clean and purposeful.The position change from "bottom-right" to "bottom-left" with the
!left-autoclass override is a straightforward adjustment that aligns with the broader canvas controls layout restructuring..cursor/settings.json (1)
2-46: LGTM! Comprehensive editor configuration with consistent formatting rules.The expanded settings provide excellent consistency across the codebase. The tab sizes align with EditorConfig (2 spaces for most languages, 4 for Python), and the biomejs.biome formatter integration with format-on-save will maintain code quality automatically.
src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx (1)
34-52: LGTM! Button replacement maintains functionality while improving consistency.The replacement of
CustomControlButtonwith the standardButtoncomponent is well-executed. The styling, functionality, and accessibility are preserved while aligning with the broader canvas controls refactoring.src/frontend/src/components/core/canvasControlsComponent/index.tsx (7)
10-10: LGTM: Import additions support new dropdown functionality.The new imports for React hooks, UI components (Button, DropdownMenu, Separator), and OS utility function are appropriate for the dropdown-based canvas controls refactoring.
Also applies to: 15-21, 25-25
28-37: LGTM: Type definition updates support new dropdown interface.Making
iconNameoptional and addingnameandshortcutproperties appropriately extends the interface for the new dropdown controls while maintaining backward compatibility.
39-75: LGTM: CustomControlButton updates maintain functionality with improved styling.The component properly handles the optional
iconNamewith a default value and includes appropriate hover states with the "group" className. The styling updates align with the new design system.
78-117: LGTM: DropdownControlButton implementation is well-structured.The component properly implements the dropdown control interface with appropriate styling, accessibility attributes, and keyboard shortcut display. The layout logic correctly positions the control name and modifier key combination.
120-123: LGTM: OS-specific modifier key detection is well-implemented.The helper function correctly detects the operating system and returns appropriate modifier key symbols (⌘ for macOS, Ctrl for others). This enhances user experience by showing OS-appropriate keyboard shortcuts.
185-198: LGTM: Zoom callback handlers properly manage dropdown state.The new callback handlers correctly wrap the zoom operations and close the dropdown after each action, providing good UX by preventing the dropdown from staying open after use.
204-238: LGTM: Panel restructure improves layout and accessibility.The canvas controls panel has been properly restructured with:
- Appropriate positioning (bottom-right)
- Proper flex layout and spacing
- Good separation between elements with dividers
- Accessible dropdown trigger with tooltip
…nctionality - Introduced keyboard shortcuts for zooming in, zooming out, fitting view, and resetting zoom. - Refactored DropdownControlButton to improve accessibility and usability. - Updated CanvasControls to handle keyboard events for enhanced user interaction. - Added helper function to format zoom percentage for better display. - Improved structure and readability of the canvas controls component.
SonicDMG
temporarily deployed
to
lfoss-1889 - langflow-manual-install PR #9239
Render
Destroyed
github-actions
Bot
added
enhancement
SonicDMG
temporarily deployed
to
lfoss-1889 - langflow-manual-install PR #9239
Render
Destroyed
github-actions
Bot
added
enhancement
|
Since we are using biome for for Martins do we need prettier config? |
deon-sanchez
changed the title
github-actions
Bot
added
enhancement
…ojects.spec.ts - Simplified arrow function syntax by removing parentheses where not needed. - Enhanced conditional logic for handling visibility of elements in the test flow. - Improved overall code organization for better maintainability.
- Updated test selectors for consistency and improved readability. - Replaced keyboard interaction with direct click for enabling the lock switch to reduce flakiness. - Added conditional check for the save button to ensure it is enabled before clicking. - Improved wait times for UI elements to enhance test stability. - Cleaned up code structure for better maintainability.
- Added a conditional check to ensure the lock switch is in the correct state after clicking. - Enhanced test stability by incorporating an additional click if the state is not as expected.
…ency - Removed unnecessary wait for the fit_view selector to streamline the test flow. - Simplified the logic for clicking the fit_view button, enhancing readability and reducing redundancy.
…dability - Simplified arrow function syntax by removing unnecessary parentheses. - Enhanced code clarity by standardizing the structure of test assertions and interactions. - Improved overall test flow by ensuring consistent formatting and reducing redundancy.
… and Text Sentiment Analysis.spec.ts - Simplified arrow function syntax by removing unnecessary parentheses. - Standardized test assertions and interactions for improved clarity. - Adjusted text analysis assertion to ensure it checks for a minimum length of 50 characters. - Added a wait for selector in the starter-projects.spec.ts to ensure proper element visibility before interaction.
|
5 participants
This pull request introduces a new modular canvas controls system for the application's flow editor, significantly improving both user experience and code maintainability. The changes add a dedicated set of components for canvas controls, including dropdowns for zoom and help actions, keyboard shortcut support, and smart guides toggling. Comprehensive unit tests are also provided for these components. Additionally, the flow menu UI is enhanced to visually indicate locked flows and streamline the settings display.
Canvas Controls System
CanvasControls,CanvasControlsDropdown,DropdownControlButton, andHelpDropdowncomponents to modularize and enhance the canvas controls area, supporting zoom, fit view, reset, help, docs, bug report, desktop download, and smart guides toggle actions. Keyboard shortcuts for canvas operations are now supported. (src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx,CanvasControlsDropdown.tsx,DropdownControlButton.tsx,HelpDropdown.tsx) [1] [2] [3] [4]CanvasControlsandCanvasControlsDropdownto ensure correct rendering, interaction, and event management, including keyboard shortcuts and dynamic zoom display. (__tests__/CanvasControls.test.tsx,__tests__/CanvasControlsDropdown.test.tsx) [1] [2]Flow Lock Integration
CanvasControls.tsx)FlowMenu/index.tsx) [1] [2]UI/UX Improvements
FlowMenu/index.tsx)These updates collectively make the flow editor more intuitive, visually informative, and easier to maintain.
Images
Updated Canvas Controls
Updated Zoom Controls
New Lock Placement
Full Screen