feat(canvas): Add file browser, introspection, and improve node flow
Phase 1-7 of Canvas V4 Ralph Loop implementation: Backend: - Add /api/files routes for browsing model files - Add /api/nx routes for NX model introspection - Add NXIntrospector service to discover expressions and extractors - Add health check with database status Frontend: - Add FileBrowser component for selecting .sim/.prt/.fem files - Add IntrospectionPanel to discover expressions and extractors - Update NodeConfigPanel with browse and introspect buttons - Update schema with NODE_HANDLES for proper flow direction - Update validation for correct DesignVar -> Model -> Solver flow - Update useCanvasStore.addNode() to accept custom data Flow correction: Design Variables now connect TO Model (as source), not FROM Model. This matches the actual data flow in optimization. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,248 @@
|
||||
/**
|
||||
* File Browser - Modal for selecting NX model files
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
X,
|
||||
Folder,
|
||||
FileBox,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Search,
|
||||
RefreshCw,
|
||||
Home,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface FileBrowserProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (filePath: string, fileType: string) => void;
|
||||
fileTypes?: string[];
|
||||
initialPath?: string;
|
||||
}
|
||||
|
||||
interface FileEntry {
|
||||
name: string;
|
||||
path: string;
|
||||
isDirectory: boolean;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
export function FileBrowser({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSelect,
|
||||
fileTypes = ['.sim', '.prt', '.fem', '.afem'],
|
||||
initialPath = '',
|
||||
}: FileBrowserProps) {
|
||||
const [currentPath, setCurrentPath] = useState(initialPath);
|
||||
const [files, setFiles] = useState<FileEntry[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadDirectory = useCallback(async (path: string) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const typesParam = fileTypes.join(',');
|
||||
const res = await fetch(
|
||||
`/api/files/list?path=${encodeURIComponent(path)}&types=${encodeURIComponent(typesParam)}`
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to load directory');
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
setError(data.error);
|
||||
setFiles([]);
|
||||
} else {
|
||||
setFiles(data.files || []);
|
||||
}
|
||||
} catch (e) {
|
||||
setError('Failed to load files');
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [fileTypes]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
loadDirectory(currentPath);
|
||||
}
|
||||
}, [isOpen, currentPath, loadDirectory]);
|
||||
|
||||
const handleSelect = (file: FileEntry) => {
|
||||
if (file.isDirectory) {
|
||||
setCurrentPath(file.path);
|
||||
setSearchTerm('');
|
||||
} else {
|
||||
const ext = '.' + file.name.split('.').pop()?.toLowerCase();
|
||||
onSelect(file.path, ext);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const navigateUp = () => {
|
||||
const parts = currentPath.split('/').filter(Boolean);
|
||||
parts.pop();
|
||||
setCurrentPath(parts.join('/'));
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const navigateTo = (path: string) => {
|
||||
setCurrentPath(path);
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const filteredFiles = files.filter((f) =>
|
||||
f.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const pathParts = currentPath.split('/').filter(Boolean);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div className="bg-dark-850 border border-dark-700 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col shadow-2xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-dark-700">
|
||||
<h3 className="font-semibold text-white">Select Model File</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 text-dark-400 hover:text-white hover:bg-dark-700 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="px-4 py-3 border-b border-dark-700">
|
||||
<div className="relative">
|
||||
<Search
|
||||
size={16}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-dark-500"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search files..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-9 pr-4 py-2 bg-dark-800 border border-dark-600 rounded-lg
|
||||
text-white placeholder-dark-500 text-sm focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 text-xs text-dark-500">
|
||||
<span>Looking for:</span>
|
||||
{fileTypes.map((t) => (
|
||||
<span key={t} className="px-1.5 py-0.5 bg-dark-700 rounded">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Path breadcrumb */}
|
||||
<div className="px-4 py-2 text-sm text-dark-400 flex items-center gap-1 border-b border-dark-700 overflow-x-auto">
|
||||
<button
|
||||
onClick={() => navigateTo('')}
|
||||
className="hover:text-white flex items-center gap-1 flex-shrink-0"
|
||||
>
|
||||
<Home size={14} />
|
||||
<span>studies</span>
|
||||
</button>
|
||||
{pathParts.map((part, i) => (
|
||||
<span key={i} className="flex items-center gap-1 flex-shrink-0">
|
||||
<ChevronRight size={14} />
|
||||
<button
|
||||
onClick={() => navigateTo(pathParts.slice(0, i + 1).join('/'))}
|
||||
className="hover:text-white"
|
||||
>
|
||||
{part}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* File list */}
|
||||
<div className="flex-1 overflow-auto p-2">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32 text-dark-500">
|
||||
<RefreshCw size={20} className="animate-spin mr-2" />
|
||||
Loading...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center justify-center h-32 text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
) : filteredFiles.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-32 text-dark-500">
|
||||
{searchTerm ? 'No matching files found' : 'No model files in this directory'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{/* Show parent directory link if not at root */}
|
||||
{currentPath && (
|
||||
<button
|
||||
onClick={navigateUp}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left
|
||||
hover:bg-dark-700 transition-colors text-dark-300"
|
||||
>
|
||||
<ChevronDown size={16} className="text-dark-500 rotate-90" />
|
||||
<Folder size={16} className="text-dark-400" />
|
||||
<span>..</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{filteredFiles.map((file) => (
|
||||
<button
|
||||
key={file.path}
|
||||
onClick={() => handleSelect(file)}
|
||||
className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left
|
||||
hover:bg-dark-700 transition-colors
|
||||
${file.isDirectory ? 'text-dark-300' : 'text-white'}`}
|
||||
>
|
||||
{file.isDirectory ? (
|
||||
<>
|
||||
<ChevronRight size={16} className="text-dark-500" />
|
||||
<Folder size={16} className="text-amber-400" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="w-4" />
|
||||
<FileBox size={16} className="text-primary-400" />
|
||||
</>
|
||||
)}
|
||||
<span className="flex-1 truncate">{file.name}</span>
|
||||
{!file.isDirectory && (
|
||||
<span className="text-xs text-dark-500 uppercase">
|
||||
{file.name.split('.').pop()}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-4 py-3 border-t border-dark-700 flex justify-between items-center">
|
||||
<button
|
||||
onClick={() => loadDirectory(currentPath)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-dark-400 hover:text-white transition-colors"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-dark-300 hover:text-white transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,376 @@
|
||||
/**
|
||||
* Introspection Panel - Shows discovered expressions and extractors from NX model
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
X,
|
||||
Search,
|
||||
RefreshCw,
|
||||
Plus,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FileBox,
|
||||
Cpu,
|
||||
FlaskConical,
|
||||
SlidersHorizontal,
|
||||
AlertTriangle,
|
||||
} from 'lucide-react';
|
||||
import { useCanvasStore } from '../../../hooks/useCanvasStore';
|
||||
|
||||
interface IntrospectionPanelProps {
|
||||
filePath: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface Expression {
|
||||
name: string;
|
||||
value: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
unit: string;
|
||||
type: string;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
interface Extractor {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
always?: boolean;
|
||||
}
|
||||
|
||||
interface DependentFile {
|
||||
path: string;
|
||||
type: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface IntrospectionResult {
|
||||
file_path: string;
|
||||
file_type: string;
|
||||
expressions: Expression[];
|
||||
solver_type: string | null;
|
||||
dependent_files: DependentFile[];
|
||||
extractors_available: Extractor[];
|
||||
warnings: string[];
|
||||
}
|
||||
|
||||
export function IntrospectionPanel({ filePath, onClose }: IntrospectionPanelProps) {
|
||||
const [result, setResult] = useState<IntrospectionResult | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [expandedSections, setExpandedSections] = useState<Set<string>>(
|
||||
new Set(['expressions', 'extractors'])
|
||||
);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const { addNode, nodes } = useCanvasStore();
|
||||
|
||||
const runIntrospection = useCallback(async () => {
|
||||
if (!filePath) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch('/api/nx/introspect', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ file_path: filePath }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Introspection failed');
|
||||
const data = await res.json();
|
||||
setResult(data);
|
||||
} catch (e) {
|
||||
setError('Failed to introspect model');
|
||||
console.error(e);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [filePath]);
|
||||
|
||||
useEffect(() => {
|
||||
runIntrospection();
|
||||
}, [runIntrospection]);
|
||||
|
||||
const toggleSection = (section: string) => {
|
||||
setExpandedSections((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(section)) next.delete(section);
|
||||
else next.add(section);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const addExpressionAsDesignVar = (expr: Expression) => {
|
||||
// Find a good position (left of model node)
|
||||
const modelNode = nodes.find((n) => n.data.type === 'model');
|
||||
const existingDvars = nodes.filter((n) => n.data.type === 'designVar');
|
||||
|
||||
const position = {
|
||||
x: (modelNode?.position.x || 300) - 250,
|
||||
y: (modelNode?.position.y || 100) + existingDvars.length * 100,
|
||||
};
|
||||
|
||||
// Calculate min/max based on value if not provided
|
||||
const minValue = expr.min ?? expr.value * 0.5;
|
||||
const maxValue = expr.max ?? expr.value * 1.5;
|
||||
|
||||
addNode('designVar', position, {
|
||||
label: expr.name,
|
||||
expressionName: expr.name,
|
||||
minValue,
|
||||
maxValue,
|
||||
unit: expr.unit,
|
||||
configured: true,
|
||||
});
|
||||
};
|
||||
|
||||
const addExtractorNode = (extractor: Extractor) => {
|
||||
// Find a good position (right of solver node)
|
||||
const solverNode = nodes.find((n) => n.data.type === 'solver');
|
||||
const existingExtractors = nodes.filter((n) => n.data.type === 'extractor');
|
||||
|
||||
const position = {
|
||||
x: (solverNode?.position.x || 400) + 200,
|
||||
y: (solverNode?.position.y || 100) + existingExtractors.length * 100,
|
||||
};
|
||||
|
||||
addNode('extractor', position, {
|
||||
label: extractor.name,
|
||||
extractorId: extractor.id,
|
||||
extractorName: extractor.name,
|
||||
configured: true,
|
||||
});
|
||||
};
|
||||
|
||||
const filteredExpressions =
|
||||
result?.expressions.filter((e) =>
|
||||
e.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
) || [];
|
||||
|
||||
return (
|
||||
<div className="bg-dark-850 border border-dark-700 rounded-xl w-80 max-h-[70vh] flex flex-col shadow-xl">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-dark-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Search size={16} className="text-primary-400" />
|
||||
<span className="font-medium text-white text-sm">Model Introspection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={runIntrospection}
|
||||
disabled={isLoading}
|
||||
className="p-1.5 text-dark-400 hover:text-white hover:bg-dark-700 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={14} className={isLoading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 text-dark-400 hover:text-white hover:bg-dark-700 rounded transition-colors"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="px-4 py-2 border-b border-dark-700">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter expressions..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-3 py-1.5 bg-dark-800 border border-dark-600 rounded-lg
|
||||
text-sm text-white placeholder-dark-500 focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-32 text-dark-500">
|
||||
<RefreshCw size={20} className="animate-spin mr-2" />
|
||||
Analyzing model...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-4 text-red-400 text-sm">{error}</div>
|
||||
) : result ? (
|
||||
<div className="p-2 space-y-2">
|
||||
{/* Solver Type */}
|
||||
{result.solver_type && (
|
||||
<div className="p-2 bg-dark-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Cpu size={14} className="text-violet-400" />
|
||||
<span className="text-dark-300">Solver:</span>
|
||||
<span className="text-white font-medium">{result.solver_type}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expressions Section */}
|
||||
<div className="border border-dark-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection('expressions')}
|
||||
className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<SlidersHorizontal size={14} className="text-emerald-400" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Expressions ({filteredExpressions.length})
|
||||
</span>
|
||||
</div>
|
||||
{expandedSections.has('expressions') ? (
|
||||
<ChevronDown size={14} className="text-dark-400" />
|
||||
) : (
|
||||
<ChevronRight size={14} className="text-dark-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{expandedSections.has('expressions') && (
|
||||
<div className="p-2 space-y-1 max-h-48 overflow-y-auto">
|
||||
{filteredExpressions.length === 0 ? (
|
||||
<p className="text-xs text-dark-500 text-center py-2">
|
||||
No expressions found
|
||||
</p>
|
||||
) : (
|
||||
filteredExpressions.map((expr) => (
|
||||
<div
|
||||
key={expr.name}
|
||||
className="flex items-center justify-between p-2 bg-dark-850 rounded hover:bg-dark-750 group transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{expr.name}</p>
|
||||
<p className="text-xs text-dark-500">
|
||||
{expr.value} {expr.unit}
|
||||
{expr.source === 'inferred' && (
|
||||
<span className="ml-1 text-amber-500">(inferred)</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => addExpressionAsDesignVar(expr)}
|
||||
className="p-1.5 text-dark-500 hover:text-primary-400 hover:bg-dark-700 rounded
|
||||
opacity-0 group-hover:opacity-100 transition-all"
|
||||
title="Add as Design Variable"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Extractors Section */}
|
||||
<div className="border border-dark-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection('extractors')}
|
||||
className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FlaskConical size={14} className="text-cyan-400" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Available Extractors ({result.extractors_available.length})
|
||||
</span>
|
||||
</div>
|
||||
{expandedSections.has('extractors') ? (
|
||||
<ChevronDown size={14} className="text-dark-400" />
|
||||
) : (
|
||||
<ChevronRight size={14} className="text-dark-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{expandedSections.has('extractors') && (
|
||||
<div className="p-2 space-y-1 max-h-48 overflow-y-auto">
|
||||
{result.extractors_available.map((ext) => (
|
||||
<div
|
||||
key={ext.id}
|
||||
className="flex items-center justify-between p-2 bg-dark-850 rounded hover:bg-dark-750 group transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white">{ext.name}</p>
|
||||
<p className="text-xs text-dark-500">
|
||||
{ext.id}
|
||||
{ext.description && ` - ${ext.description}`}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => addExtractorNode(ext)}
|
||||
className="p-1.5 text-dark-500 hover:text-primary-400 hover:bg-dark-700 rounded
|
||||
opacity-0 group-hover:opacity-100 transition-all"
|
||||
title="Add Extractor"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dependent Files */}
|
||||
{result.dependent_files.length > 0 && (
|
||||
<div className="border border-dark-700 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleSection('files')}
|
||||
className="w-full flex items-center justify-between px-3 py-2 bg-dark-800 hover:bg-dark-750 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileBox size={14} className="text-amber-400" />
|
||||
<span className="text-sm font-medium text-white">
|
||||
Dependent Files ({result.dependent_files.length})
|
||||
</span>
|
||||
</div>
|
||||
{expandedSections.has('files') ? (
|
||||
<ChevronDown size={14} className="text-dark-400" />
|
||||
) : (
|
||||
<ChevronRight size={14} className="text-dark-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{expandedSections.has('files') && (
|
||||
<div className="p-2 space-y-1 max-h-32 overflow-y-auto">
|
||||
{result.dependent_files.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
className="flex items-center gap-2 p-2 bg-dark-850 rounded"
|
||||
>
|
||||
<FileBox size={14} className="text-dark-400 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-white truncate">{file.name}</p>
|
||||
<p className="text-xs text-dark-500">{file.type}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Warnings */}
|
||||
{result.warnings.length > 0 && (
|
||||
<div className="p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<AlertTriangle size={12} className="text-amber-400" />
|
||||
<p className="text-xs text-amber-400 font-medium">Warnings</p>
|
||||
</div>
|
||||
{result.warnings.map((w, i) => (
|
||||
<p key={i} className="text-xs text-amber-300">
|
||||
{w}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-32 text-dark-500 text-sm">
|
||||
Select a model to introspect
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { FolderSearch, Microscope } from 'lucide-react';
|
||||
import { useCanvasStore } from '../../../hooks/useCanvasStore';
|
||||
import { ExpressionSelector } from './ExpressionSelector';
|
||||
import { FileBrowser } from './FileBrowser';
|
||||
import { IntrospectionPanel } from './IntrospectionPanel';
|
||||
import {
|
||||
ModelNodeData,
|
||||
SolverNodeData,
|
||||
@@ -24,6 +28,9 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
|
||||
const { nodes, updateNodeData, deleteSelected } = useCanvasStore();
|
||||
const node = nodes.find((n) => n.id === nodeId);
|
||||
|
||||
const [showFileBrowser, setShowFileBrowser] = useState(false);
|
||||
const [showIntrospection, setShowIntrospection] = useState(false);
|
||||
|
||||
if (!node) return null;
|
||||
|
||||
const { data } = node;
|
||||
@@ -63,15 +70,24 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
|
||||
<>
|
||||
<div>
|
||||
<label className={labelClass}>
|
||||
File Path
|
||||
Model File
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={(data as ModelNodeData).filePath || ''}
|
||||
onChange={(e) => handleChange('filePath', e.target.value)}
|
||||
placeholder="path/to/model.prt"
|
||||
className={`${inputClass} font-mono text-sm`}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={(data as ModelNodeData).filePath || ''}
|
||||
onChange={(e) => handleChange('filePath', e.target.value)}
|
||||
placeholder="path/to/model.sim"
|
||||
className={`${inputClass} font-mono text-sm flex-1`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowFileBrowser(true)}
|
||||
className="px-3 py-2 bg-dark-700 hover:bg-dark-600 rounded-lg text-dark-300 hover:text-white transition-colors"
|
||||
title="Browse files"
|
||||
>
|
||||
<FolderSearch size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className={labelClass}>
|
||||
@@ -86,8 +102,21 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
|
||||
<option value="prt">Part (.prt)</option>
|
||||
<option value="fem">FEM (.fem)</option>
|
||||
<option value="sim">Simulation (.sim)</option>
|
||||
<option value="afem">Assembled FEM (.afem)</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* Introspect Button */}
|
||||
{(data as ModelNodeData).filePath && (
|
||||
<button
|
||||
onClick={() => setShowIntrospection(true)}
|
||||
className="w-full flex items-center justify-center gap-2 px-3 py-2.5 bg-primary-500/20
|
||||
hover:bg-primary-500/30 border border-primary-500/30 rounded-lg
|
||||
text-primary-400 text-sm font-medium transition-colors"
|
||||
>
|
||||
<Microscope size={16} />
|
||||
Introspect Model
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -385,6 +414,27 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* File Browser Modal */}
|
||||
<FileBrowser
|
||||
isOpen={showFileBrowser}
|
||||
onClose={() => setShowFileBrowser(false)}
|
||||
onSelect={(path, fileType) => {
|
||||
handleChange('filePath', path);
|
||||
handleChange('fileType', fileType.replace('.', ''));
|
||||
}}
|
||||
fileTypes={['.sim', '.prt', '.fem', '.afem']}
|
||||
/>
|
||||
|
||||
{/* Introspection Panel */}
|
||||
{showIntrospection && (data as ModelNodeData).filePath && (
|
||||
<div className="fixed top-20 right-96 z-40">
|
||||
<IntrospectionPanel
|
||||
filePath={(data as ModelNodeData).filePath!}
|
||||
onClose={() => setShowIntrospection(false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ interface CanvasState {
|
||||
onNodesChange: (changes: NodeChange[]) => void;
|
||||
onEdgesChange: (changes: EdgeChange[]) => void;
|
||||
onConnect: (connection: Connection) => void;
|
||||
addNode: (type: NodeType, position: { x: number; y: number }) => void;
|
||||
addNode: (type: NodeType, position: { x: number; y: number }, data?: Partial<CanvasNodeData>) => void;
|
||||
updateNodeData: (nodeId: string, data: Partial<CanvasNodeData>) => void;
|
||||
selectNode: (nodeId: string | null) => void;
|
||||
selectEdge: (edgeId: string | null) => void;
|
||||
@@ -112,12 +112,14 @@ export const useCanvasStore = create<CanvasState>((set, get) => ({
|
||||
set({ edges: addEdge(connection, get().edges) });
|
||||
},
|
||||
|
||||
addNode: (type, position) => {
|
||||
addNode: (type, position, customData) => {
|
||||
const newNode: Node<CanvasNodeData> = {
|
||||
id: getNodeId(),
|
||||
type,
|
||||
position,
|
||||
data: getDefaultData(type),
|
||||
data: customData
|
||||
? { ...getDefaultData(type), ...customData } as CanvasNodeData
|
||||
: getDefaultData(type),
|
||||
};
|
||||
set({ nodes: [...get().nodes, newNode] });
|
||||
},
|
||||
|
||||
@@ -89,14 +89,63 @@ export interface CanvasEdge {
|
||||
targetHandle?: string;
|
||||
}
|
||||
|
||||
// Valid connections
|
||||
// Valid connections - defines what a node can connect TO (as source)
|
||||
// Flow: DesignVar -> Model -> Solver -> Extractor -> Objective/Constraint -> Algorithm -> Surrogate
|
||||
export const VALID_CONNECTIONS: Record<NodeType, NodeType[]> = {
|
||||
model: ['solver', 'designVar'],
|
||||
solver: ['extractor'],
|
||||
designVar: ['model'],
|
||||
extractor: ['objective', 'constraint'],
|
||||
objective: ['algorithm'],
|
||||
constraint: ['algorithm'],
|
||||
algorithm: ['surrogate'],
|
||||
surrogate: [],
|
||||
model: ['solver'], // Model outputs to Solver
|
||||
solver: ['extractor'], // Solver outputs to Extractor
|
||||
designVar: ['model'], // DesignVar outputs to Model (expressions feed into model)
|
||||
extractor: ['objective', 'constraint'], // Extractor outputs to Objective/Constraint
|
||||
objective: ['algorithm'], // Objective outputs to Algorithm
|
||||
constraint: ['algorithm'], // Constraint outputs to Algorithm
|
||||
algorithm: ['surrogate'], // Algorithm outputs to Surrogate
|
||||
surrogate: [], // Surrogate is terminal
|
||||
};
|
||||
|
||||
// Node handle configuration for proper flow direction
|
||||
export interface HandleConfig {
|
||||
id: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface NodeHandleConfig {
|
||||
inputs: HandleConfig[];
|
||||
outputs: HandleConfig[];
|
||||
}
|
||||
|
||||
// Define handles for each node type
|
||||
// Flow: DesignVar(s) -> Model -> Solver -> Extractor(s) -> Objective(s) -> Algorithm
|
||||
export const NODE_HANDLES: Record<NodeType, NodeHandleConfig> = {
|
||||
model: {
|
||||
inputs: [{ id: 'params', label: 'Parameters' }], // Receives from DesignVars
|
||||
outputs: [{ id: 'sim', label: 'Simulation' }], // Sends to Solver
|
||||
},
|
||||
solver: {
|
||||
inputs: [{ id: 'model', label: 'Model' }], // Receives from Model
|
||||
outputs: [{ id: 'results', label: 'Results' }], // Sends to Extractors
|
||||
},
|
||||
designVar: {
|
||||
inputs: [], // No inputs - this is a source
|
||||
outputs: [{ id: 'value', label: 'Value' }], // Sends to Model
|
||||
},
|
||||
extractor: {
|
||||
inputs: [{ id: 'results', label: 'Results' }], // Receives from Solver
|
||||
outputs: [{ id: 'value', label: 'Value' }], // Sends to Objective/Constraint
|
||||
},
|
||||
objective: {
|
||||
inputs: [{ id: 'value', label: 'Value' }], // Receives from Extractor
|
||||
outputs: [{ id: 'objective', label: 'Objective' }], // Sends to Algorithm
|
||||
},
|
||||
constraint: {
|
||||
inputs: [{ id: 'value', label: 'Value' }], // Receives from Extractor
|
||||
outputs: [{ id: 'constraint', label: 'Constraint' }], // Sends to Algorithm
|
||||
},
|
||||
algorithm: {
|
||||
inputs: [{ id: 'objectives', label: 'Objectives' }], // Receives from Objectives/Constraints
|
||||
outputs: [{ id: 'algo', label: 'Algorithm' }], // Sends to Surrogate
|
||||
},
|
||||
surrogate: {
|
||||
inputs: [{ id: 'algo', label: 'Algorithm' }], // Receives from Algorithm
|
||||
outputs: [], // No outputs - this is a sink
|
||||
},
|
||||
};
|
||||
|
||||
@@ -74,13 +74,68 @@ export function validateGraph(
|
||||
}
|
||||
}
|
||||
|
||||
// Check connectivity
|
||||
// Check connectivity - verify proper flow direction
|
||||
// Design Variables should connect TO Model (as source -> target)
|
||||
const modelNodes = nodes.filter(n => n.data.type === 'model');
|
||||
for (const dvar of designVars) {
|
||||
const connectsToModel = edges.some(e =>
|
||||
e.source === dvar.id && modelNodes.some(m => m.id === e.target)
|
||||
);
|
||||
if (!connectsToModel) {
|
||||
warnings.push(`${dvar.data.label} is not connected to a Model`);
|
||||
}
|
||||
}
|
||||
|
||||
// Model should connect TO Solver
|
||||
const solverNodes = nodes.filter(n => n.data.type === 'solver');
|
||||
for (const model of modelNodes) {
|
||||
const connectsToSolver = edges.some(e =>
|
||||
e.source === model.id && solverNodes.some(s => s.id === e.target)
|
||||
);
|
||||
if (!connectsToSolver) {
|
||||
errors.push(`${model.data.label} is not connected to a Solver`);
|
||||
}
|
||||
}
|
||||
|
||||
// Solver should connect TO Extractors
|
||||
for (const solver of solverNodes) {
|
||||
const connectsToExtractor = edges.some(e =>
|
||||
e.source === solver.id && extractors.some(ex => ex.id === e.target)
|
||||
);
|
||||
if (!connectsToExtractor) {
|
||||
warnings.push(`${solver.data.label} is not connected to any Extractor`);
|
||||
}
|
||||
}
|
||||
|
||||
// Extractors should connect TO Objectives or Constraints
|
||||
const objectives = nodes.filter(n => n.data.type === 'objective');
|
||||
const constraints = nodes.filter(n => n.data.type === 'constraint');
|
||||
for (const extractor of extractors) {
|
||||
const connectsToObjective = edges.some(e =>
|
||||
e.source === extractor.id &&
|
||||
(objectives.some(obj => obj.id === e.target) || constraints.some(c => c.id === e.target))
|
||||
);
|
||||
if (!connectsToObjective) {
|
||||
warnings.push(`${extractor.data.label} is not connected to any Objective or Constraint`);
|
||||
}
|
||||
}
|
||||
|
||||
// Objectives should connect TO Algorithm
|
||||
const algorithmNodes = nodes.filter(n => n.data.type === 'algorithm');
|
||||
for (const obj of objectives) {
|
||||
const hasIncoming = edges.some(e => e.target === obj.id);
|
||||
const hasIncoming = edges.some(e =>
|
||||
extractors.some(ex => ex.id === e.source) && e.target === obj.id
|
||||
);
|
||||
if (!hasIncoming) {
|
||||
errors.push(`${obj.data.label} has no connected extractor`);
|
||||
}
|
||||
|
||||
const connectsToAlgorithm = edges.some(e =>
|
||||
e.source === obj.id && algorithmNodes.some(a => a.id === e.target)
|
||||
);
|
||||
if (!connectsToAlgorithm) {
|
||||
warnings.push(`${obj.data.label} is not connected to an Algorithm`);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user