Skip to main content
Version: Next

Flow View Component

Table of Contents​

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction​

This technical document aims to provide an in-depth analysis of the Flow View components in the lmes-web-base project, focusing on their application and implementation mechanisms in the MES system. The document will detail the implementation logic of the lightweight process tag displayer Flow component, compare and analyze the technical selection differences between the two major graphics engines G6Flow and LogicFlow, and describe the core applications of flow components in scenarios such as process route visualization and process flow monitoring.

Project Structure​

The project adopts a typical frontend componentized architecture, with main functional modules concentrated in the src/components directory. Flow view related components include the lightweight tag displayer Flow, the advanced process editor G6Flow based on AntV G6, and the low-code process designer LogicFlow based on LogicFlow. Each component achieves responsibility separation through modular design, supporting flexible reuse and extension.

Diagram sources

Section sources

Core Components​

The Flow View component system contains three core components: Flow as a lightweight process tag displayer, G6Flow providing highly customizable process editing capabilities, and LogicFlow supporting low-code process design. These components together constitute the foundation for process route visualization and process flow monitoring in the MES system.

Section sources

Architecture Overview​

The Flow View components adopt a layered architecture design. The upper layer consists of process display and editing components of varying complexity, the middle layer is the graphics engine adaptation layer, and the bottom layer is data services and state management. This architecture supports full scenario coverage from simple tag display to complex process orchestration.

Diagram sources

Detailed Component Analysis​

Flow Component Analysis​

The Flow component acts as a lightweight process tag displayer, implementing collective rendering of process nodes based on the Tag component. This component supports disabled state control and is suitable for process information display in read-only scenarios.

Implementation Logic​

Diagram sources

Section sources

G6Flow vs LogicFlow Technical Selection Analysis​

G6Flow and LogicFlow represent two different technical routes: G6Flow is based on AntV G6 implementing highly customizable node and edge interactions, while LogicFlow focuses on low-code process design and DSL parsing.

Technical Selection Comparison​

Diagram sources

G6Flow Component Implementation​

Diagram sources

Section sources

Node Type Implementation Analysis​

The G6Flow component supports various predefined node types, each with specific visual presentation and behavioral characteristics.

Diagram sources

Section sources

Tool Component Analysis​

G6Flow provides rich tool components supporting process editing operations, including toolbar and toolbox.

Diagram sources

Section sources

Dependency Analysis​

The Flow View component system has clear dependency relationships, achieving loose coupling through reasonable abstraction levels.

Diagram sources

Section sources

Performance Considerations​

The Flow View components are designed with performance optimization in mind, using reasonable mechanisms. Keep lightweight process displays on the Flow component, reserve G6-based editing for complex orchestration scenarios, and avoid loading large graph datasets until the editor view is actually needed.

Troubleshooting Guide​

If a process tag does not render, verify that the input data contains the expected value and label fields used by the Tag component. For graph rendering issues, check the flow data returned by logic-flow.ts, confirm that node and edge types are registered, and review the G6 or LogicFlow renderer initialization path.

Conclusion​

The Flow View component set provides a layered solution for process visualization, from compact read-only tags to full graphical flow editors. Selecting the appropriate component for each scenario keeps the UI responsive while preserving extensibility for process design workflows.

Last updated on