feat: support BPMN workflow rendering in trader-app#263
feat: support BPMN workflow rendering in trader-app#263mushrafmim wants to merge 4 commits intoOpenNSW:mainfrom
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request introduces support for rendering BPMN-based V2 workflows, a significant feature enhancement. The changes are well-structured, with new components for different BPMN node types (EventNode, GatewayNode, TaskNode) and a refactoring of WorkflowNode to act as a dispatcher. The WorkflowViewer is cleanly updated to handle both legacy and V2 workflow data. I've found a couple of areas for improvement: one is a potential bug in a useCallback dependency array that could lead to stale data, and the other is an opportunity to simplify an event handler in TaskNode to avoid potential React warnings. Overall, this is a solid implementation.
portals/apps/trader-app/src/components/WorkflowViewer/WorkflowViewer.tsx
Show resolved
Hide resolved
portals/apps/trader-app/src/components/WorkflowViewer/TaskNode.tsx
Outdated
Show resolved
Hide resolved
a724cce to
5aa6e7b
Compare
…orkflow rendering
5aa6e7b to
cad13cb
Compare
portals/apps/trader-app/src/components/WorkflowViewer/TaskNode.tsx
Outdated
Show resolved
Hide resolved
| className={`w-12 h-12 rotate-45 border-2 flex items-center justify-center bg-white ${statusStyle.borderColor} shadow-sm group hover:scale-110 transition-transform`} | ||
| > | ||
| <div className="-rotate-45 flex items-center justify-center"> | ||
| {isSplit ? ( |
There was a problem hiding this comment.
nit: in BPMN, gateways are distinguished by their routing behavior (Parallel and Exclusive), not by Split/Join. Refactor the logic to check for Parallel and Exclusive
import { PlusIcon, Cross2Icon } from '@radix-ui/react-icons'
const isParallel = step.gateway_type?.includes('PARALLEL')
// Inside render:
{isParallel ? (
<PlusIcon className={`w-6 h-6 ${statusStyle.iconColor}`} />
) : (
<Cross2Icon className={`w-6 h-6 ${statusStyle.iconColor}`} />
)}There was a problem hiding this comment.
Yes, you are correct, BPMN doesn't care about whether it is a SPLIT or JOIN, it cares about whether it is a PARELLEL or EXCLUSIVE. Updated the PR.

Summary
This PR implements support for rendering BPMN-based workflows in the
trader-appportal. It introduces new node components (EventNode,GatewayNode,TaskNode) to visualize BPMN elements like events and gateways, and refactors the existingWorkflowViewerto handle both legacy and V2 workflow data.Type of Change
Changes Made
EventNode,GatewayNode, andTaskNodecomponents for modular BPMN element rendering.WorkflowNodeto delegate rendering based on node types (INTERNAL vs TASK).WorkflowViewerto supportWorkflowV2schemas while maintaining backward compatibility for legacy workflows.WorkflowViewer/utils.tsx.ConsignmentDetailScreen.WorkflowV2types including nodes, edges, and BPMN-specific subtypes (TASK, EVENT, GATEWAY).ConsignmentDetailinterface to include the newworkflowproperty.Testing
Checklist
Related Issues
Related to # (Issue number not provided)
Screenshots/Demo
(N/A)
Additional Notes
The refactoring of
WorkflowViewerensures that existing consignments still render correctly using the legacy path, while new consignments with BPMN data will use the V2 rendering path. The PR has been updated after a rebase ontomain.Deployment Notes
No special deployment instructions required.