From dfd5b321b97d681126cc391e80ae146aa67809a3 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 29 May 2024 01:15:16 +0100
Subject: [PATCH 1/2] added fallback value for undefined parameters

---
 agenta-web/src/lib/helpers/formatters.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/lib/helpers/formatters.ts b/agenta-web/src/lib/helpers/formatters.ts
index 5d5de3f7d6..cc7c6d63fd 100644
--- a/agenta-web/src/lib/helpers/formatters.ts
+++ b/agenta-web/src/lib/helpers/formatters.ts
@@ -12,7 +12,7 @@ export const formatNumber = (value = 0) => {
     return intlNumber.format(value)
 }
 
-export const formatCurrency = (value: number) => {
+export const formatCurrency = (value = 0) => {
     if (value === null) {
         return "-"
     } else {
@@ -24,7 +24,7 @@ export const formatLatency = (value = 0) => {
     return `${Math.round(value * 1000)}ms`
 }
 
-export const formatTokenUsage = (value: number) => {
+export const formatTokenUsage = (value = 0) => {
     if (value === null) {
         return "-"
     } else {

From 2f12645d343049d2aea5c833ccf686672eebb382 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 29 May 2024 13:50:51 +0100
Subject: [PATCH 2/2] improved fallback

---
 .../components/Playground/Views/TestView.tsx  | 21 ++---------
 agenta-web/src/lib/helpers/formatters.ts      | 36 ++++++++++---------
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index 0b2ea095f6..3c1633cefa 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -224,24 +224,9 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
             </Row>
             {additionalData?.cost || additionalData?.latency ? (
                 <Space>
-                    <p>
-                        Tokens:{" "}
-                        {additionalData.usage !== null
-                            ? formatTokenUsage(additionalData.usage.total_tokens)
-                            : 0}
-                    </p>
-                    <p>
-                        Cost:{" "}
-                        {additionalData.cost !== null
-                            ? formatCurrency(additionalData.cost)
-                            : "$0.00"}
-                    </p>
-                    <p>
-                        Latency:{" "}
-                        {additionalData.latency !== null
-                            ? formatLatency(additionalData.latency)
-                            : "0ms"}
-                    </p>
+                    <p>Tokens: {formatTokenUsage(additionalData?.usage?.total_tokens)}</p>
+                    <p>Cost: {formatCurrency(additionalData?.cost)}</p>
+                    <p>Latency: {formatLatency(additionalData?.latency)}</p>
                 </Space>
             ) : (
                 ""
diff --git a/agenta-web/src/lib/helpers/formatters.ts b/agenta-web/src/lib/helpers/formatters.ts
index cc7c6d63fd..d0ec8a056a 100644
--- a/agenta-web/src/lib/helpers/formatters.ts
+++ b/agenta-web/src/lib/helpers/formatters.ts
@@ -8,26 +8,30 @@ const intlCurrency = new Intl.NumberFormat("en-US", {
     maximumFractionDigits: 6,
 })
 
-export const formatNumber = (value = 0) => {
-    return intlNumber.format(value)
-}
-
-export const formatCurrency = (value = 0) => {
-    if (value === null) {
-        return "-"
+const handleNullOrUndefined = <T, R extends string>(
+    value: T | undefined | null,
+    callback: (v: T) => R,
+    defaultValue: R = "-" as R,
+): R => {
+    if (value == null || (typeof value === "number" && isNaN(value))) {
+        return defaultValue
     } else {
-        return intlCurrency.format(value)
+        return callback(value)
     }
 }
 
-export const formatLatency = (value = 0) => {
-    return `${Math.round(value * 1000)}ms`
+export const formatNumber = (value: number | undefined | null) => {
+    return handleNullOrUndefined(value, intlNumber.format)
 }
 
-export const formatTokenUsage = (value = 0) => {
-    if (value === null) {
-        return "-"
-    } else {
-        return value
-    }
+export const formatCurrency = (value: number | undefined | null) => {
+    return handleNullOrUndefined(value, intlCurrency.format)
+}
+
+export const formatLatency = (value: number | undefined | null) => {
+    return handleNullOrUndefined(value, (v) => `${Math.round(v * 1000)}ms`)
+}
+
+export const formatTokenUsage = (value: number | undefined | null) => {
+    return handleNullOrUndefined(value, (v) => v.toString())
 }