From 18cf3ba5774ffbc8bcbb504108bc00d36f9ebad3 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 29 Jul 2024 12:55:19 -0600
Subject: [PATCH 1/3] feat(ui): tracing getting started button

---
 app/src/pages/project/ProjectTableEmpty.tsx | 68 +++++++++++++++++++++
 app/src/pages/project/SpansTable.tsx        |  3 +-
 app/src/pages/project/TracesTable.tsx       |  4 +-
 3 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 app/src/pages/project/ProjectTableEmpty.tsx

diff --git a/app/src/pages/project/ProjectTableEmpty.tsx b/app/src/pages/project/ProjectTableEmpty.tsx
new file mode 100644
index 0000000000..d4cf430aab
--- /dev/null
+++ b/app/src/pages/project/ProjectTableEmpty.tsx
@@ -0,0 +1,68 @@
+import React, { ReactNode, useState } from "react";
+import { css } from "@emotion/react";
+
+import {
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  TabPane,
+  Tabs,
+  View,
+} from "@arizeai/components";
+
+import { ExternalLink } from "@phoenix/components";
+
+export function ProjectTableEmpty() {
+  const [dialog, setDialog] = useState<ReactNode>(null);
+  const onGettingStartedClick = () => {
+    setDialog(
+      <Dialog title="Getting Started with Traces" isDismissable>
+        <View padding="size-200">
+          <p
+            css={css`
+              margin: 0 0 var(--ac-global-dimension-size-100) 0;
+            `}
+          >
+            To get started with traces, you will need to setup tracing in your
+            application. Phoenix uses OpenTelemetry to collect traces and has
+            various integrations with orchestration frameworks, SDKs, and
+            languages. To get started, consult the documentation.
+          </p>
+          <ExternalLink href="https://docs.arize.com/phoenix/tracing/how-to-tracing">
+            View tracing documentation
+          </ExternalLink>
+        </View>
+      </Dialog>
+    );
+  };
+  return (
+    <tbody className="is-empty">
+      <tr>
+        <td
+          colSpan={100}
+          css={(theme) => css`
+            text-align: center;
+            padding: ${theme.spacing.margin24}px ${theme.spacing.margin24}px !important;
+          `}
+        >
+          <Flex direction="column" gap="size-200" alignItems="center">
+            No traces found for this project
+            <Button
+              variant="default"
+              icon={<Icon svg={<Icons.PlayCircleOutline />} />}
+              onClick={onGettingStartedClick}
+            >
+              Get Started
+            </Button>
+          </Flex>
+        </td>
+      </tr>
+      <DialogContainer onDismiss={() => setDialog(null)}>
+        {dialog}
+      </DialogContainer>
+    </tbody>
+  );
+}
diff --git a/app/src/pages/project/SpansTable.tsx b/app/src/pages/project/SpansTable.tsx
index 853ea5ced6..589b0d3009 100644
--- a/app/src/pages/project/SpansTable.tsx
+++ b/app/src/pages/project/SpansTable.tsx
@@ -38,6 +38,7 @@ import {
 } from "./__generated__/SpansTable_spans.graphql";
 import { SpansTableSpansQuery } from "./__generated__/SpansTableSpansQuery.graphql";
 import { EvaluationLabel } from "./EvaluationLabel";
+import { ProjectTableEmpty } from "./ProjectTableEmpty";
 import { RetrievalEvaluationLabel } from "./RetrievalEvaluationLabel";
 import { SpanColumnSelector } from "./SpanColumnSelector";
 import { SpanFilterConditionField } from "./SpanFilterConditionField";
@@ -462,7 +463,7 @@ export function SpansTable(props: SpansTableProps) {
             ))}
           </thead>
           {isEmpty ? (
-            <TableEmpty />
+            <ProjectTableEmpty />
           ) : (
             <tbody>
               {rows.map((row) => {
diff --git a/app/src/pages/project/TracesTable.tsx b/app/src/pages/project/TracesTable.tsx
index 3e15fecee5..9a3b031648 100644
--- a/app/src/pages/project/TracesTable.tsx
+++ b/app/src/pages/project/TracesTable.tsx
@@ -28,7 +28,6 @@ import { Link } from "@phoenix/components/Link";
 import { TextCell } from "@phoenix/components/table";
 import { IndeterminateCheckboxCell } from "@phoenix/components/table/IndeterminateCheckboxCell";
 import { selectableTableCSS } from "@phoenix/components/table/styles";
-import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 import { TableExpandButton } from "@phoenix/components/table/TableExpandButton";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
@@ -45,6 +44,7 @@ import {
 } from "./__generated__/TracesTable_spans.graphql";
 import { TracesTableQuery } from "./__generated__/TracesTableQuery.graphql";
 import { EvaluationLabel } from "./EvaluationLabel";
+import { ProjectTableEmpty } from "./ProjectTableEmpty";
 import { RetrievalEvaluationLabel } from "./RetrievalEvaluationLabel";
 import { SpanColumnSelector } from "./SpanColumnSelector";
 import { SpanFilterConditionField } from "./SpanFilterConditionField";
@@ -582,7 +582,7 @@ export function TracesTable(props: TracesTableProps) {
             ))}
           </thead>
           {isEmpty ? (
-            <TableEmpty />
+            <ProjectTableEmpty />
           ) : (
             <tbody>
               {rows.map((row) => {

From cbbd70ca24390f989b31eaf44161f2411fd94c7e Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 29 Jul 2024 12:57:52 -0600
Subject: [PATCH 2/3] cleanup

---
 app/src/pages/project/ProjectTableEmpty.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/pages/project/ProjectTableEmpty.tsx b/app/src/pages/project/ProjectTableEmpty.tsx
index d4cf430aab..b19e21f659 100644
--- a/app/src/pages/project/ProjectTableEmpty.tsx
+++ b/app/src/pages/project/ProjectTableEmpty.tsx
@@ -8,8 +8,6 @@ import {
   Flex,
   Icon,
   Icons,
-  TabPane,
-  Tabs,
   View,
 } from "@arizeai/components";
 

From 28387815f4a9eca2e3661840c2361263baff36c9 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 29 Jul 2024 14:02:52 -0600
Subject: [PATCH 3/3] WIP

---
 app/src/pages/project/SpansTable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/pages/project/SpansTable.tsx b/app/src/pages/project/SpansTable.tsx
index 589b0d3009..8380ceb9c6 100644
--- a/app/src/pages/project/SpansTable.tsx
+++ b/app/src/pages/project/SpansTable.tsx
@@ -23,7 +23,6 @@ import { Flex, Icon, Icons, View } from "@arizeai/components";
 import { Link } from "@phoenix/components/Link";
 import { IndeterminateCheckboxCell } from "@phoenix/components/table/IndeterminateCheckboxCell";
 import { selectableTableCSS } from "@phoenix/components/table/styles";
-import { TableEmpty } from "@phoenix/components/table/TableEmpty";
 import { TextCell } from "@phoenix/components/table/TextCell";
 import { TimestampCell } from "@phoenix/components/table/TimestampCell";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";