chore(weave): Fix call query on the Playground (#3275)

* Fix call query on the Playground

* move costs field

* pr comments/cleanup

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

@@ -50,21 +50,20 @@ export const PlaygroundPageInner = (props: PlaygroundPageProps) => {
 
   const {useCall, useCalls} = useWFHooks();
   const [settingsTab, setSettingsTab] = useState<number | null>(0);
+  const callKey = useMemo(() => {
+    return props.callId
+      ? {
+          entity: props.entity,
+          project: props.project,
+          callId: props.callId,
+        }
+      : null;
+  }, [props.entity, props.project, props.callId]);
 
-  const call = useCall(
-    useMemo(() => {
-      return props.callId
-        ? {
-            entity: props.entity,
-            project: props.project,
-            callId: props.callId,
-          }
-        : null;
-    }, [props.entity, props.project, props.callId]),
-    {
-      includeCosts: true,
-    }
-  );
+  const call = useCall(callKey);
+  const callWithCosts = useCall(callKey, {
+    includeCosts: true,
+  });
 
   const {result: calls} = useCalls(
     props.entity,
@@ -103,6 +102,18 @@ export const PlaygroundPageInner = (props: PlaygroundPageProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [call.loading]);
 
+  useEffect(() => {
+    if (!callWithCosts.loading && callWithCosts.result) {
+      if (callWithCosts.result.traceCall?.inputs) {
+        setPlaygroundStateFromTraceCall(callWithCosts.result.traceCall);
+      }
+    }
+  }, [
+    callWithCosts.loading,
+    setPlaygroundStateFromTraceCall,
+    callWithCosts.result,
+  ]);
+
   useEffect(() => {
     setPlaygroundStates(prev => {
       const newStates = [...prev];