@yworks/react-yfiles-process-mining/dist/index.d.ts

yFiles React Process Mining Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive process mining visualizations into your applications.

import { ComponentType } from 'react';
import { CSSProperties } from 'react';
import { GraphComponent } from '@yfiles/yfiles';
import { JSX } from 'react';
import { PropsWithChildren } from 'react';
import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactElement } from 'react';

/**
 * An event that marks one step in the process.
 */
export declare type ActivityEvent = {
    /** The id of the entity that passes through the process steps. */
    caseId: CaseId;
    /** The name of the activity that is executed in this event. */
    activity: string;
    /** The time in milliseconds when this event starts. */
    timestamp: number;
    /** The time in milliseconds this event takes to finish. */
    duration?: number;
    /** A cost factor assigned to this event. */
    cost?: number;
};

/**
 * A connection arrow configuration.
 */
export declare interface Arrow {
    /**
     * The arrow color.
     */
    color?: string;
    /**
     * The shape of the arrow.
     */
    type?: 'ellipse' | 'cross' | 'stealth' | 'diamond' | 'none' | 'open' | 'triangle' | 'deltoid' | 'kite' | 'chevron';
}

/**
 * The id of the entity that passes through the process steps
 */
export declare type CaseId = number | string;

/**
 * An entry in the context menu.
 */
export declare interface ContextMenuItem<TDataItem> {
    /**
     * The displayed text on the context menu item.
     */
    title: string;
    /**
     * The function that is triggered when clicking the context menu item.
     */
    action: ContextMenuItemAction<TDataItem>;
}

/**
 * A callback type representing an action to be performed when a context menu item is clicked.
 */
export declare type ContextMenuItemAction<TDataItem> = (item: TDataItem | null) => void;

/**
 * A function type specifying the context menu items for a data item.
 */
export declare type ContextMenuItemProvider<TDataItem> = (item: TDataItem | null) => ContextMenuItem<TDataItem>[];

/**
 * The props provided by the context menu.
 */
export declare interface ContextMenuProps<TDataItem> {
    /**
     * A function specifying the context menu items for a data item.
     */
    menuItems?: ContextMenuItemProvider<TDataItem>;
    /**
     * An optional component used for rendering a custom context menu.
     */
    renderMenu?: ComponentType<RenderContextMenuProps<TDataItem>>;
    /**
     * Optional global props that get passed to the context-menu component
     */
    extraProps?: Record<string, any>;
}

/**
 * A button in the {@link Controls} component.
 */
export declare interface ControlButton {
    /**
     * The function that is triggered when clicking the control button.
     */
    action: () => void;
    /**
     * The url or element to be used as the button icon.
     */
    icon?: string | JSX.Element;
    /**
     * The class name to style the control button.
     */
    className?: string;
    /**
     * Whether the control button is active.
     */
    disabled?: boolean;
    /**
     * The tooltip that is displayed when hovering the control button.
     */
    tooltip?: string;
}

/**
 * The Controls component renders buttons that perform actions on the graph.
 * This component must be used inside a parent component that displays the graph, or its corresponding provider.
 *
 * ```tsx
 * function App() {
 *   const button1 = { action: () => alert('Button 1 clicked!'), icon: <div>Button 1</div> }
 *   const button2 = { action: () => alert('Button 2 clicked!'), icon: <div>Button 2</div> }
 *   return (
 *     <MyReactYFilesComponent data={data}>
 *       <Controls buttons={() => [button1, button2]}></Controls>
 *     </MyReactYFilesComponent>
 *   )
 * }
 * ```
 */
export declare function Controls({ buttons, orientation, position, className, renderControls }: ControlsProps & PropsWithChildren): react_jsx_runtime.JSX.Element;

/**
 * A function type specifying the buttons of the  {@link Controls} component.
 */
export declare type ControlsButtonProvider = () => ControlButton[];

/**
 * The props provided by the {@link Controls}.
 */
