Spaces:
Running
Running
| const version = new URL(import.meta.url).searchParams.get("v") || "dev"; | |
| const { makePlot, rankedMethods } = await import(`./explorer-plot.mjs?v=${version}`); | |
| const $ = (selector) => document.querySelector(selector); | |
| const escapeHtml = (value) => String(value ?? "").replace(/[&<>"']/g, (char) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[char]); | |
| const display = (value) => value == null ? "—" : typeof value === "number" ? value.toLocaleString("en-US", { maximumFractionDigits: 4 }) : escapeHtml(String(value).replaceAll("_", " ")); | |
| const state = { catalog: null, scope: [], sample: null, selected: new Set(), loading: null, request: null }; | |
| let plotly; | |
| function loadPlotly() { | |
| plotly ||= new Promise((resolve, reject) => { | |
| const script = document.createElement("script"); | |
| script.src = "/vendor/plotly.min.js"; | |
| script.onload = () => resolve(window.Plotly); | |
| script.onerror = () => { script.remove(); plotly = null; reject(new Error("Unable to load the chart. Please try again.")); }; | |
| document.head.append(script); | |
| }); | |
| return plotly; | |
| } | |
| function options(id, values, preferred) { | |
| const select = $(`#${id}`); | |
| select.innerHTML = values.map((value) => `<option value="${escapeHtml(value)}">${escapeHtml(value)}</option>`).join(""); | |
| if (values.map(String).includes(String(preferred))) select.value = preferred; | |
| } | |
| function updateSelection(target = null) { | |
| const fields = ["dataset", "term", "item", "window"]; | |
| const current = Object.fromEntries(fields.map((field) => [field, $(`#sample-${field}`).value])); | |
| const effect = $("#sample-effect").value; | |
| let candidates = state.catalog.samples.filter((entry) => !effect || entry.effects.includes(effect)); | |
| options("sample-dataset", [...new Set(candidates.map((entry) => entry.dataset))].sort(), target?.dataset ?? current.dataset); | |
| candidates = candidates.filter((entry) => entry.dataset === $("#sample-dataset").value); | |
| options("sample-term", ["short", "medium", "long"].filter((term) => candidates.some((entry) => entry.term === term)), target?.term ?? current.term); | |
| candidates = candidates.filter((entry) => entry.term === $("#sample-term").value); | |
| state.scope = candidates.sort((a, b) => a.item_id.localeCompare(b.item_id, undefined, { numeric: true }) || a.window_id - b.window_id); | |
| options("sample-item", [...new Set(candidates.map((entry) => entry.item_id))], target?.item_id ?? current.item); | |
| candidates = candidates.filter((entry) => entry.item_id === $("#sample-item").value); | |
| options("sample-window", candidates.map((entry) => entry.window_id), target?.window_id ?? current.window); | |
| const selected = candidates.find((entry) => String(entry.window_id) === $("#sample-window").value); | |
| if (selected) loadSample(selected); | |
| else { | |
| state.request?.abort(); | |
| state.sample = null; | |
| $("#sample-metadata").textContent = ""; | |
| $("#sample-content").hidden = true; | |
| $("#sample-count").textContent = "No examples match this selection."; | |
| $("#sample-previous").disabled = $("#sample-next").disabled = true; | |
| } | |
| } | |
| function renderEffects(sample) { | |
| const macro = sample.macro; | |
| $("#sample-macro").innerHTML = `<div class="macro-overview"><span><strong>Period</strong> ${display(macro.seasonality?.period)}</span><span><strong>Waveform</strong> ${display(macro.seasonality?.waveform)}</span><span><strong>Level Range</strong> [${(macro.level_range || []).map(display).join(", ")}]</span></div><div class="table-shell"><table class="trend-table"><thead><tr><th>Segment</th><th>Direction</th><th>Shape</th><th>Duration</th></tr></thead><tbody>${(macro.trend || []).map((segment, index) => `<tr><td>${index + 1}</td><td>${display(segment.direction)}</td><td>${display(segment.shape)}</td><td>${(segment.duration * 100).toFixed(1)}%</td></tr>`).join("")}</tbody></table></div>`; | |
| const columns = ["family", "subtype", "direction", "amplitude_trend", "envelope_change", "start", "end", "intensity"]; | |
| $("#sample-micro").innerHTML = sample.micro.length ? sample.micro.map((event, index) => `<tr><td>${index + 1}</td>${columns.map((field) => `<td>${display(event[field])}</td>`).join("")}</tr>`).join("") : '<tr><td colspan="9" class="loading-cell">No Micro effects.</td></tr>'; | |
| $("#sample-score-body").innerHTML = rankedMethods(sample.forecasts).map((method) => `<tr><td><input type="checkbox" data-method="${escapeHtml(method.id)}" aria-label="Show ${escapeHtml(method.name)} · ${escapeHtml(method.input)}" ${state.selected.has(method.id) ? "checked" : ""} /></td><td>${escapeHtml(method.name)}</td><td><span class="category-pill">${escapeHtml(method.category)}</span></td><td><span class="input-pill ${method.input.includes("Macro") ? "with-effects" : ""}">${escapeHtml(method.input)}</span></td><td class="score">${method.mase.toFixed(4)}</td></tr>`).join(""); | |
| $(".sample-score-shell").scrollTop = 0; | |
| } | |
| async function renderPlot() { | |
| const sample = state.sample; | |
| if (!sample) return; | |
| const Plotly = await loadPlotly(); | |
| if (sample !== state.sample) return; | |
| const figure = makePlot(sample, state.selected, $("#history-context").value); | |
| await Plotly.react("sample-plot", figure.data, figure.layout, figure.config); | |
| } | |
| function showError(error) { | |
| $("#explorer-error").textContent = error.message; | |
| $("#explorer-warning").classList.remove("hidden"); | |
| } | |
| async function loadSample(entry) { | |
| state.request?.abort(); | |
| const controller = new AbortController(); | |
| state.request = controller; | |
| $("#explorer-warning").classList.add("hidden"); | |
| const content = $("#sample-content"); | |
| // Keep the previous sample in the layout so loading cannot collapse the page. | |
| content.setAttribute("aria-busy", "true"); | |
| const index = state.scope.findIndex((sample) => sample.id === entry.id); | |
| $("#sample-count").textContent = `${index + 1} / ${state.scope.length.toLocaleString()} examples`; | |
| $("#sample-previous").disabled = index === 0; | |
| $("#sample-next").disabled = index === state.scope.length - 1; | |
| if (content.hidden) $("#sample-metadata").textContent = "Loading example…"; | |
| try { | |
| const response = await fetch(`/api/explorer/sample/${entry.id}`, { signal: controller.signal }); | |
| if (!response.ok) throw new Error("This example is currently unavailable. Please try again."); | |
| const sample = await response.json(); | |
| if (controller.signal.aborted) return; | |
| if (state.sample?.id !== sample.id) { | |
| const best = rankedMethods(sample.forecasts)[0]; | |
| state.selected = new Set(best ? [best.id] : []); | |
| } | |
| state.sample = sample; | |
| $("#sample-content").hidden = false; | |
| $("#sample-metadata").textContent = `${sample.dataset} · ${sample.term} · item ${sample.item_id} · window ${sample.window_id} · frequency ${sample.frequency} · ${sample.n_history.toLocaleString()} history points · ${sample.n_horizon.toLocaleString()} future points`; | |
| renderEffects(sample); | |
| await renderPlot(); | |
| } catch (error) { | |
| if (error.name !== "AbortError" && !controller.signal.aborted) { | |
| if (content.hidden) $("#sample-metadata").textContent = "Example unavailable"; | |
| showError(error); | |
| } | |
| } finally { | |
| // An aborted request must not clear the next request's loading state. | |
| if (state.request === controller) content.removeAttribute("aria-busy"); | |
| } | |
| } | |
| async function initialize() { | |
| $("#explorer-warning").classList.add("hidden"); | |
| $("#sample-count").textContent = "Loading examples…"; | |
| try { | |
| const response = await fetch("/api/explorer/catalog"); | |
| if (!response.ok) throw new Error("Examples are currently unavailable. Please try again later."); | |
| state.catalog = await response.json(); | |
| const effects = [...new Set(state.catalog.samples.flatMap((entry) => entry.effects))].sort(); | |
| $("#sample-effect").innerHTML = '<option value="">All effects</option>' + effects.map((effect) => `<option value="${escapeHtml(effect)}">${escapeHtml(effect.replaceAll("_", " ").replaceAll("/", " / "))}</option>`).join(""); | |
| $("#explorer-filters").disabled = false; | |
| updateSelection(); | |
| } catch (error) { | |
| state.loading = null; | |
| $("#sample-count").textContent = "Examples unavailable"; | |
| showError(error); | |
| } | |
| } | |
| export async function activateExplorer() { | |
| if (!state.catalog) { | |
| state.loading ||= initialize(); | |
| await state.loading; | |
| } else if (state.sample && window.Plotly) { | |
| window.Plotly.Plots.resize($("#sample-plot")); | |
| } | |
| } | |
| for (const field of ["dataset", "term", "item", "window", "effect"]) $(`#sample-${field}`).addEventListener("change", () => updateSelection()); | |
| for (const direction of ["previous", "next"]) $(`#sample-${direction}`).addEventListener("click", () => { | |
| const index = state.scope.findIndex((entry) => entry.dataset === $("#sample-dataset").value && entry.term === $("#sample-term").value && entry.item_id === $("#sample-item").value && String(entry.window_id) === $("#sample-window").value); | |
| const entry = state.scope[index + (direction === "previous" ? -1 : 1)]; | |
| if (entry) updateSelection(entry); | |
| }); | |
| $("#sample-score-body").addEventListener("change", (event) => { | |
| const id = event.target.dataset.method; | |
| if (!id) return; | |
| if (event.target.checked) state.selected.add(id); else state.selected.delete(id); | |
| renderPlot().catch(showError); | |
| }); | |
| $("#history-context").addEventListener("change", () => renderPlot().catch(showError)); | |
| $("#explorer-retry").addEventListener("click", () => { if (state.catalog) updateSelection(); else activateExplorer(); }); | |