update id generation, add todo, add test files

app/src/pages/playground/SpanPlaygroundPage.tsx

@@ -24,5 +24,9 @@ export function SpanPlaygroundPage() {
 
   const playgroundInstance = transformSpanAttributesToPlaygroundInstance(span);
 
-  return <Playground instances={[playgroundInstance]} />;
+  return (
+    <Playground
+      instances={playgroundInstance != null ? [playgroundInstance] : undefined}
+    />
+  );
 }

app/src/pages/playground/utils.ts

@@ -1,7 +1,4 @@
-import {
-  INITIAL_PLAYGROUND_INSTANCE_ID,
-  PlaygroundInstance,
-} from "@phoenix/store";
+import { generateInstanceId, PlaygroundInstance } from "@phoenix/store";
 import { spanPlaygroundPageLoaderQuery$data } from "./__generated__/spanPlaygroundPageLoaderQuery.graphql";
 import { safelyParseJSON } from "@phoenix/utils/jsonUtils";
 import { llmAttributesSchema } from "./schemas";
@@ -13,7 +10,7 @@ type PlaygroundSpan = Extract<
 
 export function transformSpanAttributesToPlaygroundInstance(
   span: PlaygroundSpan
-): PlaygroundInstance {
+): PlaygroundInstance | null {
   const { json: parsedAttributes, parseError } = safelyParseJSON(
     span.attributes
   );
@@ -22,10 +19,12 @@ export function transformSpanAttributesToPlaygroundInstance(
   }
   const { data, success } = llmAttributesSchema.safeParse(parsedAttributes);
   if (!success) {
-    throw new Error("Invalid data");
+    return null;
   }
+  // TODO(parker): add support for tools, variables, and input / output variants
+  // https://github.com/Arize-ai/phoenix/issues/4886
   return {
-    id: INITIAL_PLAYGROUND_INSTANCE_ID,
+    id: generateInstanceId(),
     activeRunId: null,
     isRunning: false,
     input: {

app/src/store/playgroundStore.tsx

@@ -3,10 +3,11 @@ import { devtools } from "zustand/middleware";
 
 export type GenAIOperationType = "chat" | "text_completion";
 
-export const INITIAL_PLAYGROUND_INSTANCE_ID = 0;
-let playgroundInstanceIdIndex = INITIAL_PLAYGROUND_INSTANCE_ID;
+let playgroundInstanceIdIndex = 0;
 let playgroundRunIdIndex = 0;
 
+export const generateInstanceId = () => playgroundInstanceIdIndex++;
+
 /**
  * The input mode for the playground
  * @example "manual" or "dataset"
@@ -183,16 +184,13 @@ const DEFAULT_TEXT_COMPLETION_TEMPLATE: PlaygroundTextCompletionTemplate = {
 export const createPlaygroundStore = (
   initialProps?: Partial<PlaygroundProps>
 ) => {
-  if (initialProps?.instances != null && initialProps.instances.length > 0) {
-    playgroundInstanceIdIndex += initialProps.instances.length;
-  }
   const playgroundStore: StateCreator<PlaygroundState> = (set, get) => ({
     operationType: "chat",
     inputMode: "manual",
     setInputMode: (inputMode: PlaygroundInputMode) => set({ inputMode }),
     instances: [
       {
-        id: playgroundInstanceIdIndex++,
+        id: generateInstanceId(),
         template: DEFAULT_CHAT_COMPLETION_TEMPLATE,
         tools: {},
         input: { variables: {} },
@@ -207,7 +205,7 @@ export const createPlaygroundStore = (
         set({
           instances: [
             {
-              id: playgroundInstanceIdIndex++,
+              id: generateInstanceId(),
               template: DEFAULT_CHAT_COMPLETION_TEMPLATE,
               tools: {},
               input: { variables: {} },
@@ -221,7 +219,7 @@ export const createPlaygroundStore = (
         set({
           instances: [
             {
-              id: playgroundInstanceIdIndex++,
+              id: generateInstanceId(),
               template: DEFAULT_TEXT_COMPLETION_TEMPLATE,
               tools: {},
               input: { variables: {} },
@@ -245,7 +243,7 @@ export const createPlaygroundStore = (
           instance,
           {
             ...instance,
-            id: playgroundInstanceIdIndex++,
+            id: generateInstanceId(),
             activeRunId: null,
           },
         ],