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

[PR #20101] fix(markdown): improve ECharts rendering for streaming content and da… #29314

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

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

State: closed
Merged: Yes

Summary

This PR improves the user experience when rendering ECharts visualizations in markdown code blocks, especially during streaming content reception. It fixes the issue where an error message is prematurely displayed before the chart data is fully received.

Core Improvements

State Management

The implementation introduces a robust state machine for chart rendering with three distinct states: 'loading', 'success', and 'error'. This ensures a predictable rendering flow and prevents premature error display during streaming content reception.

JSON Completeness Detection

Rather than relying on arbitrary content length to determine if JSON is complete, the code now performs structural analysis:

  • Checks for matching opening/closing brackets
  • Verifies bracket count balance ({ and })
  • Examines quotation mark pairing
  • Detects common incomplete JSON patterns

Dark Mode Integration

The implementation properly integrates with ECharts' native dark theme:

  • Uses ECharts' built-in 'dark' theme when in dark mode
  • Adapts container styling to match the current theme
  • Ensures proper contrast for loading indicators in both themes

Width Management

Multiple techniques ensure charts always render at the correct width:

  • Uses ResizeObserver to monitor container size changes
  • Implements aggressive resize strategy with multiple timings
  • Sets appropriate width constraints (width: '100%', minWidth: '100%')
  • Forces chart resize at key moments (after rendering, after success state)

Fixes #20100
Fixes https://github.com/langgenius/dify/issues/18551
Fixes https://github.com/langgenius/dify/issues/19478

Screenshots

Before After(light) After(dark)
iShot_2025-05-22_16 05 24iShot_2025-05-22_16 04 21 iShot_2025-05-22_16 01 10iShot_2025-05-22_16 01 03iShot_2025-05-22_16 00 57 iShot_2025-05-22_15 56 09iShot_2025-05-22_15 56 23iShot_2025-05-22_15 56 32

Videos for demonstration:

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 cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/20101 **State:** closed **Merged:** Yes --- ### Summary This PR improves the user experience when rendering ECharts visualizations in markdown code blocks, especially during streaming content reception. It fixes the issue where an error message is prematurely displayed before the chart data is fully received. ## Core Improvements ### State Management The implementation introduces a robust state machine for chart rendering with three distinct states: `'loading'`, `'success'`, and `'error'`. This ensures a predictable rendering flow and prevents premature error display during streaming content reception. ### JSON Completeness Detection Rather than relying on arbitrary content length to determine if JSON is complete, the code now performs structural analysis: - Checks for matching opening/closing brackets - Verifies bracket count balance (`{` and `}`) - Examines quotation mark pairing - Detects common incomplete JSON patterns ### Dark Mode Integration The implementation properly integrates with ECharts' native dark theme: - Uses ECharts' built-in `'dark'` theme when in dark mode - Adapts container styling to match the current theme - Ensures proper contrast for loading indicators in both themes ### Width Management Multiple techniques ensure charts always render at the correct width: - Uses ResizeObserver to monitor container size changes - Implements aggressive resize strategy with multiple timings - Sets appropriate width constraints (`width: '100%'`, `minWidth: '100%'`) - Forces chart resize at key moments (after rendering, after success state) Fixes #20100 Fixes https://github.com/langgenius/dify/issues/18551 Fixes https://github.com/langgenius/dify/issues/19478 ### Screenshots | Before | After(light) | After(dark) | |--------|-------|-------| | <img width="374" alt="iShot_2025-05-22_16 05 24" src="https://github.com/user-attachments/assets/8b5e7114-8880-4613-91f0-585af1a05a9a" /><img width="390" alt="iShot_2025-05-22_16 04 21" src="https://github.com/user-attachments/assets/17e5586d-a09e-49e7-b269-8b5201897a31" /> | <img width="369" alt="iShot_2025-05-22_16 01 10" src="https://github.com/user-attachments/assets/6a6849d4-8012-425b-8866-bc8c4c228b74" /><img width="368" alt="iShot_2025-05-22_16 01 03" src="https://github.com/user-attachments/assets/cccd7af3-b2c7-45b3-80b7-0b6d6b94283c" /><img width="367" alt="iShot_2025-05-22_16 00 57" src="https://github.com/user-attachments/assets/e13c1fd9-ac4c-4592-becb-814dd683823d" /> |<img width="387" alt="iShot_2025-05-22_15 56 09" src="https://github.com/user-attachments/assets/d26cfa71-4229-438e-95ca-1586cf564592" /><img width="365" alt="iShot_2025-05-22_15 56 23" src="https://github.com/user-attachments/assets/fb838cbe-b30c-4999-99f3-944160b4fdf0" /><img width="374" alt="iShot_2025-05-22_15 56 32" src="https://github.com/user-attachments/assets/9bd46cd4-2d29-4e51-8979-a0a9821eb2e8" /> | **Videos for demonstration:** - [Before video](https://github.com/user-attachments/assets/f6479c62-1dbd-48df-af93-6f09503c5b90) - [After (Light) video](https://github.com/user-attachments/assets/251e35fb-4a25-41b3-9a5d-6d90b98b561e) - [After (Dark) video](https://github.com/user-attachments/assets/adb3ab5d-9e1d-440b-ac07-5671697f2953) ### 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. - [] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:45:18 -05:00
yindo closed this issue 2026-02-21 20:45:18 -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#29314
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?