easy_ml 0.1.3 → 0.2.0.pre.rc1

data/app/frontend/mockData.ts

@@ -0,0 +1,272 @@
+import type { Model, RetrainingJob, RetrainingRun, Dataset, Prediction, Feature, FeatureGroup } from './types';
+
+// Helper function to generate dates
+const daysAgo = (days: number) => {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date.toISOString();
+};
+
+export const mockDatasets: Dataset[] = [
+  {
+    id: 1,
+    name: 'Customer Churn Dataset',
+    description: 'Historical customer data for churn prediction',
+    columns: [
+      {
+        name: 'usage_days',
+        type: 'numeric',
+        description: 'Number of days customer has used the product',
+        statistics: {
+          mean: 145.7,
+          median: 130,
+          min: 1,
+          max: 365,
+          nullCount: 0
+        }
+      },
+      {
+        name: 'total_spend',
+        type: 'numeric',
+        description: 'Total customer spend in USD',
+        statistics: {
+          mean: 487.32,
+          median: 425.50,
+          min: 0,
+          max: 2500.00,
+          nullCount: 1250
+        }
+      },
+      {
+        name: 'support_tickets',
+        type: 'numeric',
+        description: 'Number of support tickets opened',
+        statistics: {
+          mean: 2.3,
+          median: 1,
+          min: 0,
+          max: 15,
+          nullCount: 3750
+        }
+      },
+      {
+        name: 'subscription_tier',
+        type: 'categorical',
+        description: 'Customer subscription level',
+        statistics: {
+          uniqueCount: 3,
+          nullCount: 125
+        }
+      },
+      {
+        name: 'last_login',
+        type: 'datetime',
+        description: 'Last time the customer logged in',
+        statistics: {
+          nullCount: 5000
+        }
+      }
+    ],
+    sampleData: [
+      {
+        usage_days: 234,
+        total_spend: 567.89,
+        support_tickets: 1,
+        subscription_tier: 'premium',
+        last_login: '2024-03-01'
+      },
+      {
+        usage_days: 45,
+        total_spend: null,
+        support_tickets: null,
+        subscription_tier: 'basic',
+        last_login: null
+      }
+    ],
+    rowCount: 25000,
+    updatedAt: '2024-03-10T12:00:00Z'
+  }
+];
+
+export const mockModels: Model[] = [
+  {
+    id: 1,
+    name: 'Customer Churn Predictor',
+    modelType: 'classification',
+    status: 'completed',
+    deploymentStatus: 'inference',
+    deployed: true,
+    datasetId: 1,
+    configuration: {
+      algorithm: 'xgboost',
+      features: ['usage_days', 'total_spend', 'support_tickets'],
+      objective: 'binary:logistic',
+      metrics: ['accuracy', 'f1']
+    },
+    version: '2.1.0',
+    rootDir: '/models/churn_predictor',
+    file: { path: 'model.joblib' },
+    createdAt: daysAgo(30),
+    updatedAt: daysAgo(0)
+  }
+];
+
+export const mockRetrainingJobs: RetrainingJob[] = [
+  {
+    id: 1,
+    model: 'Customer Churn Predictor',
+    frequency: 'daily',
+    at: 2,
+    evaluator: {
+      metric: 'f1_score',
+      threshold: 0.85,
+      direction: 'maximize'
+    },
+    tunerConfig: {
+      trials: 10,
+      metrics: ['f1_score'],
+      parameters: {
+        max_depth: { min: 3, max: 10 },
+        learning_rate: { min: 0.01, max: 0.1 }
+      }
+    },
+    tuningFrequency: 'weekly',
+    lastTuningAt: daysAgo(7),
+    active: true,
+    status: 'completed',
+    lastRunAt: daysAgo(1),
+    lockedAt: null,
+    createdAt: daysAgo(30),
+    updatedAt: daysAgo(0)
+  }
+];
+
+export const mockRetrainingRuns: RetrainingRun[] = [
+  {
+    id: 1,
+    modelId: 1,
+    retrainingJobId: 1,
+    tunerJobId: null,
+    status: 'completed',
+    metricValue: 0.89,
+    threshold: 0.85,
+    thresholdDirection: 'maximize',
+    shoulddeploy: true,
+    startedAt: daysAgo(1),
+    completedAt: daysAgo(1),
+    errorMessage: null,
+    metadata: {
+      metrics: {
+        accuracy: 0.92,
+        precision: 0.88,
+        recall: 0.90,
+        f1: 0.89
+      },
+      parameters: {
+        max_depth: 6,
+        learning_rate: 0.05
+      }
+    },
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1)
+  },
+  {
+    id: 2,
+    modelId: 1,
+    retrainingJobId: 1,
+    tunerJobId: 1,
+    status: 'completed',
+    metricValue: 0.86,
+    threshold: 0.85,
+    thresholdDirection: 'maximize',
+    shoulddeploy: true,
+    startedAt: daysAgo(2),
+    completedAt: daysAgo(2),
+    errorMessage: null,
+    metadata: {
+      metrics: {
+        accuracy: 0.90,
+        precision: 0.85,
+        recall: 0.87,
+        f1: 0.86
+      },
+      parameters: {
+        max_depth: 5,
+        learning_rate: 0.03
+      }
+    },
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2)
+  },
+  {
+    id: 3,
+    modelId: 1,
+    retrainingJobId: 1,
+    tunerJobId: null,
+    status: 'failed',
+    metricValue: null,
+    threshold: 0.85,
+    thresholdDirection: 'maximize',
+    shoulddeploy: false,
+    startedAt: daysAgo(3),
+    completedAt: daysAgo(3),
+    errorMessage: 'Training failed due to insufficient memory',
+    metadata: null,
+    createdAt: daysAgo(3),
+    updatedAt: daysAgo(3)
+  },
+  {
+    id: 4,
+    modelId: 1,
+    retrainingJobId: 1,
+    tunerJobId: null,
+    status: 'completed',
+    metricValue: 0.83,
+    threshold: 0.85,
+    thresholdDirection: 'maximize',
+    shoulddeploy: false,
+    startedAt: daysAgo(4),
+    completedAt: daysAgo(4),
+    errorMessage: null,
+    metadata: {
+      metrics: {
+        accuracy: 0.87,
+        precision: 0.82,
+        recall: 0.84,
+        f1: 0.83
+      },
+      parameters: {
+        max_depth: 4,
+        learning_rate: 0.02
+      }
+    },
+    createdAt: daysAgo(4),
+    updatedAt: daysAgo(4)
+  }
+];
+
+export const mockFeatures: Feature[] = [
+  {
+    id: 1,
+    name: 'Normalize state',
+    description: 'Turn state names into 2 letter state abbreviations',
+    groupId: 1,
+    testDatasetId: 1,
+    inputColumns: ["state"],
+    outputColumns: ["state"],
+    code: "",
+    createdAt: daysAgo(30),
+    updatedAt: daysAgo(0)
+  }
+];
+
+export const mockFeatureGroups: FeatureGroup[] = [
+  {
+    id: 1,
+    name: 'Customer Churn',
+    description: 'Features for customer churn dataset',
+    features: mockFeatures,
+    createdAt: daysAgo(30),
+    updatedAt: daysAgo(0)
+  }
+];

