Spaces:
Running
Running
| // Use related colors to distinguish input variants of the same model. | |
| const methodColors = { | |
| seasonal_naive: "#7f7f7f", | |
| chronos_2: "#17becf", | |
| toto_2_0_313m: "#8c564b", | |
| moirai_2: "#d62728", | |
| timesfm_3: "#393b79", | |
| timebraid_6p7b_demo_rewrite_v1: "#3b82f6", | |
| claude_opus_4_8_hist_only: "#e377c2", | |
| claude_opus_4_8_hist_macro_micro: "#e377c2", | |
| gpt_5_6_sol_hist_only: "#2ca02c", | |
| gpt_5_6_sol_hist_macro: "#008c95", | |
| gpt_5_6_sol_hist_macro_micro: "#2ca02c", | |
| moirai_agent_hist_macro: "#bcbd22", | |
| moirai_agent_hist_macro_micro: "#7c9636", | |
| }; | |
| const eventColors = { impulse: "#c78463", sustained: "#8d76b5", recurrent: "#5a9d89", mean_shift: "#ba9953", amplitude: "#6f9cbd", onset: "#649b80", disappearance: "#ae8092", phase: "#ab9e58", period: "#858bc1" }; | |
| export function eventName(event) { | |
| let name = [event.family, event.subtype, event.direction].filter((value) => value != null && value !== "").join(" / ").replaceAll("_", " "); | |
| if (event.amplitude_trend) name += ` (inner ${event.amplitude_trend})`; | |
| else if (event.envelope_change) name += ` (envelope ${event.envelope_change})`; | |
| return name; | |
| } | |
| export function historySeries(history, context = 300) { | |
| const count = context === "all" ? history.length : Math.min(history.length, Number(context)); | |
| return { x: Array.from({ length: count }, (_, index) => index - count), y: history.slice(-count) }; | |
| } | |
| export function intervalGeometry(event) { | |
| return { center: (event.start + event.end) / 2, width: event.end - event.start + 1 }; | |
| } | |
| export function trendSegments(trend, horizon) { | |
| let start = 0; | |
| return (trend || []).map((segment, index) => { | |
| const end = index === trend.length - 1 ? horizon : Math.max(start + 1, Math.min(horizon, start + Math.round(segment.duration * horizon))); | |
| const result = { ...segment, start, end }; | |
| start = end; | |
| return result; | |
| }); | |
| } | |
| export function rankedMethods(forecasts) { | |
| return [...forecasts].sort((a, b) => a.mase - b.mase || a.id.localeCompare(b.id)); | |
| } | |
| export function makePlot(sample, selected, context = 300) { | |
| const history = historySeries(sample.history, context); | |
| const futureX = Array.from({ length: sample.n_horizon }, (_, i) => i); | |
| const predictions = rankedMethods(sample.forecasts).filter((method) => selected.has(method.id)); | |
| const nameCounts = new Map(); | |
| for (const method of sample.forecasts) nameCounts.set(method.name, (nameCounts.get(method.name) || 0) + 1); | |
| const extent = [...history.y, ...sample.future, ...predictions.flatMap((method) => method.forecast), ...sample.tsfm_average_forecast].filter((value) => value != null && Number.isFinite(value)); | |
| const low = Math.min(...extent), high = Math.max(...extent); | |
| const padding = (high - low || Math.abs(high) || 1) * .08; | |
| const bottom = low - padding, top = high + padding; | |
| const events = new Map(); | |
| for (const event of sample.micro) { | |
| const name = eventName(event); | |
| if (!events.has(name)) events.set(name, []); | |
| events.get(name).push(event); | |
| } | |
| const traces = [...events].map(([name, group], index) => ({ | |
| type: "bar", name, legendgroup: name, | |
| x: group.map((event) => intervalGeometry(event).center), | |
| width: group.map((event) => intervalGeometry(event).width), | |
| y: group.map(() => top - bottom), base: bottom, | |
| marker: { color: eventColors[group[0].subtype || group[0].family] || "#8298b1", opacity: .15, line: { width: 0 } }, | |
| customdata: group.map((event) => [event.start, event.end, event.intensity == null ? "—" : Number(event.intensity).toFixed(3)]), | |
| hovertemplate: `${name}<br>Future indices %{customdata[0]}–%{customdata[1]}<br>Intensity %{customdata[2]}<extra></extra>`, | |
| legendrank: 3 + index, | |
| })); | |
| const line = (name, x, y, color, dash, legendrank, width = 1.7) => ({ type: "scatter", mode: "lines", name, x, y, legendrank, connectgaps: false, line: { color, width, dash }, hovertemplate: `${name}<br>Step %{x}<br>Value %{y:.4g}<extra></extra>` }); | |
| traces.push(line("History", history.x, history.y, "#1f77b4", "solid", 0, 1.6)); | |
| traces.push(line("Future", futureX, sample.future, "#ff7f0e", "dash", 1, 2.4)); | |
| traces.push(line("TSFM average forecast", futureX, sample.tsfm_average_forecast, "#9467bd", "dot", 2)); | |
| for (const [index, method] of predictions.entries()) { | |
| const dash = method.id.endsWith("_hist_only") ? "dash" : "solid"; | |
| const name = nameCounts.get(method.name) > 1 ? `${method.name} (${method.input})` : method.name; | |
| traces.push(line(name, futureX, method.forecast, methodColors[method.id] || "#8c564b", dash, 3 + events.size + index)); | |
| } | |
| const shapes = [{ type: "line", x0: -.5, x1: -.5, y0: 0, y1: 1, yref: "paper", line: { color: "#a8b1bc", width: 1, dash: "dot" } }]; | |
| const annotations = []; | |
| const trendBand = { y0: 1.005, y1: 1.08, yref: "paper" }; | |
| const segments = trendSegments(sample.macro.trend, sample.n_horizon); | |
| if (segments.length) { | |
| annotations.push({ x: -.5, xref: "x", y: (trendBand.y0 + trendBand.y1) / 2, yref: "paper", xanchor: "right", yanchor: "middle", xshift: -8, text: "Macro trend:", showarrow: false, font: { size: 11, color: "#5b6877" } }); | |
| } | |
| for (const segment of segments) { | |
| shapes.push({ ...trendBand, type: "rect", x0: segment.start - .5, x1: segment.end - .5, fillcolor: { up: "#e5f1ec", down: "#f7e9df", flat: "#eef0f4" }[segment.direction] || "#eef0f4", line: { color: "#fff", width: 1 } }); | |
| annotations.push({ x: (segment.start + segment.end - 1) / 2, y: (trendBand.y0 + trendBand.y1) / 2, yref: "paper", xanchor: "center", yanchor: "middle", text: segment.direction, hovertext: `Macro trend: ${segment.direction}`, showarrow: false, font: { size: 11, color: "#5b6877" } }); | |
| } | |
| return { | |
| data: traces, | |
| layout: { | |
| height: 545, margin: { l: 65, r: 22, t: 55, b: 90 }, | |
| paper_bgcolor: "#fff", plot_bgcolor: "#fff", | |
| font: { family: "system-ui, sans-serif", color: "#687383", size: 11 }, | |
| xaxis: { title: { text: "Time Step" }, range: [-history.x.length - .5, sample.n_horizon - .5], gridcolor: "#eef1f4", zeroline: false }, | |
| yaxis: { title: { text: "Value" }, range: [bottom, top], gridcolor: "#eef1f4", zeroline: false }, | |
| legend: { orientation: "h", x: 0, y: -.17, yanchor: "top", font: { size: 10 }, traceorder: "normal", maxheight: .25 }, | |
| barmode: "overlay", bargap: 0, hovermode: "closest", shapes, annotations, | |
| uirevision: `${sample.id}/${context}`, dragmode: "zoom", | |
| }, | |
| config: { responsive: true, displaylogo: false, scrollZoom: false, modeBarButtonsToRemove: ["select2d", "lasso2d"] }, | |
| }; | |
| } | |