|
1 | 1 | /** |
2 | 2 | * @file Customer Segmentation Explorer - interactive scatter/bubble visualization |
3 | 3 | */ |
4 | | -import { App, PostMessageTransport } from "@modelcontextprotocol/ext-apps"; |
| 4 | +import { |
| 5 | + App, |
| 6 | + PostMessageTransport, |
| 7 | + applyHostStyleVariables, |
| 8 | + applyDocumentTheme, |
| 9 | +} from "@modelcontextprotocol/ext-apps"; |
5 | 10 | import { Chart, registerables } from "chart.js"; |
6 | 11 | import "./global.css"; |
7 | 12 | import "./mcp-app.css"; |
@@ -138,11 +143,40 @@ function buildDatasets(): Chart["data"]["datasets"] { |
138 | 143 | }); |
139 | 144 | } |
140 | 145 |
|
| 146 | +// Hidden element for resolving CSS color values (reused to avoid DOM thrashing) |
| 147 | +let colorResolver: HTMLDivElement | null = null; |
| 148 | + |
| 149 | +// Resolve a CSS color value (handles light-dark() function) |
| 150 | +function resolveColor(cssValue: string, fallback: string): string { |
| 151 | + if (!cssValue) return fallback; |
| 152 | + // If it's a simple color value, return it directly |
| 153 | + if (!cssValue.includes("light-dark(")) return cssValue; |
| 154 | + // Create resolver element once and keep it hidden |
| 155 | + if (!colorResolver) { |
| 156 | + colorResolver = document.createElement("div"); |
| 157 | + colorResolver.style.position = "absolute"; |
| 158 | + colorResolver.style.visibility = "hidden"; |
| 159 | + colorResolver.style.pointerEvents = "none"; |
| 160 | + document.body.appendChild(colorResolver); |
| 161 | + } |
| 162 | + colorResolver.style.color = cssValue; |
| 163 | + return getComputedStyle(colorResolver).color || fallback; |
| 164 | +} |
| 165 | + |
| 166 | +// Get colors from CSS variables |
| 167 | +function getChartColors(): { textColor: string; gridColor: string } { |
| 168 | + const style = getComputedStyle(document.documentElement); |
| 169 | + const rawTextColor = style.getPropertyValue("--color-text-secondary").trim(); |
| 170 | + const rawGridColor = style.getPropertyValue("--color-border-primary").trim(); |
| 171 | + return { |
| 172 | + textColor: resolveColor(rawTextColor, "#6b7280"), |
| 173 | + gridColor: resolveColor(rawGridColor, "#e5e7eb"), |
| 174 | + }; |
| 175 | +} |
| 176 | + |
141 | 177 | // Initialize Chart.js |
142 | 178 | function initChart(): Chart { |
143 | | - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; |
144 | | - const textColor = isDarkMode ? "#9ca3af" : "#6b7280"; |
145 | | - const gridColor = isDarkMode ? "#374151" : "#e5e7eb"; |
| 179 | + const { textColor, gridColor } = getChartColors(); |
146 | 180 |
|
147 | 181 | return new Chart(chartCanvas, { |
148 | 182 | type: "bubble", |
@@ -243,29 +277,34 @@ function initChart(): Chart { |
243 | 277 | function updateChart(): void { |
244 | 278 | if (!state.chart) return; |
245 | 279 |
|
246 | | - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; |
247 | | - const textColor = isDarkMode ? "#9ca3af" : "#6b7280"; |
| 280 | + const { textColor, gridColor } = getChartColors(); |
248 | 281 |
|
249 | 282 | state.chart.data.datasets = buildDatasets(); |
250 | 283 |
|
251 | 284 | // Update axis titles and formatters (using type assertions for Chart.js scale options) |
252 | 285 | const scales = state.chart.options.scales as { |
253 | 286 | x: { |
254 | 287 | title: { text: string; color: string }; |
255 | | - ticks: { callback: (value: number) => string }; |
| 288 | + ticks: { color: string; callback: (value: number) => string }; |
| 289 | + grid: { color: string }; |
256 | 290 | }; |
257 | 291 | y: { |
258 | 292 | title: { text: string; color: string }; |
259 | | - ticks: { callback: (value: number) => string }; |
| 293 | + ticks: { color: string; callback: (value: number) => string }; |
| 294 | + grid: { color: string }; |
260 | 295 | }; |
261 | 296 | }; |
262 | 297 |
|
263 | 298 | scales.x.title.text = METRIC_LABELS[state.xAxis]; |
264 | 299 | scales.y.title.text = METRIC_LABELS[state.yAxis]; |
265 | 300 | scales.x.title.color = textColor; |
266 | 301 | scales.y.title.color = textColor; |
| 302 | + scales.x.ticks.color = textColor; |
| 303 | + scales.y.ticks.color = textColor; |
267 | 304 | scales.x.ticks.callback = (value: number) => formatValue(value, state.xAxis); |
268 | 305 | scales.y.ticks.callback = (value: number) => formatValue(value, state.yAxis); |
| 306 | + scales.x.grid.color = gridColor; |
| 307 | + scales.y.grid.color = gridColor; |
269 | 308 |
|
270 | 309 | state.chart.update(); |
271 | 310 | } |
@@ -388,20 +427,52 @@ document.addEventListener("click", (e) => { |
388 | 427 | } |
389 | 428 | }); |
390 | 429 |
|
391 | | -// Handle theme changes |
| 430 | +// Handle system theme changes (fallback when host doesn't provide styles) |
392 | 431 | window |
393 | 432 | .matchMedia("(prefers-color-scheme: dark)") |
394 | | - .addEventListener("change", () => { |
395 | | - if (state.chart) { |
396 | | - state.chart.destroy(); |
397 | | - state.chart = initChart(); |
| 433 | + .addEventListener("change", (e) => { |
| 434 | + // Only apply if we haven't received host theme |
| 435 | + if (!app.getHostContext()?.theme) { |
| 436 | + applyDocumentTheme(e.matches ? "dark" : "light"); |
| 437 | + if (state.chart) { |
| 438 | + state.chart.destroy(); |
| 439 | + state.chart = initChart(); |
| 440 | + } |
398 | 441 | } |
399 | 442 | }); |
400 | 443 |
|
| 444 | +// Apply initial theme based on system preference (before host context is available) |
| 445 | +const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches; |
| 446 | +applyDocumentTheme(systemDark ? "dark" : "light"); |
| 447 | + |
401 | 448 | // Register handlers and connect |
402 | 449 | app.onerror = log.error; |
403 | 450 |
|
404 | | -app.connect(new PostMessageTransport(window.parent)); |
| 451 | +// Handle host context changes (theme and styles from host) |
| 452 | +app.onhostcontextchanged = (params) => { |
| 453 | + if (params.theme) { |
| 454 | + applyDocumentTheme(params.theme); |
| 455 | + } |
| 456 | + if (params.styles?.variables) { |
| 457 | + applyHostStyleVariables(params.styles.variables); |
| 458 | + } |
| 459 | + // Recreate chart to pick up new colors |
| 460 | + if (state.chart && (params.theme || params.styles?.variables)) { |
| 461 | + state.chart.destroy(); |
| 462 | + state.chart = initChart(); |
| 463 | + } |
| 464 | +}; |
| 465 | + |
| 466 | +app.connect(new PostMessageTransport(window.parent)).then(() => { |
| 467 | + // Apply initial host context after connection |
| 468 | + const ctx = app.getHostContext(); |
| 469 | + if (ctx?.theme) { |
| 470 | + applyDocumentTheme(ctx.theme); |
| 471 | + } |
| 472 | + if (ctx?.styles?.variables) { |
| 473 | + applyHostStyleVariables(ctx.styles.variables); |
| 474 | + } |
| 475 | +}); |
405 | 476 |
|
406 | 477 | // Fetch data after connection |
407 | 478 | setTimeout(fetchData, 100); |
0 commit comments