index.tsx

Overview

index.tsx defines a React functional component named TimelineDataFlow that renders a customizable horizontal timeline UI component representing distinct stages in a data processing workflow. The timeline visually conveys progress through predefined steps such as "Begin," "Parser," "Chunker," "Indexer," and "Complete." Each step is represented by a node with a corresponding icon and title.

This file imports UI components and iconography, constructs timeline nodes from a static configuration object, manages active step highlighting, and handles user interaction by notifying parent components of step changes via callbacks.

Exported Members

1. TimelineNodeObj

An object representing the predefined timeline nodes used in the timeline. Each key corresponds to a step/stage in the workflow, holding properties such as node ID, title, icon, and clickability.

Properties

Node Object Structure

• id: number — Unique identifier for the node.

• title: string — Display name of the node.

• icon: JSX.Element — React icon component with size 13.

• clickable?: boolean — Optional flag indicating if the node is clickable (defaults to true if omitted).

Example

{
  id: 1,
  title: 'Begin',
  icon: <PlayIcon size={13} />,
  clickable: false,
}

2. TimelineDataFlow (Default Export)

A React functional component that renders the timeline UI and manages active step selection.

Props (TimelineDataFlowProps)

Functionality

• Builds timeline node data by mapping TimelineNodeObj entries into an array of node objects conforming to the TimelineNode interface.

• Determines the currently active step index based on activeId.

• Provides a handler handleStepChange that invokes the parent's callback with the selected node ID.

• Renders the CustomTimeline component with appropriate styling and behavior props:

  • Horizontal orientation.

  • Solid line style.

  • Custom node sizes and active node highlight styles.

Usage Example

import TimelineDataFlow from './index';

function ParentComponent() {
  const [activeStepId, setActiveStepId] = React.useState(1);

  return (
    <TimelineDataFlow
      activeId={activeStepId}
      activeFunc={(id) => setActiveStepId(id)}
    />
  );
}

Implementation Details

1. Node Construction with useMemo
   The timelineNodes array is memoized using React's useMemo hook to avoid unnecessary recalculations on re-renders. It iterates over the keys of the TimelineNodeObj object, copying each node's properties and augmenting with fixed CSS class and completed: false state.

2. Active Step Calculation
   The active step index (activeStep) is computed by finding the position of the node whose id matches the activeId prop. It returns the index + 1 because the timeline component appears to expect 1-based indexing for active steps.

3. Step Change Handling
   When a timeline node is clicked or selected, handleStepChange is called with the step index and node ID. This function calls the external activeFunc callback to notify the parent component about the change. It also logs the step and ID to the console for debugging.

4. Styling and Customization of Timeline
   The CustomTimeline component is customized with props controlling:

   • orientation: Horizontal layout.

   • lineStyle: Solid line between nodes.

   • nodeSize: Normal nodes are 24px; active node size is increased to 30px.

   • activeStyle: Custom colors for icon and text on the active node, using CSS variables.

Interaction with Other Parts of the System

• Imports:

  • CustomTimeline and TimelineNode are imported from @/components/originui/timeline, indicating this component relies on a custom timeline UI library/component from elsewhere in the codebase.

  • Icons imported from lucide-react provide visual representation for each timeline node.

• Exports:

  • TimelineDataFlow is the default export and is likely imported and used in higher-level components or pages to visualize and control workflow progress.

• Parent Communication:

  • The activeFunc callback prop enables parent components to synchronize their state with user interactions on the timeline.

Visual Diagram

componentDiagram
    component TimelineDataFlow {
        +props: TimelineDataFlowProps
        +timelineNodes: TimelineNode[]
        +activeStep: number
        +handleStepChange(step: number, id: string | number): void
        +render()
    }
    component CustomTimeline {
        +nodes: TimelineNode[]
        +activeStep: number
        +onStepChange(step: number, id: string | number): void
        +orientation: string
        +lineStyle: string
        +nodeSize: number
        +activeStyle: object
        +render()
    }
    TimelineDataFlow --> CustomTimeline : renders
    TimelineDataFlow --> "TimelineNodeObj" : uses static nodes
    TimelineDataFlow ..> "lucide-react Icons" : uses icons
    TimelineDataFlow ..> "Parent Component" : activeFunc callback

Summary

• Purpose: Provides a reusable timeline component visualizing progress through sequential workflow steps.

• Key Features:

  • Static node definitions with icons and titles.

  • Memoized data for performance.

  • Active step highlighting and interaction handling.

  • Customizable visual styling.

• Usage: Designed to be embedded in parent components that track and control the current step in a process.

• Dependencies:

  • Custom UI timeline component (CustomTimeline).

  • Icon library (lucide-react).

This file is a central piece in representing and controlling workflow state visually within the application.