playground layout

Arize-ai · Oct 12, 2024 · 58e2fcf · 58e2fcf
1 parent 025c33e
commit 58e2fcf
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 47 deletions.
diff --git a/app/src/components/resize/styles.tsx b/app/src/components/resize/styles.tsx
@@ -2,7 +2,7 @@ import { css, Theme } from "@emotion/react";
 
 export const resizeHandleCSS = css`
   transition: 250ms linear all;
-  background-color: var(--ac-global-color-grey-200);
+  background-color: var(--ac-global-color-grey-300);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -31,7 +31,7 @@ export const resizeHandleCSS = css`
   }
 
   &:hover {
-    background-color: var(--ac-global-color-grey-300);
+    background-color: var(--ac-global-color-grey-400);
     border-radius: 4px;
     &:before,
     &:after {
@@ -45,14 +45,14 @@ export const resizeHandleCSS = css`
     color: var(--color-solid-resize-bar);
     flex: 0 0 1rem;
     border-radius: 6px;
-    background-color: var(--ac-global-color-grey-300);
+    background-color: var(--ac-global-color-grey-400);
     flex: none;
   }
 `;
 
 export const compactResizeHandleCSS = (theme: Theme) => css`
   transition: 250ms linear all;
-  background-color: var(--ac-global-color-grey-200);
+  background-color: var(--ac-global-color-grey-300);
   --px-resize-handle-size: 4px;
   outline: none;
   &[data-panel-group-direction="vertical"] {

diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
@@ -1,7 +1,16 @@
 import React, { Fragment } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
-import { Button, Flex, Heading, Icon, Icons, View } from "@arizeai/components";
+import {
+  Accordion,
+  AccordionItem,
+  Button,
+  Flex,
+  Heading,
+  Icon,
+  Icons,
+  View,
+} from "@arizeai/components";
 
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import {
@@ -13,7 +22,9 @@ import { InitialPlaygroundState } from "@phoenix/store";
 import { NUM_MAX_PLAYGROUND_INSTANCES } from "./constants";
 import { PlaygroundInputTypeTypeRadioGroup } from "./PlaygroundInputModeRadioGroup";
 import { PlaygroundInstance } from "./PlaygroundInstance";
+import { PlaygroundOutput } from "./PlaygroundOutput";
 import { PlaygroundRunButton } from "./PlaygroundRunButton";
+import { PlaygroundTemplate } from "./PlaygroundTemplate";
 
 export function Playground(props: InitialPlaygroundState) {
   return (
@@ -41,7 +52,7 @@ export function Playground(props: InitialPlaygroundState) {
             </Flex>
           </Flex>
         </View>
-        <PlaygroundInstances />
+        <PlaygroundContent />
       </Flex>
     </PlaygroundProvider>
   );
@@ -66,20 +77,81 @@ function AddPromptButton() {
   );
 }
 
-function PlaygroundInstances() {
+function PlaygroundContent() {
+  const instances = usePlaygroundContext((state) => state.instances);
+  const numInstances = instances.length;
+  const isSingleInstance = numInstances === 1;
+
+  if (isSingleInstance) {
+    return <SingleInstancePlayground />;
+  } else {
+    return <MultiInstancePlayground />;
+  }
+}
+
+function SingleInstancePlayground() {
+  const instances = usePlaygroundContext((state) => state.instances);
+  const instanceId = instances[0].id;
+  return (
+    <PanelGroup direction="horizontal" autoSaveId="playground-single">
+      <Panel defaultSize={50}>
+        <Accordion>
+          <AccordionItem title="Prompts" id="prompts">
+            <View padding="size-200" height="100%">
+              <PlaygroundTemplate playgroundInstanceId={instanceId} />
+            </View>
+          </AccordionItem>
+        </Accordion>
+      </Panel>
+      <PanelResizeHandle css={resizeHandleCSS} />
+      <Panel defaultSize={50}>
+        <Accordion>
+          <AccordionItem title="Inputs" id="input">
+            <View padding="size-200">Input goes here</View>
+          </AccordionItem>
+          <AccordionItem title="Output" id="output">
+            <View padding="size-200" height="100%">
+              <PlaygroundOutput playgroundInstanceId={instanceId} />
+            </View>
+          </AccordionItem>
+        </Accordion>
+      </Panel>
+    </PanelGroup>
+  );
+}
+
+function MultiInstancePlayground() {
   const instances = usePlaygroundContext((state) => state.instances);
   return (
-    <Flex direction="row" alignItems="stretch" height="100%" flex="1 1 auto">
-      <PanelGroup direction="horizontal">
-        {instances.map((instance, i) => (
-          <Fragment key={i}>
-            {i !== 0 && <PanelResizeHandle css={resizeHandleCSS} />}
-            <Panel defaultSize={50}>
-              <PlaygroundInstance key={i} playgroundInstanceId={instance.id} />
-            </Panel>
-          </Fragment>
-        ))}
-      </PanelGroup>
-    </Flex>
+    <Accordion>
+      <AccordionItem title="Prompts" id="prompts">
+        <View padding="size-200" height="100%">
+          <Flex direction="row" gap="size-200">
+            {instances.map((instance, i) => (
+              <View key={i} flex="1 1 auto">
+                <PlaygroundTemplate
+                  key={i}
+                  playgroundInstanceId={instance.id}
+                />
+              </View>
+            ))}
+          </Flex>
+        </View>
+      </AccordionItem>
+      <AccordionItem title="Inputs" id="input">
+        <View padding="size-200">Inputs go here</View>
+      </AccordionItem>
+      <AccordionItem title="Output" id="output">
+        <View padding="size-200" height="100%">
+          <Flex direction="row" gap="size-200">
+            {instances.map((instance, i) => (
+              <View key={i} flex="1 1 auto">
+                <PlaygroundOutput key={i} playgroundInstanceId={instance.id} />
+              </View>
+            ))}
+          </Flex>
+        </View>
+      </AccordionItem>
+    </Accordion>
   );
 }
diff --git a/app/src/pages/playground/PlaygroundInstance.tsx b/app/src/pages/playground/PlaygroundInstance.tsx
@@ -11,7 +11,6 @@ import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import { PlaygroundInput } from "./PlaygroundInput";
 import { PlaygroundOutput } from "./PlaygroundOutput";
 import { PlaygroundTemplate } from "./PlaygroundTemplate";
-import { PlaygroundTools } from "./PlaygroundTools";
 import { PlaygroundInstanceProps } from "./types";
 
 export function PlaygroundInstance(props: PlaygroundInstanceProps) {
@@ -22,7 +21,6 @@ export function PlaygroundInstance(props: PlaygroundInstanceProps) {
       <Panel defaultSize={50} order={1}>
         <PanelContent>
           <PlaygroundTemplate {...props} />
-          <PlaygroundTools {...props} />
         </PanelContent>
       </Panel>
       <PanelResizeHandle

diff --git a/app/src/pages/playground/PlaygroundTools.tsx b/app/src/pages/playground/PlaygroundTools.tsx