feat(canvas): Custom extractor components, migrator, and MCP spec tools
Canvas Components: - CustomExtractorNode.tsx: Node for custom Python extractors - CustomExtractorPanel.tsx: Configuration panel for custom extractors - ConnectionStatusIndicator.tsx: WebSocket status display - atomizer-spec.ts: TypeScript types for AtomizerSpec v2.0 Config: - migrator.py: Legacy config to AtomizerSpec v2.0 migration - Updated __init__.py exports for config and extractors MCP Tools: - spec.ts: MCP tools for spec manipulation - index.ts: Tool registration updates
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* ConnectionStatusIndicator - Visual indicator for WebSocket connection status.
|
||||
*/
|
||||
|
||||
import { ConnectionStatus } from '../../hooks/useSpecWebSocket';
|
||||
|
||||
interface ConnectionStatusIndicatorProps {
|
||||
status: ConnectionStatus;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Visual indicator for WebSocket connection status.
|
||||
* Can be used in the canvas UI to show sync state.
|
||||
*/
|
||||
export function ConnectionStatusIndicator({
|
||||
status,
|
||||
className = '',
|
||||
}: ConnectionStatusIndicatorProps) {
|
||||
const statusConfig = {
|
||||
disconnected: {
|
||||
color: 'bg-gray-500',
|
||||
label: 'Disconnected',
|
||||
},
|
||||
connecting: {
|
||||
color: 'bg-yellow-500 animate-pulse',
|
||||
label: 'Connecting...',
|
||||
},
|
||||
connected: {
|
||||
color: 'bg-green-500',
|
||||
label: 'Connected',
|
||||
},
|
||||
reconnecting: {
|
||||
color: 'bg-yellow-500 animate-pulse',
|
||||
label: 'Reconnecting...',
|
||||
},
|
||||
};
|
||||
|
||||
const config = statusConfig[status];
|
||||
|
||||
return (
|
||||
<div className={`flex items-center gap-2 ${className}`}>
|
||||
<div className={`w-2 h-2 rounded-full ${config.color}`} />
|
||||
<span className="text-xs text-dark-400">{config.label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConnectionStatusIndicator;
|
||||
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* CustomExtractorNode - Canvas node for custom Python extractors
|
||||
*
|
||||
* Displays custom extractors defined with inline Python code.
|
||||
* Visually distinct from builtin extractors with a code icon.
|
||||
*
|
||||
* P3.11: Custom extractor UI component
|
||||
*/
|
||||
|
||||
import { memo } from 'react';
|
||||
import { NodeProps } from 'reactflow';
|
||||
import { Code2 } from 'lucide-react';
|
||||
import { BaseNode } from './BaseNode';
|
||||
|
||||
export interface CustomExtractorNodeData {
|
||||
type: 'customExtractor';
|
||||
label: string;
|
||||
configured: boolean;
|
||||
extractorId?: string;
|
||||
extractorName?: string;
|
||||
functionName?: string;
|
||||
functionSource?: string;
|
||||
outputs?: Array<{ name: string; units?: string }>;
|
||||
dependencies?: string[];
|
||||
}
|
||||
|
||||
function CustomExtractorNodeComponent(props: NodeProps<CustomExtractorNodeData>) {
|
||||
const { data } = props;
|
||||
|
||||
// Show validation status
|
||||
const hasCode = !!data.functionSource?.trim();
|
||||
const hasOutputs = (data.outputs?.length ?? 0) > 0;
|
||||
const isConfigured = hasCode && hasOutputs;
|
||||
|
||||
return (
|
||||
<BaseNode
|
||||
{...props}
|
||||
icon={<Code2 size={16} />}
|
||||
iconColor={isConfigured ? 'text-violet-400' : 'text-dark-500'}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<span className={isConfigured ? 'text-white' : 'text-dark-400'}>
|
||||
{data.extractorName || data.functionName || 'Custom Extractor'}
|
||||
</span>
|
||||
{!isConfigured && (
|
||||
<span className="text-xs text-amber-400">Needs configuration</span>
|
||||
)}
|
||||
{isConfigured && data.outputs && (
|
||||
<span className="text-xs text-dark-400">
|
||||
{data.outputs.length} output{data.outputs.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</BaseNode>
|
||||
);
|
||||
}
|
||||
|
||||
export const CustomExtractorNode = memo(CustomExtractorNodeComponent);
|
||||
@@ -0,0 +1,360 @@
|
||||
/**
|
||||
* CustomExtractorPanel - Panel for editing custom Python extractors
|
||||
*
|
||||
* Provides a code editor for writing custom extraction functions,
|
||||
* output definitions, and validation.
|
||||
*
|
||||
* P3.12: Custom extractor UI component
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { X, Play, AlertCircle, CheckCircle, Plus, Trash2, HelpCircle } from 'lucide-react';
|
||||
|
||||
interface CustomExtractorOutput {
|
||||
name: string;
|
||||
units?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface CustomExtractorPanelProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
initialName?: string;
|
||||
initialFunctionName?: string;
|
||||
initialSource?: string;
|
||||
initialOutputs?: CustomExtractorOutput[];
|
||||
initialDependencies?: string[];
|
||||
onSave: (data: {
|
||||
name: string;
|
||||
functionName: string;
|
||||
source: string;
|
||||
outputs: CustomExtractorOutput[];
|
||||
dependencies: string[];
|
||||
}) => void;
|
||||
}
|
||||
|
||||
// Common styling classes
|
||||
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 labelClass = 'block text-sm font-medium text-dark-300 mb-1';
|
||||
|
||||
// Default extractor template
|
||||
const DEFAULT_SOURCE = `def extract(op2_path, bdf_path=None, params=None, working_dir=None):
|
||||
"""
|
||||
Custom extractor function.
|
||||
|
||||
Args:
|
||||
op2_path: Path to the OP2 results file
|
||||
bdf_path: Optional path to the BDF model file
|
||||
params: Dictionary of current design parameters
|
||||
working_dir: Path to the current trial directory
|
||||
|
||||
Returns:
|
||||
Dictionary of output_name -> value
|
||||
OR a single float value
|
||||
OR a list/tuple of values (mapped to outputs in order)
|
||||
"""
|
||||
import numpy as np
|
||||
from pyNastran.op2.op2 import OP2
|
||||
|
||||
# Load OP2 results
|
||||
op2 = OP2(op2_path, debug=False)
|
||||
|
||||
# Example: compute custom metric
|
||||
# ... your extraction logic here ...
|
||||
|
||||
result = 0.0
|
||||
|
||||
return {"custom_output": result}
|
||||
`;
|
||||
|
||||
export function CustomExtractorPanel({
|
||||
isOpen,
|
||||
onClose,
|
||||
initialName = '',
|
||||
initialFunctionName = 'extract',
|
||||
initialSource = DEFAULT_SOURCE,
|
||||
initialOutputs = [{ name: 'custom_output', units: '' }],
|
||||
initialDependencies = [],
|
||||
onSave,
|
||||
}: CustomExtractorPanelProps) {
|
||||
const [name, setName] = useState(initialName);
|
||||
const [functionName, setFunctionName] = useState(initialFunctionName);
|
||||
const [source, setSource] = useState(initialSource);
|
||||
const [outputs, setOutputs] = useState<CustomExtractorOutput[]>(initialOutputs);
|
||||
const [dependencies] = useState<string[]>(initialDependencies);
|
||||
const [validation, setValidation] = useState<{
|
||||
valid: boolean;
|
||||
errors: string[];
|
||||
} | null>(null);
|
||||
const [isValidating, setIsValidating] = useState(false);
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
|
||||
// Add a new output
|
||||
const addOutput = useCallback(() => {
|
||||
setOutputs((prev) => [...prev, { name: '', units: '' }]);
|
||||
}, []);
|
||||
|
||||
// Remove an output
|
||||
const removeOutput = useCallback((index: number) => {
|
||||
setOutputs((prev) => prev.filter((_, i) => i !== index));
|
||||
}, []);
|
||||
|
||||
// Update an output
|
||||
const updateOutput = useCallback(
|
||||
(index: number, field: keyof CustomExtractorOutput, value: string) => {
|
||||
setOutputs((prev) =>
|
||||
prev.map((out, i) => (i === index ? { ...out, [field]: value } : out))
|
||||
);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Validate the code
|
||||
const validateCode = useCallback(async () => {
|
||||
setIsValidating(true);
|
||||
setValidation(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/spec/validate-extractor', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
function_name: functionName,
|
||||
source: source,
|
||||
}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
setValidation({
|
||||
valid: result.valid,
|
||||
errors: result.errors || [],
|
||||
});
|
||||
} catch (error) {
|
||||
setValidation({
|
||||
valid: false,
|
||||
errors: ['Failed to validate: ' + (error instanceof Error ? error.message : 'Unknown error')],
|
||||
});
|
||||
} finally {
|
||||
setIsValidating(false);
|
||||
}
|
||||
}, [functionName, source]);
|
||||
|
||||
// Handle save
|
||||
const handleSave = useCallback(() => {
|
||||
// Filter out empty outputs
|
||||
const validOutputs = outputs.filter((o) => o.name.trim());
|
||||
|
||||
if (!name.trim()) {
|
||||
setValidation({ valid: false, errors: ['Name is required'] });
|
||||
return;
|
||||
}
|
||||
|
||||
if (validOutputs.length === 0) {
|
||||
setValidation({ valid: false, errors: ['At least one output is required'] });
|
||||
return;
|
||||
}
|
||||
|
||||
onSave({
|
||||
name: name.trim(),
|
||||
functionName: functionName.trim() || 'extract',
|
||||
source,
|
||||
outputs: validOutputs,
|
||||
dependencies: dependencies.filter((d) => d.trim()),
|
||||
});
|
||||
onClose();
|
||||
}, [name, functionName, source, outputs, dependencies, onSave, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-dark-850 rounded-xl shadow-2xl w-[900px] max-h-[90vh] flex flex-col border border-dark-700">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-dark-700">
|
||||
<h2 className="text-lg font-semibold text-white">Custom Extractor</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowHelp(!showHelp)}
|
||||
className="p-2 text-dark-400 hover:text-white hover:bg-dark-700 rounded-lg transition-colors"
|
||||
title="Show help"
|
||||
>
|
||||
<HelpCircle size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-dark-400 hover:text-white hover:bg-dark-700 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
{/* Help Section */}
|
||||
{showHelp && (
|
||||
<div className="mb-4 p-4 bg-primary-900/20 border border-primary-700 rounded-lg">
|
||||
<h3 className="text-sm font-semibold text-primary-400 mb-2">How Custom Extractors Work</h3>
|
||||
<ul className="text-sm text-dark-300 space-y-1">
|
||||
<li>• Your function receives the path to OP2 results and optional BDF/params</li>
|
||||
<li>• Use pyNastran, numpy, scipy for data extraction and analysis</li>
|
||||
<li>• Return a dictionary mapping output names to numeric values</li>
|
||||
<li>• Outputs can be used as objectives or constraints in optimization</li>
|
||||
<li>• Code runs in a sandboxed environment (no file I/O beyond OP2/BDF)</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Left Column - Basic Info & Outputs */}
|
||||
<div className="space-y-4">
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className={labelClass}>Extractor Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="My Custom Extractor"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Function Name */}
|
||||
<div>
|
||||
<label className={labelClass}>Function Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={functionName}
|
||||
onChange={(e) => setFunctionName(e.target.value)}
|
||||
placeholder="extract"
|
||||
className={`${inputClass} font-mono`}
|
||||
/>
|
||||
<p className="text-xs text-dark-500 mt-1">
|
||||
Name of the Python function in your code
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Outputs */}
|
||||
<div>
|
||||
<label className={labelClass}>Outputs</label>
|
||||
<div className="space-y-2">
|
||||
{outputs.map((output, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={output.name}
|
||||
onChange={(e) => updateOutput(index, 'name', e.target.value)}
|
||||
placeholder="output_name"
|
||||
className={`${inputClass} font-mono flex-1`}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={output.units || ''}
|
||||
onChange={(e) => updateOutput(index, 'units', e.target.value)}
|
||||
placeholder="units"
|
||||
className={`${inputClass} w-24`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => removeOutput(index)}
|
||||
className="p-2 text-red-400 hover:text-red-300 hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
disabled={outputs.length === 1}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
onClick={addOutput}
|
||||
className="flex items-center gap-1 text-sm text-primary-400 hover:text-primary-300 transition-colors"
|
||||
>
|
||||
<Plus size={14} />
|
||||
Add Output
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Validation Status */}
|
||||
{validation && (
|
||||
<div
|
||||
className={`p-3 rounded-lg border ${
|
||||
validation.valid
|
||||
? 'bg-green-900/20 border-green-700'
|
||||
: 'bg-red-900/20 border-red-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{validation.valid ? (
|
||||
<CheckCircle size={16} className="text-green-400" />
|
||||
) : (
|
||||
<AlertCircle size={16} className="text-red-400" />
|
||||
)}
|
||||
<span
|
||||
className={`text-sm font-medium ${
|
||||
validation.valid ? 'text-green-400' : 'text-red-400'
|
||||
}`}
|
||||
>
|
||||
{validation.valid ? 'Code is valid' : 'Validation failed'}
|
||||
</span>
|
||||
</div>
|
||||
{validation.errors.length > 0 && (
|
||||
<ul className="mt-2 text-sm text-red-300 space-y-1">
|
||||
{validation.errors.map((err, i) => (
|
||||
<li key={i}>• {err}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column - Code Editor */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className={labelClass}>Python Code</label>
|
||||
<button
|
||||
onClick={validateCode}
|
||||
disabled={isValidating}
|
||||
className="flex items-center gap-1 px-3 py-1 bg-primary-600 hover:bg-primary-500
|
||||
text-white text-sm rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Play size={14} />
|
||||
{isValidating ? 'Validating...' : 'Validate'}
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
value={source}
|
||||
onChange={(e) => {
|
||||
setSource(e.target.value);
|
||||
setValidation(null);
|
||||
}}
|
||||
className={`${inputClass} h-[400px] font-mono text-sm resize-none`}
|
||||
spellCheck={false}
|
||||
/>
|
||||
<p className="text-xs text-dark-500">
|
||||
Available modules: numpy, scipy, pyNastran, math, statistics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-dark-700">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-dark-300 hover:text-white hover:bg-dark-700 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-2 bg-primary-600 hover:bg-primary-500 text-white rounded-lg transition-colors"
|
||||
>
|
||||
Save Extractor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user