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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user