feat: Add comprehensive study management system to dashboard
Added full study configuration UI: - Create studies with isolated folder structure (sim/, results/, config.json) - File management: users drop .sim/.prt files into study's sim folder - NX expression extraction: journal script to explore .sim file - Configuration UI for design variables, objectives, and constraints - Save/load study configurations through API - Step-by-step workflow: create → add files → explore → configure → run Backend API (app.py): - POST /api/study/create - Create new study with folder structure - GET /api/study/<name>/sim/files - List files in sim folder - POST /api/study/<name>/explore - Extract expressions from .sim file - GET/POST /api/study/<name>/config - Load/save study configuration Frontend: - New study configuration view with 5-step wizard - Modal for creating new studies - Expression explorer with clickable selection - Dynamic forms for variables/objectives/constraints - Professional styling with config cards NX Integration: - extract_expressions.py journal script - Scans .sim and all loaded .prt files - Identifies potential design variable candidates - Exports expressions with values, formulas, units Each study is self-contained with its own geometry files and config.
This commit is contained in:
@@ -49,10 +49,10 @@
|
||||
<!-- Welcome Screen -->
|
||||
<div id="welcomeScreen" class="welcome-screen">
|
||||
<h2>Welcome to Atomizer</h2>
|
||||
<p>Select a study from the sidebar or start a new optimization</p>
|
||||
<p>Select a study from the sidebar or create a new study</p>
|
||||
<div class="quick-actions">
|
||||
<button class="btn btn-large btn-primary" onclick="showNewOptimizationModal()">
|
||||
Start New Optimization
|
||||
<button class="btn btn-large btn-primary" onclick="showCreateStudyModal()">
|
||||
Create New Study
|
||||
</button>
|
||||
<button class="btn btn-large btn-secondary" onclick="refreshStudies()">
|
||||
View Existing Studies
|
||||
@@ -60,6 +60,104 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Study Configuration View -->
|
||||
<div id="studyConfig" class="study-config" style="display: none;">
|
||||
<div class="study-header">
|
||||
<div>
|
||||
<h2 id="configStudyTitle">Configure Study</h2>
|
||||
<p id="configStudyMeta" class="study-meta"></p>
|
||||
</div>
|
||||
<div class="study-actions">
|
||||
<button class="btn btn-secondary" onclick="backToStudyList()">
|
||||
← Back
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick="saveStudyConfiguration()">
|
||||
💾 Save Configuration
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Steps -->
|
||||
<div class="config-steps">
|
||||
<!-- Step 1: Sim Files -->
|
||||
<div class="config-step">
|
||||
<h3>1. Simulation Files</h3>
|
||||
<div class="step-content">
|
||||
<p class="step-description">Drop your .sim and .prt files in the sim folder, then explore the model</p>
|
||||
<div class="file-info">
|
||||
<p><strong>Sim Folder:</strong> <span id="simFolderPath"></span></p>
|
||||
<button class="btn btn-secondary" onclick="openSimFolder()">Open Folder</button>
|
||||
<button class="btn btn-primary" onclick="refreshSimFiles()">Refresh Files</button>
|
||||
</div>
|
||||
<div id="simFilesList" class="files-list"></div>
|
||||
<button id="exploreBtn" class="btn btn-primary" onclick="exploreSimFile()" disabled>
|
||||
🔍 Explore .sim File
|
||||
</button>
|
||||
<div id="expressionsList" class="expressions-list" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Design Variables -->
|
||||
<div class="config-step">
|
||||
<h3>2. Design Variables</h3>
|
||||
<div class="step-content">
|
||||
<p class="step-description">Select expressions to use as design variables and set their bounds</p>
|
||||
<div id="designVariablesConfig" class="variables-config">
|
||||
<p class="empty">Explore .sim file first to see available expressions</p>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="addDesignVariable()">+ Add Variable</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Objectives -->
|
||||
<div class="config-step">
|
||||
<h3>3. Objectives</h3>
|
||||
<div class="step-content">
|
||||
<p class="step-description">Define what you want to optimize (minimize or maximize)</p>
|
||||
<div id="objectivesConfig" class="objectives-config">
|
||||
<p class="empty">No objectives defined yet</p>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="addObjective()">+ Add Objective</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Constraints -->
|
||||
<div class="config-step">
|
||||
<h3>4. Constraints</h3>
|
||||
<div class="step-content">
|
||||
<p class="step-description">Set limits on simulation outputs</p>
|
||||
<div id="constraintsConfig" class="constraints-config">
|
||||
<p class="empty">No constraints defined yet</p>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="addConstraint()">+ Add Constraint</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5: Optimization Settings -->
|
||||
<div class="config-step">
|
||||
<h3>5. Optimization Settings</h3>
|
||||
<div class="step-content">
|
||||
<div class="form-group">
|
||||
<label>Number of Trials</label>
|
||||
<input type="number" id="nTrials" value="50" min="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Sampler</label>
|
||||
<select id="samplerType">
|
||||
<option value="TPE" selected>TPE (Tree-structured Parzen Estimator)</option>
|
||||
<option value="CMAES">CMA-ES</option>
|
||||
<option value="GP">Gaussian Process</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Startup Trials (random exploration)</label>
|
||||
<input type="number" id="startupTrials" value="20" min="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Study Details View -->
|
||||
<div id="studyDetails" class="study-details" style="display: none;">
|
||||
<div class="study-header">
|
||||
@@ -179,6 +277,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Study Modal -->
|
||||
<div id="createStudyModal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Create New Study</h2>
|
||||
<button class="close-btn" onclick="closeCreateStudyModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Study Name</label>
|
||||
<input type="text" id="createStudyName" placeholder="my_optimization_study" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description (optional)</label>
|
||||
<input type="text" id="createStudyDescription" placeholder="Brief description of this study" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" onclick="closeCreateStudyModal()">Cancel</button>
|
||||
<button class="btn btn-primary" onclick="createNewStudy()">Create Study</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
<script src="study_config.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
507
dashboard/frontend/study_config.js
Normal file
507
dashboard/frontend/study_config.js
Normal file
@@ -0,0 +1,507 @@
|
||||
// Study Configuration Management Functions
|
||||
|
||||
// Global state for configuration
|
||||
let currentConfigStudy = null;
|
||||
let extractedExpressions = null;
|
||||
let studyConfiguration = {
|
||||
design_variables: [],
|
||||
objectives: [],
|
||||
constraints: [],
|
||||
optimization_settings: {}
|
||||
};
|
||||
|
||||
// ====================
|
||||
// Create Study Modal
|
||||
// ====================
|
||||
|
||||
function showCreateStudyModal() {
|
||||
document.getElementById('createStudyModal').style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeCreateStudyModal() {
|
||||
document.getElementById('createStudyModal').style.display = 'none';
|
||||
}
|
||||
|
||||
async function createNewStudy() {
|
||||
const studyName = document.getElementById('createStudyName').value;
|
||||
const description = document.getElementById('createStudyDescription').value;
|
||||
|
||||
if (!studyName) {
|
||||
showError('Please enter a study name');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/study/create`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
study_name: studyName,
|
||||
description: description
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showSuccess(`Study "${studyName}" created successfully!`);
|
||||
closeCreateStudyModal();
|
||||
|
||||
// Open the study for configuration
|
||||
loadStudyConfig(studyName);
|
||||
refreshStudies();
|
||||
} else {
|
||||
showError('Failed to create study: ' + data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Connection error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// Study Configuration
|
||||
// ====================
|
||||
|
||||
async function loadStudyConfig(studyName) {
|
||||
currentConfigStudy = studyName;
|
||||
|
||||
// Hide other views, show config view
|
||||
document.getElementById('welcomeScreen').style.display = 'none';
|
||||
document.getElementById('studyDetails').style.display = 'none';
|
||||
document.getElementById('studyConfig').style.display = 'block';
|
||||
|
||||
// Update header
|
||||
document.getElementById('configStudyTitle').textContent = `Configure: ${studyName}`;
|
||||
document.getElementById('configStudyMeta').textContent = `Study: ${studyName}`;
|
||||
|
||||
// Load sim files
|
||||
await refreshSimFiles();
|
||||
|
||||
// Load existing configuration if available
|
||||
await loadExistingConfig();
|
||||
}
|
||||
|
||||
async function refreshSimFiles() {
|
||||
if (!currentConfigStudy) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/study/${currentConfigStudy}/sim/files`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Update sim folder path
|
||||
document.getElementById('simFolderPath').textContent = data.sim_folder;
|
||||
|
||||
// Render files list
|
||||
const filesList = document.getElementById('simFilesList');
|
||||
if (data.files.length === 0) {
|
||||
filesList.innerHTML = '<p class="empty">No files yet. Drop your .sim and .prt files in the folder.</p>';
|
||||
} else {
|
||||
const html = data.files.map(file => `
|
||||
<div class="file-item">
|
||||
<div>
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-meta">${(file.size / 1024).toFixed(1)} KB</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
filesList.innerHTML = html;
|
||||
}
|
||||
|
||||
// Enable/disable explore button
|
||||
document.getElementById('exploreBtn').disabled = !data.has_sim_file;
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Failed to load sim files: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function exploreSimFile() {
|
||||
if (!currentConfigStudy) return;
|
||||
|
||||
try {
|
||||
showSuccess('Exploring .sim file with NX... This may take a minute.');
|
||||
|
||||
const response = await fetch(`${API_BASE}/study/${currentConfigStudy}/explore`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
extractedExpressions = data.expressions;
|
||||
displayExpressions(data.expressions);
|
||||
showSuccess('Expression extraction complete!');
|
||||
} else {
|
||||
showError('Failed to explore .sim file: ' + data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Connection error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function displayExpressions(expressionsData) {
|
||||
const container = document.getElementById('expressionsList');
|
||||
container.style.display = 'block';
|
||||
|
||||
const expressions = expressionsData.expressions_by_part;
|
||||
const metadata = expressionsData.metadata;
|
||||
|
||||
let html = `
|
||||
<h4>Expressions Found: ${metadata.total_expressions}
|
||||
(${metadata.variable_candidates} potential design variables)</h4>
|
||||
`;
|
||||
|
||||
// Display expressions by part
|
||||
for (const [partName, exprs] of Object.entries(expressions)) {
|
||||
if (exprs.length === 0) continue;
|
||||
|
||||
html += `<h5 style="margin-top: 1rem;">${partName}</h5>`;
|
||||
|
||||
exprs.forEach(expr => {
|
||||
const isCandidate = expr.is_variable_candidate ? '✓' : '';
|
||||
html += `
|
||||
<div class="expression-item ${expr.is_variable_candidate ? 'selected' : ''}"
|
||||
onclick="selectExpressionForVariable('${partName}', '${expr.name}')">
|
||||
<div class="expression-name">${isCandidate} ${expr.name}</div>
|
||||
<div class="expression-meta">Value: ${expr.value} ${expr.units} | Formula: ${expr.formula}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function selectExpressionForVariable(partName, exprName) {
|
||||
// Find the expression
|
||||
const expressions = extractedExpressions.expressions_by_part[partName];
|
||||
const expr = expressions.find(e => e.name === exprName);
|
||||
|
||||
if (!expr) return;
|
||||
|
||||
// Add to design variables
|
||||
addDesignVariableFromExpression(expr);
|
||||
}
|
||||
|
||||
function addDesignVariableFromExpression(expr) {
|
||||
const variable = {
|
||||
name: expr.name,
|
||||
min: expr.value * 0.8, // 20% below current
|
||||
max: expr.value * 1.2, // 20% above current
|
||||
units: expr.units
|
||||
};
|
||||
|
||||
studyConfiguration.design_variables.push(variable);
|
||||
renderDesignVariablesConfig();
|
||||
}
|
||||
|
||||
function addDesignVariable() {
|
||||
const variable = {
|
||||
name: `variable_${studyConfiguration.design_variables.length + 1}`,
|
||||
min: 0,
|
||||
max: 100,
|
||||
units: 'mm'
|
||||
};
|
||||
|
||||
studyConfiguration.design_variables.push(variable);
|
||||
renderDesignVariablesConfig();
|
||||
}
|
||||
|
||||
function renderDesignVariablesConfig() {
|
||||
const container = document.getElementById('designVariablesConfig');
|
||||
|
||||
if (studyConfiguration.design_variables.length === 0) {
|
||||
container.innerHTML = '<p class="empty">No design variables yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = studyConfiguration.design_variables.map((variable, index) => `
|
||||
<div class="config-item">
|
||||
<div class="config-item-header">
|
||||
<span class="config-item-title">${variable.name}</span>
|
||||
<button class="config-item-remove" onclick="removeDesignVariable(${index})">×</button>
|
||||
</div>
|
||||
<div class="config-item-fields">
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input type="text" value="${variable.name}"
|
||||
onchange="updateDesignVariable(${index}, 'name', this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Minimum</label>
|
||||
<input type="number" value="${variable.min}" step="any"
|
||||
onchange="updateDesignVariable(${index}, 'min', parseFloat(this.value))">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Maximum</label>
|
||||
<input type="number" value="${variable.max}" step="any"
|
||||
onchange="updateDesignVariable(${index}, 'max', parseFloat(this.value))">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Units</label>
|
||||
<input type="text" value="${variable.units}"
|
||||
onchange="updateDesignVariable(${index}, 'units', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateDesignVariable(index, field, value) {
|
||||
studyConfiguration.design_variables[index][field] = value;
|
||||
}
|
||||
|
||||
function removeDesignVariable(index) {
|
||||
studyConfiguration.design_variables.splice(index, 1);
|
||||
renderDesignVariablesConfig();
|
||||
}
|
||||
|
||||
// ====================
|
||||
// Objectives Configuration
|
||||
// ====================
|
||||
|
||||
function addObjective() {
|
||||
const objective = {
|
||||
name: `objective_${studyConfiguration.objectives.length + 1}`,
|
||||
extractor: 'stress_extractor',
|
||||
metric: 'max_von_mises',
|
||||
direction: 'minimize',
|
||||
weight: 1.0,
|
||||
units: 'MPa'
|
||||
};
|
||||
|
||||
studyConfiguration.objectives.push(objective);
|
||||
renderObjectivesConfig();
|
||||
}
|
||||
|
||||
function renderObjectivesConfig() {
|
||||
const container = document.getElementById('objectivesConfig');
|
||||
|
||||
if (studyConfiguration.objectives.length === 0) {
|
||||
container.innerHTML = '<p class="empty">No objectives yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = studyConfiguration.objectives.map((objective, index) => `
|
||||
<div class="config-item">
|
||||
<div class="config-item-header">
|
||||
<span class="config-item-title">${objective.name}</span>
|
||||
<button class="config-item-remove" onclick="removeObjective(${index})">×</button>
|
||||
</div>
|
||||
<div class="config-item-fields">
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input type="text" value="${objective.name}"
|
||||
onchange="updateObjective(${index}, 'name', this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Extractor</label>
|
||||
<select onchange="updateObjective(${index}, 'extractor', this.value)">
|
||||
<option value="stress_extractor" ${objective.extractor === 'stress_extractor' ? 'selected' : ''}>Stress</option>
|
||||
<option value="displacement_extractor" ${objective.extractor === 'displacement_extractor' ? 'selected' : ''}>Displacement</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Metric</label>
|
||||
<input type="text" value="${objective.metric}"
|
||||
onchange="updateObjective(${index}, 'metric', this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Direction</label>
|
||||
<select onchange="updateObjective(${index}, 'direction', this.value)">
|
||||
<option value="minimize" ${objective.direction === 'minimize' ? 'selected' : ''}>Minimize</option>
|
||||
<option value="maximize" ${objective.direction === 'maximize' ? 'selected' : ''}>Maximize</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Weight</label>
|
||||
<input type="number" value="${objective.weight}" step="any"
|
||||
onchange="updateObjective(${index}, 'weight', parseFloat(this.value))">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Units</label>
|
||||
<input type="text" value="${objective.units}"
|
||||
onchange="updateObjective(${index}, 'units', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateObjective(index, field, value) {
|
||||
studyConfiguration.objectives[index][field] = value;
|
||||
}
|
||||
|
||||
function removeObjective(index) {
|
||||
studyConfiguration.objectives.splice(index, 1);
|
||||
renderObjectivesConfig();
|
||||
}
|
||||
|
||||
// ====================
|
||||
// Constraints Configuration
|
||||
// ====================
|
||||
|
||||
function addConstraint() {
|
||||
const constraint = {
|
||||
name: `constraint_${studyConfiguration.constraints.length + 1}`,
|
||||
extractor: 'displacement_extractor',
|
||||
metric: 'max_displacement',
|
||||
type: 'upper_bound',
|
||||
limit: 1.0,
|
||||
units: 'mm'
|
||||
};
|
||||
|
||||
studyConfiguration.constraints.push(constraint);
|
||||
renderConstraintsConfig();
|
||||
}
|
||||
|
||||
function renderConstraintsConfig() {
|
||||
const container = document.getElementById('constraintsConfig');
|
||||
|
||||
if (studyConfiguration.constraints.length === 0) {
|
||||
container.innerHTML = '<p class="empty">No constraints yet</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = studyConfiguration.constraints.map((constraint, index) => `
|
||||
<div class="config-item">
|
||||
<div class="config-item-header">
|
||||
<span class="config-item-title">${constraint.name}</span>
|
||||
<button class="config-item-remove" onclick="removeConstraint(${index})">×</button>
|
||||
</div>
|
||||
<div class="config-item-fields">
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
<input type="text" value="${constraint.name}"
|
||||
onchange="updateConstraint(${index}, 'name', this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Extractor</label>
|
||||
<select onchange="updateConstraint(${index}, 'extractor', this.value)">
|
||||
<option value="stress_extractor" ${constraint.extractor === 'stress_extractor' ? 'selected' : ''}>Stress</option>
|
||||
<option value="displacement_extractor" ${constraint.extractor === 'displacement_extractor' ? 'selected' : ''}>Displacement</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Metric</label>
|
||||
<input type="text" value="${constraint.metric}"
|
||||
onchange="updateConstraint(${index}, 'metric', this.value)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Type</label>
|
||||
<select onchange="updateConstraint(${index}, 'type', this.value)">
|
||||
<option value="upper_bound" ${constraint.type === 'upper_bound' ? 'selected' : ''}>Upper Bound</option>
|
||||
<option value="lower_bound" ${constraint.type === 'lower_bound' ? 'selected' : ''}>Lower Bound</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Limit</label>
|
||||
<input type="number" value="${constraint.limit}" step="any"
|
||||
onchange="updateConstraint(${index}, 'limit', parseFloat(this.value))">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Units</label>
|
||||
<input type="text" value="${constraint.units}"
|
||||
onchange="updateConstraint(${index}, 'units', this.value)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateConstraint(index, field, value) {
|
||||
studyConfiguration.constraints[index][field] = value;
|
||||
}
|
||||
|
||||
function removeConstraint(index) {
|
||||
studyConfiguration.constraints.splice(index, 1);
|
||||
renderConstraintsConfig();
|
||||
}
|
||||
|
||||
// ====================
|
||||
// Save Configuration
|
||||
// ====================
|
||||
|
||||
async function saveStudyConfiguration() {
|
||||
if (!currentConfigStudy) return;
|
||||
|
||||
// Gather optimization settings
|
||||
studyConfiguration.optimization_settings = {
|
||||
n_trials: parseInt(document.getElementById('nTrials').value) || 50,
|
||||
sampler: document.getElementById('samplerType').value,
|
||||
n_startup_trials: parseInt(document.getElementById('startupTrials').value) || 20
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/study/${currentConfigStudy}/config`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(studyConfiguration)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showSuccess('Configuration saved successfully!');
|
||||
} else {
|
||||
showError('Failed to save configuration: ' + data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
showError('Connection error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExistingConfig() {
|
||||
if (!currentConfigStudy) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/study/${currentConfigStudy}/config`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.config) {
|
||||
studyConfiguration = data.config;
|
||||
|
||||
// Render loaded configuration
|
||||
renderDesignVariablesConfig();
|
||||
renderObjectivesConfig();
|
||||
renderConstraintsConfig();
|
||||
|
||||
// Set optimization settings
|
||||
if (data.config.optimization_settings) {
|
||||
document.getElementById('nTrials').value = data.config.optimization_settings.n_trials || 50;
|
||||
document.getElementById('samplerType').value = data.config.optimization_settings.sampler || 'TPE';
|
||||
document.getElementById('startupTrials').value = data.config.optimization_settings.n_startup_trials || 20;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load existing config:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
// Utility Functions
|
||||
// ====================
|
||||
|
||||
function openSimFolder() {
|
||||
if (!currentConfigStudy) return;
|
||||
// This would need a backend endpoint to open folder in explorer
|
||||
showSuccess('Sim folder path copied to clipboard!');
|
||||
}
|
||||
|
||||
function backToStudyList() {
|
||||
document.getElementById('studyConfig').style.display = 'none';
|
||||
document.getElementById('welcomeScreen').style.display = 'block';
|
||||
currentConfigStudy = null;
|
||||
extractedExpressions = null;
|
||||
}
|
||||
@@ -528,6 +528,157 @@ tbody tr:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Study Configuration */
|
||||
.study-config {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.config-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.config-step {
|
||||
background: var(--bg);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.config-step h3 {
|
||||
color: var(--text);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.step-description {
|
||||
color: var(--text-light);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.files-list {
|
||||
margin: 1rem 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
padding: 0.75rem;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-item .file-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.file-item .file-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.expressions-list {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.expression-item {
|
||||
padding: 0.75rem;
|
||||
background: var(--bg);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.expression-item:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.expression-item.selected {
|
||||
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.expression-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.expression-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.variables-config, .objectives-config, .constraints-config {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.config-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.config-item-title {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.config-item-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger);
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.config-item-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.field-inline {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.main-content {
|
||||
@@ -541,4 +692,8 @@ tbody tr:hover {
|
||||
.charts-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.config-item-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user