easy_ml 0.2.0.pre.rc71 → 0.2.0.pre.rc75

data/app/frontend/components/models/DownloadModelModal.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { FileDown, FileJson, Database, ArrowRight } from 'lucide-react';
+import { router, usePage } from '@inertiajs/react';
+
+interface DownloadModelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  modelId: number;
+}
+
+export function DownloadModelModal({ isOpen, onClose, modelId }: DownloadModelModalProps) {
+  const { rootPath } = usePage().props;
+  const [selectedOption, setSelectedOption] = useState<'model' | 'both' | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleDownload = async () => {
+    if (!selectedOption) return;
+    
+    const includeDataset = selectedOption === 'both';
+    window.location.href = `${rootPath}/models/${modelId}/download?include_dataset=${includeDataset}`;
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-gray-900">Download Configuration</h3>
+          <div className="p-2 bg-blue-50 rounded-lg">
+            <FileDown className="w-5 h-5 text-blue-600" />
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <button
+            onClick={() => setSelectedOption('model')}
+            className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+              selectedOption === 'model'
+                ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium text-gray-900">Model Only</div>
+                <div className="text-sm text-gray-500">Download model configuration without dataset details</div>
+              </div>
+              <FileJson className={`w-5 h-5 ${selectedOption === 'model' ? 'text-blue-600' : 'text-gray-400'}`} />
+            </div>
+          </button>
+
+          <button
+            onClick={() => setSelectedOption('both')}
+            className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+              selectedOption === 'both'
+                ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+            }`}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium text-gray-900">Model + Dataset</div>
+                <div className="text-sm text-gray-500">Download complete configuration including dataset details</div>
+              </div>
+              <Database className={`w-5 h-5 ${selectedOption === 'both' ? 'text-blue-600' : 'text-gray-400'}`} />
+            </div>
+          </button>
+        </div>
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDownload}
+            disabled={!selectedOption}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed inline-flex items-center gap-2"
+          >
+            Download
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/models/UploadModelModal.tsx

@@ -0,0 +1,212 @@
+import React, { useState, useRef } from 'react';
+import { FileUp, FileJson, Database, Upload, ArrowRight } from 'lucide-react';
+import { usePage, router } from '@inertiajs/react';
+import { useInertiaForm } from 'use-inertia-form';
+import { useDropzone } from 'react-dropzone';
+import { SearchableSelect } from '../SearchableSelect';
+
+interface UploadModelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  modelId?: number;
+  dataset_id?: number;
+}
+
+interface UploadForm {
+  config: File | null;
+  dataset_id: string;
+}
+
+interface PageProps {
+  rootPath: string;
+  datasets: Pick<Dataset, 'id' | 'name' | 'num_rows'>[];
+}
+
+export function UploadModelModal({ isOpen, onClose, modelId, dataset_id }: UploadModelModalProps) {
+  const { rootPath, datasets } = usePage<PageProps>().props;
+  const [selectedOption, setSelectedOption] = useState<'model' | 'both' | null>(dataset_id ? 'model' : null);
+  
+  const { data, setData, post, processing, errors } = useInertiaForm<UploadForm>({
+    config: null,
+    dataset_id: dataset_id ? dataset_id.toString() : '',
+  });
+
+  const onDrop = (acceptedFiles: File[]) => {
+    const file = acceptedFiles[0];
+    if (file) {
+      setData('config', file);
+    }
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'application/json': ['.json']
+    },
+    multiple: false
+  });
+
+  const canUpload = data.config && (dataset_id || (selectedOption && (
+    selectedOption === 'both' || (selectedOption === 'model' && data.dataset_id)
+  )));
+
+  const handleUpload = () => {
+    if (!canUpload) return;
+
+    const formData = new FormData();
+    if (data.config) {
+      formData.append('config', data.config);
+    }
+    
+    // When dataset_id prop is present, we're in model-only mode
+    if (dataset_id) {
+      formData.append('include_dataset', 'false');
+      formData.append('dataset_id', dataset_id.toString());
+    } else {
+      // Otherwise, use the selected option and dataset_id from form
+      formData.append('include_dataset', (selectedOption === 'both').toString());
+      if (selectedOption === 'model' && data.dataset_id) {
+        formData.append('dataset_id', data.dataset_id);
+      }
+    }
+
+    // Close modal immediately
+    onClose();
+
+    // Determine the correct endpoint based on whether we're updating or creating
+    const endpoint = modelId 
+      ? `${rootPath}/models/${modelId}/upload`
+      : `${rootPath}/models/upload`;
+
+    // Post the data and handle the response
+    post(endpoint, formData, {
+      preserveScroll: false,
+      onSuccess: () => {
+        // Force a full page refresh to get the latest data
+        window.location.href = window.location.href;
+      },
+      onError: () => {
+        // If there's an error, reopen the modal to show the error state
+        onClose();
+      }
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-lg font-semibold text-gray-900">Upload Configuration</h3>
+          <div className="p-2 bg-blue-50 rounded-lg">
+            <FileUp className="w-5 h-5 text-blue-600" />
+          </div>
+        </div>
+
+        {!dataset_id && (
+          <div className="space-y-3">
+            <button
+              onClick={() => {
+                setSelectedOption('model');
+                setData('dataset_id', '');
+              }}
+              className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+                selectedOption === 'model'
+                  ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                  : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="font-medium text-gray-900">Model Only</div>
+                  <div className="text-sm text-gray-500">Upload model configuration and select a dataset</div>
+                </div>
+                <FileJson className={`w-5 h-5 ${selectedOption === 'model' ? 'text-blue-600' : 'text-gray-400'}`} />
+              </div>
+            </button>
+
+            <button
+              onClick={() => {
+                setSelectedOption('both');
+                setData('dataset_id', '');
+              }}
+              className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 ${
+                selectedOption === 'both'
+                  ? 'bg-blue-50 border-2 border-blue-500 ring-2 ring-blue-200'
+                  : 'bg-white border-2 border-gray-200 hover:border-blue-200'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="font-medium text-gray-900">Model + Dataset</div>
+                  <div className="text-sm text-gray-500">Upload and validate both model and dataset configurations</div>
+                </div>
+                <Database className={`w-5 h-5 ${selectedOption === 'both' ? 'text-blue-600' : 'text-gray-400'}`} />
+              </div>
+            </button>
+          </div>
+        )}
+
+        {selectedOption === 'model' && !dataset_id && (
+          <div className="mt-4">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Select Dataset
+            </label>
+            <SearchableSelect
+              options={datasets.map(dataset => ({
+                value: dataset.id,
+                label: dataset.name,
+                description: dataset.num_rows ? `${dataset.num_rows.toLocaleString()} rows` : undefined
+              }))}
+              value={data.dataset_id ? parseInt(data.dataset_id) : null}
+              onChange={(value) => setData('dataset_id', value ? value.toString() : '')}
+              placeholder="Select a dataset"
+            />
+            {errors.dataset_id && (
+              <p className="mt-1 text-sm text-red-600">{errors.dataset_id}</p>
+            )}
+          </div>
+        )}
+
+        {(selectedOption || dataset_id) && (
+          <div className="mt-4">
+            <div
+              {...getRootProps()}
+              className={`w-full px-4 py-3 rounded-lg text-left transition-all duration-200 border-2 border-dashed cursor-pointer
+                ${data.config || isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`}
+            >
+              <input {...getInputProps()} />
+              <div className="flex items-center justify-center gap-2 text-sm">
+                <Upload className={`w-4 h-4 ${data.config || isDragActive ? 'text-blue-600' : 'text-gray-400'}`} />
+                <span className={data.config || isDragActive ? 'text-blue-600' : 'text-gray-500'}>
+                  {isDragActive ? 'Drop the file here' : data.config ? data.config.name : 'Click or drag to select configuration file'}
+                </span>
+              </div>
+            </div>
+            {errors.config && (
+              <p className="mt-1 text-sm text-red-600">{errors.config}</p>
+            )}
+          </div>
+        )}
+
+        <div className="mt-6 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleUpload}
+            disabled={!canUpload || processing}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed inline-flex items-center gap-2"
+          >
+            {processing ? 'Uploading...' : 'Upload'}
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/models/index.ts

@@ -0,0 +1,2 @@
+export { DownloadModelModal } from './DownloadModelModal';
+export { UploadModelModal } from './UploadModelModal';

data/app/frontend/pages/DatasetsPage.tsx

@@ -1,36 +1,20 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { Link, usePage, router } from '@inertiajs/react';
-import { Database, Plus, Trash2, ExternalLink, Loader2, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Database, Plus, Upload } from 'lucide-react';
 import { EmptyState } from '../components/EmptyState';
 import { SearchInput } from '../components/SearchInput';
 import { Pagination } from '../components/Pagination';
-import { Dataset, DatasetWorkflowStatus, Column } from "@types/dataset";
+import { DatasetCard } from '../components/DatasetCard';
+import { UploadDatasetButton } from '../components/datasets/UploadDatasetButton';
+import { Dataset } from "@types/dataset";
+
 interface Props {
   datasets: Dataset[];
 }
 
 const ITEMS_PER_PAGE = 6;
 
-const STATUS_STYLES: Record<DatasetWorkflowStatus, { bg: string; text: string; icon: React.ReactNode }> = {
-  analyzing: {
-    bg: 'bg-blue-100',
-    text: 'text-blue-800',
-    icon: <Loader2 className="w-4 h-4 animate-spin" />
-  },
-  ready: {
-    bg: 'bg-green-100',
-    text: 'text-green-800',
-    icon: null
-  },
-  failed: {
-    bg: 'bg-red-100',
-    text: 'text-red-800',
-    icon: <AlertCircle className="w-4 h-4" />
-  },
-};
-
-export default function DatasetsPage({ datasets, constants }: Props) {
-  console.log(datasets)
+export default function DatasetsPage({ datasets }: Props) {
   const { rootPath } = usePage().props;
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
@@ -55,6 +39,17 @@ export default function DatasetsPage({ datasets, constants }: Props) {
     }
   };
 
+  const handleRefresh = (datasetId: number) => {
+    router.post(`${rootPath}/datasets/${datasetId}/refresh`);
+  };
+
+  const handleAbort = (datasetId: number) => {
+    router.post(`${rootPath}/datasets/${datasetId}/abort`, {}, {
+      preserveScroll: true,
+      preserveState: true
+    });
+  };
+
   useEffect(() => {
     let pollInterval: number | undefined;
 
@@ -111,13 +106,16 @@ export default function DatasetsPage({ datasets, constants }: Props) {
               placeholder="Search datasets..."
             />
           </div>
-          <Link
-            href={`${rootPath}/datasets/new`}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <Plus className="w-4 h-4" />
-            New Dataset
-          </Link>
+          <div className="flex gap-3">
+            <UploadDatasetButton />
+            <Link
+              href={`${rootPath}/datasets/new`}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <Plus className="w-4 h-4" />
+              New Dataset
+            </Link>
+          </div>
         </div>
 
         {paginatedDatasets.length === 0 ? (
@@ -141,108 +139,16 @@ export default function DatasetsPage({ datasets, constants }: Props) {
           <>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {paginatedDatasets.map((dataset) => (
-                <div
+                <DatasetCard
                   key={dataset.id}
-                  className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
-                >
-                  <div className="flex justify-between items-start mb-4">
-                    <div className="flex items-start gap-3">
-                      <Database className="w-5 h-5 text-blue-600 mt-1" />
-                      <div>
-                        <div className="flex items-center gap-2">
-                          <h3 className="text-lg font-semibold text-gray-900">
-                            {dataset.name}
-                          </h3>
-                          <div className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_STYLES[dataset.workflow_status].bg} ${STATUS_STYLES[dataset.workflow_status].text}`}>
-                            {STATUS_STYLES[dataset.workflow_status].icon}
-                            <span>{dataset.workflow_status.charAt(0).toUpperCase() + dataset.workflow_status.slice(1)}</span>
-                          </div>
-                        </div>
-                        <p className="text-sm text-gray-500 mt-1">
-                          {dataset.description}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="flex gap-2">
-                      <Link
-                        href={`${rootPath}/datasets/${dataset.id}`}
-                        className={`transition-colors ${
-                          dataset.workflow_status === 'analyzing'
-                            ? 'text-gray-300 cursor-not-allowed pointer-events-none'
-                            : 'text-gray-400 hover:text-blue-600'
-                        }`}
-                        title={dataset.workflow_status === 'analyzing' ? 'Dataset is being analyzed' : 'View details'}
-                      >
-                        <ExternalLink className="w-5 h-5" />
-                      </Link>
-                      <button
-                        className="text-gray-400 hover:text-red-600 transition-colors"
-                        title="Delete dataset"
-                        onClick={() => handleDelete(dataset.id)}
-                      >
-                        <Trash2 className="w-5 h-5" />
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-4 mt-4">
-                    <div>
-                      <span className="text-sm text-gray-500">Columns</span>
-                      <p className="text-sm font-medium text-gray-900">
-                        {dataset.columns.length} columns
-                      </p>
-                    </div>
-                    <div>
-                      <span className="text-sm text-gray-500">Rows</span>
-                      <p className="text-sm font-medium text-gray-900">
-                        {dataset.num_rows.toLocaleString()}
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="mt-4 pt-4 border-t border-gray-100">
-                    <div className="flex flex-wrap gap-2">
-                      {dataset.columns.slice(0, 3).map((column: Column) => (
-                        <span
-                          key={column.name}
-                          className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
-                        >
-                          {column.name}
-                        </span>
-                      ))}
-                      {dataset.columns.length > 3 && (
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                          +{dataset.columns.length - 3} more
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  {dataset.workflow_status === 'failed' && dataset.stacktrace && (
-                    <div className="mt-4 pt-4 border-t border-gray-100">
-                      <button
-                        onClick={() => toggleError(dataset.id)}
-                        className="flex items-center gap-2 text-sm text-red-600 hover:text-red-700"
-                      >
-                        <AlertCircle className="w-4 h-4" />
-                        <span>View Error Details</span>
-                        {expandedErrors.includes(dataset.id) ? (
-                          <ChevronUp className="w-4 h-4" />
-                        ) : (
-                          <ChevronDown className="w-4 h-4" />
-                        )}
-                      </button>
-                      {expandedErrors.includes(dataset.id) && (
-                        <div className="mt-2 p-3 bg-red-50 rounded-md">
-                          <pre className="text-xs text-red-700 whitespace-pre-wrap font-mono">
-                            {dataset.stacktrace}
-                          </pre>
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                </div>
+                  dataset={dataset}
+                  rootPath={rootPath}
+                  onDelete={handleDelete}
+                  onRefresh={handleRefresh}
+                  onAbort={handleAbort}
+                  isErrorExpanded={expandedErrors.includes(dataset.id)}
+                  onToggleError={toggleError}
+                />
               ))}
             </div>
 

data/app/frontend/pages/DatasourcesPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { Link, usePage, router } from '@inertiajs/react';
-import { HardDrive, Plus, Trash2, Settings, RefreshCw, ChevronDown, ChevronUp, AlertCircle } from 'lucide-react';
+import { HardDrive, Plus, Trash2, Settings, RefreshCw, ChevronDown, ChevronUp, AlertCircle, XCircle } from 'lucide-react';
 import { EmptyState } from '../components/EmptyState';
 import { SearchInput } from '../components/SearchInput';
 import { Pagination } from '../components/Pagination';
@@ -62,6 +62,17 @@ export default function DatasourcesPage({ datasources }: { datasources: Datasour
     }
   };
 
+  const handleAbort = async (id: number) => {
+    try {
+      await router.post(`${rootPath}/datasources/${id}/abort`, {}, {
+        preserveScroll: true,
+        preserveState: true
+      });
+    } catch (error) {
+      console.error('Failed to abort datasource sync:', error);
+    }
+  };
+
   const formatLastSyncedAt = (lastSyncedAt: string) => {
     if (lastSyncedAt === 'Not Synced') return lastSyncedAt;
     
@@ -178,7 +189,7 @@ export default function DatasourcesPage({ datasources }: { datasources: Datasour
                       </div>
                     </div>
                     <div className="flex gap-2">
-                    <button
+                      <button
                         onClick={() => handleSync(datasource.id)}
                         disabled={datasource.is_syncing}
                         className={`text-gray-400 hover:text-blue-600 transition-colors ${
@@ -188,6 +199,15 @@ export default function DatasourcesPage({ datasources }: { datasources: Datasour
                       >
                         <RefreshCw className="w-5 h-5" />
                       </button>
+                      {datasource.is_syncing && (
+                        <button
+                          onClick={() => handleAbort(datasource.id)}
+                          className="text-gray-400 hover:text-red-600 transition-colors"
+                          title="Abort sync"
+                        >
+                          <XCircle className="w-5 h-5" />
+                        </button>
+                      )}
                       <Link
                         href={`${rootPath}/datasources/${datasource.id}/edit`}
                         className="text-gray-400 hover:text-blue-600 transition-colors"

data/app/frontend/pages/ModelsPage.tsx

@@ -1,17 +1,26 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { Brain, Plus, Trash2 } from 'lucide-react';
+import { Brain, Plus, Upload } from 'lucide-react';
 import { ModelCard } from '../components/ModelCard';
 import { EmptyState } from '../components/EmptyState';
 import { SearchInput } from '../components/SearchInput';
 import { Pagination } from '../components/Pagination';
 import { router } from '@inertiajs/react';
+import type { Model, Dataset } from '../types';
+import { UploadModelModal } from '../components/models';
 
 const ITEMS_PER_PAGE = 6;
 
-export default function ModelsPage({ rootPath, models }) {
+interface ModelsPageProps {
+  rootPath: string;
+  models: Array<Model>;
+  datasets: Array<Dataset>;
+}
+
+export default function ModelsPage({ rootPath, models, datasets }: ModelsPageProps) {
   const [selectedModelId, setSelectedModelId] = useState<number | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
+  const [showUploadModal, setShowUploadModal] = useState(false);
 
   const filteredModels = useMemo(() => {
     return models.filter(model =>
@@ -60,13 +69,23 @@ export default function ModelsPage({ rootPath, models }) {
               placeholder="Search models..."
             />
           </div>
-          <button
-            onClick={() => router.visit(`${rootPath}/models/new`)}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <Plus className="w-4 h-4" />
-            New Model
-          </button>
+          <div className="flex gap-3">
+            <button
+              onClick={() => setShowUploadModal(true)}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50"
+              title="Import model"
+            >
+              <Upload className="w-4 h-4" />
+              Import
+            </button>
+            <button
+              onClick={() => router.visit(`${rootPath}/models/new`)}
+              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+              <Plus className="w-4 h-4" />
+              New Model
+            </button>
+          </div>
         </div>
 
         {paginatedModels.length === 0 ? (
@@ -91,11 +110,12 @@ export default function ModelsPage({ rootPath, models }) {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               {paginatedModels.map((model) => (
                 <ModelCard
-                  rootPath={rootPath}
                   key={model.id}
                   initialModel={model}
-                  onViewDetails={setSelectedModelId}
+                  onViewDetails={() => setSelectedModelId(model.id)}
                   handleDelete={handleDelete}
+                  rootPath={rootPath}
+                  datasets={datasets}
                 />
               ))}
             </div>
@@ -110,6 +130,12 @@ export default function ModelsPage({ rootPath, models }) {
           </>
         )}
       </div>
+
+      <UploadModelModal
+        isOpen={showUploadModal}
+        onClose={() => setShowUploadModal(false)}
+        datasets={datasets}
+      />
     </div>
   );
 }

data/app/frontend/types/dataset.ts

@@ -1,5 +1,4 @@
-import type { Datasource } from "./datasource";
-import type { SplitterConfig } from '../components/dataset/splitters/types';
+export type { Datasource } from "./datasource";
 
 export type DatasetWorkflowStatus = "analyzing" | "ready" | "failed" | "locked";
 export type DatasetStatus = "training" | "inference" | "retired";

data/app/frontend/types.ts

@@ -1,4 +1,4 @@
-import { Dataset } from './dataset';
+export type { Dataset } from './types/dataset';
 
 export type ModelStatus = 'success' | 'failed';
 export type DeploymentStatus = 'training' | 'inference' | 'retired';