add tool support

Arize-ai · Nov 11, 2024 · c217be7 · c217be7
1 parent 8ad88a7
commit c217be7
Show file tree

Hide file tree

Showing 9 changed files with 414 additions and 116 deletions.
diff --git a/app/src/components/dataset/DatasetPicker.tsx b/app/src/components/dataset/DatasetPicker.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 
-import { Item, Picker, PickerProps } from "@arizeai/components";
+import { Flex, Item, Picker, PickerProps, Text } from "@arizeai/components";
 
 import { DatasetPickerQuery } from "./__generated__/DatasetPickerQuery.graphql";
 
@@ -27,6 +27,7 @@ export function DatasetPicker(props: DatasetPickerProps) {
             dataset: node {
               id
               name
+              exampleCount
             }
           }
         }
@@ -52,7 +53,16 @@ export function DatasetPicker(props: DatasetPickerProps) {
     >
       {data.datasets.edges.map(({ dataset }) => (
         <Item key={dataset.id} aria-label={dataset.name}>
-          {dataset.name}
+          <Flex
+            direction="column"
+            justifyContent={"space-between"}
+            width={"100%"}
+          >
+            <Text>{dataset.name}</Text>
+            <Text color="text-700" textSize="small">
+              {dataset.exampleCount} examples
+            </Text>
+          </Flex>
         </Item>
       ))}
     </Picker>

diff --git a/app/src/components/dataset/__generated__/DatasetPickerQuery.graphql.ts b/app/src/components/dataset/__generated__/DatasetPickerQuery.graphql.ts
diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
@@ -27,8 +27,8 @@ import { PlaygroundQuery } from "./__generated__/PlaygroundQuery.graphql";
 import { NUM_MAX_PLAYGROUND_INSTANCES } from "./constants";
 import { NoInstalledProvider } from "./NoInstalledProvider";
 import { PlaygroundCredentialsDropdown } from "./PlaygroundCredentialsDropdown";
-import { PlaygroundDatasetExamplesTable } from "./PlaygroundDatasetExamplesTable";
 import { PlaygroundDatasetPicker } from "./PlaygroundDatasetPicker";
+import { PlaygroundDatasetSection } from "./PlaygroundDatasetSection";
 import { PlaygroundInput } from "./PlaygroundInput";
 import { PlaygroundOutput } from "./PlaygroundOutput";
 import { PlaygroundRunButton } from "./PlaygroundRunButton";
@@ -144,6 +144,7 @@ function AddPromptButton() {
 const playgroundPromptPanelContentCSS = css`
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
   & > .ac-accordion {
     display: flex;
@@ -155,8 +156,12 @@ const playgroundPromptPanelContentCSS = css`
       height: 100%;
       display: flex;
       flex-direction: column;
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: auto;
       flex: 1 1 auto;
+      & > [role="button"] {
+        flex: unset;
+      }
       .ac-accordion-itemContent {
         height: 100%;
         overflow: hidden;
@@ -225,7 +230,7 @@ function PlaygroundContent() {
       <Panel>
         <div css={playgroundInputOutputPanelContentCSS}>
           {isDatasetMode ? (
-            <PlaygroundDatasetExamplesTable datasetId={datasetId} />
+            <PlaygroundDatasetSection datasetId={datasetId} />
           ) : (
             <Accordion arrowPosition="start" size="L">
               <AccordionItem title="Inputs" id="input">