DEV Community

Cover image for Process Analytics - December 2021 Newsletter
Thomas Bouffard for Process Analytics

Posted on • Updated on • Originally published at Medium

Process Analytics - December 2021 Newsletter

Welcome to the Process Analytics monthly newsletter πŸ‘‹.

As you know, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

Fall 🍁 is over, December says winter is coming β˜ƒοΈ and hopes that 2022 will be great too 🎁!

On our side, the project team worked hard to propose many new elements in our project:

  • Website updates
  • BPMN Visualization (JavaScript/TypeScript) library improvements

The Process Analytics Project website

Newsletter registration

In addition to the news we publish on Medium and dev.to, we will gradually share information by email 🎁.

You can subscribe to the newsletter directly from the Process Analytics website 😊.

Newsletter subscribe process on the website

Introducing the BPMN Layout Generator tool

BPMN Layout Generator is an experimental project that we started in 2020.

πŸ“£ Here’s a brand-new article presenting the project as part of a series that will continue in 2022.

This article shows how you can visualize event logs with the BPMN layout generator.

The BPMN layout generator can automatically generate a BPMN diagram from event logs. Adding BPMN objects such as gateways will help make the visual result clearer.

BPMN Layout Generator screenshot - generate a process from an event log

Generate a process diagram from an event log

BPMN Visualization JS/TS library

In December, we released 2 versions: 0.21.0 & 0.21.1.

In addition to internal improvements, we worked on improving the documentation and the styling capabilities of the library.

Styling improvements

We continued the work we started in November on styling.

As we developed a new demo (which will be available in early 2022 - teasing 😁), we found issues and areas for improvement in the styling/rendering features.

Here are some highlights.

Labels

Previously, the CSS classes added to a BPMN label weren’t correctly applied, so there was no effect in the web browser. See issue #1621 for more details.

This is now fixed, so we can add style to both elements and labels.

In the example below πŸ‘‡ (preview of the new upcoming demo, teasing again 😱), we reduce the visibility of the starting path of a diagram - to better highlight the part which contains the elements we’re interested in - by blurring and fading those starting elements and their labels. πŸ€” This could be used in combination with highlighting current or upcoming
elements.

Styling BPMN labels with CSS classes
Styling BPMN labels with CSS classes

Message flow icon

The message flow icon can be styled independently from the message flow itself. Initiating and non_initiating icons can be styled independently as well 🀩.

Icon and message flow are styled differently

Icon and message flow are styled differently

Documentation

Along with the styling improvements, we added a dedicated paragraph in the documentation about the BPMN rendering capabilities of the library.

For more detail, see the πŸ“š BPMN rendering documentation and the ⏩ Custom BPMN Theme examples.

Custom BPMN Theme screenshot as presented in the documentation

Browser tests

We run a lot of tests to make sure the library always produces an accurate BPMN diagram rendering ✨, especially when updating browsers.
In December, we spent a significant amount of time to add more stability to the test infrastructure and add more tests in some uncovered areas (parsing, styling) πŸŽ‰

We were already testing with Chromium, Firefox and WebKit (the Safari engine). We are now running tests with the latest stable versions of Chrome and Edge.

This comes in addition to the tests run on Chromium πŸ€”. As the Chromium version is ahead of the stable browser channels, this lets us know that future versions of Chrome or Edge won't break the library.

For more details, see the Playwright documentation about browsers.

Plans for the future

Here are the topics we will be addressing in the coming months:

  • Continue styling improvements for CSS usage and introduce an API to apply styles to specific BPMN elements.
  • Create new examples to demonstrate other process analytics / process mining use cases 🀩.

That’s All Folks!

We hope you enjoyed this December project news and are looking forward to what 2022 will bring πŸ‘‹.

In the meantime, to stay on top of the latest news and releases, follow us:

Cover photo by Lynda Hinton on Unsplash

Discussion (0)