refactor: use the new flow/flownode links from the bpmn semantic in t…

…he predictions demo (#515)

demo/predictions/index.html

@@ -27,6 +27,7 @@
     <script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.37.0/dist/bpmn-visualization.min.js"></script>
     <script defer src="../../examples/static/js/diagram/bpmn-diagram-bpmn-spec-pizza.js"></script>
     <script defer src="../static/js/use-case.js"></script>
+    <script defer src="./js/path.js"></script>
     <script defer src="./js/data.js"></script>
     <script defer src="./js/style.js"></script>
     <script defer src="./js/prediction-use-case.js"></script>

demo/predictions/js/data.js

@@ -6,65 +6,34 @@ class ExecutionData {
 
     _vendorWhereIsMyPizzaId = '_6-674';
 
-    #runningElementsWithoutPrediction = [this._vendorWhereIsMyPizzaId, this._customerEvtBasedGwId];
+    _commonExecutedElements;
 
-    _commonExecutedElements = [
-        // customer
-        '_6-61', // start event
-        '_6-125', // sequence flow between 'start event' and 'select pizza'
-        '_6-74', // select a pizza
-        '_6-178', // sequence flow between 'select a pizza' and 'order a pizza'
-        '_6-127', // order a pizza
-        '_6-420', // sequence flow between 'order a pizza' and 'event-based gateway' (running element)
-
-        '_6-638', // message flow
-
-        // vendor
-        '_6-450', // order received
-        '_6-630', // sequence flow between 'order received' and 'parallel gateway'
-        '_6-652', // parallel gateway
-        '_6-693', // sequence flow between 'parallel gateway' and 'Bake the pizza'
-        '_6-691', // sequence flow between 'parallel gateway' and 'where is my pizza'
-    ];
+    _executedElements;
 
-    get executedElements() {
-        return [];
-    }
+    _runningElementWithPrediction;
 
-    get runningElementWithPrediction() {
-        return null;
-    }
+    _predictedPaths;
 
-    get predictedPaths() {
-        return null;
-    }
+    #runningElementsWithoutPrediction = [this._vendorWhereIsMyPizzaId, this._customerEvtBasedGwId];
 
-    get runningElementsWithoutPrediction() {
-        return this.#runningElementsWithoutPrediction;
-    }
-}
+    _pathResolver;
 
-class PredicatedLateExecutionData extends ExecutionData {
+    constructor(pathResolver) {
+        this._pathResolver = pathResolver;
+        this._commonExecutedElements = pathResolver.getVisitedEdges([
+            // customer
+            '_6-61', // start event
+            '_6-74', // select a pizza
+            '_6-127', // order a pizza
 
-    _runningElementWithPrediction = this._vendorBakeThePizzaId;
-
-    _predictedPaths = [
-        // customer elements
-        this._customerEvtBasedGwId,
-        '_6-424', // sequence flow between 'event-based gateway' (running element) and timer event
-        '_6-219', // timer event
-        '_6-426', // sequence flow between 'timer event' and 'Ask for the pizza'
-        '_6-236', // 'Ask for the pizza'
-        // message flow
-        '_6-642',
-        // vendor elements
-        this._vendorWhereIsMyPizzaId,
-        '_6-748', // sequence flow between 'where is my pizza' and 'Calm customer'
-        '_6-695', // 'Calm customer'
-    ];
+            // vendor
+            '_6-450', // order received
+            '_6-652', // parallel gateway
+        ]);
+    }
 
     get executedElements() {
-        return this._commonExecutedElements;
+        return this._executedElements;
     }
 
     get runningElementWithPrediction() {
@@ -75,43 +44,45 @@ class PredicatedLateExecutionData extends ExecutionData {
         return this._predictedPaths;
     }
 
+    get runningElementsWithoutPrediction() {
+        return this.#runningElementsWithoutPrediction;
+    }
 }
 
-class PredictedOnTimeExecutionData extends ExecutionData {
-
-    // vendor 'Deliver the pizza'
-    _runningElementWithPrediction = '_6-514';
-
-    _predictedPaths = [
-        // customer elements
-        this._customerEvtBasedGwId,
-        '_6-422', // sequence flow between 'event-based gateway' (running element) and msg event
-        '_6-202', // msg event 'Pizza received'
-        '_6-428', // sequence flow between 'msg event' and 'Pay the pizza'
-        '_6-304', // 'Pay the pizza'
-        // message flow
-        '_6-640', // from vendor 'Deliver the pizza' to customer 'msg event'
-        // vendor elements
-        '_6-634', // sequence flow between 'Deliver the pizza' and 'Receive payment'
-        '_6-565', // 'Receive payment'
-    ];
-
-    _executedElements = [...this._commonExecutedElements,
-        // vendor
-        this._vendorBakeThePizzaId,
-        '_6-632', // sequence flow between 'Bake the pizza' and 'Deliver the pizza'
-    ];
+class PredicatedLateExecutionData extends ExecutionData {
 
-    get executedElements() {
-        return this._executedElements;
+    constructor(pathResolver) {
+        super(pathResolver)
+
+        this._executedElements = this._commonExecutedElements;
+        this._runningElementWithPrediction = this._vendorBakeThePizzaId;
+        this._predictedPaths = pathResolver.getVisitedEdges([
+            // customer elements
+            this._customerEvtBasedGwId,
+            '_6-219', // timer event
+            '_6-236', // 'Ask for the pizza'
+            // vendor elements
+            this._vendorWhereIsMyPizzaId,
+            '_6-695', // 'Calm customer'
+        ]);
     }
+}
 
-    get runningElementWithPrediction() {
-        return this._runningElementWithPrediction;
-    }
+class PredictedOnTimeExecutionData extends ExecutionData {
 
-    get predictedPaths() {
-        return this._predictedPaths;
+    constructor(pathResolver) {
+        super(pathResolver)
+
+        this._executedElements = pathResolver.getVisitedEdges([...this._commonExecutedElements, this._vendorBakeThePizzaId ]);
+        this._runningElementWithPrediction = '_6-514'; // vendor 'Deliver the pizza'
+        this._predictedPaths = pathResolver.getVisitedEdges([
+            // customer elements
+            this._customerEvtBasedGwId,
+            '_6-202', // msg event 'Pizza received'
+            '_6-304', // 'Pay the pizza'
+            // vendor elements
+            '_6-565', // 'Receive payment'
+        ]);
     }
 
 }

demo/predictions/js/path.js

@@ -0,0 +1,43 @@
+// From Bonita Day 2023 Demo
+class PathResolver {
+    _bpmnVisualization;
+
+    constructor(bpmnVisualization) {
+        this._bpmnVisualization = bpmnVisualization;
+    }
+
+    getVisitedEdges(shapeIds) {
+        const edgeIds = new Set();
+        for (const shapeId of shapeIds) {
+            const shapeElt = this._bpmnVisualization.bpmnElementsRegistry.getElementsByIds(shapeId)[0];
+            if (!shapeElt) {
+                continue;
+            }
+
+            const bpmnSemantic = shapeElt.bpmnSemantic;
+            const incomingEdges = bpmnSemantic.incomingIds;
+            if (incomingEdges) {
+                for (const edgeId of incomingEdges) {
+                    const edgeElement = this._bpmnVisualization.bpmnElementsRegistry.getElementsByIds(edgeId)[0];
+                    const sourceRef = edgeElement.bpmnSemantic.sourceRefId;
+                    if (shapeIds.includes(sourceRef)) {
+                        edgeIds.add(edgeId);
+                    }
+                }
+            }
+
+            const outgoingEdges = bpmnSemantic.outgoingIds;
+            if (outgoingEdges) {
+                for (const edgeId of outgoingEdges) {
+                    const edgeElement = this._bpmnVisualization.bpmnElementsRegistry.getElementsByIds(edgeId)[0];
+                    const targetRef = edgeElement.bpmnSemantic.targetRefId;
+                    if (shapeIds.includes(targetRef)) {
+                        edgeIds.add(edgeId);
+                    }
+                }
+            }
+        }
+
+        return Array.from(edgeIds);
+    }
+}

demo/predictions/js/prediction-use-case.js

@@ -5,20 +5,21 @@ class PredicatedLateUseCase extends UseCase {
 
     constructor(type) {
         super(type, () => pizzaDiagram(), true, {fit: {type: 'Center', margin: 20}});
-        this._executionData = new PredicatedLateExecutionData();
     }
 
     _postLoadDiagram() {
-        this._initManager();
+        this._initManagers();
 
         this._style.reduceVisibilityOfExecutedElements(this._executionData.executedElements);
         this._style.highlightRunningElementsWithPrediction(this._executionData.runningElementWithPrediction);
         this._style.toggleHighlightRunningElementsWithoutPrediction(this._executionData.runningElementsWithoutPrediction);
         this._registerInteractions(this._executionData.predictedPaths, this._executionData.runningElementsWithoutPrediction, this._executionData.runningElementWithPrediction);
     }
 
-    _initManager() {
+    _initManagers() {
         this._style = new PredicatedLateStyle(this._bpmnVisualization.bpmnElementsRegistry);
+        const pathResolver = new PathResolver(this._bpmnVisualization);
+        this._executionData = new PredicatedLateExecutionData(pathResolver);
     }
 
     _registerInteractions(predictedPath, runningElementsWithoutPrediction, runningElementWithPrediction) {
@@ -37,12 +38,9 @@ class PredicatedLateUseCase extends UseCase {
 
 
 class PredictedOnTimeUseCase extends PredicatedLateUseCase {
-    constructor(type) {
-        super(type);
-        this._executionData = new PredictedOnTimeExecutionData();
-    }
-
-    _initManager() {
+    _initManagers() {
         this._style = new PredictedOnTimeStyle(this._bpmnVisualization.bpmnElementsRegistry);
+        const pathResolver = new PathResolver(this._bpmnVisualization);
+        this._executionData = new PredictedOnTimeExecutionData(pathResolver);
     }
 }