feat: Add Studio UI, intake system, and extractor improvements
Dashboard: - Add Studio page with drag-drop model upload and Claude chat - Add intake system for study creation workflow - Improve session manager and context builder - Add intake API routes and frontend components Optimization Engine: - Add CLI module for command-line operations - Add intake module for study preprocessing - Add validation module with gate checks - Improve Zernike extractor documentation - Update spec models with better validation - Enhance solve_simulation robustness Documentation: - Add ATOMIZER_STUDIO.md planning doc - Add ATOMIZER_UX_SYSTEM.md for UX patterns - Update extractor library docs - Add study-readme-generator skill Tools: - Add test scripts for extraction validation - Add Zernike recentering test Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
/**
|
||||
* ExpressionList - Display discovered expressions with selection capability
|
||||
*
|
||||
* Shows expressions from NX introspection, allowing users to:
|
||||
* - View all discovered expressions
|
||||
* - See which are design variable candidates (auto-detected)
|
||||
* - Select/deselect expressions to use as design variables
|
||||
* - View expression values and units
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Check,
|
||||
Search,
|
||||
AlertTriangle,
|
||||
Sparkles,
|
||||
Info,
|
||||
Variable,
|
||||
} from 'lucide-react';
|
||||
import { ExpressionInfo } from '../../types/intake';
|
||||
|
||||
interface ExpressionListProps {
|
||||
/** Expression data from introspection */
|
||||
expressions: ExpressionInfo[];
|
||||
/** Mass from introspection (kg) */
|
||||
massKg?: number | null;
|
||||
/** Currently selected expressions (to become DVs) */
|
||||
selectedExpressions: string[];
|
||||
/** Callback when selection changes */
|
||||
onSelectionChange: (selected: string[]) => void;
|
||||
/** Whether in read-only mode */
|
||||
readOnly?: boolean;
|
||||
/** Compact display mode */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export const ExpressionList: React.FC<ExpressionListProps> = ({
|
||||
expressions,
|
||||
massKg,
|
||||
selectedExpressions,
|
||||
onSelectionChange,
|
||||
readOnly = false,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [filter, setFilter] = useState('');
|
||||
const [showCandidatesOnly, setShowCandidatesOnly] = useState(true);
|
||||
|
||||
// Filter expressions based on search and candidate toggle
|
||||
const filteredExpressions = expressions.filter((expr) => {
|
||||
const matchesSearch = filter === '' ||
|
||||
expr.name.toLowerCase().includes(filter.toLowerCase());
|
||||
const matchesCandidate = !showCandidatesOnly || expr.is_candidate;
|
||||
return matchesSearch && matchesCandidate;
|
||||
});
|
||||
|
||||
// Sort: candidates first, then by confidence, then alphabetically
|
||||
const sortedExpressions = [...filteredExpressions].sort((a, b) => {
|
||||
if (a.is_candidate !== b.is_candidate) {
|
||||
return a.is_candidate ? -1 : 1;
|
||||
}
|
||||
if (a.confidence !== b.confidence) {
|
||||
return b.confidence - a.confidence;
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
const toggleExpression = (name: string) => {
|
||||
if (readOnly) return;
|
||||
|
||||
if (selectedExpressions.includes(name)) {
|
||||
onSelectionChange(selectedExpressions.filter(n => n !== name));
|
||||
} else {
|
||||
onSelectionChange([...selectedExpressions, name]);
|
||||
}
|
||||
};
|
||||
|
||||
const selectAllCandidates = () => {
|
||||
const candidateNames = expressions
|
||||
.filter(e => e.is_candidate)
|
||||
.map(e => e.name);
|
||||
onSelectionChange(candidateNames);
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
onSelectionChange([]);
|
||||
};
|
||||
|
||||
const candidateCount = expressions.filter(e => e.is_candidate).length;
|
||||
|
||||
if (expressions.length === 0) {
|
||||
return (
|
||||
<div className="p-4 rounded-lg bg-dark-700/50 border border-dark-600">
|
||||
<div className="flex items-center gap-2 text-dark-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span>No expressions found. Run introspection to discover model parameters.</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Header with stats */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h5 className="text-sm font-medium text-dark-300 flex items-center gap-2">
|
||||
<Variable className="w-4 h-4" />
|
||||
Discovered Expressions
|
||||
</h5>
|
||||
<span className="text-xs text-dark-500">
|
||||
{expressions.length} total, {candidateCount} candidates
|
||||
</span>
|
||||
{massKg && (
|
||||
<span className="text-xs text-primary-400">
|
||||
Mass: {massKg.toFixed(3)} kg
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!readOnly && selectedExpressions.length > 0 && (
|
||||
<span className="text-xs text-green-400">
|
||||
{selectedExpressions.length} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
{!compact && (
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 max-w-xs">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-dark-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search expressions..."
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="w-full pl-8 pr-3 py-1.5 text-sm rounded-lg bg-dark-700 border border-dark-600
|
||||
text-white placeholder-dark-500 focus:border-primary-500/50 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Show candidates only toggle */}
|
||||
<label className="flex items-center gap-2 text-xs text-dark-400 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showCandidatesOnly}
|
||||
onChange={(e) => setShowCandidatesOnly(e.target.checked)}
|
||||
className="w-4 h-4 rounded border-dark-500 bg-dark-700 text-primary-500
|
||||
focus:ring-primary-500/30"
|
||||
/>
|
||||
Candidates only
|
||||
</label>
|
||||
|
||||
{/* Quick actions */}
|
||||
{!readOnly && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={selectAllCandidates}
|
||||
className="px-2 py-1 text-xs rounded bg-primary-500/10 text-primary-400
|
||||
hover:bg-primary-500/20 transition-colors"
|
||||
>
|
||||
Select all candidates
|
||||
</button>
|
||||
<button
|
||||
onClick={clearSelection}
|
||||
className="px-2 py-1 text-xs rounded bg-dark-600 text-dark-400
|
||||
hover:bg-dark-500 transition-colors"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expression list */}
|
||||
<div className={`rounded-lg border border-dark-600 overflow-hidden ${
|
||||
compact ? 'max-h-48' : 'max-h-72'
|
||||
} overflow-y-auto`}>
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-dark-700 sticky top-0">
|
||||
<tr>
|
||||
{!readOnly && (
|
||||
<th className="w-8 px-2 py-2"></th>
|
||||
)}
|
||||
<th className="px-3 py-2 text-left text-dark-400 font-medium">Name</th>
|
||||
<th className="px-3 py-2 text-right text-dark-400 font-medium w-24">Value</th>
|
||||
<th className="px-3 py-2 text-left text-dark-400 font-medium w-16">Units</th>
|
||||
<th className="px-3 py-2 text-center text-dark-400 font-medium w-20">Candidate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-700">
|
||||
{sortedExpressions.map((expr) => {
|
||||
const isSelected = selectedExpressions.includes(expr.name);
|
||||
return (
|
||||
<tr
|
||||
key={expr.name}
|
||||
onClick={() => toggleExpression(expr.name)}
|
||||
className={`
|
||||
${readOnly ? '' : 'cursor-pointer hover:bg-dark-700/50'}
|
||||
${isSelected ? 'bg-primary-500/10' : ''}
|
||||
transition-colors
|
||||
`}
|
||||
>
|
||||
{!readOnly && (
|
||||
<td className="px-2 py-2">
|
||||
<div className={`w-5 h-5 rounded border flex items-center justify-center
|
||||
${isSelected
|
||||
? 'bg-primary-500 border-primary-500'
|
||||
: 'border-dark-500 bg-dark-700'
|
||||
}`}
|
||||
>
|
||||
{isSelected && <Check className="w-3 h-3 text-white" />}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<code className={`text-xs ${isSelected ? 'text-primary-300' : 'text-white'}`}>
|
||||
{expr.name}
|
||||
</code>
|
||||
{expr.formula && (
|
||||
<span className="text-xs text-dark-500" title={expr.formula}>
|
||||
<Info className="w-3 h-3" />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right font-mono text-xs text-dark-300">
|
||||
{expr.value !== null ? expr.value.toFixed(3) : '-'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-dark-400">
|
||||
{expr.units || '-'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{expr.is_candidate ? (
|
||||
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs
|
||||
bg-green-500/10 text-green-400">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
{Math.round(expr.confidence * 100)}%
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-dark-500">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{sortedExpressions.length === 0 && (
|
||||
<div className="px-4 py-8 text-center text-dark-500">
|
||||
No expressions match your filter
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
{!readOnly && !compact && (
|
||||
<p className="text-xs text-dark-500">
|
||||
Select expressions to use as design variables. Candidates (marked with %) are
|
||||
automatically identified based on naming patterns and units.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpressionList;
|
||||
Reference in New Issue
Block a user