easy_ml 0.1.3 → 0.2.0.pre.rc1

data/app/frontend/components/dataset/splitters/types.ts

@@ -0,0 +1,168 @@
+import type { ColumnType } from '../../../types/datasource';
+import type { Datasource } from '../types/datasource';
+
+export type NewDatasetFormProps = {
+    datasources: Datasource[];
+    constants: {
+        columns: ColumnType[];
+    };
+}
+export type SplitterType = 
+  | 'date'
+  | 'random'
+  | 'predefined'
+  | 'stratified'
+  | 'stratified_kfold'
+  | 'group_kfold'
+  | 'group_shuffle'
+  | 'leave_p_out';
+
+export interface DateSplitConfig {
+  date_column: string;
+  months_test: number;
+  months_valid: number;
+}
+
+export interface RandomSplitConfig {
+  train_ratio?: number;
+  test_ratio?: number;
+  valid_ratio?: number;
+  seed?: number;
+}
+
+export interface PredefinedSplitConfig {
+  train_files: string[];
+  test_files: string[];
+  valid_files: string[];
+}
+
+export interface ColumnConfig {
+  name: string;
+  type: string;
+}
+
+export interface PredefinedSplitConfig {
+  train_files: string[];
+  test_files: string[];
+  valid_files: string[];
+}
+
+export interface StratifiedSplitConfig {
+  stratify_column: string;
+  train_ratio: number;
+  test_ratio: number;
+  valid_ratio: number;
+}
+
+export interface KFoldConfig {
+  n_splits: number;
+  shuffle: boolean;
+  random_state?: number;
+}
+
+export interface LeavePOutConfig {
+  p: number;
+  shuffle: boolean;
+  random_state?: number;
+}
+
+export type SplitConfig = 
+  | DateSplitConfig
+  | PredefinedSplitConfig
+  | StratifiedSplitConfig
+  | KFoldConfig
+  | LeavePOutConfig
+  | Record<string, never>; // For random split
+
+export interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+// Validation functions for each splitter type
+export const validateDateSplitter = (config: DateSplitConfig): ValidationResult => {
+  if (!config.date_column) {
+    return { isValid: false, error: "Please select a date column" };
+  }
+  if (!config.months_test || config.months_test <= 0) {
+    return { isValid: false, error: "Test months must be greater than 0" };
+  }
+  if (!config.months_valid || config.months_valid <= 0) {
+    return { isValid: false, error: "Validation months must be greater than 0" };
+  }
+  return { isValid: true };
+};
+
+export const validateRandomSplitter = (config: RandomSplitConfig): ValidationResult => {
+  const total = (config.train_ratio ?? 0.6) + 
+                (config.test_ratio ?? 0.2) + 
+                (config.valid_ratio ?? 0.2);
+  
+  if (Math.abs(total - 1.0) >= 0.001) {
+    return { 
+      isValid: false, 
+      error: `Split ratios must sum to 1.0 (current sum: ${total.toFixed(2)})` 
+    };
+  }
+  return { isValid: true };
+};
+
+export const validatePredefinedSplitter = (config: PredefinedSplitConfig): ValidationResult => {
+  if (!config.files || config.files.length === 0) {
+    return { isValid: false, error: "Please select at least one file for splitting" };
+  }
+  return { isValid: true };
+};
+
+export const validateStratifiedSplitter = (config: StratifiedSplitConfig): ValidationResult => {
+  if (!config.stratify_column) {
+    return { isValid: false, error: "Please select a column to stratify on" };
+  }
+  
+  const total = (config.train_ratio ?? 0) + 
+                (config.test_ratio ?? 0) + 
+                (config.valid_ratio ?? 0);
+                
+  if (Math.abs(total - 1.0) >= 0.001) {
+    return { 
+      isValid: false, 
+      error: `Split ratios must sum to 1.0 (current sum: ${total.toFixed(2)})` 
+    };
+  }
+  return { isValid: true };
+};
+
+export const validateKFoldSplitter = (config: KFoldConfig): ValidationResult => {
+  if (!config.n_splits || config.n_splits <= 1) {
+    return { isValid: false, error: "Number of splits must be greater than 1" };
+  }
+  return { isValid: true };
+};
+
+export const validateLeavePOutSplitter = (config: LeavePOutConfig): ValidationResult => {
+  if (!config.p || config.p <= 0) {
+    return { isValid: false, error: "P value must be greater than 0" };
+  }
+  return { isValid: true };
+};
+
+// Main validation function
+export const validateSplitterConfig = (type: SplitterType, config: SplitConfig): ValidationResult => {
+  switch (type) {
+    case 'date':
+      return validateDateSplitter(config as DateSplitConfig);
+    case 'random':
+      return validateRandomSplitter(config as RandomSplitConfig);
+    case 'predefined':
+      return validatePredefinedSplitter(config as PredefinedSplitConfig);
+    case 'stratified':
+      return validateStratifiedSplitter(config as StratifiedSplitConfig);
+    case 'stratified_kfold':
+    case 'group_kfold':
+      return validateKFoldSplitter(config as KFoldConfig);
+    case 'leave_p_out':
+      return validateLeavePOutSplitter(config as LeavePOutConfig);
+    default:
+      return { isValid: false, error: "Invalid splitter type" };
+  }
+};

