Antoine/Atomizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add Canvas dark theme styling and Setup page integration

Browse Source 
Canvas Builder Visual Updates:
- Update all Canvas components to use Atomaster dark theme
- BaseNode: dark background (bg-dark-800), white text, primary selection glow
- NodePalette: dark sidebar with hover states
- NodeConfigPanel: dark inputs, labels, and panel background
- ValidationPanel: semi-transparent error/warning panels with backdrop blur
- ChatPanel: dark message area with themed welcome state
- ExecuteDialog: dark modal with primary button styling
- ConfigImporter: dark tabs, inputs, and file upload zone
- TemplateSelector: dark cards with category pills and hover effects

Setup Page Integration:
- Add Configuration/Canvas Builder tab switcher
- Canvas tab renders AtomizerCanvas full-height
- Tabs styled to match Atomaster theme

Build: Passes TypeScript and Vite build

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anto01
2026-01-14 21:30:30 -05:00
parent 92c82a5518
commit 9f3ac28000
10 changed files with 221 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
atomizer-dashboard/frontend/src/components/canvas/AtomizerCanvas.tsx
View File

@@ -118,7 +118,7 @@ function CanvasFlow() {
};
return (
<div className="flex h-full">
<div className="flex h-full bg-dark-900">
{/* Left: Node Palette */}
<NodePalette />
@@ -137,10 +137,15 @@ function CanvasFlow() {
onPaneClick={onPaneClick}
nodeTypes={nodeTypes}
fitView
className="bg-dark-900"
>
<Background />
<Controls />
<MiniMap />
<Background color="#374151" gap={20} />
<Controls className="!bg-dark-800 !border-dark-600 !rounded-lg [&>button]:!bg-dark-700 [&>button]:!border-dark-600 [&>button]:!fill-dark-300 [&>button:hover]:!bg-dark-600" />
<MiniMap
className="!bg-dark-800 !border-dark-600 !rounded-lg"
nodeColor="#4B5563"
maskColor="rgba(0, 0, 0, 0.5)"
/>
</ReactFlow>
{/* Action Buttons */}
@@ -149,8 +154,8 @@ function CanvasFlow() {
onClick={() => setShowChat(!showChat)}
className={`px-3 py-2 rounded-lg transition-colors ${
showChat
? 'bg-blue-100 text-blue-700'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
? 'bg-primary-600/20 text-primary-400 border border-primary-500/50'
: 'bg-dark-800 text-dark-300 hover:bg-dark-700 border border-dark-600'
}`}
title="Toggle Chat"
>
@@ -158,17 +163,17 @@ function CanvasFlow() {
</button>
<button
onClick={handleValidate}
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
className="px-4 py-2 bg-dark-700 text-white rounded-lg hover:bg-dark-600 border border-dark-600 transition-colors"
>
Validate
</button>
<button
onClick={handleAnalyze}
disabled={!validation.valid}
className={`px-4 py-2 rounded-lg transition-colors ${
className={`px-4 py-2 rounded-lg transition-colors border ${
validation.valid
? 'bg-purple-600 text-white hover:bg-purple-700'
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
? 'bg-purple-600 text-white hover:bg-purple-500 border-purple-500'
: 'bg-dark-800 text-dark-500 cursor-not-allowed border-dark-700'
}`}
>
Analyze
@@ -176,10 +181,10 @@ function CanvasFlow() {
<button
onClick={handleExecuteClick}
disabled={!validation.valid}
className={`px-4 py-2 rounded-lg transition-colors ${
className={`px-4 py-2 rounded-lg transition-colors border ${
validation.valid
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
? 'bg-primary-600 text-white hover:bg-primary-500 border-primary-500'
: 'bg-dark-800 text-dark-500 cursor-not-allowed border-dark-700'
}`}
>
Execute with Claude
@@ -194,12 +199,12 @@ function CanvasFlow() {
{/* Right: Config Panel or Chat */}
{showChat ? (
<div className="w-96 border-l border-gray-200 flex flex-col bg-white">
<div className="p-3 border-b border-gray-200 flex justify-between items-center">
<h3 className="font-semibold text-gray-800">Claude Assistant</h3>
<div className="w-96 border-l border-dark-700 flex flex-col bg-dark-850">
<div className="p-3 border-b border-dark-700 flex justify-between items-center">
<h3 className="font-semibold text-white">Claude Assistant</h3>
<button
onClick={() => setShowChat(false)}
className="text-gray-500 hover:text-gray-700"
className="text-dark-400 hover:text-white transition-colors"
>
✕
</button>

34
atomizer-dashboard/frontend/src/components/canvas/nodes/BaseNode.tsx
View File

@@ -16,7 +16,7 @@ function BaseNodeComponent({
selected,
icon,
color,
colorBg = 'bg-gray-50',
colorBg = 'bg-dark-700',
children,
inputs = 1,
outputs = 1,
@@ -27,13 +27,13 @@ function BaseNodeComponent({
return (
<div
className={`
group relative px-4 py-3 rounded-xl border-2 min-w-[200px] bg-white
group relative px-4 py-3 rounded-xl border-2 min-w-[200px] bg-dark-800
transition-all duration-300 ease-out
${selected
? 'border-blue-500 shadow-xl shadow-blue-100 scale-[1.02]'
: 'border-gray-200 shadow-md hover:shadow-lg hover:border-gray-300'}
? 'border-primary-500 shadow-xl shadow-primary-500/20 scale-[1.02]'
: 'border-dark-600 shadow-md hover:shadow-lg hover:border-dark-500'}
${!isConfigured ? 'border-dashed opacity-80' : ''}
${hasError ? 'border-red-400 shadow-red-100' : ''}
${hasError ? 'border-red-500/70 shadow-red-500/20' : ''}
`}
style={{
animation: 'nodeAppear 0.3s ease-out',
@@ -42,9 +42,9 @@ function BaseNodeComponent({
{/* Glow effect on selection */}
{selected && (
<div
className="absolute inset-0 -z-10 rounded-xl opacity-20"
className="absolute inset-0 -z-10 rounded-xl opacity-30"
style={{
background: 'radial-gradient(ellipse at center, #3b82f6 0%, transparent 70%)',
background: 'radial-gradient(ellipse at center, #6366f1 0%, transparent 70%)',
transform: 'scale(1.3)',
}}
/>
@@ -56,9 +56,9 @@ function BaseNodeComponent({
type="target"
position={Position.Left}
className={`
!w-4 !h-4 !border-2 !border-white !shadow-md
!w-4 !h-4 !border-2 !border-dark-800 !shadow-md
transition-all duration-200
${selected ? '!bg-blue-500' : '!bg-gray-400 group-hover:!bg-gray-500'}
${selected ? '!bg-primary-500' : '!bg-dark-400 group-hover:!bg-dark-300'}
`}
style={{ left: -8 }}
/>
@@ -74,16 +74,16 @@ function BaseNodeComponent({
<span className={`text-lg ${color}`}>{icon}</span>
</div>
<div className="flex-1">
<span className="font-semibold text-gray-800 text-sm">{data.label}</span>
<span className="font-semibold text-white text-sm">{data.label}</span>
{!isConfigured && (
<span className="ml-2 text-xs text-orange-500 animate-pulse">Needs config</span>
<span className="ml-2 text-xs text-amber-400 animate-pulse">Needs config</span>
)}
</div>
</div>
{/* Content */}
{children && (
<div className="text-sm text-gray-600 mt-2 pl-11">
<div className="text-sm text-dark-300 mt-2 pl-11">
{children}
</div>
)}
@@ -95,14 +95,14 @@ function BaseNodeComponent({
) : isConfigured ? (
<span className="w-2 h-2 bg-green-500 rounded-full block" />
) : (
<span className="w-2 h-2 bg-orange-400 rounded-full block" />
<span className="w-2 h-2 bg-amber-400 rounded-full block" />
)}
</div>
{/* Errors */}
{hasError && (
<div className="mt-3 pt-2 border-t border-red-100">
<p className="text-xs text-red-600 flex items-center gap-1">
<div className="mt-3 pt-2 border-t border-red-500/30">
<p className="text-xs text-red-400 flex items-center gap-1">
<span>⚠</span>
{data.errors?.[0]}
</p>
@@ -115,9 +115,9 @@ function BaseNodeComponent({
type="source"
position={Position.Right}
className={`
!w-4 !h-4 !border-2 !border-white !shadow-md
!w-4 !h-4 !border-2 !border-dark-800 !shadow-md
transition-all duration-200
${selected ? '!bg-blue-500' : '!bg-gray-400 group-hover:!bg-gray-500'}
${selected ? '!bg-primary-500' : '!bg-dark-400 group-hover:!bg-dark-300'}
`}
style={{ right: -8 }}
/>

13
atomizer-dashboard/frontend/src/components/canvas/palette/NodePalette.tsx
View File

@@ -26,8 +26,8 @@ export function NodePalette() {
};
return (
<div className="w-64 bg-gray-50 border-r border-gray-200 p-4 overflow-y-auto">
<h3 className="text-sm font-semibold text-gray-500 uppercase mb-4">
<div className="w-64 bg-dark-850 border-r border-dark-700 p-4 overflow-y-auto">
<h3 className="text-sm font-semibold text-dark-400 uppercase mb-4 tracking-wide">
Components
</h3>
<div className="space-y-2">
@@ -36,13 +36,14 @@ export function NodePalette() {
key={item.type}
draggable
onDragStart={(e) => onDragStart(e, item.type)}
className="flex items-center gap-3 p-3 bg-white rounded-lg border border-gray-200
cursor-grab hover:border-blue-300 hover:shadow-sm transition-all"
className="flex items-center gap-3 p-3 bg-dark-800 rounded-lg border border-dark-600
cursor-grab hover:border-primary-500/50 hover:bg-dark-750 transition-all
active:cursor-grabbing"
>
<span className="text-xl">{item.icon}</span>
<div>
<div className="font-medium text-gray-800">{item.label}</div>
<div className="text-xs text-gray-500">{item.description}</div>
<div className="font-medium text-white">{item.label}</div>
<div className="text-xs text-dark-400">{item.description}</div>
</div>
</div>
))}

8
atomizer-dashboard/frontend/src/components/canvas/panels/ChatPanel.tsx
View File

@@ -20,15 +20,15 @@ export function ChatPanel({ messages, isThinking }: ChatPanelProps) {
}, [messages, isThinking]);
return (
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-dark-900">
{/* Welcome message if no messages */}
{messages.length === 0 && !isThinking && (
<div className="text-center py-8">
<div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mx-auto mb-4">
<div className="w-12 h-12 rounded-xl bg-primary-500/20 flex items-center justify-center mx-auto mb-4">
<span className="text-2xl">🧠</span>
</div>
<p className="text-gray-500 text-sm max-w-xs mx-auto">
Use <strong>Validate</strong>, <strong>Analyze</strong>, or <strong>Execute</strong> to interact with Claude about your optimization workflow.
<p className="text-dark-400 text-sm max-w-xs mx-auto">
Use <strong className="text-white">Validate</strong>, <strong className="text-white">Analyze</strong>, or <strong className="text-white">Execute</strong> to interact with Claude about your optimization workflow.
</p>
</div>
)}

44
atomizer-dashboard/frontend/src/components/canvas/panels/ConfigImporter.tsx
View File

@@ -110,21 +110,21 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg">
<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-lg border border-dark-700">
{/* Header */}
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h2 className="text-xl font-semibold text-gray-800">Import Configuration</h2>
<div className="px-6 py-4 border-b border-dark-700 flex justify-between items-center">
<h2 className="text-xl font-semibold text-white">Import Configuration</h2>
<button
onClick={handleClose}
className="text-gray-500 hover:text-gray-700 text-xl"
className="text-dark-400 hover:text-white text-xl transition-colors"
>
&times;
</button>
</div>
{/* Tabs */}
<div className="flex border-b border-gray-200">
<div className="flex border-b border-dark-700">
{[
{ id: 'file', label: 'Upload File' },
{ id: 'paste', label: 'Paste JSON' },
@@ -135,8 +135,8 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
onClick={() => setTab(t.id as 'file' | 'paste' | 'study')}
className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
tab === t.id
? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
? 'text-primary-400 border-b-2 border-primary-500 bg-dark-800'
: 'text-dark-400 hover:text-white hover:bg-dark-800'
}`}
>
{t.label}
@@ -149,8 +149,8 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
{/* File Upload Tab */}
{tab === 'file' && (
<div className="space-y-4">
<p className="text-sm text-gray-600">
Upload an <code className="bg-gray-100 px-1 rounded">optimization_config.json</code> file
<p className="text-sm text-dark-300">
Upload an <code className="bg-dark-700 px-1 rounded text-primary-300">optimization_config.json</code> file
from an existing study.
</p>
<input
@@ -163,10 +163,10 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
<button
onClick={() => fileInputRef.current?.click()}
disabled={isLoading}
className="w-full py-8 border-2 border-dashed border-gray-300 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition-colors flex flex-col items-center gap-2"
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>
<span className="text-gray-600">
<span className="text-dark-300">
{isLoading ? 'Loading...' : 'Click to select file'}
</span>
</button>
@@ -176,7 +176,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
{/* Paste JSON Tab */}
{tab === 'paste' && (
<div className="space-y-4">
<p className="text-sm text-gray-600">
<p className="text-sm text-dark-300">
Paste your optimization configuration JSON below.
</p>
<textarea
@@ -187,12 +187,12 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
"objectives": [...],
"method": "TPE"
}`}
className="w-full h-48 px-3 py-2 border rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="w-full h-48 px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-500 rounded-lg font-mono text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
/>
<button
onClick={handlePasteImport}
disabled={!jsonText.trim()}
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
Import JSON
</button>
@@ -202,7 +202,7 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
{/* Load Study Tab */}
{tab === 'study' && (
<div className="space-y-4">
<p className="text-sm text-gray-600">
<p className="text-sm text-dark-300">
Enter a study name to load its configuration.
</p>
<input
@@ -210,12 +210,12 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
value={studyPath}
onChange={(e) => setStudyPath(e.target.value)}
placeholder="e.g., bracket_mass_v1 or M1_Mirror/m1_mirror_flatback"
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:outline-none transition-colors"
/>
<button
onClick={handleStudyLoad}
disabled={!studyPath.trim() || isLoading}
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{isLoading ? 'Loading...' : 'Load Study Config'}
</button>
@@ -224,15 +224,15 @@ export function ConfigImporter({ isOpen, onClose, onImport }: ConfigImporterProp
{/* Error Display */}
{error && (
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-700">{error}</p>
<div className="mt-4 p-3 bg-red-900/30 border border-red-500/50 rounded-lg">
<p className="text-sm text-red-400">{error}</p>
</div>
)}
</div>
{/* Footer */}
<div className="px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
<p className="text-xs text-gray-500">
<div className="px-6 py-4 border-t border-dark-700 bg-dark-800/50 rounded-b-xl">
<p className="text-xs text-dark-500">
Imported configurations will replace the current canvas content.
</p>
</div>

22
atomizer-dashboard/frontend/src/components/canvas/panels/ExecuteDialog.tsx
View File

@@ -51,9 +51,9 @@ export function ExecuteDialog({
};
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
<h2 className="text-xl font-semibold text-gray-800 mb-4">
<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">
Execute with Claude
</h2>
@@ -61,7 +61,7 @@ export function ExecuteDialog({
<div className="mb-4">
<label
htmlFor="study-name"
className="block text-sm font-medium text-gray-600 mb-1"
className="block text-sm font-medium text-dark-300 mb-1"
>
Study Name
</label>
@@ -71,14 +71,14 @@ export function ExecuteDialog({
value={studyName}
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
placeholder="my_optimization_study"
className="w-full px-3 py-2 border rounded-lg font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
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-600">{error}</p>
<p className="mt-1 text-sm text-red-400">{error}</p>
)}
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-dark-500">
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
</p>
</div>
@@ -90,9 +90,9 @@ export function ExecuteDialog({
checked={autoRun}
onChange={(e) => setAutoRun(e.target.checked)}
disabled={isExecuting}
className="w-4 h-4"
className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
/>
<span className="text-sm text-gray-700">
<span className="text-sm text-dark-300">
Start optimization immediately after creation
</span>
</label>
@@ -103,14 +103,14 @@ export function ExecuteDialog({
type="button"
onClick={handleClose}
disabled={isExecuting}
className="px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50"
className="px-4 py-2 text-dark-300 hover:text-white disabled:opacity-50 transition-colors"
>
Cancel
</button>
<button
type="submit"
disabled={isExecuting}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
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"
>
{isExecuting ? (
<>

91
atomizer-dashboard/frontend/src/components/canvas/panels/NodeConfigPanel.tsx
View File

@@ -14,6 +14,11 @@ interface NodeConfigPanelProps {
nodeId: string;
}
// Common input class for dark theme
const inputClass = "w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white placeholder-dark-400 rounded-lg focus:border-primary-500 focus:outline-none transition-colors";
const selectClass = "w-full px-3 py-2 bg-dark-800 border border-dark-600 text-white rounded-lg focus:border-primary-500 focus:outline-none transition-colors";
const labelClass = "block text-sm font-medium text-dark-300 mb-1";
export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
const { nodes, updateNodeData, deleteSelected } = useCanvasStore();
const node = nodes.find((n) => n.id === nodeId);
@@ -27,12 +32,12 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
};
return (
<div className="w-80 bg-white border-l border-gray-200 p-4 overflow-y-auto">
<div className="w-80 bg-dark-850 border-l border-dark-700 p-4 overflow-y-auto">
<div className="flex justify-between items-center mb-4">
<h3 className="font-semibold text-gray-800">Configure {data.label}</h3>
<h3 className="font-semibold text-white">Configure {data.label}</h3>
<button
onClick={deleteSelected}
className="text-red-500 hover:text-red-700 text-sm"
className="text-red-400 hover:text-red-300 text-sm transition-colors"
>
Delete
</button>
@@ -41,14 +46,14 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
<div className="space-y-4">
{/* Common: Label */}
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Label
</label>
<input
type="text"
value={data.label}
onChange={(e) => handleChange('label', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
@@ -56,7 +61,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'model' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
File Path
</label>
<input
@@ -64,17 +69,17 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as ModelNodeData).filePath || ''}
onChange={(e) => handleChange('filePath', e.target.value)}
placeholder="path/to/model.prt"
className="w-full px-3 py-2 border rounded-lg font-mono text-sm"
className={`${inputClass} font-mono text-sm`}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
File Type
</label>
<select
value={(data as ModelNodeData).fileType || ''}
onChange={(e) => handleChange('fileType', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="">Select...</option>
<option value="prt">Part (.prt)</option>
@@ -87,13 +92,13 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'solver' && (
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Solution Type
</label>
<select
value={(data as SolverNodeData).solverType || ''}
onChange={(e) => handleChange('solverType', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="">Select...</option>
<option value="SOL101">SOL 101 - Linear Static</option>
@@ -109,7 +114,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'designVar' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Expression Name
</label>
<input
@@ -117,35 +122,35 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as DesignVarNodeData).expressionName || ''}
onChange={(e) => handleChange('expressionName', e.target.value)}
placeholder="thickness"
className="w-full px-3 py-2 border rounded-lg font-mono"
className={`${inputClass} font-mono`}
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Min
</label>
<input
type="number"
value={(data as DesignVarNodeData).minValue ?? ''}
onChange={(e) => handleChange('minValue', parseFloat(e.target.value))}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Max
</label>
<input
type="number"
value={(data as DesignVarNodeData).maxValue ?? ''}
onChange={(e) => handleChange('maxValue', parseFloat(e.target.value))}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Unit
</label>
<input
@@ -153,7 +158,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as DesignVarNodeData).unit || ''}
onChange={(e) => handleChange('unit', e.target.value)}
placeholder="mm"
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</>
@@ -162,7 +167,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'extractor' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Extractor ID
</label>
<select
@@ -182,7 +187,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
handleChange('extractorId', id);
handleChange('extractorName', names[id] || id);
}}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="">Select...</option>
<option value="E1">E1 - Displacement</option>
@@ -201,13 +206,13 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'algorithm' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Method
</label>
<select
value={(data as AlgorithmNodeData).method || ''}
onChange={(e) => handleChange('method', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="">Select...</option>
<option value="TPE">TPE (Tree Parzen Estimator)</option>
@@ -218,7 +223,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Max Trials
</label>
<input
@@ -226,7 +231,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as AlgorithmNodeData).maxTrials ?? ''}
onChange={(e) => handleChange('maxTrials', parseInt(e.target.value))}
placeholder="100"
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</>
@@ -235,7 +240,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'objective' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Objective Name
</label>
<input
@@ -243,24 +248,24 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as ObjectiveNodeData).name || ''}
onChange={(e) => handleChange('name', e.target.value)}
placeholder="mass"
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Direction
</label>
<select
value={(data as ObjectiveNodeData).direction || 'minimize'}
onChange={(e) => handleChange('direction', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="minimize">Minimize</option>
<option value="maximize">Maximize</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Weight
</label>
<input
@@ -268,7 +273,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
step="0.1"
value={(data as ObjectiveNodeData).weight ?? 1}
onChange={(e) => handleChange('weight', parseFloat(e.target.value))}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</>
@@ -277,7 +282,7 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
{data.type === 'constraint' && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Constraint Name
</label>
<input
@@ -285,18 +290,18 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
value={(data as ConstraintNodeData).name || ''}
onChange={(e) => handleChange('name', e.target.value)}
placeholder="max_stress"
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Operator
</label>
<select
value={(data as ConstraintNodeData).operator || '<='}
onChange={(e) => handleChange('operator', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="<">&lt;</option>
<option value="<=">&lt;=</option>
@@ -306,14 +311,14 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Value
</label>
<input
type="number"
value={(data as ConstraintNodeData).value ?? ''}
onChange={(e) => handleChange('value', parseFloat(e.target.value))}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</div>
@@ -328,22 +333,22 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
id="surrogate-enabled"
checked={(data as SurrogateNodeData).enabled || false}
onChange={(e) => handleChange('enabled', e.target.checked)}
className="w-4 h-4"
className="w-4 h-4 rounded bg-dark-800 border-dark-600 text-primary-500 focus:ring-primary-500"
/>
<label htmlFor="surrogate-enabled" className="text-sm font-medium text-gray-600">
<label htmlFor="surrogate-enabled" className="text-sm font-medium text-dark-300">
Enable Neural Surrogate
</label>
</div>
{(data as SurrogateNodeData).enabled && (
<>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Model Type
</label>
<select
value={(data as SurrogateNodeData).modelType || ''}
onChange={(e) => handleChange('modelType', e.target.value)}
className="w-full px-3 py-2 border rounded-lg"
className={selectClass}
>
<option value="">Select...</option>
<option value="MLP">MLP (Multi-Layer Perceptron)</option>
@@ -352,14 +357,14 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-600 mb-1">
<label className={labelClass}>
Min Trials Before Activation
</label>
<input
type="number"
value={(data as SurrogateNodeData).minTrials ?? 20}
onChange={(e) => handleChange('minTrials', parseInt(e.target.value))}
className="w-full px-3 py-2 border rounded-lg"
className={inputClass}
/>
</div>
</>

52
atomizer-dashboard/frontend/src/components/canvas/panels/TemplateSelector.tsx
View File

@@ -42,39 +42,39 @@ export function TemplateSelector({ isOpen, onClose, onSelect }: TemplateSelector
];
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm">
<div
className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col overflow-hidden"
className="bg-dark-850 rounded-xl shadow-2xl w-full max-w-4xl max-h-[80vh] flex flex-col overflow-hidden border border-dark-700"
style={{ animation: 'fadeIn 0.2s ease-out' }}
>
{/* Header */}
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center bg-gradient-to-r from-blue-50 to-purple-50">
<div className="px-6 py-4 border-b border-dark-700 flex justify-between items-center bg-gradient-to-r from-primary-900/30 to-purple-900/30">
<div>
<h2 className="text-xl font-semibold text-gray-800">Choose a Template</h2>
<p className="text-sm text-gray-500 mt-0.5">Start with a pre-configured optimization workflow</p>
<h2 className="text-xl font-semibold text-white">Choose a Template</h2>
<p className="text-sm text-dark-400 mt-0.5">Start with a pre-configured optimization workflow</p>
</div>
<button
onClick={onClose}
className="w-8 h-8 flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
className="w-8 h-8 flex items-center justify-center text-dark-400 hover:text-white hover:bg-dark-700 rounded-full transition-colors"
>
&times;
</button>
</div>
{/* Category Filters */}
<div className="px-6 py-3 border-b border-gray-100 flex gap-2 bg-gray-50">
<div className="px-6 py-3 border-b border-dark-700 flex gap-2 bg-dark-800">
{categories.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id as typeof selectedCategory)}
className={`px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
selectedCategory === cat.id
? 'bg-blue-600 text-white shadow-sm'
: 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
? 'bg-primary-600 text-white shadow-sm'
: 'bg-dark-700 text-dark-300 hover:bg-dark-600 border border-dark-600'
}`}
>
{cat.label}
<span className={`ml-1.5 ${selectedCategory === cat.id ? 'text-blue-200' : 'text-gray-400'}`}>
<span className={`ml-1.5 ${selectedCategory === cat.id ? 'text-primary-200' : 'text-dark-500'}`}>
({cat.count})
</span>
</button>
@@ -82,7 +82,7 @@ export function TemplateSelector({ isOpen, onClose, onSelect }: TemplateSelector
</div>
{/* Template Grid */}
<div className="flex-1 overflow-y-auto p-6">
<div className="flex-1 overflow-y-auto p-6 bg-dark-900">
<div className="grid grid-cols-2 gap-4">
{filteredTemplates.map((template) => (
<TemplateCard
@@ -98,19 +98,19 @@ export function TemplateSelector({ isOpen, onClose, onSelect }: TemplateSelector
{filteredTemplates.length === 0 && (
<div className="text-center py-12">
<p className="text-gray-500">No templates in this category</p>
<p className="text-dark-500">No templates in this category</p>
</div>
)}
</div>
{/* Footer */}
<div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex justify-between items-center">
<p className="text-xs text-gray-500">
<div className="px-6 py-3 border-t border-dark-700 bg-dark-800 flex justify-between items-center">
<p className="text-xs text-dark-500">
Templates provide a starting point - customize parameters after loading
</p>
<button
onClick={onClose}
className="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm"
className="px-4 py-2 text-dark-400 hover:text-white text-sm transition-colors"
>
Cancel
</button>
@@ -147,17 +147,17 @@ function TemplateCard({ template, isHovered, onHover, onLeave, onSelect }: Templ
};
const categoryColors = {
structural: 'bg-orange-100 text-orange-700',
optical: 'bg-purple-100 text-purple-700',
general: 'bg-blue-100 text-blue-700',
structural: 'bg-orange-500/20 text-orange-400',
optical: 'bg-purple-500/20 text-purple-400',
general: 'bg-blue-500/20 text-blue-400',
};
return (
<div
className={`border rounded-xl p-4 cursor-pointer transition-all duration-200 ${
isHovered
? 'border-blue-400 shadow-lg transform -translate-y-0.5 bg-blue-50/30'
: 'border-gray-200 hover:border-gray-300 bg-white'
? 'border-primary-500/70 shadow-lg shadow-primary-500/10 transform -translate-y-0.5 bg-dark-750'
: 'border-dark-600 hover:border-dark-500 bg-dark-800'
}`}
onMouseEnter={onHover}
onMouseLeave={onLeave}
@@ -168,24 +168,24 @@ function TemplateCard({ template, isHovered, onHover, onLeave, onSelect }: Templ
<div className="flex items-center gap-3">
<span className="text-2xl">{template.icon}</span>
<div>
<h3 className="font-semibold text-gray-800">{template.name}</h3>
<h3 className="font-semibold text-white">{template.name}</h3>
<span className={`text-xs px-2 py-0.5 rounded-full ${categoryColors[template.category]}`}>
{template.category}
</span>
</div>
</div>
{stats.hasSurrogate && (
<span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full">
<span className="text-xs px-2 py-1 bg-green-500/20 text-green-400 rounded-full">
Turbo
</span>
)}
</div>
{/* Description */}
<p className="text-sm text-gray-600 mb-4 line-clamp-2">{template.description}</p>
<p className="text-sm text-dark-300 mb-4 line-clamp-2">{template.description}</p>
{/* Stats */}
<div className="flex gap-4 text-xs text-gray-500">
<div className="flex gap-4 text-xs text-dark-400">
<div className="flex items-center gap-1">
<span className="w-2 h-2 rounded-full bg-blue-400"></span>
<span>{stats.designVars} vars</span>
@@ -199,7 +199,7 @@ function TemplateCard({ template, isHovered, onHover, onLeave, onSelect }: Templ
<span>{stats.constraints} con</span>
</div>
<div className="flex items-center gap-1">
<span className="font-medium text-gray-600">{stats.method}</span>
<span className="font-medium text-dark-300">{stats.method}</span>
</div>
</div>
@@ -210,7 +210,7 @@ function TemplateCard({ template, isHovered, onHover, onLeave, onSelect }: Templ
}`}
>
<button
className="w-full py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
className="w-full py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-500 transition-colors"
onClick={(e) => {
e.stopPropagation();
onSelect();

12
atomizer-dashboard/frontend/src/components/canvas/panels/ValidationPanel.tsx
View File

@@ -8,9 +8,9 @@ export function ValidationPanel({ validation }: ValidationPanelProps) {
return (
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 max-w-md w-full z-10">
{validation.errors.length > 0 && (
<div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-2">
<div className="font-medium text-red-800 mb-1">Errors</div>
<ul className="text-sm text-red-600 list-disc list-inside">
<div className="bg-red-900/30 border border-red-500/50 rounded-lg p-3 mb-2 backdrop-blur-sm">
<div className="font-medium text-red-400 mb-1">Errors</div>
<ul className="text-sm text-red-300 list-disc list-inside">
{validation.errors.map((error, i) => (
<li key={i}>{error}</li>
))}
@@ -18,9 +18,9 @@ export function ValidationPanel({ validation }: ValidationPanelProps) {
</div>
)}
{validation.warnings.length > 0 && (
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
<div className="font-medium text-yellow-800 mb-1">Warnings</div>
<ul className="text-sm text-yellow-600 list-disc list-inside">
<div className="bg-amber-900/30 border border-amber-500/50 rounded-lg p-3 backdrop-blur-sm">
<div className="font-medium text-amber-400 mb-1">Warnings</div>
<ul className="text-sm text-amber-300 list-disc list-inside">
{validation.warnings.map((warning, i) => (
<li key={i}>{warning}</li>
))}

59
atomizer-dashboard/frontend/src/pages/Setup.tsx
View File

@@ -19,12 +19,15 @@ import {
Info,
FileBox,
FolderOpen,
File
File,
Layout,
Grid3X3
} from 'lucide-react';
import { useStudy } from '../context/StudyContext';
import { Card } from '../components/common/Card';
import { Button } from '../components/common/Button';
import { apiClient, ModelFile } from '../api/client';
import { AtomizerCanvas } from '../components/canvas/AtomizerCanvas';
interface StudyConfig {
study_name: string;
@@ -71,9 +74,12 @@ interface StudyConfig {
}[];
}
type TabType = 'config' | 'canvas';
export default function Setup() {
const navigate = useNavigate();
const { selectedStudy, isInitialized } = useStudy();
const [activeTab, setActiveTab] = useState<TabType>('config');
const [config, setConfig] = useState<StudyConfig | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -248,8 +254,59 @@ export default function Setup() {
return acc * 1000; // Approximate for continuous
}, 1) || 0;
// Canvas tab - full height
if (activeTab === 'canvas') {
return (
<div className="w-full h-full flex flex-col">
{/* Tab Bar */}
<div className="flex items-center gap-2 mb-4 border-b border-dark-700 pb-4">
<button
onClick={() => setActiveTab('config')}
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-dark-800 text-dark-300 hover:text-white hover:bg-dark-700"
>
<Layout className="w-4 h-4" />
Configuration
</button>
<button
onClick={() => setActiveTab('canvas')}
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-primary-600 text-white"
>
<Grid3X3 className="w-4 h-4" />
Canvas Builder
</button>
<div className="flex-1" />
<span className="text-dark-400 text-sm">
{selectedStudy?.name || 'Study'}
</span>
</div>
{/* Canvas - takes remaining height */}
<div className="flex-1 min-h-0 rounded-lg overflow-hidden border border-dark-700">
<AtomizerCanvas />
</div>
</div>
);
}
return (
<div className="w-full">
{/* Tab Bar */}
<div className="flex items-center gap-2 mb-4">
<button
onClick={() => setActiveTab('config')}
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-primary-600 text-white"
>
<Layout className="w-4 h-4" />
Configuration
</button>
<button
onClick={() => setActiveTab('canvas')}
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-colors bg-dark-800 text-dark-300 hover:text-white hover:bg-dark-700"
>
<Grid3X3 className="w-4 h-4" />
Canvas Builder
</button>
</div>
{/* Header */}
<header className="mb-6 flex items-center justify-between border-b border-dark-600 pb-4">
<div>