export declare interface ControlsProps {
    /**
     * A function specifying the buttons that are rendered by the {@link Controls} component.
     */
    buttons: ControlsButtonProvider;
    /**
     * The orientation of the {@link Controls} component.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The CSS class of the {@link Controls} component.
     */
    className?: string;
    /**
     * The position of the {@link Controls} component.
     */
    position?: Position | 'custom';
    /**
     * An optional component used for rendering a custom {@link Controls} component.
     */
    renderControls?: ComponentType<RenderControlsProps>;
}

/**
 * Default [buttons]{@link ControlsProps.buttons} for the {@link Controls} component that provide
 * actions to interact with the viewport of the process mining.
 *
 * This includes the following buttons: zoom in, zoom out, zoom to the original size and fit the graph into the viewport.
 *
 * @returns an array of [control buttons]{@link ControlsProps.buttons}.
 *
 * ```tsx
 * function ProcessMiningDiagram() {
 *   return (
 *     <ProcessMining eventLog={eventLog}>
 *       <Controls buttons={DefaultControlButtons}></Controls>
 *     </ProcessMining>
 *   )
 * }
 * ```
 */
export declare function DefaultControlButtons(): ControlButton[];

/**
 * Settings to configure how the graph is exported.
 */
export declare interface ExportSettings {
    /**
     * Gets or sets the scale for the export.
     *
     * A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
     * This value has to be strictly greater than 0 and finite. Its default value is 1.0
     */
    scale?: number;
    /**
     * Gets or sets the bounds of the content to export in world coordinates.
     * The default behavior is to use bounds to encompass the whole diagram.
     */
    bounds?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Gets or sets the zoom property to use during the creation of the visualization.
     *
     * In contrast to the scale property, which works on the output graphics, this property determines what zoom value is
     * to be assumed on the canvas when creating the visual. This can affect the rendering of zoom-dependent visuals,
     * especially level-of-detail rendering.
     *
     * This value has to be strictly greater than 0. Its default value is 1.0
     */
    zoom?: number;
    /**
     * Gets or sets the background color for the exported SVG.
     * CSS color values are supported.
     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
     */
    background?: string;
    /**
     * Gets or sets the margins for the exported image.
     *
     * The margins are added to the content.
     * This means that an image with non-zero margins is larger than the export area even if the scale is 1.0.
     * The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
     * The default is an empty margin.
     */
    margins?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /**
     * Gets or sets a value indicating whether all external images should be inlined and encoded as Base64 data URIs.
     * Note that this feature is not applicable when loading images from cross-origin sources.
     * The default is true.
     */
    inlineImages?: boolean;
}

/**
 * A data object that contains a history of heat data for one process step.
 */
export declare class HeatData {
    private readonly values;
    private readonly minTime;
    private readonly maxTime;
    constructor(elements?: number, minTime?: number, maxTime?: number);
    /**
     * Returns the heat value at a specific timestamp.
     */
    getValue(timestamp: number): number;
    /**
     * Adds the given value for a given time span. This is used internally to set up the heat data.
     */
    addValues(from: number, to: number, value: number): void;
    /**
     * Calculates the ratio of the given time in relation to the time span
     * covered by this {@link HeatData}.
     */
    private calculateRatio;
    /**
     * Returns the maximum heat value over the whole time span that is covered by this {@link HeatData}.
     */
    getMaxValue(): number;
}

/**
 * A callback type invoked when an item has been focused.
 */
export declare type ItemFocusedListener<ProcessStep> = (item: ProcessStep | null) => void;

/**
 * A callback type invoked when the hovered item has changed.
 */
export declare type ItemHoveredListener<ProcessStep> = (item: ProcessStep | null, oldItem?: ProcessStep | null) => void;

/**
 * A callback type invoked when an item has been selected or deselected.
 */
export declare type ItemSelectedListener<ProcessStep> = (selectedItems: ProcessStep[]) => void;

