feat: Support external databricks dashboard (#1460)

* Added data to the developer navigation

* Added developers/data page with databricks dashboard iframe

* Registered databricks to content-security-policy

* Add support for external databricks dashboard

* feat: integrate Databricks dashboard with environment configuration and error handling

* feat: enhance Databricks dashboard with color scheme support and improved layout

* feat: add time series chart component and Databricks API integration

- Implemented TimeSeriesChart component for visualizing time series data with interactive features.
- Created API route for fetching data from Databricks, including error handling and response formatting.
- Developed server-side functions to manage Databricks configuration and data retrieval.
- Added utility functions for date and value formatting to enhance data presentation.

* feat: update styling and layout for Solana Data Dashboard and Time Series Chart components

* feat: update provider colors and refactor dashboard controls for improved UI

* feat: enhance Databricks integration with caching and configuration updates

* feat: add responsive provider controls and custom hook for media query handling

* Refactor code structure for improved readability and maintainability

* Update Databricks turbo env vars

* feat: improve value domain calculation in getValueDomain function

* style: update InlineControl button styles for improved UI consistency

* feat(data-dashboard): add Solana data dashboard with metrics and charts

- Updated theme provider to include new data routes.
- Modified URL configuration to handle new data route.
- Created data configuration file for managing metrics and providers.
- Implemented data dashboard page with loading states and metadata generation.
- Developed Solana data dashboard component with dynamic charts and KPIs.
- Added time series chart component for visualizing metrics over time.
- Included utility functions for formatting values and handling tooltips.

* fix: address Databricks dashboard review items

* feat(data-dashboard): enhance DeFi metrics and update dashboard descriptions

* feat(data-dashboard): refactor dashboard controls and enhance query state management

* feat: migrate data to web and add i18n

* fix: update InlineControl styles for improved visual consistency

* fix(header): handle undefined router paths in pathname calculation

* fix(header): remove unnecessary conditions for showing secondary developers nav

* feat: implement developer route utilities and update navigation logic

* fix(developer-routes): remove redundant route checks for developers nav and theme routes

* feat: enhance SolanaDataDashboard with tab switching functionality and improved accessibility

* feat(i18n): add locale handling functions and corresponding tests

* feat(chart): add dashed patterns for coincident series and implement corresponding tests

* feat(time-series-chart): add select/deselect all functionality and update legend messages

* feat(dashboard): enhance provider selection with select/deselect all functionality and improve footer labels

* feat: update dashboard and data handling with new metrics, improved caching, and enhanced UI elements

* fix: adjust layout and styling in KpiCell component for improved alignment

* fix: adjust line height in KpiCell component for better readability

* fix: update provider colors and SQL query to use production database

* feat: add clarification text for dashboard tabs in localization

* feat: add compareTooltipValues function and integrate sorting in tooltip display

* Refactor code structure for improved readability and maintainability

* fix: adjust padding in DataResourceCarousel section for better layout

* feat: normalize provider names and enhance data dashboard functionality with new features and improved localization

* feat: enhance footer layout and add metadata items for improved user experience

* feat: add DeFiLlama to stablecoin count providers and enhance chart provider tests

* fix: simplify Content-Security-Policy by removing unnecessary frame ancestors

* Add new background images for SDP solutions

- Added feat-bg-1.webp, feat-bg-2.webp, and feat-bg-3.webp to enhance the visual appeal of the SDP solutions section.

* refactor: remove deprecated data redirects from middleware and rewrites

* fix: simplify pathname normalization by using getPathnameWithoutLocale utility

---------

Co-authored-by: satoshi-sh <satoss1108@gmail.com>
Co-authored-by: waddahAldrobi <aldrobiwaddah@gmail.com>

Author: 3 people

apps/docs/next.config.ts

@@ -19,7 +19,7 @@ const securityHeaders: Array<{ key: string; value: string }> = [
   },
   {
     key: "Content-Security-Policy",
-    value: "frame-ancestors 'self'",
+    value: `frame-ancestors 'self'`,
   },
 ];
 

apps/media/content/posts/money-gram-joins-solana-developer-platform.mdx

@@ -1,7 +1,7 @@
 ---
 title: MoneyGram Joins Solana Developer Platform
 status: published
