From e7d86785912e9f0b148e330d3480096148341a2f Mon Sep 17 00:00:00 2001
From: Din <dinmukhamed.mailibay@gmail.com>
Date: Tue, 12 Nov 2024 11:34:52 -0800
Subject: [PATCH] fix the manual add datapoint dialog

---
 .../datasets/[datasetId]/datapoints/route.ts  |  4 ++--
 .../dataset/manual-add-datapoint-dialog.tsx   | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/app/api/projects/[projectId]/datasets/[datasetId]/datapoints/route.ts b/frontend/app/api/projects/[projectId]/datasets/[datasetId]/datapoints/route.ts
index 8853667e..e4c022b2 100644
--- a/frontend/app/api/projects/[projectId]/datasets/[datasetId]/datapoints/route.ts
+++ b/frontend/app/api/projects/[projectId]/datasets/[datasetId]/datapoints/route.ts
@@ -32,7 +32,7 @@ const CreateDatapointsSchema = z.object({
   datapoints: z.array(z.object({
     data: z.unknown(),
     target: z.any().optional(),
-    metadata: z.record(z.any()).optional(),
+    metadata: z.any().optional(),
   })),
   sourceSpanId: z.string().optional(),
 });
@@ -49,7 +49,7 @@ export async function POST(
   const body = await req.json();
 
   // Validate request body
-  const parseResult = CreateDatapointsSchema.required().safeParse(body);
+  const parseResult = CreateDatapointsSchema.safeParse(body);
   if (!parseResult.success) {
     return new Response(
       JSON.stringify({
diff --git a/frontend/components/dataset/manual-add-datapoint-dialog.tsx b/frontend/components/dataset/manual-add-datapoint-dialog.tsx
index 7965ac36..c61e68c5 100644
--- a/frontend/components/dataset/manual-add-datapoint-dialog.tsx
+++ b/frontend/components/dataset/manual-add-datapoint-dialog.tsx
@@ -31,6 +31,15 @@ export default function ManualAddDatapointDialog({
   const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState(DEFAULT_DATA);
 
+  const isValidJson = useCallback(() => {
+    try {
+      const parsed = JSON.parse(data);
+      return parsed.data;
+    } catch (e) {
+      return false;
+    }
+  }, [data]);
+
   const showError = useCallback((message: string) => {
     toast({
       title: 'Add datapoint error',
@@ -49,14 +58,14 @@ export default function ManualAddDatapointDialog({
         {
           method: 'POST',
           body: JSON.stringify({
-            datapoints: [JSON.parse(data)]
+            datapoints: [JSON.parse(data)],
           }),
           cache: 'no-cache'
         }
       );
 
       if (res.status != 200) {
-        showError('Error adding datapoint');
+        showError((await res.json())['details']);
         setIsLoading(false);
         return;
       }
@@ -94,9 +103,14 @@ export default function ManualAddDatapointDialog({
         <div className="border rounded-md max-h-[300px] overflow-y-auto">
           <CodeEditor value={data} onChange={setData} language="json" />
         </div>
+        {!isValidJson() && (
+          <div className="text-red-500">
+            Please enter a valid JSON map with a &dquote;data&dquote; field
+          </div>
+        )}
         <DialogFooter className="mt-4">
           <Button
-            disabled={isLoading}
+            disabled={isLoading || !isValidJson()}
             onClick={async () => await addDatapoint()}
           >
             {isLoading && <Loader2 className="animate-spin h-4 w-4 mr-2" />}