/**
 * Configures the direction of the flow for the layout.
 */
export declare type LayoutDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';

/**
 * Configuration options for the process mining diagram layout.
 * Note that, to optimize performance and depending on the implementation,
 * it might be necessary to memoize the layout options.
 */
export declare interface LayoutOptions {
    /**
     * The direction for the flow in the graph.
     */
    direction?: LayoutDirection;
    /**
     * The minimum distance between the layers in the hierarchy.
     */
    minimumLayerDistance?: number;
    /**
     * The minimum distance between two adjacent nodes in one layer.
     */
    nodeToNodeDistance?: number;
    /**
     * The minimum distance between an edge and an adjacent node in one layer.
     */
    nodeToEdgeDistance?: number;
    /**
     * Limits the time the layout algorithm can use to the provided number of milliseconds.
     * This is an expert option. The main application is for graphs with many edges, where usually
     * the part of the layout calculations that takes the longest time is the edge routing.
     */
    maximumDuration?: number;
    /**
     * Whether to group edges either at their common source node or their common target node.
     */
    edgeGrouping?: boolean;
}

/**
 * The Overview component provides an overview of the graph displayed by its parent component.
 * This component has to be used inside a parent component that displays the graph, or its corresponding provider.
 *
 * ```tsx
 * function App() {
 *   return (
 *     <MyReactYFilesComponent data={data}>
 *       <Overview></Overview>
 *     </MyReactYFilesComponent>
 *   )
 * }
 * ```
 */
export declare function Overview({ title, className, position }: OverviewProps): react_jsx_runtime.JSX.Element;

/**
 * The props for the {@link Overview} component.
 */
export declare interface OverviewProps {
    /**
     * The {@link Overview} title.
     */
    title?: string;
    /**
     * An optional CSS class to be used by the {@link Overview} component.
     */
    className?: string;
    /**
     * The position of the {@link Overview} component.
     * When position is set to 'custom', the overview can be placed using a CSS-class.
     */
    position?: Position | 'custom';
}

/**
 * Specifies the possible positions for placing a component.
 */
export declare type Position = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';

/**
 * Settings to configure how the graph is printed.
 */
export declare type PrintSettings = {
    /**
     * Gets or sets the scale for the printing.
     *
     * A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
     * This value has to be strictly greater than 0 and finite. Its default value is 1.0
     */
    scale?: number;
    /**
     * Gets or sets the bounds of the content to print in world coordinates.
     * The default behavior is to use bounds to encompass the whole diagram.
     */
    bounds?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Gets or sets the margins for the printed image.
     *
     * The margins are added to the content.
     * This means that an image with non-zero margins is larger than the printed area even if the scale is 1.0.
     * The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
     * The default is an empty margin.
     */
    margins?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /**
     * Gets or sets to print the diagram in multiple pages if the content does not fit on a single page.
     * The default is false.
     */
    tiledPrinting?: boolean;
    /**
     * Gets or sets the width of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
     * The default width is 595.
     */
    tileWidth?: number;
    /**
     * Gets or sets the height of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
     * The default height is 842.
     */
    tileHeight?: number;
};

/**
 * The Process Mining component extracts a diagram for process mining from the given event log.
 * All events have to be included in the [eventLog]{@link ProcessMiningProps.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.
 *
 * ```tsx
 * function ProcessMiningDiagram() {
 *   return (
 *     <ProcessMining eventLog={eventLog}></ProcessMining>
 *   )
 * }
 * ```
 */
export declare function ProcessMining<TEvent extends ActivityEvent, TNeedle = string>(props: ProcessMiningProps<TEvent, TNeedle> & PropsWithChildren): ReactElement;

/**
 * The ProcessMiningModel provides common functionality to interact with the {@link ProcessMining} component.
 */
