feat: app features — CSV export, GFM tables, param badges, data transforms

app/src/app/(dashboard)/[id]/edit/page.tsx

@@ -21,6 +21,8 @@ import { useConnections } from "@/hooks/use-connections";
 import { useUnsavedChangesWarning } from "@/hooks/use-unsaved-changes-warning";
 import { useParameterStore } from "@/stores/parameter-store";
 import { filterParentParams } from "@/lib/format-parameter-value";
+import { buildParameterSourceMap } from "@/lib/collect-parameter-names";
+import { scrollToWidgetWhenReady } from "@/lib/scroll-to-widget";
 import { useDashboardStore } from "@/stores/dashboard-store";
 import { useWidgetTemplates } from "@/hooks/use-widget-templates";
 import { DashboardContainer } from "@/components/dashboard-container";
@@ -148,12 +150,20 @@ export default function DashboardEditorPage({
     requestNavigation,
   } = useUnsavedChangesWarning();
 
+  const parameterSourceMap = useMemo(
+    () => buildParameterSourceMap(layout),
+    [layout],
+  );
+
   const handleNavigateToPage = useCallback(
-    (pageId: string) => {
+    (pageId: string, scrollToWidgetId?: string) => {
       const index = layout.pages.findIndex((p) => p.id === pageId);
       if (index >= 0) {
         markVisited(index);
         setActivePage(index);
+        if (scrollToWidgetId) {
+          scrollToWidgetWhenReady(scrollToWidgetId);
+        }
       }
     },
     [layout.pages, setActivePage],
@@ -309,11 +319,13 @@ export default function DashboardEditorPage({
   >();
 
   function openEditWidget(widget: DashboardWidget) {
-    // Grab cached query data so the editor preview shows instantly
-    const cached = queryClient.getQueryData<{
+    // Grab cached query data so the editor preview shows instantly.
+    // Use getQueriesData with partial key — params vary with parameter store values.
+    const cachedEntries = queryClient.getQueriesData<{
       data: unknown;
       resultId: string;
-    }>(["widget-query", widget.connectionId, widget.query, undefined]);
+    }>({ queryKey: ["widget-query", widget.connectionId, widget.query] });
+    const cached = cachedEntries.length > 0 ? cachedEntries[0][1] : undefined;
     setCachedPreviewData(cached ?? undefined);
     setEditorMode("edit");
     setEditingWidget(widget);
@@ -334,7 +346,7 @@ export default function DashboardEditorPage({
       updateWidget(widget.id, widget);
     }
     queryClient.invalidateQueries({
-      queryKey: ["widget-query", widget.id],
+      queryKey: ["widget-query", widget.connectionId, widget.query],
     });
   }
 
@@ -566,6 +578,7 @@ export default function DashboardEditorPage({
                     }}
                     templateMap={templateMap}
                     showParameterBar={showParameterBar}
+                    parameterSourceMap={parameterSourceMap}
                   />
                 </div>
               );

app/src/app/(dashboard)/[id]/page.tsx

@@ -20,6 +20,8 @@ import {
 import { useDashboard, useUpdateDashboard } from "@/hooks/use-dashboards";
 import { useParameterStore } from "@/stores/parameter-store";
 import { filterParentParams } from "@/lib/format-parameter-value";
+import { buildParameterSourceMap } from "@/lib/collect-parameter-names";
+import { scrollToWidgetWhenReady } from "@/lib/scroll-to-widget";
 import { DashboardContainer } from "@/components/dashboard-container";
 import { PageTabs } from "@/components/page-tabs";
 import { migrateLayout } from "@/lib/migrate-layout";
@@ -192,13 +194,21 @@ export default function DashboardViewerPage({
       ? `${intervalLabel} · ${formatCountdown(countdown)}`
       : intervalLabel;
 
+  const parameterSourceMap = useMemo(
+    () => (layout ? buildParameterSourceMap(layout) : {}),
+    [layout],
+  );
+
   const handleNavigateToPage = useCallback(
-    (pageId: string) => {
+    (pageId: string, scrollToWidgetId?: string) => {
       if (!layout) return;
       const index = layout.pages.findIndex((p) => p.id === pageId);
       if (index >= 0) {
         markVisited(index);
         setActivePageIndex(index);
+        if (scrollToWidgetId) {
+          scrollToWidgetWhenReady(scrollToWidgetId);
+        }
       }
     },
     [layout],
@@ -412,6 +422,7 @@ export default function DashboardViewerPage({
                 refetchInterval={refetchInterval}
                 actions={{ onNavigateToPage: handleNavigateToPage }}
                 showParameterBar={showParameterBar}
+                parameterSourceMap={parameterSourceMap}
               />
             </div>
           );

app/src/app/globals.css

@@ -12,3 +12,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+@keyframes widget-highlight-pulse {
+  0%   { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5); }
+  50%  { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.3); }
+  100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
+}
+
+.widget-highlight {
+  animation: widget-highlight-pulse 1.5s ease-out;
+}

app/src/components/card-container.tsx

@@ -3,12 +3,13 @@
 import { useWidgetQuery } from "@/hooks/use-widget-query";
 import { resolveCacheOptions } from "@/lib/resolve-cache-options";
 import { getChartConfig } from "@/lib/chart-registry";
-import type { ColumnMapping } from "@/lib/chart-registry";
+import type { ChartType, ColumnMapping } from "@/lib/chart-registry";
 import type {
   DashboardWidget,
   ClickAction,
   StylingConfig,
 } from "@/lib/db/schema";
+import type { ParameterSourceMap } from "@/lib/collect-parameter-names";
 import type { ColorScaleConfig } from "@neoboard/components";
 import {
   useParameterStore,
@@ -18,6 +19,9 @@
   resolveClickActions,
   deriveClickableColumns,
 } from "@/lib/resolve-click-action";
+import { scrollAndHighlight } from "@/lib/scroll-to-widget";
+import { applyTransforms } from "@/lib/data-transforms";
+import type { Transform } from "@/lib/data-transforms";
 import React, { useMemo, useCallback, useState } from "react";
 import { AlertCircle, Play } from "lucide-react";
 import {
@@ -26,6 +30,9 @@
   AlertDescription,
   AlertTitle,
   Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
 } from "@neoboard/components";
 import {
   EmptyState,
@@ -60,10 +67,12 @@
   onWidgetSettingsChange?: (settings: Record<string, unknown>) => void;
   /** TanStack Query refetchInterval — periodically re-executes the widget query. */
   refetchInterval?: number | false;
-  /** Called when a click action navigates to a different page. */
-  onNavigateToPage?: (pageId: string) => void;
+  /** Called when a click action navigates to a different page. Optionally scrolls to a widget. */
+  onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
   /** When true, graph widgets trigger a fit-to-viewport after mount. */
   autoFit?: boolean;
+  /** Maps parameter names to the widgets that set them (for clickable badges). */
+  parameterSourceMap?: ParameterSourceMap;
 }
 
 /**
@@ -78,6 +87,74 @@
   return Object.keys(first);
 }
 
+/**
+ * Renders a parameter badge in the "Waiting for parameters" section.
+ * When source widgets exist, shows a clickable badge with a popover listing
+ * which widgets set that parameter and enabling navigation to them.
+ */
+function MissingParamBadge({
+  name,
+  parameterSourceMap,
+  onNavigateToPage,
+}: {
+  name: string;
+  parameterSourceMap?: ParameterSourceMap;
+  onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
+}) {
+  const sources = parameterSourceMap?.[name];
+
+  if (!sources || sources.length === 0) {
+    return (
+      <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">
+        $param_{name}
+      </code>
+    );
+  }
+
+  function handleNavigateToWidget(pageId: string, widgetId: string) {
+    // Try same-page scroll first
+    if (scrollAndHighlight(widgetId)) return;
+    // Cross-page navigation
+    onNavigateToPage?.(pageId, widgetId);
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground hover:bg-accent cursor-pointer transition-colors"
+        >
+          $param_{name}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-3" align="center">
+        <p className="text-xs font-medium text-muted-foreground mb-2">
+          Set by {sources.length} widget{sources.length !== 1 ? "s" : ""}
+        </p>
+        <ul className="space-y-1">
+          {sources.map((source) => (
+            <li key={`${source.pageId}-${source.widgetId}`}>
+              <button
+                type="button"
+                className="w-full text-left rounded px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+                onClick={() =>
+                  handleNavigateToWidget(source.pageId, source.widgetId)
+                }
+              >
+                <span className="font-medium">{source.widgetTitle}</span>
+                <span className="text-muted-foreground text-xs ml-1">
+                  ({source.pageTitle})
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /**
  * CardContainer: Fetches query results and renders the appropriate chart.
  * Uses React Query caching so queries are deduplicated across view->edit navigation.
@@ -95,18 +172,20 @@
   refetchInterval,
   onNavigateToPage,
   autoFit,
+  parameterSourceMap,
 }: CardContainerProps) {
   const chartConfig = getChartConfig(widget.chartType);
 
-  function handleChartClick(point: Record<string, unknown>) {
-    const result = resolveClickActions(widget, point);
-    if (!result) return;
+  const setParameter = useParameterStore((s) => s.setParameter);
+  const handleChartClick = useCallback(
+    (point: Record<string, unknown>) => {
+      const result = resolveClickActions(widget, point);
+      if (!result) return;
 
-    if (result.setParameter) {
-      const { parameterName, value, label, sourceField } = result.setParameter;
-      useParameterStore
-        .getState()
-        .setParameter(
+      if (result.setParameter) {
+        const { parameterName, value, label, sourceField } =
+          result.setParameter;
+        setParameter(
           parameterName,
           value,
           label,
@@ -115,12 +194,14 @@
           "click-action",
           widget.id,
         );
-    }
+      }
 
-    if (result.navigateToPageId) {
-      onNavigateToPage?.(result.navigateToPageId);
-    }
-  }
+      if (result.navigateToPageId) {
+        onNavigateToPage?.(result.navigateToPageId);
+      }
+    },
+    [widget, setParameter, onNavigateToPage],
+  );
   const ws = widget.settings ?? {};
   const clickAction = ws.clickAction as ClickAction | undefined;
   const hasClickAction = !!clickAction;
@@ -141,6 +222,12 @@
     [ws.chartOptions],
   );
 
+  // Client-side transforms pipeline (applied post-query, pre-render)
+  const dataTransforms = useMemo(
+    () => (widget.settings?.transforms ?? []) as Transform[],
+    [widget.settings?.transforms],
+  );
+
   const { staleTime, gcTime } = useMemo(
     () => resolveCacheOptions(chartOptions, enableCache, cacheTtlMinutes),
     [chartOptions, enableCache, cacheTtlMinutes],
@@ -245,10 +332,13 @@
         />
       );
     }
-    const transformedData = chartConfig.transformWithMapping(
+    const mappedData = chartConfig.transformWithMapping(
       previewData,
       columnMapping,
     );
+    const transformedData = dataTransforms.length
+      ? applyTransforms(mappedData as Record<string, unknown>[], dataTransforms)
+      : mappedData;
     const availableColumns = extractColumnNames(previewData);
     return (
       <div className="h-full w-full flex flex-col">
@@ -392,12 +482,12 @@
           {missingParams.length > 0 && (
             <div className="flex flex-wrap justify-center gap-1.5">
               {missingParams.map((name) => (
-                <code
+                <MissingParamBadge
                   key={name}
-                  className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground"
-                >
-                  $param_{name}
-                </code>
+                  name={name}
+                  parameterSourceMap={parameterSourceMap}
+                  onNavigateToPage={onNavigateToPage}
+                />
               ))}
             </div>
           )}
@@ -459,10 +549,10 @@
     );
   }
 
-  const transformedData = chartConfig.transformWithMapping(
-    rawData,
-    columnMapping,
-  );
+  const mappedData = chartConfig.transformWithMapping(rawData, columnMapping);
+  const transformedData = dataTransforms.length
+    ? applyTransforms(mappedData as Record<string, unknown>[], dataTransforms)
+    : mappedData;
   const availableColumns = extractColumnNames(rawData);
 
   return (