feat(canvas): Auto-load optimization config from study

Phase 3 of Canvas Professional Upgrade:
- Fix ConfigImporter API endpoint URL (/api/optimization/studies/...)
- Add currentStudyId prop to auto-select study in importer
- Parse response correctly (data.config instead of raw response)
- Replace file upload emoji with FolderOpen Lucide icon
- Add "Load Study Config" button to Setup canvas tab header
- Show button only when canvas is empty

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-15 22:37:00 -05:00
parent b6202c3f82
commit 2d4303bf22
2 changed files with 50 additions and 5 deletions

View File

@@ -7,16 +7,18 @@
* - Load from study directory
*/
import { useState, useRef } from 'react';
import { useState, useRef, useEffect } from 'react';
import { FolderOpen } from 'lucide-react';
import { useCanvasStore, OptimizationConfig } from '../../../hooks/useCanvasStore';
interface ConfigImporterProps {
isOpen: boolean;
onClose: () => void;
onImport: (source: string) => void;
currentStudyId?: string; // Auto-load this study when provided
}
export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProps) {
export function ConfigImporter({ isOpen, onClose, onImport, currentStudyId }: ConfigImporterProps) {
const [tab, setTab] = useState<'file' | 'paste' | 'study'>('file');
const [jsonText, setJsonText] = useState('');
const [studyPath, setStudyPath] = useState('');
@@ -26,6 +28,14 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
const { loadFromConfig } = useCanvasStore();
// Set study path from current study when provided
useEffect(() => {
if (currentStudyId) {
setStudyPath(currentStudyId);
setTab('study');
}
}, [currentStudyId, isOpen]);
if (!isOpen) return null;
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -69,13 +79,14 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
try {
// Call backend API to load study config
const response = await fetch(`/api/studies/${encodeURIComponent(studyPath)}/config`);
const response = await fetch(`/api/optimization/studies/${encodeURIComponent(studyPath)}/config`);
if (!response.ok) {
throw new Error(`Study not found: ${studyPath}`);
}
const config = await response.json() as OptimizationConfig;
const data = await response.json();
const config = data.config as OptimizationConfig;
validateConfig(config);
loadFromConfig(config);
onImport(`Study: ${studyPath}`);
@@ -165,7 +176,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
disabled={isLoading}
className="w-full py-8 border-2 border-dashed border-dark-600 rounded-lg hover:border-primary-500/50 hover:bg-dark-800 transition-colors flex flex-col items-center gap-2"
>
<span className="text-3xl">📁</span>
<FolderOpen size={32} className="text-primary-400" />
<span className="text-dark-300">
{isLoading ? 'Loading...' : 'Click to select file'}
</span>