feat(ui): tracing getting started button

app/src/pages/project/ProjectTableEmpty.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode, useState } from "react";
+import { css } from "@emotion/react";
+
+import {
+  Button,
+  Dialog,
+  DialogContainer,
+  Flex,
+  Icon,
+  Icons,
+  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>
+  );
+}

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) => {

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) => {