refactor: simplify hover controls, use CSS instead of react states, fix node flickering

[srijanpatel]

This pull request includes significant changes to the BaseNode component in frontend/src/components/nodes/BaseNode.tsx. The primary focus is on removing state and event handlers related to hover effects and replacing them with CSS-based hover effects. This simplifies the component and reduces the amount of state management required.

The most important changes include:

Removal of State and Event Handlers:

• Removed state variables isHovered, showControls, and isTooltipHovered which were used to manage hover effects.
• Removed event handlers handleMouseEnter, handleMouseLeave, handleControlsMouseEnter, and handleControlsMouseLeave which were used to manage hover effects.

Simplification of Styles:

• Updated the dynamic border width logic to remove dependencies on hover state and used CSS classes for hover effects instead.
• Added the group class to the container div to enable group-based hover effects.
• Updated Card component to use CSS-based hover effects for controls visibility, removing the need for hover state management.

Code Cleanup:

• Converted single quotes to double quotes for consistency in class names.

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 1712002 in 23 seconds

More details

• Looked at 249 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/nodes/BaseNode.tsx:148

• Draft comment:
  Remove unused import 'memo'.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The import statement for 'memo' is not used in the code. Unused imports should be removed to keep the code clean and efficient.

2. frontend/src/components/nodes/BaseNode.tsx:329

• Draft comment:
  Remove the 'isHoverable' prop as hover effects are now handled by CSS.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The 'isHoverable' prop in the Card component is no longer necessary since hover effects are now handled by CSS. Removing it will clean up the code.

3. frontend/src/components/nodes/BaseNode.tsx:330

• Draft comment:
  Remove the 'isHoverable' prop as hover effects are now handled by CSS.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The 'isHoverable' prop in the Card component is no longer necessary since hover effects are now handled by CSS. Removing it will clean up the code.

Workflow ID: wflow_2gETPIakkvUj6sUb

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 66a177c in 17 seconds

More details

• Looked at 29 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 1 drafted comments based on config settings.

1. frontend/src/components/nodes/BaseNode.tsx:331

• Draft comment:
  Consider moving group-hover:border-[3px] to a CSS file for consistency with CSS-based hover effects.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of group-hover:border-[3px] in the classNames prop of the Card component is inconsistent with the CSS-based hover effect approach. It should be moved to the CSS file for consistency and maintainability.

Workflow ID: wflow_nQwWFKvhgeMoR44x

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.