Anto01
62284a995e
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>
72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
import { DragEvent } from 'react';
|
|
import { NodeType } from '../../../lib/canvas/schema';
|
|
import {
|
|
Box,
|
|
Cpu,
|
|
SlidersHorizontal,
|
|
FlaskConical,
|
|
Target,
|
|
ShieldAlert,
|
|
BrainCircuit,
|
|
Rocket,
|
|
} from 'lucide-react';
|
|
|
|
interface PaletteItem {
|
|
type: NodeType;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
description: string;
|
|
color: string;
|
|
}
|
|
|
|
const PALETTE_ITEMS: PaletteItem[] = [
|
|
{ type: 'model', label: 'Model', icon: <Box size={18} />, description: 'NX model file (.prt, .sim)', color: 'text-blue-400' },
|
|
{ type: 'solver', label: 'Solver', icon: <Cpu size={18} />, description: 'Nastran solution type', color: 'text-violet-400' },
|
|
{ type: 'designVar', label: 'Design Variable', icon: <SlidersHorizontal size={18} />, description: 'Parameter to optimize', color: 'text-emerald-400' },
|
|
{ type: 'extractor', label: 'Extractor', icon: <FlaskConical size={18} />, description: 'Physics result extraction', color: 'text-cyan-400' },
|
|
{ type: 'objective', label: 'Objective', icon: <Target size={18} />, description: 'Optimization goal', color: 'text-rose-400' },
|
|
{ type: 'constraint', label: 'Constraint', icon: <ShieldAlert size={18} />, description: 'Design constraint', color: 'text-amber-400' },
|
|
{ type: 'algorithm', label: 'Algorithm', icon: <BrainCircuit size={18} />, description: 'Optimization method', color: 'text-indigo-400' },
|
|
{ type: 'surrogate', label: 'Surrogate', icon: <Rocket size={18} />, description: 'Neural acceleration', color: 'text-pink-400' },
|
|
];
|
|
|
|
export function NodePalette() {
|
|
const onDragStart = (event: DragEvent, nodeType: NodeType) => {
|
|
event.dataTransfer.setData('application/reactflow', nodeType);
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
};
|
|
|
|
return (
|
|
<div className="w-60 bg-dark-850 border-r border-dark-700 flex flex-col">
|
|
<div className="p-4 border-b border-dark-700">
|
|
<h3 className="text-sm font-semibold text-dark-300 uppercase tracking-wider">
|
|
Components
|
|
</h3>
|
|
<p className="text-xs text-dark-400 mt-1">
|
|
Drag to canvas
|
|
</p>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-3 space-y-2">
|
|
{PALETTE_ITEMS.map((item) => (
|
|
<div
|
|
key={item.type}
|
|
draggable
|
|
onDragStart={(e) => onDragStart(e, item.type)}
|
|
className="flex items-center gap-3 px-3 py-3 bg-dark-800/50 rounded-lg border border-dark-700/50
|
|
cursor-grab hover:border-primary-500/50 hover:bg-dark-800
|
|
active:cursor-grabbing transition-all group"
|
|
>
|
|
<div className={`${item.color} opacity-90 group-hover:opacity-100 transition-opacity`}>
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-semibold text-white text-sm leading-tight">{item.label}</div>
|
|
<div className="text-xs text-dark-400 truncate">{item.description}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|