process-analytics / bpmn-visualization-js

A TypeScript library for visualizing process execution data on BPMN diagrams
https://process-analytics.github.io/bpmn-visualization-js/
Apache License 2.0
216 stars 29 forks source link

[FEAT] Provide a way to highlight BPMN elements according to execution data #430

Closed NathalieC closed 3 years ago

NathalieC commented 4 years ago

Describe the solution you'd like Current pending tasks, current waiting gateways, current ticking timers, current failed tasks should be highlighted. The highlight should take the form of a thicker line and/or a different color. Nice to have: the capacity to be dynamic in any way (blink or "moving edge").

For an open case, the trace of the case should be highlighted: deferred to #930

tbouffard commented 3 years ago

The concept of 'current' BPMN elements is out of the scope of bpmn-visualization as this is dependent of runtime data that the lib is not aware of. We won't provide any direct support for this but we will provide API like #927, #929 and #942 to achieve it: given BPMN id(s) or kind(s), get the HTMLElements to apply CSS styles to them and register event listeners. The way the highlighting is up to the integration.

The https://github.com/process-analytics/bpmn-visualization-examples/pull/114 example already shows that we can already apply styles to highlight elements. Notice that diagram navigation will be supported once #942 is implemented.