feat: make long traces scrollable (#473)

lunary-ai · Aug 4, 2024 · 6469f40 · 6469f40
1 parent 22171fa
commit 6469f40
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 32 deletions.
diff --git a/packages/frontend/components/analytics/TopModels.tsx b/packages/frontend/components/analytics/TopModels.tsx
@@ -25,7 +25,7 @@ function TopModels({ topModels, isLoading }: TopModelsProps) {
     )
   }
 
-  if (topModels.length === 0) {
+  if (topModels?.length === 0) {
     return (
       <>
         <Overlay blur={5} opacity={0.1} p="lg" zIndex={1} />
@@ -61,6 +61,7 @@ function TopModels({ topModels, isLoading }: TopModelsProps) {
         {
           name: "Model",
           bar: true,
+          key: "model",
         },
         {
           name: "Tokens",

diff --git a/packages/frontend/components/layout/index.tsx b/packages/frontend/components/layout/index.tsx
@@ -58,6 +58,8 @@ export default function Layout({ children }: { children: ReactNode }) {
   }, [isSignedIn])
 
   const isPromptPage = router.pathname.startsWith("/prompt")
+  const isTracePage = router.pathname.startsWith("/traces")
+  const disablePagePadding = isPromptPage || isTracePage
 
   useEffect(() => {
     if (user) {
@@ -91,7 +93,7 @@ export default function Layout({ children }: { children: ReactNode }) {
           {!isAuthPage && !isPublicPage && <Sidebar />}
 
           <Box
-            p={isPromptPage ? 0 : 24}
+            p={disablePagePadding ? 0 : 24}
             pos="relative"
             flex={1}
             style={{

diff --git a/packages/frontend/pages/traces/[id].tsx b/packages/frontend/pages/traces/[id].tsx
@@ -1,28 +1,20 @@
-import { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-
+import DurationBadge from "@/components/blocks/DurationBadge"
+import RunInputOutput from "@/components/blocks/RunInputOutput"
+import StatusBadge from "@/components/blocks/StatusBadge"
+import TokensBadge from "@/components/blocks/TokensBadge"
+import { useProjectSWR, useRun } from "@/utils/dataHooks"
+import { capitalize, formatCost } from "@/utils/format"
 import {
   Badge,
   Box,
   Card,
-  Flex,
-  Grid,
   Group,
   Loader,
   Stack,
   Text,
   ThemeIcon,
   Title,
 } from "@mantine/core"
-
-import DurationBadge from "@/components/blocks/DurationBadge"
-import TokensBadge from "@/components/blocks/TokensBadge"
-import StatusBadge from "@/components/blocks/StatusBadge"
-
-import { useProjectSWR, useRun } from "@/utils/dataHooks"
-import { capitalize, formatCost } from "@/utils/format"
-import RunInputOutput from "@/components/blocks/RunInputOutput"
-import { getColorForRunType } from "../../utils/colors"
 import {
   IconCloudDownload,
   IconCode,
@@ -32,6 +24,9 @@ import {
   IconRobot,
   IconTool,
 } from "@tabler/icons-react"
+import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
+import { getColorForRunType } from "../../utils/colors"
 
 import RunsChat from "@/components/blocks/RunChat"
 
@@ -233,7 +228,7 @@ export default function AgentRun({}) {
   const focusedRun = relatedRuns?.find((run) => run.id === focused)
 
   return (
-    <Stack gap="xl">
+    <Stack p="24px 24px 0 24px" h="100vh" gap="xl">
       <Title order={1}>
         {capitalize(run?.type)} Trace {run.name ? `(${run.name})` : ""}
       </Title>
@@ -255,8 +250,8 @@ export default function AgentRun({}) {
         )}
       </Group>
 
-      <Flex align="start" w="100%" style={{ gap: 20, wordBreak: "break-all" }}>
-        <Box flex={`0 0 600px`}>
+      <Group>
+        <Box style={{ flex: "0 0 600px", overflowY: "auto", height: "100%" }}>
           {relatedRuns && (
             <TraceTree
               isFirst
@@ -268,20 +263,23 @@ export default function AgentRun({}) {
             />
           )}
         </Box>
-        <Box flex={`1 1 400px`}>
-          <Card
-            withBorder
-            style={{
-              position: "sticky",
-              top: 85,
-              maxHeight: "calc(100vh - 220px)",
-              overflow: "auto",
-            }}
-          >
-            <RenderRun run={focusedRun} relatedRuns={relatedRuns} />
-          </Card>
+
+        <Box style={{ flex: "1 1 400px", overflowY: "auto", height: "100%" }}>
+          <Box p="md">
+            <Card
+              withBorder
+              style={{
+                position: "sticky",
+                top: 0,
+                maxHeight: "calc(100vh - 200px)",
+                overflow: "auto",
+              }}
+            >
+              <RenderRun run={focusedRun} relatedRuns={relatedRuns} />
+            </Card>
+          </Box>
         </Box>
-      </Flex>
+      </Group>
     </Stack>
   )
 }