feat: Enhance equipment, maintenance, production, and simulation management interfaces
- Updated equipment.html to include scenario filtering, equipment addition form, and dynamic equipment listing. - Enhanced maintenance.html with scenario filtering, maintenance entry form, and dynamic equipment selection. - Improved production.html to allow scenario filtering and production output entry. - Revamped reporting.html to display scenario KPI summaries with refresh functionality. - Expanded simulations.html to support scenario selection, simulation run history, and detailed results display. - Refactored base_header.html for improved navigation structure and active link highlighting.
This commit is contained in:
@@ -1,8 +1,447 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Simulations · CalMiner{% endblock %}
|
||||
{% extends "base.html" %} {% block title %}Simulations · CalMiner{% endblock %}
|
||||
{% block content %}
|
||||
<section class="panel">
|
||||
<h2>Monte Carlo Simulations</h2>
|
||||
<p>Placeholder for running simulations and reviewing outputs. Target integration: `/api/simulations/run`.</p>
|
||||
</section>
|
||||
<section class="panel">
|
||||
<h2>Monte Carlo Simulations</h2>
|
||||
{% if simulation_scenarios %}
|
||||
<div class="form-grid">
|
||||
<label for="simulations-scenario-filter">
|
||||
Scenario filter
|
||||
<select id="simulations-scenario-filter">
|
||||
<option value="">Select a scenario</option>
|
||||
{% for scenario in simulation_scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">Create a scenario before running simulations.</p>
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
id="simulations-overview-wrapper"
|
||||
class="table-container{% if not simulation_scenarios %} hidden{% endif %}"
|
||||
>
|
||||
<h3>Scenario Run History</h3>
|
||||
<table aria-label="Simulation run history">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Scenario</th>
|
||||
<th scope="col">Iterations</th>
|
||||
<th scope="col">Mean Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="simulations-overview-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="simulations-overview-empty" class="empty-state hidden">
|
||||
Create a scenario to review simulation history.
|
||||
</p>
|
||||
|
||||
<div id="simulations-empty" class="empty-state">
|
||||
Select a scenario to review simulation outputs.
|
||||
</div>
|
||||
|
||||
<div id="simulations-summary-wrapper" class="table-container hidden">
|
||||
<h3>Summary Metrics</h3>
|
||||
<table aria-label="Simulation summary metrics">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Metric</th>
|
||||
<th scope="col">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="simulations-summary-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="simulations-summary-empty" class="empty-state hidden">
|
||||
No simulations have been run for this scenario yet.
|
||||
</p>
|
||||
|
||||
<div id="simulations-results-wrapper" class="table-container hidden">
|
||||
<h3>Sample Results</h3>
|
||||
<table aria-label="Simulation sample results">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Iteration</th>
|
||||
<th scope="col">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="simulations-results-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="simulations-results-empty" class="empty-state hidden">
|
||||
No sample results available for this scenario.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Run Simulation</h2>
|
||||
{% if simulation_scenarios %}
|
||||
<form id="simulation-run-form" class="form-grid">
|
||||
<label for="simulation-form-scenario">
|
||||
Scenario
|
||||
<select id="simulation-form-scenario" name="scenario_id" required>
|
||||
<option value="" disabled selected>Select a scenario</option>
|
||||
{% for scenario in simulation_scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label for="simulation-form-iterations">
|
||||
Iterations
|
||||
<input
|
||||
id="simulation-form-iterations"
|
||||
type="number"
|
||||
name="iterations"
|
||||
min="100"
|
||||
step="100"
|
||||
value="1000"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="simulation-form-seed">
|
||||
Seed (optional)
|
||||
<input id="simulation-form-seed" type="number" name="seed" />
|
||||
</label>
|
||||
<button type="submit" class="btn primary">Run Simulation</button>
|
||||
</form>
|
||||
<p id="simulation-feedback" class="feedback hidden" role="status"></p>
|
||||
{% else %}
|
||||
<p class="empty-state">Create at least one scenario to run simulations.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const simulationScenarios = {{ simulation_scenarios | tojson | safe }};
|
||||
const initialRuns = {{ simulation_runs | tojson | safe }};
|
||||
const SUMMARY_FIELDS = [
|
||||
{ key: "count", label: "Iterations", decimals: 0 },
|
||||
{ key: "mean", label: "Mean Result", decimals: 2 },
|
||||
{ key: "median", label: "Median Result", decimals: 2 },
|
||||
{ key: "min", label: "Minimum", decimals: 2 },
|
||||
{ key: "max", label: "Maximum", decimals: 2 },
|
||||
{ key: "variance", label: "Variance", decimals: 2 },
|
||||
{ key: "std_dev", label: "Standard Deviation", decimals: 2 },
|
||||
{ key: "percentile_5", label: "Percentile 5", decimals: 2 },
|
||||
{ key: "percentile_95", label: "Percentile 95", decimals: 2 },
|
||||
{ key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
|
||||
{ key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
|
||||
];
|
||||
const SAMPLE_RESULT_LIMIT = 20;
|
||||
|
||||
const filterSelect = document.getElementById("simulations-scenario-filter");
|
||||
const overviewWrapper = document.getElementById("simulations-overview-wrapper");
|
||||
const overviewBody = document.getElementById("simulations-overview-body");
|
||||
const overviewEmpty = document.getElementById("simulations-overview-empty");
|
||||
const emptyState = document.getElementById("simulations-empty");
|
||||
const summaryWrapper = document.getElementById("simulations-summary-wrapper");
|
||||
const summaryBody = document.getElementById("simulations-summary-body");
|
||||
const summaryEmpty = document.getElementById("simulations-summary-empty");
|
||||
const resultsWrapper = document.getElementById("simulations-results-wrapper");
|
||||
const resultsBody = document.getElementById("simulations-results-body");
|
||||
const resultsEmpty = document.getElementById("simulations-results-empty");
|
||||
const simulationForm = document.getElementById("simulation-run-form");
|
||||
const simulationFeedback = document.getElementById("simulation-feedback");
|
||||
const formScenarioSelect = document.getElementById("simulation-form-scenario");
|
||||
|
||||
const simulationRunsMap = Object.create(null);
|
||||
|
||||
function getScenarioName(id) {
|
||||
const match = simulationScenarios.find(
|
||||
(scenario) => String(scenario.id) === String(id)
|
||||
);
|
||||
return match ? match.name : `Scenario ${id}`;
|
||||
}
|
||||
|
||||
function formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined || Number.isNaN(Number(value))) {
|
||||
return "—";
|
||||
}
|
||||
return Number(value).toLocaleString(undefined, {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
});
|
||||
}
|
||||
|
||||
function showFeedback(element, message, type = "success") {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.textContent = message;
|
||||
element.classList.remove("hidden", "success", "error");
|
||||
element.classList.add(type);
|
||||
}
|
||||
|
||||
function hideFeedback(element) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.classList.add("hidden");
|
||||
element.textContent = "";
|
||||
}
|
||||
|
||||
function initializeRunsMap() {
|
||||
simulationScenarios.forEach((scenario) => {
|
||||
const key = String(scenario.id);
|
||||
simulationRunsMap[key] = {
|
||||
scenario_id: scenario.id,
|
||||
scenario_name: scenario.name,
|
||||
iterations: 0,
|
||||
summary: null,
|
||||
sample_results: [],
|
||||
};
|
||||
});
|
||||
|
||||
initialRuns.forEach((run) => {
|
||||
const key = String(run.scenario_id);
|
||||
simulationRunsMap[key] = {
|
||||
scenario_id: run.scenario_id,
|
||||
scenario_name: run.scenario_name || getScenarioName(key),
|
||||
iterations: run.iterations || 0,
|
||||
summary: run.summary || null,
|
||||
sample_results: Array.isArray(run.sample_results)
|
||||
? run.sample_results
|
||||
: [],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function renderOverviewTable() {
|
||||
if (!overviewBody) {
|
||||
return;
|
||||
}
|
||||
|
||||
overviewBody.innerHTML = "";
|
||||
|
||||
if (!simulationScenarios.length) {
|
||||
if (overviewWrapper) {
|
||||
overviewWrapper.classList.add("hidden");
|
||||
}
|
||||
if (overviewEmpty) {
|
||||
overviewEmpty.classList.remove("hidden");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (overviewWrapper) {
|
||||
overviewWrapper.classList.remove("hidden");
|
||||
}
|
||||
if (overviewEmpty) {
|
||||
overviewEmpty.classList.add("hidden");
|
||||
}
|
||||
|
||||
simulationScenarios.forEach((scenario) => {
|
||||
const key = String(scenario.id);
|
||||
const run = simulationRunsMap[key];
|
||||
const iterations = run && run.iterations ? run.iterations : 0;
|
||||
const meanValue = iterations && run && run.summary ? run.summary.mean : null;
|
||||
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${scenario.name}</td>
|
||||
<td>${iterations || 0}</td>
|
||||
<td>${iterations ? formatNumber(meanValue) : "—"}</td>
|
||||
`;
|
||||
overviewBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function renderScenarioDetails(scenarioId) {
|
||||
if (!scenarioId) {
|
||||
if (emptyState) {
|
||||
emptyState.classList.remove("hidden");
|
||||
}
|
||||
if (summaryWrapper) {
|
||||
summaryWrapper.classList.add("hidden");
|
||||
}
|
||||
if (summaryEmpty) {
|
||||
summaryEmpty.classList.add("hidden");
|
||||
}
|
||||
if (resultsWrapper) {
|
||||
resultsWrapper.classList.add("hidden");
|
||||
}
|
||||
if (resultsEmpty) {
|
||||
resultsEmpty.classList.add("hidden");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (emptyState) {
|
||||
emptyState.classList.add("hidden");
|
||||
}
|
||||
|
||||
const run = simulationRunsMap[scenarioId];
|
||||
const iterations = run && run.iterations ? run.iterations : 0;
|
||||
const summary = run ? run.summary : null;
|
||||
|
||||
if (!iterations || !summary) {
|
||||
if (summaryWrapper) {
|
||||
summaryWrapper.classList.add("hidden");
|
||||
}
|
||||
if (summaryEmpty) {
|
||||
summaryEmpty.classList.remove("hidden");
|
||||
}
|
||||
} else {
|
||||
if (summaryEmpty) {
|
||||
summaryEmpty.classList.add("hidden");
|
||||
}
|
||||
if (summaryWrapper) {
|
||||
summaryWrapper.classList.remove("hidden");
|
||||
}
|
||||
if (summaryBody) {
|
||||
summaryBody.innerHTML = "";
|
||||
SUMMARY_FIELDS.forEach((field) => {
|
||||
const value = summary[field.key];
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${field.label}</td>
|
||||
<td>${formatNumber(value, field.decimals)}</td>
|
||||
`;
|
||||
summaryBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const sample = run && Array.isArray(run.sample_results) ? run.sample_results : [];
|
||||
|
||||
if (!sample.length) {
|
||||
if (resultsWrapper) {
|
||||
resultsWrapper.classList.add("hidden");
|
||||
}
|
||||
if (resultsEmpty) {
|
||||
resultsEmpty.classList.remove("hidden");
|
||||
}
|
||||
} else {
|
||||
if (resultsEmpty) {
|
||||
resultsEmpty.classList.add("hidden");
|
||||
}
|
||||
if (resultsWrapper) {
|
||||
resultsWrapper.classList.remove("hidden");
|
||||
}
|
||||
if (resultsBody) {
|
||||
resultsBody.innerHTML = "";
|
||||
sample.forEach((entry) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${entry.iteration}</td>
|
||||
<td>${formatNumber(entry.result)}</td>
|
||||
`;
|
||||
resultsBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function syncFormScenario(value) {
|
||||
if (formScenarioSelect) {
|
||||
formScenarioSelect.value = value || "";
|
||||
}
|
||||
}
|
||||
|
||||
function handleScenarioChange(event) {
|
||||
const value = event.target.value;
|
||||
renderScenarioDetails(value);
|
||||
syncFormScenario(value);
|
||||
renderOverviewTable();
|
||||
}
|
||||
|
||||
async function submitSimulation(event) {
|
||||
event.preventDefault();
|
||||
hideFeedback(simulationFeedback);
|
||||
|
||||
const formData = new FormData(simulationForm);
|
||||
const scenarioId = formData.get("scenario_id");
|
||||
const iterationsValue = Number(formData.get("iterations"));
|
||||
const seedValue = formData.get("seed");
|
||||
|
||||
if (!scenarioId) {
|
||||
showFeedback(simulationFeedback, "Select a scenario before running a simulation.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!iterationsValue || iterationsValue <= 0) {
|
||||
showFeedback(simulationFeedback, "Provide a positive number of iterations.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
scenario_id: Number(scenarioId),
|
||||
iterations: iterationsValue,
|
||||
};
|
||||
|
||||
if (seedValue) {
|
||||
payload.seed = Number(seedValue);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/simulations/run", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorDetail = await response.json().catch(() => ({}));
|
||||
throw new Error(errorDetail.detail || "Unable to start simulation.");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
const mapKey = String(result.scenario_id);
|
||||
const scenarioName = getScenarioName(mapKey);
|
||||
const sampleResults = Array.isArray(result.results)
|
||||
? result.results.slice(0, SAMPLE_RESULT_LIMIT).map((entry) => ({
|
||||
iteration: entry.iteration,
|
||||
result: entry.result,
|
||||
}))
|
||||
: [];
|
||||
|
||||
simulationRunsMap[mapKey] = {
|
||||
scenario_id: result.scenario_id,
|
||||
scenario_name: scenarioName,
|
||||
iterations:
|
||||
(result.summary && Number(result.summary.count)) || result.iterations || sampleResults.length,
|
||||
summary: result.summary || null,
|
||||
sample_results: sampleResults,
|
||||
};
|
||||
|
||||
simulationForm.reset();
|
||||
showFeedback(simulationFeedback, "Simulation completed successfully.", "success");
|
||||
|
||||
if (formScenarioSelect) {
|
||||
formScenarioSelect.value = mapKey;
|
||||
}
|
||||
if (filterSelect) {
|
||||
filterSelect.value = mapKey;
|
||||
}
|
||||
|
||||
renderOverviewTable();
|
||||
renderScenarioDetails(mapKey);
|
||||
} catch (error) {
|
||||
showFeedback(
|
||||
simulationFeedback,
|
||||
error.message || "An unexpected error occurred.",
|
||||
"error"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
initializeRunsMap();
|
||||
renderOverviewTable();
|
||||
|
||||
if (filterSelect) {
|
||||
filterSelect.addEventListener("change", handleScenarioChange);
|
||||
}
|
||||
|
||||
if (simulationForm) {
|
||||
simulationForm.addEventListener("submit", submitSimulation);
|
||||
}
|
||||
|
||||
if (filterSelect && filterSelect.value) {
|
||||
renderScenarioDetails(filterSelect.value);
|
||||
syncFormScenario(filterSelect.value);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user