easy_ml 0.1.3 → 0.2.0.pre.rc1

data/app/frontend/components/dataset/SplitConfigurator.tsx

@@ -0,0 +1,120 @@
+import React, { Fragment } from 'react';
+import { Tab } from '@headlessui/react';
+import { Info } from 'lucide-react';
+import { SearchableSelect } from '../SearchableSelect';
+import { DateSplitter } from './splitters/DateSplitter';
+import { RandomSplitter } from './splitters/RandomSplitter';
+import { PredefinedSplitter } from './splitters/PredefinedSplitter';
+import { StratifiedSplitter } from './splitters/StratifiedSplitter';
+import { KFoldSplitter } from './splitters/KFoldSplitter';
+import { LeavePOutSplitter } from './splitters/LeavePOutSplitter';
+import { SPLITTER_OPTIONS, DEFAULT_CONFIGS } from './splitters/constants';
+import type { SplitterType, SplitConfig, ColumnConfig } from './splitters/types';
+
+interface SplitConfiguratorProps {
+  type: SplitterType;
+  splitter_attributes: SplitConfig;
+  columns: ColumnConfig[];
+  available_files: string[];
+  onChange: (type: SplitterType, attributes: SplitConfig) => void;
+}
+
+export function SplitConfigurator({ type, splitter_attributes, columns, available_files, onSplitterChange, onChange }: SplitConfiguratorProps) {
+  const dateColumns = columns.filter(col => col.type === 'datetime').map(col => col.name);
+
+  const handleTypeChange = (newType: SplitterType) => {
+    onChange(newType, DEFAULT_CONFIGS[newType]);
+  };
+
+  const handleSplitterChange = (type: SplitterType, newAttributes: SplitConfig) => {
+    onChange(type, newAttributes);
+  };
+
+  const renderSplitter = () => {
+    switch (type) {
+      case 'date':
+        return (
+          <DateSplitter
+            attributes={splitter_attributes}
+            columns={dateColumns}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      case 'random':
+        return (
+          <RandomSplitter
+            attributes={splitter_attributes}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      case 'predefined':
+        return (
+          <PredefinedSplitter
+            attributes={splitter_attributes}
+            available_files={available_files}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      case 'stratified':
+        return (
+          <StratifiedSplitter
+            attributes={splitter_attributes}
+            columns={columns}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      case 'stratified_kfold':
+      case 'group_kfold':
+        return (
+          <KFoldSplitter
+            attributes={splitter_attributes}
+            columns={columns}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      case 'group_shuffle':
+        return (
+          <StratifiedSplitter
+            attributes={splitter_attributes}
+            columns={columns}
+            onChange={(attrs) => handleSplitterChange(type, {
+              groupColumn: attrs.targetColumn,
+              testSize: attrs.testSize,
+              validSize: attrs.validSize
+            })}
+          />
+        );
+      case 'leave_p_out':
+        return (
+          <LeavePOutSplitter
+            attributes={splitter_attributes}
+            onChange={(attrs) => handleSplitterChange(type, attrs)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Split Type
+        </label>
+        <SearchableSelect
+          options={SPLITTER_OPTIONS}
+          value={type}
+          onChange={(value) => handleTypeChange(value as SplitterType)}
+        />
+      </div>
+
+      <div className="bg-gray-50 rounded-lg p-4">
+        {renderSplitter()}
+      </div>
+    </div>
+  );
+}
+
+export type { SplitterType };
+export type { ColumnConfig };

data/app/frontend/components/dataset/splitters/DateSplitter.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { SearchableSelect } from '../../SearchableSelect';
+import type { DateSplitConfig } from '../types';
+
+interface DateSplitterProps {
+  attributes: DateSplitConfig;
+  columns: string[];
+  onChange: (attributes: DateSplitConfig) => void;
+}
+
+export function DateSplitter({ attributes, columns, onChange }: DateSplitterProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label htmlFor="date_column" className="block text-sm font-medium text-gray-700">
+          Date Column
+        </label>
+        <SearchableSelect
+          id="date_column"
+          value={attributes.date_column}
+          options={columns.map(col => ({ value: col, label: col }))}
+          onChange={(value) => onChange({ ...attributes, date_column: value })}
+          placeholder="Select date column"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="months_test" className="block text-sm font-medium text-gray-700">
+            Test Months
+          </label>
+          <input
+            type="number"
+            id="months_test"
+            value={attributes.months_test}
+            onChange={(e) => onChange({ ...attributes, months_test: parseInt(e.target.value) })}
+            className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+            min="1"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="months_valid" className="block text-sm font-medium text-gray-700">
+            Validation Months
+          </label>
+          <input
+            type="number"
+            id="months_valid"
+            value={attributes.months_valid}
+            onChange={(e) => onChange({ ...attributes, months_valid: parseInt(e.target.value) })}
+            className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+            min="1"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/dataset/splitters/KFoldSplitter.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SearchableSelect } from '../../SearchableSelect';
+
+interface KFoldSplitterProps {
+  type: 'kfold' | 'stratified' | 'group';
+  targetColumn?: string;
+  groupColumn?: string;
+  nSplits: number;
+  columns: Array<{ name: string; type: string }>;
+  onChange: (config: {
+    targetColumn?: string;
+    groupColumn?: string;
+    nSplits: number;
+  }) => void;
+}
+
+export function KFoldSplitter({
+  type,
+  targetColumn,
+  groupColumn,
+  nSplits,
+  columns,
+  onChange
+}: KFoldSplitterProps) {
+  return (
+    <div className="space-y-4">
+      {(type === 'stratified' || type === 'group') && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {type === 'stratified' ? 'Target Column' : 'Group Column'}
+          </label>
+          <SearchableSelect
+            options={columns.map(col => ({
+              value: col.name,
+              label: col.name,
+              description: `Type: ${col.type}`
+            }))}
+            value={type === 'stratified' ? targetColumn : groupColumn}
+            onChange={(value) => onChange({
+              targetColumn: type === 'stratified' ? value as string : targetColumn,
+              groupColumn: type === 'group' ? value as string : groupColumn,
+              nSplits
+            })}
+            placeholder={`Select ${type === 'stratified' ? 'target' : 'group'} column...`}
+          />
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Number of Splits
+        </label>
+        <input
+          type="number"
+          min={2}
+          max={10}
+          value={nSplits}
+          onChange={(e) => onChange({
+            targetColumn,
+            groupColumn,
+            nSplits: parseInt(e.target.value) || 2
+          })}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/dataset/splitters/LeavePOutSplitter.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface LeavePOutSplitterProps {
+  p: number;
+  onChange: (p: number) => void;
+}
+
+export function LeavePOutSplitter({ p, onChange }: LeavePOutSplitterProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Number of samples to leave out (P)
+        </label>
+        <input
+          type="number"
+          min={1}
+          max={100}
+          value={p}
+          onChange={(e) => onChange(parseInt(e.target.value) || 1)}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+        <p className="mt-1 text-sm text-gray-500">
+          Each training set will have P samples removed, which form the test set.
+        </p>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/dataset/splitters/PredefinedSplitter.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { FileCheck } from 'lucide-react';
+import { SearchableSelect } from '../../SearchableSelect';
+
+interface FileConfig {
+  path: string;
+  type: 'train' | 'test' | 'valid';
+}
+
+interface PredefinedSplitConfig {
+  splitter_type: 'predefined';
+  train_files: string[];
+  test_files: string[];
+  valid_files: string[];
+}
+
+interface PredefinedSplitterProps {
+  attributes: PredefinedSplitConfig;
+  available_files: string[];
+  onChange: (attributes: PredefinedSplitConfig) => void;
+}
+
+export function PredefinedSplitter({ attributes, available_files, onChange }: PredefinedSplitterProps) {
+  const [selectedFiles, setSelectedFiles] = React.useState<FileConfig[]>([]);
+
+  // Convert attributes to FileConfig array for UI
+  React.useEffect(() => {
+    const files: FileConfig[] = [
+      ...attributes.train_files.map(path => ({ path, type: 'train' as const })),
+      ...attributes.test_files.map(path => ({ path, type: 'test' as const })),
+      ...attributes.valid_files.map(path => ({ path, type: 'valid' as const }))
+    ];
+    setSelectedFiles(files);
+  }, [attributes.train_files, attributes.test_files, attributes.valid_files]);
+
+  const addFile = (path: string) => {
+    const newFiles = [...selectedFiles, { path, type: 'train' }];
+    setSelectedFiles(newFiles);
+    updateAttributes(newFiles);
+  };
+
+  const updateFileType = (index: number, type: 'train' | 'test' | 'valid') => {
+    const newFiles = selectedFiles.map((file, i) =>
+      i === index ? { ...file, type } : file
+    );
+    setSelectedFiles(newFiles);
+    updateAttributes(newFiles);
+  };
+
+  const removeFile = (index: number) => {
+    const newFiles = selectedFiles.filter((_, i) => i !== index);
+    setSelectedFiles(newFiles);
+    updateAttributes(newFiles);
+  };
+
+  const updateAttributes = (files: FileConfig[]) => {
+    onChange({
+      splitter_type: 'predefined',
+      train_files: files.filter(f => f.type === 'train').map(f => f.path),
+      test_files: files.filter(f => f.type === 'test').map(f => f.path),
+      valid_files: files.filter(f => f.type === 'valid').map(f => f.path)
+    });
+  };
+
+  const unusedFiles = available_files.filter(
+    path => !selectedFiles.find(f => f.path === path)
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* File Selection */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Add File</label>
+        <SearchableSelect
+          options={unusedFiles.map(path => ({
+            value: path,
+            label: path.split('/').pop() || path,
+            description: path
+          }))}
+          value={null}
+          onChange={(value) => addFile(value as string)}
+          placeholder="Select a file..."
+        />
+      </div>
+
+      {/* Selected files */}
+      {selectedFiles.length > 0 ? (
+        <div className="space-y-2">
+          {selectedFiles.map((file, index) => (
+            <div
+              key={file.path}
+              className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+            >
+              <div className="flex items-center gap-2 min-w-0">
+                <FileCheck className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                <span className="text-sm text-gray-900 truncate">
+                  {file.path.split('/').pop()}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <select
+                  value={file.type}
+                  onChange={(e) => updateFileType(index, e.target.value as 'train' | 'test' | 'valid')}
+                  className="text-sm rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                >
+                  <option value="train">Training Set</option>
+                  <option value="test">Test Set</option>
+                  <option value="valid">Validation Set</option>
+                </select>
+                <button
+                  onClick={() => removeFile(index)}
+                  className="text-sm text-red-600 hover:text-red-700"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-4 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
+          <p className="text-sm text-gray-500">
+            Select files to create your train/test/validation splits
+          </p>
+        </div>
+      )}
+
+      {/* Validation messages */}
+      {selectedFiles.length > 0 && (
+        <div className="space-y-1 text-sm">
+          {!selectedFiles.some(f => f.type === 'train') && (
+            <p className="text-yellow-600">
+              • You need at least one training set file
+            </p>
+          )}
+          {!selectedFiles.some(f => f.type === 'test') && (
+            <p className="text-yellow-600">
+              • You need at least one test set file
+            </p>
+          )}
+        </div>
+      )}
+
+    </div>
+  );
+}

data/app/frontend/components/dataset/splitters/RandomSplitter.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Info } from 'lucide-react';
+import type { RandomSplitConfig } from '../types';
+
+interface RandomSplitterProps {
+  attributes: RandomSplitConfig;
+  onChange: (attributes: RandomSplitConfig) => void;
+}
+
+export function RandomSplitter({ attributes, onChange }: RandomSplitterProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start gap-2">
+        <Info className="w-5 h-5 text-blue-500 mt-0.5" />
+        <p className="text-sm text-blue-700">
+          Random splitting will automatically split your data into 60% training, 20% test, and 20% validation sets.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        <div>
+          <label htmlFor="train_ratio" className="block text-sm font-medium text-gray-700">
+            Training Ratio
+          </label>
+          <input
+            type="number"
+            id="train_ratio"
+            value={attributes.train_ratio ?? 0.6}
+            onChange={(e) => onChange({ ...attributes, train_ratio: parseFloat(e.target.value) })}
+            className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+            min="0"
+            max="1"
+            step="0.1"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="test_ratio" className="block text-sm font-medium text-gray-700">
+            Test Ratio
+          </label>
+          <input
+            type="number"
+            id="test_ratio"
+            value={attributes.test_ratio ?? 0.2}
+            onChange={(e) => onChange({ ...attributes, test_ratio: parseFloat(e.target.value) })}
+            className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+            min="0"
+            max="1"
+            step="0.1"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="valid_ratio" className="block text-sm font-medium text-gray-700">
+            Validation Ratio
+          </label>
+          <input
+            type="number"
+            id="valid_ratio"
+            value={attributes.valid_ratio ?? 0.2}
+            onChange={(e) => onChange({ ...attributes, valid_ratio: parseFloat(e.target.value) })}
+            className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+            min="0"
+            max="1"
+            step="0.1"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="seed" className="block text-sm font-medium text-gray-700">
+          Random Seed (optional)
+        </label>
+        <input
+          type="number"
+          id="seed"
+          value={attributes.seed ?? ''}
+          onChange={(e) => onChange({ ...attributes, seed: e.target.value ? parseInt(e.target.value) : undefined })}
+          className="mt-1 p-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+          placeholder="Enter a random seed"
+        />
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/dataset/splitters/StratifiedSplitter.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { SearchableSelect } from '../../SearchableSelect';
+
+interface StratifiedSplitterProps {
+  targetColumn: string;
+  testSize: number;
+  validSize: number;
+  columns: Array<{ name: string; type: string }>;
+  onChange: (config: { targetColumn: string; testSize: number; validSize: number }) => void;
+}
+
+export function StratifiedSplitter({
+  targetColumn,
+  testSize,
+  validSize,
+  columns,
+  onChange
+}: StratifiedSplitterProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Target Column
+        </label>
+        <SearchableSelect
+          options={columns.map(col => ({
+            value: col.name,
+            label: col.name,
+            description: `Type: ${col.type}`
+          }))}
+          value={targetColumn}
+          onChange={(value) => onChange({
+            targetColumn: value as string,
+            testSize,
+            validSize
+          })}
+          placeholder="Select target column..."
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Test Set Size (%)
+          </label>
+          <input
+            type="number"
+            min={1}
+            max={40}
+            value={testSize}
+            onChange={(e) => onChange({
+              targetColumn,
+              testSize: parseInt(e.target.value) || 0,
+              validSize
+            })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            Validation Set Size (%)
+          </label>
+          <input
+            type="number"
+            min={1}
+            max={40}
+            value={validSize}
+            onChange={(e) => onChange({
+              targetColumn,
+              testSize,
+              validSize: parseInt(e.target.value) || 0
+            })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+export const SPLITTER_OPTIONS = [
+  { 
+    value: 'date', 
+    label: 'Date Split',
+    description: 'Split data based on a date/time column'
+  },
+  { 
+    value: 'random', 
+    label: 'Random Split',
+    description: 'Randomly split data into train/test/validation sets (70/20/10)'
+  },
+  { 
+    value: 'predefined', 
+    label: 'Predefined Splits',
+    description: 'Use separate files for train/test/validation sets'
+  },
+//   { 
+//     value: 'stratified', 
+//     label: 'Stratified Shuffle Split',
+//     description: 'Maintain the percentage of samples for each class'
+//   },
+//   { 
+//     value: 'stratified_kfold', 
+//     label: 'Stratified K-Fold',
+//     description: 'K-fold with preserved class distribution'
+//   },
+//   { 
+//     value: 'group_kfold', 
+//     label: 'Group K-Fold',
+//     description: 'K-fold ensuring group integrity'
+//   },
+//   { 
+//     value: 'group_shuffle', 
+//     label: 'Group Shuffle Split',
+//     description: 'Random split respecting group boundaries'
+//   },
+//   { 
+//     value: 'leave_p_out', 
+//     label: 'Leave P Out',
+//     description: 'Use P samples for testing in each fold'
+//   }
+] as const;
+
+export const DEFAULT_CONFIGS = {
+  date: {
+    date_column: '',
+    months_test: 2,
+    months_valid: 1
+  },
+  random: {},
+  predefined: {
+    train_files: [],
+    test_files: [],
+    valid_files: []
+  },
+  stratified: {
+    targetColumn: '',
+    testSize: 20,
+    validSize: 10
+  },
+  stratified_kfold: {
+    targetColumn: '',
+    nSplits: 5
+  },
+  group_kfold: {
+    groupColumn: '',
+    nSplits: 5
+  },
+  group_shuffle: {
+    groupColumn: '',
+    testSize: 20,
+    validSize: 10
+  },
+  leave_p_out: {
+    p: 1
+  }
+} as const;