data/app/frontend/components/dataset/splitters/utils.ts

@@ -0,0 +1,53 @@
+import type { Column } from '../../types';
+
+export function getDateColumns(columns: Column[]): string[] {
+  return columns
+    .filter(col => col.type === 'datetime')
+    .map(col => col.name);
+}
+
+export function validateSplitConfig(type: string, config: any): string[] {
+  const errors: string[] = [];
+
+  switch (type) {
+    case 'date':
+      if (!config.dateColumn) {
+        errors.push('Date column is required');
+      }
+      if (config.monthsTest < 1) {
+        errors.push('Test set must be at least 1 month');
+      }
+      if (config.monthsValid < 1) {
+        errors.push('Validation set must be at least 1 month');
+      }
+      break;
+
+    case 'predefined':
+      if (!config.files?.length) {
+        errors.push('At least one file must be selected');
+      }
+      if (!config.files?.some(f => f.type === 'train')) {
+        errors.push('Training set file is required');
+      }
+      if (!config.files?.some(f => f.type === 'test')) {
+        errors.push('Test set file is required');
+      }
+      break;
+
+    case 'stratified':
+    case 'stratified_kfold':
+      if (!config.targetColumn) {
+        errors.push('Target column is required');
+      }
+      break;
+
+    case 'group_kfold':
+    case 'group_shuffle':
+      if (!config.groupColumn) {
+        errors.push('Group column is required');
+      }
+      break;
+  }
+
+  return errors;
+}

