/process-mining-CNJ

Web application that, from a .csv file sent, processes and generate an svg image with the Directly Follows Graph (DFG), from EventsLogs

Primary LanguageTypeScript

Process-Mining-CNJ

Web application that, from a .csv file sent, processes and generate an svg image with the Directly Follows Graph (DFG), from EventsLogs

demostration

How I test:

  1. Follow the steps below to make the Client active.
  2. Follow the steps below to make the Server active.
  3. Do both running at the same time.
  4. Enter the route http://localhost:4200/ in your browser.
  5. Drop one .csv file, following this pattern:
    Case ActivityCode Start End
    657797 A1 2016/06/01 07:25:09.000 2016/06/01 07:53:49.000
    657797 A2 2016/06/01 07:53:50.000 2016/06/01 07:55:29.000
    657797 A3 2016/06/01 07:55:30.000 2016/11/01 10:55:50.000
    ... ... ... ...
  6. Ps: .csv sep will be ";".
  7. Click on "Send File".
  8. Wait for the backend to generate the EventLog.
  9. Wait for the backend to generate the DFG.
  10. Analyze the DFG that will appear on the same page.

Attencion, You need install GraphViz

sudo apt-get install graphviz  # for unix-based os

for Windows or OSX, see https://graphviz.org/

For Boot Client:

cd client
#  Use the NVM - Node Version Manager - to choice the version 14.19.0
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 14.19.0
nvm use 14.19.0
#  Install the angular-cli and others dependences
npm install -g @angular/cli
npm install
#  Run the client
ng serve -o

For Boot Server:

# Enter in your virtural env
cd server
pip install -r requirements.txt
flask run

Objectives

Front-End

  • pages/components Angular
  • Integration with the backend
  • Forms to send csv to backend
  • Component to visualize svg image

Back-End

  • Routes Flasks
  • Get csv image from frontend
  • Transforms csv to Eventlog
  • Aply process discover DFG in Eventlog
  • Create SVG from DFG results in text

Extra

  • Architecture Blueprints to Flask
  • Architecture Scalable to Angular
  • Have a tab with general information about the data
  • Implement filtering functions on the data

Author

Eric
Eric de Lima