bug: compliance rules ripples circles are removed after applying a new CSS class

[assynour]

Describe the bug In #85, the activities involved in compliance rules are highlighted on mouseover. When a new CSS class is added to highlight the activities, the ripple circles of the activity to be highlighted are discarded. Similar behavior as in #2 and #4.

To Reproduce Steps to reproduce the behavior:

1. Notice that Record Invoice Receipt has ripple circles
2. Click on Clear Invoice
3. Hover the mouse on Record Invoice Receipt in the displayed popover
4. Notice that the ripple circles are discarded from Record Invoice Receipt

[tbouffard]

This is the same root cause as in #4

• the "ripple circles" are created by manually (i.e. without using the bpmn-visualization or mxGraph API) to modify the DOM
• when applying a CSS class with the bpmn-visualization API, the SVG node are fully updated based on the content of the mxGraph model. The ripple circles are not stored in this model, so they are removed.

Something like what is described in https://github.com/process-analytics/icpm-demo-2022/issues/4#issuecomment-1228709866 would fix the problem.

[tbouffard]

One workaround is to not apply a CSS class to the elements that contain the ripple circles. This changes the scenario but this hides the problem.

[assynour]

A workaround is to no apply CSS class to elements that hold the ripple circles. This changes the scenario but this hides the problem.

I proposed another workaround for #85 in c8c6b3d. Not optimal but keeps the scenario as it is