fix(canvas): Bug fixes for node movement, drag-drop, config panel, and introspection

- SpecRenderer: Add localNodes state with applyNodeChanges for smooth node dragging - SpecRenderer: Fix getDefaultNodeData() - extractor uses 'custom_function' type with function definition - SpecRenderer: Fix constraint default - use constraint_type instead of type - CanvasView: Show config panel INSTEAD of chat when node selected (not blocked) - NodeConfigPanelV2: Enable showHeader for code editor toolbar (Generate/Snippets/Validate/Test buttons) - NodeConfigPanelV2: Pass studyId to IntrospectionPanel - IntrospectionPanel: Accept studyId prop and use correct API endpoint - optimization.py: Search multiple directories for model files including 1_setup/model/
2026-01-20 14:14:14 -05:00
parent cf8c57fdac
commit 47f8b50112
5 changed files with 1214 additions and 922 deletions
--- a/atomizer-dashboard/backend/api/routes/optimization.py
+++ b/atomizer-dashboard/backend/api/routes/optimization.py
--- a/atomizer-dashboard/frontend/src/components/canvas/SpecRenderer.tsx
+++ b/atomizer-dashboard/frontend/src/components/canvas/SpecRenderer.tsx
@@ -10,7 +10,7 @@
 * P2.7-P2.10: SpecRenderer component with node/edge/selection handling
 */

