easy_ml 0.1.4 → 0.2.0.pre.rc1

data/app/frontend/pages/DatasourceFormPage.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { router, usePage } from '@inertiajs/react';
+import { useInertiaForm } from 'use-inertia-form';
+import { SearchableSelect } from '../components/SearchableSelect';
+import type { Datasource, DatasourceFormProps } from '../types/datasource';
+
+export default function DatasourceFormPage({ datasource, constants }: DatasourceFormProps) {
+  const { rootPath } = usePage().props;
+  const isEditing = !!datasource;
+
+  const { data, setData, processing, errors } = useInertiaForm<{ datasource: Datasource }>({
+    datasource: {
+      name: datasource?.name ?? '',
+      datasource_type: datasource?.datasource_type ?? 's3',
+      s3_bucket: datasource?.s3_bucket ?? '',
+      s3_prefix: datasource?.s3_prefix ?? '',
+      s3_region: datasource?.s3_region ?? 'us-east-1',
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isEditing) {
+      router.patch(`${rootPath}/datasources/${datasource.id}`, data);
+    } else {
+      router.post(`${rootPath}/datasources`, data);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto py-8">
+      <div className="bg-white rounded-lg shadow-lg p-6">
+        <h2 className="text-xl font-semibold text-gray-900 mb-6">
+          {isEditing ? 'Edit Datasource' : 'New Datasource'}
+        </h2>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={data.datasource.name}
+              onChange={(e) => setData('datasource.name', e.target.value)}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 shadow-sm border-gray-300 border"
+              required
+            />
+            {errors.datasource?.name && (
+              <p className="mt-1 text-sm text-red-600">{errors.datasource.name}</p>
+            )}
+          </div>
+
+          {!isEditing && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Type
+              </label>
+              <SearchableSelect
+                options={constants.DATASOURCE_TYPES}
+                value={data.datasource.datasource_type}
+                onChange={(value) => setData('datasource.datasource_type', value)}
+                placeholder="Select datasource type"
+              />
+            </div>
+          )}
+
+          <div>
+            <label
+              htmlFor="s3_bucket"
+              className="block text-sm font-medium text-gray-700"
+            >
+              S3 Bucket
+            </label>
+            <input
+              type="text"
+              id="s3_bucket"
+              value={data.datasource.s3_bucket}
+              onChange={(e) => setData('datasource.s3_bucket', e.target.value)}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 shadow-sm border-gray-300 border"
+              required
+            />
+            {errors.datasource?.s3_bucket && (
+              <p className="mt-1 text-sm text-red-600">{errors.datasource.s3_bucket}</p>
+            )}
+          </div>
+
+          <div>
+            <label
+              htmlFor="s3_prefix"
+              className="block text-sm font-medium text-gray-700"
+            >
+              S3 Prefix
+            </label>
+            <input
+              type="text"
+              id="s3_prefix"
+              value={data.datasource.s3_prefix}
+              onChange={(e) => setData('datasource.s3_prefix', e.target.value)}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 shadow-sm border-gray-300 border"
+              placeholder="data/raw/"
+            />
+            {errors.datasource?.s3_prefix && (
+              <p className="mt-1 text-sm text-red-600">{errors.datasource.s3_prefix}</p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              S3 Region
+            </label>
+            <SearchableSelect
+              options={constants.s3.S3_REGIONS}
+              value={data.datasource.s3_region}
+              onChange={(value) => setData('datasource.s3_region', value)}
+              placeholder="Select s3 region"
+            />
+            {errors.datasource?.s3_region && (
+              <p className="mt-1 text-sm text-red-600">{errors.datasource.s3_region}</p>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-3">
+            <button
+              type="button"
+              onClick={() => router.visit(`${rootPath}/datasources`)}
+              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={processing}
+              className="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"
+            >
+              {processing ? 'Saving...' : isEditing ? 'Save Changes' : 'Create Datasource'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+} 

data/app/frontend/pages/DatasourcesPage.tsx

@@ -0,0 +1,261 @@
+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 { EmptyState } from '../components/EmptyState';
+import { SearchInput } from '../components/SearchInput';
+import { Pagination } from '../components/Pagination';
+import type { Datasource } from '../types/datasource';
+import { Badge } from "@/components/ui/badge";
+
+const ITEMS_PER_PAGE = 6;
+
+export default function DatasourcesPage({ datasources }: { datasources: Datasource[] }) {
+  const { rootPath } = usePage().props;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [expandedErrors, setExpandedErrors] = useState<number[]>([]);
+
+  const filteredDatasources = useMemo(() => {
+    return datasources.filter(source =>
+      source.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      source.s3_bucket.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery, datasources]);
+
+  const totalPages = Math.ceil(filteredDatasources.length / ITEMS_PER_PAGE);
+  const paginatedDatasources = filteredDatasources.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  const handleDelete = (datasourceId: number) => {
+    if (confirm('Are you sure you want to delete this datasource? This action cannot be undone.')) {
+      router.delete(`${rootPath}/datasources/${datasourceId}`);
+    }
+  };
+
+  const toggleError = (id: number) => {
+    setExpandedErrors(prev =>
+      prev.includes(id)
+        ? prev.filter(expandedId => expandedId !== id)
+        : [...prev, id]
+    );
+  };
+
+  const handleSync = async (id: number) => {
+    try {
+      router.post(`${rootPath}/datasources/${id}/sync`, {}, {
+        preserveScroll: true, // Keeps the scroll position
+        preserveState: true,  // Keeps the form state
+        onSuccess: () => {
+          // The page will automatically refresh with new data
+        },
+        onError: () => {
+          // Handle error case if needed
+          console.error('Failed to sync datasource');
+        }
+      });
+    } catch (error) {
+      console.error('Failed to sync datasource:', error);
+    }
+  };
+
+  const formatLastSyncedAt = (lastSyncedAt: string) => {
+    if (lastSyncedAt === 'Not Synced') return lastSyncedAt;
+    
+    const date = new Date(lastSyncedAt);
+    return isNaN(date.getTime()) ? lastSyncedAt : date.toLocaleString();
+  };
+
+  useEffect(() => {
+    let pollInterval: number | undefined;
+
+    // Check if any datasource is syncing
+    const isAnySyncing = datasources.some(d => d.is_syncing);
+
+    if (isAnySyncing) {
+      // Start polling every 5 seconds
+      pollInterval = window.setInterval(() => {
+        router.get(window.location.href, {}, {
+          preserveScroll: true,
+          preserveState: true,
+          only: ['datasources']
+        });
+      }, 2000);
+    }
+
+    // Cleanup function
+    return () => {
+      if (pollInterval) {
+        window.clearInterval(pollInterval);
+      }
+    };
+  }, [datasources]);
+
+  if (datasources.length === 0) {
+    return (
+      <div className="p-8">
+        <EmptyState
+          icon={HardDrive}
+          title="Connect your first data source"
+          description="Connect to your data sources to start creating datasets and training models"
+          actionLabel="Add Datasource"
+          onAction={() => { router.visit(`${rootPath}/datasources/new`) }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-4">
+            <h2 className="text-xl font-semibold text-gray-900">Datasources</h2>
+            <SearchInput
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search datasources..."
+            />
+          </div>
+          <Link
+            href={`${rootPath}/datasources/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 Datasource
+          </Link>
+        </div>
+
+        {paginatedDatasources.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg shadow">
+            <HardDrive className="mx-auto h-12 w-12 text-gray-400" />
+            <h3 className="mt-2 text-sm font-medium text-gray-900">No datasources found</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              No datasources match your search criteria. Try adjusting your search or add a new datasource.
+            </p>
+            <div className="mt-6">
+              <Link
+                href={`${rootPath}/datasources/new`}
+                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                New Datasource
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {paginatedDatasources.map((datasource) => (
+                <div
+                  key={datasource.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">
+                      <HardDrive 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">
+                            {datasource.name}
+                          </h3>
+                          {datasource.is_syncing ? (
+                            <Badge variant="warning">syncing</Badge>
+                          ) : datasource.sync_error ? (
+                            <Badge variant="important">sync error</Badge>
+                          ) : datasource.last_synced_at !== 'Not Synced' ? (
+                            <Badge variant="success">synced</Badge>
+                          ) : (
+                            <Badge variant="warning">not synced</Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-gray-500 mt-1">
+                          s3://{datasource.s3_bucket}/{datasource.s3_prefix}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                    <button
+                        onClick={() => handleSync(datasource.id)}
+                        disabled={datasource.is_syncing}
+                        className={`text-gray-400 hover:text-blue-600 transition-colors ${
+                          datasource.is_syncing ? 'animate-spin' : ''
+                        }`}
+                        title="Sync datasource"
+                      >
+                        <RefreshCw className="w-5 h-5" />
+                      </button>
+                      <Link
+                        href={`${rootPath}/datasources/${datasource.id}/edit`}
+                        className="text-gray-400 hover:text-blue-600 transition-colors"
+                        title="Edit datasource"
+                      >
+                        <Settings className="w-5 h-5" />
+                      </Link>
+                      <button
+                        onClick={() => handleDelete(datasource.id)}
+                        className="text-gray-400 hover:text-red-600 transition-colors"
+                        title="Delete datasource"
+                      >
+                        <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">Region</span>
+                      <p className="text-sm font-medium text-gray-900">
+                        {datasource.s3_region}
+                      </p>
+                    </div>
+                    <div>
+                      <span className="text-sm text-gray-500">Last Sync</span>
+                      <p className="text-sm font-medium text-gray-900">
+                        {formatLastSyncedAt(datasource.last_synced_at)}
+                      </p>
+                    </div>
+                  </div>
+
+                  {datasource.sync_error && datasource.stacktrace && (
+                    <div className="mt-4 pt-4 border-t border-gray-100">
+                      <button
+                        onClick={() => toggleError(datasource.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(datasource.id) ? (
+                          <ChevronUp className="w-4 h-4" />
+                        ) : (
+                          <ChevronDown className="w-4 h-4" />
+                        )}
+                      </button>
+                      {expandedErrors.includes(datasource.id) && (
+                        <div className="mt-2 p-3 bg-red-50 rounded-md">
+                          <pre className="text-xs text-red-700 whitespace-pre-wrap font-mono">
+                            {datasource.stacktrace}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                </div>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={setCurrentPage}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

data/app/frontend/pages/EditModelPage.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { router, Link, usePage } from "@inertiajs/react";
+import { useInertiaForm } from "use-inertia-form";
+import { ArrowLeft, Brain } from 'lucide-react';
+import { ModelForm } from '../components/ModelForm';
+import { Model, Dataset } from '../types';
+
+interface ModelFormData {
+  model: Model;
+}
+
+interface PageProps {
+  model: Model;
+  datasets: Dataset[];
+  constants: {
+    modelTypes: string[];
+    tasks: string[];
+    objectives: string[];
+    metrics: string[];
+  };
+}
+
+export default function EditModelPage({ model, datasets, constants }: PageProps) {
+  return (
+    <div className="max-w-3xl mx-auto py-8">
+      <div className="bg-white rounded-lg shadow-lg">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-3">
+            <Brain className="w-6 h-6 text-blue-600" />
+            <h2 className="text-xl font-semibold text-gray-900">Edit Model</h2>
+          </div>
+        </div>
+
+        <div className="p-6">
+          <ModelForm
+            initialData={model}
+            datasets={datasets}
+            constants={constants}
+            isEditing={true}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/pages/EditTransformationPage.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+// import { useNavigate, useParams } from 'react-router-dom';
+import { Code2 } from 'lucide-react';
+import { mockDatasets, mockFeatureGroups } from '../mockData';
+import { FeatureForm } from '../components/features/FeatureForm';
+
+export default function EditFeaturePage() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  
+  const feature = mockFeatureGroups
+    .flatMap(g => g.features)
+    .find(t => t.id === Number(id));
+
+  if (!feature) {
+    return (
+      <div className="text-center py-12">
+        <h2 className="text-xl font-semibold text-gray-900">Feature not found</h2>
+      </div>
+    );
+  }
+
+  const handleSubmit = (data: any) => {
+    console.log('Updating feature:', data);
+    navigate('/features');
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="bg-white rounded-lg shadow-lg">
+        <div className="px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-3">
+            <Code2 className="w-6 h-6 text-blue-600" />
+            <h2 className="text-xl font-semibold text-gray-900">Edit Feature</h2>
+          </div>
+        </div>
+
+        <FeatureForm
+          datasets={mockDatasets}
+          groups={mockFeatureGroups}
+          initialData={{
+            name: feature.name,
+            description: feature.description,
+            groupId: feature.groupId,
+            testDatasetId: feature.testDatasetId,
+            inputColumns: feature.inputColumns,
+            outputColumns: feature.outputColumns,
+            code: feature.code
+          }}
+          onSubmit={handleSubmit}
+          onCancel={() => navigate('/features')}
+        />
+      </div>
+    </div>
+  );
+}

data/app/frontend/pages/ModelsPage.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Brain, Plus, Trash2 } 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';
+
+const ITEMS_PER_PAGE = 6;
+
+export default function ModelsPage({ rootPath, models }) {
+  const [selectedModelId, setSelectedModelId] = useState<number | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const filteredModels = useMemo(() => {
+    return models.filter(model =>
+      model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      model.model_type.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [searchQuery, models]);
+
+  const totalPages = Math.ceil(filteredModels.length / ITEMS_PER_PAGE);
+  const paginatedModels = filteredModels.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  const handleDelete = (modelId: number) => {
+    if (confirm('Are you sure you want to delete this model?')) {
+      router.delete(`${rootPath}/models/${modelId}`);
+    }
+  };
+
+  if (models.length === 0) {
+    return (
+      <div className="p-8">
+        <EmptyState
+          icon={Brain}
+          title="Create your first ML model"
+          description="Get started by creating a machine learning model. You can train models for classification, regression, and more."
+          actionLabel="Create Model"
+          onAction={() => {
+            router.visit(`${rootPath}/models/new`)
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-4">
+            <h2 className="text-xl font-semibold text-gray-900">Models</h2>
+            <SearchInput
+              value={searchQuery}
+              onChange={setSearchQuery}
+              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>
+
+        {paginatedModels.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg shadow">
+            <Brain className="mx-auto h-12 w-12 text-gray-400" />
+            <h3 className="mt-2 text-sm font-medium text-gray-900">No models found</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              No models match your search criteria. Try adjusting your search or create a new model.
+            </p>
+            <div className="mt-6">
+              <button
+                onClick={() => router.visit(`${rootPath}/models/new`)}
+                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                New Model
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <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}
+                  handleDelete={handleDelete}
+                />
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={setCurrentPage}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}