@railtownai/railtracks-visualizer 0.0.32 → 0.0.34

package/dist/cjs/index.js

@@ -14732,18 +14732,66 @@ function cn(...inputs) {
     return str.split(/[-_\s]+/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
- * Formats a currency value (USD dollars)
+ * Formats a currency value (USD dollars) with dynamic precision
  * @param value - The dollar value to format
- * @param precision - The number of decimal places to show. Defaults to 3.
- * @returns The formatted dollar string (eg: $123.002)
- */ function formatCurrency(value, precision = 3) {
+ * @returns The formatted dollar string with appropriate precision
+ */ function formatCurrency(value) {
     if (value === null || value === undefined) {
-        return "$0.000";
+        return "$0.00";
+    }
+    const absValue = Math.abs(value);
+    // Handle zero
+    if (absValue === 0) {
+        return "$0.00";
+    }
+    // Handle whole numbers - format with 3 decimal places
+    if (Number.isInteger(absValue)) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // For decimal numbers, find the first non-zero decimal place
+    const valueStr = absValue.toString();
+    const decimalIndex = valueStr.indexOf(".");
+    if (decimalIndex === -1) {
+        // No decimal point, treat as whole number
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // Find the first non-zero digit after the decimal point
+    let precision = 1;
+    const decimalPart = valueStr.substring(decimalIndex + 1);
+    for(let i = 0; i < decimalPart.length; i++){
+        if (decimalPart[i] !== "0") {
+            precision = i + 1;
+            break;
+        }
+    }
+    // For values >= 1, ensure we show at least 3 decimal places for readability
+    if (absValue >= 1) {
+        precision = Math.max(precision, 3);
     }
-    // Format the dollar value with sp  ecified precision
-    const formatted = Math.abs(value).toFixed(precision);
+    // Cap precision at 8 decimal places
+    precision = Math.min(precision, 8);
+    // Check if the value rounds to a whole number when rounded to the nearest integer
+    // This handles cases like 123.999 -> 124.000, but only if the value is very close to a whole number
+    const roundedToInteger = Math.round(absValue);
+    if (roundedToInteger >= 1 && Number.isInteger(roundedToInteger) && Math.abs(absValue - roundedToInteger) < 0.01) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${roundedToInteger.toFixed(3)}`;
+    }
+    // Round to the determined precision
+    const rounded = absValue.toFixed(precision);
     const sign = value < 0 ? "-" : "";
-    return `${sign}$${formatted}`;
+    const roundedNum = parseFloat(rounded);
+    // If the result is effectively zero (like $0.00000000), display as $0.00
+    if (roundedNum === 0 || rounded === "0.00000000") {
+        return "$0.00";
+    }
+    // If the rounded value is a whole number and >= 1, show 3 decimal places
+    if (roundedNum >= 1 && Number.isInteger(roundedNum)) {
+        return `${sign}$${roundedNum.toFixed(3)}`;
+    }
+    return `${sign}$${rounded}`;
 }
 /**
  * Formats latency in a human-readable format
@@ -16359,7 +16407,7 @@ const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
         end: value,
         duration: DEFAULT_COUNTUP_DURATION,
         separator: ",",
-        decimals: 2,
+        decimals: 3,
         decimal: ".",
         prefix: prefix,
         useEasing: true,
@@ -16986,8 +17034,8 @@ const AgentNode = ({ data, id, onInspect })=>{
     const nodeIcon = getNodeIcon(modelProvider);
     const modelName = data.details?.internals?.llm_details?.[data.details?.internals?.llm_details?.length - 1]?.model_name || "Unknown";
     const totalCost = sumTotalCost(data.details?.internals?.llm_details || []);
-    const totalCostFormatted = formatCurrency(totalCost, 2);
-    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost, 5)} USD`;
+    const totalCostFormatted = formatCurrency(totalCost);
+    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost)} USD`;
     const nodeDetails = getOverviewLlmDetails(data.details?.internals?.llm_details || []);
     const inputArray = nodeDetails?.input || [];
     const output = nodeDetails?.output || null;
@@ -20199,7 +20247,7 @@ const nodeTypes = {
 const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect, panToNodeId })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
     // Helper function to determine if we should apply minimum dimensions
@@ -20545,6 +20593,39 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         defaultAutoFitDuration,
         defaultAutoFitDelay
     ]);
+    // Pan to specific node when panToNodeId prop is provided
+    React.useEffect(()=>{
+        if (!panToNodeId || !reactFlowInstance || disableAutoFit || nodes.length === 0) {
+            return;
+        }
+        // Check if the specified node ID exists in the current nodes array
+        const targetNode = nodes.find((node)=>node.id === panToNodeId);
+        if (!targetNode) {
+            return;
+        }
+        // Pan to the specified node
+        setTimeout(()=>{
+            reactFlowInstance.fitView({
+                nodes: [
+                    {
+                        id: panToNodeId
+                    }
+                ],
+                duration: defaultAutoFitDuration,
+                padding: 0.2,
+                minZoom: defaultZoom,
+                maxZoom: defaultZoom
+            });
+        }, defaultAutoFitDelay);
+    }, [
+        panToNodeId,
+        reactFlowInstance,
+        disableAutoFit,
+        nodes,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay,
+        defaultZoom
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
         style: {
@@ -20703,9 +20784,9 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
             }
         }
     }, /*#__PURE__*/ React.createElement(Background, {
-        variant: BackgroundVariant.Lines,
+        variant: BackgroundVariant.Dots,
         color: themeColors.mutedBorder,
-        gap: 16
+        size: 3
     })), /*#__PURE__*/ React.createElement("style", null, `
           .react-flow__edge-label {
             font-size: 10px;

package/dist/esm/index.js

@@ -14712,18 +14712,66 @@ function cn(...inputs) {
     return str.split(/[-_\s]+/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
- * Formats a currency value (USD dollars)
+ * Formats a currency value (USD dollars) with dynamic precision
  * @param value - The dollar value to format
- * @param precision - The number of decimal places to show. Defaults to 3.
- * @returns The formatted dollar string (eg: $123.002)
- */ function formatCurrency(value, precision = 3) {
+ * @returns The formatted dollar string with appropriate precision
+ */ function formatCurrency(value) {
     if (value === null || value === undefined) {
-        return "$0.000";
+        return "$0.00";
+    }
+    const absValue = Math.abs(value);
+    // Handle zero
+    if (absValue === 0) {
+        return "$0.00";
+    }
+    // Handle whole numbers - format with 3 decimal places
+    if (Number.isInteger(absValue)) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // For decimal numbers, find the first non-zero decimal place
+    const valueStr = absValue.toString();
+    const decimalIndex = valueStr.indexOf(".");
+    if (decimalIndex === -1) {
+        // No decimal point, treat as whole number
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // Find the first non-zero digit after the decimal point
+    let precision = 1;
+    const decimalPart = valueStr.substring(decimalIndex + 1);
+    for(let i = 0; i < decimalPart.length; i++){
+        if (decimalPart[i] !== "0") {
+            precision = i + 1;
+            break;
+        }
+    }
+    // For values >= 1, ensure we show at least 3 decimal places for readability
+    if (absValue >= 1) {
+        precision = Math.max(precision, 3);
     }
-    // Format the dollar value with sp  ecified precision
-    const formatted = Math.abs(value).toFixed(precision);
+    // Cap precision at 8 decimal places
+    precision = Math.min(precision, 8);
+    // Check if the value rounds to a whole number when rounded to the nearest integer
+    // This handles cases like 123.999 -> 124.000, but only if the value is very close to a whole number
+    const roundedToInteger = Math.round(absValue);
+    if (roundedToInteger >= 1 && Number.isInteger(roundedToInteger) && Math.abs(absValue - roundedToInteger) < 0.01) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${roundedToInteger.toFixed(3)}`;
+    }
+    // Round to the determined precision
+    const rounded = absValue.toFixed(precision);
     const sign = value < 0 ? "-" : "";
-    return `${sign}$${formatted}`;
+    const roundedNum = parseFloat(rounded);
+    // If the result is effectively zero (like $0.00000000), display as $0.00
+    if (roundedNum === 0 || rounded === "0.00000000") {
+        return "$0.00";
+    }
+    // If the rounded value is a whole number and >= 1, show 3 decimal places
+    if (roundedNum >= 1 && Number.isInteger(roundedNum)) {
+        return `${sign}$${roundedNum.toFixed(3)}`;
+    }
+    return `${sign}$${rounded}`;
 }
 /**
  * Formats latency in a human-readable format
@@ -16339,7 +16387,7 @@ const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
         end: value,
         duration: DEFAULT_COUNTUP_DURATION,
         separator: ",",
-        decimals: 2,
+        decimals: 3,
         decimal: ".",
         prefix: prefix,
         useEasing: true,
@@ -16966,8 +17014,8 @@ const AgentNode = ({ data, id, onInspect })=>{
     const nodeIcon = getNodeIcon(modelProvider);
     const modelName = data.details?.internals?.llm_details?.[data.details?.internals?.llm_details?.length - 1]?.model_name || "Unknown";
     const totalCost = sumTotalCost(data.details?.internals?.llm_details || []);
-    const totalCostFormatted = formatCurrency(totalCost, 2);
-    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost, 5)} USD`;
+    const totalCostFormatted = formatCurrency(totalCost);
+    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost)} USD`;
     const nodeDetails = getOverviewLlmDetails(data.details?.internals?.llm_details || []);
     const inputArray = nodeDetails?.input || [];
     const output = nodeDetails?.output || null;
@@ -20179,7 +20227,7 @@ const nodeTypes = {
 const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect, panToNodeId })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
     // Helper function to determine if we should apply minimum dimensions
@@ -20525,6 +20573,39 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         defaultAutoFitDuration,
         defaultAutoFitDelay
     ]);
+    // Pan to specific node when panToNodeId prop is provided
+    useEffect(()=>{
+        if (!panToNodeId || !reactFlowInstance || disableAutoFit || nodes.length === 0) {
+            return;
+        }
+        // Check if the specified node ID exists in the current nodes array
+        const targetNode = nodes.find((node)=>node.id === panToNodeId);
+        if (!targetNode) {
+            return;
+        }
+        // Pan to the specified node
+        setTimeout(()=>{
+            reactFlowInstance.fitView({
+                nodes: [
+                    {
+                        id: panToNodeId
+                    }
+                ],
+                duration: defaultAutoFitDuration,
+                padding: 0.2,
+                minZoom: defaultZoom,
+                maxZoom: defaultZoom
+            });
+        }, defaultAutoFitDelay);
+    }, [
+        panToNodeId,
+        reactFlowInstance,
+        disableAutoFit,
+        nodes,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay,
+        defaultZoom
+    ]);
     return /*#__PURE__*/ React__default.createElement("div", {
         ref: containerRef,
         style: {
@@ -20683,9 +20764,9 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
             }
         }
     }, /*#__PURE__*/ React__default.createElement(Background, {
-        variant: BackgroundVariant.Lines,
+        variant: BackgroundVariant.Dots,
         color: themeColors.mutedBorder,
-        gap: 16
+        size: 3
     })), /*#__PURE__*/ React__default.createElement("style", null, `
           .react-flow__edge-label {
             font-size: 10px;

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

@@ -17,6 +17,7 @@ export interface AgenticFlowVisualizerProps {
     showTimeline?: boolean;
     minNodeSpacing?: number;
     onInspect?: (nodeData: any) => void;
+    panToNodeId?: string;
 }
 declare const AgenticFlowVisualizer: React.FC<AgenticFlowVisualizerProps>;
 export default AgenticFlowVisualizer;

package/dist/types/lib/utils.d.ts

@@ -8,12 +8,11 @@ export declare function cn(...inputs: ClassValue[]): string;
  */
 export declare function toTitleCase(str: string): string;
 /**
- * Formats a currency value (USD dollars)
+ * Formats a currency value (USD dollars) with dynamic precision
  * @param value - The dollar value to format
- * @param precision - The number of decimal places to show. Defaults to 3.
- * @returns The formatted dollar string (eg: $123.002)
+ * @returns The formatted dollar string with appropriate precision
  */
-export declare function formatCurrency(value: number | null | undefined, precision?: number): string;
+export declare function formatCurrency(value: number | null | undefined): string;
 /**
  * Formats latency in a human-readable format
  * @param latency - Latency in seconds

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",