-import { useCallback, useRef, useEffect, useMemo, DragEvent } from 'react';
+import { useCallback, useRef, useEffect, useMemo, useState, DragEvent } from 'react';
 import ReactFlow, {
  Background,
  Controls,
@@ -22,6 +22,7 @@ import ReactFlow, {
  NodeChange,
  EdgeChange,
  Connection,
+  applyNodeChanges,
 } from 'reactflow';
 import 'reactflow/dist/style.css';

@@ -74,8 +75,28 @@ function getDefaultNodeData(type: AddableNodeType, position: { x: number; y: num
    case 'extractor':
      return {
        name: `extractor_${timestamp}`,
-        type: 'custom',
+        type: 'custom_function',  // Must be valid ExtractorType
+        builtin: false,
        enabled: true,
+        // Custom function extractors need a function definition
+        function: {
+          name: 'extract',
+          source_code: `def extract(op2_path: str, config: dict = None) -> dict:
+    """
+    Custom extractor function.
+    
+    Args:
+        op2_path: Path to the OP2 results file
+        config: Optional configuration dict
+    
+    Returns:
+        Dictionary with extracted values
+    """
+    # TODO: Implement extraction logic
+    return {'value': 0.0}
+`,
+        },
+        outputs: [{ name: 'value', metric: 'custom' }],
        canvas_position: position,
      };
    case 'objective':
@@ -90,7 +111,8 @@ function getDefaultNodeData(type: AddableNodeType, position: { x: number; y: num
    case 'constraint':
      return {
        name: `constraint_${timestamp}`,
-        type: 'upper',
+        constraint_type: 'hard',  // Must be 'hard' or 'soft'
+        operator: '<=',
        limit: 1.0,
        source_extractor_id: null,
        source_output: null,
@@ -208,12 +230,23 @@ function SpecRendererInner({
    nodesRef.current = nodes;
  }, [nodes]);

+  // Track local node state for smooth dragging
+  const [localNodes, setLocalNodes] = useState(nodes);
+  
+  // Sync local nodes with spec-derived nodes when spec changes
+  useEffect(() => {
+    setLocalNodes(nodes);
+  }, [nodes]);
+
  // Handle node position changes
  const onNodesChange = useCallback(
    (changes: NodeChange[]) => {
      if (!editable) return;

-      // Handle position changes
+      // Apply changes to local state for smooth dragging
+      setLocalNodes((nds) => applyNodeChanges(changes, nds));
+
+      // Handle position changes - save to spec when drag ends
      for (const change of changes) {
        if (change.type === 'position' && change.position && change.dragging === false) {
          // Dragging ended - update spec
@@ -458,7 +491,7 @@ function SpecRendererInner({
      )}

      <ReactFlow
-        nodes={nodes}
+        nodes={localNodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
--- a/atomizer-dashboard/frontend/src/components/canvas/panels/IntrospectionPanel.tsx
+++ b/atomizer-dashboard/frontend/src/components/canvas/panels/IntrospectionPanel.tsx
@@ -20,6 +20,7 @@ import { useCanvasStore } from '../../../hooks/useCanvasStore';

 interface IntrospectionPanelProps {
  filePath: string;
+  studyId?: string;
  onClose: () => void;
 }

@@ -56,7 +57,7 @@ interface IntrospectionResult {
  warnings: string[];
 }

-export function IntrospectionPanel({ filePath, onClose }: IntrospectionPanelProps) {
+export function IntrospectionPanel({ filePath, studyId, onClose }: IntrospectionPanelProps) {
  const [result, setResult] = useState<IntrospectionResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
@@ -73,21 +74,37 @@ export function IntrospectionPanel({ filePath, onClose }: IntrospectionPanelProp
    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');
+      let res;
+      
+      // If we have a studyId, use the study-aware introspection endpoint
+      if (studyId) {
+        // Don't encode studyId - it may contain slashes for nested paths (e.g., M1_Mirror/study_name)
+        res = await fetch(`/api/optimization/studies/${studyId}/nx/introspect`);
+      } else {
+        // Fallback to direct path introspection
+        res = await fetch('/api/nx/introspect', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ file_path: filePath }),
+        });
+      }
+      
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({}));
+        throw new Error(errData.detail || 'Introspection failed');
+      }
      const data = await res.json();
-      setResult(data);
+      
+      // Handle different response formats
+      setResult(data.introspection || data);
    } catch (e) {
-      setError('Failed to introspect model');
-      console.error(e);
+      const msg = e instanceof Error ? e.message : 'Failed to introspect model';
+      setError(msg);
+      console.error('Introspection error:', e);
    } finally {
      setIsLoading(false);
    }
-  }, [filePath]);
+  }, [filePath, studyId]);

  useEffect(() => {
    runIntrospection();
--- a/atomizer-dashboard/frontend/src/components/canvas/panels/NodeConfigPanelV2.tsx
+++ b/atomizer-dashboard/frontend/src/components/canvas/panels/NodeConfigPanelV2.tsx
@@ -254,6 +254,7 @@ export function NodeConfigPanelV2({ onClose }: NodeConfigPanelV2Props) {
        <div className="fixed top-20 right-96 z-40">
          <IntrospectionPanel
            filePath={spec.model.sim.path}
+            studyId={useSpecStore.getState().studyId || undefined}
            onClose={() => setShowIntrospection(false)}
          />
        </div>
@@ -313,6 +314,7 @@ function ModelNodeConfig({ spec }: SpecConfigProps) {
        <div className="fixed top-20 right-96 z-40">
          <IntrospectionPanel
            filePath={spec.model.sim.path}
+            studyId={useSpecStore.getState().studyId || undefined}
            onClose={() => setShowIntrospection(false)}
          />
        </div>
@@ -694,38 +696,21 @@ function ExtractorNodeConfig({ node, onChange }: ExtractorNodeConfigProps) {
      {showCodeEditor && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
          <div className="w-[900px] h-[700px] bg-dark-850 rounded-xl overflow-hidden shadow-2xl border border-dark-600 flex flex-col">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-4 py-3 border-b border-dark-700 bg-dark-900">
-              <div className="flex items-center gap-3">
-                <FileCode size={18} className="text-violet-400" />
-                <span className="font-medium text-white">Custom Extractor: {node.name}</span>
-                <span className="text-xs text-dark-500 bg-dark-800 px-2 py-0.5 rounded">.py</span>
-              </div>
-              <button
-                onClick={() => setShowCodeEditor(false)}
-                className="p-1.5 rounded hover:bg-dark-700 text-dark-400 hover:text-white transition-colors"
-              >
-                <X size={18} />
-              </button>
-            </div>
-            
-            {/* Code Editor */}
-            <div className="flex-1">
-              <CodeEditorPanel
-                initialCode={currentCode}
-                extractorName={node.name}
-                outputs={node.outputs?.map(o => o.name) || []}
-                onChange={handleCodeChange}
-                onRequestGeneration={handleRequestGeneration}
-                onRequestStreamingGeneration={handleStreamingGeneration}
-                onRun={handleValidateCode}
-                onTest={handleTestCode}
-                onClose={() => setShowCodeEditor(false)}
-                showHeader={false}
-                height="100%"
-                studyId={studyId || undefined}
-              />
-            </div>
+            {/* Code Editor with built-in header containing toolbar buttons */}
+            <CodeEditorPanel
+              initialCode={currentCode}
+              extractorName={`Custom Extractor: ${node.name}`}
+              outputs={node.outputs?.map(o => o.name) || []}
+              onChange={handleCodeChange}
+              onRequestGeneration={handleRequestGeneration}
+              onRequestStreamingGeneration={handleStreamingGeneration}
+              onRun={handleValidateCode}
+              onTest={handleTestCode}
+              onClose={() => setShowCodeEditor(false)}
+              showHeader={true}
+              height="100%"
+              studyId={studyId || undefined}
+            />
          </div>
        </div>
      )}
--- a/atomizer-dashboard/frontend/src/pages/CanvasView.tsx
+++ b/atomizer-dashboard/frontend/src/pages/CanvasView.tsx
@@ -472,7 +472,8 @@ export function CanvasView() {
        </div>

        {/* Config Panel - use V2 for spec mode, legacy for AtomizerCanvas */}
-        {selectedNodeId && !showChat && (
+        {/* Shows INSTEAD of chat when a node is selected */}
+        {selectedNodeId ? (
          useSpecMode ? (
            <NodeConfigPanelV2 onClose={() => useSpecStore.getState().clearSelection()} />
          ) : (
@@ -480,10 +481,7 @@ export function CanvasView() {
              <NodeConfigPanel nodeId={selectedNodeId} />
            </div>
          )
-        )}
-
-        {/* Chat/Assistant Panel */}
-        {showChat && (
+        ) : showChat ? (
          <div className="w-96 border-l border-dark-700 bg-dark-850 flex flex-col">
            {/* Chat Header */}
            <div className="flex items-center justify-between px-4 py-3 border-b border-dark-700">
@@ -524,7 +522,7 @@ export function CanvasView() {
              isConnected={isConnected}
            />
          </div>
-        )}
+        ) : null}
      </main>

      {/* Template Selector Modal */}