Railracks Visualizer

A React-based visualizer for Railtracks agentic flows

🚀 Quick Start

As an NPM Package

1. Install the package:

   npm install @railtownai/railtracks-visualizer

2. Import and use in your React app:

   import { Visualizer } from '@railtownai/railtracks-visualizer';
   
   function App() {
     const data = {
       nodes: [...],
       edges: [...],
       stamps: [...]
     };
   
     return (
       <Visualizer
         flowData={data}
         width="100%"
         height="800px"
         showTimeline={false}
         defaultZoom={1.2}
         defaultPan={{ x: 0, y: 0 }}
       />
     );
   }

🎨 Features

• Interactive Flow Visualization: Visualize agentic flows with nodes and edges
• Auto-layout: Automatic positioning of nodes in a tree structure
• Inspection Panel: Detailed view of nodes and edges
• Portable Styling: Uses emotion for self-contained, portable styles
• Graceful Theme Handling: Works out of the box with default light theme, no ThemeProvider required
• Dark Mode Support: Full dark mode compatibility with automatic theme detection

Basic Usage (No ThemeProvider Required)

import { Visualizer } from "@railtownai/railtracks-visualizer";

// Works out of the box with default light theme
<Visualizer flowData={data} />;

🔧 Development

1. npm install
2. npm run build
3. npm test
4. npm start - This should open up Storybook UI at http://localhost:6006

📦 Exportable Components

We allow exporting UI components from AgentHub that can be used in external React applications across different environments (e.g. web, mobile, desktop, chrome extensions, etc.).

In order to use them, you'll need to ensure you pass the correct DTOs to the components.

For example, if you want to use the EvaluationsTable component, you'll need to pass the correct Evaluation DTOs to the component.

import type { Evaluation as EvaluationDto } from "@railtownai/railtracks-visualizer";
<EvaluationsTable evaluations={evaluations as EvaluationDto[]} />;

Here's the list of exportable components:

• <EvaluationsTable /> - ./src/agenthub/components/EvaluationsTable.tsx
• <EvaluationsCompare /> - ./src/agenthub/pages/evaluations-compare-drawer.tsx
• <EvaluationDetailsDrawer /> - ./src/agenthub/pages/evaluation-details-drawer.tsx
• <EvaluatorResult /> - ./src/agenthub/pages/evaluator-result.tsx
• <AggregateResultsTable /> - ./src/agenthub/components/AggregateResultsTable.tsx

📄 License

See LICENSE

📞 Support

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