export declare interface ProcessMiningModel {
    /**
     * The [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent} used
     * by the {@link ProcessMining} component to display the graph.
     *
     * This property is intended for advanced users who have a familiarity with the
     * [yFiles for HTML]{@link https://www.yworks.com/products/yfiles-for-html} library.
     */
    graphComponent: GraphComponent;
    /**
     * Starts the animation.
     * It takes a callback function to report the progress back, where the progress is the current timestamp in the animation.
     * The start time, end time, and duration parameters define the timing properties of the animation.
     */
    startAnimation(progressCallback: (progress: number) => void, startTimestamp: number, endTimestamp: number, duration: number): Promise<void>;
    /**
     * Stops the animation.
     */
    stopAnimation(): void;
    /**
     * Refreshes the layout of the process mining diagram.
     * It optionally accepts layout options and a flag indicating whether to morph the layout.
     * Note that, to optimize performance and depending on the implementation,
     * it might be necessary to memoize the layout options.
     */
    applyLayout(layoutOptions?: LayoutOptions, morphLayout?: boolean): Promise<void>;
    /**
     * Pans the viewport to the center of the given items.
     */
    zoomTo(items: (ProcessStep | Transition)[]): void;
    /**
     * Pans the viewport to center the given item.
     */
    zoomToItem(item: ProcessStep | Transition): void;
    /**
     * Retrieves the items that match the search currently.
     */
    getSearchHits: () => ProcessStep[];
    /**
     * Increases the zoom level.
     */
    zoomIn(): void;
    /**
     * Decreases the zoom level.
     */
    zoomOut(): void;
    /**
     * Fits the diagram inside the viewport.
     */
    fitContent(insets?: number): void;
    /**
     * Resets the zoom level to 1.
     */
    zoomToOriginal(): void;
    /**
     * Exports the process mining diagram to an SVG file.
     * It throws an exception if the diagram cannot be exported.
     * The exception may occur when the diagram contains images from cross-origin sources.
     * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
     */
    exportToSvg(exportSettings?: ExportSettings): Promise<void>;
    /**
     * Exports the process mining diagram to a PNG Image.
     * It throws an exception if the diagram cannot be exported.
     * The exception may occur when the diagram contains images from cross-origin sources.
     * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
     */
    exportToPng(exportSettings?: ExportSettings): Promise<void>;
    /**
     * Exports and prints the process mining diagram.
     */
    print(printSettings?: PrintSettings): Promise<void>;
    /**
     * Triggers a re-rendering of the diagram.
     * This may become useful if properties in the data change and the
     * visualization should update accordingly.
     */
    refresh(): void;
}

/**
 * The props for the {@link ProcessMining} component.
 */
