Process Analytics - November 2021 Newsletter
Tags: news, typescript, bpmn, analytics
Published: 2021-12-06 16:01:48

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 🍁 here 🍂, November blows 💨, December says winter is coming! On our side, the project team worked hard to propose many new elements in our project:
-   new website pages
-   BPMN Visualization (JavaScript/TypeScript) library improvements



## Website: blog posts and news

To avoid overwhelming everyone with too many articles on the web site *Home* page (because we love to write 😆 ), we’ve decided to limit what’s shown on the page.

![Website home displaying the blog posts section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdqv01925xi9c0f8kc0h.png)

💡 Want to access to **all blog posts**? Click on the *‘See all’* at the bottom of the blog section and go to the new “*Blog Posts”* page. It’s all there!


![The blog posts page, displaying all available posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/muzbn4mhl13dt6my4u9n.png)

And what happens to the *“News”* section 🤔 ? A [dedicated page](https://process-analytics.dev/news/?utm_source=devto&utm_medium=display&utm_campaign=news) is also available.

![The news page, displaying all available posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5oevvnbn5fbh1ldk2ks.png)



## BPMN Visualization JS/TS library

In November, we released 3 versions: [0.19.5](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.19.5), [0.20.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.20.0) & [0.20.1](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.20.1).

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

### Fix pointer-events on label

In previous versions, Pointer Events on labels were captured as if they came from outside of the shape.

![Demonstrate the pointer-events issue on label](https://user-images.githubusercontent.com/27200110/143845969-2a380b00-3451-4a4e-8bde-b493421643df.gif)


This prevented click, hover and other interactions from working correctly. This mainly applied to BPMN activities, because the label is inside the shape for these BPMN elements.

This is now fixed as shown in the following comparison examples.

![Demonstrate the fix of the 'pointer-events issue on label' in version 0.20.1](https://user-images.githubusercontent.com/27200110/143845966-423106f9-6989-450f-8e26-bfe9fc9b5b20.gif)


### CSS classes are correctly applied to the Message Flow icons

Previously, it wasn’t possible to style the icons with CSS. This is now fixed.

Future versions will improve the styling capabilities for the icon (see [#928](https://github.com/process-analytics/bpmn-visualization-js/issues/928)).

![The message flow icon can be styled with CSS](https://user-images.githubusercontent.com/27200110/142884281-b1a31f0a-f7b4-4d8e-a4e0-03a52e377285.png)

### 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 style to specific BPMN elements.
-   Create new examples to demonstrate other Process analytics / Process Mining use cases.



## That’s All Folks!

We hope you enjoyed the November project news and are looking forward to what is coming with the Winter 👋.

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

- 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 [FerNando](https://unsplash.com/photos/UMC5sfWci78?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*