easy_ml 0.1.3 → 0.2.0.pre.rc1

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

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from 'react';
+import { AlertCircle } from 'lucide-react';
+import type { Dataset, FeatureGroup } from '../../types';
+import { CodeEditor } from './CodeEditor';
+import { DataPreview } from './DataPreview';
+
+interface FeatureFormProps {
+  datasets: Dataset[];
+  groups: FeatureGroup[];
+  initialData?: {
+    name: string;
+    description: string;
+    groupId: number;
+    testDatasetId: number;
+    inputColumns: string[];
+    outputColumns: string[];
+    code: string;
+  };
+  onSubmit: (data: any) => void;
+  onCancel: () => void;
+}
+
+export function FeatureForm({
+  datasets,
+  groups,
+  initialData,
+  onSubmit,
+  onCancel
+}: FeatureFormProps) {
+  const [formData, setFormData] = useState({
+    name: initialData?.name || '',
+    description: initialData?.description || '',
+    groupId: initialData?.groupId || '',
+    testDatasetId: initialData?.testDatasetId || '',
+    inputColumns: initialData?.inputColumns || [],
+    outputColumns: initialData?.outputColumns || [],
+    code: initialData?.code || ''
+  });
+
+  const [selectedDataset, setSelectedDataset] = useState<Dataset | null>(
+    initialData?.testDatasetId
+      ? datasets.find(d => d.id === initialData.testDatasetId) || null
+      : null
+  );
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(formData);
+  };
+
+  const handleDatasetChange = (datasetId: string) => {
+    const dataset = datasets.find(d => d.id === Number(datasetId)) || null;
+    setSelectedDataset(dataset);
+    setFormData(prev => ({
+      ...prev,
+      testDatasetId: datasetId,
+      inputColumns: [],
+      outputColumns: []
+    }));
+  };
+
+  const toggleColumn = (columnName: string, type: 'input' | 'output') => {
+    setFormData(prev => ({
+      ...prev,
+      [type === 'input' ? 'inputColumns' : 'outputColumns']: 
+        prev[type === 'input' ? 'inputColumns' : 'outputColumns'].includes(columnName)
+          ? prev[type === 'input' ? 'inputColumns' : 'outputColumns'].filter(c => c !== columnName)
+          : [...prev[type === 'input' ? 'inputColumns' : 'outputColumns'], columnName]
+    }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="p-6 space-y-8">
+      <div className="grid grid-cols-2 gap-6">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+            Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, 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"
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="group" className="block text-sm font-medium text-gray-700">
+            Group
+          </label>
+          <select
+            id="group"
+            value={formData.groupId}
+            onChange={(e) => setFormData({ ...formData, groupId: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+            required
+          >
+            <option value="">Select a group...</option>
+            {groups.map((group) => (
+              <option key={group.id} value={group.id}>
+                {group.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+          Description
+        </label>
+        <textarea
+          id="description"
+          value={formData.description}
+          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+          rows={3}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="dataset" className="block text-sm font-medium text-gray-700">
+          Test Dataset
+        </label>
+        <select
+          id="dataset"
+          value={formData.testDatasetId}
+          onChange={(e) => handleDatasetChange(e.target.value)}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          required
+        >
+          <option value="">Select a dataset...</option>
+          {datasets.map((dataset) => (
+            <option key={dataset.id} value={dataset.id}>
+              {dataset.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {selectedDataset && (
+        <div className="grid grid-cols-2 gap-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Input Columns
+            </label>
+            <div className="space-y-2">
+              {selectedDataset.columns.map((column) => (
+                <label
+                  key={column.name}
+                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50"
+                >
+                  <input
+                    type="checkbox"
+                    checked={formData.inputColumns.includes(column.name)}
+                    onChange={() => toggleColumn(column.name, 'input')}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span className="text-sm text-gray-900">{column.name}</span>
+                  <span className="text-xs text-gray-500">({column.type})</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Output Columns
+            </label>
+            <div className="space-y-2">
+              {selectedDataset.columns.map((column) => (
+                <label
+                  key={column.name}
+                  className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-50"
+                >
+                  <input
+                    type="checkbox"
+                    checked={formData.outputColumns.includes(column.name)}
+                    onChange={() => toggleColumn(column.name, 'output')}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span className="text-sm text-gray-900">{column.name}</span>
+                  <span className="text-xs text-gray-500">({column.type})</span>
+                </label>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Feature Code
+        </label>
+        <div className="bg-gray-50 rounded-lg p-4">
+          <CodeEditor
+            value={formData.code}
+            onChange={(code) => setFormData({ ...formData, code })}
+            language="ruby"
+          />
+        </div>
+      </div>
+
+      {selectedDataset && formData.code && (
+        <div>
+          <h3 className="text-sm font-medium text-gray-900 mb-2">Preview</h3>
+          <DataPreview
+            dataset={selectedDataset}
+            code={formData.code}
+            inputColumns={formData.inputColumns}
+            outputColumns={formData.outputColumns}
+          />
+        </div>
+      )}
+
+      <div className="flex justify-end gap-3 pt-6 border-t">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          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"
+        >
+          {initialData ? 'Save Changes' : 'Create Feature'}
+        </button>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+// import { Link } from 'react-router-dom';
+import { FolderOpen, Settings, Trash2 } from 'lucide-react';
+import type { FeatureGroup } from '../../types';
+
+interface FeatureGroupCardProps {
+  group: FeatureGroup;
+}
+
+export function FeatureGroupCard({ group }: FeatureGroupCardProps) {
+  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">
+          <FolderOpen className="w-5 h-5 text-blue-600 mt-1" />
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">
+              {group.name}
+            </h3>
+            <p className="text-sm text-gray-500 mt-1">
+              {group.description}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <Link
+            to={`/features/groups/${group.id}/edit`}
+            className="text-gray-400 hover:text-blue-600 transition-colors"
+            title="Edit group"
+          >
+            <Settings className="w-5 h-5" />
+          </Link>
+          <button
+            className="text-gray-400 hover:text-red-600 transition-colors"
+            title="Delete group"
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-100">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-gray-500">
+            {group.features.length} features
+          </span>
+          <span className="text-gray-500">
+            Last updated {new Date(group.updatedAt).toLocaleDateString()}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/settings/PluginSettings.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Puzzle, Key, ExternalLink } from 'lucide-react';
+
+interface PluginSettingsProps {
+  settings: {
+    wandb_api_key: string;
+  };
+  setData: (data: any) => void;
+}
+
+export function PluginSettings({ settings, setData }: PluginSettingsProps) {
+  const [showApiKey, setShowApiKey] = useState(false);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2 mb-4">
+        <Puzzle className="w-5 h-5 text-gray-500" />
+        <h3 className="text-lg font-medium text-gray-900">Plugins</h3>
+      </div>
+
+      <div className="space-y-6">
+        <div className="border border-gray-200 rounded-lg p-4">
+          <div className="flex items-start justify-between">
+            <div className="flex items-start gap-3">
+              <img 
+                src="https://raw.githubusercontent.com/wandb/assets/main/wandb-dots-logo.svg" 
+                alt="Weights & Biases" 
+                className="w-8 h-8"
+              />
+              <div>
+                <h4 className="text-base font-medium text-gray-900">Weights & Biases</h4>
+                <p className="text-sm text-gray-500 mt-1">
+                  Track and visualize machine learning experiments
+                </p>
+              </div>
+            </div>
+            <a
+              href="https://wandb.ai/settings"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-700 inline-flex items-center gap-1 text-sm"
+            >
+              Get API Key
+              <ExternalLink className="w-4 h-4" />
+            </a>
+          </div>
+
+          <div className="mt-4">
+            <label htmlFor="wandb_api_key" className="block text-sm font-medium text-gray-700">
+              API Key
+            </label>
+            <div className="mt-1 relative rounded-md shadow-sm">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Key className="h-5 w-5 text-gray-400" />
+              </div>
+              <input
+                type={showApiKey ? "text" : "password"}
+                name="wandb_api_key"
+                id="wandb_api_key"
+                value={settings.wandb_api_key}
+                onChange={(e) => setData({ settings: { ...settings, wandb_api_key: e.target.value } })}
+                className="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"
+                placeholder="Enter your Weights & Biases API key"
+              />
+              <button
+                type="button"
+                onClick={() => setShowApiKey(!showApiKey)}
+                className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              >
+                <Key className={`h-5 w-5 ${showApiKey ? 'text-gray-400' : 'text-gray-600'}`} />
+              </button>
+            </div>
+            <p className="mt-1 text-xs text-gray-500">
+              Your API key will be used to log metrics, artifacts, and experiment results
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/frontend/components/ui/badge.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        information:
+          "border-transparent bg-blue-100 text-blue-800 hover:bg-blue-600",
+        important:
+          "border-transparent bg-red-100 text-red-800 hover:bg-red-600",
+        warning:
+          "border-transparent bg-yellow-100 text-yellow-800 hover:bg-yellow-600",
+        success:
+          "border-transparent bg-green-100 text-green-800 hover:bg-green-600",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

data/app/frontend/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

data/app/frontend/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

data/app/frontend/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

data/app/frontend/entrypoints/App.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Navigation } from './components/Navigation';
+import { ModelsPage } from './pages/ModelsPage';
+import { NewModelPage } from './pages/NewModelPage';
+import { EditModelPage } from './pages/EditModelPage';
+import { DatasourcesPage } from './pages/DatasourcesPage';
+import { NewDatasourcePage } from './pages/NewDatasourcePage';
+import { EditDatasourcePage } from './pages/EditDatasourcePage';
+import { DatasetsPage } from './pages/DatasetsPage';
+import { NewDatasetPage } from './pages/NewDatasetPage';
+import { DatasetDetailsPage } from './pages/DatasetDetailsPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { FeaturesPage } from './pages/FeaturesPage';
+import { NewFeaturePage } from './pages/NewFeaturePage';
+import { EditFeaturePage } from './pages/EditFeaturePage';
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Navigation>
+        <Routes>
+          <Route path="/" element={<ModelsPage />} />
+          <Route path="/models/new" element={<NewModelPage />} />
+          <Route path="/models/:id/edit" element={<EditModelPage />} />
+          <Route path="/datasources" element={<DatasourcesPage />} />
+          <Route path="/datasources/new" element={<NewDatasourcePage />} />
+          <Route path="/datasources/:id/edit" element={<EditDatasourcePage />} />
+          <Route path="/datasets" element={<DatasetsPage />} />
+          <Route path="/datasets/new" element={<NewDatasetPage />} />
+          <Route path="/datasets/:id" element={<DatasetDetailsPage />} />
+          <Route path="/features" element={<FeaturesPage />} />
+          <Route path="/features/new" element={<NewFeaturePage />} />
+          <Route path="/features/:id/edit" element={<EditFeaturePage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Routes>
+      </Navigation>
+    </BrowserRouter>
+  );
+}

data/app/frontend/entrypoints/Application.tsx

@@ -0,0 +1,24 @@
+import "../styles/application.css"
+import { createInertiaApp } from '@inertiajs/react'
+import { createRoot } from 'react-dom/client'
+import Layout from '../layouts/Layout';
+
+document.addEventListener('DOMContentLoaded', () => {
+  createInertiaApp({
+    resolve: name => {
+      const pages = import.meta.glob('../pages/**/*.tsx', { eager: true })
+      let page = pages[`../${name}.tsx`];
+      if (!page.default) {
+        alert(`The page ${name} could not be found, you probably forgot to export default.`);
+        return;
+      }
+      page.default.layout = page.default.layout || (page => <Layout children={page} />)
+      return page;
+    },
+    setup({ el, App, props }) {
+      createRoot(el).render(
+        <App {...props} />
+      )
+    },
+  })
+}) 

data/app/frontend/hooks/useAutosave.ts

@@ -0,0 +1,61 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+
+interface AutosaveStatus {
+  saving: boolean;
+  saved: boolean;
+  error: string | null;
+}
+
+export function useAutosave<T>(
+  data: T,
+  onSave: (data: T) => Promise<void>,
+  debounceMs: number = 1000
+) {
+  const [status, setStatus] = useState<AutosaveStatus>({
+    saving: false,
+    saved: false,
+    error: null
+  });
+
+  const previousSerializedData = useRef(JSON.stringify(data));
+
+  const debouncedSave = useCallback(
+    debounce(async (newData: T) => {
+      setStatus(prev => ({ ...prev, saving: true, error: null }));
+      try {
+        await onSave(newData);
+        previousSerializedData.current = JSON.stringify(newData); // Update reference after saving
+        setStatus({ saving: false, saved: true, error: null });
+
+        // Reset "saved" status after 3 seconds
+        setTimeout(() => {
+          setStatus(prev => ({ ...prev, saved: false }));
+        }, 4000);
+      } catch (err) {
+        setStatus({
+          saving: false,
+          saved: false,
+          error: err instanceof Error ? err.message : 'Failed to save changes'
+        });
+      }
+    }, debounceMs),
+    [onSave, debounceMs]
+  );
+
+  useEffect(() => {
+    // Serialize current data for deep comparison
+    const serializedData = JSON.stringify(data);
+
+    if (serializedData !== previousSerializedData.current) {
+      debouncedSave(data); // Trigger save if there's a difference
+    }
+
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [data, debouncedSave]);
+
+  return status;
+}

data/app/frontend/layouts/Layout.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import { Navigation } from "../components/Navigation";
+import { AlertProvider, useAlerts } from '../components/AlertProvider';
+import { usePage } from '@inertiajs/react';
+
+interface PageProps {
+  flash: Array<{
+    type: 'success' | 'error' | 'info';
+    message: string;
+  }>;
+}
+
+function FlashMessageHandler({ children }: { children: React.ReactNode }) {
+  const { showAlert } = useAlerts();
+  const { flash } = usePage<PageProps>().props;
+
+  useEffect(() => {
+    if (flash) {
+      flash.forEach(({ type, message }) => {
+        showAlert(type, message);
+      });
+    }
+  }, [flash, showAlert]);
+
+  return <>{children}</>;
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <AlertProvider>
+      <FlashMessageHandler>
+        <Navigation>
+          {children}
+        </Navigation>
+      </FlashMessageHandler>
+    </AlertProvider>
+  );
+}

data/app/frontend/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}