feat: add gradient start/end to projects table

app/schema.graphql

@@ -538,6 +538,8 @@ type Point3D {
 type Project implements Node {
   id: GlobalID!
   name: String!
+  gradientStartColor: String!
+  gradientEndColor: String!
   startTime: DateTime
   endTime: DateTime
   recordCount(timeRange: TimeRange): Int!

app/src/pages/projects/ProjectsPage.tsx

@@ -72,6 +72,8 @@ export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
             project: node {
               id
               name
+              gradientStartColor
+              gradientEndColor
               traceCount(timeRange: $timeRange)
               endTime
               latencyMsP50: latencyMsQuantile(
@@ -155,7 +157,13 @@ export function ProjectsPageContent({ timeRange }: { timeRange: TimeRange }) {
   );
 }
 
-function ProjectIcon() {
+function ProjectIcon({
+  gradientStartColor,
+  gradientEndColor,
+}: {
+  gradientStartColor: string;
+  gradientEndColor: string;
+}) {
   return (
     <div
       css={css`
@@ -164,8 +172,8 @@ function ProjectIcon() {
         height: 32px;
         background: linear-gradient(
           136.27deg,
-          rgb(91, 219, 255) 14.03%,
-          rgb(28, 118, 252) 84.38%
+          ${gradientStartColor} 14.03%,
+          ${gradientEndColor} 84.38%
         );
         flex-shrink: 0;
       `}
@@ -182,7 +190,14 @@ function ProjectItem({
   canDelete,
   onProjectDelete,
 }: ProjectItemProps) {
-  const { endTime, traceCount, tokenCountTotal, latencyMsP50 } = project;
+  const {
+    endTime,
+    traceCount,
+    tokenCountTotal,
+    latencyMsP50,
+    gradientStartColor,
+    gradientEndColor,
+  } = project;
   const lastUpdatedText = useMemo(() => {
     if (endTime) {
       return `Last updated  ${formatDistance(new Date(endTime), new Date(), { addSuffix: true })}`;
@@ -209,7 +224,10 @@ function ProjectItem({
     >
       <Flex direction="row" justifyContent="space-between" alignItems="start">
         <Flex direction="row" gap="size-100" alignItems="center" minWidth={0}>
-          <ProjectIcon />
+          <ProjectIcon
+            gradientStartColor={gradientStartColor}
+            gradientEndColor={gradientEndColor}
+          />
           <Flex direction="column" minWidth={0}>
             <Heading
               level={2}

src/phoenix/db/migrations/versions/cf03bd6bae1d_init.py

@@ -32,6 +32,18 @@ def upgrade() -> None:
         # TODO does the uniqueness constraint need to be named
         sa.Column("name", sa.String, nullable=False, unique=True),
         sa.Column("description", sa.String, nullable=True),
+        sa.Column(
+            "gradient_start_color",
+            sa.String,
+            nullable=False,
+            server_default=sa.text("'#5bdbff'"),
+        ),
+        sa.Column(
+            "gradient_end_color",
+            sa.String,
+            nullable=False,
+            server_default=sa.text("'#1c76fc'"),
+        ),
         sa.Column(
             "created_at",
             sa.TIMESTAMP(timezone=True),

src/phoenix/db/models.py

@@ -10,6 +10,7 @@
     Float,
     ForeignKey,
     MetaData,
+    String,
     TypeDecorator,
     UniqueConstraint,
     func,
@@ -93,6 +94,15 @@ class Project(Base):
     id: Mapped[int] = mapped_column(primary_key=True)
     name: Mapped[str]
     description: Mapped[Optional[str]]
+    gradient_start_color: Mapped[str] = mapped_column(
+        String,
+        server_default=func.text("'#5bdbff'"),
+    )
+
+    gradient_end_color: Mapped[str] = mapped_column(
+        String,
+        server_default=func.text("'#1c76fc'"),
+    )
     created_at: Mapped[datetime] = mapped_column(UtcTimeStamp, server_default=func.now())
     updated_at: Mapped[datetime] = mapped_column(
         UtcTimeStamp, server_default=func.now(), onupdate=func.now()

src/phoenix/server/api/schema.py

@@ -71,6 +71,8 @@ async def projects(
             Project(
                 id_attr=project.id,
                 name=project.name,
+                gradient_start_color=project.gradient_start_color,
+                gradient_end_color=project.gradient_end_color,
                 project=info.context.traces.get_project(project.name),  # type: ignore
             )
             for project in projects
@@ -109,6 +111,8 @@ async def node(self, id: GlobalID, info: Info[Context, None]) -> Node:
             return Project(
                 id_attr=project.id,
                 name=project.name,
+                gradient_start_color=project.gradient_start_color,
+                gradient_end_color=project.gradient_end_color,
                 project=info.context.traces.get_project(project.name),  # type: ignore
             )
         raise Exception(f"Unknown node type: {type_name}")

src/phoenix/server/api/types/Project.py

@@ -36,6 +36,8 @@
 @strawberry.type
 class Project(Node):
     name: str
+    gradient_start_color: str
+    gradient_end_color: str
     project: strawberry.Private[CoreProject]
 
     @strawberry.field