Skip to content

Feature/Process Flow UI UX Improvements#372

Open
HenryHengZJ wants to merge 4 commits intomainfrom
feature/Process-Flow-UI-Improvement
Open

Feature/Process Flow UI UX Improvements#372
HenryHengZJ wants to merge 4 commits intomainfrom
feature/Process-Flow-UI-Improvement

Conversation

@HenryHengZJ
Copy link
Copy Markdown
Contributor

Before:
image

After:

traces-ezgif.com-crop-video.mp4

@gemini-code-assist
Copy link
Copy Markdown

Warning

Gemini is experiencing higher than usual traffic and was unable to create the review. Please try again in a few hours by commenting /gemini review.

@HenryHengZJ
Copy link
Copy Markdown
Contributor Author

/gemini review

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new "Traces" feature, allowing users to view detailed execution flows via a dedicated dialog instead of inline. Key changes include the addition of the TracesButton, TracesDialog, and NodeDetailsContent components, as well as a refactoring of workflow utilities into a shared workflowUtils.tsx file. Feedback focuses on improving security by using DOMPurify for markdown rendering, adding error handling to file download requests, and optimizing the tree data construction logic to avoid redundant mutations and code duplication.

Comment thread src/components/treeview/workflowUtils.tsx
Comment thread src/components/treeview/NodeDetailsContent.tsx
Comment thread src/components/treeview/NodeDetailsContent.tsx
Copy link
Copy Markdown
Contributor

@mmattu-wd mmattu-wd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Just one comment on hiding the cost

{renderRenderedView()}
</Show>
</div>
<NodeDetailsContent
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

Comment thread src/components/treeview/TracesDialog.tsx
<TokenIcon /> {m().tokens}
</span>
</Show>
<Show when={m().cost}>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we put an option in to hide this in the initialization of the bot?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the model is not listed on models.json in Flowise, we will not calculate the cost, and hence it wont show the cost as well here
image

Copy link
Copy Markdown
Contributor

@mmattu-wd mmattu-wd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spoke too soon looks like there is a regression when opening the dialog in a provided portal outside the shadow-dom.

The previous component used in-line styles which prevented this issue from occurring where with this new change we are using some tailwind classes which wont work when we open in a portal.

I made some changes here I included the index.html changes if you want to test it out: e1fa3e5

Image

@HenryHengZJ
Copy link
Copy Markdown
Contributor Author

HenryHengZJ commented Apr 16, 2026

Spoke too soon looks like there is a regression when opening the dialog in a provided portal outside the shadow-dom.

The previous component used in-line styles which prevented this issue from occurring where with this new change we are using some tailwind classes which wont work when we open in a portal.

I made some changes here I included the index.html changes if you want to test it out: e1fa3e5

Image

good spot! i didnt test that. feel free to push your commit to this pr branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants