@railtownai/railtracks-visualizer 0.0.29 → 0.0.30

package/README.md

@@ -1,5 +1,7 @@
 # RailTracks Visualizer
 
+[![Tests](https://github.com/RailtownAI/railtracks-visualizer/actions/workflows/ci.yaml/badge.svg)](https://github.com/RailtownAI/railtracks-visualizer/actions/workflows/ci.yaml)
+
 A React-based visualizer for RailTracks agentic flows
 
 ## 🚀 Quick Start

package/dist/cjs/index.js

@@ -16351,6 +16351,8 @@ const InputItemTextarea = styled(index$1)`
 `;
 
 const DEFAULT_COUNTUP_DURATION = 0.6;
+const DEFAULT_POPOVER_WIDTH = 350;
+const DEFAULT_POPOVER_HEIGHT = 500;
 // Helper component for animating currency values
 const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
     return /*#__PURE__*/ React.createElement(CountUp, {
@@ -16453,8 +16455,8 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
             const rect = triggerRef.current.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
-            const popoverWidth = 400; // Match the width from styled component
-            const popoverHeight = 600; // Approximate max height
+            const popoverWidth = DEFAULT_POPOVER_WIDTH; // Match the width from styled component
+            const popoverHeight = DEFAULT_POPOVER_HEIGHT; // Approximate max height
             const gap = 12; // Gap between node and popover
             // Check if the rect is valid (has non-zero dimensions and is in viewport)
             const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
@@ -16702,8 +16704,8 @@ const PopoverPortal = styled.div`
   pointer-events: none;
 `;
 const PopoverContent = styled.div`
-  width: 400px;
-  max-height: 600px;
+  width: ${DEFAULT_POPOVER_WIDTH}px;
+  max-height: ${DEFAULT_POPOVER_HEIGHT}px;
   background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
   border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   border-radius: 0.5rem;
@@ -20149,7 +20151,6 @@ SheetDescription.displayName = Description.displayName;
     }
     // Lay out each tree, centered
     // Calculate the starting position to center the entire layout in the container
-    // Ensure we don't have negative startX which would cause rightward offset
     const startX = Math.max(0, (containerWidth - totalWidth) / 2);
     let xCursor = startX;
     for (const root of roots){
@@ -20195,16 +20196,28 @@ const nodeTypes = {
     Tool: Node$1,
     Coordinator: Node$1
 };
-const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height = "1000px", className = "", defaultZoom = 1, defaultPan = {
+const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, showTimeline = false, minNodeSpacing = 400, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
+    // Helper function to determine if we should apply minimum dimensions
+    const shouldApplyMinDimensions = React.useCallback(()=>{
+        const widthStr = typeof width === "string" ? width : `${width}px`;
+        const heightStr = typeof height === "string" ? height : `${height}px`;
+        // Don't apply minimum dimensions if using viewport units
+        const hasViewportUnits = /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(widthStr) || /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(heightStr);
+        return !hasViewportUnits;
+    }, [
+        width,
+        height
+    ]);
     // Use prop data directly, no hooks needed
     const flowData = propFlowData;
     // Show no data state if no flowData is available
     if (!flowData) {
+        const applyMinDimensions = shouldApplyMinDimensions();
         return /*#__PURE__*/ React.createElement("div", {
             style: {
                 width: typeof width === "number" ? `${width}px` : width,
@@ -20213,8 +20226,10 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                 borderRadius: "8px",
                 background: themeColors.muted,
                 position: "relative",
-                minWidth: "800px",
-                minHeight: "600px",
+                ...applyMinDimensions && {
+                    minWidth: "800px",
+                    minHeight: "600px"
+                },
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
@@ -20324,9 +20339,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
         if (!flowData.nodes) {
             return new Map();
         }
-        // Use container dimensions for centering, fallback to reasonable defaults
-        // Ensure we have a reasonable minimum width for proper centering
-        const containerWidth = Math.max(containerDimensions.width || 800, 1200);
+        // Use actual container dimensions for proper centering
+        const containerWidth = containerDimensions.width || 800;
         return calculateAutoLayout(flowData.nodes, flowData.edges || [], {
             minNodeSpacing,
             containerWidth
@@ -20351,6 +20365,22 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
     }, [
         flowData.edges
     ]);
+    const reactFlowInstance = useReactFlow();
+    // Pan function that can be called by child components
+    React.useCallback((direction, amount)=>{
+        if (!reactFlowInstance) return;
+        const currentViewport = reactFlowInstance.getViewport();
+        const panAmount = direction === "right" ? amount : -amount;
+        reactFlowInstance.setViewport({
+            x: currentViewport.x - panAmount,
+            y: currentViewport.y,
+            zoom: currentViewport.zoom
+        }, {
+            duration: 300
+        });
+    }, [
+        reactFlowInstance
+    ]);
     // Convert flow data to ReactFlow format with step filtering
     const nodes = React.useMemo(()=>{
         const stepNodes = getNodesForStep(currentStep);
@@ -20461,7 +20491,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
             y: svgP.y
         };
     };
-    const reactFlowInstance = useReactFlow();
     // Pan to hub node (most connected node) on initial load, unless disabled or custom settings provided
     React.useEffect(()=>{
         if (disableAutoFit || !reactFlowInstance || nodes.length === 0) {
@@ -20500,31 +20529,34 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                             id: hubNodeId
                         }
                     ],
-                    duration: 1000,
+                    duration: defaultAutoFitDuration,
                     padding: 0.2,
                     minZoom: defaultZoom,
-                    maxZoom: 1
+                    maxZoom: defaultZoom
                 });
-            }, 500); // Small delay to ensure nodes are rendered
+            }, defaultAutoFitDelay); // Small delay to ensure nodes are rendered
         }
     }, [
         nodes,
         edges,
         reactFlowInstance,
         disableAutoFit,
-        defaultZoom
+        defaultZoom,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
         style: {
             width: typeof width === "number" ? `${width}px` : width,
             height: typeof height === "number" ? `${height}px` : height,
+            minWidth: "800px",
+            minHeight: "600px",
+            boxSizing: "border-box",
             border: `1px solid ${themeColors.border}`,
             borderRadius: "8px",
             overflow: "hidden",
             position: "relative",
-            minWidth: "800px",
-            minHeight: "600px",
             background: themeColors.background
         },
         className: className

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { memo, useState, useCallback, useMemo, forwardRef, createContext, useContext, useRef, useLayoutEffect, useEffect, createElement } from 'react';
+import React__default, { memo, useMemo, useState, useCallback, forwardRef, createContext, useContext, useRef, useLayoutEffect, useEffect, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
@@ -16331,6 +16331,8 @@ const InputItemTextarea = styled(index$1)`
 `;
 
 const DEFAULT_COUNTUP_DURATION = 0.6;
+const DEFAULT_POPOVER_WIDTH = 350;
+const DEFAULT_POPOVER_HEIGHT = 500;
 // Helper component for animating currency values
 const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
     return /*#__PURE__*/ React__default.createElement(CountUp, {
@@ -16433,8 +16435,8 @@ const NodeDetailsPopover = ({ isVisible, onClose, nodeData, triggerRef })=>{
             const rect = triggerRef.current.getBoundingClientRect();
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
-            const popoverWidth = 400; // Match the width from styled component
-            const popoverHeight = 600; // Approximate max height
+            const popoverWidth = DEFAULT_POPOVER_WIDTH; // Match the width from styled component
+            const popoverHeight = DEFAULT_POPOVER_HEIGHT; // Approximate max height
             const gap = 12; // Gap between node and popover
             // Check if the rect is valid (has non-zero dimensions and is in viewport)
             const isValidRect = rect.width > 0 && rect.height > 0 && rect.top >= 0 && rect.left >= 0;
@@ -16682,8 +16684,8 @@ const PopoverPortal = styled.div`
   pointer-events: none;
 `;
 const PopoverContent = styled.div`
-  width: 400px;
-  max-height: 600px;
+  width: ${DEFAULT_POPOVER_WIDTH}px;
+  max-height: ${DEFAULT_POPOVER_HEIGHT}px;
   background-color: ${(props)=>props.theme?.colors?.background || "hsl(0 0% 100%)"};
   border: 1px solid ${(props)=>props.theme?.colors?.border || "hsl(214.3 31.8% 91.4%)"};
   border-radius: 0.5rem;
@@ -20129,7 +20131,6 @@ SheetDescription.displayName = Description.displayName;
     }
     // Lay out each tree, centered
     // Calculate the starting position to center the entire layout in the container
-    // Ensure we don't have negative startX which would cause rightward offset
     const startX = Math.max(0, (containerWidth - totalWidth) / 2);
     let xCursor = startX;
     for (const root of roots){
@@ -20175,16 +20176,28 @@ const nodeTypes = {
     Tool: Node$1,
     Coordinator: Node$1
 };
-const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height = "1000px", className = "", defaultZoom = 1, defaultPan = {
+const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, showTimeline = false, minNodeSpacing = 400, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
+    // Helper function to determine if we should apply minimum dimensions
+    const shouldApplyMinDimensions = useCallback(()=>{
+        const widthStr = typeof width === "string" ? width : `${width}px`;
+        const heightStr = typeof height === "string" ? height : `${height}px`;
+        // Don't apply minimum dimensions if using viewport units
+        const hasViewportUnits = /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(widthStr) || /\b\d*\.?\d+(vw|vh|vmin|vmax)\b/.test(heightStr);
+        return !hasViewportUnits;
+    }, [
+        width,
+        height
+    ]);
     // Use prop data directly, no hooks needed
     const flowData = propFlowData;
     // Show no data state if no flowData is available
     if (!flowData) {
+        const applyMinDimensions = shouldApplyMinDimensions();
         return /*#__PURE__*/ React__default.createElement("div", {
             style: {
                 width: typeof width === "number" ? `${width}px` : width,
@@ -20193,8 +20206,10 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                 borderRadius: "8px",
                 background: themeColors.muted,
                 position: "relative",
-                minWidth: "800px",
-                minHeight: "600px",
+                ...applyMinDimensions && {
+                    minWidth: "800px",
+                    minHeight: "600px"
+                },
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center"
@@ -20304,9 +20319,8 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
         if (!flowData.nodes) {
             return new Map();
         }
-        // Use container dimensions for centering, fallback to reasonable defaults
-        // Ensure we have a reasonable minimum width for proper centering
-        const containerWidth = Math.max(containerDimensions.width || 800, 1200);
+        // Use actual container dimensions for proper centering
+        const containerWidth = containerDimensions.width || 800;
         return calculateAutoLayout(flowData.nodes, flowData.edges || [], {
             minNodeSpacing,
             containerWidth
@@ -20331,6 +20345,22 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
     }, [
         flowData.edges
     ]);
+    const reactFlowInstance = useReactFlow();
+    // Pan function that can be called by child components
+    useCallback((direction, amount)=>{
+        if (!reactFlowInstance) return;
+        const currentViewport = reactFlowInstance.getViewport();
+        const panAmount = direction === "right" ? amount : -amount;
+        reactFlowInstance.setViewport({
+            x: currentViewport.x - panAmount,
+            y: currentViewport.y,
+            zoom: currentViewport.zoom
+        }, {
+            duration: 300
+        });
+    }, [
+        reactFlowInstance
+    ]);
     // Convert flow data to ReactFlow format with step filtering
     const nodes = useMemo(()=>{
         const stepNodes = getNodesForStep(currentStep);
@@ -20441,7 +20471,6 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
             y: svgP.y
         };
     };
-    const reactFlowInstance = useReactFlow();
     // Pan to hub node (most connected node) on initial load, unless disabled or custom settings provided
     useEffect(()=>{
         if (disableAutoFit || !reactFlowInstance || nodes.length === 0) {
@@ -20480,31 +20509,34 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100%", height
                             id: hubNodeId
                         }
                     ],
-                    duration: 1000,
+                    duration: defaultAutoFitDuration,
                     padding: 0.2,
                     minZoom: defaultZoom,
-                    maxZoom: 1
+                    maxZoom: defaultZoom
                 });
-            }, 500); // Small delay to ensure nodes are rendered
+            }, defaultAutoFitDelay); // Small delay to ensure nodes are rendered
         }
     }, [
         nodes,
         edges,
         reactFlowInstance,
         disableAutoFit,
-        defaultZoom
+        defaultZoom,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay
     ]);
     return /*#__PURE__*/ React__default.createElement("div", {
         ref: containerRef,
         style: {
             width: typeof width === "number" ? `${width}px` : width,
             height: typeof height === "number" ? `${height}px` : height,
+            minWidth: "800px",
+            minHeight: "600px",
+            boxSizing: "border-box",
             border: `1px solid ${themeColors.border}`,
             borderRadius: "8px",
             overflow: "hidden",
             position: "relative",
-            minWidth: "800px",
-            minHeight: "600px",
             background: themeColors.background
         },
         className: className

package/dist/types/components/AgenticFlowVisualizer.d.ts

@@ -12,6 +12,8 @@ export interface AgenticFlowVisualizerProps {
         y: number;
     };
     disableAutoFit?: boolean;
+    defaultAutoFitDuration?: number;
+    defaultAutoFitDelay?: number;
     showTimeline?: boolean;
     minNodeSpacing?: number;
     onInspect?: (nodeData: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -53,18 +53,19 @@
   },
   "scripts": {
     "build:lib": "rollup -c",
+    "build:size": "npm pack --dry-run",
     "build:spa": "vite build",
     "build:types": "tsc -p tsconfig.types.json",
-    "build:size": "npm pack --dry-run",
     "build": "npm run build:types && npm run build:lib && npm run build:spa",
     "clean": "rm -rf dist build test-results .railtracks/ui/*",
     "dev": "rm -rf .railtracks/ui/* && vite build && cp -r build/* .railtracks/ui",
     "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "lint:license": "license-checker --summary --excludePrivatePackages --failOn 'AGPL-1.0;AGPL-3.0;EPL-1.0;EPL-2.0;GPL-1.0;GPL-2.0;GPL-3.0;LGPL-2.0;LGPL-2.1;LGPL-3.0;'",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "start": "storybook dev -p 6006",
     "storybook:build": "cross-env NODE_ENV=production storybook build",
-    "storybook:preview": "npx http-server ./storybook-static",
     "storybook:deploy": "gh-pages -d storybook-static",
+    "storybook:preview": "npx http-server ./storybook-static",
     "test:ui": "vitest --ui",
     "test": "vitest run --silent",
     "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
@@ -95,6 +96,7 @@
     "cross-env": "^10.0.0",
     "gh-pages": "6.3.0",
     "jsdom": "26.1.0",
+    "license-checker": "25.0.1",
     "npm-check-updates": "18.1.0",
     "playwright": "^1.55.0",
     "prettier": "3.6.2",