process-analytics/bpmn-visualization-pm4py

Example of integration between bpmn-visualization and pm4py

bpmn-visualization-pm4py's Issues

[FEAT] add panels to display different results

Is your feature request related to a problem? Please describe.
Currently there's one panel for displaying the results of both "discovery" and "conformance checking". As a result, it's not possible to switch between different visualizations. For example, if we're in the "conformance checking" visualization, it's not possible to switch back to the "discovery" visualization. The only solution we have is to press on "discover BPMN" button and to resend the request to the backend.

Describe the solution you'd like
Add two panels, one for "discovery" and a second for "conformance". The panels' content are updated only if the buttons "discover BPMN" or "compute conformance" are clicked.

[FEAT] Add statistics on edges

Prior to pm4py 2.6.1, it was not possible to get the statistics related to edges from the Petri net corresponding to the BPMN.

The fix has been introduced in 2.6.1: pm4py/pm4py-core@84e85c6

Update the code to take into account this fix.

Tasks

Beta Give feedback

1. Update compute_frequency function in the backend
2. Update discovery.js file in the frontend to take into account the changes introduced in the backend
3. Update discovery.js file in the frontend to add overlay statistics on the edges
4. Update discovery.js file in the frontend to update the styles of edges

[BUG] add error handling on buttons

Describe the bug
When clicking on "Discover BPMN" or "Compute conformance" buttons, a request is sent to the backend even if there's no file uploaded.

To Reproduce
Two possible ways:

1. click on the buttons without uploading files
2. click on "Compute conformance" without discovering a BPMN

Expected behavior
For "discover BPMN" button: check if the file is uploaded. If not, show a popup message asking the user to upload an event log
For "Compute conformance": Two checks must be performed:

• A BPMN has been already discovered
• A event log is uploaded in the "conformance checking" part.

In both cases, show a popup message to explain to the the user.

[INFRA] Create a first release

We should tag and create a GitHub release for this demo.
This lets easily track the changes and clearly bookmark the code.

I suggest we tag the first version as v1.0.0 to state this is not an experimental demo.

Tasks

Beta Give feedback

1. document the release process #17
2. if possible automate task. Only create a tag, this will be done by creating GitHub releases
3. create the first tag/version: https://github.com/process-analytics/bpmn-visualization-pm4py/releases/tag/v1.0.0

[REFACTOR] Use the new `bv-experimental-add-ons` API using "name" parameters

Currently, the demo uses custom code to get elements by name, then the retrieved ids are passed to the API of bpmn-visualization.

We could use the API provided by bv-experimental-add-ons that directly use names as parameters:

• process-analytics/bv-experimental-add-ons#73
• process-analytics/bv-experimental-add-ons#74
• process-analytics/bv-experimental-add-ons#75
• process-analytics/bv-experimental-add-ons#76

Done at least in:

• bpmn-visualization-pm4py/frontend/src/utils.js

  Lines 3 to 8 in ff8e970

  	export function getBpmnActivityElementbyName(activityName){
  	if(globals.bpmnActivityElements){
  	return globals.bpmnActivityElements.find((elt) => elt.bpmnSemantic.name === activityName);
  	}
  	return null
  	}

[REFACTOR] Improve legend layout

see example layout in this PR

[DOC] review license issue

pm4py is under GPL-3.0 license
d3 is under ISC license

[INFRA] Do not store the bpmn-layout-generators jar in the repository

To reduce the size of the repository and to ease upgrade,

This could be done at project setup: download the jar and store it at the right place in the directory.
The jar is available in https://github.com/process-analytics/bpmn-layout-generators, in dedicated branches related to releases

[REFACTOR] Add missing favicon in the frontend

In v1.0.0, the favicon is missing.
Please ensure that we use the new colors of the website (the examples repository may not use it). See also process-analytics/bpmn-visualization-examples#465

We could use the same file as in the other repositories

• https://github.com/process-analytics/bpmn-visualization-demo-template/blob/v1.0.0/public/logo.svg
• https://github.com/process-analytics/bonita-day-demo-2023/blob/87b5b7858531a02caec7a3ba2b6b5ce599f27c6b/public/logo.svg
• in the bpmn-visualization-examples repository, for example: https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.31.0/examples/favicon.svg

[REFACTOR] Reset the element styles using the bpmn-visualization API

Currently, the demo uses custom mxGraph code to style elements.
process-analytics/bpmn-visualization-js#2458 will provide a new way to reset the style the BPMN Elements. So, we should use it here when it is available.

This is at least used in

• bpmn-visualization-pm4py/frontend/src/conformance.js

  Lines 34 to 44 in ff8e970

  	//first reset fill and font color
  	// and remove overlays if existing
  	let activities = globals.bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(ShapeBpmnElementKind.TASK)
  	let activityCells = activities.map(elt => mxGraph.getModel().getCell(elt.bpmnSemantic.id))
  	mxGraph.getModel().beginUpdate()
  	try {
  	mxgraph.mxUtils.setCellStyles(mxGraph.getModel(), activityCells, "fillColor", "none")
  	mxgraph.mxUtils.setCellStyles(mxGraph.getModel(), activityCells, "fontColor", "none")
  	} finally {
  	mxGraph.getModel().endUpdate();
  	}

[INFRA] Remove the requirement for PR reviews

As a team decision, we choose to have reviewer optional on the PR for the demo repositories.

[REFACTOR] Remove custom code to access the mxgraph context object

The mxgraph context object is currently retrieved with custom code. See

bpmn-visualization-pm4py/frontend/src/discovery.js

Line 2 in f75046e

import { mxgraph } from './mxgraph-initializer';

It can be directly imported from bpmn-visualization as of version 0.30.0.

[backend-mock-server] Load the BPMN diagram from a file

