From 3ef2591de302a28440b452d9b5dcda5974b0b68d Mon Sep 17 00:00:00 2001
From: Jamie Rasmussen <112953339+jamie-rasmussen@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:02:16 -0500
Subject: [PATCH] chore: move Usage table in Call summary (#2641)

---
 .../Home/Browse3/pages/CallPage/CallPage.tsx  |  6 ++-
 .../Browse3/pages/CallPage/CallSummary.tsx    | 37 ++++++++-----------
 .../Home/Browse3/pages/CallPage/CostTable.tsx |  5 +++
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
index 270dc72d9b5..9f885268642 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallPage.tsx
@@ -110,7 +110,11 @@ const useCallTabs = (call: CallSchema) => {
     },
     {
       label: 'Summary',
-      content: <CallSummary call={call} />,
+      content: (
+        <Tailwind style={{height: '100%', overflow: 'auto'}}>
+          <CallSummary call={call} />
+        </Tailwind>
+      ),
     },
     {
       label: 'Use',
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx
index daa866cb4fe..3180a265d88 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CallSummary.tsx
@@ -1,4 +1,3 @@
-import {Divider} from '@mui/material';
 import _ from 'lodash';
 import React from 'react';
 
@@ -32,7 +31,22 @@ export const CallSummary: React.FC<{
   );
 
   return (
-    <div style={{padding: 8, overflow: 'auto'}}>
+    <div className="overflow-auto px-16 pt-12">
+      {span.summary.usage && (
+        <div className="mb-16">
+          {/* This styling is similar to what is is SimpleKeyValueTable */}
+          <p
+            className="mb-10"
+            style={{
+              fontWeight: 600,
+              marginRight: 10,
+              paddingRight: 10,
+            }}>
+            Usage
+          </p>
+          <CostTable usage={span.summary.usage as {[key: string]: UsageData}} />
+        </div>
+      )}
       <SimpleKeyValueTable
         data={{
           Operation:
@@ -63,25 +77,6 @@ export const CallSummary: React.FC<{
           ...(Object.keys(summary).length > 0 ? {Summary: summary} : {}),
         }}
       />
-      {span.summary.usage && (
-        <>
-          <Divider sx={{marginY: '16px'}} />
-          <div>
-            {/* This styling is similar to what is is SimpleKeyValueTable */}
-            <p
-              style={{
-                fontWeight: 600,
-                marginRight: 10,
-                paddingRight: 10,
-              }}>
-              Usage
-            </p>
-            <CostTable
-              usage={span.summary.usage as {[key: string]: UsageData}}
-            />
-          </div>
-        </>
-      )}
     </div>
   );
 };
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CostTable.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CostTable.tsx
index ec71fb99ab2..1a6547f397f 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CostTable.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/CostTable.tsx
@@ -21,30 +21,35 @@ const columns: GridColDef[] = [
   {
     field: 'requests',
     headerName: 'Requests',
+    headerAlign: 'right',
     flex: 2,
     renderCell: renderNumberCell,
   },
   {
     field: 'prompt_tokens',
     headerName: 'Input tokens',
+    headerAlign: 'right',
     flex: 3,
     renderCell: renderNumberCell,
   },
   {
     field: 'completion_tokens',
     headerName: 'Output tokens',
+    headerAlign: 'right',
     flex: 3,
     renderCell: renderNumberCell,
   },
   {
     field: 'total_tokens',
     headerName: 'Total tokens',
+    headerAlign: 'right',
     flex: 3,
     renderCell: renderNumberCell,
   },
   {
     field: 'cost',
     headerName: 'Total Cost',
+    headerAlign: 'right',
     flex: 3,
     renderCell: (params: GridRenderCellParams) => (
       <Box sx={{textAlign: 'right', width: '100%'}}>