[OPIK-373] Truncate images in the traces/spans table (only display th…

…em in the sidebar) (#600)
comet-ml · Nov 11, 2024 · 023e88c · 023e88c
1 parent 4eea627
commit 023e88c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/apps/opik-frontend/src/api/traces/useSpansList.ts b/apps/opik-frontend/src/api/traces/useSpansList.ts
@@ -12,6 +12,7 @@ type UseSpansListParams = {
   search?: string;
   page: number;
   size: number;
+  truncate?: boolean;
 };
 
 export type UseSpansListResponse = {
@@ -21,7 +22,16 @@ export type UseSpansListResponse = {
 
 const getSpansList = async (
   { signal }: QueryFunctionContext,
-  { projectId, traceId, type, filters, search, size, page }: UseSpansListParams,
+  {
+    projectId,
+    traceId,
+    type,
+    filters,
+    search,
+    size,
+    page,
+    truncate,
+  }: UseSpansListParams,
 ) => {
   const { data } = await api.get(SPANS_REST_ENDPOINT, {
     signal,
@@ -32,6 +42,7 @@ const getSpansList = async (
       ...processFilters(filters, generateSearchByIDFilters(search)),
       size,
       page,
+      truncate,
     },
   });
 

diff --git a/apps/opik-frontend/src/api/traces/useTracesList.ts b/apps/opik-frontend/src/api/traces/useTracesList.ts
@@ -10,6 +10,7 @@ type UseTracesListParams = {
   search?: string;
   page: number;
   size: number;
+  truncate?: boolean;
 };
 
 export type UseTracesListResponse = {
@@ -19,7 +20,7 @@ export type UseTracesListResponse = {
 
 const getTracesList = async (
   { signal }: QueryFunctionContext,
-  { projectId, filters, search, size, page }: UseTracesListParams,
+  { projectId, filters, search, size, page, truncate }: UseTracesListParams,
 ) => {
   const { data } = await api.get<UseTracesListResponse>(TRACES_REST_ENDPOINT, {
     signal,
@@ -28,6 +29,7 @@ const getTracesList = async (
       ...processFilters(filters, generateSearchByIDFilters(search)),
       size,
       page,
+      truncate,
     },
   });
 

diff --git a/apps/opik-frontend/src/components/pages/TracesPage/TracesSpansTab.tsx b/apps/opik-frontend/src/components/pages/TracesPage/TracesSpansTab.tsx
@@ -96,6 +96,7 @@ export const TracesSpansTab: React.FC<TracesSpansTabProps> = ({
       page: page as number,
       size: size as number,
       search: search as string,
+      truncate: true,
     },
     {
       placeholderData: keepPreviousData,

diff --git a/apps/opik-frontend/src/hooks/useTracesOrSpansList.ts b/apps/opik-frontend/src/hooks/useTracesOrSpansList.ts
@@ -21,6 +21,7 @@ type UseTracesOrSpansListParams = {
   search?: string;
   page: number;
   size: number;
+  truncate?: boolean;
 };
 
 type UseTracesOrSpansListResponse = {