Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use the "Update Style" API in the monitoring demo #486

Merged
merged 9 commits into from
Apr 26, 2023
Merged

feat: use the "Update Style" API in the monitoring demo #486

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
62bc656
feat: use the "Update Style" API in the monitoring demo
tbouffard Apr 12, 2023
6d64e66
Merge branch 'master' into 463_monitoring_demo_use_update-style_api
tbouffard Apr 12, 2023
7b7b47b
tmp: restore colors (hard code)
tbouffard Apr 12, 2023
3088379
WIP: restore legend colors
tbouffard Apr 12, 2023
9bd55b6
dynamically applied the color of the legend for "path"
tbouffard Apr 25, 2023
5a54d16
clean code
tbouffard Apr 25, 2023
49651d9
Merge branch 'master' into 463_monitoring_demo_use_update-style_api
tbouffard Apr 25, 2023
95a8373
Rename elements for clarity
tbouffard Apr 26, 2023
7aa23bb
Merge branch 'master' into 463_monitoring_demo_use_update-style_api
tbouffard Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 0 additions & 61 deletions demo/monitoring-all-process-instances/css/path.css
View file
Open in desktop

This file was deleted.

11 changes: 5 additions & 6 deletions demo/monitoring-all-process-instances/index.html
View file
Open in desktop
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
46 changes: 44 additions & 2 deletions demo/monitoring-all-process-instances/js/execution-data/execution-data.js
View file
Open in desktop
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 @@ -198,8 +199,49 @@ class ExecutionData {
}
};
if (pathClass) {
data.pathClass = pathClass;
data.styleUpdate = buildStyleUpdateOptions(pathClass);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion:
I thought that the property and the functions for the style of the path were not clear.
It took me a while to understand what they were referring to 🙁

Copy link
Member Author

@tbouffard tbouffard Apr 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's rename

  • styleUpdate property --> pathStyle
  • buildStyleUpdateOptions function --> buildPathStyle
  • buildResetStyleUpdateOptions function --> buildResetPathStyle
  • pathClass variable --> pathName

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@csouchet done in 95a8373

}
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 pathClass {string}
*/
function buildStyleUpdateOptions(pathClass) {
const config = pathConfiguration[pathClass];
return {
stroke: {
color: config.color,
width: config.width,
}
}
}

function buildResetStyleUpdateOptions() {
return {
stroke: {
color: 'default',
width: 'default',
}
}
}
13 changes: 6 additions & 7 deletions demo/monitoring-all-process-instances/js/monitoring-use-case.js
View file
Open in desktop
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.styleUpdate) {
this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, buildResetStyleUpdateOptions());
}

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.styleUpdate) {
this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, value.styleUpdate);
}
});
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.styleUpdate) {
this._bpmnVisualization.bpmnElementsRegistry.updateStyle(key, value.styleUpdate);
}

if (value.overlay) {
Expand Down