data/app/frontend/pages/DatasetDetailsPage.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useCallback } from 'react';
+import { usePage, router } from '@inertiajs/react';
+import { Settings } from 'lucide-react';
+import { isEqual } from 'lodash';
+import { DatasetPreview } from '../components/DatasetPreview';
+import { ColumnConfigModal } from '../components/dataset/ColumnConfigModal';
+import type { Dataset, Column } from '../types/dataset';
+import type { PreprocessingConstants } from '../types';
+
+interface Props {
+  dataset: Dataset;
+  constants: PreprocessingConstants;
+}
+
+export default function DatasetDetailsPage({ dataset, constants }: Props) {
+  const [showColumnConfig, setShowColumnConfig] = useState(false);
+  const [currentDataset, setCurrentDataset] = useState<Dataset>(dataset);
+  const { rootPath } = usePage().props;
+
+  const onSave = useCallback((updatedDataset: Dataset) => {
+    // Find dataset-level changes
+    const datasetChanges = Object.entries(updatedDataset).reduce((acc, [key, value]) => {
+      if (key !== 'columns' && key !== 'features' && !isEqual(currentDataset[key as keyof Dataset], value)) {
+        acc[key as keyof Dataset] = value;
+      }
+      return acc;
+    }, {} as Partial<Dataset>);
+
+    // Find column changes
+    const columnChanges = updatedDataset.columns.reduce((acc, newColumn) => {
+      const oldColumn = currentDataset.columns.find(c => c.id === newColumn.id);
+      
+      if (!oldColumn || !isEqual(oldColumn, newColumn)) {
+        const changedFields = Object.entries(newColumn).reduce((fields, [key, value]) => {
+          if (!oldColumn || !isEqual(oldColumn[key as keyof Column], value)) {
+            fields[key] = value;
+          }
+          return fields;
+        }, {} as Record<string, any>);
+
+        if (Object.keys(changedFields).length > 0) {
+          acc[newColumn.id] = {
+            ...changedFields,
+            id: newColumn.id
+          };
+        }
+      }
+      return acc;
+    }, {} as Record<number, Record<string, any>>);
+
+    // Format features for nested attributes
+    const transformChanges = updatedDataset.features?.map((feature, index) => ({
+      id: feature.id,
+      name: feature.name,
+      feature_class: feature.feature_class,
+      feature_position: index,
+      _destroy: feature._destroy
+    }));
+
+    // Only make the API call if there are actual changes
+    if (Object.keys(datasetChanges).length > 0 || 
+        Object.keys(columnChanges).length > 0 || 
+        !isEqual(currentDataset.features, updatedDataset.features)) {
+      router.patch(`${rootPath}/datasets/${dataset.id}`, {
+        dataset: {
+          ...datasetChanges,
+          columns_attributes: columnChanges,
+          features_attributes: transformChanges
+        }
+      }, {
+        preserveState: true,
+        preserveScroll: true
+      });
+    }
+
+    // Update local state
+    setCurrentDataset(updatedDataset);
+  }, [currentDataset, dataset.id, rootPath]);
+
+  return (
+    <div className="p-8 space-y-6">
+      <div className="flex justify-end">
+        <button
+          onClick={() => setShowColumnConfig(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
+        >
+          <Settings className="w-4 h-4" />
+          Configure Columns
+        </button>
+      </div>
+
+      <DatasetPreview dataset={currentDataset} />
+
+      <ColumnConfigModal
+        isOpen={showColumnConfig}
+        onClose={() => setShowColumnConfig(false)}
+        initialDataset={currentDataset}
+        constants={constants}
+        onSave={onSave}
+      />
+    </div>
+  );
+}

data/app/frontend/pages/DatasetsPage.tsx

@@ -0,0 +1,261 @@
+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 { EmptyState } from '../components/EmptyState';
+import { SearchInput } from '../components/SearchInput';
+import { Pagination } from '../components/Pagination';
+import { Dataset, DatasetWorkflowStatus, Column } 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)
+  const { rootPath } = usePage().props;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [expandedErrors, setExpandedErrors] = useState<number[]>([]);
+
+  const filteredDatasets = useMemo(() => {
+    return datasets.filter(dataset =>
+      dataset.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      dataset.description.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [datasets, searchQuery]);
+
+  const totalPages = Math.ceil(filteredDatasets.length / ITEMS_PER_PAGE);
+  const paginatedDatasets = filteredDatasets.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  const handleDelete = (datasetId: number) => {
+    if (confirm('Are you sure you want to delete this dataset?')) {
+      router.delete(`${rootPath}/datasets/${datasetId}`);
+    }
+  };
+
+  useEffect(() => {
+    let pollInterval: number | undefined;
+
+    const isAnyAnalyzing = datasets.some(d => d.workflow_status === 'analyzing');
+
+    if (isAnyAnalyzing) {
+      pollInterval = window.setInterval(() => {
+        router.get(window.location.href, {}, {
+          preserveScroll: true,
+          preserveState: true,
+          only: ['datasets']
+        });
+      }, 2000);
+    }
+
+    return () => {
+      if (pollInterval) {
+        window.clearInterval(pollInterval);
+      }
+    };
+  }, [datasets]);
+
+  const toggleError = (id: number) => {
+    setExpandedErrors(prev =>
+      prev.includes(id)
+        ? prev.filter(expandedId => expandedId !== id)
+        : [...prev, id]
+    );
+  };
+
+  if (datasets.length === 0) {
+    return (
+      <div className="p-8">
+        <EmptyState
+          icon={Database}
+          title="Create your first dataset"
+          description="Create a dataset to start training your machine learning models"
+          actionLabel="Create Dataset"
+          onAction={() => { router.visit(`${rootPath}/datasets/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">Datasets</h2>
+            <SearchInput
+              value={searchQuery}
+              onChange={setSearchQuery}
+              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>
+
+        {paginatedDatasets.length === 0 ? (
+          <div className="text-center py-12 bg-white rounded-lg shadow">
+            <Database className="mx-auto h-12 w-12 text-gray-400" />
+            <h3 className="mt-2 text-sm font-medium text-gray-900">No datasets found</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              No datasets match your search criteria. Try adjusting your search or create a new dataset.
+            </p>
+            <div className="mt-6">
+              <Link
+                href={`${rootPath}/datasets/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 Dataset
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {paginatedDatasets.map((dataset) => (
+                <div
+                  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>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={setCurrentPage}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}