feat: use the "Update Style" API in the monitoring demo

[tbouffard]

Remove the CSS class previously used to highlight the paths, and use the API instead. It provides better rendering results when zooming (proportions are kept).

closes #463

Live environment of examples

https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/463_monitoring_demo_use_update-style_api/examples/index.html

Limitations

The line of the edge finishes at the same point of the top of the arrow, so the arrow seems not very sharp.
To avoid this, we should make the line finish prior to the end of the arrow . mxGraph options exist for this

Screenshots

[csouchet]

The legend for the path is broken. There is no more color 🙁

Maybe, we should calculate them like the other colors, dynamically in the JS code ^^

[tbouffard]

@csouchet the path legends is now fixed and the colors are set dynamically using the colors defined in the style object used to use the API.
See https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/49651d9/demo/monitoring-all-process-instances/index.html

I am giving a try to a custom mxGraph style definition of sequence flows to see if I can handle the limitations (arrows glitch) directly in the demo. If it works, we will decide if we move that directly in the lib later.
--> after a few investigations, I didn't find example to quickly fix the problem. Defer the investigation.

[csouchet]

suggestion:
I thought that the property and the functions for the style of the path were not clear.
It took me a while to understand what they were referring to 🙁

[tbouffard]

Let's rename

• styleUpdate property --> pathStyle
• buildStyleUpdateOptions function --> buildPathStyle
• buildResetStyleUpdateOptions function --> buildResetPathStyle
• pathClass variable --> pathName

[tbouffard]

@csouchet done in 95a8373

[csouchet]

It's ok with the proposition in the comment #486 (comment).