ProcessMining<TEvent extends ActivityEvent, TNeedle>

The Process Mining component extracts a diagram for process mining from the given event log. All events have to be included in the eventLog. The process steps are generated from the activities in the events and the transitions are inferred from consecutive events of the same case ID.

function ProcessMiningDiagram() {
  return (
    <ProcessMining eventLog={eventLog}></ProcessMining>
  )
}

Props

ProcessMiningProps

NameDescriptionType
className?
Specifies the CSS class used for the ProcessMining component.
string
contextMenuItems?
An optional function specifying the context menu items for a data item.
ContextMenuItemProvider<ProcessStep>
eventLog
The events visualized by the process mining diagram.
TEvent[]
itemSize?
Specifies the default item size used when no explicit width and height are provided.
{
  width: number
  height: number
}
layoutOptions?
Options for configuring the process mining layout. Note that, to optimize performance and depending on the implementation, it might be necessary to memoize the layout options.
LayoutOptions
onItemFocus?
An optional callback that’s called when an item is focused. Note that the focused item is not changed if the empty canvas is clicked.
ItemFocusedListener<ProcessStep>
onItemHover?
An optional callback that’s called when the hovered item has changed.
ItemHoveredListener<ProcessStep>
onItemSelect?
An optional callback that’s called when an item is selected or deselected.
ItemSelectedListener<ProcessStep>
onSearch?
An optional callback that returns whether the given item matches the search needle. The default search implementation only supports string needles and searches all properties of the data item. Provide this callback to implement custom search logic.
SearchFunction<
  ProcessStep,
  TNeedle
>
popupPosition?
The optional position of the popup. The default is ‘north’.
“east”
  | “north”
  | “north-east”
  | “north-west”
  | “south”
  | “south-east”
  | “south-west”
  | “west”
renderContextMenu?
An optional component that renders a custom context menu.
ComponentType<RenderContextMenuProps_2>
renderPopup?
An optional component used for rendering a custom popup.
ComponentType<RenderPopupProps>
renderProcessStep?
A custom render component used for rendering the given process step.
ComponentType<RenderProcessStepProps>
renderTooltip?
An optional component that can be used for rendering a custom tooltip.
ComponentType<RenderTooltipProps>
searchNeedle?
A string or a complex object to search for. The default search implementation can only handle strings and searches on the properties of the data item. For more complex search logic, provide an ProcessMining.onSearch callback.
TNeedle
showHeatmap?
Whether to show the heatmap visualization. The process mining component calculates a numerical heat value, indicating the workload at the process steps for the current timestamp. The default is true.
boolean
showTransitionEvents?
Whether to show the visualization of transition events as circles on a transition. The default is true.
boolean
smartClickNavigation?
Whether to enable smart navigation for large graphs, i.e., clicked elements will be moved to a focus point. This feature facilitates the navigation between graph elements, especially when only a part of the graph is visible in the viewport.
boolean
style?
Specifies the CSS style used for the ProcessMining component.
CSSProperties
timestamp?
The timestamp in the event log which should be displayed in the diagram. This will affect the visualization of the heatmap and styles that show the workload at this time. To get valid results for the current heat distribution, it must be within the overall time span of the event log. The default is 0.
number
transitionEventStyling?
An optional callback that provides size and hue values to customize the color and the size of a transition event. Since the transition event is not part of the event log but bridges the gap between two events, the events before and after are passed for identification or other information. The default is { size: 7, hue: 200}
(
  previousEvent: TEvent,
  nextEvent: TEvent
) => { size: number; hue: number }
transitionStyles?
A function that provides a style configuration for the given transition.
TransitionStyleProvider<ProcessStep>