Process Analytics - December 2021 Newsletter
Tags: news, typescript, bpmn, analytics
Published: 2022-01-12 08:08:29

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](https://medium.com/@process-analytics) and [dev.to](https://dev.to/process-analytics/), we will gradually share information by email 🎁.

You can subscribe to the newsletter directly from the [Process Analytics website](https://process-analytics.dev/?utm_source=devto&utm_medium=display&utm_campaign=news) 😊.

![Newsletter subscribe process on the website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwzbrsibuq9y8gb95sb3.gif)


### Introducing the BPMN Layout Generator tool

[BPMN Layout Generator](https://github.com/process-analytics/bpmn-layout-generators) is an experimental project that we started in 2020.

📣 Here’s a brand-new [article presenting the project](https://community.bonitasoft.com/blog/visualizing-processes-bpmn-standard-using-bpmn-layout-generator-show-activities-transitions-and) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1jsqfjndgviuwnldf7n.png)

*Generate a process diagram from an event log*

## BPMN Visualization JS/TS library

In December, we released 2 versions: [0.21.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.21.0) & [0.21.1](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.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](https://medium.com/@process-analytics/process-analytics-november-2021-newsletter-b1afb6715a9d) 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](https://github.com/process-analytics/bpmn-visualization-js/issues/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiotg8vlwb4h2aynsv9g.png)
*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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx4yteh73vfa2ai9kxga.gif)

*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](https://process-analytics.github.io/bpmn-visualization-js/#_bpmn_rendering) and the ⏩ [Custom BPMN Theme examples](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.21.2/examples/index.html#custom-bpmn-theme).

![Custom BPMN Theme screenshot as presented in the documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4dytq4u25rm0fq2ymgh.png)

### 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](https://playwright.dev/docs/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:

-   Website: [*https://process-analytics.dev*](https://process-analytics.dev/?utm_source=devto&utm_medium=display&utm_campaign=news)
-   Twitter: [*@ProcessAnalyti1*](https://twitter.com/ProcessAnalyti1)
-   GitHub: [*https://github.com/process-analytics*](https://github.com/process-analytics)

*Cover photo by [Lynda Hinton](https://unsplash.com/photos/QyDLHeUerd4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*