zwitschi
5a84445e90
- 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.
448 lines
13 KiB
HTML
448 lines
13 KiB
HTML
{% extends "base.html" %} {% block title %}Simulations · CalMiner{% endblock %}
|
|
{% block content %}
|
|
<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 %}
|