Git Product home page Git Product logo

icpm-demo-2022's Introduction

The demo presented at ICPM 2022

๐ŸŽฎ The deployed solution

To see the deployed solution: https://process-analytics.github.io/icpm-demo-2022/

โš’๏ธ Development Setup

Use node 16

Install dependencies: npm install

Start the dev server: npm start

The demo is accessible at http://localhost:5173/

๐Ÿ“ƒ License

The code of this demo is released under the Apache 2.0 license.

๐Ÿš€ Release how-to

When all updates have been completed, you are ready to publish a new release.

Create a new GitHub release by following the GitHub help

  • for Tag version, use a value following the vX.Y.Z scheme using the Semantic Versioning.
  • for Target
    • usually, keep the main branch except if new commits that you don't want to integrate for the release are already available in the branch
    • in that case, choose a dedicated commit
  • Description

โšก Powered by

GitHub logo

GitHub Pages (demo live environment)

surge.sh logo

surge.sh (demo preview environment)

icpm-demo-2022's People

Contributors

assynour avatar csouchet avatar dependabot[bot] avatar tbouffard avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

tbouffard

icpm-demo-2022's Issues

(refactor) Avoid duplication in hideConformanceData

Replace

export function hideConformanceData(bpmnVisualization) {
  const bpmnElementsRegistry = bpmnVisualization.bpmnElementsRegistry;
  const bpmnTaskElements =
    bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(
      ShapeBpmnElementKind.TASK
    );
  bpmnTaskElements.forEach((elt) => {
    bpmnElementsRegistry.removeAllOverlays(elt.bpmnSemantic.id);
  });
  const bpmnSubprocessElements =
    bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(
      ShapeBpmnElementKind.SUB_PROCESS
    );
  bpmnSubprocessElements.forEach((elt) => {
    bpmnElementsRegistry.removeAllOverlays(elt.bpmnSemantic.id);
  });
  const bpmnEventElements =
    bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(
      ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH
    );
  bpmnEventElements.forEach((elt) => {
    bpmnElementsRegistry.removeAllOverlays(elt.bpmnSemantic.id);
  });

  const bpmnFlowElements =
    bpmnVisualization.bpmnElementsRegistry.getElementsByKinds(
      FlowKind.SEQUENCE_FLOW
    );
  bpmnFlowElements.forEach((elt) => {
    bpmnElementsRegistry.removeAllOverlays(elt.bpmnSemantic.id);
  });

  deleteLinearGradient(bpmnVisualization);
}

by

/**
 * @param {BpmnVisualization} bpmnVisualization
 */
export function hideConformanceData(bpmnVisualization) {
  const bpmnElementsRegistry = bpmnVisualization.bpmnElementsRegistry;
  const bpmnElements =
      bpmnElementsRegistry.getElementsByKinds(
      [ShapeBpmnElementKind.TASK, ShapeBpmnElementKind.SUB_PROCESS, ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH,  FlowKind.SEQUENCE_FLOW]
    );
  bpmnElements.forEach((elt) => {
    bpmnElementsRegistry.removeAllOverlays(elt.bpmnSemantic.id);
  });

  deleteLinearGradient(bpmnVisualization);
}

[FEAT] Conformance Data: display a legend

Is your feature request related to a problem? Please describe.
The colors are these which are commonly used for "Conformance" analysis. But for someone which needs a reminder or knows nothing about this topic, it is hard to understand which data are presented in this demo.

Describe the solution you'd like
Display a legend to explain what the demo displays.
We already did this in the "Monitoring Demo" hosted in the examples repository: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/v0.27.1/demo/monitoring-all-process-instances/index.html

[REFACTOR] Move the code to TypeScript

In the past, we had a lot of issue due to the JavaScript syntax (API misuse for instance) that can only be found at runtime.
As we have to tests in this repository, this is a pain.

Moving to TypeScript will avoid such errors. This will also helps when bumping bpmn-visualization.