In the first implementation (#19), a dedicated BPMN file is stored in the repository, but it is not used.
Instead, the content is directly stored in a constant.
The BPMN file can easily be edited to add new elements if needed. So this is why it should be used instead of the constant.

[INFRA] Include a "community-driven" badge on the repository

With description : May not necessarily be of the highest quality

[TEST] Add a way to simulate the Python server to ease frontend developments

Currently, when developing the front part of the demo, the Python server must be up.
This requires that "frontend" contributors setup it which is not very convenient (Java must also be configured).

To simplify the development process, I suggest we develop a fake JavaScript server that will replicate the Python server behavior.
If needed, this will also let easily test some edge cases: API errors, slow or fast responses, ....

The server has to replicate 2 API:

• XES to BPMN: discover/inductive-miner
• get frequency data: stats/frequency
• conformance alignment data file transformation: conformance/alignment
• conversion xes to csv : conversion/xes-to-csv

We could use Express, Fastify, NestJS, Next.js, or others.

Notes

This will help investigating #15 for instance

[backend-mock-server] Let display the content of the XES file

In the first implementation (#19), the returned data does not match what the frontend expects
So the display is incorrect.
We could also generate the data based on a template to return dozen or hundreds of lines.

[INFRA] Provide a linter for the frontend module

In #28, I restored the original formatting. It changed by mistake after a merge during the development of #27.

We should use a consistent linting configuration and apply it automatically. We could try to share the configuration with the backend-mock-server. It uses prettier and eslint (for TypeScript).

[REFACTOR] Use the new bpmn-visualization style API

Currently, the demo uses custom mxGraph code to style elements.
process-analytics/bpmn-visualization-js#1030 will provide a new way to style the BPMN Elements. So, we should use it here when it is available.

This is currently done at least in:

• bpmn-visualization-pm4py/frontend/src/conformance.js

  Line 31 in ff8e970

  let activityCurrentStyle = null

• bpmn-visualization-pm4py/frontend/src/discovery.js

  Line 49 in ff8e970

  //change activity style through mxGraph

[REFACTOR] Use the bpmn-visualization API to set element styles

Currently, the demo uses custom mxGraph code to style elements.
process-analytics/bpmn-visualization-js#1030 will provide a new way to style the BPMN Elements. So, we should use it here when it is available.

This is currently done at least in:

• bpmn-visualization-pm4py/frontend/src/discovery.js

  Lines 67 to 81 in f75046e

  	let style = mxgraph.mxUtils.setStyle(activityCurrentStyle, 'fillColor', myFrequencyScale(freqValue))
  	mxGraph.getModel().setStyle(activityCell, style);
  	activityCurrentStyle = mxGraph.getModel().getStyle(activityCell)
  	//different ways of setting the style
  	//mxGraph.setCellStyles("fillColor", myFrequencyScale(freqValue), [activityCell]);
  	//or
  	//mxGraph.setCellStyles(mxgraph.mxConstants.STYLE_FILLCOLOR, 'red', [activityCell]);
  	//set label to white when the activity fillColor is above the scale average
  	if (freqValue > avg){
  	style = mxgraph.mxUtils.setStyle(activityCurrentStyle, 'fontColor', 'white')
  	mxGraph.getModel().setStyle(activityCell, style);
  	//different way of setting the style
  	//mxGraph.setCellStyles("fontColor", "white", [activityCell]);
  	}

• bpmn-visualization-pm4py/frontend/src/conformance.js

  Lines 38 to 44 in f75046e

  	mxGraph.getModel().beginUpdate()
  	try {
  	mxgraph.mxUtils.setCellStyles(mxGraph.getModel(), activityCells, "fillColor", "none")
  	mxgraph.mxUtils.setCellStyles(mxGraph.getModel(), activityCells, "fontColor", "none")
  	} finally {
  	mxGraph.getModel().endUpdate();
  	}

[BUG] Tasks are no more rounded after applying custom styles

Describe the bug
BPMN tasks must be rendered with rounded corners per BPMN Specification.
bpmn-visualization enforces this, but in this demo, once the custom fill color is applied to tasks, the rounded corner are dropped, and the diagram display raw rectangles instead.

To Reproduce
Steps to reproduce the behavior:

1. Use code of commit ff8e970 and run the demo
2. Load an XES
3. The tasks displaying frequency data are displayed as raw rectangles

Expected behavior
The BPMN tasks should display rounded corners.

Screenshots

Frequency data

https://www.youtube.com/watch?v=qmWcnZ4Ffn0&t=22s

Conformance data

https://www.youtube.com/watch?v=qmWcnZ4Ffn0&t=66s

Environment

Desktop (please complete the following information):

• OS: Windows, Ubuntu 20.04
• Browser: Chrome 110.0, Firefox 110.0

Additional context

This is probably due to an issue in the code calling the mxGraph native function and should be fixed with #3 and #12.

[REFACTOR] Use the mxgraph context directly from bpmn-visualization

In v0.30.0, the mxgraph context is exported so that is can be directly used from bpmn-visualization.

Update the dependency version, delete the mxgraph-initializer.ts file and fix the corresponding code.

[REFACTOR] Use the updated API to remove all overlays at once

Use process-analytics/bpmn-visualization-js#2577 when available to avoid having to keep all elements that have overlays.

[REFACTOR] Use the resetStyle to reset the style

[backend-mock-server] Delay response sent to the frontend

In the first implementation (#19), the response is received almost immediately. This doesn't correctly simulate the backend which can take several seconds to process. It also prevent to display the spinner while waiting for the response.

We should introduce a way to configure or hard code a delay before the response is sent to the client.

[backend-mock-server] Let display conformance alignment data

In the first implementation (#19), the API returns data but nothing is displayed on the diagram.
There is probably an issue with the returned content.