chore(ui): basic human feedback rendering in calls table

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/cost/costUtils.ts

@@ -6,6 +6,7 @@ import {CallSchema} from '../../wfReactInterface/wfDataModelHooksInterface';
 import {DEFAULT_COST_DATA, isCostDataKey, isUsageDataKey} from './costTypes';
 
 const COST_PARAM_PREFIX = 'summary.weave.costs.';
+const USAGE_PARAM_PREFIX = 'summary.usage.';
 
 export const getCostFromCellParams = (params: {[key: string]: any}) => {
   const costData: {[key: string]: LLMCostSchema} = {};
@@ -29,8 +30,8 @@ export const getCostFromCellParams = (params: {[key: string]: any}) => {
 export const getUsageFromCellParams = (params: {[key: string]: any}) => {
   const usage: {[key: string]: LLMUsageSchema} = {};
   for (const key in params) {
-    if (key.startsWith('summary.usage')) {
-      const usageKeys = key.replace('summary.usage.', '').split('.');
+    if (key.startsWith(USAGE_PARAM_PREFIX)) {
+      const usageKeys = key.replace(`${USAGE_PARAM_PREFIX}.`, '').split('.');
       const usageKey = usageKeys.pop() || '';
       if (isUsageDataKey(usageKey)) {
         const model = usageKeys.join('.');
@@ -87,22 +88,45 @@ export const formatTokenCost = (cost: number): string => {
   return `$${cost.toFixed(2)}`;
 };
 
-// TODO(Josiah): this is here because sometimes the cost query is not returning all the ids I believe for unfinished calls,
-// to get this cost uptake out, this function can be removed, once that is fixed
 export const addCostsToCallResults = (
   callResults: CallSchema[],
   costResults: CallSchema[]
-) => {
-  const costDict = costResults.reduce((acc, cost) => {
-    if (cost.callId) {
-      acc[cost.callId] = cost;
+): CallSchema[] => {
+  const costDict = costResults.reduce((acc, costResult) => {
+    if (costResult.callId) {
+      acc[costResult.callId] = {
+        summary: {
+          weave: {
+            costs: costResult.traceCall?.summary?.weave?.costs,
+          },
+          usage: costResult.traceCall?.summary?.usage,
+        },
+      };
     }
     return acc;
-  }, {} as Record<string, CallSchema>);
+  }, {} as Record<string, any>);
 
   return callResults.map(call => {
     if (call.callId && costDict[call.callId]) {
-      return {...call, ...costDict[call.callId]};
+      if (!call.traceCall) {
+        return call;
+      }
+      // Merge cost fields into existing call data
+      const merged = {
+        ...call,
+        traceCall: {
+          ...call.traceCall,
+          summary: {
+            ...call.traceCall?.summary,
+            weave: {
+              ...call.traceCall?.summary?.weave,
+              costs: costDict[call.callId].summary.weave.costs,
+            },
+          },
+          usage: costDict[call.callId].summary.usage,
+        },
+      };
+      return merged;
     }
     return call;
   });

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx

@@ -70,9 +70,13 @@ import {
   useControllableState,
   useURLSearchParamsDict,
 } from '../util';
+import {useBaseObjectInstances} from '../wfReactInterface/baseObjectClassQuery';
 import {useWFHooks} from '../wfReactInterface/context';
 import {TraceCallSchema} from '../wfReactInterface/traceServerClientTypes';
-import {traceCallToUICallSchema} from '../wfReactInterface/tsDataModelHooks';
+import {
+  projectIdFromParts,
+  traceCallToUICallSchema,
+} from '../wfReactInterface/tsDataModelHooks';
 import {EXPANDED_REF_REF_KEY} from '../wfReactInterface/tsDataModelHooksCallRefExpansion';
 import {objectVersionNiceString} from '../wfReactInterface/utilities';
 import {CallSchema} from '../wfReactInterface/wfDataModelHooksInterface';
@@ -519,6 +523,50 @@ export const CallsTable: FC<{
     project
   );
 
+  // Fetch annotation columns and make them hidden by default
+  const annotationColumns = useBaseObjectInstances('AnnotationSpec', {
+    project_id: projectIdFromParts({entity, project}),
+    filter: {
+      latest_only: true,
+    },
+  });
+  useEffect(() => {
+    if (!annotationColumns.result || annotationColumns.result.length === 0) {
+      return;
+    }
+    if (!setColumnVisibilityModel || !columnVisibilityModel) {
+      return;
+    }
+    // Check if we need to update - only update if any annotation columns are missing from the model
+    const needsUpdate = annotationColumns.result.some(
+      col => columnVisibilityModel[`feedback.${col.object_id}`] === undefined
+    );
+
+    if (!needsUpdate) {
+      return;
+    }
+
+    const annotationColumnVisiblityFalse = annotationColumns.result.reduce(
+      (acc, col) => {
+        // Only add columns that aren't already in the model
+        if (columnVisibilityModel[`feedback.${col.object_id}`] === undefined) {
+          acc[`feedback.${col.object_id}`] = false;
+        }
+        return acc;
+      },
+      {} as Record<string, boolean>
+    );
+
+    setColumnVisibilityModel({
+      ...columnVisibilityModel,
+      ...annotationColumnVisiblityFalse,
+    });
+  }, [
+    annotationColumns.result,
+    columnVisibilityModel,
+    setColumnVisibilityModel,
+  ]);
+
   // Selection Management
   const [selectedCalls, setSelectedCalls] = useState<string[]>([]);
   const clearSelectedCalls = useCallback(() => {

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumns.tsx

@@ -234,8 +234,8 @@ function buildCallsTableColumns(
       },
     },
     {
-      field: 'feedback',
-      headerName: 'Feedback',
+      field: 'reactions',
+      headerName: 'Reactions',
       width: 150,
       sortable: false,
       filterable: false,

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableColumnsUtil.ts

@@ -20,7 +20,7 @@ export function isDynamicCallColumn(path: Path): boolean {
   }
   return (
     path.length > 1 &&
-    ['attributes', 'inputs', 'output', 'summary'].includes(path[0])
+    ['attributes', 'inputs', 'output', 'summary', 'feedback'].includes(path[0])
   );
 }
 

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableQuery.ts

@@ -3,6 +3,8 @@ import {
   GridPaginationModel,
   GridSortModel,
 } from '@mui/x-data-grid-pro';
+import {parseRef} from '@wandb/weave/react';
+import {makeRefCall} from '@wandb/weave/util/refs';
 import {useCallback, useMemo} from 'react';
 
 import {useDeepMemo} from '../../../../../../hookUtils';
@@ -120,20 +122,66 @@ export const useCallsForQuery = (
     callsStats.refetch();
   }, [calls, callsStats, costs]);
 
+  // query for feeback
+  const {useFeedbackByTypeAndCallRefs} = useWFHooks();
+  const feedbackTypeSubstr = 'wandb.annotation.';
+  const feedbackQuery = useFeedbackByTypeAndCallRefs(
+    entity,
+    project,
+    feedbackTypeSubstr,
+    callResults.map(call => makeRefCall(entity, project, call.callId))
+  );
+
+  // map of callId to the latest feedback of each feedback_type
+  const feedbackByType: Record<string, Record<string, any>> | undefined =
+    useMemo(() => {
+      return feedbackQuery.result?.reduce(
+        (acc: Record<string, Record<string, any>>, curr) => {
+          const callId = parseRef(curr.weave_ref).artifactName;
+          if (!acc[callId]) {
+            acc[callId] = {};
+          }
+          // Store feedback by feedback_type, newer entries will overwrite older ones
+          if (curr.feedback_type) {
+            const feedbackName = curr.feedback_type.replace(
+              feedbackTypeSubstr,
+              ''
+            );
+            acc[callId][feedbackName] = getNestedValue(curr.payload);
+          }
+          return acc;
+        },
+        {}
+      );
+    }, [feedbackQuery.result]);
+
   return useMemo(() => {
+    if (calls.loading) {
+      return {
+        costsLoading: costs.loading,
+        loading: calls.loading,
+        result: [],
+        total: 0,
+        refetch,
+      };
+    }
+
     return {
       costsLoading: costs.loading,
       loading: calls.loading,
-      // Return faster calls query results until cost query finishes
-      result: calls.loading
-        ? []
-        : costResults.length > 0
-        ? addCostsToCallResults(callResults, costResults)
-        : callResults,
+      result: mergeCallData(callResults, costResults, feedbackByType),
       total,
       refetch,
     };
-  }, [callResults, calls.loading, total, costs.loading, costResults, refetch]);
+  }, [
+    callResults,
+    calls.loading,
+    total,
+    costs.loading,
+    costResults,
+    refetch,
+    feedbackByType,
+  ]);
 };
 
 export const useFilterSortby = (
@@ -217,3 +265,46 @@ const convertHighLevelFilterToLowLevelFilter = (
       : undefined,
   };
 };
+
+// Move mergeCallData into the file directly since it's specific to this use case
+
+const mergeCallData = (
+  baseCallResults: CallSchema[],
+  costResults: CallSchema[],
+  feedbackByType?: Record<string, Record<string, any>>
+): CallSchema[] => {
+  // Start with base results
+  let result = baseCallResults;
+
+  // Add feedback if available
+  if (feedbackByType) {
+    result = result.map(call => ({
+      ...call,
+      traceCall: call.traceCall
+        ? {
+            ...call.traceCall,
+            feedback: feedbackByType[call.callId],
+          }
+        : undefined,
+    }));
+  }
+
+  // Add costs if available
+  if (costResults.length > 0) {
+    result = addCostsToCallResults(result, costResults);
+  }
+
+  return result;
+};
+// Helper to safely get deeply nested values
+const getNestedValue = <T>(obj: any, depth: number = 3): T | undefined => {
+  try {
+    let result = obj;
+    for (let i = 0; i < depth; i++) {
+      result = Object.values(result)[0];
+    }
+    return result as T;
+  } catch {
+    return undefined;
+  }
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/wfReactInterface/tsDataModelHooks.ts

@@ -657,6 +657,94 @@ const useFeedback = (
   return {...result, refetch};
 };
 
+const useFeedbackByTypeAndCallRefs = (
+  entity: string,
+  project: string,
+  feedbackType: string,
+  callRefs: string[],
+  sortBy?: traceServerTypes.SortBy[]
+) => {
+  const getTsClient = useGetTraceServerClientContext();
+
+  const [result, setResult] = useState<
+    LoadableWithError<traceServerTypes.Feedback[]>
+  >({
+    loading: false,
+    result: null,
+    error: null,
+  });
+  const [doReload, setDoReload] = useState(false);
+  const refetch = useCallback(() => {
+    setDoReload(true);
+  }, [setDoReload]);
+
+  const deepCallRefs = useDeepMemo(callRefs);
+
+  useEffect(() => {
+    let mounted = true;
+    if (doReload) {
+      setDoReload(false);
+    }
+    if (!deepCallRefs || deepCallRefs.length === 0) {
+      return;
+    }
+    setResult({loading: true, result: null, error: null});
+    getTsClient()
+      .feedbackQuery({
+        project_id: projectIdFromParts({
+          entity,
+          project,
+        }),
+        query: {
+          $expr: {
+            $and: [
+              {
+                $contains: {
+                  input: {$getField: 'feedback_type'},
+                  substr: {$literal: feedbackType},
+                },
+              },
+              {
+                $in: [
+                  {$getField: 'weave_ref'},
+                  deepCallRefs.map(ref => ({$literal: ref})),
+                ],
+              },
+            ],
+          },
+        },
+        sort_by: sortBy ?? [{field: 'created_at', direction: 'desc'}],
+      })
+      .then(res => {
+        if (!mounted) {
+          return;
+        }
+        if ('result' in res) {
+          setResult({loading: false, result: res.result, error: null});
+        }
+      })
+      .catch(err => {
+        if (!mounted) {
+          return;
+        }
+        setResult({loading: false, result: null, error: err});
+      });
+    return () => {
+      mounted = false;
+    };
+  }, [
+    deepCallRefs,
+    getTsClient,
+    doReload,
+    sortBy,
+    feedbackType,
+    entity,
+    project,
+  ]);
+
+  return {...result, refetch};
+};
+
 const useOpVersion = (
   // Null value skips
   key: OpVersionKey | null
@@ -1720,6 +1808,7 @@ export const tsWFDataModelHooks: WFDataModelHooksInterface = {
   useRefsData,
   useApplyMutationsToRef,
   useFeedback,
+  useFeedbackByTypeAndCallRefs,
   useFileContent,
   useTableRowsQuery,
   useTableQueryStats,