Skip to content

feat: support BPMN workflow rendering in trader-app#263

Open
mushrafmim wants to merge 4 commits intoOpenNSW:mainfrom
mushrafmim:feat/support-bpmn-workflow-rendering
Open

feat: support BPMN workflow rendering in trader-app#263
mushrafmim wants to merge 4 commits intoOpenNSW:mainfrom
mushrafmim:feat/support-bpmn-workflow-rendering

Conversation

@mushrafmim
Copy link
Contributor

@mushrafmim mushrafmim commented Mar 17, 2026

Summary

This PR implements support for rendering BPMN-based workflows in the trader-app portal. It introduces new node components (EventNode, GatewayNode, TaskNode) to visualize BPMN elements like events and gateways, and refactors the existing WorkflowViewer to handle both legacy and V2 workflow data.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Refactoring (no functional changes)
  • Performance improvement
  • Other (please describe):

Changes Made

  • UI/UX (Trader App):
    • Created EventNode, GatewayNode, and TaskNode components for modular BPMN element rendering.
    • Refactored WorkflowNode to delegate rendering based on node types (INTERNAL vs TASK).
    • Updated WorkflowViewer to support WorkflowV2 schemas while maintaining backward compatibility for legacy workflows.
    • Extracted shared styling and logic into WorkflowViewer/utils.tsx.
    • Integrated V2 workflow data in ConsignmentDetailScreen.
  • Types:
    • Added comprehensive WorkflowV2 types including nodes, edges, and BPMN-specific subtypes (TASK, EVENT, GATEWAY).
    • Updated ConsignmentDetail interface to include the new workflow property.

Testing

  • I have tested this change locally
  • I have added unit tests for new functionality
  • I have tested edge cases
  • All existing tests pass

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have checked that there are no merge conflicts

Related Issues

Related to # (Issue number not provided)

Screenshots/Demo

(N/A)

Additional Notes

The refactoring of WorkflowViewer ensures 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 onto main.

Deployment Notes

No special deployment instructions required.

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, 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 trader-app's ability to visualize complex workflows by integrating support for BPMN (Business Process Model and Notation) based workflows. It introduces a modular component architecture for rendering different BPMN elements and refactors the existing workflow viewer to gracefully handle both older and newer workflow data formats. This change improves the clarity and flexibility of workflow representation, making the application more adaptable to evolving business processes.

Highlights

  • BPMN Workflow Rendering: Introduced new UI components (EventNode, GatewayNode, TaskNode) to support the visualization of BPMN-based workflow elements within the trader-app.
  • Workflow Viewer Refactoring: The WorkflowNode component was refactored to delegate rendering logic based on workflow node types, and the WorkflowViewer was updated to handle both legacy and new V2 workflow data schemas, ensuring backward compatibility.
  • New Workflow V2 Data Types: Added comprehensive TypeScript types for the new Workflow V2 schema, including definitions for nodes, edges, and specific BPMN elements like tasks, events, and gateways.
  • Consignment Detail Screen Integration: Updated the ConsignmentDetailScreen to conditionally display either the legacy workflow steps or the new Workflow V2 data, prioritizing V2 if available.
  • CI/CD and Docker Optimization: Streamlined the CI/CD pipeline by adding a Docker build validation stage and removing redundant workflows, alongside optimizing the pnpm filter in the oga-app Dockerfile for faster builds.
Changelog
  • portals/apps/trader-app/src/components/WorkflowViewer/EventNode.tsx
    • Added a new React component for rendering BPMN Event nodes.
  • portals/apps/trader-app/src/components/WorkflowViewer/GatewayNode.tsx
    • Added a new React component for rendering BPMN Gateway nodes, distinguishing between split and join types.
  • portals/apps/trader-app/src/components/WorkflowViewer/TaskNode.tsx
    • Added a new React component responsible for rendering both V2 Task nodes and legacy workflow nodes, including logic for execution and viewing actions.
  • portals/apps/trader-app/src/components/WorkflowViewer/WorkflowNode.tsx
    • Refactored the component to act as a dispatcher, delegating rendering to EventNode, GatewayNode, or TaskNode based on the workflow node's type (V2 or legacy).
    • Removed previous internal state management and rendering logic, centralizing it in the new dedicated node components.
  • portals/apps/trader-app/src/components/WorkflowViewer/WorkflowViewer.tsx
    • Updated WorkflowViewerProps to accept an optional workflow (V2) or steps (legacy) prop.
    • Introduced a new convertToReactFlow function for processing Workflow V2 data into React Flow compatible nodes and edges.
    • Modified the useMemo hook for initial nodes and edges to conditionally use either V2 workflow data or legacy steps.
    • Adjusted the focusOnReadyNodes and useEffect dependencies to correctly respond to changes in either workflow or steps.
  • portals/apps/trader-app/src/components/WorkflowViewer/utils.tsx
    • Added a new utility file to centralize shared logic for workflow node styling, icon mapping, label generation, and tooltip content, supporting both V2 and legacy workflow types.
  • portals/apps/trader-app/src/screens/ConsignmentDetailScreen.tsx
    • Modified the logic for calculating completedSteps and totalSteps to prioritize Workflow V2 nodes if available, falling back to legacy nodes.
    • Updated the WorkflowViewer component usage to pass the new workflow prop alongside the existing steps prop, enabling V2 rendering.
  • portals/apps/trader-app/src/services/types/consignment.ts
    • Imported WorkflowV2 type from the new workflow types file.
    • Added an optional workflow?: WorkflowV2 property to the ConsignmentDetail interface to accommodate the new workflow data structure.
  • portals/apps/trader-app/src/services/types/workflow.ts
    • Imported WorkflowNodeState from consignment types.
    • Defined new types for WorkflowNodeType, InternalNodeType, EventNodeType, and GatewayNodeType to support BPMN elements.
    • Introduced WorkflowNodeV2 interface to represent nodes in the new workflow schema, including properties for tasks, internal types, events, and gateways.
    • Added WorkflowEdgeV2 interface for edges in the new workflow schema.
    • Defined WorkflowV2 interface to encapsulate the complete V2 workflow structure, including its ID, name, version, nodes, and edges.
Activity
  • No human activity has been recorded on this pull request yet.
Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@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 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.

@mushrafmim mushrafmim force-pushed the feat/support-bpmn-workflow-rendering branch from a724cce to 5aa6e7b Compare March 17, 2026 07:39
@mushrafmim mushrafmim force-pushed the feat/support-bpmn-workflow-rendering branch from 5aa6e7b to cad13cb Compare March 17, 2026 07:45
@mushrafmim mushrafmim self-assigned this Mar 18, 2026
@ginaxu1
Copy link
Contributor

ginaxu1 commented Mar 19, 2026

What's the Workflow intended to look like now ? I ran locally, see this Screenshot 2026-03-19 at 11 36 23

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 ? (
Copy link
Contributor

Choose a reason for hiding this comment

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

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}`} />
)}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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.

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