easy_ml 0.1.3 → 0.2.0.pre.rc1

data/app/frontend/components/SearchInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Search } from 'lucide-react';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function SearchInput({ value, onChange, placeholder = 'Search...' }: SearchInputProps) {
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-9 pr-4 py-2 w-64 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+      />
+    </div>
+  );
+}

data/app/frontend/components/SearchableSelect.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect, forwardRef } from 'react';
+import { Search, Check } from 'lucide-react';
+
+interface Option {
+  value: string | number;
+  label: string;
+  description?: string;
+  metadata?: Record<string, any>;
+}
+
+interface SearchableSelectProps {
+  options: Option[];
+  value: Option['value'] | null;
+  onChange: (value: Option['value']) => void;
+  placeholder?: string;
+  renderOption?: (option: Option) => React.ReactNode;
+}
+
+export const SearchableSelect = forwardRef<HTMLButtonElement, SearchableSelectProps>(
+  ({ options, value, onChange, placeholder = 'Search...', renderOption }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const selectedOption = options.find(opt => opt.value === value);
+
+    const filteredOptions = options.filter(option =>
+      option.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      option.description?.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    useEffect(() => {
+      function handleClickOutside(event: MouseEvent) {
+        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+        }
+      }
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    useEffect(() => {
+      if (isOpen && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [isOpen]);
+
+    return (
+      <div className="relative" ref={containerRef}>
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full bg-white relative border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+          ref={ref}
+        >
+          {selectedOption ? (
+            <span className="block truncate">{selectedOption.label}</span>
+          ) : (
+            <span className="block truncate text-gray-500">{placeholder}</span>
+          )}
+        </button>
+
+        {isOpen && (
+          <div className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-96 rounded-md overflow-hidden">
+            <div className="p-2 border-b">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  className="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                />
+              </div>
+            </div>
+
+            <div className="max-h-60 overflow-y-auto">
+              {filteredOptions.length === 0 ? (
+                <div className="text-center py-4 text-sm text-gray-500">
+                  No results found
+                </div>
+              ) : (
+                <ul className="py-1">
+                  {filteredOptions.map((option) => (
+                    <li key={option.value}>
+                      <button
+                        type="button"
+                        className={`w-full text-left px-4 py-2 hover:bg-gray-100 ${
+                          option.value === value ? 'bg-blue-50' : ''
+                        }`}
+                        onClick={() => {
+                          onChange(option.value);
+                          setIsOpen(false);
+                          setSearchQuery('');
+                        }}
+                      >
+                        {renderOption ? (
+                          renderOption(option)
+                        ) : (
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="font-medium">{option.label}</div>
+                              {option.description && (
+                                <div className="text-sm text-gray-500">
+                                  {option.description}
+                                </div>
+                              )}
+                            </div>
+                            {option.value === value && (
+                              <Check className="w-4 h-4 text-blue-600" />
+                            )}
+                          </div>
+                        )}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SearchableSelect.displayName = 'SearchableSelect';

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Save, AlertCircle, Loader2 } from 'lucide-react';
+
+interface AutosaveIndicatorProps {
+  saving: boolean;
+  saved: boolean;
+  error: string | null;
+}
+
+export function AutosaveIndicator({ saving, saved, error }: AutosaveIndicatorProps) {
+  if (error) {
+    return (
+      <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>
+    );
+  }
+
+  if (saving) {
+    return (
+      <div className="flex items-center gap-2 text-blue-600">
+        <Loader2 className="w-4 h-4 animate-spin" />
+        <span className="text-sm font-medium">Saving changes...</span>
+      </div>
+    );
+  }
+
+  if (saved) {
+    return (
+      <div className="flex items-center gap-2 text-green-600">
+        <Save className="w-4 h-4" />
+        <span className="text-sm font-medium">Changes saved</span>
+      </div>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,431 @@
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  X,
+  Settings2,
+  AlertCircle,
+  Target,
+  EyeOff,
+  Search,
+  Wand2,
+  Play,
+  Loader2,
+  Sparkles,
+} from "lucide-react";
+import { PreprocessingConfig } from "./PreprocessingConfig";
+import { ColumnList } from "./ColumnList";
+import { ColumnFilters } from "./ColumnFilters";
+import { AutosaveIndicator } from "./AutosaveIndicator";
+import { SearchableSelect } from "../SearchableSelect";
+import { useAutosave } from "../../hooks/useAutosave";
+import { Dataset, Column, Feature } from "../../types/dataset";
+import type { PreprocessingStep } from "../../types/dataset";
+import { FeaturePicker } from "./FeaturePicker";
+import { router } from "@inertiajs/react";
+
+interface ColumnConfig {
+  targetColumn?: string;
+}
+
+interface ColumnConfigModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialDataset: Dataset;
+  onSave: (dataset: Dataset) => Promise<void>;
+  constants: any;
+}
+
+export function ColumnConfigModal({
+  isOpen,
+  onClose,
+  initialDataset,
+  onSave,
+  constants,
+}: ColumnConfigModalProps) {
+  const [dataset, setDataset] = useState<Dataset>(initialDataset);
+  const [activeTab, setActiveTab] = useState<"columns" | "features">(
+    "columns"
+  );
+  const [isApplying, setIsApplying] = useState(false);
+  const [config, setConfig] = useState<ColumnConfig>({
+    targetColumn: dataset.target,
+  });
+  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilters, setActiveFilters] = useState<{
+    view: "all" | "training" | "hidden" | "preprocessed" | "nulls";
+    types: string[];
+  }>({
+    view: "all",
+    types: [],
+  });
+  const [needsRefresh, setNeedsRefresh] = useState(
+    initialDataset.needs_refresh || false
+  );
+
+  const handleSave = useCallback(
+    async (data: Dataset) => {
+      await onSave(data);
+    },
+    [onSave]
+  );
+
+  const { saving, saved, error } = useAutosave(dataset, handleSave, 2000);
+
+  const colHasPreprocessingSteps = (col: Column) => {
+    return (
+      col.preprocessing_steps?.training != null &&
+      col.preprocessing_steps?.training?.method !== "none"
+    );
+  };
+
+  const filteredColumns = useMemo(() => {
+    return dataset.columns.filter((column) => {
+      const matchesSearch = column.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+      const matchesType =
+        activeFilters.types.length === 0 ||
+        activeFilters.types.includes(column.datatype);
+
+      const matchesView = (() => {
+        switch (activeFilters.view) {
+          case "training":
+            return !column.hidden && !column.drop_if_null;
+          case "hidden":
+            return column.hidden;
+          case "preprocessed":
+            return colHasPreprocessingSteps(column);
+          case "nulls":
+            return (column.statistics?.processed?.null_count || 0) > 0;
+          default:
+            return true;
+        }
+      })();
+
+      return matchesSearch && matchesType && matchesView;
+    });
+  }, [dataset.columns, searchQuery, activeFilters]);
+
+  const columnStats = useMemo(
+    () => ({
+      total: dataset.columns.length,
+      filtered: filteredColumns.length,
+      training: dataset.columns.filter((c) => !c.hidden && !c.drop_if_null)
+        .length,
+      hidden: dataset.columns.filter((c) => c.hidden).length,
+      withPreprocessing: dataset.columns.filter(colHasPreprocessingSteps)
+        .length,
+      withNulls: dataset.columns.filter(
+        (c) => (c.statistics?.processed?.null_count || 0) > 0
+      ).length,
+    }),
+    [dataset.columns, filteredColumns]
+  );
+
+  const columnTypes = useMemo(
+    () => Array.from(new Set(dataset.columns.map((c) => c.datatype))),
+    [dataset.columns]
+  );
+
+  const handleColumnSelect = (columnName: string) => {
+    setSelectedColumn(columnName);
+  };
+
+  const toggleHiddenColumn = (columnName: string) => {
+    const updatedColumns = dataset.columns.map((c) => ({
+      ...c,
+      hidden: c.name === columnName ? !c.hidden : c.hidden,
+    }));
+
+    setDataset({
+      ...dataset,
+      columns: updatedColumns,
+    });
+    setNeedsRefresh(true);
+  };
+
+  const setTargetColumn = (columnName: string) => {
+    const name = String(columnName);
+    setConfig({ targetColumn: columnName });
+    const updatedColumns = dataset.columns.map((c) => ({
+      ...c,
+      is_target: c.name === name,
+    }));
+
+    setDataset({
+      ...dataset,
+      columns: updatedColumns,
+    });
+    setNeedsRefresh(true);
+  };
+
+  const setColumnType = (columnName: string, datatype: string) => {
+    const updatedColumns = dataset.columns.map((c) => ({
+      ...c,
+      datatype: c.name === columnName ? datatype : c.datatype,
+    }));
+
+    setDataset({
+      ...dataset,
+      columns: updatedColumns,
+    });
+    setNeedsRefresh(true);
+  };
+
+  const handlePreprocessingUpdate = (
+    columnName: string,
+    training: PreprocessingStep,
+    inference: PreprocessingStep | undefined,
+    useDistinctInference: boolean
+  ) => {
+    const column = dataset.columns.find((c) => c.name === columnName);
+    if (!column) return;
+
+    const updatedColumns = dataset.columns.map((c) => {
+      if (c.name !== columnName) return c;
+
+      return {
+        ...c,
+        preprocessing_steps: {
+          training,
+          ...(useDistinctInference && inference ? { inference } : {}),
+        },
+      };
+    });
+
+    setDataset({
+      ...dataset,
+      columns: updatedColumns,
+    });
+    setNeedsRefresh(true);
+  };
+
+  const handleFeaturesChange = (newFeatures: Feature[]) => {
+    const existingFeatures = dataset.features || [];
+
+    const removedFeatures = existingFeatures
+      .filter(
+        (existing) => !newFeatures.find((t) => t.name === existing.name)
+      )
+      .map((feature) => ({ ...feature, _destroy: true }));
+
+    const featuresWithDatasetId = [
+      ...newFeatures,
+      ...removedFeatures,
+    ].map((feature, index) => ({
+      ...feature,
+      dataset_id: dataset.id,
+      feature_position: index,
+    }));
+
+    setDataset((prevDataset) => ({
+      ...prevDataset,
+      features: featuresWithDatasetId,
+    }));
+    setNeedsRefresh(true);
+  };
+
+  const handleApplyChanges = async () => {
+    setIsApplying(true);
+    try {
+      await onSave(dataset);
+      router.post(
+        `/easy_ml/datasets/${dataset.id}/refresh`,
+        {},
+        {
+          onSuccess: () => {
+            setIsApplying(false);
+          },
+          onError: () => {
+            console.error("Error refreshing dataset");
+            setIsApplying(false);
+          },
+        }
+      );
+    } catch (error) {
+      console.error("Error refreshing dataset:", error);
+      setIsApplying(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const selectedColumnData = selectedColumn
+    ? dataset.columns.find((c) => c.name === selectedColumn)
+    : null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
+        <div className="flex justify-between items-center p-4 border-b shrink-0">
+          <h2 className="text-lg font-semibold">Column Configuration</h2>
+          <div className="flex items-center gap-4">
+            <div className="min-w-[0px]">
+              <AutosaveIndicator saving={saving} saved={saved} error={error} />
+            </div>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search columns..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 pr-4 py-2 w-64 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-500 hover:text-gray-700"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex border-b shrink-0">
+          <button
+            onClick={() => setActiveTab("columns")}
+            className={`px-4 py-2 text-sm font-medium border-b-2 ${
+              activeTab === "columns"
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Settings2 className="w-4 h-4" />
+              Column Configuration
+            </div>
+          </button>
+          <button
+            onClick={() => setActiveTab("features")}
+            className={`px-4 py-2 text-sm font-medium border-b-2 ${
+              activeTab === "features"
+                ? "border-blue-500 text-blue-600"
+                : "border-transparent text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Wand2 className="w-4 h-4" />
+              Features
+              <span className="px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-600 rounded-full">
+                {constants.feature_options.length}
+              </span>
+            </div>
+          </button>
+
+          {needsRefresh && (
+            <div className="ml-auto px-4 flex items-center">
+              <button
+                onClick={handleApplyChanges}
+                disabled={isApplying}
+                className="group relative inline-flex items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-sm font-medium rounded-md hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
+              >
+                <div className="absolute inset-0 bg-white/10 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
+                {isApplying ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Applying Preprocessing...
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="w-4 h-4" />
+                    Apply Preprocessing
+                  </>
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {activeTab === "columns" ? (
+          <React.Fragment>
+            <div className="grid grid-cols-7 flex-1 min-h-0">
+              <div className="col-span-3 border-r overflow-hidden flex flex-col">
+                <div className="p-4 border-b shrink-0">
+                  <label className="block text-sm font-medium text-gray-700">
+                    Target Column
+                  </label>
+                  <SearchableSelect
+                    options={dataset.columns.map((column) => ({
+                      value: column.name,
+                      label: column.name,
+                    }))}
+                    value={config.targetColumn || ""}
+                    onChange={(value) =>
+                      value && setTargetColumn(String(value))
+                    }
+                  />
+                </div>
+                <div className="shrink-0">
+                  <ColumnFilters
+                    types={columnTypes}
+                    activeFilters={activeFilters}
+                    onFilterChange={setActiveFilters}
+                    columnStats={columnStats}
+                    columns={dataset.columns}
+                    colHasPreprocessingSteps={colHasPreprocessingSteps}
+                  />
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 min-h-0">
+                  <ColumnList
+                    columns={filteredColumns}
+                    selectedColumn={selectedColumn}
+                    onColumnSelect={handleColumnSelect}
+                    onToggleHidden={toggleHiddenColumn}
+                  />
+                </div>
+              </div>
+
+              <div className="col-span-4 overflow-y-auto p-4">
+                {selectedColumnData ? (
+                  <PreprocessingConfig
+                    column={selectedColumnData}
+                    dataset={dataset}
+                    setColumnType={setColumnType}
+                    setDataset={setDataset}
+                    constants={constants}
+                    onUpdate={(training, inference, useDistinctInference) =>
+                      handlePreprocessingUpdate(
+                        selectedColumnData.name,
+                        training,
+                        inference,
+                        useDistinctInference
+                      )
+                    }
+                  />
+                ) : (
+                  <div className="h-full flex items-center justify-center text-gray-500">
+                    Select a column to configure preprocessing
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="border-t p-4 flex justify-between items-center shrink-0">
+              <div className="text-sm text-gray-600">
+                {dataset.columns.filter((c) => !c.hidden).length} columns
+                selected for training
+              </div>
+              <div className="flex gap-3">
+                <button
+                  onClick={onClose}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </React.Fragment>
+        ) : (
+          <div className="p-6 h-[calc(90vh-8rem)] overflow-y-auto">
+            <FeaturePicker
+              options={constants.feature_options}
+              initialFeatures={dataset.features}
+              onFeaturesChange={handleFeaturesChange}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}