feat(canvas): Add ExpressionSelector for design variable configuration

Phase 5 of Canvas Professional Upgrade:
- Create ExpressionSelector component with searchable dropdown
- Fetch expressions from NX introspection API
- Auto-populate label, units, and default min/max from expression value
- Add refresh button to reload expressions
- Integrate into NodeConfigPanel for DesignVar nodes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-15 22:42:14 -05:00
parent 0eb5028d8f
commit 22b483a912
2 changed files with 207 additions and 5 deletions

View File

@@ -1,4 +1,5 @@
import { useCanvasStore } from '../../../hooks/useCanvasStore';
import { ExpressionSelector } from './ExpressionSelector';
import {
ModelNodeData,
SolverNodeData,
@@ -117,12 +118,24 @@ export function NodeConfigPanel({ nodeId }: NodeConfigPanelProps) {
<label className={labelClass}>
Expression Name
</label>
<input
type="text"
<ExpressionSelector
value={(data as DesignVarNodeData).expressionName || ''}
onChange={(e) => handleChange('expressionName', e.target.value)}
placeholder="thickness"
className={`${inputClass} font-mono`}
onChange={(name, value, units) => {
handleChange('expressionName', name);
handleChange('label', name || 'Design Variable');
if (units) handleChange('unit', units);
// Set default min/max around current value
if (value !== undefined) {
const dvData = data as DesignVarNodeData;
if (dvData.minValue === undefined) {
handleChange('minValue', value * 0.5);
}
if (dvData.maxValue === undefined) {
handleChange('maxValue', value * 1.5);
}
}
}}
placeholder="Select NX expression..."
/>
</div>
<div className="grid grid-cols-2 gap-2">