Informational dashboard using duckdb-wasm + apache echarts

[kevinschaper]

Adding an informational dashboard inspired by evidence.dev, but using the same underlying technologies in our web app (with heavy help from claude code)

• Add KG Dashboard infrastructure with DuckDB WASM integration
• Add Sankey and Chord Chart components to KG Dashboard
• Add comprehensive unit tests for dashboard components
• Add BarChart component for node distribution visualization

[netlify]

✅ Deploy Preview for monarch-app ready!

Name	Link
🔨 Latest commit	9e288ba
🔍 Latest deploy log	https://app.netlify.com/projects/monarch-app/deploys/68b0b75fd4c28e0008e9bb29
😎 Deploy Preview	https://deploy-preview-1185--monarch-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 72.07%. Comparing base (e488355) to head (9e288ba).
⚠️ Report is 27 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1185   +/-   ##
=======================================
  Coverage   72.07%   72.07%           
=======================================
  Files          92       92           
  Lines        3255     3255           
=======================================
  Hits         2346     2346           
  Misses        909      909           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR introduces a comprehensive informational dashboard for the Monarch Knowledge Graph, implementing a data visualization system using DuckDB WASM and Apache ECharts. The dashboard provides interactive charts and metrics for exploring KG structure, data quality, and content statistics.

• Adds KG Dashboard infrastructure with DuckDB WASM integration for client-side SQL query execution
• Implements multiple chart types (Sankey, Chord, Bar, Donut, etc.) with export capabilities
• Provides comprehensive unit test coverage for all dashboard components and composables

Reviewed Changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
frontend/vitest.config.ts	Adds test globals and NODE_ENV configuration
frontend/vite.config.mjs	Implements DuckDB WASM file copying plugin and build optimization
frontend/src/router/index.ts	Adds KG Dashboard route
frontend/src/pages/knowledgeGraph/PageKGDashboard.vue	Main dashboard page with metrics and visualizations
frontend/src/composables/*.ts	Core composables for DuckDB integration and SQL query execution
frontend/src/components/dashboard/*.vue	Chart components with export functionality
frontend/unit/*.test.ts	Comprehensive test suite for all dashboard functionality
frontend/src/util/*.ts	Utility improvements for date formatting and DOM handling

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Remove debug console.log statements from production code. These should be removed or replaced with proper logging.

Suggested change

[Copilot]

Remove debug console.log statements from production code. These should be removed or replaced with proper logging.

Suggested change

	console.log("SVG starts with:", svgString.substring(0, 200));
	// console.log("Export options:", exportOptions); // Removed for production
	svgChart.setOption(exportOptions);
	// Give the chart time to render and then export
	setTimeout(() => {
	try {
	// console.log(
	// "Chart size:",
	// svgChart.getWidth(),
	// "x",
	// svgChart.getHeight(),
	// ); // Removed for production
	let svgString = svgChart.renderToSVGString();
	// console.log("SVG string length:", svgString.length); // Removed for production
	// console.log("SVG starts with:", svgString.substring(0, 200)); // Removed for production

[Copilot]

Remove debug console.log statements from production code. These should be removed or replaced with proper logging.

Suggested change

	console.log("SVG starts with:", svgString.substring(0, 200));
	// Chart size and SVG string debug logs removed
	let svgString = svgChart.renderToSVGString();

[Copilot]

Remove debug console.log statements from production code. These should be removed or replaced with proper logging.

Suggested change

console.log("Modified SVG starts with:", svgString.substring(0, 200));

[Copilot]

[nitpick] Consider using a proper logging mechanism instead of console.log for build output. This could be replaced with a build-time logger or removed if not essential.

Suggested change

	console.log("✓ DuckDB WASM files copied to public/duckdb/");
	this.info("✓ DuckDB WASM files copied to public/duckdb/");

[Copilot]

[nitpick] Consider whether debug logging is necessary in production code. While console.debug is less intrusive than console.log, it may still clutter browser dev tools.

Suggested change

	console.debug(`DataSource "${name}" component unmounted`);
	if (isDevelopment.value) {
	console.debug(`DataSource "${name}" component unmounted`);
	}

[Copilot]

Consider making this error message more specific to help with debugging. Include context about which SQL query failed and the data sources involved.

Suggested change

	console.error("Auto-execute failed:", err);
	console.error(
	`Auto-execute failed for SQL: "${sql}" with dataSources: [${dataSources.join(", ")}]`,
	err
	);

[Copilot]

Consider making this error message more specific to help with debugging. Include context about which SQL query failed during polling and the poll interval.

Suggested change

	console.error("Polling execution failed:", err);
	console.error(
	`Polling execution failed for SQL: "${sql}" (pollInterval: ${pollInterval}ms):`,
	err
	);

[varun-divya]

Works great and looks awesome!!. II’ve added a few minor questions/comments for clarity :-)

[kevinschaper]

Cleaned up logging, unused charts and emojis and the listing is finally passing. I think this is ready to go!