export declare interface ProcessMiningProps<TEvent extends ActivityEvent, TNeedle> {
    /**
     * The events visualized by the process mining diagram.
     */
    eventLog: TEvent[];
    /**
     * 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.
     */
    timestamp?: number;
    /**
     * 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 <code>true</code>.
     */
    showHeatmap?: boolean;
    /**
     * Whether to show the visualization of transition events as circles on a transition.
     * The default is <code>true</code>.
     */
    showTransitionEvents?: boolean;
    /**
     * 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.
     */
    onItemFocus?: ItemFocusedListener<ProcessStep>;
    /**
     * An optional callback that's called when an item is selected or deselected.
     */
    onItemSelect?: ItemSelectedListener<ProcessStep>;
    /**
     * An optional callback that's called when the hovered item has changed.
     */
    onItemHover?: ItemHoveredListener<ProcessStep>;
    /**
     * An optional callback that's called when transition event(s) is clicked.
     */
    onTransitionEventsClick?: TransitionEventsClickedListener;
    /**
     * 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 {@link ProcessMining.onSearch} callback.
     */
    searchNeedle?: TNeedle;
    /**
     * 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.
     */
    onSearch?: SearchFunction<ProcessStep, TNeedle>;
    /**
     * A custom render component used for rendering the given process step.
     */
    renderProcessStep?: ComponentType<RenderProcessStepProps>;
    /**
     * A function that provides a style configuration for the given transition.
     */
    transitionStyles?: TransitionStyleProvider<ProcessStep>;
    /**
     * Specifies the CSS class used for the {@link ProcessMining} component.
     */
    className?: string;
    /**
     * Specifies the CSS style used for the {@link ProcessMining} component.
     */
    style?: CSSProperties;
    /**
     * Specifies the default item size used when no explicit width and height are provided.
     */
    itemSize?: {
        width: number;
        height: number;
    };
    /**
     * An optional component that can be used for rendering a custom tooltip.
     */
    renderTooltip?: ComponentType<RenderTooltipProps>;
    /**
     * An optional function specifying the context menu items for a data item.
     */
    contextMenuItems?: ContextMenuItemProvider<ProcessStep>;
    /**
     * An optional component that renders a custom context menu.
     */
    renderContextMenu?: ComponentType<RenderContextMenuProps_2>;
    /**
     * The optional position of the popup. The default is 'top'.
     */
    popupPosition?: 'bottom' | 'left' | 'right' | 'top' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
    /**
     * An optional component used for rendering a custom popup.
     */
    renderPopup?: ComponentType<RenderPopupProps>;
    /**
     * An optional callback that provides size and [hue](https://developer.mozilla.org/en-US/docs/Web/CSS/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}
     */
    transitionEventStyling?: (previousEvent: TEvent, nextEvent: TEvent) => {
        size: number;
        hue: number;
    };
    /**
     * 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.
     */
    smartClickNavigation?: boolean;
    /**
     * 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?: LayoutOptions;
}

/**
 * The ProcessMiningProvider component is a [context provider]{@link https://react.dev/learn/passing-data-deeply-with-context},
 * granting external access to the process mining diagram beyond the {@link 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 {@link ProcessMining} diagram
 * and a sidebar to utilize the {@link useProcessMiningContext} hook.
 *
 * ```tsx
 * 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>
 *   )
 * }
 * ```
 */
export declare const ProcessMiningProvider: (props: {
    children?: react.ReactNode | undefined;
}) => react_jsx_runtime.JSX.Element;

/**
 * Type that describes one step in the process.
 * This information is associated with every node in the graph.
 */
export declare type ProcessStep = {
    label: string;
    heat?: HeatData;
    capacity?: number;
    width?: number;
    height?: number;
};

/**
 * Registers the [yFiles license]{@link http://docs.yworks.com/yfileshtml/#/dguide/licensing} which is needed to
 * use the yFiles React component.
 *
 * ```tsx
 * function App() {
 *   registerLicense(yFilesLicense)
 *
 *   return (
 *     <MyReactYFilesComponent data={data}></MyReactYFilesComponent>
 *   )
 * }
 * ```
 *
 * @param licenseKey - The license key to register
 */
export declare function registerLicense(licenseKey: Record<string, unknown>): void;

/**
 * The props for rendering the context menu.
 */
export declare interface RenderContextMenuProps<TDataItem> {
    /**
     * The data item for which the context menu was opened, or null.
     */
    item: TDataItem | null;
    /**
     * The menu items to be rendered.
     */
    menuItems: ContextMenuItem<TDataItem>[];
    /**
     * A function that closes the context menu.
     */
    onClose: Function;
}

/**
 * The props passed to the process mining context-menu component for rendering the context-menu.
 */
declare interface RenderContextMenuProps_2 extends RenderContextMenuProps<ProcessStep | Transition> {
    /**
     * The current timestamp of the {@link ProcessMining} component.
     */
    timestamp: number;
}

/**
 * The props for rendering the {@link Controls} component.
 */
export declare interface RenderControlsProps {
    /**
     * The buttons that are rendered by the {@link Controls} component.
     */
    buttons: ControlButton[];
    /**
     * The orientation of the {@link Controls} component.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The CSS class of the {@link Controls} component.
     */
    className?: string;
    /**
     * The position of the {@link Controls} component.
     */
    position?: Position | 'custom';
}

/**
 * Renders a gauge that displays the current given heat value.
 *
 * The gauge is part of the default {@link RenderProcessStep} but can also added to a custom process step
 * visualization.
 *
 * ```tsx
 * function CustomProcessStep({ dataItem, timestamp }: RenderProcessStepProps) {
 *   const heat = dataItem.heat?.getValue(timestamp) ?? 0
 *   const normalizedHeat = Math.min(1, heat / (dataItem.capacity ?? 100))
 *   return (
 *     <div className="custom-process-step">
 *       <div className="title">{dataItem.label}</div>
 *       <div>Heat: {heat}</div>
 *       <div>Capacity: {dataItem.capacity}</div>
 *       <div className="gauge">
 *         <RenderHeatGauge heat={normalizedHeat} size={50} />
 *       </div>
 *     </div>
 *   )
 * }
 *
 * function App() {
 *   return <ProcessMining eventLog={eventLog} renderProcessStep={CustomProcessStep}></ProcessMining>
 * }
 * ```
 */
export declare function RenderHeatGauge({ heat, size }: RenderHeatGaugeProps): react_jsx_runtime.JSX.Element;

/**
 * The properties required to render a heat gauge component.
 */
export declare interface RenderHeatGaugeProps {
    /**
     * The heat value that should be displayed in the gauge.
     */
    heat: number;
    /**
     * The size for the heat gauge.
     */
    size: number;
}

/**
 * A default template for the process mining popup that shows the label of the process step or transition
 * the heat, and the capacity value.
 *
 * ```tsx
 * function App() {
 *   return (
 *     <ProcessMining eventLog={eventLog} renderPopup={RenderPopup}></ProcessMining>
 *   )
 * }
 * ```
 *
 * @param data - The process step or transition element to show the tooltip for.
 */
export declare function RenderPopup({ item, onClose, timestamp }: RenderPopupProps): react_jsx_runtime.JSX.Element;

/**
 * The props passed to the process mining popup component for rendering the popup.
 */
export declare interface RenderPopupProps extends RenderPopupPropsBase<ProcessStep | Transition> {
    /**
     * The current timestamp of the {@link ProcessMining} component.
     */
    timestamp: number;
}

/**
 * The props for rendering the popup.
 */
export declare interface RenderPopupPropsBase<TDataItem> {
    /**
     * The data item for which the popup was opened.
     */
    item: TDataItem;
    /**
     * A function that closes the popup.
     */
    onClose: Function;
}

/**
 * A default component that renders a process step which is extracted from the event log.
 * It shows a heat gauge next to the label of the process step.
 *
 * Note that this visualization has a minimum height of 50. Smaller sizes defined with {@link ProcessMining.itemSize} may
 * result in a broken visualization.
 *
 * The component is already used as a fallback if no render prop is specified on {@link ProcessMining}. However, it can
 * be integrated in another component, for example to have different styles for different items.
 *
 * ```tsx
 * function ProcessMiningDiagram() {
 *   const CustomProcessStep = useMemo(
 *     () => (props: RenderProcessStepProps) => {
 *       const { dataItem } = props
 *       if (dataItem?.label === 'Start') {
 *         return (
 *           <>
 *             <div
 *               style={{
 *                 backgroundColor: 'blue',
 *                 color: 'white',
 *                 width: '100%',
 *                 height: '100%'
 *               }}
 *             >
 *               <div>{dataItem.label}</div>
 *             </div>
 *           </>
 *         )
 *       } else {
 *         return <RenderProcessStep {...props}></RenderProcessStep>
 *       }
 *     },
 *     []
 *   )
 *
 *   return (
 *     <ProcessMining eventLog={eventLog} renderProcessStep={CustomProcessStep}></ProcessMining>
 *   )
 * }
 * ```
 */
export declare function RenderProcessStep({ dataItem, hovered, focused, selected, timestamp }: RenderProcessStepProps): react_jsx_runtime.JSX.Element;

/**
 * The props passed to the process mining component for rendering the process step.
 */
export declare interface RenderProcessStepProps extends RenderProcessStepPropsBase<ProcessStep> {
    /**
     * The current timestamp of the {@link ProcessMining} component.
     */
    timestamp: number;
}

/**
 * The interface of the props passed to the HTML react component for rendering the node contents.
 */
export declare interface RenderProcessStepPropsBase<TDataItem> {
    /**
     * Whether the item is currently selected.
     */
    selected: boolean;
    /**
     * Whether the item is currently being hovered.
     */
    hovered: boolean;
    /**
     * Whether the item is currently focused.
     */
    focused: boolean;
    /**
     * The width of the item.
     */
    width: number;
    /**
     * The height of the item.
     */
    height: number;
    /**
     * The detail level of the visualization. Use this value to implement level-of-detail rendering.
     */
    detail: 'low' | 'high';
    /**
     * The data item to render.
     */
    dataItem: TDataItem;
}

/**
 * A default template for the process mining tooltip that shows the label of the process step or transition
 * and the current heat value.
 *
 * ```tsx
 * function App() {
 *   return (
 *     <ProcessMining eventLog={eventLog} renderTooltip={RenderTooltip}></ProcessMining>
 *   )
 * }
 * ```
 *
 * @param data - The process step or transition element to show the tooltip for.
 * @param timestamp - The current timestamp of the process mining component.
 */
export declare function RenderTooltip({ data, timestamp }: RenderTooltipProps): react_jsx_runtime.JSX.Element;

/**
 * The props passed to the process mining tooltip component for rendering the tooltip.
 */
export declare interface RenderTooltipProps extends RenderTooltipPropsBase<ProcessStep | Transition> {
    /**
     * The current timestamp of the {@link ProcessMining} component.
     */
    timestamp: number;
}

/**
 * The props for rendering the tooltip.
 */
export declare interface RenderTooltipPropsBase<TDataItem> {
    /**
     * The data item for which the tooltip should be rendered.
     */
    data: TDataItem;
}

/**
 * A function that returns whether the given item matches the search needle.
 */
export declare type SearchFunction<ProcessStep, TNeedle = string> = (item: ProcessStep, needle: TNeedle) => boolean;

/**
 * Type that describes one transition in the process.
 * This information is associated with every edge in the graph.
 */
export declare type Transition = {
    sourceLabel: string;
    targetLabel: string;
    heat?: HeatData;
    capacity?: number;
};

/**
 * A callback type invoked when transition event(s) has been clicked.
 */
export declare type TransitionEventsClickedListener = (transitionEventIds: CaseId[]) => void;

/**
 * A connection style configuration.
 */
export declare interface TransitionStyle {
    /**
     * An optional CSS class that's used by the connection.
     */
    className?: string;
    /**
     * The thickness of the connection.
     */
    thickness?: number;
    /**
     * The bend smoothing of the connection.
     */
    smoothingLength?: number;
    /**
     * The source arrow type.
     */
    sourceArrow?: Arrow;
    /**
     * The target arrow type.
     */
    targetArrow?: Arrow;
}

/**
 * A function type that provides styles for the transitions between steps in a process.
 * The source/target represents the start/end item of the connection, respectively.
 */
export declare type TransitionStyleProvider<ProcessStep> = (source: ProcessStep, target: ProcessStep) => TransitionStyle | undefined;

/**
 * A hook that provides access to the {@link ProcessMiningModel} which has various functions that can be used to
 * interact with the {@link ProcessMining} diagram. It can only be used inside an {@link ProcessMining} component or an
 * {@link ProcessMiningProvider}.
 * @returns the {@link ProcessMiningModel} used in this context.
 *
 * ```tsx
 * 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>
 *   )
 * }
 * ```
 */
export declare function useProcessMiningContext(): ProcessMiningModel;

export { }