Skip to content

Latest commit

 

History

History
119 lines (79 loc) · 5.1 KB

README.md

File metadata and controls

119 lines (79 loc) · 5.1 KB
Raw

Axon Ivy Process Miner Viewer

This repository contains the Axon Ivy (GLSP-based) process miner viewer.

Prerequisites

The following libraries/frameworks need to be installed on your system:

The viewer is developed using Visual Studio Code. However, it's of course also possible to use another text editor.

Launch config prerequisites

Project workflow-demos is required to be running in a designer on port 8081.

Commands

#install node modules
npm install

#run the viewer
npm run dev

#build the vievwer
npm run package

Running the process miner in VS Code

To 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.

Running the process miner via commandline

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

e.g. http://localhost:3000?server=localhost:8081&app=designer&pmv=workflow-demos&file=/processes/Humantask/ProcurementRequestParallel.p.json

Mining-Data

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

Implementation in ivy project

  1. build the viewer via npm run package
  2. copy build/mock.json and contents of build/assets into webcontent/resources in ivy project
  3. copy build/index.html to webcontent/view/process-miner.xhtml
  4. 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" />

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 &amp;
  • 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&amp;app=designer&amp;pmv=workflow-demos&amp;file=/processes/Humantask/ProcurementRequestParallel.p.json&amp;miningUrl=#{resource['resources/mock.json']}"
  width="1000"
  height="900"
></iframe>

Mining visualization

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.

More information

For more information about GLSP, please visit the Eclipse GLSP Umbrella repository and the Eclipse GLSP Website.