Railtracks Timeline Visualizer

A React-based timeline visualizer for Railtracks agentic flows

🚀 Quick Start

As an NPM Package

1. Install the package:

   npm install @railtownai/railtracks-timeline

2. Import and use in your React app:

   import { TimelineVisualizer } from "@railtownai/railtracks-timeline";
   import { AgentRun } from "@railtownai/railtracks-timeline";
   
   function App() {
     // Option 1: Pass JSON string (backward compatible)
     const jsonData = JSON.stringify(agentRunData);
   
     // Option 2: Pass AgentRun object directly (new feature)
     const agentRunData: AgentRun = {
       name: "My Agent",
       run_id: "run-456",
       start_time: 1725792000,
       end_time: 1725795600,
       status: "Completed",
       nodes: [
         // ... your agent nodes
       ]
     };
   
     return (
       <div>
         {/* Using JSON string */}
         <TimelineVisualizer data={jsonData} />
   
         {/* Using AgentRun object directly */}
         <TimelineVisualizer data={agentRunData} />
       </div>
     );
   }

Optional style Prop

You can specify the timeline view style using the optional style prop:

<TimelineVisualizer data={agentRunData} style="tree" />

or

<TimelineVisualizer data={agentRunData} style="flat" />

If omitted, the default is flat.

🎨 Features

• Configurable View Style: Use the style prop to switch between tree and flat timeline views

• Interactive Flow Visualization: Visualize agentic flows with nodes and edges in a timeline view

• Timeline Navigation: Step through the flow execution timeline

• Flexible Data Input: Accept both JSON strings and AgentRun objects directly

• Type Safety: Full TypeScript support with AgentRun interface

• Responsive Design: Works on different screen sizes

📄 License

MIT

📞 Support

For issues and questions, please open an issue on GitHub.