WIP

Arize-ai · Dec 23, 2024 · 046d690 · 046d690
1 parent 0561340
commit 046d690
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 45 deletions.
diff --git a/app/src/components/auth/DeleteAPIKeyButton.tsx b/app/src/components/auth/DeleteAPIKeyButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -11,6 +10,8 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 export function DeleteAPIKeyButton({
   handleDelete,
 }: {
@@ -36,7 +37,7 @@ export function DeleteAPIKeyButton({
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setDialog(null);
               }}
@@ -52,10 +53,10 @@ export function DeleteAPIKeyButton({
     <>
       <Button
         variant="danger"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.TrashOutline />} />}
         aria-label="Delete System Key"
-        onClick={onDelete}
+        onPress={onDelete}
       />
       <DialogContainer
         isDismissable

diff --git a/app/src/components/dataset/DatasetForm.tsx b/app/src/components/dataset/DatasetForm.tsx
@@ -1,15 +1,9 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import {
-  Button,
-  Flex,
-  Form,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Flex, Form, TextArea, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CodeEditorFieldWrapper, JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -129,11 +123,14 @@ export function DatasetForm({
           <Button
             // Only allow submission if the form is dirty for edits
             // When creating allow the user to click create without any changes as the form will be prefilled with valid values
-            disabled={formMode === "edit" ? !isDirty : false}
+            isDisabled={
+              (formMode === "edit" ? !isDirty : false) || isSubmitting
+            }
             variant={isDirty ? "primary" : "default"}
-            size="compact"
-            loading={isSubmitting}
-            onClick={handleSubmit(onSubmit)}
+            size="S"
+            onPress={() => {
+              handleSubmit(onSubmit)();
+            }}
           >
             {submitButtonText}
           </Button>

diff --git a/app/src/components/pointcloud/PointCloud.tsx b/app/src/components/pointcloud/PointCloud.tsx
@@ -5,11 +5,11 @@ import { ThemeContext as EmotionThemeContext } from "@emotion/react";
 
 import {
   ActionTooltip,
-  Button,
   Heading,
   Icon,
   InfoOutline,
   TooltipTrigger,
+  TriggerWrap,
 } from "@arizeai/components";
 import {
   Axes,
@@ -21,6 +21,7 @@ import {
   ThreeDimensionalControls,
 } from "@arizeai/point-cloud";
 
+import { Button } from "@phoenix/components";
 import { UNKNOWN_COLOR } from "@phoenix/constants/pointCloudConstants";
 import {
   InferencesContext,
@@ -184,12 +185,13 @@ function CanvasTools() {
 function CanvasInfo() {
   return (
     <TooltipTrigger placement="bottom left" delay={0}>
-      <Button
-        variant="default"
-        size="compact"
-        icon={<Icon svg={<InfoOutline />} />}
-        aria-label="Information bout the point-cloud display"
-      />
+      <TriggerWrap>
+        <Button
+          size="S"
+          icon={<Icon svg={<InfoOutline />} />}
+          aria-label="Information bout the point-cloud display"
+        />
+      </TriggerWrap>
       <ActionTooltip title={"Point Cloud Summary"}>
         <PointCloudInfo />
       </ActionTooltip>

diff --git a/app/src/components/table/Table.tsx b/app/src/components/table/Table.tsx
@@ -8,7 +8,9 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Button, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { paginationCSS, tableCSS } from "./styles";
 import { TableEmpty } from "./TableEmpty";
@@ -75,25 +77,24 @@ export function Table<DataRow extends object>({
         </thead>
         {body}
       </table>
-      {/* 
+      {/*
         TODO(mikeldking): style tables
           This is just a very basic UI implementation
         */}
       <div css={paginationCSS}>
         <Button
           variant="default"
-          size="compact"
-          onClick={table.previousPage}
-          disabled={!table.getCanPreviousPage()}
+          size="S"
+          onPress={table.previousPage}
+          isDisabled={!table.getCanPreviousPage()}
           aria-label="Previous Page"
           icon={<Icon svg={<Icons.ArrowIosBackOutline />} />}
         />
 
         <Button
-          variant="default"
-          size="compact"
-          onClick={table.nextPage}
-          disabled={!table.getCanNextPage()}
+          size="S"
+          onPress={table.nextPage}
+          isDisabled={!table.getCanNextPage()}
           aria-label="Next Page"
           icon={<Icon svg={<Icons.ArrowIosForwardOutline />} />}
         />

diff --git a/app/src/pages/datasets/DeleteDatasetDialog.tsx b/app/src/pages/datasets/DeleteDatasetDialog.tsx
@@ -2,7 +2,9 @@ import React, { startTransition, useCallback } from "react";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import { Button, Dialog, Flex, Text, View } from "@arizeai/components";
+import { Dialog, Flex, Icon, Icons, Text, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { DeleteDatasetDialogMutation } from "./__generated__/DeleteDatasetDialogMutation.graphql";
 
@@ -58,11 +60,21 @@ export function DeleteDatasetDialog({
         <Flex direction="row" justifyContent="end">
           <Button
             variant="danger"
-            onClick={() => {
+            onPress={() => {
               handleDelete();
             }}
-            disabled={isCommittingDelete}
-            loading={isCommittingDelete}
+            isDisabled={isCommittingDelete}
+            icon={
+              <Icon
+                svg={
+                  isCommittingDelete ? (
+                    <Icons.LoadingOutline />
+                  ) : (
+                    <Icons.TrashOutline />
+                  )
+                }
+              />
+            }
           >
             Delete Dataset
           </Button>

diff --git a/app/src/pages/example/EditExampleButton.tsx b/app/src/pages/example/EditExampleButton.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
+import { DialogContainer, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { EditExampleDialog, EditExampleDialogProps } from "./EditExampleDialog";
 
@@ -11,10 +13,9 @@ export function EditExampleButton(props: EditExampleButtonProps) {
   return (
     <>
       <Button
-        variant="default"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.EditOutline />} />}
-        onClick={() =>
+        onPress={() =>
           setDialog(
             <EditExampleDialog
               {...dialogProps}

diff --git a/app/src/pages/playground/PlaygroundDatasetPicker.tsx b/app/src/pages/playground/PlaygroundDatasetPicker.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import { useNavigate, useParams } from "react-router";
 import { css } from "@emotion/react";
 
-import { Button, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { DatasetPicker } from "@phoenix/components/dataset";
 
 /**
@@ -23,7 +24,7 @@ const playgroundDatasetPickerCSS = css`
     border-bottom-right-radius: 0;
     height: ${DATASET_PICKER_BUTTON_HEIGHT}px;
   }
-  .ac-button {
+  & > button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-left: none;
@@ -51,10 +52,9 @@ export function PlaygroundDatasetPicker() {
         }}
       />
       <Button
-        size="compact"
-        variant={"default"}
+        size="S"
         icon={<Icon svg={<Icons.CloseOutline />} />}
-        onClick={() => {
+        onPress={() => {
           navigate("/playground");
         }}
       />