easy_ml 0.1.4 → 0.2.0.pre.rc1

data/app/frontend/pages/SettingsPage.tsx

@@ -0,0 +1,272 @@
+import React, { useState } from 'react';
+import { usePage } from '@inertiajs/react'
+import { useInertiaForm } from 'use-inertia-form';
+import { Settings2, Save, AlertCircle, Key, Database, Globe2 } from 'lucide-react';
+import { PluginSettings } from '../components/settings/PluginSettings';
+
+interface Settings {
+  settings: {
+    timezone: string;
+    s3_bucket: string;
+    s3_region: string;
+    s3_access_key_id: string;
+    s3_secret_access_key: string;
+    wandb_api_key: string;
+  }
+}
+
+const TIMEZONES = [
+  { value: 'America/New_York', label: 'Eastern Time' },
+  { value: 'America/Chicago', label: 'Central Time' },
+  { value: 'America/Denver', label: 'Mountain Time' },
+  { value: 'America/Los_Angeles', label: 'Pacific Time' }
+];
+
+export default function SettingsPage({ settings: initialSettings }: { settings: Settings }) {
+  const { rootPath } = usePage().props;
+
+  const form = useInertiaForm<Settings>({
+    settings: {
+      timezone: initialSettings?.settings?.timezone || 'America/New_York',
+      s3_bucket: initialSettings?.settings?.s3_bucket || '',
+      s3_region: initialSettings?.settings?.s3_region || 'us-east-1',
+      s3_access_key_id: initialSettings?.settings?.s3_access_key_id || '',
+      s3_secret_access_key: initialSettings?.settings?.s3_secret_access_key || '',
+      wandb_api_key: initialSettings?.settings?.wandb_api_key || ''
+    }
+  });
+
+  const { data: formData, setData: setFormData, patch, processing } = form;
+
+  const [showSecretKey, setShowSecretKey] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaved(false);
+    setError(null);
+
+    const timeoutId = setTimeout(() => {
+      setError('Request timed out. Please try again.');
+    }, 3000);
+
+    patch(`${rootPath}/settings`, {
+      onSuccess: () => {
+        clearTimeout(timeoutId);
+        setSaved(true);
+      },
+      onError: () => {
+        clearTimeout(timeoutId);
+        setError('Failed to save settings. Please try again.');
+      }
+    });
+  };
+
+  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">
+            <Settings2 className="w-6 h-6 text-blue-600" />
+            <h2 className="text-xl font-semibold text-gray-900">Settings</h2>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-8">
+          {/* General Settings */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 mb-4">
+              <Globe2 className="w-5 h-5 text-gray-500" />
+              <h3 className="text-lg font-medium text-gray-900">General Settings</h3>
+            </div>
+
+            <div>
+              <label htmlFor="timezone" className="block text-sm font-medium text-gray-700 mb-1">
+                Timezone
+              </label>
+              <select
+                id="timezone"
+                value={formData.settings.timezone}
+                
+                onChange={(e) => setFormData({
+                  ...formData,
+                  settings: {
+                    ...formData.settings,
+                    timezone: e.target.value
+                  }
+                })}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              >
+                {TIMEZONES.map((tz) => (
+                  <option key={tz.value} value={tz.value}>
+                    {tz.label}
+                  </option>
+                ))}
+              </select>
+              <p className="mt-1 text-sm text-gray-500">
+                All dates and times will be displayed in this timezone
+              </p>
+            </div>
+          </div>
+
+          {/* S3 Configuration */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 mb-4">
+
+              <Database className="w-5 h-5 text-gray-500" />
+              <h3 className="text-lg font-medium text-gray-900">S3 Configuration</h3>
+            </div>
+
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="bucket" className="block text-sm font-medium text-gray-700 mb-1">
+                  Default S3 Bucket
+                </label>
+                <input
+                  type="text"
+                  id="bucket"
+                  value={formData.settings.s3_bucket}
+                  onChange={(e) => setFormData({
+                    ...formData,
+                    settings: {
+                      ...formData.settings,
+                      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"
+                  placeholder="my-bucket"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="region" className="block text-sm font-medium text-gray-700 mb-1">
+                  AWS Region
+                </label>
+                <select
+                  id="region"
+                  value={formData.settings.s3_region}
+                  onChange={(e) => setFormData({
+                    ...formData,
+                    settings: {
+                      ...formData.settings,
+                      s3_region: e.target.value
+                    }
+                  })}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                >
+                  <option value="us-east-1">US East (N. Virginia)</option>
+                  <option value="us-east-2">US East (Ohio)</option>
+                  <option value="us-west-1">US West (N. California)</option>
+                  <option value="us-west-2">US West (Oregon)</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="bg-blue-50 rounded-lg p-4">
+              <div className="flex gap-2">
+                <AlertCircle className="w-5 h-5 text-blue-500 mt-0.5" />
+                <div>
+                  <h4 className="text-sm font-medium text-blue-900">AWS Credentials</h4>
+                  <p className="mt-1 text-sm text-blue-700">
+                    These credentials will be used as default for all S3 operations. You can override them per datasource.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <label htmlFor="accessKeyId" className="block text-sm font-medium text-gray-700 mb-1">
+                  Access Key ID
+                </label>
+                <div className="relative">
+                  <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input
+                    type="text"
+                    id="accessKeyId"
+                    value={formData.settings.s3_access_key_id}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      settings: {
+                        ...formData.settings,
+                        s3_access_key_id: e.target.value
+                      }
+                    })}
+                    className="mt-1 block w-full pl-9 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="AKIA..."
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="secretAccessKey" className="block text-sm font-medium text-gray-700 mb-1">
+                  Secret Access Key
+                </label>
+                <div className="relative">
+                  <Key className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input
+                    type={showSecretKey ? 'text' : 'password'}
+                    id="secretAccessKey"
+                    value={formData.settings.s3_secret_access_key}
+                    onChange={(e) => setFormData({
+                      ...formData,
+                      settings: {
+                        ...formData.settings,
+                        s3_secret_access_key: e.target.value
+                      }
+                    })}
+                    className="mt-1 block w-full pl-9 pr-24 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                    placeholder="Your secret key"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowSecretKey(!showSecretKey)}
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 text-sm text-gray-500 hover:text-gray-700"
+                  >
+                    {showSecretKey ? 'Hide' : 'Show'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-200 pt-8">
+            <PluginSettings
+              settings={formData.settings}
+              setData={(settings) => setFormData({ ...settings })}
+            />
+          </div>
+
+          <div className="pt-6 border-t flex items-center justify-between">
+            {saved && (
+              <div className="flex items-center gap-2 text-green-600">
+                <Save className="w-4 h-4" />
+                <span className="text-sm font-medium">Settings saved successfully</span>
+              </div>
+            )}
+            {error && (
+              <div className="flex items-center gap-2 text-red-600">
+                <AlertCircle className="w-4 h-4" />
+                <span className="text-sm font-medium">{error}</span>
+              </div>
+            )}
+            <div className="flex gap-3">
+              <button
+                type="submit"
+                disabled={processing}
+                className={`px-4 py-2 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
+                  processing 
+                    ? 'bg-blue-400 cursor-not-allowed' 
+                    : 'bg-blue-600 hover:bg-blue-700'
+                }`}
+              >
+                {processing ? 'Saving...' : 'Save Settings'}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

data/app/frontend/pages/ShowModelPage.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ModelDetails } from '../components/ModelDetails';
+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 ShowModelPage({ model, rootPath }: PageProps) {
+  return (
+    <div className="max-w-3xl mx-auto py-8">
+      <ModelDetails model={model} rootPath={rootPath} />
+    </div>
+  );
+}

data/app/frontend/pages/TransformationsPage.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Plus, FolderPlus } from 'lucide-react';
+// import { Link } from 'react-router-dom';
+import { mockFeatureGroups } from '../mockData';
+import { FeatureCard } from '../components/features/FeatureCard';
+import { FeatureGroupCard } from '../components/features/FeatureGroupCard';
+import { EmptyState } from '../components/EmptyState';
+
+export default function FeaturesPage() {
+  const [view, setView] = useState<'groups' | 'all'>('groups');
+
+  if (mockFeatureGroups.length === 0) {
+    return (
+      <div className="p-8">
+        <EmptyState
+          icon={FolderPlus}
+          title="Create your first feature group"
+          description="Create a group to organize your column features"
+          actionLabel="Create Group"
+          onAction={() => {/* Handle group creation */}}
+        />
+      </div>
+    );
+  }
+
+  const allFeatures = mockFeatureGroups.flatMap(g => g.features);
+
+  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">Features</h2>
+            <div className="flex rounded-md shadow-sm">
+              <button
+                onClick={() => setView('groups')}
+                className={`px-4 py-2 text-sm font-medium rounded-l-md ${
+                  view === 'groups'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white text-gray-700 hover:text-gray-900 border border-gray-300'
+                }`}
+              >
+                Groups
+              </button>
+              <button
+                onClick={() => setView('all')}
+                className={`px-4 py-2 text-sm font-medium rounded-r-md ${
+                  view === 'all'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white text-gray-700 hover:text-gray-900 border border-l-0 border-gray-300'
+                }`}
+              >
+                All Features
+              </button>
+            </div>
+          </div>
+          <div className="flex gap-3">
+            <Link
+              to="/features/groups/new"
+              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"
+            >
+              <FolderPlus className="w-4 h-4" />
+              New Group
+            </Link>
+            <Link
+              to="/features/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"
+            >
+              <Plus className="w-4 h-4" />
+              New Feature
+            </Link>
+          </div>
+        </div>
+
+        {view === 'groups' ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {mockFeatureGroups.map((group) => (
+              <FeatureGroupCard key={group.id} group={group} />
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {allFeatures.map((feature) => (
+              <FeatureCard
+                key={feature.id}
+                feature={feature}
+                group={mockFeatureGroups.find(g => g.id === feature.groupId)!}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

data/app/frontend/styles/application.css

@@ -0,0 +1,100 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+* {
+  @apply border-border;
+}
+
+body {
+  @apply bg-background text-foreground;
+  font-feature-settings: "rlig" 1, "calt" 1;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

data/app/frontend/types/dataset.ts

@@ -0,0 +1,146 @@
+import type { Datasource } from "./datasource";
+import type { SplitterConfig } from '../components/dataset/splitters/types';
+
+export type DatasetWorkflowStatus = "analyzing" | "ready" | "failed" | "locked";
+export type DatasetStatus = "training" | "inference" | "retired";
+export type ColumnType =
+  | "float"
+  | "integer"
+  | "boolean"
+  | "categorical"
+  | "datetime"
+  | "text"
+  | "string";
+
+export type PreprocessingSteps = {
+  training?: PreprocessingStep;
+  inference?: PreprocessingStep;
+};
+
+export type Feature = {
+  id?: number;
+  name: string;
+  feature_class: string;
+  feature_position: number;
+  dataset_id?: number;
+  description?: string;
+  feature_type?: "calculation" | "lookup" | "other";
+  _destroy?: boolean;
+};
+
+export type PreprocessingStep = {
+  method:
+    | "none"
+    | "mean"
+    | "median"
+    | "ffill"
+    | "most_frequent"
+    | "categorical"
+    | "constant"
+    | "today";
+  params: {
+    value?: number;
+    constant?: string;
+    categorical_min?: number;
+    clip?: {
+      min?: number;
+      max?: number;
+    };
+    one_hot?: boolean;
+    ordinal_encoding?: boolean;
+  };
+};
+
+export interface StatisticSet {
+  mean?: number;
+  median?: number;
+  min?: number;
+  max?: number;
+  last_value?: string;
+  count?: number;
+  null_count?: number;
+  unique_count?: number;
+  most_frequent_value?: string;
+  counts: object;
+  num_rows?: number;
+  sample_data?: any[];
+}
+
+export interface Statistics {
+  raw: StatisticSet;
+  processed: StatisticSet;
+}
+export interface Column {
+  id: number;
+  name: string;
+  type: ColumnType;
+  description?: string;
+  dataset_id: number;
+  datatype: string;
+  polars_datatype: string;
+  is_target: boolean;
+  hidden: boolean;
+  drop_if_null: boolean;
+  sample_values: {};
+  statistics?: Statistics;
+  preprocessing_steps?: PreprocessingSteps;
+}
+
+export interface Dataset {
+  id: number;
+  name: string;
+  description?: string;
+  status: DatasetStatus;
+  needs_refresh: boolean;
+  workflow_status: DatasetWorkflowStatus;
+  target?: string;
+  num_rows?: number;
+  drop_cols?: string[];
+  datasource_id: number;
+  columns: Array<Column>;
+  sample_data: Record<string, any>[];
+  features?: Array<Feature>;
+  preprocessing_steps: {
+    training: Record<string, any>;
+  };
+  splitter_attributes?: {
+    splitter_type: string;
+    date_col: string;
+    months_test: number;
+    months_valid: number;
+  };
+  stacktrace?: string;
+}
+
+export interface NewDatasetForm {
+  dataset: {
+    name: string;
+    datasource_id: string;
+    splitter_attributes: SplitterConfig;  
+  };
+}
+
+export interface NewDatasetFormProps {
+  constants: {
+    splitter_constants: {
+      SPLITTER_TYPES: Array<{
+        value: string;
+        label: string;
+        description: string;
+      }>;
+      DEFAULT_CONFIGS: Record<string, any>;
+    };
+  };
+  datasources: Array<{
+    id: number;
+    name: string;
+    columns: string[];
+  }>;
+}
+
+export interface PreprocessingConstants {
+  column_types: Array<{ value: ColumnType; label: string }>;
+  preprocessing_strategies: {
+    [K in ColumnType]: Array<{ value: string; label: string }>;
+  };
+}

data/app/frontend/types/datasource.ts

@@ -0,0 +1,33 @@
+export type ColumnType =
+  | "float"
+  | "integer"
+  | "boolean"
+  | "categorical"
+  | "datetime"
+  | "text"
+  | "string";
+
+export interface Schema {
+  [key: string]: ColumnType;
+}
+
+export interface Datasource {
+  id: number;
+  name: string;
+  datasource_type: string;
+  is_syncing: boolean;
+  last_synced_at: string | null;
+  columns: string[];
+  schema: Schema;
+  error?: string;
+}
+
+export interface DatasourceFormProps {
+  datasource?: Datasource;
+  constants: {
+    DATASOURCE_TYPES: Array<{ value: string; label: string; description: string }>;
+    s3: {
+      S3_REGIONS: Array<{ value: string; label: string }>;
+    };
+  };
+}

data/app/frontend/types/preprocessing.ts

@@ -0,0 +1 @@
+