Add total token cost to variant stats (#13)

* Add total token cost to variant stats

* Copy over token counts for new variants

* Update invalidate call

src/components/OutputsTable/EditEvaluations.tsx

@@ -105,7 +105,7 @@ export default function EditEvaluations() {
   const [onDelete] = useHandledAsyncCallback(async (id: string) => {
     await deleteMutation.mutateAsync({ id });
     await utils.evaluations.list.invalidate();
-    await utils.evaluations.results.invalidate();
+    await utils.promptVariants.stats.invalidate();
   }, []);
 
   const [onSave] = useHandledAsyncCallback(async (id: string | undefined, vals: EvalValues) => {
@@ -124,7 +124,7 @@ export default function EditEvaluations() {
       });
     }
     await utils.evaluations.list.invalidate();
-    await utils.evaluations.results.invalidate();
+    await utils.promptVariants.stats.invalidate();
   }, []);
 
   const onCancel = useCallback(() => {

src/components/OutputsTable/OutputCell.tsx

@@ -65,7 +65,7 @@ export default function OutputCell({
       channel,
     });
     setOutput(output);
-    await utils.evaluations.results.invalidate();
+    await utils.promptVariants.stats.invalidate();
   }, [outputMutation, scenario.id, variant.id, channel]);
 
   useEffect(fetchOutput, []);

src/components/OutputsTable/VariantStats.tsx

@@ -1,14 +1,14 @@
-import { HStack, Text, useToken } from "@chakra-ui/react";
+import { HStack, Icon, Text, useToken } from "@chakra-ui/react";
 import { type PromptVariant } from "./types";
 import { cellPadding } from "../constants";
 import { api } from "~/utils/api";
 import chroma from "chroma-js";
+import { BsCurrencyDollar } from "react-icons/bs";
 
 export default function VariantStats(props: { variant: PromptVariant }) {
-  const evalResults =
-    api.evaluations.results.useQuery({
-      variantId: props.variant.id,
-    }).data ?? [];
+  const { evalResults, overallCost } = api.promptVariants.stats.useQuery({
+    variantId: props.variant.id,
+  }).data ?? { evalResults: [] };
 
   const [passColor, neutralColor, failColor] = useToken("colors", [
     "green.500",
@@ -18,21 +18,29 @@ export default function VariantStats(props: { variant: PromptVariant }) {
 
   const scale = chroma.scale([failColor, neutralColor, passColor]).domain([0, 0.5, 1]);
 
-  if (!(evalResults.length > 0)) return null;
+  if (!(evalResults.length > 0) && !overallCost) return null;
 
   return (
-    <HStack px={cellPadding.x} py={cellPadding.y} fontSize="sm">
-      {evalResults.map((result) => {
-        const passedFrac = result.passCount / (result.passCount + result.failCount);
-        return (
-          <HStack key={result.id}>
-            <Text>{result.evaluation.name}</Text>
-            <Text color={scale(passedFrac).hex()} fontWeight="bold">
-              {(passedFrac * 100).toFixed(1)}%
-            </Text>
-          </HStack>
-        );
-      })}
+    <HStack justifyContent="space-between" alignItems="center" mx="2">
+      <HStack px={cellPadding.x} py={cellPadding.y} fontSize="sm">
+        {evalResults.map((result) => {
+          const passedFrac = result.passCount / (result.passCount + result.failCount);
+          return (
+            <HStack key={result.id}>
+              <Text>{result.evaluation.name}</Text>
+              <Text color={scale(passedFrac).hex()} fontWeight="bold">
+                {(passedFrac * 100).toFixed(1)}%
+              </Text>
+            </HStack>
+          );
+        })}
+      </HStack>
+      {overallCost && (
+        <HStack spacing={0} align="center" color="gray.500" fontSize="xs" my="2">
+          <Icon as={BsCurrencyDollar} />
+          <Text mr={1}>{overallCost.toFixed(3)}</Text>
+        </HStack>
+      )}
     </HStack>
   );
 }