langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-22 04:25:29 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #23446] fix: Multiple UI component improvements and code quality enhancements #30270

New Issue
Closed
opened 2026-02-21 20:47:10 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:47:10 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/23446

State: closed
Merged: Yes

[!IMPORTANT]

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #23445.

Summary

This PR addresses multiple UI component inconsistencies and code quality issues across the web frontend:

1. TagFilter Modal Behavior Synchronization

  • Synchronized TagFilter component behavior with TagSelector to auto-close when "Manage Tags" is clicked
  • Ensures consistent user experience across tag management components

2. Footer Close Button Hover Effect Improvements

  • Fixed barely visible hover effects in light mode and overly bright effects in dark mode
  • Replaced hardcoded colors with proper design system tokens for consistency
  • Added proper text color transitions for better visual feedback

3. Tracing Dropdown State Management Refactor

  • Resolved complex dual state management causing unreliable dropdown behavior
  • Only middle settings icon worked correctly, left/right click areas had broken state management
  • Unified state management using single source of truth pattern
  • Added proper text selection prevention and improved user experience

4. SVG Editor Metadata Filtering (Code Quality)

  • Implemented comprehensive filtering of Inkscape/Sodipodi editor metadata in SVG processing
  • Prevents 19 React DOM validation errors that appeared after tracing dropdown fixes
  • Follows industry best practices for SVG optimization in production
  • Added comprehensive test suite to prevent regressions

Root Cause Analysis: The tracing component SVG errors were always present but only exposed when dropdown state management was fixed and components started rendering reliably.

Fixes #23445

Screenshots

Before After
TagFilter doesn't auto-close on manage click TagFilter auto-closes consistently with TagSelector
Footer hover barely visible/too bright Consistent hover effects using design tokens
Tracing dropdown only works on middle icon Entire button area works reliably
19 React DOM validation errors in console Clean console with no SVG attribute errors

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/23446 **State:** closed **Merged:** Yes --- > [\!IMPORTANT] > > 1. Make sure you have read our [contribution guidelines](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) > 2. Ensure there is an associated issue and you have been assigned to it > 3. Use the correct syntax to link this PR: `Fixes #23445`. ## Summary This PR addresses multiple UI component inconsistencies and code quality issues across the web frontend: **1. TagFilter Modal Behavior Synchronization** - Synchronized TagFilter component behavior with TagSelector to auto-close when "Manage Tags" is clicked - Ensures consistent user experience across tag management components **2. Footer Close Button Hover Effect Improvements** - Fixed barely visible hover effects in light mode and overly bright effects in dark mode - Replaced hardcoded colors with proper design system tokens for consistency - Added proper text color transitions for better visual feedback **3. Tracing Dropdown State Management Refactor** - Resolved complex dual state management causing unreliable dropdown behavior - Only middle settings icon worked correctly, left/right click areas had broken state management - Unified state management using single source of truth pattern - Added proper text selection prevention and improved user experience **4. SVG Editor Metadata Filtering (Code Quality)** - Implemented comprehensive filtering of Inkscape/Sodipodi editor metadata in SVG processing - Prevents 19 React DOM validation errors that appeared after tracing dropdown fixes - Follows industry best practices for SVG optimization in production - Added comprehensive test suite to prevent regressions **Root Cause Analysis**: The tracing component SVG errors were always present but only exposed when dropdown state management was fixed and components started rendering reliably. Fixes #23445 ## Screenshots | Before | After | |--------|-------| | TagFilter doesn't auto-close on manage click | TagFilter auto-closes consistently with TagSelector | | Footer hover barely visible/too bright | Consistent hover effects using design tokens | | Tracing dropdown only works on middle icon | Entire button area works reliably | | 19 React DOM validation errors in console | Clean console with no SVG attribute errors | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos\!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:10 -05:00
yindo closed this issue 2026-02-21 20:47:10 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30270
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?