This repository contains the Axon Ivy (GLSP-based) process miner viewer.
The following libraries/frameworks need to be installed on your system:
- Node.js
>= 20.10.0
The viewer is developed using Visual Studio Code. However, it's of course also possible to use another text editor.
Project workflow-demos is required to be running in a designer on port 8081.
#install node modules
npm install
#run the viewer
npm run dev
#build the vievwer
npm run packageTo start the viewer, you can start the Launch Viewer config directly inside VS Code. For this to work, the project workflow-demos is required to be running in a designer on port 8081.
To start the viewer via cli, you can run npm run dev.
The viewer will now run at http://localhost:3000. To access it you can open the URL in a browser. Following url parameter are required to open the workflow-demos with the default mock-mining-data:
- server=localhost:8081
- app=designer
- pmv=workflow-demos
- file=/processes/Humantask/ProcurementRequestParallel.p.json
As default, mock-data from http://localhost:3000/mock.json is used.
To provide a URL for the mining-data the url-parameter miningUrl can be used e.g. http://localhost:3000/[url]&miningUrl=customUrl
- build the viewer via
npm run package - copy build/mock.json and contents of build/assets into webcontent/resources in ivy project
- copy build/index.html to webcontent/view/process-miner.xhtml
- open process-miner.xhtml make following edits:
- Add required libraries to html tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"></html>
- replace
<head>with<h:head> - replace js and css with
<h:outputScript>and<h:outputStylesheet>:<h:outputScript name="resources/index-CmkAVbW5.js" /> <h:outputStylesheet name="resources/index-C332O8_T.css" library="ivy-webcontent" />
- Add required libraries to html tag:
The process-miner-viewer can now be used in any dialog using an iframe:
- For the url-parameters to work, all & have to be replaced with &
- To use the mock-data provided in mock.json the miningUrl parameter has to be set to:
#{resource['resources/mock.json']}
<iframe
src="/designer/faces/view/DemoProject/process-miner.xhtml?server=localhost:8081&app=designer&pmv=workflow-demos&file=/processes/Humantask/ProcurementRequestParallel.p.json&miningUrl=#{resource['resources/mock.json']}"
width="1000"
height="900"
></iframe>All code to modify the mining visualization is located in src/process-mining-visualisation.
di-config.ts
Used to register mining-action-handler, command and view to change the edge properties (color, width & label). Also adds a model for the diagram-captions.
action.ts
ActionHandler for the MiningAction
mining-action.ts
MiningAction used to display mining-data. MiningCommand (execute) is called when MiningAction is fired. Adds 2 parameter (relativevalue, labelvalue) to each edge in mining-data used to change color, width and label. Further adds 2 DiagramCaptions to display a title and number of instances.
MiningView.tsx
Is called when rendering an Edge. If labelvalue and relativevalue exist, modifies edge by incresing stroke-width and color according to relativevalue. Uses the text from labelvalue as edge-label.
DiagramCaption.ts
Class used to display title and instances for diagram. Requires canvasBounds, caption and location
DiagramCaptionView.tsx
Is called when rendering a DiagramCaption. Uses the location and canvasBounds to calculate location.
public/mock.json
mock-mining-data used when no miningUrl url-parameter is specified
The mining-action is fired in src/startup.ts after the model is initialized.
For more information about GLSP, please visit the Eclipse GLSP Umbrella repository and the Eclipse GLSP Website.