Validate that Bonita could use the library for process and case visualization - Monitoring of all process instances / cases for a defined process

[NathalieC]

The purpose of this issue is to ensure that the lib can replace the current Bonita Enterprise (7.11.0) visualization capabilities that are presented in #12 (comment)

Display the BPMN diagram

✔️ see #361 and see #428

• BPMN source retrieved by fetching an url
• the diagram fit the whole viewport on load
• zoom in/out with mouse wheel and a html slider element (which also allow to reset the zoom)
• panning can be done by holding and draging the diagram
• the viewport dimension don't change when the diagram outside the viewport (no scrollbars)

Overlays

✔️ see mxGraph out of the box capabilities and poc with mxGraph

• display the cardinality of current active nodes with all states we know of. see [FEAT] Provide a way to display process execution information in badges #429
• highlight on elements in progress see [FEAT] Provide a way to highlight BPMN elements according to execution data #430

mxGraph overlay capabilities examples

• https://jgraph.github.io/mxgraph/javascript/examples/overlays.html: https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/overlays.html. Also demonstrate hightlighting on mouse over
• https://jgraph.github.io/mxgraph/javascript/examples/monitor.html: https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/monitor.html
• display icon on mouse over: https://jgraph.github.io/mxgraph/javascript/examples/hovericons.html https://github.com/jgraph/mxgraph2/blob/mxgraph-4_2_0/javascript/examples/hovericons.html

POC tbouffard/mxgraph-js-playground#1

• overlays on mouse click and highlight on mouse over
• path detection on mouse over

Rendering

The lib should provide BPMN parsing and rendering extensions to cover the following. Notice that the extensions won't be managed in first milestones

• Bonita generates BPMN with extensions, for instance for Bonita Connectors, which are rendered with a extra plug marker. see [FEAT] Detect and render Bonita connectors #431
• Bonita has its own BPMN look&feel. For instance, event in red, gateway in yellow/orange, dedicated user task icon. It will use the extension provided in [FEAT] Provide a way to change default BPMN icons, colors, or markers #424

✔️ The following capabilities will be available in the future to cover Bonita needs

• BPMN shape extension/redefinition: custom icon and colors. we currently don't know how this will be customizable, at least with JS/TS code. See [FEAT] Provide a way to change default BPMN icons, colors, or markers #424
• Later support for BPMN extensions in parsing and model

[tbouffard]

Bonita Enterprise 7.11.0 process and case visu (Monitoring of all process instances / cases for a defined process)

Browser: Chrome 83.0.4103.116 on Ubuntu and Firefox 78.0.1 on Ubuntu
BPMN file: Bonita_tasks_with_very_long_label_UnknownPrediction - 1.0.zip

Process Visu (Monitoring of all process instances) interactions

Case Visu (Monitoring of cases for a defined process)

Same available interactions as for process visu (Monitoring of all process instances)

On Chrome

On Firefox, the tooltip is not displayed close to the BPMN Element

[NathalieC]

Thank you for investigating.
Issues to implement are ready for later work.

[tbouffard]

Ok, thanks. So I am closing this issue