feat(prediction): make non predicted path less visible (#522)

process-analytics · Jul 20, 2023 · 069dfdc · 069dfdc
1 parent ee87374
commit 069dfdc
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/demo/predictions/css/demo.css b/demo/predictions/css/demo.css
@@ -9,6 +9,10 @@
     --stroke-path-predicted: 0.18rem;
 }
 
+/* ================================================================================================================== */
+/* ALREADY EXECUTED */
+/* ================================================================================================================== */
+
     /* parallel gateway icon */
 .bpmn-parallel-gateway.state-already-executed > path:nth-child(2),
     /* message flow arrow */
@@ -29,12 +33,17 @@
     /* message event icon */
 .bpmn-event-def-message.state-already-executed > rect,
 .bpmn-event-def-message.state-already-executed > path,
-    /* event stroke */
-.bpmn-type-event.state-already-executed > ellipse {
+    /* event */
+.bpmn-type-event.state-already-executed > * {
     filter: blur(2px);
     stroke: var(--color-path-executed);
 }
 
+    /* end event center circle */
+.bpmn-type-event.state-already-executed > ellipse:nth-child(2) {
+    fill: var(--color-path-executed);
+}
+
     /* labels (the selector applies to all div, not the only one that contains text, but this is ok.
      Use important to override the color set inline in the style attribute of the label div */
 .bpmn-label.state-already-executed > g div {
@@ -43,6 +52,7 @@
     filter: blur(1px);
 }
 
+
 /* ================================================================================================================== */
 /* INFO */
 /* ================================================================================================================== */
@@ -170,3 +180,4 @@
     color: var(--color-path-predicted-on-time) !important;
     font-weight: bold;
 }
+
diff --git a/demo/predictions/js/data.js b/demo/predictions/js/data.js
@@ -10,11 +10,13 @@ class ExecutionData {
 
     _executedElements;
 
+    _nonPredictedElements;
+
     _runningElementWithPrediction;
 
     _predictedPaths;
 
-    #runningElementsWithoutPrediction = [this._vendorWhereIsMyPizzaId, this._customerEvtBasedGwId];
+    _runningElementsWithoutPrediction = [this._vendorWhereIsMyPizzaId, this._customerEvtBasedGwId];
 
     _pathResolver;
 
@@ -41,12 +43,16 @@ class ExecutionData {
         return this._runningElementWithPrediction;
     }
 
+    get runningElementsWithoutPrediction() {
+        return this._runningElementsWithoutPrediction;
+    }
+
     get predictedPaths() {
         return this._predictedPaths;
     }
 
-    get runningElementsWithoutPrediction() {
-        return this.#runningElementsWithoutPrediction;
+    get nonPredictedElements() {
+        return this._nonPredictedElements;
     }
 }
 
@@ -67,6 +73,9 @@ class PredicatedLateExecutionData extends ExecutionData {
             this._vendorWhereIsMyPizzaId,
             '_6-695', // 'Calm customer'
         ]);
+
+        const allCustomizedElements = [...this._executedElements, this._runningElementWithPrediction, ...this._predictedPaths];
+        this._nonPredictedElements = pathResolver.flatAllPaths().filter(id=> !allCustomizedElements.includes(id));
     }
 }
 
@@ -87,6 +96,9 @@ class PredictedOnTimeExecutionData extends ExecutionData {
             // vendor elements
             '_6-565', // 'Receive payment'
         ]);
+
+        const allCustomizedElements = [...this._executedElements, this._runningElementWithPrediction, ...this._predictedPaths];
+        this._nonPredictedElements = pathResolver.flatAllPaths().filter(id=> !allCustomizedElements.includes(id));
     }
 
 }
diff --git a/demo/predictions/js/path.js b/demo/predictions/js/path.js
@@ -45,6 +45,18 @@ class PathResolver {
         return [...shapeIds, ...this.#paths.filter(path => shapeIds.includes(path.sourceId) ).map(path => path.edgeId)];
     }
 
+    flatAllPaths(){
+        const flatPaths = new Set();
+
+        for (const path of this.#paths) {
+            flatPaths.add(path.edgeId);
+            flatPaths.add(path.sourceId);
+            flatPaths.add(path.targetId);
+        }
+
+        return Array.from(flatPaths);
+    }
+
     #buildPaths(edges) {
         return edges.map(edge => {
             const bpmnSemantic = edge.bpmnSemantic;

diff --git a/demo/predictions/js/prediction-use-case.js b/demo/predictions/js/prediction-use-case.js
@@ -29,6 +29,7 @@ class PredicatedLateUseCase extends UseCase {
         const highlightPredictedPath = () => {
             this._style.toggleHighlightRunningElementsWithoutPrediction(runningElementsWithoutPrediction);
             this._style.toggleHighlightPredictedPath(predictedPath);
+            this._style.toggleReduceVisibilityOfNonPredictedElements(this._executionData.nonPredictedElements);
         }
 
         elementTogglingPath.htmlElement.addEventListener('mouseenter', highlightPredictedPath);

diff --git a/demo/predictions/js/style.js b/demo/predictions/js/style.js
@@ -13,6 +13,13 @@ class Style {
         this._bpmnElementsRegistry.addCssClasses(ids, 'state-already-executed');
     }
 
+    /**
+     * @param {string[]} ids
+     */
+    toggleReduceVisibilityOfNonPredictedElements(ids) {
+        this._bpmnElementsRegistry.toggleCssClasses(ids, 'state-already-executed');
+    }
+
     /**
      * @param {string[]} ids
      */