workflow-timeline.tsx

Overview

The workflow-timeline.tsx file defines React components and utilities to render a detailed timeline visualization of workflow execution events within an application. It displays node-level progress, inputs, outputs, elapsed time, and trace data related to the workflow's steps. This timeline is primarily used to visualize the flow and state of a multi-step process, showing node starts, finishes, and associated tool traces.

Key functionalities include:

• Rendering a vertical timeline of workflow nodes with status indicators.

• Displaying JSON-formatted inputs and outputs of each node.

• Showing elapsed time for node execution.

• Integrating trace data related to each node.

• Handling state related to fetching and displaying trace data asynchronously.

• Supporting a shared view mode that alters the display of node details.

It leverages UI components from custom libraries (e.g., Accordion, Timeline components), hooks to fetch trace data, and utilities for data processing and localization.

Detailed Descriptions

Types and Interfaces

• LogFlowTimelineProps
  Props for the main WorkFlowTimeline component, consisting of:

  • currentEventListWithoutMessage: Array of workflow events excluding message events.

  • currentMessageId: Current message identifier to track.

  • canvasId?: Optional canvas identifier for fetching trace data.

  • sendLoading: Boolean flag indicating if sending/loading is in progress.

  • isShare?: Optional flag indicating if the timeline is in share mode (affects UI).

Utility Functions

toLowerCaseStringAndDeleteChar(str: string, char: string = '_'): string

• Purpose:
  Converts a string to lowercase, removes spaces, and deletes all occurrences of a specified character (default is underscore _).

• Parameters:

  • str: Input string to process.

  • char: Character to remove from the string (default: _).

• Returns:
  A normalized string in lowercase without spaces or the specified character.

• Example:

  toLowerCaseStringAndDeleteChar("Hello_World") // returns "helloworld"
  

getInputsOrOutputs(nodeEventList: INodeData[], field: 'inputs' | 'outputs'): object

• Purpose:
  Aggregates and deduplicates the inputs or outputs from a list of node events.

• Parameters:

  • nodeEventList: Array of node data objects.

  • field: Either 'inputs' or 'outputs' indicating which field to extract.

• Returns:

  • If there is only 1 or no node data, returns the inputs/outputs of that node or an empty object.

  • If multiple nodes, returns a deduplicated array of their inputs/outputs.

• Details:
  Uses lodash's get to safely access the field and uniqWith with isEqual to remove duplicates.

Constants

typeMap

• A mapping of internal event/node types to their localized display strings using the t function from i18next for internationalization.

typeMapLowerCase

• A normalized version of typeMap where keys are converted to lowercase with spaces and underscores removed, allowing for case-insensitive lookups.

React Components

JsonViewer

• Purpose:
  Displays JSON data in an expandable, readable format using the react18-json-view component.

• Props:

  • data: A generic object to display as JSON.

  • title: Title string for the viewer section.

• Usage Example:

  <JsonViewer data={{foo: "bar"}} title="Input" />
  

• Rendering:
  Shows a titled section with collapsible JSON content, sized to 200px height with scroll.

WorkFlowTimeline

• Purpose:
  The main timeline component visualizing the workflow execution nodes and their details.

• Props:

  • currentEventListWithoutMessage: Current list of workflow events (excluding message events).

  • currentMessageId: Current message ID to fetch trace data.

  • canvasId?: Optional canvas ID for trace data fetching context.

  • sendLoading: Boolean indicating if a send operation is ongoing.

  • isShare?: Optional flag to control UI behavior for shared views.

• State and Hooks:

  • isStopFetchTrace: Controls whether trace fetching is active.

  • traceData, setMessageId: Obtained from useFetchMessageTrace hook for asynchronous trace fetching.

  • startedNodeList: Memoized list of started nodes, deduplicated by component ID.

  • getElapsedTime: Returns elapsed time string from finished node events.

  • hasTrace: Checks if trace data exists for a node.

  • filterTrace: Aggregates trace entries for a node.

  • filterFinishedNodeList: Filters finished node events for a given component.

