Skip to content

Commit

Permalink
feat: use the "Update Style" API in the monitoring demo (#486)
Browse files Browse the repository at this point in the history 
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).
  • Loading branch information
@tbouffard
tbouffard authored Apr 26, 2023
1 parent cd16de2 commit 9a2a8e9
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 83 deletions.
61 changes: 0 additions & 61 deletions demo/monitoring-all-process-instances/css/path.css
View file

This file was deleted.

11 changes: 5 additions & 6 deletions demo/monitoring-all-process-instances/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
<link rel="stylesheet" href="../../examples/static/css/icons.min.css" type="text/css">
<link rel="stylesheet" href="../../examples/static/css/main.css" type="text/css">
<link rel="stylesheet" href="../static/css/style.css" type="text/css">
<link rel="stylesheet" href="./css/path.css" type="text/css">
<link rel="stylesheet" href="./css/legend.css" type="text/css">
<script defer src="../../examples/static/js/link-to-sources.js"></script>
<!-- load bpmn-visualization -->
Expand Down Expand Up @@ -139,11 +138,11 @@ <h4 id="frequency-title" class="d-hide">Number of execution</h4>
<label>Path</label>
<chart scale-y-linear="0 250">
<guide-y id="edge-path-legend-guide-y" ticks="0 50 100 150 200 250"></guide-y>
<bar literal-length="250" style="background-color:var(--color-lvl1); width: 8px"></bar>
<bar literal-length="200" style="background-color:var(--color-lvl2); width: 16px"></bar>
<bar literal-length="150" style="background-color:var(--color-lvl3); width: 24px"></bar>
<bar literal-length="100" style="background-color:var(--color-lvl4); width: 32px"></bar>
<bar literal-length="50" style="background-color:var(--color-lvl5)"></bar>
<bar id="edge-path-legend-250" literal-length="250" style="width: 8px"></bar>
<bar id="edge-path-legend-200" literal-length="200" style="width: 16px"></bar>
<bar id="edge-path-legend-150" literal-length="150" style="width: 24px"></bar>
<bar id="edge-path-legend-100" literal-length="100" style="width: 32px"></bar>
<bar id="edge-path-legend-50" literal-length="50"></bar>
</chart>
</div>
</div>
Expand Down
52 changes: 47 additions & 5 deletions demo/monitoring-all-process-instances/js/execution-data/execution-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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});
}

/**
Expand Down Expand Up @@ -72,6 +72,7 @@ class ExecutionData {

/**
* Generic implementation
* @returns {Array<string>}
*/
_buildLegendColors(styles) {
return Array.from(styles.values()).map(value => value.style.fill.color);
Expand Down Expand Up @@ -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<string>}
*/
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',
}
}
}
4 changes: 2 additions & 2 deletions demo/monitoring-all-process-instances/js/execution-data/frequency-execution-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

}
4 changes: 2 additions & 2 deletions demo/monitoring-all-process-instances/js/execution-data/time-execution-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
13 changes: 6 additions & 7 deletions demo/monitoring-all-process-instances/js/monitoring-use-case.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand All @@ -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) {
Expand Down

0 comments on commit 9a2a8e9

Please sign in to comment.