handle experiments without workflow

elpassion · Oct 10, 2024 · e841a32 · e841a32
1 parent 974aa2e
commit e841a32
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 21 deletions.
diff --git a/apps/api/lib/buildel_web/controllers/experiments/experiment_json.ex b/apps/api/lib/buildel_web/controllers/experiments/experiment_json.ex
@@ -14,15 +14,23 @@ defmodule BuildelWeb.ExperimentJSON do
       id: experiment.id,
       name: experiment.name,
       runs_count: experiment.runs_count,
-      pipeline: %{
-        id: experiment.pipeline.id,
-        name: experiment.pipeline.name
-      },
+      pipeline: map_pipeline(experiment.pipeline),
       dataset: %{
         id: experiment.dataset.id,
         name: experiment.dataset.name
       },
       created_at: experiment.inserted_at
     }
   end
+
+  defp map_pipeline(nil) do
+    nil
+  end
+
+  defp map_pipeline(%{"id": id, "name": name}) do
+    %{
+      id: id,
+      name: name
+    }
+  end
 end
diff --git a/apps/web-remix/app/api/experiments/experiments.contracts.ts b/apps/web-remix/app/api/experiments/experiments.contracts.ts
@@ -9,10 +9,12 @@ export const Experiment = z.object({
     id: z.union([z.number(), z.string()]),
     name: z.string(),
   }),
-  pipeline: z.object({
-    id: z.union([z.number(), z.string()]),
-    name: z.string(),
-  }),
+  pipeline: z
+    .object({
+      id: z.union([z.number(), z.string()]),
+      name: z.string(),
+    })
+    .nullable(),
   created_at: z.string(),
   name: z.string(),
 });

diff --git a/apps/web-remix/app/components/pages/experiments/ExperimentsList.tsx b/apps/web-remix/app/components/pages/experiments/ExperimentsList.tsx
@@ -22,6 +22,7 @@ import {
   CardTitle,
 } from '~/components/ui/card';
 import { useOrganizationId } from '~/hooks/useOrganizationId';
+import { cn } from '~/utils/cn';
 import { dayjs } from '~/utils/Dayjs';
 import { routes } from '~/utils/routes.utils';
 
@@ -57,15 +58,24 @@ export const ExperimentsList: React.FC<ExperimentsListProps> = ({ items }) => {
           There are no Experiments yet...
         </EmptyMessage>
       }
-      renderItem={(item) => (
-        <BasicLink to={routes.experiment(organizationId, item.id)}>
-          <ExperimentsListItem
-            data={item}
-            organizationId={organizationId}
-            onDelete={handleDelete}
-          />
-        </BasicLink>
-      )}
+      renderItem={(item) => {
+        const disabled = !item.pipeline;
+
+        return (
+          <BasicLink
+            to={!disabled ? routes.experiment(organizationId, item.id) : ''}
+            className={cn({ 'cursor-not-allowed opacity-50': disabled })}
+            aria-disabled={disabled}
+          >
+            <ExperimentsListItem
+              data={item}
+              organizationId={organizationId}
+              onDelete={handleDelete}
+              disabled={disabled}
+            />
+          </BasicLink>
+        );
+      }}
     />
   );
 };
@@ -74,11 +84,13 @@ interface ExperimentsListItemProps {
   data: IExperiment;
   organizationId: string;
   onDelete: (experiment: IExperiment) => void;
+  disabled?: boolean;
 }
 
 export const ExperimentsListItem: React.FC<ExperimentsListItemProps> = ({
   data,
   onDelete,
+  disabled,
 }) => {
   const deleteDataset = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -88,12 +100,19 @@ export const ExperimentsListItem: React.FC<ExperimentsListItemProps> = ({
   };
 
   return (
-    <Card>
+    <Card className={cn({ 'hover:border-input': disabled })}>
       <CardHeader className="max-w-full flex-row gap-2 items-center justify-between space-y-0">
-        <CardTitle className="line-clamp-2">{data.name}</CardTitle>
+        <CardTitle
+          className={cn('line-clamp-2', {
+            'group-hover:text-foreground': disabled,
+          })}
+        >
+          {data.name}
+        </CardTitle>
 
         <MenuDropdown>
           <MenuDropdownTrigger
+            disabled={disabled}
             className="w-8 h-8 p-0"
             onClick={(e) => {
               e.stopPropagation();
@@ -121,9 +140,9 @@ export const ExperimentsListItem: React.FC<ExperimentsListItemProps> = ({
             <CardContentColumnTitle>Workflow</CardContentColumnTitle>
             <CardContentColumnValue
               className="line-clamp-1"
-              title={data.pipeline.name}
+              title={data.pipeline?.name}
             >
-              {data.pipeline.name}
+              {data.pipeline?.name ? data.pipeline.name : 'N/A'}
             </CardContentColumnValue>
           </CardContentColumnWrapper>
 

diff --git a/apps/web-remix/app/components/pages/experiments/experiment/runs/loader.server.tsx b/apps/web-remix/app/components/pages/experiments/experiment/runs/loader.server.tsx
@@ -38,6 +38,13 @@ export async function loader(args: LoaderFunctionArgs) {
     const totalPages = Math.ceil(totalItems / per_page);
     const pagination = { page, per_page, search, totalItems, totalPages };
 
+    if (!experiment.data.pipeline) {
+      throw new Response(null, {
+        status: 404,
+        statusText: 'Not Found',
+      });
+    }
+
     return json({
       organizationId: params.organizationId,
       experimentId: params.experimentId,

diff --git a/apps/web-remix/app/components/pages/experiments/experiment/runs/page.tsx b/apps/web-remix/app/components/pages/experiments/experiment/runs/page.tsx
@@ -37,6 +37,8 @@ export function ExperimentPage() {
 
   useRevalidateOnInterval({ enabled: isRunning });
 
+  if (!experiment.pipeline) return null;
+
   return (
     <>
       <AppNavbar

diff --git a/apps/web-remix/app/components/pages/experiments/experiment/runs/run/loader.server.tsx b/apps/web-remix/app/components/pages/experiments/experiment/runs/run/loader.server.tsx
@@ -51,6 +51,13 @@ export async function loader(args: LoaderFunctionArgs) {
     const totalPages = Math.ceil(totalItems / per_page);
     const pagination = { page, per_page, search, totalItems, totalPages };
 
+    if (!experiment.data.pipeline) {
+      throw new Response(null, {
+        status: 404,
+        statusText: 'Not Found',
+      });
+    }
+
     return json({
       organizationId: params.organizationId,
       experimentId: params.experimentId,

diff --git a/apps/web-remix/app/components/pages/experiments/experiment/runs/run/page.tsx b/apps/web-remix/app/components/pages/experiments/experiment/runs/run/page.tsx
@@ -37,6 +37,8 @@ export function ExperimentRunPage() {
     enabled: experimentRun.status === 'running',
   });
 
+  if (!experiment.pipeline) return null;
+
   return (
     <>
       <AppNavbar