Process Analytics - June 2022 News
Tags: typescript, news, bpm, analytics
Published: 2022-07-13 09:49:23

Welcome to the Process Analytics monthly news 👋.

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.

Summer is here 🌞. People in the northern hemisphere are happy not to see clouds ☁️ and rain 🌧️.

On our side, the project team worked very hard in June to improve the bpmn-visualization TypeScript library 🤗. We also presented the project at several conferences and events. Let’s see what’s new here 👀!

## Events

### Bonita Day Paris

At the beginning of April 2022, our team presented the Process Analytics project at the Bonita Day event in Paris, organized by Bonitasoft. 

The replay of this presentation in French is available 👇

{% embed https://www.youtube.com/watch?v=0SbuozEcuRI %}

ℹ️ For more information, see this [article](https://fr.bonitasoft.com/videos/bonita-day-paris-2022-apercu-de-process-analytics).

### FR Webinar: À la découverte de Process Analytics

We also presented the Process Analytics project during a Webinar organized by Bonitasoft, at the end of June.

In this presentation, we showed the different components of the project available to you, as well as a concrete integration case using a ticketing application as an example.

The replay of this presentation in French is available on the [Bonitasoft website](https://fr.bonitasoft.com/videos/a-la-decouverte-de-process-analytics).

ℹ️ A webinar in English is [planned for early July](https://twitter.com/ProcessAnalyti1/status/1539513288228327428) and another webinar _en español_ (in Spanish) will be scheduled in the future.

### Bonita Day Madrid

At the end of June 2022, [Alejandro Rondon](https://www.linkedin.com/in/arondon/) presented the Process Analytics project at the Bonita Day event in Madrid, organized by Bonitasoft. 🙏🏻 Big thanks to Alejandro. 

The event teaser is available 👇

{% embed https://youtu.be/612pHau24l8 %}

## bpmn-visualization TypeScript library

In June, we released 2 versions: [0.24.1](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.24.1) & [0.25.0](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.25.0).

### New API: Filter pools at load time

When calling the load method, it is now possible to filter the pools in the diagram you want to display.

You can filter for one or several pools and specify the filtering options by pool id and/or name.

In the following example 👇, we load the same diagram with different filter configurations. First we load without filtering, so we see the whole diagram. Then we filter different pools, one pool at a time. And finally, we filter 3 pools at the same time.

![pool_filtering_at_load_time](https://user-images.githubusercontent.com/27200110/175942883-77c3943a-eb96-4ef1-958c-e38d2529981e.gif)

### Demo page improvements

#### Add a select button to switch the BPMN Theme

It’s now possible to change the BPMN theme at runtime in the [demo](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.25.0/demo/load-and-navigation/index.html) page.

![The demo now allows to switch the BPMN theme](https://user-images.githubusercontent.com/27200110/172772217-0d9e0803-b0a5-4cc0-be12-3ee961ac1293.gif)

#### Add a zoom reset button

We also added a new button to reset the zoom level, very similar to the previous zoom in/out.

![The new zoom reset button](https://user-images.githubusercontent.com/27200110/171143957-45d2d243-12f9-4373-a5bc-cbc326507d50.png)

### Examples

#### Change the fill color of edge markers

⏩ A [new example is available](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.25.0/examples/custom-bpmn-theme/custom-edge-marker-colors/index.html) to demonstrate how to change the fill color of the edge markers.

##### Message Flows: Start (circle) and End (arrow) markers

![Message Flows: Start (circle) and End (arrow) markers](https://user-images.githubusercontent.com/27200110/170682395-e2567bb3-039c-4701-af8c-72af463204b1.png)

##### Sequence Flows: Conditional marker

![Sequence Flows: Conditional marker](https://user-images.githubusercontent.com/27200110/170682424-4dd6c2ea-3160-4088-b47e-bcc9f60d493e.png)

#### Add a new project to demonstrate integration with Parcel

This new project demonstrates the straightforward integration of bpmn-visualization in a TypeScript project built with [Parcel v2](https://parceljs.org). It also helps to improve project quality by detecting any integration errors prior to shipping new releases.

For more information, see[ process-analytics/bpmn-visualization-examples#338](https://github.com/process-analytics/bpmn-visualization-examples/pull/338).

## That’s all folks!

We hope you enjoyed this June project news and are looking forward to what the rest of the summer will bring 👋.

In the meantime, stay on top of the latest news and releases by following 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 [Mick Haupt](https://unsplash.com/photos/OVX3oiL5PsE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on[ Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_