Delete datasets

ui/src/app/api/datasets/delete/route.tsx

@@ -0,0 +1,24 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import { getDatasetsRoot } from '@/app/api/datasets/utils';
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json();
+    const { name } = body;
+    let datasetsPath = await getDatasetsRoot();
+    let datasetPath = path.join(datasetsPath, name);
+
+    // if folder doesnt exist, ignore
+    if (!fs.existsSync(datasetPath)) {
+      return NextResponse.json({ success: true });
+    }
+
+    // delete it and return success
+    fs.rmdirSync(datasetPath, { recursive: true });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json({ error: 'Failed to create dataset' }, { status: 500 });
+  }
+}

ui/src/app/datasets/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import Card from '@/components/Card';
 import { Modal } from '@/components/Modal';
 import Link from 'next/link';
 import { TextInput } from '@/components/formInputs';
 import useDatasetList from '@/hooks/useDatasetList';
+import { Button } from '@headlessui/react';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { openConfirm } from '@/components/ConfirmModal';
 
 export default function Datasets() {
   const { datasets, status, refreshDatasets } = useDatasetList();
@@ -13,36 +15,70 @@ export default function Datasets() {
   const [isNewDatasetModalOpen, setIsNewDatasetModalOpen] = useState(false);
   return (
     <>
-      <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-xl font-bold mb-8">Datasets</h1>
-          </div>
-          <div>
-            <button
-              onClick={() => {
-                setIsNewDatasetModalOpen(true);
-              }}
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-            >
-              New Dataset
-            </button>
-          </div>
+      <div className="absolute top-0 left-0 w-full h-12  dark:bg-gray-900 shadow-sm z-10 flex items-center px-2">
+        <div>
+          <h1 className="text-lg">Datasets</h1>
         </div>
-        <Card title={`Datasets (${datasets.length})`}>
-          {status === 'loading' && <p>Loading...</p>}
-          {status === 'error' && <p>Error fetching datasets</p>}
-          {status === 'success' && (
-            <div className="space-y-1">
-              {datasets.length === 0 && <p>No datasets found</p>}
-              {datasets.map((dataset: string) => (
-                <Link href={`/datasets/${dataset}`} className="bg-gray-800 hover:bg-gray-700 py-2 px-4 rounded-lg cursor-pointer block" key={dataset}>
-                  {dataset}
-                </Link>
-              ))}
-            </div>
-          )}
-        </Card>
+        <div className="flex-1"></div>
+        <div>
+          <Button
+            className="text-gray-200 bg-slate-600 px-3 py-1 rounded-md"
+            onClick={() => setIsNewDatasetModalOpen(true)}
+          >
+            New Dataset
+          </Button>
+        </div>
+      </div>
+      <div className="pt-16 px-4 absolute top-0 left-0 w-full h-full overflow-auto">
+        {status === 'loading' && <p>Loading...</p>}
+        {status === 'error' && <p>Error fetching datasets</p>}
+        {status === 'success' && (
+          <div className="space-y-1">
+            {datasets.length === 0 && <p>No datasets found</p>}
+            {datasets.map((dataset: string) => (
+              <div className="flex justify-between bg-gray-900 hover:bg-gray-800 transition-colors" key={dataset}>
+                <div>
+                  <Link href={`/datasets/${dataset}`} className="cursor-pointer block px-4 py-2" key={dataset}>
+                    {dataset}
+                  </Link>
+                </div>
+                <div className="flex-1"></div>
+                <div>
+                  <button
+                    className="text-gray-200 hover:bg-red-600 px-2 py-2 mt-1 mr-1 rounded-full transition-colors"
+                    onClick={() => {
+                      openConfirm({
+                        title: 'Delete Dataset',
+                        message: `Are you sure you want to delete the dataset "${dataset}"? This action cannot be undone.`,
+                        type: 'warning',
+                        confirmText: 'Delete',
+                        onConfirm: () => {
+                          fetch('/api/datasets/delete', {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json',
+                            },
+                            body: JSON.stringify({ name: dataset }),
+                          })
+                            .then(res => res.json())
+                            .then(data => {
+                              console.log('Dataset deleted:', data);
+                              refreshDatasets();
+                            })
+                            .catch(error => {
+                              console.error('Error deleting dataset:', error);
+                            });
+                        },
+                      });
+                    }}
+                  >
+                    <FaRegTrashAlt />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
       <Modal
         isOpen={isNewDatasetModalOpen}

ui/src/components/ConfirmModal.tsx

@@ -1,8 +1,8 @@
 'use client';
+import { useState, useEffect } from 'react';
 import { createGlobalState } from 'react-global-hooks';
-import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'
-import { FaExclamationTriangle, FaInfo } from "react-icons/fa";
-
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { FaExclamationTriangle, FaInfo } from 'react-icons/fa';
 
 export interface ConfirmState {
   title: string;
@@ -15,24 +15,41 @@ export interface ConfirmState {
 
 export const confirmstate = createGlobalState<ConfirmState | null>(null);
 
+export const openConfirm = (confirmProps: ConfirmState) => {
+  confirmstate.set(confirmProps);
+};
 
 export default function ConfirmModal() {
-
   const [confirm, setConfirm] = confirmstate.use();
-  const open = confirm !== null;
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (confirm) {
+      setIsOpen(true);
+    }
+  }, [confirm]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // use timeout to allow the dialog to close before resetting the state
+      setTimeout(() => {
+        setConfirm(null);
+      }, 500);
+    }
+  }, [isOpen]);
 
   const onCancel = () => {
     if (confirm?.onCancel) {
       confirm.onCancel();
     }
-    setConfirm(null);
+    setIsOpen(false);
   };
 
   const onConfirm = () => {
     if (confirm?.onConfirm) {
       confirm.onConfirm();
     }
-    setConfirm(null);
+    setIsOpen(false);
   };
 
   let Icon = FaExclamationTriangle;
@@ -46,45 +63,61 @@ export default function ConfirmModal() {
   // Color mapping for background colors
   const getBgColor = () => {
     switch (color) {
-      case 'danger': return 'bg-red-500';
-      case 'warning': return 'bg-yellow-500';
-      case 'info': return 'bg-blue-500';
-      default: return 'bg-red-500';
+      case 'danger':
+        return 'bg-red-500';
+      case 'warning':
+        return 'bg-yellow-500';
+      case 'info':
+        return 'bg-blue-500';
+      default:
+        return 'bg-red-500';
     }
   };
 
   // Color mapping for text colors
   const getTextColor = () => {
     switch (color) {
-      case 'danger': return 'text-red-950';
-      case 'warning': return 'text-yellow-950';
-      case 'info': return 'text-blue-950';
-      default: return 'text-red-950';
+      case 'danger':
+        return 'text-red-950';
+      case 'warning':
+        return 'text-yellow-950';
+      case 'info':
+        return 'text-blue-950';
+      default:
+        return 'text-red-950';
     }
   };
 
   // Color mapping for titles
   const getTitleColor = () => {
     switch (color) {
-      case 'danger': return 'text-red-500';
-      case 'warning': return 'text-yellow-500';
-      case 'info': return 'text-blue-500';
-      default: return 'text-red-500';
+      case 'danger':
+        return 'text-red-500';
+      case 'warning':
+        return 'text-yellow-500';
+      case 'info':
+        return 'text-blue-500';
+      default:
+        return 'text-red-500';
     }
   };
 
   // Button background color mapping
   const getButtonBgColor = () => {
     switch (color) {
-      case 'danger': return 'bg-red-700 hover:bg-red-500';
-      case 'warning': return 'bg-yellow-700 hover:bg-yellow-500';
-      case 'info': return 'bg-blue-700 hover:bg-blue-500';
-      default: return 'bg-red-700 hover:bg-red-500';
+      case 'danger':
+        return 'bg-red-700 hover:bg-red-500';
+      case 'warning':
+        return 'bg-yellow-700 hover:bg-yellow-500';
+      case 'info':
+        return 'bg-blue-700 hover:bg-blue-500';
+      default:
+        return 'bg-red-700 hover:bg-red-500';
     }
   };
 
   return (
-    <Dialog open={open} onClose={onCancel} className="relative z-10">
+    <Dialog open={isOpen} onClose={onCancel} className="relative z-10">
       <DialogBackdrop
         transition
         className="fixed inset-0 bg-gray-900/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
@@ -98,7 +131,9 @@ export default function ConfirmModal() {
           >
             <div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
               <div className="sm:flex sm:items-start">
-                <div className={`mx-auto flex size-12 shrink-0 items-center justify-center rounded-full ${getBgColor()} sm:mx-0 sm:size-10`}>
+                <div
+                  className={`mx-auto flex size-12 shrink-0 items-center justify-center rounded-full ${getBgColor()} sm:mx-0 sm:size-10`}
+                >
                   <Icon aria-hidden="true" className={`size-6 ${getTextColor()}`} />
                 </div>
                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
@@ -106,9 +141,7 @@ export default function ConfirmModal() {
                     {confirm?.title}
                   </DialogTitle>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-200">
-                      {confirm?.message}
-                    </p>
+                    <p className="text-sm text-gray-200">{confirm?.message}</p>
                   </div>
                 </div>
               </div>
@@ -116,7 +149,7 @@ export default function ConfirmModal() {
             <div className="bg-gray-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
               <button
                 type="button"
-                onClick={onCancel}
+                onClick={onConfirm}
                 className={`inline-flex w-full justify-center rounded-md ${getButtonBgColor()} px-3 py-2 text-sm font-semibold text-white shadow-xs sm:ml-3 sm:w-auto`}
               >
                 {confirm?.confirmText || 'Confirm'}
@@ -124,7 +157,7 @@ export default function ConfirmModal() {
               <button
                 type="button"
                 data-autofocus
-                onClick={onConfirm}
+                onClick={onCancel}
                 className="mt-3 inline-flex w-full justify-center rounded-md bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-200 hover:bg-gray-800 sm:mt-0 sm:w-auto ring-0"
               >
                 Cancel
@@ -135,4 +168,4 @@ export default function ConfirmModal() {
       </div>
     </Dialog>
   );
-}
+}