cleanup the components

Arize-ai · Oct 1, 2024 · cb3b6ff · cb3b6ff
1 parent 917f712
commit cb3b6ff
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 61 deletions.
diff --git a/app/package.json b/app/package.json
@@ -6,7 +6,7 @@
   "license": "None",
   "private": true,
   "dependencies": {
-    "@arizeai/components": "^1.8.1",
+    "@arizeai/components": "^1.8.3",
     "@arizeai/openinference-semantic-conventions": "^0.10.0",
     "@arizeai/point-cloud": "^3.0.6",
     "@codemirror/autocomplete": "6.12.0",
@@ -58,7 +58,7 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.7",
     "@types/node": "^22.5.4",
-    "@types/react": "18.2.48",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-relay": "^16.0.6",
     "@types/recharts": "^1.8.29",

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
@@ -37,7 +37,7 @@ export function OneTimeAPIKeyDialog(props: { jwt: string }) {
         <View padding="size-200">
           <Flex direction="row" gap="size-100" alignItems="end">
             <TextField label="API Key" isReadOnly value={jwt} minWidth="100%" />
-            <CopyToClipboardButton text={jwt} size="normal" />
+            <CopyToClipboardButton text={jwt} size="default" />
           </Flex>
         </View>
         <View padding="size-200" borderTopColor="light" borderTopWidth="thin">

diff --git a/app/src/pages/dataset/DatasetCodeDropdown.tsx b/app/src/pages/dataset/DatasetCodeDropdown.tsx
@@ -72,7 +72,7 @@ export function DatasetCodeDropdown() {
                   width="100%"
                 >
                   <TextField label="Dataset ID" isReadOnly value={datasetId} />
-                  <CopyToClipboardButton text={datasetId} size="normal" />
+                  <CopyToClipboardButton text={datasetId} size="default" />
                 </Flex>
                 <Flex direction="row" gap="size-100" alignItems="end">
                   <TextField
@@ -84,7 +84,7 @@ export function DatasetCodeDropdown() {
                   <CopyToClipboardButton
                     text={version?.id || "No Versions"}
                     disabled={!version}
-                    size="normal"
+                    size="default"
                   />
                 </Flex>
               </Form>
@@ -105,7 +105,7 @@ export function DatasetCodeDropdown() {
                   <Form>
                     <Flex direction="row" gap="size-100" alignItems="end">
                       <TextField label="URL" isReadOnly value={datasetURL} />
-                      <CopyToClipboardButton text={datasetURL} size="normal" />
+                      <CopyToClipboardButton text={datasetURL} size="default" />
                     </Flex>
                   </Form>
                 </View>

diff --git a/app/src/pages/playground/MessageRolePicker.tsx b/app/src/pages/playground/MessageRolePicker.tsx
@@ -35,7 +35,7 @@ export function MessageRolePicker({
       label="Role"
       data-testid="inferences-time-range"
       aria-label={`Time range for the primary inferences`}
-      addonBefore={"role"}
+      size="compact"
       onSelectionChange={() => {}}
     >
       <Item key="system">System</Item>

diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -36,7 +36,6 @@ export function PlaygroundChatTemplate(props: PlaygroundChatTemplateProps) {
         return (
           <li key={index}>
             <Card
-              // @ts-expect-error allow the rendering of elements as titles
               title={
                 <MessageRolePicker includeLabel={false} role={message.role} />
               }

diff --git a/app/src/pages/playground/PlaygroundTemplate.tsx b/app/src/pages/playground/PlaygroundTemplate.tsx
@@ -1,6 +1,17 @@
 import React from "react";
 
-import { Button, Card, Flex, Icon, Icons, View } from "@arizeai/components";
+import {
+  Button,
+  Card,
+  Content,
+  Flex,
+  Icon,
+  Icons,
+  Tooltip,
+  TooltipTrigger,
+  TriggerWrap,
+  View,
+} from "@arizeai/components";
 
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
@@ -83,13 +94,20 @@ function CompareButton() {
 function DeleteButton(props: PlaygroundInstanceProps) {
   const deleteInstance = usePlaygroundContext((state) => state.deleteInstance);
   return (
-    <Button
-      variant="default"
-      size="compact"
-      icon={<Icon svg={<Icons.TrashOutline />} />}
-      onClick={() => {
-        deleteInstance(props.playgroundInstanceId);
-      }}
-    />
+    <TooltipTrigger>
+      <TriggerWrap>
+        <Button
+          variant="default"
+          size="compact"
+          icon={<Icon svg={<Icons.TrashOutline />} />}
+          onClick={() => {
+            deleteInstance(props.playgroundInstanceId);
+          }}
+        />
+      </TriggerWrap>
+      <Tooltip>
+        <Content>Delete this instance of the playground</Content>
+      </Tooltip>
+    </TooltipTrigger>
   );
 }
diff --git a/app/src/pages/settings/SettingsPage.tsx b/app/src/pages/settings/SettingsPage.tsx
@@ -82,7 +82,7 @@ export function SettingsPage() {
 function CopyToClipboardButtonWithPadding(props: { text: string }) {
   return (
     <View paddingBottom="19px">
-      <CopyToClipboardButton text={props.text} size="normal" />
+      <CopyToClipboardButton text={props.text} size="default" />
     </View>
   );
 }
diff --git a/app/src/pages/trace/SpanCodeDropdown.tsx b/app/src/pages/trace/SpanCodeDropdown.tsx
@@ -45,11 +45,11 @@ export function SpanCodeDropdown(props: SpanCodeDropdownProps) {
             <Form>
               <Flex direction="row" gap="size-100" alignItems="end">
                 <TextField label="Span ID" isReadOnly value={spanId} />
-                <CopyToClipboardButton text={spanId} size="normal" />
+                <CopyToClipboardButton text={spanId} size="default" />
               </Flex>
               <Flex direction="row" gap="size-100" alignItems="end">
                 <TextField label="Trace ID" isReadOnly value={traceId} />
-                <CopyToClipboardButton text={traceId} size="normal" />
+                <CopyToClipboardButton text={traceId} size="default" />
               </Flex>
             </Form>
           </View>

diff --git a/app/src/pages/trace/SpanDetails.tsx b/app/src/pages/trace/SpanDetails.tsx
@@ -608,7 +608,6 @@ function LLMSpanInfo(props: { span: Span; spanAttributes: AttributeObject }) {
         }}
         titleSeparator={false}
         variant="compact"
-        // @ts-expect-error force putting the title in as a string
         title={modelNameTitleEl}
       >
         <Tabs>
@@ -1158,7 +1157,6 @@ function DocumentItem({
       bodyStyle={{
         padding: 0,
       }}
-      // @ts-expect-error force putting the title in as a string
       title={
         <Flex direction="row" gap="size-50" alignItems="center">
           <Icon svg={<Icons.FileOutline />} />
@@ -1404,7 +1402,6 @@ function LLMToolSchema({
 
   return (
     <Card
-      // @ts-expect-error force putting the title in as a string
       title={titleEl}
       titleExtra={<Counter variant="light">#{index + 1}</Counter>}
       {...defaultCardProps}