delete datapoints, use body (#943)

Author: dinmukhamedm

frontend/app/api/projects/[projectId]/datasets/[datasetId]/datapoints/route.ts

@@ -66,15 +66,18 @@ export async function POST(
   }
 }
 
+// Note: this endpoint allows a body in a DELETE request, which is not standard
+// but fits our purposes: (1) this is an internal API, (2) passing many
+// datapoint IDs in the URL may break
 export async function DELETE(
   req: NextRequest,
   props: { params: Promise<{ projectId: string; datasetId: string }> }
 ): Promise<Response> {
   const params = await props.params;
 
   try {
-    const searchParams = req.nextUrl.searchParams;
-    const datapointIds = searchParams.get("datapointIds")?.split(",");
+    const body = await req.json();
+    const datapointIds = body.datapointIds;
 
     if (!datapointIds) {
       return new Response("At least one Datapoint ID is required", { status: 400 });

frontend/components/dataset/dataset.tsx

@@ -121,12 +121,15 @@ export default function Dataset({ dataset, enableDownloadParquet, publicApiBaseU
     async (datapointIds: string[]) => {
       try {
         const response = await fetch(
-          `/api/projects/${projectId}/datasets/${dataset.id}/datapoints` + `?datapointIds=${datapointIds.join(",")}`,
+          `/api/projects/${projectId}/datasets/${dataset.id}/datapoints`,
           {
             method: "DELETE",
             headers: {
               "Content-Type": "application/json",
             },
+            body: JSON.stringify({
+              datapointIds,
+            }),
           }
         );
         if (!response.ok) {