ProcessMiningProvider

The ProcessMiningProvider component is a context provider, granting external access to the process mining diagram beyond the ProcessMining component itself.

This functionality proves particularly valuable when there’s a toolbar or sidebar housing elements that require interaction with the process mining diagram. Examples would include buttons for zooming in and out or fitting the graph into the viewport.

The snippet below illustrates how to leverage the ProcessMiningProvider, enabling a component featuring both a ProcessMining diagram and a sidebar to utilize the useProcessMiningContext hook.

function ProcessMiningWrapper() {
  const { fitContent, zoomToItem } = useProcessMiningContext()

  return (
    <>
      <ProcessMining eventLog={eventLog} contextMenuItems={(item: ProcessStep | null) => {
          if (item) {
            return [{ title: 'Zoom to Item', action: () => item && zoomToItem(item) }]
          }
          return []
        }}>
      </ProcessMining>
      <Sidebar>
        <button onClick={fitContent}>Fit Content</button>
      </Sidebar>
    </>
  )
}

function ProcessMiningDiagram() {
  return (
    <ProcessMiningProvider>
      <ProcessMiningWrapper></ProcessMiningWrapper>
    </ProcessMiningProvider>
  )
}