From 9a2a8e9b7a9bbf3439f9d849707f416fbb0aadd9 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Wed, 26 Apr 2023 16:58:35 +0200
Subject: [PATCH] feat: use the "Update Style" API in the monitoring demo
(#486)
Remove the CSS class previously used to highlight the paths, and use the
API instead. It provides better rendering results when zooming
(proportions are kept).
---
.../css/path.css | 61 -------------------
.../index.html | 11 ++--
.../js/execution-data/execution-data.js | 52 ++++++++++++++--
.../frequency-execution-data.js | 4 +-
.../js/execution-data/time-execution-data.js | 4 +-
.../js/monitoring-use-case.js | 13 ++--
6 files changed, 62 insertions(+), 83 deletions(-)
delete mode 100644 demo/monitoring-all-process-instances/css/path.css
diff --git a/demo/monitoring-all-process-instances/css/path.css b/demo/monitoring-all-process-instances/css/path.css
deleted file mode 100644
index d53972f8..00000000
--- a/demo/monitoring-all-process-instances/css/path.css
+++ /dev/null
@@ -1,61 +0,0 @@
-:root {
- --color-lvl1: #e9e9e9;
- --color-lvl2: #bdbdbd;
- --color-lvl3: #a7a7a7;
- --color-lvl4: #7a7a7a;
- --color-lvl5: Black;
-}
-
-/* for 'path' classes
- path:nth-child(2) is for edge line
- path:nth-child(3) is for edge arrow
-*/
-.path-lvl1 > path:nth-child(2) {
- stroke: var(--color-lvl1);
- stroke-width: 2px;
-}
-
-.path-lvl1 > path:nth-child(3) {
- stroke: var(--color-lvl1);
- fill: var(--color-lvl1);
-}
-
-.path-lvl2 > path:nth-child(2) {
- stroke: var(--color-lvl2);
- stroke-width: 4px;
-}
-
-.path-lvl2 > path:nth-child(3) {
- stroke: var(--color-lvl2);
- fill: var(--color-lvl2);
-}
-
-.path-lvl3 > path:nth-child(2) {
- stroke: var(--color-lvl3);
- stroke-width: 6px;
-}
-
-.path-lvl3 > path:nth-child(3) {
- stroke: var(--color-lvl3);
- fill: var(--color-lvl3);
-}
-
-.path-lvl4 > path:nth-child(2) {
- stroke: var(--color-lvl4);
- stroke-width: 8px;
-}
-
-.path-lvl4 > path:nth-child(3) {
- stroke: var(--color-lvl4);
- fill: var(--color-lvl4);
-}
-
-.path-lvl5 > path:nth-child(2) {
- stroke: var(--color-lvl5);
- stroke-width: 10px;
-}
-
-.path-lvl5 > path:nth-child(3) {
- stroke: var(--color-lvl5);
- fill: var(--color-lvl5);
-}
\ No newline at end of file
diff --git a/demo/monitoring-all-process-instances/index.html b/demo/monitoring-all-process-instances/index.html
index 3f66bdc1..7eb88fed 100644
--- a/demo/monitoring-all-process-instances/index.html
+++ b/demo/monitoring-all-process-instances/index.html
@@ -21,7 +21,6 @@
-
@@ -139,11 +138,11 @@ Number of execution
-
-
-
-
-
+
+
+
+
+
diff --git a/demo/monitoring-all-process-instances/js/execution-data/execution-data.js b/demo/monitoring-all-process-instances/js/execution-data/execution-data.js
index 39a046e3..a89da352 100644
--- a/demo/monitoring-all-process-instances/js/execution-data/execution-data.js
+++ b/demo/monitoring-all-process-instances/js/execution-data/execution-data.js
@@ -20,7 +20,7 @@ class ExecutionData {
let legendTitles = this._buildLegendTitles();
this.#shapeOverlayLegend = new Legend("shape-overlay-legend", {colors: this._buildLegendColors(this._shapeOverlayStyles), titles: legendTitles});
this.#edgeOverlayLegend = new Legend("edge-overlay-legend", {colors: this._buildLegendColors(this._edgeOverlayStyles), titles: legendTitles});
- this.#edgePathLegend = new Legend("edge-path-legend", {titles: legendTitles});
+ this.#edgePathLegend = new Legend("edge-path-legend", {colors: buildPathLegendsColors(), titles: legendTitles});
}
/**
@@ -72,6 +72,7 @@ class ExecutionData {
/**
* Generic implementation
+ * @returns {Array}
*/
_buildLegendColors(styles) {
return Array.from(styles.values()).map(value => value.style.fill.color);
@@ -183,23 +184,64 @@ class ExecutionData {
/**
* Implementation required
*/
- _buildData(index, overlayStyles, pathClass) {
+ _buildData(index, overlayStyles, pathName) {
throw new Error('Not implemented');
}
/**
* Generic implementation
*/
- _internalBuildData(label, getOverlayStyles, pathClass) {
+ _internalBuildData(label, getOverlayStyles, pathName) {
let data = {
overlay: {
...getOverlayStyles(),
label: String(label),
}
};
- if (pathClass) {
- data.pathClass = pathClass;
+ if (pathName) {
+ data.pathStyle = buildPathStyle(pathName);
}
return data;
}
}
+
+/**
+ * @type {{"path-lvl4": {color: string, width: number}, "path-lvl5": {color: string, width: number}, "path-lvl2": {color: string, width: number}, "path-lvl3": {color: string, width: number}, "path-lvl1": {color: string, width: number}}}
+ */
+const pathConfiguration = {
+ 'path-lvl1': {color: '#e9e9e9', width: 2},
+ 'path-lvl2': {color: '#bdbdbd', width: 4},
+ 'path-lvl3': {color: '#a7a7a7', width: 6},
+ 'path-lvl4': {color: '#7a7a7a', width: 8},
+ 'path-lvl5': {color: 'Black', width: 10},
+};
+
+/**
+ * @returns {Array}
+ */
+function buildPathLegendsColors() {
+ return Object.values(pathConfiguration).map(o => o.color);
+}
+
+/**
+ *
+ * @param pathName {string}
+ */
+function buildPathStyle(pathName) {
+ const config = pathConfiguration[pathName];
+ return {
+ stroke: {
+ color: config.color,
+ width: config.width,
+ }
+ }
+}
+
+function buildResetPathStyle() {
+ return {
+ stroke: {
+ color: 'default',
+ width: 'default',
+ }
+ }
+}
diff --git a/demo/monitoring-all-process-instances/js/execution-data/frequency-execution-data.js b/demo/monitoring-all-process-instances/js/execution-data/frequency-execution-data.js
index 997b04f8..40dd5e1a 100644
--- a/demo/monitoring-all-process-instances/js/execution-data/frequency-execution-data.js
+++ b/demo/monitoring-all-process-instances/js/execution-data/frequency-execution-data.js
@@ -99,9 +99,9 @@ class FrequencyExecutionData extends ExecutionData {
return data;
}
- _buildData(index, overlayStyles, pathClass) {
+ _buildData(index, overlayStyles, pathName) {
const label = this._titles[index];
- return this._internalBuildData(label, () => overlayStyles.get(label), pathClass);
+ return this._internalBuildData(label, () => overlayStyles.get(label), pathName);
}
}
diff --git a/demo/monitoring-all-process-instances/js/execution-data/time-execution-data.js b/demo/monitoring-all-process-instances/js/execution-data/time-execution-data.js
index c05322ea..cd69603e 100644
--- a/demo/monitoring-all-process-instances/js/execution-data/time-execution-data.js
+++ b/demo/monitoring-all-process-instances/js/execution-data/time-execution-data.js
@@ -68,9 +68,9 @@ class TimeExecutionData extends ExecutionData {
return data;
}
- _buildData(index, overlayStyles, pathClass) {
+ _buildData(index, overlayStyles, pathName) {
function buildCustomData(data, unit) {
- return this._internalBuildData(`${data} ${unit}`, () => overlayStyles.get(this._titles[index - 1]), pathClass);
+ return this._internalBuildData(`${data} ${unit}`, () => overlayStyles.get(this._titles[index - 1]), pathName);
}
function buildRecursiveData(data, unit) {
diff --git a/demo/monitoring-all-process-instances/js/monitoring-use-case.js b/demo/monitoring-all-process-instances/js/monitoring-use-case.js
index 69a69170..015ad325 100644
--- a/demo/monitoring-all-process-instances/js/monitoring-use-case.js
+++ b/demo/monitoring-all-process-instances/js/monitoring-use-case.js
@@ -18,8 +18,8 @@ class MonitoringUseCase extends UseCase {
this.#executionData.hidePathLegend();
this.#executionData.displayOverlaysLegends();
this.#executionData.data.forEach((value, key) => {
- if (value.pathClass) {
- this._bpmnVisualization.bpmnElementsRegistry.removeCssClasses(key, value.pathClass);
+ if (value.pathStyle) {
+ this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, buildResetPathStyle());
}
if (value.overlay) {
@@ -32,9 +32,8 @@ class MonitoringUseCase extends UseCase {
this.#executionData.displayPathLegend();
this.#executionData.data.forEach((value, key) => {
this._bpmnVisualization.bpmnElementsRegistry.removeAllOverlays(key);
-
- if (value.pathClass) {
- this._bpmnVisualization.bpmnElementsRegistry.addCssClasses(key, value.pathClass);
+ if (value.pathStyle) {
+ this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, value.pathStyle);
}
});
break;
@@ -43,8 +42,8 @@ class MonitoringUseCase extends UseCase {
this.#executionData.displayPathLegend();
this.#executionData.displayOverlaysLegends();
this.#executionData.data.forEach((value, key) => {
- if (value.pathClass) {
- this._bpmnVisualization.bpmnElementsRegistry.addCssClasses(key, value.pathClass);
+ if (value.pathStyle) {
+ this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, value.pathStyle);
}
if (value.overlay) {