feat(canvas): Canvas V3 - Bug fixes and study workflow improvements
Bug Fixes: - Fix Atomizer Assistant error with reconnect button and error state handling - Enable connection/edge deletion with keyboard Delete/Backspace keys - Fix drag & drop positioning using screenToFlowPosition correctly - Fix loadFromConfig to create all node types and edges properly UI/UX Improvements: - Minimal responsive header with context breadcrumb - Better contrast with white text on dark backgrounds - Larger font sizes in NodePalette for readability - Study-aware header showing selected study name New Features: - Enhanced ExecuteDialog with Create/Update mode toggle - Select existing study to update or create new study - Home page Canvas Builder button for quick access - Home navigation button in CanvasView header Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,14 +1,19 @@
|
||||
/**
|
||||
* Execute Dialog - Prompts for study name before executing canvas intent
|
||||
* Execute Dialog - Choose to update existing study or create new one
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { FilePlus, RefreshCw, FolderOpen } from 'lucide-react';
|
||||
import { useStudy } from '../../../context/StudyContext';
|
||||
|
||||
type ExecuteMode = 'create' | 'update';
|
||||
|
||||
interface ExecuteDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onExecute: (studyName: string, autoRun: boolean) => void;
|
||||
onExecute: (studyName: string, autoRun: boolean, mode: ExecuteMode, existingStudyId?: string) => void;
|
||||
isExecuting: boolean;
|
||||
defaultStudyId?: string; // Pre-selected study when editing
|
||||
}
|
||||
|
||||
export function ExecuteDialog({
|
||||
@@ -16,31 +21,68 @@ export function ExecuteDialog({
|
||||
onClose,
|
||||
onExecute,
|
||||
isExecuting,
|
||||
defaultStudyId,
|
||||
}: ExecuteDialogProps) {
|
||||
const { studies } = useStudy();
|
||||
const [mode, setMode] = useState<ExecuteMode>('create');
|
||||
const [studyName, setStudyName] = useState('');
|
||||
const [selectedStudyId, setSelectedStudyId] = useState<string>('');
|
||||
const [autoRun, setAutoRun] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Reset state when dialog opens
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (defaultStudyId) {
|
||||
setMode('update');
|
||||
setSelectedStudyId(defaultStudyId);
|
||||
} else {
|
||||
setMode('create');
|
||||
setSelectedStudyId(studies[0]?.id || '');
|
||||
}
|
||||
setStudyName('');
|
||||
setAutoRun(false);
|
||||
setError(null);
|
||||
}
|
||||
}, [isOpen, defaultStudyId, studies]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate study name
|
||||
const trimmed = studyName.trim();
|
||||
if (!trimmed) {
|
||||
setError('Study name is required');
|
||||
return;
|
||||
}
|
||||
if (mode === 'create') {
|
||||
// Validate study name
|
||||
const trimmed = studyName.trim();
|
||||
if (!trimmed) {
|
||||
setError('Study name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for valid snake_case
|
||||
if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
|
||||
setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
|
||||
return;
|
||||
}
|
||||
// Check for valid snake_case
|
||||
if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
|
||||
setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
onExecute(trimmed, autoRun);
|
||||
setError(null);
|
||||
onExecute(trimmed, autoRun, 'create');
|
||||
} else {
|
||||
// Update mode
|
||||
if (!selectedStudyId) {
|
||||
setError('Please select a study to update');
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedStudy = studies.find(s => s.id === selectedStudyId);
|
||||
if (!selectedStudy) {
|
||||
setError('Selected study not found');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
onExecute(selectedStudy.id, autoRun, 'update', selectedStudyId);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
@@ -52,39 +94,106 @@ export function ExecuteDialog({
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
|
||||
<div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-md p-6 border border-dark-700">
|
||||
<h2 className="text-xl font-semibold text-white mb-4">
|
||||
<div className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-lg p-6 border border-dark-700">
|
||||
<h2 className="text-xl font-semibold text-white mb-2">
|
||||
Execute with Claude
|
||||
</h2>
|
||||
<p className="text-dark-400 text-sm mb-6">
|
||||
Choose to create a new study or update an existing one
|
||||
</p>
|
||||
|
||||
{/* Mode Tabs */}
|
||||
<div className="flex gap-2 mb-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setMode('create'); setError(null); }}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
|
||||
mode === 'create'
|
||||
? 'bg-primary-600/20 border-primary-500 text-primary-400'
|
||||
: 'bg-dark-800 border-dark-600 text-dark-400 hover:border-dark-500'
|
||||
}`}
|
||||
>
|
||||
<FilePlus size={18} />
|
||||
<span className="font-medium">Create New Study</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setMode('update'); setError(null); }}
|
||||
disabled={studies.length === 0}
|
||||
className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border transition-all ${
|
||||
mode === 'update'
|
||||
? 'bg-amber-600/20 border-amber-500 text-amber-400'
|
||||
: 'bg-dark-800 border-dark-600 text-dark-400 hover:border-dark-500'
|
||||
} ${studies.length === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<RefreshCw size={18} />
|
||||
<span className="font-medium">Update Existing</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="study-name"
|
||||
className="block text-sm font-medium text-dark-300 mb-1"
|
||||
>
|
||||
Study Name
|
||||
</label>
|
||||
<input
|
||||
id="study-name"
|
||||
type="text"
|
||||
value={studyName}
|
||||
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
|
||||
placeholder="my_optimization_study"
|
||||
className="w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
|
||||
disabled={isExecuting}
|
||||
autoFocus
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-red-400">{error}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-dark-500">
|
||||
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
|
||||
</p>
|
||||
</div>
|
||||
{mode === 'create' ? (
|
||||
/* Create New Study */
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="study-name"
|
||||
className="block text-sm font-medium text-dark-300 mb-2"
|
||||
>
|
||||
Study Name
|
||||
</label>
|
||||
<input
|
||||
id="study-name"
|
||||
type="text"
|
||||
value={studyName}
|
||||
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
|
||||
placeholder="my_optimization_study"
|
||||
className="w-full px-3 py-2.5 bg-dark-800 border border-dark-600 text-white placeholder-dark-500 rounded-lg font-mono focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
|
||||
disabled={isExecuting}
|
||||
autoFocus
|
||||
/>
|
||||
<p className="mt-2 text-xs text-dark-500">
|
||||
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
/* Update Existing Study */
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="existing-study"
|
||||
className="block text-sm font-medium text-dark-300 mb-2"
|
||||
>
|
||||
Select Study to Update
|
||||
</label>
|
||||
<div className="relative">
|
||||
<FolderOpen size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500 pointer-events-none" />
|
||||
<select
|
||||
id="existing-study"
|
||||
value={selectedStudyId}
|
||||
onChange={(e) => setSelectedStudyId(e.target.value)}
|
||||
className="w-full pl-10 pr-3 py-2.5 bg-dark-800 border border-dark-600 text-white rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 focus:outline-none transition-colors appearance-none cursor-pointer"
|
||||
disabled={isExecuting}
|
||||
>
|
||||
{studies.map((study) => (
|
||||
<option key={study.id} value={study.id}>
|
||||
{study.name || study.id} ({study.progress.current} trials)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-amber-500/80">
|
||||
Warning: This will overwrite the study's optimization_config.json
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="flex items-center gap-2">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRun}
|
||||
@@ -93,7 +202,7 @@ export function ExecuteDialog({
|
||||
className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
|
||||
/>
|
||||
<span className="text-sm text-dark-300">
|
||||
Start optimization immediately after creation
|
||||
Start optimization immediately after {mode === 'create' ? 'creation' : 'update'}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -103,23 +212,33 @@ export function ExecuteDialog({
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
|
||||
className="px-4 py-2.5 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors"
|
||||
className={`px-5 py-2.5 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors font-medium ${
|
||||
mode === 'create'
|
||||
? 'bg-primary-600 text-white hover:bg-primary-500'
|
||||
: 'bg-amber-600 text-white hover:bg-amber-500'
|
||||
}`}
|
||||
>
|
||||
{isExecuting ? (
|
||||
<>
|
||||
<span className="animate-spin">⏳</span>
|
||||
Executing...
|
||||
Processing...
|
||||
</>
|
||||
) : mode === 'create' ? (
|
||||
<>
|
||||
<FilePlus size={16} />
|
||||
Create & Send to Claude
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Send to Claude
|
||||
<RefreshCw size={16} />
|
||||
Update & Send to Claude
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user