DEV Community: Process Analytics The latest articles on DEV Community by Process Analytics (@process-analytics). https://dev.to/process-analytics https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F4716%2F70e50fc4-e519-49c3-b999-8fae1068a37d.png DEV Community: Process Analytics https://dev.to/process-analytics en Process Analytics - July 2023 News Nour Assy Mon, 07 Aug 2023 13:55:21 +0000 https://dev.to/process-analytics/process-analytics-july-2023-news-14ln https://dev.to/process-analytics/process-analytics-july-2023-news-14ln <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>Welcome to our July project news update ⛵! This edition spotlights the launch of our new experimental library, and showcases a captivating new demo. Let's dive right in!</p> <h1> Promotion highlights </h1> <h2> All you need to know about style management in bpmn-visualization </h2> <p>We've published a fresh article delving into the styling of BPMN elements using our bpmn-visualization TypeScript library. This piece not only covers the basics of style management but also features some advanced usage scenarios to inspire your projects. Intrigued? Find out more 👉 <a href="proxy.php?url=https://dev.to/process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-11mf">here</a>. </p> <h2> We're listed on BPMN Tool Matrix </h2> <p>For those interested in exploring different BPMN-based tools, the<a href="proxy.php?url=https://bpmnmatrix.github.io/"> BPMN Tool Matrix</a> is an invaluable resource. We're proud to inform you that our project, backed by our "free" and "open source" Apache 2 license, is featured there 😉. </p> <h2> Website Improvements </h2> <p>Our <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">website</a> revamp is ongoing, and the latest update includes a new, user-friendly design for the 'cards' of our articles and blogs. We hope you'll find this update both aesthetically pleasing and practical 😊.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--4KyntXjv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl00at0fx2rty4x23k0g.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--4KyntXjv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl00at0fx2rty4x23k0g.png" alt="Website cards improvement" width="800" height="242"></a></p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--SIDGhwgl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbrfuacmmr6kguuw1o3l.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--SIDGhwgl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbrfuacmmr6kguuw1o3l.png" alt="Website cards improvementn" width="800" height="255"></a></p> <h1> bpmn-visualization TypeScript library </h1> <p>In <strong>July</strong>, we released version <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.38.0">0.38.0</a>. Below are some highlights.</p> <h2> New experimental library with great new features </h2> <p>We're excited to announce the launch of our new experimental library, <a href="proxy.php?url=https://github.com/process-analytics/bv-experimental-add-ons/">bv-experimental-add-ons</a>. This fresh addition will offer an array of novel features, primarily concentrating on computing and visualizing paths in BPMN.</p> <p>Why are paths so important, you might ask? Well, within the realm of process intelligence and optimization, being able to mine path information has a wide range of applications: What is the most/least performant path in my BPMN process? Which path is the most/least frequent? What's the predicted remaining path to complete the process instance? These and many other use cases require "computing and visualizing paths" to produce results. </p> <p>Interested? Star and follow the progress of our experimental library. If any of the already <a href="proxy.php?url=https://github.com/process-analytics/bv-experimental-add-ons/issues">opened issues</a> seem familiar to you, you're more than welcome to contribute 🤗.</p> <h2> API enhancement </h2> <p>The <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#updateStyle">updateStyle</a> API has been enriched to support the ‘Gradient’ fill color as shown in the image below.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--mkieRE7f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1uoa55vfr25djppec87.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--mkieRE7f--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1uoa55vfr25djppec87.png" alt="Gradient fill with the updateStyle API" width="800" height="335"></a></p> <h2> New prediction demo is out </h2> <p>This new demo employs <em>bpmn-visualization</em> to visualize late/on-time activities as well as predicted late/on-time remaining paths using mock data. Feel free to explore both the <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.38.0/demo/prediction/index.html">live demo</a> and the <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples/tree/v0.38.0/demo/prediction">source code</a>.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--YpeNBMQs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v76chadqzgchs1580ak9.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--YpeNBMQs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v76chadqzgchs1580ak9.gif" alt="Prediction visualization with bpmn-visualization" width="800" height="386"></a></p> <h1> That’s all folks! </h1> <p>We hope you've enjoyed this July project update. Enjoy your summer holidays and stay tuned for more exciting updates when we return. See you after the break 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/photos/67sVPjK6Q7I">jcob nasyr</a> on <a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></em></p> news typescript visualization bpmn bpmn-visualization: All you need to know about styling BPMN elements Nour Assy Fri, 21 Jul 2023 09:23:05 +0000 https://dev.to/process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-11mf https://dev.to/process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-11mf <p>In this article, we're going to dive deep into the capabilities of the <em><a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js" rel="noopener noreferrer">bpmn-visualization</a></em> Typescript library, with a specific focus on managing styles. You'll learn how to use its APIs to set styles and, when necessary, revert them back to their default state. Additionally, we'll feature some advanced usage scenarios to provide you with inspiration for your own use.</p> <p>If you're just getting started with <em>bpmn-visualization</em>, we recommend that you take a look at our <a href="proxy.php?url=https://dev.to/process-analytics/getting-started-with-bpmn-visualization-3dno">Getting Started</a> tutorial. It provides a step-by-step guide on how to set up and begin using the library. </p> <p>You can try out and experiment with the APIs in one of our preconfigured live environments, available <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html" rel="noopener noreferrer">here</a> (see the <strong>'Miscellaneous'</strong> section).</p> <p>So let's dive in 🏊!</p> <h1>Setting styles in bpmn-visualization</h1> <p>There are two primary ways to go about setting styles of BPMN elements: via CSS or programmatically. Let's delve into these two methods.</p> <h2>Styling with CSS: The addCssClasses API</h2> <p>The first method involves CSS, the cornerstone technology used to apply stylistic choices to elements on a web page. To use CSS for styling your BPMN elements, <em>bpmn-visualization</em> provides the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#addCssClasses" rel="noopener noreferrer"><code>addCssClasses</code></a> API. This method is especially useful when you've already defined CSS class names that you wish to apply to your BPMN elements. </p> <p>In order to use <code>addCssClasses</code>, begin by defining your styles in your stylesheet, assigning a unique class name to each style. You can then apply these classes to your BPMN elements using the API. </p> <p>To illustrate, let's consider an example where we're styling activities to indicate an error state. Here's how you could define such a CSS class in your CSS file:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="c">/* Define your CSS class in your CSS file */</span> <span class="c">/* CSS class for an activity in error */</span> <span class="nc">.bpmn-activity-error</span> <span class="o">&gt;</span> <span class="nt">rect</span> <span class="p">{</span> <span class="py">fill</span><span class="p">:</span> <span class="n">Tomato</span> <span class="cp">!important</span><span class="p">;</span> <span class="py">fill-opacity</span><span class="p">:</span> <span class="m">15%</span> <span class="cp">!important</span><span class="p">;</span> <span class="py">stroke</span><span class="p">:</span> <span class="n">Tomato</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>Once you've defined your CSS class, apply it in your JavaScript or TypeScript code. This can be done by calling the <code>addCssClasses</code> API, which accepts the IDs of one or multiple BPMN elements, along with the CSS classes to be applied. Here's an example of how you can add the <code>bpmn-activity-error</code> class to two different activities:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Create a new instance of BpmnVisualization</span> <span class="kd">const</span> <span class="nx">bpmnVisualization</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">BpmnVisualization</span><span class="p">(...);</span> <span class="c1">// Load your BPMN diagram</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nf">load</span><span class="p">(...);</span> <span class="c1">// Apply the CSS class to a BPMN element</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">addCssClasses</span><span class="p">([</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">task_id2</span><span class="dl">'</span><span class="p">],</span> <span class="dl">'</span><span class="s1">bpmn-activity-error</span><span class="dl">'</span><span class="p">);</span> </code></pre> </div> <p>For a more in-depth explanation of styling BPMN elements through CSS, be sure to check out our <a href="proxy.php?url=https://dev.to/process-analytics/getting-started-with-bpmn-visualization-3dno">Getting Started</a> tutorial.</p> <h2>Dynamic styling: The updateStyle API</h2> <p>There might be cases where the style of a BPMN element is not known beforehand, or needs to change dynamically based on certain conditions. In these cases, the ability to programmatically apply styles is necessary.</p> <p>This is where the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#updateStyle" rel="noopener noreferrer"><code>updateStyle</code></a> API comes into play. The <code>updateStyle</code> API allows you to alter the style of BPMN elements directly within your code. This offers the flexibility to adjust styles instantly and responsively. </p> <p>Much like the <code>addCssClasses</code> method, <code>updateStyle</code> accepts the identifiers of one or more BPMN elements, along with a set of style properties defined through the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/types/StyleUpdate.html" rel="noopener noreferrer"><code>StyleUpdate</code></a> type. The properties that can be adjusted are dependent on the type of BPMN element: edge or shape (e.g., activities, events, gateways, etc.). </p> <p>Let's consider the following example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">updateStyle</span><span class="p">(</span> <span class="p">[</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">task_id2</span><span class="dl">'</span><span class="p">],</span> <span class="p">{</span> <span class="na">fill</span><span class="p">:</span> <span class="p">{</span> <span class="na">color</span><span class="p">:</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">,</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">15</span> <span class="p">},</span> <span class="na">font</span><span class="p">:</span> <span class="p">{</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">40</span> <span class="p">},</span> <span class="na">stroke</span><span class="p">:</span> <span class="p">{</span> <span class="na">color</span><span class="p">:</span> <span class="dl">"</span><span class="s2">blue</span><span class="dl">"</span><span class="p">,</span> <span class="na">width</span><span class="p">:</span> <span class="mi">3</span> <span class="p">},</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">30</span> <span class="p">});</span> </code></pre> </div> <p>In this instance, the style is directly applied to the BPMN elements identified by <code>task_id1</code> and <code>task_id2</code>. </p> <h1>Resetting styles in bpmn-visualization</h1> <p>Inevitably, there will be cases where you want to reset the styles applied to your BPMN elements, either returning them to their default state or preparing them for a new style. <em>bpmn-visualization</em> provides easy-to-use APIs for this as well, mirroring the ways you can set styles.</p> <h2>Resetting CSS classes: The removeCssClasses API</h2> <p>You can easily remove classes for styles that have been applied using CSS with the <code>addCssClasses</code> API, by using the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#removeCssClasses" rel="noopener noreferrer"><code>removeCssClasses</code></a> API, providing the IDs of the BPMN elements, and providing the names of the CSS classes you want to remove. If you want to remove all CSS classes, you can do so with a call to <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#removeAllCssClasses" rel="noopener noreferrer"><code>removeAllCssClasses</code></a>.</p> <p>Here's an example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Remove one or more CSS classes</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">removeCssClasses</span><span class="p">([</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">task_id2</span><span class="dl">'</span><span class="p">],</span> <span class="p">[</span><span class="dl">'</span><span class="s1">bpmn-activity-error</span><span class="dl">'</span><span class="p">]);</span> <span class="c1">// Remove all CSS classes</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">removeAllCssClasses</span><span class="p">([</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">task_id2</span><span class="dl">'</span><span class="p">]);</span> </code></pre> </div> <h2>Resetting dynamic styles: The resetStyle and updateStyle APIs</h2> <p><em>bpmn-visualization</em> provides a couple of options for programmatically applied styles. If you want to completely reset the style of a BPMN element, you can use the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#resetStyle" rel="noopener noreferrer"><code>resetStyle</code></a> API. Just pass the IDs of the BPMN elements to this API and it will clear all style settings applied through the <code>updateStyle</code>API. Here's an example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Reset the style of a BPMN element </span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">resetStyle</span><span class="p">([</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">task_id2</span><span class="dl">'</span><span class="p">]);</span> </code></pre> </div> <p>If, however, you want to reset some specific style properties while leaving others intact, you can use the <code>updateStyle</code> API. Instead of setting the property to a specific value, you pass the value as <code>default</code>. Here's an example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Reset specific style properties of a BPMN element</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">updateStyle</span><span class="p">(</span><span class="dl">'</span><span class="s1">task_id1</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">fill</span><span class="p">:</span> <span class="p">{</span><span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">,</span> <span class="na">opacity</span><span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">},</span> <span class="na">stroke</span><span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span> <span class="p">});</span> </code></pre> </div> <p>In this case, the fill and stroke properties are reset to their default values, while other style settings remain unchanged.</p> <p>And that's it for the basics of bpmn-visualization's styling APIs. In the next section, we'll be looking at some more advanced usage scenarios, so keep reading 👌</p> <h1>Advanced usage scenarios</h1> <p>Beyond the basics, <em>bpmn-visualization</em> can be used in a multitude of scenarios to address your specific needs. To illustrate this, we'll examine two practical applications of the library: <strong>interactive styling</strong> and <strong>data-driven styling</strong>.</p> <h2>Interactive styling</h2> <p>Interactive styling brings your BPMN diagrams to life by enabling them to respond to user actions. This could include actions like highlighting an element on hover, changing the style upon clicking, or indicating the active task in a process.</p> <p>Our team has prepared different demos that showcase how to implement interactive styling using <em>bpmn-visualization</em>. Although the library does not currently support attaching event listeners directly to BPMN elements, we can still achieve interactivity by accessing the corresponding HTML elements.</p> <p>Here's a code snippet that shows how to change the style of a BPMN element while the mouse is hovered on it, as it is done in the <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.37.0/demo/draw-path/index.html" rel="noopener noreferrer">Draw me a path</a> demo:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Retrieve the BPMN element using its ID</span> <span class="kd">const</span> <span class="nx">bpmnElementId</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">task_id</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">bpmnElement</span><span class="o">=</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">getElementsByIds</span><span class="p">(</span><span class="nx">bpmnElementId</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span> <span class="c1">// Retrieve the corresponding HTML element</span> <span class="kd">const</span> <span class="nx">htmlElement</span> <span class="o">=</span> <span class="nx">bpmnElement</span><span class="p">.</span><span class="nx">htmlElement</span><span class="p">;</span> <span class="c1">// Add a mouse event listeners to the HTML element</span> <span class="nx">htmlElement</span><span class="p">.</span><span class="nx">onmouseenter</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// Change the style of the corresponding BPMN element</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">updateStyle</span><span class="p">(</span><span class="nx">bpmnElementId</span><span class="p">,</span> <span class="p">{</span> <span class="na">stroke</span><span class="p">:</span> <span class="dl">'</span><span class="s1">MediumVioletRed</span><span class="dl">'</span><span class="p">,</span> <span class="na">font</span><span class="p">:</span> <span class="p">{</span><span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">MediumVioletRed</span><span class="dl">'</span><span class="p">}</span> <span class="p">});</span> <span class="p">};</span> <span class="nx">htmlElement</span><span class="p">.</span><span class="nx">onmouseleave</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="c1">// Reset the style of the corresponding BPMN element</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">resetStyle</span><span class="p">(</span><span class="nx">bpmnElementId</span><span class="p">);</span> <span class="p">};</span> </code></pre> </div> <p>In this snippet, we first retrieve the BPMN element using its ID by calling <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#getElementsByIds" rel="noopener noreferrer"><code>getElementsByIds</code></a>. We then access the corresponding HTML element. After this, we add hover event listeners to this HTML element. As a result, when the mouse hovers over this HTML element, the style of the corresponding BPMN element changes. As soon as the mouse leaves, the style resets to its original state. </p> <p>Below is a screenshot from the demo illustrating the final outcome:</p> <p><a href="proxy.php?url=https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzd2qz6ujpn6hf7r7wk2.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzd2qz6ujpn6hf7r7wk2.gif" alt="Example of interactive styling"></a></p> <p>For more inspiration on interactive styling use cases, we invite you to explore the additional interactive features in our <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.37.0/demo/draw-path/index.html" rel="noopener noreferrer">Draw me a path</a> and <a href="proxy.php?url=https://process-analytics.github.io/bonita-day-demo-2023/" rel="noopener noreferrer">Bonita Day 2023</a> demos. You might also be interested in checking out an example of <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples/blob/master/projects/typescript-vue/README.md" rel="noopener noreferrer">integration with the Vue framework</a>, contributed by our amazing community. Happy exploring! 🤗</p> <h2>Data-driven styling</h2> <p>Data-driven styling allows you to customize the appearance of BPMN diagrams based on associated data. This can be particularly useful when you want to display certain characteristics or metrics related to your process, such as frequency or performance statistics, directly on your BPMN diagrams. </p> <p>For example, consider one of our demos that <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py" rel="noopener noreferrer">integrates the bpmn-visualization library with pm4py</a>. In this demo, we perform process discovery, compute frequency of execution statistics, carry out conformance checking, and then visualize the results using <em>bpmn-visualization</em>. </p> <p>One interesting aspect of this demo is how it handles the computation and visualization of process statistics. The first step involves using the <a href="proxy.php?url=https://d3js.org/d3-scale/sequential" rel="noopener noreferrer"><code>scaleSequential</code></a> function from the <a href="proxy.php?url=https://d3js.org/" rel="noopener noreferrer">D3</a> library to map frequency statistics to a color gradient, ranging from light blue to dark blue as shown in the code snippet below:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Create a D3 scale to map frequency to a color</span> <span class="kd">const</span> <span class="nx">colorScale</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nf">scaleSequential</span><span class="p">()</span> <span class="p">.</span><span class="nf">domain</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">])</span> <span class="c1">// Initialize domain with dummy values</span> <span class="p">.</span><span class="nf">interpolator</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">interpolatePuBu</span><span class="p">);</span> </code></pre> </div> <p>Next, we use the <a href="proxy.php?url=https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" rel="noopener noreferrer">fetch API</a> to retrieve frequency statistics computed in the backend by <em>pm4py</em>. After obtaining these statistics, we call the <code>visualizeFrequency</code> function to visualize the results on our BPMN diagram:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Compute frequency statistics using pm4py in the backend</span> <span class="nf">fetch</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">apiUrl</span><span class="p">}</span><span class="s2">/stats/frequency`</span><span class="p">)</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">response</span> <span class="o">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">())</span> <span class="p">.</span><span class="nf">then</span><span class="p">(</span><span class="nx">data</span> <span class="o">=&gt;</span> <span class="nf">visualizeFrequency</span><span class="p">(</span><span class="nx">data</span><span class="p">))</span> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="nx">error</span> <span class="o">=&gt;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">error</span><span class="p">));</span> </code></pre> </div> <p>For clarity, let's examine key portions of the <code>visualizeFrequency</code> function. In the code snippet below, we show how this function updates the fill color and the color of labels for activities based on their frequency of execution:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Function to visualize frequency data on BPMN elements</span> <span class="kd">function</span> <span class="nf">visualizeFrequency</span><span class="p">(</span><span class="nx">stats</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Update the domain of colorScale with the actual values</span> <span class="nx">colorScale</span><span class="p">.</span><span class="nf">domain</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="nx">d3</span><span class="p">.</span><span class="nf">max</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nf">values</span><span class="p">(</span><span class="nx">stats</span><span class="p">))]);</span> <span class="c1">// Compute the mean of frequencies</span> <span class="kd">const</span> <span class="nx">avg</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nf">mean</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nf">values</span><span class="p">(</span><span class="nx">stats</span><span class="p">))];</span> <span class="c1">// Update the color of activities based on their frequency</span> <span class="k">for </span><span class="p">(</span><span class="kd">const</span> <span class="p">[</span><span class="nx">elementId</span><span class="p">,</span> <span class="nx">frequency</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nf">entries</span><span class="p">(</span><span class="nx">stats</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// isActivity is a function that returns true if elementId corresponds to an activity</span> <span class="k">if </span><span class="p">(</span><span class="nf">isActivity</span><span class="p">(</span><span class="nx">elementId</span><span class="p">){</span> <span class="kd">const</span> <span class="nx">fillColor</span> <span class="o">=</span> <span class="nf">colorScale</span><span class="p">(</span><span class="nx">frequency</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">fontColor</span> <span class="o">=</span> <span class="nx">frequency</span> <span class="o">&gt;</span> <span class="nx">avg</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">white</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">;</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nf">updateStyle</span><span class="p">(</span><span class="nx">elementId</span><span class="p">,{</span> <span class="na">fill</span><span class="p">:</span> <span class="p">{</span> <span class="na">color</span><span class="p">:</span> <span class="nx">fillColor</span> <span class="p">},</span> <span class="na">font</span><span class="p">:</span> <span class="p">{</span> <span class="na">color</span><span class="p">:</span> <span class="nx">fontColor</span> <span class="p">}</span> <span class="p">});</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </code></pre> </div> <p>Below is a screenshot from the demo that displays the end result of these manipulations:</p> <p><a href="proxy.php?url=https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyihoacugimooiit9l3nd.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyihoacugimooiit9l3nd.png" alt="Example of data-driven styling"></a></p> <h1>Conclusion</h1> <p>That wraps up our overview of style management in <em>bpmn-visualization</em>. If you're interested in learning more or looking for some inspiration, feel free to check out our <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples" rel="noopener noreferrer">bpmn-visualization-examples</a> repository on GitHub. Have fun on your learning journey! </p> <p>If you want to stay on top of the latest news and releases from the Process Analytics project, follow us through:</p> <ul> <li>Website:<a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=blog"> https://process-analytics.dev</a> </li> <li>Twitter:<a href="proxy.php?url=https://twitter.com/ProcessAnalyti1" rel="noopener noreferrer"> @ProcessAnalyti1</a> </li> <li>GitHub:<a href="proxy.php?url=https://github.com/process-analytics" rel="noopener noreferrer"> https://github.com/process-analytics</a> </li> <li>Discord:<a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd" rel="noopener noreferrer"> https://discord.com/invite/HafnBYsRXd</a> </li> <li>YouTube:<a href="proxy.php?url=https://www.youtube.com/@process-analytics" rel="noopener noreferrer"> Process Analytics YouTube channel</a> </li> </ul> tutorial bpmn visualization typescript Process Analytics - June 2023 News Nour Assy Wed, 05 Jul 2023 07:58:25 +0000 https://dev.to/process-analytics/process-analytics-june-2023-news-43b0 https://dev.to/process-analytics/process-analytics-june-2023-news-43b0 <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>Here is our June project news update ☀️! In this edition, we'll cover the highlights of some successful webinars, new API introductions, and the exciting integration of bpmn-visualization with the Vue framework. Let's get started!</p> <h2> Webinar highlights </h2> <p>This month has been quite a ride with our participation in two informative webinars!</p> <ul> <li> <strong>A 3-hour virtual workshop</strong> as part of <a href="proxy.php?url=https://vivatechnology.com/">Vivatech Tech Days Week</a>: during this workshop, we dove deep into process mining, shed light on our project's process analytics, and demonstrated how to extract process mining data from Bonita. </li> </ul> <p>If you missed it, the replay (in French) is available <a href="proxy.php?url=https://fr.bonitasoft.com/videos/replay-creusez-vos-processus-decouvrez-le-potentiel-du-bpm-et-du-process-mining">right here</a>. </p> <ul> <li> <strong>As one of Bonitasoft's monthly webinars</strong>: 3 one-hour sessions in each of three languages: French, English, and Spanish! We seized this opportunity to showcase the capabilities of our bpmn-visualization through a monitoring demo.</li> </ul> <p>If you didn't catch any of these webinars live, you can find the replays in all three languages (<a href="proxy.php?url=https://www.bonitasoft.com/videos/replay-stop-5-process-mining">English</a>, <a href="proxy.php?url=https://fr.bonitasoft.com/videos/replay-arret-5-process-mining">French</a> and <a href="proxy.php?url=https://es.bonitasoft.com/videos/replay-parada-5-process-mining">Spanish</a>).</p> <p>If you are interested in a hands-on experience, our demo is ready for you on <a href="proxy.php?url=https://github.com/process-analytics/bonita-day-demo-2023">GitHub</a>. Feel free to give it a try <a href="proxy.php?url=https://process-analytics.github.io/bonita-day-demo-2023/">here</a>. </p> <p>A big thank you to Vivatech and Bonitasoft for these opportunities. </p> <h2> bpmn-visualization TypeScript library </h2> <p>In <strong>June</strong>, we released two versions <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.36.0">0.36.0</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.37.0">0.37.0</a>.</p> <h3> New API to reset the style programmatically </h3> <p>In bpmn-visualization, styling can be applied in two ways: either by adding a CSS class name or by updating the style programmatically. The same principle applies when it comes to resetting a style. <a href="proxy.php?url=https://dev.to/process-analytics/process-analytics-may-2023-news-109k">Last month</a>, we introduced <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#removeCssClasses">removeCssClasses</a>, an API designed to reset the CSS classes applied to one or multiple BPMN elements. </p> <p>This month, we've added a new <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#resetStyle">resetStyle </a>API in version 0.37.0. This lets you easily reset styles applied programmatically via <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#updateStyle">updateStyle</a>. Just call resetStyle with element IDs to revert their style, or with no IDs to reset all elements as shown in the code snippet below.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Reset task and sequence flow styles</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">resetStyle</span><span class="p">(</span><span class="dl">'</span><span class="s1">task_1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">sequenceFlow_1</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// reset the style of all elements of the diagram </span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">resetStyle</span><span class="p">();</span> </code></pre> </div> <h3> Support for Transaction Sub-Processes </h3> <p>Version 0.36.0 brought support for transaction Sub-Process in BPMN. Transaction Sub-Processes executes a group of activities as a single, fail-or-succeed unit within a larger process. If any activity fails, changes are rolled back to ensure data consistency. </p> <p>Transaction Sub-Processes have a distinct double line edge as shown below.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--JxCpTUI8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rnzaqcm78ea4zknchjd.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--JxCpTUI8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rnzaqcm78ea4zknchjd.png" alt="Transaction Sub-Process rendering in bpmn-visualization" width="358" height="204"></a></p> <h3> <em>BPMN in color</em> support officially referenced by BPMN MIWG </h3> <p>Following our announcement <a href="proxy.php?url=https://dev.to/process-analytics/process-analytics-may-2023-news-109k">last month</a> about the support for _BPMN in color _specification, we've now been formally referenced on the BPMN MIWG's <a href="proxy.php?url=https://github.com/bpmn-miwg/bpmn-in-color">official GitHub account</a>. BPMN MIWG, also known as the OMG BPMN Model Interchange Working Group, is an initiative that aims to ensure the smooth interchange of BPMN models between various BPMN modeling tools.</p> <h3> An example of integration with Vue framework </h3> <p>A new integration project for Vue has been contributed to the bpmn-visualization Examples repository, thanks to the efforts of <a href="proxy.php?url=https://github.com/brendanlaschke">@brendanlaschke</a>. We appreciate this contribution. </p> <p>Feel free to explore this example <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples/tree/master/projects/typescript-vue">here</a>. </p> <p>You can also check out the list of all integrations <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples/#bpmn-visualization-usage-in-projects">here</a>.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--ggZmL7Ld--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wshy2rjjlz5dl40ausl.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--ggZmL7Ld--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wshy2rjjlz5dl40ausl.gif" alt="Example of integration between bpmn-visualization and Vue framework" width="800" height="424"></a></p> <h2> That’s all folks! </h2> <p>We hope you enjoyed this June project news and stay tuned for more exciting updates in the coming months 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/photos/Sot0f3hQQ4Y">Dominik Scythe</a> on<a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"> Unsplash</a></em></p> news bpm visualization vue Process Analytics - May 2023 News Nour Assy Fri, 02 Jun 2023 10:00:00 +0000 https://dev.to/process-analytics/process-analytics-may-2023-news-109k https://dev.to/process-analytics/process-analytics-may-2023-news-109k <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>In the blink of an eye, May whisked us away with an abundance of holidays (in France, May is the month of many long holiday weekends! 🤗). This month, we introduced new functionalities, including support for <em>BPMN in color</em>, which enables the rendering of color-modeled BPMN. We also updated our examples with the latest APIs and achieved a milestone with the publication of an article on integrating our bpmn-visualization library with pm4py.</p> <h2> bpmn-visualization TypeScript library </h2> <p>In May, we released 3 versions: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.34.0">0.34.0</a>, <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.34.1">0.34.1</a> &amp; <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.35.0">0.35.0</a>. Below are some highlights of the main features of these versions. For more details, check out the release notes.</p> <h3> <em>BPMN in Color</em> specification now supported </h3> <p>The <em>BPMN in Color</em> specification is a reference to define the colors of BPMN modeling elements. This specification is recommended for color exchange between BPMN modeling tools. More information about this specification is available in the <a href="proxy.php?url=https://github.com/bpmn-miwg/bpmn-in-color">bpmn-miwg/bpmn-in-color</a> GitHub repository. </p> <p>In bpmn-visualization 0.35.0, support for <em>BPMN in Color</em> was introduced with a fallback to <a href="proxy.php?url=https://github.com/bpmn-io/bpmn-moddle/blob/ea7fa6a94c55f49fe1da1f019dc9a40d62967252/resources/bpmn-io/json/bioc.json">bpmn.io-specific BPMN extensions for colors</a>. </p> <p>Rendering of colors defined in the BPMN source is disabled by default. To enable <em>BPMN in Color</em>, use the following code snippet:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">bpmnVisualization</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">BpmnVisualization</span><span class="p">({</span> <span class="na">container</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bpmn-container</span><span class="dl">'</span><span class="p">,</span> <span class="na">renderer</span><span class="p">:</span> <span class="p">{</span> <span class="na">ignoreBpmnColors</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> <span class="p">});</span> </code></pre> </div> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--l4cbBeN2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/27200110/231206686-5109669a-79c5-4a35-bde4-a95b5f4f3017.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--l4cbBeN2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://user-images.githubusercontent.com/27200110/231206686-5109669a-79c5-4a35-bde4-a95b5f4f3017.png" alt='Rendering of the C.1.0 diagram when the "BPMN in Color" support is enable' width="800" height="597"></a></p> <p>⏩ Want to test it live? Give it a try with the following examples: </p> <ul> <li> <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.35.0/demo/load-and-navigation/index.html?renderer.ignore.bpmn.colors=false">Load and navigation demo</a> </li> <li>Example that <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.35.0/examples/display-bpmn-diagram/load-remote-bpmn-diagrams/index.html">loads diagrams from miwg-test-suite</a>. Load A.4.1 or C.1.0 for the instance.</li> </ul> <h3> New API for CSS style reset </h3> <p>In earlier versions of bpmn-visualization, we provided functionality to remove specific classes from BPMN elements by specifying their IDs and class names, as demonstrated in the code snippet below:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Remove CSS classes from the BPMN elements in styledElements</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span> <span class="p">.</span><span class="nx">removeCssClasses</span><span class="p">(</span><span class="nx">styledElements</span><span class="p">,</span> <span class="p">[</span><span class="dl">'</span><span class="s1">highlight-info</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">highlight-success</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">highlight-error</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">highlight-warning</span><span class="dl">'</span><span class="p">]);</span> </code></pre> </div> <p>While this approach served its purpose in removing a portion of CSS classes, it became cumbersome when applications required a complete restoration of default rendering or a transition to an entirely different visualization. For example, in <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.33.1/demo/monitoring-all-process-instances/index.html">our monitoring demo</a>, switching from a frequency view to a time performance view, or in our <a href="proxy.php?url=https://process-analytics.github.io/bonita-day-demo-2023/">Bonita Day 2023 demo</a>, switching between different use cases necessitated a complete style reset.</p> <p>With the release of bpmn-visualization 0.34.0, we introduced a new API called <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#removeAllCssClasses">removeAllCssClasses </a>in the <strong>BpmnElementsRegistry</strong>. This API empowers users to effortlessly remove all CSS classes from BPMN elements. Take a look at the code snippet below:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Remove all CSS classes from the BPMN elements in styledElements</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span> <span class="p">.</span><span class="nx">removeAllCssClasses</span><span class="p">(</span><span class="nx">styledElements</span><span class="p">);</span> </code></pre> </div> <p>And if you wish to reset the CSS classes of all BPMN elements, you can simply call the function with no arguments:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Remove all CSS classes from all BPMN elements</span> <span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">removeAllCssClasses</span><span class="p">();</span> </code></pre> </div> <h2> bpmn-visualization examples </h2> <p>We have updated the existing examples to showcase the enhancements of the latest functionalities. For a comprehensive overview of all the changes, please refer to the <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-examples/releases/tag/v0.34.0">examples 0.34.0 release notes</a>.</p> <p>In particular, the monitoring demo now uses the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#updateStyle">Update Style API</a> instead of the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#addCssClasses">CSS API</a> to have a consistent stroke width even when zooming. Curious to explore the updated demo? Take a look at our ⏩ <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.34.0/demo/monitoring-all-process-instances/index.html">live environment</a>. </p> <p>The examples that allow users to play with the library, and that are running in the Live IDE, have been updated as well. Want to give it a try? ⏩ <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.34.0/examples/index.html#miscellaneous">live environment</a>.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--yLbE9H3L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/process-analytics/bpmn-visualization-js/assets/27200110/32e58b2f-a9e0-4a70-b28c-fa51bd151cb3" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--yLbE9H3L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/process-analytics/bpmn-visualization-js/assets/27200110/32e58b2f-a9e0-4a70-b28c-fa51bd151cb3" alt="Screenshot from the codesandbox TypeScript environment" width="800" height="421"></a></p> <h2> Sharing Key Insights from bpmn-visualization and pm4py Integration </h2> <p>We recently developed an <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py">integration example</a> between bpmn-visualization and <a href="proxy.php?url=https://pm4py.fit.fraunhofer.de/">pm4py</a>. This example allows the user to discover a BPMN process model from process execution data and to compute various statistics using pm4py. The results are then displayed visually using our bpmn-visualization library. The figure below showcases an example of a BPMN process model enriched with frequency data obtained from process execution data sourced from the <a href="proxy.php?url=https://processmining.org/old-version/event-book.html">process mining book</a>. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--0FuAI9VV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqtev4ep62c5b160f0a6.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--0FuAI9VV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqtev4ep62c5b160f0a6.png" alt="Screenshot from the integration example showing a BPMN model with frequency data computed from execution data" width="800" height="198"></a></p> <p>During the process, we encountered some limitations of the BPMN-based process mining approach we followed ⛔️. In our latest article, we delve into the high-level details of the integration and shed light on those limitations of BPMN-based visualization in process mining. Read more about it 👉 in our <a href="proxy.php?url=https://medium.com/@process-analytics/exploring-the-intersection-of-bpmn-with-process-mining-a5fd246625bf">Medium article</a>.</p> <h2> That’s all folks! </h2> <p>That's a wrap for this edition of our May project news! We hope you found it informative and enjoyable. Stay tuned for more exciting updates on the horizon! 👋</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/photos/L6T_6Rp2iEk">Ricardo Gomez Angel</a> on<a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"> Unsplash</a></em></p> news bpmn visualization processmining Exploring the intersection of BPMN with Process Mining: Insights from integrating bpmn-visualization with pm4py Nour Assy Tue, 30 May 2023 11:15:00 +0000 https://dev.to/process-analytics/exploring-the-intersection-of-bpmn-with-process-mining-insights-from-integrating-bpmn-visualization-with-pm4py-5279 https://dev.to/process-analytics/exploring-the-intersection-of-bpmn-with-process-mining-insights-from-integrating-bpmn-visualization-with-pm4py-5279 <h2> Introduction </h2> <p>You know what they say: “<em>you can't improve what you can't measure,</em>” and that's where <a href="proxy.php?url=https://link.springer.com/book/10.1007/978-3-662-49851-4">process mining</a> has a role. Process mining is a powerful set of techniques for analyzing and optimizing business processes based on <em>data</em>. Similar to machine learning and data analytics, process mining uses data-driven methodologies to extract insights from <em>process execution data</em>, also known as <em>event data</em>. </p> <p>One of the key requirements for effective process mining is the ability to <strong>visualize</strong> and <strong>interact</strong> with the results of analysis on process models. This is especially crucial as process mining findings are often used by business experts who may not have a technical background. However, many of the available industrial process mining tools have limited support for BPMN-based visualization, despite <a href="proxy.php?url=https://www.bpmn.org/">BPMN</a> being a widely-used standard for process modeling and execution. As a result, there is a clear need for tools and libraries that can provide more comprehensive BPMN-based visualization capabilities.</p> <blockquote> <p>There is an evident requirement for process mining tools and libraries that can offer enhanced visualization capabilities based on BPMN (Business Process Model and Notation).</p> </blockquote> <p>To fill this need, <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=blog">Process Analytics</a> - an open-source initiative under Apache 2.0 license led by <a href="proxy.php?url=https://www.bonitasoft.com/">Bonitasoft</a> - is committed to developing developer-centric BPMN-based visualization components that can be seamlessly integrated into process mining projects. A pivotal component of this initiative is the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/">bpmn-visualization</a> library which empowers developers to visualize the results of process mining techniques on BPMN process models. With support for both <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/">TypeScript</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/">R</a>, <em>bpmn-visualization</em> provides developers with a straightforward means to render, style, and interact with BPMN elements.</p> <p>Note that the popular Python process mining library <em><a href="proxy.php?url=https://pm4py.fit.fraunhofer.de/">pm4py</a></em> offers a range of methods for process discovery, conformance checking, and performance analysis. By integrating <em>bpmn-visualization</em> with <em>pm4py</em>, we aim to take a step towards enabling BPMN-based process mining and visualization. The source code and documentation of this integration is available on <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py">GitHub</a>, which offers an open opportunity for testing, exploration and contribution.</p> <p>In this article, we will describe our experience in integrating these two libraries, and discuss the challenges we encountered due to the limited support for BPMN-based process mining. Our goal is to provide high-level insights and takeaways for the process mining community, including researchers, process mining experts, editors, and developers. Furthermore, we aim to engage anyone interested in the fusion of BPMN with process mining, including individuals from the BPM domain or other related fields. By doing so, we hope to raise awareness about the importance of native BPMN-based process mining and its potential impact across different domains. </p> <h2> Integration </h2> <h3> Architecture </h3> <p>The integration involves the development of two main components - the <strong>frontend</strong> and the <strong>backend</strong>. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--S0y92jsK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oxyml89mlksva6hkol0.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--S0y92jsK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oxyml89mlksva6hkol0.png" alt="Figure 1. High level architecture of the integration between bpmn-visualization and pm4py" width="800" height="391"></a></p> <p>The frontend component is written in JavaScript and leverages the capabilities of <em>bpmn-visualization</em> to visualize BPMN process models and the result of the backend analysis. </p> <p>The backend component is built using <em>pm4py</em> and is responsible for processing data and performing process mining analysis. More details about the architecture, the technologies used, and the application setup are available on <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py">GitHub</a>.</p> <h3> Use cases </h3> <p>Three process mining techniques are used in this integration example: process discovery, conformance checking, and enhancement.</p> <p><strong>Process discovery</strong>: The <a href="proxy.php?url=https://www.researchgate.net/publication/242348456_Discovering_Block-Structured_Process_Models_from_Event_Logs_-_A_Constructive_Approach">inductive miner algorithm</a> is used to automatically create a process model from event data stored in an event log using the <a href="proxy.php?url=https://xes-standard.org/">XES storage standard</a>.</p> <p><strong>Conformance checking</strong>: The event log is compared with the BPMN process model to detect deviations or non-conformities. </p> <p><strong>Enhancement</strong>: The BPMN process model is enriched with statistics data computed from the event log, such as the frequency of execution of BPMN elements and the conformance data obtained from the conformance checking technique.</p> <p>Figure 2 below shows an excerpt of a BPMN process model discovered from a <a href="proxy.php?url=https://processmining.org/old-version/event-book.html">simple synthetic event log</a> and enriched with frequency data using our developed integration example.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--fpeUDTFu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roxr53mn8cg6f9wld46v.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--fpeUDTFu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roxr53mn8cg6f9wld46v.png" alt="Figure 2. Excerpt of a BPMN process model discovered from an event log and enriched with frequency data" width="800" height="381"></a></p> <h3> Approach </h3> <p>BPMN-based process mining is an emerging topic that is still under development in the research world, and not fully exported to the industrial world. This is because most process mining techniques originate from research efforts which are based on <a href="proxy.php?url=https://en.wikipedia.org/wiki/Petri_net">Petri net</a>, a formalism for modeling concurrent systems. This is true of pm4py, as most of its implemented algorithms are based on Petri nets. </p> <blockquote> <p>BPMN-based process mining is a developing research area that has not yet fully transitioned to industry. The integration process involves converting between BPMN and Petri nets, enabling the utilization of existing process mining algorithms designed for Petri nets and visualizing the results on BPMN diagrams.</p> </blockquote> <p>Therefore, to develop the integration, we followed the approach described in <a href="proxy.php?url=http://www.padsweb.rwth-aachen.de/wvdaalst/publications/p901.pdf">enabling BPMN-based process mining</a>. Generally, this approach consists of converting between BPMN and Petri nets. This means that existing process mining algorithms developed for Petri nets can be used and the obtained results are then processed to be visualized on BPMN.</p> <p>To give a sense of this approach, Figure 3 below illustrates the workflow of generating the visualization shown in Figure 2 above (the discovered BPMN enriched with frequency information). </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--o5RCGeDT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ganayls51ivbldxny26.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--o5RCGeDT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ganayls51ivbldxny26.png" alt="Figure 3. Generating a visualization of the discovered process" width="800" height="341"></a></p> <p>The first step consists of importing an event log. In the backend, <strong>Process Discovery</strong> and <strong>Enhancement</strong> components are required to discover and compute frequency information, respectively. </p> <p>The <strong>Process Discovery</strong> component first creates a Petri net from the imported event log, which is then converted to BPMN. In our integration, this conversion is performed by the BPMN variant of the inductive miner using the <a href="proxy.php?url=https://pm4py.fit.fraunhofer.de/static/assets/api/2.7.4/generated/pm4py.discovery.discover_bpmn_inductive.html">discover_bpmn_inductive</a> method. It's important to note that newer process discovery algorithms that can directly create BPMN process models are emerging (e.g. see the <a href="proxy.php?url=https://process-analytics.dev/model-generation-application/">Model Generation Application</a> developed as part of the Process Analytics project or the Split miner used by <a href="proxy.php?url=https://apromore.com/research-lab/">Apromore</a>). </p> <p>Next, a layout generation algorithm is employed to determine the positions (i.e., x and y coordinates) of elements on the BPMN diagram. In our example, we used the <a href="proxy.php?url=https://github.com/process-analytics/bpmn-layout-generators">bpmn-layout-generators</a> library developed as part of the Process Analytics project. Finally, this component outputs a serialized BPMN xml file that is sent to <em>bpmn-visualization</em> for rendering.</p> <p>The <strong>Enhancement component</strong> enables the enrichment of the BPMN model with statistical data, such as frequency and performance information. To achieve this, a mapping between the event log and the process should be first established using <a href="proxy.php?url=https://www.researchgate.net/publication/229124749_Replaying_History_on_Process_Models_for_Conformance_Checking_and_Performance_Analysis">replay algorithms</a>. Once the mapping is established, the statistical data, such as frequency and performance data, can be computed for Petri net elements. The computed statistics then need to be mapped back to the corresponding BPMN elements. Finally, <em>bpmn-visualization</em> is utilized to visualize the results on top of the BPMN model.</p> <h2> Challenges &amp; limitations </h2> <h3> No native support for BPMN-based process mining </h3> <p>One of the main challenges we encountered is the lack of native support for BPMN-based process mining. While most process mining techniques rely on Petri nets, these can be challenging for non-technical business users to comprehend and utilize effectively. Existing industry-based solutions are primarily built on non-formal representations of <a href="proxy.php?url=https://fluxicon.com/book/read/mapview/">process maps</a>. Although process maps offer initial insights, they have limitations in representing the full process behavior and cannot support thorough and detailed analysis. In contrast, BPMN already has widespread acceptance within the business community, making it a more suitable and comprehensive approach for process mining.</p> <blockquote> <p>Converting BPMN to Petri nets for BPMN-based process mining has limitations such as information loss, performance issues, and maintenance overhead.</p> </blockquote> <p>The approach of converting BPMN to Petri nets is not a perfect solution for BPMN-based process mining due to several limitations:</p> <p><strong>Loss of information</strong>: The conversion process from BPMN to Petri nets may result in a loss of information, which can affect the accuracy of the analysis. In the BPMN-based process mining approach, a subset of BPMN elements is used to ensure a conversion with no loss.</p> <p><strong>Performance issues</strong>: The conversion process can be computationally intensive, which can lead to performance issues, especially when dealing with large process models. </p> <p><strong>Maintenance overhead</strong>: The use of Petri nets requires additional maintenance overhead, as the models need to be updated whenever changes occur in the business process. </p> <p>Furthermore, the <strong>enhancement</strong> process mining technique, which involves establishing a mapping between the process model and the event log and computing various statistics, relies on replay algorithms that have been developed for Petri nets. Unfortunately, to the best of our knowledge, there is currently no known open-source implementation available for BPMN. Since event logs cannot be directly replayed against BPMN models, they must first be converted to Petri nets before the replay can be performed.</p> <p>Despite these limitations, the conversion approach is currently the most viable solution for BPMN-based process mining, given the lack of native support for BPMN in the process mining community.</p> <h3> BPMN layout generation </h3> <p>Another challenge in BPMN-based process mining is generating a layout for the discovered process model. While process discovery algorithms can automatically extract a process model from event logs, they do not generate a visual layout that represents the model in a way that is easily understandable by humans. Process mining has primarily relied on existing hierarchical <a href="proxy.php?url=https://www.graphviz.org/pdf/dotguide.pdf">graph layout algorithms</a> that do not take into account specific process properties, such as centralizing the most frequent path or the most performant path. </p> <p>Recent efforts have emerged to address these issues in process maps, such as the <a href="proxy.php?url=https://ceur-ws.org/Vol-2374/paper5.pdf">Tracy algorithm</a> by UIPath. Notably, there are currently no proposed layout algorithms specifically tailored for BPMN. In our <a href="proxy.php?url=https://github.com/process-analytics/bpmn-layout-generators">bpmn-layout-generators</a> library, we currently focus on experimenting and generating more comprehensible BPMN layouts. In the future, we will continue exploring opportunities to enhance the layouting of BPMN models, including considerations for process properties. </p> <h2> Conclusion &amp; takeaways </h2> <p>Despite the current lack of native support for BPMN-based process mining, integrating BPMN with process mining techniques offers valuable insights that outweigh the discussed limitations.</p> <p>BPMN, with its higher level of detail and formality, surpasses the limitations of process maps, which are commonly used by existing process mining tools for result visualization. At Process Analytics, we are dedicated to developing BPMN-based visualization libraries like <em>bpmn-visualization</em> and <em>bpmn-layout-generators</em>. </p> <blockquote> <p>We envision a future, as <a href="proxy.php?url=https://medium.com/@process-analytics/interview-with-professor-wil-van-der-aalst-at-icpm-2022-81dc4d23df4c">hinted by Prof. Wil van der Aalst</a>, where there will be a seamless transition from process maps to BPMN. </p> </blockquote> <p>As this transition unfolds, we anticipate a growing demand for BPMN-based process mining tools capable of harnessing the full potential of this formalism, providing more accurate and comprehensive insights.</p> <p>If you want to stay on top of the latest news and releases from the Process Analytics project, follow us through:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=blog">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">https://discord.com/invite/HafnBYsRXd</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <h2> Useful resources </h2> <ul> <li> <a href="proxy.php?url=https://www.processmining.org/">Official process mining website</a> </li> <li> <a href="proxy.php?url=https://medium.com/@process-analytics/getting-started-with-bpmn-visualization-a54fbafae2df">Getting started tutorial to <em>bpmn-visualization</em></a> </li> <li> <a href="proxy.php?url=https://www.sciencedirect.com/science/article/pii/S1877050919322367?via%3Dihub">Limitations of process maps from a practitioner’s perspective by Wil van der Aalst</a> </li> <li>More articles about BPMN process discovery and layout generation by Process Analytics project can be found on: (<a href="proxy.php?url=https://process-analytics.dev/model-generation-application/">https://process-analytics.dev/model-generation-application/</a>)</li> </ul> processmining analytics visualization bpmn Process Analytics Monthly Report - April 2023 Thomas Bouffard Tue, 09 May 2023 05:13:00 +0000 https://dev.to/process-analytics/process-analytics-monthly-report-april-2023-45im https://dev.to/process-analytics/process-analytics-monthly-report-april-2023-45im <h2> <strong>Process Analytics - April 2023 News</strong> </h2> <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>In this edition, you'll find the details of the new bpmnVisualizationR package release and a refresh of the bpmn-visualization demo integrating with pm4py. 🤗 We're always looking for ways to improve your workflow, so read on for more details on these exciting developments!</p> <h2> bpmnVisualizationR package </h2> <p>In April, we released a new version: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.4.0">0.4.0</a>. This new version allows you to choose the style and position of the overlays.</p> <p>In earlier versions, the style and the position of the overlays were not configurable.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--lqkNygyr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vofu24bt7ul5yieg0qvy.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--lqkNygyr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vofu24bt7ul5yieg0qvy.png" alt="Display overlays with default position and style" width="758" height="195"></a><br> <em>Display overlays with default position and style</em></p> <p>Now, it is possible to change the position and the style of the overlays, like in the following screenshot 👇:</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--iiu61Hjt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6o09jvp3iogwb1os8si.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--iiu61Hjt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6o09jvp3iogwb1os8si.png" alt="Display overlays with a position and style change" width="758" height="197"></a><br> <em>Display overlays with a position and style change</em></p> <h2> Improvements in the bpmn-visualization pmp4py demo </h2> <p>Before pm4py 2.6.1, it was not possible to obtain statistics about the edges of the Petri net corresponding to the sequence flows of the BPMN diagram. This is a recurrent problem in the Process Mining community and a correction has been made in pm4py 2.6.1: <a href="proxy.php?url=https://github.com/pm4py/pm4py-core/commit/84e85c6e4715fe58159f6cfb83248d1cfa28bc8e">pm4py/pm4py-core@84e85c6</a>.</p> <p>The demo has been updated to benefit from the fix and it is now able to display execution frequency on the sequence flows of the BPMN diagram 🥳.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--cTnmVXFL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7g7itqyq0fjb8zytkl9.jpg" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--cTnmVXFL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7g7itqyq0fjb8zytkl9.jpg" alt="Display execution frequency on sequence flows" width="800" height="185"></a><br> <em>Display execution frequency on sequence flows</em></p> <h2> That’s All Folks! </h2> <p>We hope you enjoyed this “edgy” April project news and are looking forward to what the rest of the spring will bring 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/fr/photos/Ml10OqzzdyI">James Wheeler</a> on<a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"> Unsplash</a></em></p> news rlang analytics typescript Process Analytics - March 2023 News Thomas Bouffard Thu, 06 Apr 2023 09:09:00 +0000 https://dev.to/process-analytics/process-analytics-march-2023-news-5o7 https://dev.to/process-analytics/process-analytics-march-2023-news-5o7 <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>Greetings, fellow process enthusiasts 👋 As we welcome the first signs of spring, the Process Analytics team has been hard at work, bringing you some exciting updates for March. We recently took the stage at the Bonita Day Paris event, where we showcased our project to an enthusiastic audience. And that's not all! We've also been busy cooking up a new API that lets you style BPMN elements with just a few lines of code. We're always looking for ways to improve your workflow, so read on for more details on these exciting developments!</p> <h2> Highlights from our participation at Bonita Day </h2> <p>We recently had the pleasure of participating in <a href="proxy.php?url=https://fr.bonitasoft.com/ecosysteme/evenements/bonita-day-paris-2023">Bonita Day Paris 2023</a>, an event that brings together experts and enthusiasts in the field of business process management and automation. Not only did we get to showcase our latest project features and functionalities, but we also had the chance to network with other professionals in the industry and hear feedback from analysts and clients of Bonitasoft. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--NmRixRv1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pv33hgbi8toyewcob8a.jpg" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--NmRixRv1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pv33hgbi8toyewcob8a.jpg" alt="People presenting a Process Analytics demo at Bonita Day Paris 2023" width="880" height="514"></a></p> <p>We introduced attendees to the exciting world of process mining, and explained our project, <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">Process Analytics</a>. To give attendees a deeper understanding of our project's capabilities, we demonstrated process monitoring in two scenarios: offline and online. Using <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js">bpmn-visualization</a>, we showed how developers can use our libraries to create custom visualizations that fit their specific needs. </p> <p>Overall, it was a great experience for us to connect with other experts in the field and demonstrate the unique benefits of the Process Analytics project.</p> <h2> Our demo at Bonita Day: a look inside </h2> <p>Our <a href="proxy.php?url=https://github.com/process-analytics/bonita-day-demo-2023">live demo</a> at Bonita Day gave attendees a deep look into the capabilities of our project. We showed two process monitoring scenarios that demonstrated the various features of the bpmn-visualization TypeScript library, including applying CSS and overlays, registering interactions, and styling elements programmatically.</p> <p>We demonstrated the interaction possibilities of the library that allows us to explore the different BPMN processes used in the demo and navigate to the sub-process, which was also part of the presentation.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--3mvTosdp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2jxbujpgmh4mxxkhleh.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--3mvTosdp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2jxbujpgmh4mxxkhleh.gif" alt="Demo part 1" width="880" height="458"></a></p> <p>In case monitoring, we demonstrated the ability to visualize the results of a mock recommendation system and take actions by interacting with the BPMN elements.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--mP7RtQ-C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37hffgyrn128h5baklhr.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--mP7RtQ-C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37hffgyrn128h5baklhr.gif" alt="Demo part 2" width="880" height="458"></a></p> <p>Our process monitoring scenario also showed the happy path animated on the BPMN process diagram. </p> <p>For more details, check out the <a href="proxy.php?url=https://github.com/process-analytics/bonita-day-demo-2023">demo on GitHub</a>.</p> <h2> The Process Analytics Project website </h2> <p>In <a href="proxy.php?url=https://medium.com/p/5f0546b55b26">February</a>, we gave <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">our website</a> a fresh new look, and in March we focused on reworking the menu and improving the design for mobile users (see figure below). We're happy to announce that we have more improvements in the pipeline, so stay tuned for further updates in the coming months!</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--VuZT61MB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqrabzbssve0cswsc90h.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--VuZT61MB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqrabzbssve0cswsc90h.png" alt="The Process Analytics website rendered on mobile" width="880" height="1905"></a></p> <h2> bpmn-visualization TypeScript library </h2> <p>In <strong>March</strong>, we released 2 versions: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.32.0">0.32.0</a> &amp; <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.33.0">0.33.0</a>. The former includes several improvements, while the latter introduces the new update style API for programmatically styling BPMN elements.</p> <h3> Update style programmatically </h3> <p>Release <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.33.0">0.33.0</a> includes a new functionality that allows you to easily and programmatically style BPMN elements. Let's take a sneak peek at how to use this new feature with an example.</p> <p>Let's say you want to monitor the progress of the execution of a BPMN process dynamically and progressively, like in the "Supplier Contact" process shown in our <a href="proxy.php?url=https://process-analytics.github.io/bonita-day-demo-2023/?use-case=case-monitoring">case-monitoring</a> demo at Bonita Day. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--4c43cbSJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i5x8tvmb1uhtzjkfsur.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--4c43cbSJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i5x8tvmb1uhtzjkfsur.png" alt="BPMN elements with specific styles" width="880" height="289"></a></p> <p>With the update style API, you can achieve this easily by defining three states for the style - the activity currently under execution, the element that has just finished execution, and the elements that are already executed. To configure the style of the activity currently under execution, you can use the <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-js/api/classes/BpmnElementsRegistry.html#updateStyle">updateStyle</a> method with the following parameters:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">updateStyle</span><span class="p">(</span><span class="nx">activityId</span><span class="p">,</span> <span class="p">{</span> <span class="na">fill</span><span class="p">:</span> <span class="p">{</span><span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">blue</span><span class="dl">'</span><span class="p">,</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">10</span><span class="p">},</span> <span class="na">font</span><span class="p">:</span> <span class="p">{</span><span class="na">opacity</span><span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">},</span> <span class="na">opacity</span><span class="p">:</span> <span class="dl">'</span><span class="s1">default</span><span class="dl">'</span><span class="p">,</span> <span class="na">stroke</span><span class="p">:</span> <span class="p">{</span><span class="na">color</span><span class="p">:</span> <span class="dl">'</span><span class="s1">blue</span><span class="dl">'</span><span class="p">,</span> <span class="na">width</span><span class="p">:</span> <span class="mi">3</span><span class="p">},</span> <span class="p">});</span> </code></pre> </div> <p>For the element that has just finished execution, you can reduce its opacity using the <strong>updateStyle</strong> method like this:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">updateStyle</span><span class="p">(</span> <span class="nx">lastExecutedId</span><span class="p">,</span> <span class="p">{</span><span class="na">opacity</span><span class="p">:</span> <span class="mi">50</span><span class="p">});</span> </code></pre> </div> <p>Finally, for the elements that are already executed, you can further reduce their font and fill opacities using the updateStyle method with the following parameters:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="nx">bpmnVisualization</span><span class="p">.</span><span class="nx">bpmnElementsRegistry</span><span class="p">.</span><span class="nx">updateStyle</span><span class="p">(</span> <span class="nx">pastExecutedId</span><span class="p">,</span> <span class="p">{</span> <span class="na">font</span><span class="p">:</span> <span class="p">{</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">15</span><span class="p">,</span> <span class="p">},</span> <span class="na">opacity</span><span class="p">:</span> <span class="mi">20</span><span class="p">,</span> <span class="p">});</span> </code></pre> </div> <p>In the coming weeks, we will provide several examples demonstrating the usage of this API in various use cases, and we also have plans for several improvements to be made on this API.</p> <h2> That’s All Folks! </h2> <p>That’s everything we were up to in March and we hope you found something in there to like. Stay tuned for more cool stuff coming up this spring 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo "Spring ball" by <a href="proxy.php?url=https://unsplash.com/photos/pTfdcT0hxGc">Hannah Jacobson</a> on <a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></em></p> news bpmn api visualization Process Analytics - February 2023 News Nour Assy Fri, 03 Mar 2023 06:15:00 +0000 https://dev.to/process-analytics/process-analytics-february-2023-news-1c3b https://dev.to/process-analytics/process-analytics-february-2023-news-1c3b <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>Hey there and welcome to our February monthly news! In this edition, you'll find exciting highlights from our latest release, including some new features and improvements to our <em>bpmn-visualization</em> TypeScript library. We've also got some news to share about upcoming events you won't want to miss. So sit back, relax 🎵, and enjoy reading through the February edition of our monthly news 📖.</p> <h2> Join us at Bonita Day 2023 in Paris </h2> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--96tAMVKV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z12jbicwwuflxrvxvnvl.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--96tAMVKV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z12jbicwwuflxrvxvnvl.png" alt="Bonita Day 2023" width="650" height="250"></a></p> <p>Save the date for Bonita Day 2023, Bonitasoft's annual event in Paris where you can discover all things BPM and get valuable feedback from our clients. This year, we'll be showcasing our "Process Analytics" project with a live demo. If you happen to be in or around Paris on <strong>March 30th, 2023</strong>, we invite you to join us for a day filled with informative sessions, expert speakers, and networking opportunities with industry professionals. </p> <p>We can't wait to see you there! <strong><a href="proxy.php?url=https://fr.bonitasoft.com/ecosysteme/evenements/bonita-day-paris-2023">Register now</a>!</strong></p> <p>If you don't want to miss events like this, please sign up for our <a href="proxy.php?url=https://us20.campaign-archive.com/home/?u=98bed213911ed14e04f519b82&amp;id=9c27a4ee73">newsletter</a>, which is accessible from our website. Then you’ll always be informed!</p> <h2> Pitch at AI4BPM during AAAI 2023 </h2> <p>We're happy to share that our project was recently pitched at the <a href="proxy.php?url=https://ai4bpm.com/">AI4BPM</a> event, which was organized as part of the larger AI conference <a href="proxy.php?url=https://aaai-23.aaai.org/">AAAI 2023</a>. If you missed the event, you can still watch our <a href="proxy.php?url=https://www.youtube.com/watch?v=4az33KcQiFo">video pitch</a>. Check it out and let us know what you think!</p> <p>This was a fantastic opportunity for us to showcase our project. We're grateful for the chance to participate in such a prestigious event! </p> <h2> Our website gets a fresh look </h2> <p>Our <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">website</a> has undergone a makeover! Overall, we find that the new design is clean and streamlined, with plenty of white space to make the content more readable. We're thrilled to share this new site with you and can't wait for you to see all the changes!</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--Bq-FoVRg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8dflu23eoa744sh7629.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--Bq-FoVRg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8dflu23eoa744sh7629.png" alt="New website design" width="880" height="495"></a></p> <h2> bpmnVisualizationR package </h2> <p>Our R package <em>bpmnVisualizationR</em> has been <strong><a href="proxy.php?url=https://cran.r-project.org/package=bpmnVisualizationR">published on CRAN</a></strong> 🎉. </p> <p>Publishing on CRAN means that the package is now available to a wider audience of R users, with increased visibility and accessibility. For more information on the package and how to use it, check out our <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-R/">documentation and examples</a>. </p> <p>We're always looking for ways to improve our package and make it more useful for our users. 🔌 If you have any feedback, suggestions, or feature requests for bpmnVisualizationR, we'd love to hear from you! You can reach out to us directly via our <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Discord channel</a>.</p> <h2> bpmn-visualization TypeScript library </h2> <p>In <strong>February</strong>, we released 2 versions: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.30.0">0.30.0</a> &amp; <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.31.0">0.31.0</a>.</p> <h3> Navigate BPMN diagrams with neighborhood information </h3> <p>We added a new feature that enables users to retrieve neighborhood information for BPMN elements. </p> <p>The <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.31.0/examples/custom-behavior/javascript-tooltip-and-popover/index.html">js-popover example</a> has been updated to display this new information as shown below.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--dNHhmkAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmuszidgd943y0cfm3zv.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--dNHhmkAA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmuszidgd943y0cfm3zv.png" alt="IDs of the incoming and outgoing edges of a BPMN activity returned by the enriched API" width="880" height="387"></a></p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--EEDnqaX_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tec4licvsn05obrwvwi.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--EEDnqaX_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tec4licvsn05obrwvwi.png" alt="IDs of the source and target activity of a BPMN edge returned by the enriched API" width="280" height="270"></a></p> <p>With this feature, users can easily navigate through the diagram and identify related elements, making it easier to analyze BPMN diagrams. This feature also allows for implementing advanced search functionalities. </p> <h3> Access to underlying mxGraph context </h3> <p>The library now provides access to the underlying <a href="proxy.php?url=https://jgraph.github.io/mxgraph/">mxGraph</a> context. This functionality is intended for advanced users who want to customize and extend the library's functionality. </p> <p>One example of where this feature comes in handy is our latest <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py">integration example with pm4py</a>. In this example, we dynamically updated the style of BPMN elements based on data received from the backend processing by pm4py. You can see an excerpt in the gif below.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--IBiKLcAy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1upjq4zup9t020u8c6ro.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--IBiKLcAy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1upjq4zup9t020u8c6ro.gif" alt="Example of integration between bpmn-visualisation and pm4py" width="880" height="407"></a></p> <h3> New demo for navigating a BPMN diagram </h3> <p>A <a href="proxy.php?url=https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.31.0/demo/draw-path/index.html">new demo</a> that illustrates how users can interact and navigate a BPMN diagram by highlighting two consecutive shapes is available. The demo video below shows how this feature works in action.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--8hGG2XHo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2n33r9pc9v8frt6eofs.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--8hGG2XHo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2n33r9pc9v8frt6eofs.gif" alt="Demo for highlighting consecutive BPMN elements" width="880" height="381"></a></p> <h2> That’s all folks! </h2> <p>We hope you enjoyed this <strong>February</strong> project news and stay tuned for more updates and exciting developments in the coming months 👋!</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/fr/@rayhennessy">Ray Hennessy</a> on <a href="proxy.php?url=https://unsplash.com/fr/photos/6-JIDCnZG2E">Unsplash</a></em></p> news bpmn r typescript Process Analytics - January 2023 News Nour Assy Thu, 02 Feb 2023 07:00:00 +0000 https://dev.to/process-analytics/process-analytics-january-2023-news-7o1 https://dev.to/process-analytics/process-analytics-january-2023-news-7o1 <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>It's a new year 🎊 and what better way to kick off 2023 than with some Process Analytics news! January brought us exciting developments in the world of <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js">bpmn-visualization</a> and <a href="proxy.php?url=http://pm4py.org/">pm4py </a> integration 🔗. With our team working hard to connect the dots, we’re making bpmn-visualization more accessible and easier to integrate with the <a href="proxy.php?url=https://www.processmining.org/">Process Mining</a> ecosystem. </p> <p>Let's dive into the details and see what else this month has to offer 👀.</p> <h2> Integrating bpmn-visualization and pm4py </h2> <p>We released an <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-pm4py">integration example</a> between <em>bpmn-visualization</em> and the state-of-the-art process mining library <em>pm4py</em>. This integration means you can perform process mining and visualize the results on BPMN models. You can watch the <a href="proxy.php?url=https://www.youtube.com/watch?v=qmWcnZ4Ffn0">video</a> showcasing the integration example on our youtube channel.</p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--3fkw9fVQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vygj0nqzpgzlwjv5p8p.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--3fkw9fVQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vygj0nqzpgzlwjv5p8p.png" alt="A screenshot from the integration example between bpmn-visualization and pm4py showing the result of conformance checking on a BPMN model" width="880" height="427"></a></p> <p>With this integration, the <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">Process Analytics</a> project empowers the community to take control of your process visualization and bring your process mining results to life with ease ✨. Additionally, the integration offers a way to gain a deeper understanding of the limitations and requirements when it comes to BPMN based process mining and visualization. </p> <h2> Bringing Process Analytics into the Classroom </h2> <p>Recently, <a href="proxy.php?url=https://www.linkedin.com/in/nour-assy/">Nour</a>, our developer advocate, had the opportunity to bring process analytics into the classroom by presenting an introduction to process mining at <a href="proxy.php?url=https://www.telecom-sudparis.eu/">Telecom SudParis</a> 🎓. The lecture was followed by a hands-on session using <em>bpmn-visualization</em> and <em>pm4py</em>, so students got a practical understanding of the process mining and visualization tools. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--lK60IGmB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99gbz7cgveqpp03swtyn.jpg" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--lK60IGmB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99gbz7cgveqpp03swtyn.jpg" alt="Introducing Process Mining to students at Telecom Sudparis" width="880" height="420"></a></p> <p>This educational experience gave them an opportunity to learn about the usefulness of process mining and visualization and how it can be applied to real-world scenarios 💪.</p> <h2> bpmnVisualizationR Package </h2> <p>Versions <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.3.0">0.3.0</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.3.1">0.3.1</a> were released in <strong>January</strong>.</p> <p>These new versions include documentation improvements to better meet CRAN's requirements.</p> <p>Notice that the package has been renamed. Please check out the corresponding <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.3.0">release notes</a> to see what changes you need to make in your R project to use the updated package.</p> <h2> bpmn-visualization TypeScript library </h2> <p>In <strong>January</strong>, we released two maintenance versions of the bpmn-visualization TypeScript library: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.29.1">0.29.1</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.29.2">0.29.2</a>.</p> <p>They mainly include documentation improvements.</p> <h2> That’s all folks! </h2> <p>We hope you enjoyed this <strong>January</strong> project news and are looking forward to the exciting developments and advancements that are coming in the next months. Stay tuned for more updates and insights from the process analytics project 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> <li>YouTube: <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/fr/photos/kxzhL_3efMY">Tomáš Malík</a> on <a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></em></p> news processmining pm4py bpmn Process Analytics - December 2022 News Nour Assy Thu, 29 Dec 2022 06:15:00 +0000 https://dev.to/process-analytics/process-analytics-december-2022-news-3ejp https://dev.to/process-analytics/process-analytics-december-2022-news-3ejp <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>December is here ❄️, bringing with it the holiday season 🥳 and the end of another year. As 2022 comes to a close, we would like to share some of the highlights and updates from this month. We hope you enjoy reading about what we did and stay tuned for more news in the coming year!</p> <h2> Roadmap 2023 🛣️ </h2> <p>December was one of the busiest and most exciting times of the year as the Process Analytics team worked hard and proactively to prepare the roadmap for 2023 💪. </p> <p>We carefully reviewed, and made sure to take into account, all the feedback that we collected throughout the year from our users - and from our participation in the ICPM conference. <strong>Abstraction layers</strong>, <strong>interaction APIs</strong>, and much more is on the list ✨. </p> <h3> Your Feedback Matters: Share Your Thoughts with Us </h3> <p>We want to hear from you! In May 2023, we will be reaching out to the community for feedback and suggestions to incorporate into the second half of the roadmap.</p> <p>Do you have ideas for features you would like to see in our libraries? We welcome your input and encourage you to contact us through one of the communication channels listed at the end of this report 👇. Your feedback is valuable to us and we are committed to considering and implementing your suggestions.</p> <h2> ICPM demo on Youtube </h2> <p>In case you missed our demo at the ICPM conference, we released a <a href="proxy.php?url=https://www.youtube.com/watch?v=9_vWeOwxsW0">video</a> on the <a href="proxy.php?url=https://www.youtube.com/@process-analytics">Process Analytics YouTube channel</a> showcasing our bpmn-visualization TypeScript library in action. Be sure to check it out for a sneak peek of all the exciting features and capabilities the library has to offer.</p> <p>If you enjoyed our demo video and want to stay up to date with all our latest content and updates, be sure to subscribe to our <a href="proxy.php?url=https://www.youtube.com/@process-analytics">YouTube channel</a>! Just click the "Subscribe" button on our channel page to start receiving notifications whenever we post new content. Thank you for your support 😍!</p> <h2> bpmn-visualization TypeScript library </h2> <p>In December, we released the <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.29.0">0.29.0</a> version. We are pleased to announce that we added support for the BPMN <strong>complex gateway</strong>. </p> <p><a href="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--Rz0tEnvG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/896cl65spx8av03uq9i9.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://res.cloudinary.com/practicaldev/image/fetch/s--Rz0tEnvG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/896cl65spx8av03uq9i9.png" alt="Rendering of the BPMN Complex gateway" width="336" height="338"></a></p> <p>The complex gateway is a type of gateway that allows users to make decisions based on multiple variables and can be used to create more sophisticated process models. </p> <p>According to the <a href="proxy.php?url=https://www.omg.org/spec/BPMN/2.0/PDF">BPMN 2.0 specification</a>, it is represented by a diamond-shaped symbol with an asterisk. It is activated when all incoming sequences are completed, and then evaluates the conditions associated with each outgoing sequence to determine which one to follow next. This allows users to design process flows that can adapt to different situations and make decisions based on multiple factors.</p> <h2> That’s all folks! </h2> <p>We hope you enjoyed this December project news. We will now take some time to rest and recharge over the holiday season, so that we can start the new year refreshed and ready to tackle all the exciting projects and initiatives that we have planned 🤞. We wish you a joyful holiday season and look forward to seeing you in 2023 👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us through one or more of the channels below, and please send us your ideas for our development roadmap through your favorite medium!</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd">Join our server!</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/fr/photos/Mu_9w7l1koI">Aaron Burden</a> on<a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"> Unsplash</a></em></p> news bpmn roadmap visualization Process Analytics - November 2022 News Nour Assy Mon, 05 Dec 2022 08:12:42 +0000 https://dev.to/process-analytics/process-analytics-november-2022-news-4kg6 https://dev.to/process-analytics/process-analytics-november-2022-news-4kg6 <p>Welcome to the Process Analytics monthly news 👋.</p> <p>Our “always” reminder: The goal of the Process Analytics project is to provide a means to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.</p> <p>One month before the end of 2022, what a great year ✨. November flew by so quickly while the Process Analytics team was very busy preparing the 2023 roadmap 🤩. But before the holiday season, we made sure to release great content, most notably an article about our conversation with Prof. Wil van der Aalst on the current state and the future of Process Mining. We are also very happy to announce that our bpmn-visualization R package is alive! Check out the details 👇.</p> <h2> Promotion </h2> <h3> ICPM: Interview with Professor Wil van der Aalst </h3> <p>Last month, we were on stage presenting a live demo at the <a href="proxy.php?url=https://icpmconference.org/2022/" rel="noopener noreferrer">International Conference on Process Mining (ICPM) 2022</a>. Our team’s developer advocate, Nour, had the chance to meet and discuss with <a href="proxy.php?url=http://www.padsweb.rwth-aachen.de/wvdaalst/" rel="noopener noreferrer">Professor Wil van der Aalst</a>, one of the most cited computer scientists in the world, known for his work on <a href="proxy.php?url=http://www.processmining.org/" rel="noopener noreferrer">Process Mining</a>. </p> <p>Nour asked Wil questions about the definition of process mining, its current state, its adoption by the industry and what the future holds. We wrote an article summarizing this discussion and highlighting some important takeaways 💡. Check out the details 👉 <a href="proxy.php?url=https://medium.com/@process-analytics/interview-with-professor-wil-van-der-aalst-at-icpm-2022-81dc4d23df4c" rel="noopener noreferrer">here</a>.</p> <h3> Hacktoberfest: Results &amp; Recap </h3> <p>Now that Hacktoberfest has become an official Process Analytics tradition 💪, we’ve written an <a href="proxy.php?url=https://medium.com/@process-analytics/hacktoberfest-2022-now-its-an-official-process-analytics-tradition-8493b064d0b4" rel="noopener noreferrer">article</a> highlighting the contributions and lessons learned as maintainers 👷‍♂️. </p> <p>We would like to warmly thank our contributors and all the people who contacted us via our <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd" rel="noopener noreferrer">Discord channel</a> to express their enthusiasm about the project and their willingness to make their first open source contributions 💖. It’s just fantastic and rewarding for us as maintainers 🌟! </p> <p>Hope to see you all again at Hacktoberfest 2023!</p> <h2> bpmn-visualization JS/TS library </h2> <p>In November, we released 2 versions: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.28.1" rel="noopener noreferrer">0.28.1</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.28.2" rel="noopener noreferrer">0.28.2</a>. They provide internal improvements.</p> <p>In addition to these 2 new releases, we introduced a new example showing how to integrate bpmn-visualization in Angular applications. We thank <a href="proxy.php?url=https://github.com/akantcheff" rel="noopener noreferrer">@akantcheff</a> for this contribution done during Hacktoberfest 👇.</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi39v3aay0w8b8pcrgjeg.gif" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi39v3aay0w8b8pcrgjeg.gif" alt="Angular integration example of bpmn-visualization" width="826" height="1045"></a></p> <h2> bpmn-visualization R library </h2> <p>In November, we released 2 versions: <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.2.1" rel="noopener noreferrer">0.2.1</a> and <a href="proxy.php?url=https://github.com/process-analytics/bpmn-visualization-R/releases/tag/v0.2.2" rel="noopener noreferrer">0.2.2</a>.</p> <p>The new versions make improvements to the documentation, mainly to correct the comments associated with the recent attempts to submit to CRAN. We are waiting for feedback from the CRAN maintainers and we hope the package will be soon available on CRAN.</p> <p>🎥 The HTML documentation is now available on GitHub Pages: <a href="proxy.php?url=https://process-analytics.github.io/bpmn-visualization-R/" rel="noopener noreferrer">https://process-analytics.github.io/bpmn-visualization-R/</a></p> <p>It provides all the information you need to install and use the package, and some live examples - like the following 👇</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Folryntzaw4crefvqp3mm.png" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Folryntzaw4crefvqp3mm.png" alt="bpmn-visualization-R documentation" width="776" height="425"></a></p> <h2> That’s all folks! </h2> <p>We hope you enjoyed this November project news and are looking forward to what the end of 2022 will bring** **👋.</p> <p>In the meantime, stay on top of the latest news and releases by following us:</p> <ul> <li>Website: <a href="proxy.php?url=https://process-analytics.dev/?utm_source=dev.to&amp;utm_medium=display&amp;utm_campaign=news">https://process-analytics.dev</a> </li> <li>Twitter: <a href="proxy.php?url=https://twitter.com/ProcessAnalyti1" rel="noopener noreferrer">@ProcessAnalyti1</a> </li> <li>GitHub: <a href="proxy.php?url=https://github.com/process-analytics" rel="noopener noreferrer">https://github.com/process-analytics</a> </li> <li>Discord: <a href="proxy.php?url=https://discord.com/invite/HafnBYsRXd" rel="noopener noreferrer">Join our server!</a> </li> </ul> <p><em>Cover photo by <a href="proxy.php?url=https://unsplash.com/photos/bJPn27RFg0Y" rel="noopener noreferrer">Priscilla Du Preez</a> on <a href="proxy.php?url=https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" rel="noopener noreferrer">Unsplash</a></em></p> angular Interview with Professor Wil van der Aalst at ICPM 2022 Nour Assy Mon, 28 Nov 2022 10:02:33 +0000 https://dev.to/process-analytics/interview-with-professor-wil-van-der-aalst-at-icpm-2022-4lg1 https://dev.to/process-analytics/interview-with-professor-wil-van-der-aalst-at-icpm-2022-4lg1 <p>This past October, <a href="proxy.php?url=https://www.linkedin.com/in/nour-assy/" rel="noopener noreferrer">Nour Assy</a>, the Process Analytics team’s developer advocate, attended the <a href="proxy.php?url=https://icpmconference.org/" rel="noopener noreferrer">International Conference on Process Mining</a> (ICPM). ICPM is an important forum for researchers, practitioners and developers in the field of Process Mining. During the week-long conference, knowledge and recent trends in this field are shared and exchanged through scientific talks, industry discussions and technical panels.</p> <p>Nour had the lucky opportunity to talk with professor <a href="proxy.php?url=https://www.linkedin.com/in/wvdaalst/" rel="noopener noreferrer">Wil van der Aalst</a>, one of the most cited computer scientists in the world, known for his work on <a href="proxy.php?url=http://www.processmining.org/" rel="noopener noreferrer">process mining</a>. Prof.dr.ir. van der Aalst is an Alexander-von-Humboldt professor at <a href="proxy.php?url=https://www.rwth-aachen.de/" rel="noopener noreferrer">RWTH Aachen</a>, heading the <a href="proxy.php?url=https://www.pads.rwth-aachen.de/" rel="noopener noreferrer">Process and Data Science Group (PADS) </a>and is the Chief Scientist of <a href="proxy.php?url=https://www.celonis.com/" rel="noopener noreferrer">Celonis</a>.</p> <p>Here we are happy to share a synthesis of their conversation about the scope of Process Mining, research advances in the field, industry adoption, and what the future holds.</p> <p><strong>Nour</strong>: Process mining, process analytics, process intelligence, and other terms are being interchangeably used. Do you see a difference in terms of scope and techniques?</p> <p><strong>Wil</strong>: Process Mining is a broad concept that ranges from data extraction and preparation to discovery, compliance and conformance checking, predictions and improvements. It is important to note that Process Mining should not be reduced to process discovery as some think. Looking at the ICPM conference topics, it is clear that Process Mining is not just about process discovery. The use of other terms is often associated with commercial reasons. So I think it would be very helpful if everyone would stick to the term Process Mining.</p> <blockquote> <p><em>In the coming years, Object-Centric Process Mining will be the topic that's going to get a lot of attention. All the vendors are going to be moving in that direction.</em></p> </blockquote> <p><strong>Nour:</strong> We are seeing a wave of Process Mining adoption in industry, and many R&amp;D initiatives to put research ideas into practice. How do you see the current state of Process Mining in industry compared to advances in research? </p> <p><strong>Wil</strong>: Process Mining has a longer history of research and it has applications. The first tools appeared 15 years ago, but they were not very successful at doing very basic things. Right now, there are about 40 tools. I think the development of tools has accelerated in the last few years and what's really accelerating now is the adoption in the industry. For example, Process Mining has become the normal thing to do in northern European countries. Right now, the industry is catching up, but I would say we are just at the beginning.</p> <blockquote> <p><em>The transition between the basic process map view and BPMN will become more fluid. The separation that currently exists is not necessary.</em></p> <p><em>The boundary between user-driven modeling and data-driven process discovery will become more fluid by following a “human in the loop” approach.</em></p> </blockquote> <p><strong>Nour:</strong> If we compare research results to commercial tools, it looks like the latter wins in terms of visualization. How do you see the future of visualization in Process Mining?</p> <p><strong>Wil:</strong> I'm not sure I agree with that statement. I think commercial tools typically have a much better usability, but they offer much more limited functionality. I think this is a big difference. In terms of visualization, I expect that process models will continue to play an important role in any type of visualization, as for example when we talk about visualizing compliance and performance data. Most importantly is that the boundary between the basic visualization of Directly-Follows Graphs (DFG) (known as process maps) and BPMN will become more fluid and I think it will become easier to switch between DFG and BPMN views. Another dimension that we will witness is that the boundary between modeling and discovery, by putting “humans in the loop”, will become fluid. In the research domain, there are many prototypes of interactive process discovery in which domain knowledge can be combined with available data, demonstrating that this boundary can become fluid.</p> <p><strong>Nour:</strong> The BPMN 2.0 has become mainstream in the BPM market but it is still not that popular in the Process Mining market. Do you think there is an opportunity for a bigger adoption of BPMN in Process Mining?</p> <p><strong>Wil</strong>: The higher end tools already offer a BPMN view of the data. But as I mentioned, it is typical that the default view is a DFG, and the BPMN view is a more advanced view. So I think in the future, any Process Mining tool will support BPMN and the boundary between the two views will be more fluid. For process discovery, people usually use DFGs, while for conformance checking, they use BPMN models. You can also do conformance checking using a DFG model, and you can also discover BPMN models. That separation is not necessary. This is why I say it should become more fluid. Of course, when we talk about BPMN, we need to make it clear that if we discover things only based on the data, we are talking about a limited subset of BPMN. For example, it is possible to discover AND and XOR gateways, resources, etc., but BPMN is a rich language with many different constructs that cannot be derived from the data at this stage.</p> <blockquote> <p><em>We will move from fixed and hard-coded visualization to intelligent interactive visualization. If we see bottlenecks, we will be able to click and get visualizations that explain these bottlenecks.</em></p> </blockquote> <p><strong>Nour:</strong> In the <a href="proxy.php?url=https://www.tf-pm.org/resources/manifesto" rel="noopener noreferrer">Process Mining Manifesto</a>, there is a clear desire to combine Process Mining with Visual Analytics. Do you think we are there yet? And what challenges do you foresee in putting this idea into practice? </p> <p><strong>Wil</strong>: There are currently a few nice examples. The dotted chart is a very nice visualization which clearly complements process models. In the future, intelligent interactivity will play an important role. For example, currently, filtering based on case activity attributes is done by providing a query, pressing buttons or exploring a hard-coded dashboard. I expect this to become more fluid. For example, users will be able to click on bottlenecks and have visualizations that explain these bottlenecks. We don't see those capabilities right now, but it's clear that with smart visualization, you could do simple things like bar charts, but also dotted charts and other advanced visual components.</p> <p><strong>Nour:</strong> Currently, we discover and use 2D process models. Are we going to move on to 3D models? </p> <p><strong>Wil</strong>: This reminded me of the time when I used to visit Australia. We have developed a ProM plugin that allows us to visualize a process in 3D and walk through it in virtual reality. I think 3D visualizations are nice and get people's attention, but adding a third dimension can quickly become limiting and we should be careful about that.</p> <p><strong>Nour</strong>: In addition to the obvious use cases in BPM and Process Mining technologies, there are many other situations where process-related execution data needs to be visualized (RPA, BI, test automation, CI/CD pipelines). Do you think Process Mining technologies will start to offer these capabilities as part of their solutions?</p> <p><strong>Wil</strong>: Let's take the example of RPA and Process Mining. There is a clear relationship. The RPA part generates the events based on screen scraping or whatever is used. So the RPA will provide event data. Then for a Process Mining tool, this is not new. I think it's also true for many other application areas. The requirements for Process Mining are not so different. That's why we see increasingly that, for example, Process Mining is used in production. Previously, it was mainly financial and administrative processes. For Process Mining, I think the challenges are more on the data preparation side. For example, how do you convert sensor data into event data? But I would consider that this is actually something that is outside of what you would expect from a normal Process Mining tool.</p> <p><strong>Nour:</strong> In the opening session of <a href="proxy.php?url=https://icpmconference.org/2022/" rel="noopener noreferrer">ICPM 2022</a>, we saw words like “prediction” and “alignment” in the top topics of the word cloud of ICPM 2022. What words or topics do you think will appear in the word cloud of ICPM 2030?</p> <p><a href="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiojk507gln77i1sobpsz.jpg" class="article-body-image-wrapper"><img src="proxy.php?url=https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiojk507gln77i1sobpsz.jpg" alt="Word cloud of accepted papers at ICPM 2022" width="800" height="600"></a></p> <p><strong>Wil:</strong> That is difficult. But in the coming years, the topic that's going to get a lot of attention is Object-Centric Process Mining. I think there is a lot of research going on in this area and all the vendors are going to be moving in that direction. If you think a bit further, it is not so clear what it would be. What I find fascinating is that even though we have good techniques for process discovery, compliance checking, prediction, etc. some of which work in practice, however, it's clear that these problems are not solved. So I predict that in 2030 we will still be talking about process discovery techniques, because it is a very difficult problem that requires years of follow-up. </p> programming softwaredevelopment opensource