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:
@@ -28,6 +28,8 @@ import { Card } from '../components/common/Card';
|
||||
import { Button } from '../components/common/Button';
|
||||
import { apiClient, ModelFile } from '../api/client';
|
||||
import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
|
||||
import { ConfigImporter } from '../components/canvas/panels/ConfigImporter';
|
||||
import { useCanvasStore } from '../hooks/useCanvasStore';
|
||||
|
||||
interface StudyConfig {
|
||||
study_name: string;
|
||||
@@ -88,6 +90,9 @@ export default function Setup() {
|
||||
);
|
||||
const [modelFiles, setModelFiles] = useState<ModelFile[]>([]);
|
||||
const [modelDir, setModelDir] = useState<string>('');
|
||||
const [showImporter, setShowImporter] = useState(false);
|
||||
const [canvasNotification, setCanvasNotification] = useState<string | null>(null);
|
||||
const { nodes } = useCanvasStore();
|
||||
|
||||
// Redirect if no study selected
|
||||
useEffect(() => {
|
||||
@@ -256,6 +261,11 @@ export default function Setup() {
|
||||
|
||||
// Canvas tab - full height and full width
|
||||
if (activeTab === 'canvas') {
|
||||
const handleImport = (source: string) => {
|
||||
setCanvasNotification(`Loaded: ${source}`);
|
||||
setTimeout(() => setCanvasNotification(null), 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-6rem)] flex flex-col -mx-6 -my-6 px-4 pt-4">
|
||||
{/* Tab Bar */}
|
||||
@@ -275,6 +285,15 @@ export default function Setup() {
|
||||
Canvas Builder
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
{nodes.length === 0 && (
|
||||
<button
|
||||
onClick={() => setShowImporter(true)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-sm transition-colors"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Load Study Config
|
||||
</button>
|
||||
)}
|
||||
<span className="text-dark-400 text-sm">
|
||||
{selectedStudy?.name || 'Study'}
|
||||
</span>
|
||||
@@ -283,6 +302,21 @@ export default function Setup() {
|
||||
<div className="flex-1 min-h-0 rounded-lg overflow-hidden border border-dark-700">
|
||||
<AtomizerCanvas />
|
||||
</div>
|
||||
|
||||
{/* Config Importer Modal */}
|
||||
<ConfigImporter
|
||||
isOpen={showImporter}
|
||||
onClose={() => setShowImporter(false)}
|
||||
onImport={handleImport}
|
||||
currentStudyId={selectedStudy?.id}
|
||||
/>
|
||||
|
||||
{/* Notification Toast */}
|
||||
{canvasNotification && (
|
||||
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-dark-800 text-white rounded-lg shadow-lg z-50 border border-dark-600">
|
||||
{canvasNotification}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user