Spaces:
Paused
Paused
| /** | |
| * Brain-5D Parameter Inspector — ES Module | |
| * | |
| * Displays runtime/config parameters, lets operators propose changes, | |
| * and manages the pending-changes workflow (apply / apply+save / cancel). | |
| * | |
| * @version 1.0.0 | |
| * @license MIT | |
| */ | |
| ; | |
| function byId(id) { | |
| return document.getElementById(id); | |
| } | |
| function escapeHtml(str) { | |
| if (str == null) return ""; | |
| const div = document.createElement("div"); | |
| div.textContent = String(str); | |
| return div.innerHTML; | |
| } | |
| function formatValue(value) { | |
| if (value === null || value === undefined) return "—"; | |
| if (typeof value === "boolean") return value ? "true" : "false"; | |
| if (typeof value === "number") return Number.isInteger(value) ? String(value) : value.toFixed(3); | |
| if (typeof value === "string") return value; | |
| try { | |
| return JSON.stringify(value); | |
| } catch { | |
| return String(value); | |
| } | |
| } | |
| function classForPending(change) { | |
| if (!change) return ""; | |
| if (change.requires_restart) return "pending-restart"; | |
| if (change.scientific_sensitive) return "pending-sensitive"; | |
| return "pending-value"; | |
| } | |
| /** | |
| * API client for parameter and pending-change endpoints. | |
| */ | |
| export class ParameterAPI { | |
| static async fetchJSON(url, options = {}) { | |
| const response = await fetch(url, { | |
| ...options, | |
| headers: { | |
| "Cache-Control": "no-store", | |
| "Content-Type": "application/json", | |
| ...(options.headers || {}), | |
| }, | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok || data.ok === false) { | |
| throw new Error(data.error || data.message || `HTTP ${response.status}`); | |
| } | |
| return data; | |
| } | |
| static async listParameters() { | |
| return this.fetchJSON("/api/parameters"); | |
| } | |
| static async getParameter(name) { | |
| return this.fetchJSON(`/api/parameters/${encodeURIComponent(name)}`); | |
| } | |
| static async proposeChange(name, value) { | |
| return this.fetchJSON(`/api/parameters/${encodeURIComponent(name)}/pending`, { | |
| method: "POST", | |
| body: JSON.stringify({ value }), | |
| }); | |
| } | |
| static async apply(names = null, saveProfile = false) { | |
| const endpoint = saveProfile ? "/api/parameters/pending/save-profile" : "/api/parameters/pending/apply"; | |
| const body = names === null ? {} : { names }; | |
| return this.fetchJSON(endpoint, { | |
| method: "POST", | |
| body: JSON.stringify(body), | |
| }); | |
| } | |
| static async cancel(names = null) { | |
| const body = names === null ? {} : { names }; | |
| return this.fetchJSON("/api/parameters/pending/cancel", { | |
| method: "POST", | |
| body: JSON.stringify(body), | |
| }); | |
| } | |
| static async pending() { | |
| return this.fetchJSON("/api/parameters/pending"); | |
| } | |
| } | |
| /** | |
| * ParameterInspector component. | |
| */ | |
| export class ParameterInspector { | |
| constructor() { | |
| this.parameters = {}; | |
| this.pending = {}; | |
| this.history = []; | |
| this.filter = ""; | |
| this.commandInFlight = false; | |
| this._elements = { | |
| tableBody: byId("parameter-table-body"), | |
| search: byId("parameter-search"), | |
| reload: byId("parameter-reload"), | |
| pendingBar: byId("pending-changes-bar"), | |
| pendingCount: byId("pending-count"), | |
| pendingRestartHint: byId("pending-restart-hint"), | |
| applyBtn: byId("pending-apply"), | |
| saveProfileBtn: byId("pending-save-profile"), | |
| cancelBtn: byId("pending-cancel"), | |
| historyList: byId("change-history-list"), | |
| }; | |
| this._bindEvents(); | |
| } | |
| _bindEvents() { | |
| if (this._elements.search) { | |
| this._elements.search.addEventListener("input", (e) => { | |
| this.filter = (e.target.value || "").toLowerCase().trim(); | |
| this._render(); | |
| }); | |
| } | |
| if (this._elements.reload) { | |
| this._elements.reload.addEventListener("click", () => this.refresh()); | |
| } | |
| if (this._elements.applyBtn) { | |
| this._elements.applyBtn.addEventListener("click", () => this._apply(false)); | |
| } | |
| if (this._elements.saveProfileBtn) { | |
| this._elements.saveProfileBtn.addEventListener("click", () => this._apply(true)); | |
| } | |
| if (this._elements.cancelBtn) { | |
| this._elements.cancelBtn.addEventListener("click", () => this._cancel()); | |
| } | |
| const table = byId("parameter-table"); | |
| if (table) { | |
| table.addEventListener("click", (e) => this._handleTableClick(e)); | |
| } | |
| } | |
| async refresh() { | |
| try { | |
| const paramsData = await ParameterAPI.listParameters(); | |
| const pendingData = await ParameterAPI.pending(); | |
| this.parameters = paramsData.parameters || {}; | |
| this.pending = pendingData.pending || {}; | |
| this.history = pendingData.history || []; | |
| this._render(); | |
| } catch (error) { | |
| this._log(`Failed to load parameters: ${error.message}`, "error"); | |
| } | |
| } | |
| _handleTableClick(e) { | |
| const editBtn = e.target.closest(".param-edit"); | |
| if (editBtn) { | |
| e.preventDefault(); | |
| const name = editBtn.dataset.name; | |
| if (name) this._editParameter(name); | |
| return; | |
| } | |
| const resetBtn = e.target.closest(".param-reset"); | |
| if (resetBtn) { | |
| e.preventDefault(); | |
| const name = resetBtn.dataset.name; | |
| if (name) this._resetToDefault(name); | |
| return; | |
| } | |
| const cancelBtn = e.target.closest(".param-cancel"); | |
| if (cancelBtn) { | |
| e.preventDefault(); | |
| const name = cancelBtn.dataset.name; | |
| if (name) this._cancel([name]); | |
| } | |
| } | |
| async _editParameter(name) { | |
| const parameter = this.parameters[name]; | |
| if (!parameter) return; | |
| const raw = prompt(`New value for ${name}:`, formatValue(parameter.value)); | |
| if (raw === null) return; | |
| let value; | |
| try { | |
| value = this._parseInput(raw, parameter); | |
| } catch (error) { | |
| this._log(`Invalid value for ${name}: ${error.message}`, "error"); | |
| return; | |
| } | |
| try { | |
| await ParameterAPI.proposeChange(name, value); | |
| this._log(`Pending change recorded for ${name}`, "info"); | |
| await this.refresh(); | |
| } catch (error) { | |
| this._log(`Failed to propose change: ${error.message}`, "error"); | |
| } | |
| } | |
| async _resetToDefault(name) { | |
| const parameter = this.parameters[name]; | |
| if (!parameter || parameter.default === null || parameter.default === undefined) { | |
| this._log(`No default value for ${name}`, "warning"); | |
| return; | |
| } | |
| try { | |
| await ParameterAPI.proposeChange(name, parameter.default); | |
| this._log(`Pending reset to default for ${name}`, "info"); | |
| await this.refresh(); | |
| } catch (error) { | |
| this._log(`Failed to reset ${name}: ${error.message}`, "error"); | |
| } | |
| } | |
| async _apply(saveProfile) { | |
| if (this.commandInFlight) return; | |
| this.commandInFlight = true; | |
| try { | |
| const result = await ParameterAPI.apply(null, saveProfile); | |
| this._log( | |
| `Applied ${result.applied?.length || 0} parameter(s)${saveProfile ? " and saved profile" : ""}`, | |
| "success" | |
| ); | |
| await this.refresh(); | |
| } catch (error) { | |
| this._log(`Apply failed: ${error.message}`, "error"); | |
| } finally { | |
| this.commandInFlight = false; | |
| } | |
| } | |
| async _cancel(names = null) { | |
| if (this.commandInFlight) return; | |
| this.commandInFlight = true; | |
| try { | |
| const result = await ParameterAPI.cancel(names); | |
| this._log(`Cancelled ${result.cancelled?.length || 0} pending change(s)`, "info"); | |
| await this.refresh(); | |
| } catch (error) { | |
| this._log(`Cancel failed: ${error.message}`, "error"); | |
| } finally { | |
| this.commandInFlight = false; | |
| } | |
| } | |
| _parseInput(raw, parameter) { | |
| if (typeof parameter.value === "boolean") { | |
| return ["true", "1", "yes", "on"].includes(raw.toLowerCase()); | |
| } | |
| if (typeof parameter.value === "number") { | |
| const num = Number(raw); | |
| if (!Number.isFinite(num)) throw new Error("not a number"); | |
| return Number.isInteger(parameter.value) ? Math.trunc(num) : num; | |
| } | |
| if (typeof parameter.value === "string") { | |
| return raw; | |
| } | |
| try { | |
| return JSON.parse(raw); | |
| } catch { | |
| return raw; | |
| } | |
| } | |
| _render() { | |
| this._renderTable(); | |
| this._renderPendingBar(); | |
| this._renderHistory(); | |
| } | |
| _renderTable() { | |
| const tbody = this._elements.tableBody; | |
| if (!tbody) return; | |
| const names = Object.keys(this.parameters).filter((name) => | |
| this.filter ? name.toLowerCase().includes(this.filter) : true | |
| ); | |
| if (names.length === 0) { | |
| tbody.innerHTML = `<tr><td colspan="8" class="parameter-empty">No parameters match</td></tr>`; | |
| return; | |
| } | |
| let html = ""; | |
| for (const name of names.sort()) { | |
| const param = this.parameters[name]; | |
| const change = this.pending[name]; | |
| const pendingClass = classForPending(change); | |
| const pendingValue = change ? formatValue(change.proposed_value) : ""; | |
| const currentValue = formatValue(param.value); | |
| const defaultValue = param.default !== null && param.default !== undefined | |
| ? formatValue(param.default) | |
| : "—"; | |
| const mutableBadge = param.runtime_mutable | |
| ? '<span class="param-badge mutable">runtime</span>' | |
| : '<span class="param-badge immutable">fixed</span>'; | |
| const restartBadge = param.requires_restart | |
| ? '<span class="param-badge restart" title="Requires restart">R</span>' | |
| : ""; | |
| const sensitiveBadge = param.scientific_sensitive | |
| ? '<span class="param-badge sensitive" title="Scientifically sensitive">S</span>' | |
| : ""; | |
| const actions = change | |
| ? `<button class="btn-small param-cancel" data-name="${escapeHtml(name)}">Cancel</button>` | |
| : `<button class="btn-small param-edit" data-name="${escapeHtml(name)}">Edit</button> | |
| <button class="btn-small param-reset" data-name="${escapeHtml(name)}">Reset</button>`; | |
| html += ` | |
| <tr class="${pendingClass}" data-name="${escapeHtml(name)}"> | |
| <td class="param-name" title="${escapeHtml(param.description || "")}"> | |
| ${escapeHtml(name)} | |
| ${sensitiveBadge} | |
| <span class="parameter-help" tabindex="0" title="${escapeHtml(param.description || `Configuration value ${name}`)}">?</span> | |
| </td> | |
| <td class="param-current">${escapeHtml(currentValue)}</td> | |
| <td class="param-pending">${pendingValue ? escapeHtml(pendingValue) : "—"}</td> | |
| <td class="param-default">${escapeHtml(defaultValue)}</td> | |
| <td class="param-source">${escapeHtml(param.source || "—")}</td> | |
| <td>${mutableBadge}</td> | |
| <td>${restartBadge}</td> | |
| <td class="param-actions">${actions}</td> | |
| </tr> | |
| `; | |
| } | |
| tbody.innerHTML = html; | |
| } | |
| _renderPendingBar() { | |
| const count = Object.keys(this.pending).length; | |
| if (this._elements.pendingCount) { | |
| this._elements.pendingCount.textContent = String(count); | |
| } | |
| if (this._elements.pendingBar) { | |
| this._elements.pendingBar.classList.toggle("has-pending", count > 0); | |
| } | |
| if (this._elements.pendingRestartHint) { | |
| const needsRestart = Object.values(this.pending).some((c) => c.requires_restart); | |
| this._elements.pendingRestartHint.style.display = needsRestart ? "inline" : "none"; | |
| } | |
| } | |
| _renderHistory() { | |
| const container = this._elements.historyList; | |
| if (!container) return; | |
| if (this.history.length === 0) { | |
| container.innerHTML = '<div class="change-history-empty">No changes recorded yet</div>'; | |
| return; | |
| } | |
| let html = ""; | |
| for (const record of [...this.history].reverse()) { | |
| const actionClass = record.action === "applied" ? "applied" : "cancelled"; | |
| const profileBadge = record.saved_profile ? '<span class="param-badge profile">profile</span>' : ""; | |
| html += ` | |
| <div class="change-history-item ${actionClass}"> | |
| <span class="change-history-name">${escapeHtml(record.name)}</span> | |
| <span class="change-history-action">${escapeHtml(record.action)}</span> | |
| ${profileBadge} | |
| <span class="change-history-time">${escapeHtml(record.timestamp || "—")}</span> | |
| <div class="change-history-values"> | |
| <span>old: ${escapeHtml(formatValue(record.old_value))}</span> | |
| ${record.new_value !== undefined && record.new_value !== null ? `<span>new: ${escapeHtml(formatValue(record.new_value))}</span>` : ""} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| container.innerHTML = html; | |
| } | |
| _log(message, type = "info") { | |
| import("./console-log.js") | |
| .then(({ consoleLog }) => consoleLog.log(message, type)) | |
| .catch(() => {}); | |
| } | |
| } | |