-heroImage: /uploads/posts/money-gram-joins-solana-developer-platform/heroImage.png
+heroImage: /uploads/posts/money-gram-joins-solana-developer-platform/heroImage.webp
 description: >-
   MoneyGram joins Solana Developer Platform as an infrastructure partner and
   validator, advancing blockchain-powered global payments with compliant,

apps/media/public/uploads/posts/money-gram-joins-solana-developer-platform/heroImage.png

@@ -28,3 +28,8 @@ TXTX_SURFNET_URL=
 NEXT_PUBLIC_MEDIA_APP_URL=
 # Breakpoint app URL
 NEXT_PUBLIC_BREAKPOINT_APP_URL=
+
+# Databricks SQL data route
+DATABRICKS_SERVER_HOSTNAME=<databricks-workspace-hostname>
+DATABRICKS_HTTP_PATH=/sql/1.0/warehouses/<warehouse-id>
+DATABRICKS_TOKEN=

apps/media/public/uploads/posts/money-gram-joins-solana-developer-platform/heroImage.webp

@@ -6,6 +6,8 @@ import type { Redirect, Rewrite } from "next/dist/lib/load-custom-routes";
 import withBundleAnalyzer from "@next/bundle-analyzer";
 import { withSentryConfig } from "@sentry/nextjs";
 
+const frameAncestors = ["'self'", ...getDatabricksFrameAncestors()];
+
 const securityHeaders: Array<{ key: string; value: string }> = [
   {
     key: "X-Frame-Options",
@@ -21,10 +23,49 @@ const securityHeaders: Array<{ key: string; value: string }> = [
   },
   {
     key: "Content-Security-Policy",
-    value: "frame-ancestors 'self'",
+    value: `frame-ancestors ${frameAncestors.join(" ")}`,
   },
 ];
 
+function getDatabricksFrameAncestors() {
+  const hostname = normalizeDatabricksHostname(
+    process.env.DATABRICKS_SERVER_HOSTNAME,
+  );
+
+  return hostname ? [`https://${hostname}`] : [];
+}
+
+function normalizeDatabricksHostname(value?: string) {
+  const rawValue = value?.trim();
+
+  if (!rawValue || isPlaceholderValue(rawValue)) {
+    return undefined;
+  }
+
+  try {
+    const url =
+      rawValue.startsWith("http://") || rawValue.startsWith("https://")
+        ? new URL(rawValue)
+        : new URL(`https://${rawValue}`);
+    const hostname = url.hostname;
+
+    return hostname.endsWith(".cloud.databricks.com") ? hostname : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function isPlaceholderValue(value: string) {
+  const lowerValue = value.toLowerCase();
+
+  return (
+    value.startsWith("<") ||
+    lowerValue.startsWith("your_") ||
+    lowerValue === "changeme" ||
+    lowerValue === "todo"
+  );
+}
+
 if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview") {
   securityHeaders.push({
     key: "X-Robots-Tag",
@@ -37,6 +78,7 @@ const nextConfig: NextConfig = {
   productionBrowserSourceMaps: false,
   trailingSlash: false,
   transpilePackages: ["gsap"],
+  serverExternalPackages: ["@databricks/sql", "lz4"],
 
   async rewrites() {
     const baseRewrites = rewritesAndRedirectsJson.rewrites as {

apps/web/.env.example

@@ -8,6 +8,7 @@
     "url": "https://github.com/solana-foundation/solana-com"
   },
   "dependencies": {
+    "@databricks/sql": "^1.15.0",
     "@inkeep/cxkit-react": "^0.5.117",
     "@mdx-js/react": "^3.1.1",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -28,6 +29,14 @@
     "@typeform/embed": "^5.1.0",
     "@vercel/og": "^0.8.6",
     "@vercel/related-projects": "^1.0.1",
+    "@visx/axis": "3.12.0",
+    "@visx/event": "3.12.0",
+    "@visx/grid": "3.12.0",
+    "@visx/group": "3.12.0",
+    "@visx/responsive": "3.12.0",
+    "@visx/scale": "3.12.0",
+    "@visx/shape": "3.12.0",
+    "@visx/tooltip": "3.12.0",
     "@workspace/ecosystem-data": "workspace:*",
     "@workspace/i18n": "workspace:*",
     "@workspace/sentry": "workspace:*",