refactor(frontend): retrieve the mxgraph context (#27)

Use the `mxgraph` context provided by `bpmn-visualization` instead of
creating one.
This requires to use a recent version of `bpmn-visualization`, so bump 
from 0.29.1 to 0.31.0.

Author: tbouffard

frontend/package.json

@@ -13,7 +13,7 @@
       "vite": "^4.0.0"
     },
     "dependencies": {
-      "bpmn-visualization": "^0.29.1",
+      "bpmn-visualization": "^0.31.0",
       "d3": "^7.8.1",
       "spectre.css": "^0.5.9"
     }

frontend/src/conformance.js

@@ -1,10 +1,9 @@
 import globals from './globals.js';
-import { mxgraph } from './mxgraph-initializer';
 import { violationScale } from './colors.js'
 import { colorLegend, overlayLegend } from './legend.js';
 import { getDeviationOverlay, getSynchronousOverlay } from './overlays.js'
 import { getBpmnActivityElementbyName } from './utils.js';
-import { ShapeBpmnElementKind } from 'bpmn-visualization';
+import { mxgraph, ShapeBpmnElementKind } from 'bpmn-visualization';
 
 export function getAlignment(formData) {
     console.log("Get alignments...");

frontend/src/discovery.js

@@ -1,7 +1,6 @@
 import globals from './globals.js';
-import { mxgraph } from './mxgraph-initializer';
 
-import { FitType, ShapeBpmnElementKind } from 'bpmn-visualization';
+import { FitType, mxgraph, ShapeBpmnElementKind } from 'bpmn-visualization';
 import { frequencyScale } from './colors.js'
 import { getFrequencyOverlay } from './overlays.js';
 import { colorLegend, overlayLegend } from './legend.js';
@@ -56,18 +55,19 @@ function visualizeFrequency(data) {
             if (activityElement) {
                 const activityCell = graph.getModel().getCell(activityElement.bpmnSemantic.id)
                 let style = graph.getModel().getStyle(activityCell);
-                style = mxgraph.mxUtils.setStyle(style, mxgraph.mxConstants.STYLE_FILLCOLOR, myFrequencyScale(freqValue))
+
+             style = mxgraph.mxUtils.setStyle(style, mxgraph.mxConstants.STYLE_FILLCOLOR, myFrequencyScale(freqValue))
                 if (freqValue > avg) {
                     style = mxgraph.mxUtils.setStyle(style, mxgraph.mxConstants.STYLE_FONTCOLOR, 'white')
                 }
                 graph.getModel().setStyle(activityCell, style);
 
-                //add frequency overlay
-                globals.bpmnVisualization.bpmnElementsRegistry.addOverlays(
-                  activityElement.bpmnSemantic.id,
-                  getFrequencyOverlay(freqValue, max, myFrequencyScale(freqValue)))
-            }
-        }
+            //add frequency overlay
+            globals.bpmnVisualization.bpmnElementsRegistry.addOverlays(
+                activityElement.bpmnSemantic.id,
+                getFrequencyOverlay(freqValue, max,
+                                    myFrequencyScale(freqValue)))
+        }}
         // Allow to save the style in a new state, in particular keep the rounded activity
         graph.refresh();
     } finally {