fix: address review from kavinvalli

Helicone · Oct 8, 2024 · d408400 · d408400
1 parent ef5f21b
commit d408400
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 40 deletions.
diff --git a/web/components/shared/themed/table/requestRow.tsx b/web/components/shared/themed/table/requestRow.tsx
@@ -2,7 +2,6 @@ import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { NormalizedRequest } from "../../../templates/requestsV2/builder/abstractRequestBuilder";
 import ModelPill from "../../../templates/requestsV2/modelPill";
 import StatusBadge from "../../../templates/requestsV2/statusBadge";
-import { formatNumber } from "../../../templates/users/initialColumns";
 import { clsx } from "../../clsx";
 import { useState } from "react";
 import CostPill from "../../../templates/requestsV2/costPill";
@@ -54,7 +53,7 @@ const RequestRow = (props: RequestRowProps) => {
           <ModelPill model={row.model} />
           <p className="text-xs font-semibold">{Number(row.latency) / 1000}s</p>
           {row.cost !== null ? (
-            <p className="text-xs font-semibold">${formatNumber(row.cost)}</p>
+            <p className="text-xs font-semibold">${row.cost.toFixed(4)}</p>
           ) : row.status && row.status.code === 200 ? (
             <CostPill />
           ) : (

diff --git a/web/components/shared/utils/formatNumber.ts b/web/components/shared/utils/formatNumber.ts
diff --git a/web/components/templates/cache/cachePage.tsx b/web/components/templates/cache/cachePage.tsx
@@ -19,7 +19,6 @@ import UpgradeProModal from "../../shared/upgradeProModal";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import AuthHeader from "../../shared/authHeader";
-import { formatNumber } from "../users/initialColumns";
 import { useOrg } from "@/components/layout/organizationContext";
 import { DiffHighlight } from "../welcome/diffHighlight";
 import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
@@ -102,7 +101,7 @@ const CachePage = (props: CachePageProps) => {
     {
       id: "savings",
       label: "All Time Savings",
-      value: `$${formatNumber(chMetrics.totalSavings.data?.data ?? 0)}`,
+      value: `$${(chMetrics.totalSavings.data?.data ?? 0).toFixed(4)}`,
       isLoading: isAnyLoading,
       icon: BanknotesIcon,
     },

diff --git a/web/components/templates/prompts/experiments/id/experimentIdPage.tsx b/web/components/templates/prompts/experiments/id/experimentIdPage.tsx
@@ -11,7 +11,6 @@ import { usePrompt } from "../../../../../services/hooks/prompts/prompts";
 import ArrayDiffViewer from "../../id/arrayDiffViewer";
 import ScoresTable from "../scoresTable";
 import { SimpleTable } from "../../../../shared/table/simpleTable";
-import { formatNumber } from "../../../users/initialColumns";
 
 interface PromptIdPageProps {
   id: string;
@@ -59,7 +58,7 @@ const ExperimentIdPage = (props: PromptIdPageProps) => {
       return score.value;
     }
     if (score.valueType === "number") {
-      return formatNumber(score.value as number);
+      return (score.value as number).toFixed(4);
     }
     return score.value;
   };

diff --git a/web/components/templates/properties/propertyPanel.tsx b/web/components/templates/properties/propertyPanel.tsx
@@ -35,7 +35,6 @@ import ExportButton from "../../shared/themed/table/exportButton";
 import { UIFilterRow } from "../../shared/themed/themedAdvancedFilters";
 import ThemedTableHeader from "../../shared/themed/themedHeader";
 import useSearchParams from "../../shared/utils/useSearchParams";
-import { formatNumber } from "../users/initialColumns";
 
 interface PropertyPanelProps {
   property: string;
@@ -188,7 +187,9 @@ const PropertyPanel = (props: PropertyPanelProps) => {
                   <div className="animate-pulse h-7 w-24 bg-gray-200 dark:bg-gray-800 rounded-lg" />
                 ) : (
                   <dd className="text-gray-900 dark:text-gray-100 text-xl font-semibold">
-                    {+(keyMetrics.totalRequests?.data?.data?.toFixed(2) ?? 0)}
+                    {keyMetrics.totalRequests.data?.data
+                      ? keyMetrics.totalRequests.data.data.toFixed(2)
+                      : 0}
                   </dd>
                 )}
               </div>
@@ -285,26 +286,23 @@ const PropertyPanel = (props: PropertyPanelProps) => {
                         </TableCell>
                         <TableCell>{propertyValue.total_requests}</TableCell>
                         <TableCell>
-                          ${formatNumber(propertyValue.total_cost, 6)}
+                          $
+                          {propertyValue.total_cost.toFixed(6)}
                         </TableCell>
                         <TableCell>
-                          {formatNumber(
-                            propertyValue.avg_completion_tokens_per_request,
-                            6
-                          )}
+                          {
+                            propertyValue.avg_completion_tokens_per_request.toFixed(6)
+                          }
                         </TableCell>
                         <TableCell>
-                          {formatNumber(
-                            propertyValue.avg_latency_per_request,
-                            6
-                          )}
+                          {
+                            propertyValue.avg_latency_per_request.toFixed(6)
+                          }
                         </TableCell>
                         <TableCell>
-                          $
-                          {formatNumber(
-                            propertyValue.average_cost_per_request,
-                            6
-                          )}
+                          ${
+                            propertyValue.average_cost_per_request.toFixed(6)
+                          }
                         </TableCell>
                       </>
                     </TableRow>

diff --git a/web/components/templates/requestsV2/requestCard.tsx b/web/components/templates/requestsV2/requestCard.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 import { updateRequestFeedback } from "../../../services/lib/requests";
 import useNotification from "../../shared/notification/useNotification";
 import FeedbackButtons from "../feedback/thumbsUpThumbsDown";
-import { formatNumber } from "../users/initialColumns";
 import { NormalizedRequest } from "./builder/abstractRequestBuilder";
 import CostPill from "./costPill";
 import { CustomProperties } from "./customProperties";
@@ -82,7 +81,7 @@ const RequestCard = (props: RequestCardProps) => {
             <CostPill />
           ) : request.cost ? (
             <p className="text-sm font-semibold">
-              ${formatNumber(request.cost)}
+              ${request.cost.toFixed(4)}
             </p>
           ) : (
             <p className="text-sm font-semibold"></p>

diff --git a/web/components/templates/requestsV2/requestRow.tsx b/web/components/templates/requestsV2/requestRow.tsx
@@ -21,7 +21,6 @@ import StatusBadge from "./statusBadge";
 import ThemedModal from "../../shared/themed/themedModal";
 import NewDataset from "../datasets/NewDataset";
 import { convertToUSDateFormat } from "../../shared/utils/dateConvertor";
-import { formatNumber } from "../../shared/utils/formatNumber";
 
 function getPathName(url: string) {
   try {
@@ -269,7 +268,7 @@ const RequestRow = (props: {
             </p>
             <p className="text-gray-700 dark:text-gray-300 truncate">
               {request.cost !== null && request.cost !== undefined
-                ? `$${formatNumber(request.cost)}`
+                ? `$${request.cost.toFixed(4)}`
                 : request.status.statusType === "success"
                 ? "Calculating..."
                 : "N/A"}

diff --git a/web/components/templates/users/id/userIdPage.tsx b/web/components/templates/users/id/userIdPage.tsx
@@ -8,7 +8,6 @@ import {
 } from "@tremor/react";
 import { useUserId } from "../../../../services/hooks/users";
 import LoadingAnimation from "../../../shared/loadingAnimation";
-import { formatNumber } from "../initialColumns";
 import StyledAreaChart from "../../dashboard/styledAreaChart";
 import RequestsPageV2 from "../../requestsV2/requestsPageV2";
 import { ElementType } from "react";
@@ -85,7 +84,7 @@ const UserIdPage = (props: UserIdPageProps) => {
                   <div className="flex flex-col items-start space-y-1">
                     <p className="text-sm font-semibold">Total Cost</p>
                     <p className="text-sm text-gray-500">
-                      ${formatNumber(Number(user.cost || 0), 6)}
+                      ${Number(user.cost || 0).toFixed(6)}
                     </p>
                   </div>
                   <div className="flex flex-col items-start space-y-1">
@@ -122,15 +121,15 @@ const UserIdPage = (props: UserIdPageProps) => {
                       Average Requests per day
                     </p>
                     <p className="text-sm text-gray-500">
-                      {formatNumber(user.average_requests_per_day_active)}
+                      {user.average_requests_per_day_active.toFixed(4)}
                     </p>
                   </div>{" "}
                   <div className="flex flex-col items-start space-y-1">
                     <p className="text-sm font-semibold">
                       Average Tokens per request
                     </p>
                     <p className="text-sm text-gray-500">
-                      {formatNumber(user.average_tokens_per_request)}
+                      {user.average_tokens_per_request.toFixed(4)}
                     </p>
                   </div>{" "}
                 </div>
@@ -192,7 +191,7 @@ const UserIdPage = (props: UserIdPageProps) => {
                           colors={["green"]}
                           showLegend={false}
                           valueFormatter={(value) => {
-                            return `$${formatNumber(value, 6)}`;
+                            return `$${Number(value).toFixed(6)}`;
                           }}
                           curveType="monotone"
                         />

diff --git a/web/components/templates/users/userModal.tsx b/web/components/templates/users/userModal.tsx
@@ -3,7 +3,6 @@ import { UserMetric } from "../../../lib/api/users/users";
 import { clsx } from "../../shared/clsx";
 import ThemedModal from "../../shared/themed/themedModal";
 import { getUSDateFromString } from "../../shared/utils/utils";
-import { formatNumber } from "./initialColumns";
 import {
   ClipboardDocumentIcon,
   TableCellsIcon,
@@ -272,9 +271,7 @@ const UserModal = (props: UserModalProps) => {
               <p className="font-semibold text-gray-900 dark:text-gray-100">
                 Total Cost
               </p>
-              <p className="text-gray-700 dark:text-gray-300 truncate">{`$${formatNumber(
-                user.cost
-              )}`}</p>
+              <p className="text-gray-700 dark:text-gray-300 truncate">{`$${user.cost.toFixed(4)}`}</p>
             </li>
             <li className="flex flex-row justify-between items-center py-2 gap-4">
               <p className="font-semibold text-gray-900 dark:text-gray-100">
@@ -303,7 +300,7 @@ const UserModal = (props: UserModalProps) => {
                 Average Requests per Day
               </p>
               <p className="text-gray-700 dark:text-gray-300 truncate">
-                {formatNumber(user.average_requests_per_day_active)}
+                {user.average_requests_per_day_active.toFixed(4)}
               </p>
             </li>
             <li className="flex flex-row justify-between items-center py-2 gap-4">
@@ -312,7 +309,7 @@ const UserModal = (props: UserModalProps) => {
               </p>
               <p className="text-gray-700 dark:text-gray-300 truncate">
                 {user.average_tokens_per_request
-                  ? formatNumber(user.average_tokens_per_request)
+                  ? user.average_tokens_per_request.toFixed(4)
                   : "N/A"}
               </p>
             </li>