data/app/frontend/components/features/CodeEditor.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { AlertCircle } from 'lucide-react';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language: string;
+}
+
+export function CodeEditor({ value, onChange, language }: CodeEditorProps) {
+  return (
+    <div className="space-y-4">
+      <div className="bg-gray-900 rounded-lg overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-2 bg-gray-800">
+          <span className="text-sm text-gray-400">Ruby Feature</span>
+          <span className="text-xs px-2 py-1 bg-gray-700 rounded text-gray-300">
+            {language}
+          </span>
+        </div>
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full h-64 p-4 bg-gray-900 text-gray-100 font-mono text-sm focus:outline-none"
+          placeholder={`def transform(df)\n  # Your feature code here\n  # Example:\n  # df["column"] = df["column"].map { |value| value.upcase }\n  df\nend`}
+          spellCheck={false}
+        />
+      </div>
+
+      <div className="bg-blue-50 rounded-lg p-4">
+        <div className="flex gap-2">
+          <AlertCircle className="w-5 h-5 text-blue-500 flex-shrink-0" />
+          <div className="text-sm text-blue-700">
+            <p className="font-medium mb-1">Feature Guidelines</p>
+            <ul className="list-disc pl-4 space-y-1">
+              <li>The function must be named 'feature'</li>
+              <li>It should accept a DataFrame as its only parameter</li>
+              <li>All operations should be performed on the DataFrame object</li>
+              <li>The function must return the modified DataFrame</li>
+              <li>Use standard Ruby syntax and DataFrame operations</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/features/DataPreview.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Play, AlertTriangle } from 'lucide-react';
+import type { Dataset } from '../../types';
+
+interface DataPreviewProps {
+  dataset: Dataset;
+  code: string;
+  inputColumns: string[];
+  outputColumns: string[];
+}
+
+export function DataPreview({ dataset, code, inputColumns, outputColumns }: DataPreviewProps) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [previewData, setPreviewData] = useState<Record<string, any>[] | null>(null);
+
+  const runFeature = () => {
+    setIsRunning(true);
+    setError(null);
+
+    // Simulate feature execution
+    setTimeout(() => {
+      try {
+        // In a real implementation, this would execute the Ruby code
+        // For now, we'll just show the original data
+        setPreviewData(dataset.sampleData);
+        setIsRunning(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+        setIsRunning(false);
+      }
+    }, 1000);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h4 className="text-sm font-medium text-gray-900">Data Preview</h4>
+        <button
+          onClick={runFeature}
+          disabled={isRunning}
+          className="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:opacity-50"
+        >
+          <Play className="w-4 h-4" />
+          {isRunning ? 'Running...' : 'Run Preview'}
+        </button>
+      </div>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="flex items-start gap-2">
+            <AlertTriangle className="w-5 h-5 text-red-500 mt-0.5" />
+            <div>
+              <h4 className="text-sm font-medium text-red-800">
+                Feature Error
+              </h4>
+              <pre className="mt-1 text-sm text-red-700 whitespace-pre-wrap font-mono">
+                {error}
+              </pre>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="border border-gray-200 rounded-lg overflow-hidden">
+        <div className="grid grid-cols-2 divide-x divide-gray-200">
+          <div>
+            <div className="px-4 py-2 bg-gray-50 border-b border-gray-200">
+              <h5 className="text-sm font-medium text-gray-700">Input Data</h5>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    {inputColumns.map((column) => (
+                      <th
+                        key={column}
+                        className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        {column}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {dataset.sampleData.map((row, i) => (
+                    <tr key={i}>
+                      {inputColumns.map((column) => (
+                        <td
+                          key={column}
+                          className="px-4 py-2 text-sm text-gray-900 whitespace-nowrap"
+                        >
+                          {String(row[column])}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div>
+            <div className="px-4 py-2 bg-gray-50 border-b border-gray-200">
+              <h5 className="text-sm font-medium text-gray-700">
+                {previewData ? 'Featureed Data' : 'Output Preview'}
+              </h5>
+            </div>
+            <div className="overflow-x-auto">
+              {previewData ? (
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      {outputColumns.map((column) => (
+                        <th
+                          key={column}
+                          className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        >
+                          {column}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {previewData.map((row, i) => (
+                      <tr key={i}>
+                        {outputColumns.map((column) => (
+                          <td
+                            key={column}
+                            className="px-4 py-2 text-sm text-gray-900 whitespace-nowrap"
+                          >
+                            {String(row[column])}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              ) : (
+                <div className="p-8 text-center text-sm text-gray-500">
+                  Run the feature to see the preview
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/features/FeatureCard.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+// import { Link } from 'react-router-dom';
+import { Code2, Settings, Trash2, FolderOpen } from 'lucide-react';
+import type { Feature, FeatureGroup } from '../../types';
+
+interface FeatureCardProps {
+  feature: Feature;
+  group: FeatureGroup;
+}
+
+export function FeatureCard({ feature, group }: FeatureCardProps) {
+  return (
+    <div 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">
+          <Code2 className="w-5 h-5 text-blue-600 mt-1" />
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">
+              {feature.name}
+            </h3>
+            <p className="text-sm text-gray-500 mt-1">
+              {feature.description}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Link
+            to={`/features/${feature.id}/edit`}
+            className="text-gray-400 hover:text-blue-600 transition-colors"
+            title="Edit feature"
+          >
+            <Settings className="w-5 h-5" />
+          </Link>
+          <button
+            className="text-gray-400 hover:text-red-600 transition-colors"
+            title="Delete feature"
+          >
+            <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">Input Columns</span>
+          <div className="flex flex-wrap gap-2 mt-1">
+            {feature.inputColumns.map((column) => (
+              <span
+                key={column}
+                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
+              >
+                {column}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div>
+          <span className="text-sm text-gray-500">Output Columns</span>
+          <div className="flex flex-wrap gap-2 mt-1">
+            {feature.outputColumns.map((column) => (
+              <span
+                key={column}
+                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+              >
+                {column}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-100">
+        <div className="flex items-center justify-between">
+          <Link
+            to={`/features/groups/${group.id}`}
+            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700"
+          >
+            <FolderOpen className="w-4 h-4" />
+            {group.name}
+          </Link>
+          <span className="text-sm text-gray-500">
+            Last updated {new Date(feature.updatedAt).toLocaleDateString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}