• Rendering Logic:

  For each started node:

  • Render a TimelineItem with:

    • TimelineHeader containing a decorated TimelineIndicator icon representing the node type.

    • TimelineContent with an Accordion showing:

      • Node name or localized label.

      • Elapsed time.

      • Status indicator (success/error based on presence of error).

      • Expandable JSON views for inputs and outputs (or markdown thoughts if in share mode).

  • If trace data exists for the node, append a ToolTimelineItem component with the filtered trace.

• Implementation Details:

  • Uses CSS classes and conditional styling for visual cues (e.g., loading spinner, borders for finished nodes).

  • Localization is integrated via i18next for node labels.

  • Uses React hooks for state management and effects tied to props.

  • Deduplication and filtering logic ensures clean and concise event representation.

• Usage Example:

  <WorkFlowTimeline
    currentEventListWithoutMessage={events}
    currentMessageId={messageId}
    canvasId="canvas-123"
    sendLoading={true}
    isShare={false}
  />
  

Important Implementation Details and Algorithms

• Deduplication of Node Start Events:
  The startedNodeList memoizes a filtered list of nodes that have started, removing duplicates by checking component IDs to avoid redundant timeline items.

• Trace Fetching Control:
  The component manages trace fetching lifecycle using the sendLoading flag and the workflow finished event, stopping trace fetch when sending is complete or workflow is finished.

• Dynamic Node Labeling:
  Node labels are localized and normalized using typeMapLowerCase and the toLowerCaseStringAndDeleteChar utility to map node types to user-friendly strings.

• Elapsed Time Extraction:
  Elapsed time is extracted from finished node events and displayed next to node labels, with formatting to limit decimal places.

• Conditional Rendering Based on Share Mode:
  When in share mode, inputs/outputs JSON viewers are hidden, and textual "thoughts" are shown using a markdown highlighter instead.

Interactions with Other Parts of the System

• UI Components:
  Depends on custom UI components such as Timeline, Accordion, and JsonView for structured visual presentation.

• Hooks:

  • useFetchMessageTrace: Fetches trace data for nodes asynchronously based on current message and canvas context.

  • useCacheChatLog: Provides current event lists and message IDs from chat logs.

• Constants and Types:
  Uses types like INodeData, INodeEvent, and ITraceData which define the shape of workflow events and trace data.

• Operator Icons:
  Displays icons for node types using the OperatorIcon component keyed by node type.

• Localization:
  Uses i18next translation function t to support multiple languages for node type labels.

• Utility Libraries:
  Uses lodash for safe object access (get), deep comparison (isEqual), and array deduplication (uniqWith).

• Custom Components:
  Integrates ToolTimelineItem to render associated tools/trace elements after each node timeline item.

Mermaid Component Diagram

componentDiagram
    component WorkFlowTimeline {
      +currentEventListWithoutMessage: INodeEvent[]
      +currentMessageId: string
      +canvasId?: string
      +sendLoading: boolean
      +isShare?: boolean
      --
      +render()
      +getElapsedTime(nodeId)
      +hasTrace(componentId)
      +filterTrace(componentId)
      +filterFinishedNodeList(componentId)
    }
    
    component JsonViewer {
      +data: object
      +title: string
      --
      +render()
    }

    WorkFlowTimeline --> Timeline
    WorkFlowTimeline --> Accordion
    WorkFlowTimeline --> JsonViewer
    WorkFlowTimeline --> ToolTimelineItem
    WorkFlowTimeline ..> useFetchMessageTrace : Hook
    WorkFlowTimeline ..> useCacheChatLog : Hook
    WorkFlowTimeline ..> OperatorIcon

    JsonViewer --> JsonView

Summary

The workflow-timeline.tsx file is a UI-focused module that provides a rich, interactive timeline visualization for the progress and details of workflow execution nodes. It integrates data fetching, localization, and complex UI state handling to present a comprehensive view of node execution status, inputs/outputs, and traces. This component is central to understanding the flow and debugging of complex workflows in the application.

End of Documentation for workflow-timeline.tsx