Notes 2023-03-10
Some parts of the code have been reused in https://github.com/process-analytics/bonita-day-demo-2023 which is written in TypeScript. This could help migrating the code here.

bug: compliance rules ripples circles are removed after applying a new CSS class

Describe the bug
In #85, the activities involved in compliance rules are highlighted on mouseover. When a new CSS class is added to highlight the activities, the ripple circles of the activity to be highlighted are discarded. Similar behavior as in #2 and #4.

To Reproduce
Steps to reproduce the behavior:

  1. Notice that Record Invoice Receipt has ripple circles
  2. Click on Clear Invoice
  3. Hover the mouse on Record Invoice Receipt in the displayed popover
  4. Notice that the ripple circles are discarded from Record Invoice Receipt

icpm-popover

[FEAT] Conformance data: make overlays more visible

Is your feature request related to a problem? Please describe.
Currently, the look&feel of the overlays is not optimal. The black stroke make them not really visible comparing to the stroke of the BPMN shapes and edges, and there is not a lot of spaces between the text/icon and the stroke (bpmn-visualization doesn't provide configuration for this)

image

Describe the solution you'd like
Change the color of the overlay strokes and use the same color as the fill color.
Change the font color of the overlays to white.

[REFACTOR] Reorganize the CSS rules

This particularly applies to Happy Path rules but review all css rules.

happy-path rules
There is no need to declare class by types. The CSS classname should always be the same and the CSS rule should required both the BPMN CSS classes and the specific classes. For intance bpmn-type-activity.happy-path

The from/to stroke are not needed in the animation if the grow keyframes (same values for from and to), if the value was correctly set in the CSS rule referencing this keyframes declaration

@keyframes grow {
from {
stroke-dashoffset: 100%;
stroke-dasharray: 100%;
stroke: var(--stroke);
stroke-width: var(--stroke-width);
fill: var(--fillStart);
}
to {
stroke-dashoffset: 0;
stroke: var(--stroke);
stroke-width: var(--stroke-width);
fill: var(--fillEnd);
}
}

[BUG] The reset button is too visible

Is your feature request related to a problem? Please describe.
The reset button is a convenient feature to simplify the actions required to restore the initial state.
Currently, this is the main thing we see on the demo, it attracts the attention too much whereas this is the last thing we want users to focus on. The reasons are: it is

  • on top of all buttons
  • it is larger than the other 3 buttons combined
  • it is filled in orange which is the only element on the page which is highly contrasted

image

Describe the solution you'd like
Reduce the size of the button, use a neutral color, move it below the other buttons
OR propose another solution!

[FEAT] Disable navigation

Is your feature request related to a problem? Please describe.
We currently have issue with the navigation: it remove some displays added manually. See #2 and #4
We are working on a POC on bpmn-visualization (#4 (comment)) to fix the issue but the solution won't be available in a release for the demo that takes place on next Thursday 2022-10-27

Describe the solution you'd like
Disable the navigation until we have a fix in bpmn-visualization.

[REFACTOR] Improve the "Conformance Data" code

Notes: do not hesitate to split this issue to better track changes progress

modifier le fill via le model state/mxgraph (mettre lien vers issue style)

  • Update the fill color of element with gradient by using the mxgraph state or wait for process-analytics/bpmn-visualization-js#1030
  • Rework the linear gradients creation. We should use the mxgraph graph.canvas property, put the initialization code in a function, and check how mxGraph create/delete his own gradient for inspiration
  • Simplify the elements creation code. It is very complicated, the CSS selectors are not precise enough and some are redundant

[INFRA] Update the repository metadata

  • review the name of the repository and rename it if required
  • transfert the repository to https://github.com/process-analytics (transfer in Settings)
  • update repository GH description
  • add keywords on GH
  • use common rules for branches (protect branches, PR mandatory, .....), squash merge only
  • enforce conventional commits like we do in bpmn-visualization-tools and .github. #51
  • ensure we have the same labels as in other repositories

[FEAT] Restore diagram navigation

Is your feature request related to a problem? Please describe.
Navigation was disable in #70

Describe the solution you'd like
Restore navigation when we are sure that #2 and #4 are fixed.

(refactor) In showConformanceData, make a map to put the information for the overlays to add on shape

Create a function like

function addConformanceStyleOnElement(elementId, synchronousLabel, modelMoveLabel, bpmnVisualization) {
  addOverlay(elementId, "synchronous", `${synchronousLabel}` bpmnVisualization);
  addOverlay(elementId, "modelMove", `${modelMoveLabel}`, bpmnVisualization);
  createLinearGradient(elementId, [synchronousLabel, modelMoveLabel], bpmnVisualization);
}

And in showConformanceData, do something like

shapeConformanceStyles.map(style => addConformanceStyleOnElement(style.elementId, style.synchronousLabel, style.modelMoveLabel));

[BUG] An edge is not correctly attached to its BPMN element in the diagram

Describe the bug
The outgoing edge of the last parallel join gateway is not correctly attached to the gateway

Expected behavior
Ensure it is correctly attached. The rendering is even worse in the "happy path" scenario.

Screenshots

image

Additional context
Update the edge waypoints in the BPMN diagram

conformance-data/overlays

add the overlays with the correct numbers to all elements based on the results of the conformance checking produced by ProM

[INFRA] Rename the repository: use a more generic name

This demo is a based for the demo shown at ICPM 2022. But it mainly highlight Process Mining scenarios.

We want to highlight it in the examples (#37) and have a lot of improvements in mind. So we cannot restrict it to the ICPM event.

My proposal is

  • find a name which is more general and better explain the scenarios demonstrated in the demo
  • rename the repository accordingly
  • update the README to mention it was intiated to prepare the ICPM 2022 demo, then improved
  • update the examples repository with the new name and description

[REFACTOR] Compliance Rules: review the popover on panning and zooming

Currently, there is an issue when panning and zooming (same root cause as for #2 and #4).
When panning, the popover size changes or the popover disappears.
When zooming, the popover size doesn't change accordingly to the size of the activity it is attached to.

compliance_rules_popover_moving.mp4

Notes

The panning issue may be fixed: see process-analytics/bpmn-visualization-examples#378 (comment)
For the zoom, it may requires to check the poper.js 'sticky' and 'appendTo' properties.

(refactor) For compliance rules, create a function to create one circle

Something like

function createCircle(svgHtmlElement, class, x, y, r, strokeWidth) {
  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  circle3.setAttribute("class", class);
  circle3.setAttribute("cx", x);
  circle3.setAttribute("cy", y);
  circle3.setAttribute("r", r);
  circle3.setAttribute("pointer-events", "all");
  circle3.style.stroke = "red";
  circle3.style.fill = "none";
  circle3.style.strokeWidth = strokeWidth;

  svgHtmlElement.appendChild(circle);
}

[FEAT] Compliances Rules: highlight the activities involved in the violations

Is your feature request related to a problem? Please describe.
The popover currently displays the elements with violations but we don't see them on the diagram.

Describe the solution you'd like
When hovering on an element of the "compliance issues" table, highlight the related activity.

For instance, in the following, when the mouse hover the "Clear Invoice", the "Record Goods Receipt" activity is highlighted in yellow
image

Additional context
Be aware of #4 and #58 prior implementing this request

happy-path/growing sequence

  • click on show happy path
  • the most frequent path is highlighted

The current code in happy-path.js adds the cssClasses to all elements in the path at once (as shown in the gif below). I want to add delays so that the cssClasses are added sequentially one after the other.
happy-path

[FEAT] Happy Path: improve the rendering of the overlay on the start event

Is your feature request related to a problem? Please describe.
The overlay on the start event looks strange. It is not centered and it is not very visible.

image

Describe the solution you'd like
Proposals to be discussed

Note: a first improvement was done in #79

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.