feat: Add NX file dependency tree to introspection panel

Backend:
- Add scan_nx_file_dependencies() function to parse NX file chain
- Uses naming conventions to build dependency tree (.sim -> .afm -> .fem -> _i.prt -> .prt)
- Include file_dependencies in introspection response
- Works without NX (pure file-based analysis)

Frontend:
- Add FileDependencies interface for typed API response
- Add collapsible 'File Dependencies' section with tree visualization
- Color-coded file types (purple=sim, blue=afm, green=fem, yellow=idealized, orange=prt)
- Shows orphan geometry files that aren't in the dependency chain
This commit is contained in:
2026-01-20 15:33:04 -05:00
parent abbc7b1b50
commit 14354a2606
2 changed files with 286 additions and 1 deletions

View File

@@ -19,6 +19,8 @@ import {
Link,
Box,
Settings2,
GitBranch,
File,
} from 'lucide-react';
import { useCanvasStore } from '../../../hooks/useCanvasStore';
@@ -53,6 +55,23 @@ interface DependentFile {
name: string;
}
// File dependency structure from backend
interface FileDependencies {
files: {
sim: string[];
afm: string[];
fem: string[];
prt: string[];
idealized: string[];
};
dependencies: Array<{
source: string;
target: string;
type: string;
}>;
root_sim: string | null;
}
// The API returns expressions in a nested structure
interface ExpressionsResult {
user: Expression[];
@@ -81,6 +100,7 @@ interface IntrospectionResult {
attributes?: Array<{ title: string; value: string }>;
units?: Record<string, unknown>;
linked_parts?: Record<string, unknown>;
file_dependencies?: FileDependencies;
}
// Baseline run result interface
@@ -627,6 +647,142 @@ export function IntrospectionPanel({ filePath, studyId, onClose }: Introspection
</div>
)}
{/* File Dependencies Section (NX file chain) */}
{result.file_dependencies && (
<div className="border border-dark-700 rounded-lg overflow-hidden">
<button
onClick={() => toggleSection('file_deps')}
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">
<GitBranch size={14} className="text-cyan-400" />
<span className="text-sm font-medium text-white">
File Dependencies ({result.file_dependencies.dependencies?.length || 0} links)
</span>
</div>
{expandedSections.has('file_deps') ? (
<ChevronDown size={14} className="text-dark-400" />
) : (
<ChevronRight size={14} className="text-dark-400" />
)}
</button>
{expandedSections.has('file_deps') && (
<div className="p-2 space-y-2 max-h-64 overflow-y-auto">
{/* Show file tree structure */}
{result.file_dependencies.root_sim && (
<div className="text-xs">
{/* Simulation files */}
{result.file_dependencies.files.sim.map((sim) => (
<div key={sim} className="ml-0">
<div className="flex items-center gap-1 p-1 bg-purple-500/10 rounded text-purple-400">
<File size={12} />
<span className="font-mono">{sim}</span>
<span className="text-purple-500/60 text-[10px]">(.sim)</span>
</div>
{/* AFM files connected to this SIM */}
{result.file_dependencies!.dependencies
.filter(d => d.source === sim && d.type === 'sim_to_afm')
.map(d => (
<div key={d.target} className="ml-4 mt-1">
<div className="flex items-center gap-1 p-1 bg-blue-500/10 rounded text-blue-400">
<File size={12} />
<span className="font-mono">{d.target}</span>
<span className="text-blue-500/60 text-[10px]">(.afm)</span>
</div>
{/* FEM files connected to this AFM */}
{result.file_dependencies!.dependencies
.filter(d2 => d2.source === d.target && d2.type === 'afm_to_fem')
.map(d2 => (
<div key={d2.target} className="ml-4 mt-1">
<div className="flex items-center gap-1 p-1 bg-green-500/10 rounded text-green-400">
<File size={12} />
<span className="font-mono">{d2.target}</span>
<span className="text-green-500/60 text-[10px]">(.fem)</span>
</div>
{/* Idealized parts connected to this FEM */}
{result.file_dependencies!.dependencies
.filter(d3 => d3.source === d2.target && d3.type === 'fem_to_idealized')
.map(d3 => (
<div key={d3.target} className="ml-4 mt-1">
<div className="flex items-center gap-1 p-1 bg-yellow-500/10 rounded text-yellow-400">
<File size={12} />
<span className="font-mono">{d3.target}</span>
<span className="text-yellow-500/60 text-[10px]">(_i.prt)</span>
</div>
{/* Geometry parts */}
{result.file_dependencies!.dependencies
.filter(d4 => d4.source === d3.target && d4.type === 'idealized_to_prt')
.map(d4 => (
<div key={d4.target} className="ml-4 mt-1">
<div className="flex items-center gap-1 p-1 bg-orange-500/10 rounded text-orange-400">
<File size={12} />
<span className="font-mono">{d4.target}</span>
<span className="text-orange-500/60 text-[10px]">(.prt)</span>
</div>
</div>
))
}
</div>
))
}
</div>
))
}
</div>
))
}
{/* Direct FEM connections (no AFM) */}
{result.file_dependencies!.dependencies
.filter(d => d.source === sim && d.type === 'sim_to_fem')
.map(d => (
<div key={d.target} className="ml-4 mt-1">
<div className="flex items-center gap-1 p-1 bg-green-500/10 rounded text-green-400">
<File size={12} />
<span className="font-mono">{d.target}</span>
<span className="text-green-500/60 text-[10px]">(.fem)</span>
</div>
</div>
))
}
</div>
))}
{/* Show any orphan PRT files not in the tree */}
{result.file_dependencies.files.prt.filter(prt =>
!result.file_dependencies!.dependencies.some(d => d.target === prt)
).length > 0 && (
<div className="mt-2 pt-2 border-t border-dark-700">
<span className="text-dark-500 text-[10px]">Additional geometry files:</span>
{result.file_dependencies.files.prt
.filter(prt => !result.file_dependencies!.dependencies.some(d => d.target === prt))
.map(prt => (
<div key={prt} className="ml-2 mt-1">
<div className="flex items-center gap-1 p-1 bg-dark-800 rounded text-dark-400">
<File size={12} />
<span className="font-mono">{prt}</span>
</div>
</div>
))
}
</div>
)}
</div>
)}
{!result.file_dependencies.root_sim && (
<p className="text-xs text-dark-500 text-center py-2">No simulation file found</p>
)}
</div>
)}
</div>
)}
{/* Extractors Section - only show if available */}
{(result.extractors_available?.length ?? 0) > 0 && (
<div className="border border-dark-700 rounded-lg overflow-hidden">