@sqlrooms/mosaic 0.29.0-rc.5 → 0.29.0-rc.6

package/dist/useVgPlotChartRender.js

@@ -0,0 +1,152 @@
+import { astToDOM, parseSpec } from '@uwdata/mosaic-spec';
+import { useEffect, useRef } from 'react';
+import { assertChartDataPolicy, createChartRuntimeIssueFromError, } from './chart-runtime';
+function getPlotInstance(element) {
+    const plot = element.value;
+    return plot && typeof plot === 'object' ? plot : null;
+}
+function resizeChartElement(element, size) {
+    const plot = getPlotInstance(element);
+    if (!plot?.setAttribute || !plot.render) {
+        return false;
+    }
+    const widthChanged = plot.setAttribute('width', size.width);
+    const heightChanged = plot.setAttribute('height', size.height);
+    if (widthChanged || heightChanged) {
+        void plot.render();
+    }
+    return true;
+}
+async function createSpecChartElement(spec, size, params) {
+    const sizedSpec = {
+        ...spec,
+        width: size.width,
+        height: size.height,
+    };
+    const ast = await parseSpec(sizedSpec);
+    const options = params
+        ? { params: params }
+        : undefined;
+    return (await astToDOM(ast, options)).element;
+}
+function asPlotDomElement(element) {
+    return element;
+}
+function wrapMarkHandlers(chart, onError, dataPolicy, runtimeIssueContext, runtimeIssueReporter) {
+    const plot = getPlotInstance(chart.element);
+    if (!plot?.marks) {
+        return;
+    }
+    plot.marks.forEach((mark) => {
+        if (mark.queryResult) {
+            const originalQueryResult = mark.queryResult;
+            mark.queryResult = (data) => {
+                try {
+                    assertChartDataPolicy(dataPolicy, data);
+                    runtimeIssueReporter?.clearIssue();
+                    return originalQueryResult.call(mark, data);
+                }
+                catch (error) {
+                    const normalizedError = error instanceof Error ? error : new Error(String(error));
+                    onError(normalizedError);
+                    chart.error = normalizedError;
+                    if (runtimeIssueContext) {
+                        runtimeIssueReporter?.reportIssue(createChartRuntimeIssueFromError(normalizedError, runtimeIssueContext, dataPolicy));
+                    }
+                    if (mark.queryError) {
+                        return mark.queryError(normalizedError);
+                    }
+                    return undefined;
+                }
+            };
+        }
+        if (mark.queryError) {
+            const originalQueryError = mark.queryError;
+            mark.queryError = (error) => {
+                const normalizedError = error instanceof Error ? error : new Error(String(error));
+                onError(normalizedError);
+                chart.error = normalizedError;
+                if (runtimeIssueContext) {
+                    runtimeIssueReporter?.reportIssue(createChartRuntimeIssueFromError(normalizedError, runtimeIssueContext, dataPolicy));
+                }
+                originalQueryError.call(mark, error);
+            };
+        }
+    });
+}
+/**
+ * Hook to handle chart rendering lifecycle: creating, caching, and displaying vgplot charts.
+ */
+export function useVgPlotChartRender({ containerRef, spec, specKey, params, containerSize, cachedChart, onChartCreated, onError, dataPolicy, runtimeIssueContext, runtimeIssueReporter, }) {
+    const renderVersionRef = useRef(0);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !containerSize) {
+            return;
+        }
+        // Use cached chart if available
+        if (cachedChart) {
+            container.replaceChildren(asPlotDomElement(cachedChart.element));
+            resizeChartElement(cachedChart.element, containerSize);
+            // Re-wrap mark handlers with fresh closures for dataPolicy/runtimeIssue reporting
+            wrapMarkHandlers(cachedChart, onError, dataPolicy, runtimeIssueContext, runtimeIssueReporter);
+            // Restore error state from cached chart
+            if (cachedChart.error) {
+                onError(cachedChart.error);
+            }
+            return;
+        }
+        // Create new chart
+        const renderVersion = ++renderVersionRef.current;
+        let cancelled = false;
+        void createSpecChartElement(spec, containerSize, params)
+            .then((element) => {
+            if (cancelled ||
+                renderVersion !== renderVersionRef.current ||
+                !containerRef.current) {
+                return;
+            }
+            const nextChart = {
+                element,
+                params,
+                specKey: specKey ?? JSON.stringify(spec),
+            };
+            onChartCreated(nextChart);
+            containerRef.current.replaceChildren(element);
+            // Wrap marks with runtime handlers
+            wrapMarkHandlers(nextChart, onError, dataPolicy, runtimeIssueContext, runtimeIssueReporter);
+        })
+            .catch((error) => {
+            if (cancelled) {
+                return;
+            }
+            // Normalize error to Error instance
+            const normalizedError = error instanceof Error ? error : new Error(String(error));
+            onError(normalizedError);
+            if (runtimeIssueContext) {
+                runtimeIssueReporter?.reportIssue({
+                    kind: 'render-error',
+                    panelId: runtimeIssueContext.panelId,
+                    chartType: runtimeIssueContext.chartType,
+                    message: normalizedError.message,
+                    recoverable: false,
+                });
+            }
+            console.error('[VgPlotChart] Error rendering chart:', normalizedError);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        containerSize,
+        specKey,
+        cachedChart,
+        onChartCreated,
+        onError,
+        dataPolicy,
+        runtimeIssueContext,
+        runtimeIssueReporter,
+    ]);
+}
+//# sourceMappingURL=useVgPlotChartRender.js.map

package/dist/useVgPlotChartRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVgPlotChartRender.js","sourceRoot":"","sources":["../src/useVgPlotChartRender.ts"],"names":[],"mappings":"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","sourcesContent":["import {Param, Selection} from '@uwdata/mosaic-core';\nimport {astToDOM, parseSpec, Spec} from '@uwdata/mosaic-spec';\nimport {useEffect, useRef} from 'react';\nimport {PlotSize} from './ResponsivePlot';\nimport {RetainedVgPlotChart} from './useVgPlotChartRetention';\nimport {\n  assertChartDataPolicy,\n  createChartRuntimeIssueFromError,\n  type ChartDataPolicy,\n  type ChartRuntimeIssueContext,\n  type ChartRuntimeIssueReporter,\n} from './chart-runtime';\n\ntype PlotDomElement = HTMLElement | SVGSVGElement;\n\ntype QueryableMark = {\n  queryResult?: (data: unknown) => unknown;\n  queryError?: (error: unknown) => unknown;\n};\n\ntype PlotInstance = {\n  marks?: Array<{destroy?: () => void} & QueryableMark>;\n  render?: () => Promise<unknown> | unknown;\n  setAttribute?: (name: string, value: unknown) => boolean;\n};\n\nfunction getPlotInstance(element: object): PlotInstance | null {\n  const plot = (element as HTMLElement & {value?: unknown}).value;\n  return plot && typeof plot === 'object' ? (plot as PlotInstance) : null;\n}\n\nfunction resizeChartElement(element: object, size: PlotSize): boolean {\n  const plot = getPlotInstance(element);\n  if (!plot?.setAttribute || !plot.render) {\n    return false;\n  }\n\n  const widthChanged = plot.setAttribute('width', size.width);\n  const heightChanged = plot.setAttribute('height', size.height);\n  if (widthChanged || heightChanged) {\n    void plot.render();\n  }\n  return true;\n}\n\nasync function createSpecChartElement(\n  spec: Spec,\n  size: PlotSize,\n  params?: Map<string, Param<any> | Selection>,\n): Promise<PlotDomElement> {\n  const sizedSpec = {\n    ...spec,\n    width: size.width,\n    height: size.height,\n  } as Spec;\n\n  const ast = await parseSpec(sizedSpec);\n  const options = params\n    ? {params: params as unknown as Map<string, Param<any>>}\n    : undefined;\n\n  return (await astToDOM(ast, options)).element;\n}\n\nfunction asPlotDomElement(element: object): PlotDomElement {\n  return element as PlotDomElement;\n}\n\nfunction wrapMarkHandlers(\n  chart: RetainedVgPlotChart,\n  onError: (error: Error) => void,\n  dataPolicy?: ChartDataPolicy | null,\n  runtimeIssueContext?: ChartRuntimeIssueContext,\n  runtimeIssueReporter?: ChartRuntimeIssueReporter,\n) {\n  const plot = getPlotInstance(chart.element);\n  if (!plot?.marks) {\n    return;\n  }\n\n  plot.marks.forEach((mark: QueryableMark) => {\n    if (mark.queryResult) {\n      const originalQueryResult = mark.queryResult;\n      mark.queryResult = (data: unknown) => {\n        try {\n          assertChartDataPolicy(dataPolicy, data);\n          runtimeIssueReporter?.clearIssue();\n          return originalQueryResult.call(mark, data);\n        } catch (error) {\n          const normalizedError =\n            error instanceof Error ? error : new Error(String(error));\n          onError(normalizedError);\n          chart.error = normalizedError;\n          if (runtimeIssueContext) {\n            runtimeIssueReporter?.reportIssue(\n              createChartRuntimeIssueFromError(\n                normalizedError,\n                runtimeIssueContext,\n                dataPolicy,\n              ),\n            );\n          }\n          if (mark.queryError) {\n            return mark.queryError(normalizedError);\n          }\n          return undefined;\n        }\n      };\n    }\n    if (mark.queryError) {\n      const originalQueryError = mark.queryError;\n      mark.queryError = (error: unknown) => {\n        const normalizedError =\n          error instanceof Error ? error : new Error(String(error));\n        onError(normalizedError);\n        chart.error = normalizedError;\n        if (runtimeIssueContext) {\n          runtimeIssueReporter?.reportIssue(\n            createChartRuntimeIssueFromError(\n              normalizedError,\n              runtimeIssueContext,\n              dataPolicy,\n            ),\n          );\n        }\n        originalQueryError.call(mark, error);\n      };\n    }\n  });\n}\n\ntype UseVgPlotChartRenderParams = {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  spec: Spec;\n  specKey: string | null;\n  params?: Map<string, Param<any> | Selection>;\n  containerSize: PlotSize | null;\n  cachedChart: RetainedVgPlotChart | null;\n  onChartCreated: (chart: RetainedVgPlotChart) => void;\n  onError: (error: Error) => void;\n  dataPolicy?: ChartDataPolicy | null;\n  runtimeIssueContext?: ChartRuntimeIssueContext;\n  runtimeIssueReporter?: ChartRuntimeIssueReporter;\n};\n\n/**\n * Hook to handle chart rendering lifecycle: creating, caching, and displaying vgplot charts.\n */\nexport function useVgPlotChartRender({\n  containerRef,\n  spec,\n  specKey,\n  params,\n  containerSize,\n  cachedChart,\n  onChartCreated,\n  onError,\n  dataPolicy,\n  runtimeIssueContext,\n  runtimeIssueReporter,\n}: UseVgPlotChartRenderParams) {\n  const renderVersionRef = useRef(0);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !containerSize) {\n      return;\n    }\n\n    // Use cached chart if available\n    if (cachedChart) {\n      container.replaceChildren(asPlotDomElement(cachedChart.element));\n      resizeChartElement(cachedChart.element, containerSize);\n\n      // Re-wrap mark handlers with fresh closures for dataPolicy/runtimeIssue reporting\n      wrapMarkHandlers(\n        cachedChart,\n        onError,\n        dataPolicy,\n        runtimeIssueContext,\n        runtimeIssueReporter,\n      );\n\n      // Restore error state from cached chart\n      if (cachedChart.error) {\n        onError(cachedChart.error);\n      }\n\n      return;\n    }\n\n    // Create new chart\n    const renderVersion = ++renderVersionRef.current;\n    let cancelled = false;\n\n    void createSpecChartElement(spec, containerSize, params)\n      .then((element) => {\n        if (\n          cancelled ||\n          renderVersion !== renderVersionRef.current ||\n          !containerRef.current\n        ) {\n          return;\n        }\n\n        const nextChart: RetainedVgPlotChart = {\n          element,\n          params,\n          specKey: specKey ?? JSON.stringify(spec),\n        };\n\n        onChartCreated(nextChart);\n        containerRef.current.replaceChildren(element);\n\n        // Wrap marks with runtime handlers\n        wrapMarkHandlers(\n          nextChart,\n          onError,\n          dataPolicy,\n          runtimeIssueContext,\n          runtimeIssueReporter,\n        );\n      })\n      .catch((error) => {\n        if (cancelled) {\n          return;\n        }\n\n        // Normalize error to Error instance\n        const normalizedError =\n          error instanceof Error ? error : new Error(String(error));\n        onError(normalizedError);\n        if (runtimeIssueContext) {\n          runtimeIssueReporter?.reportIssue({\n            kind: 'render-error',\n            panelId: runtimeIssueContext.panelId,\n            chartType: runtimeIssueContext.chartType,\n            message: normalizedError.message,\n            recoverable: false,\n          });\n        }\n        console.error('[VgPlotChart] Error rendering chart:', normalizedError);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    containerSize,\n    specKey,\n    cachedChart,\n    onChartCreated,\n    onError,\n    dataPolicy,\n    runtimeIssueContext,\n    runtimeIssueReporter,\n  ]);\n}\n"]}

package/dist/useVgPlotChartRetention.d.ts

@@ -0,0 +1,21 @@
+import { Param, Selection } from '@uwdata/mosaic-core';
+export type RetainedVgPlotChart = {
+    element: object;
+    params?: Map<string, Param<any> | Selection>;
+    specKey: string;
+    error?: Error;
+};
+export type VgPlotChartRetention = {
+    chart?: RetainedVgPlotChart;
+    setChart: (chart: RetainedVgPlotChart) => void;
+};
+export declare function destroyRetainedVgPlotChart(chart: RetainedVgPlotChart): void;
+/**
+ * Hook to manage chart retention (caching) across spec changes.
+ * Handles chart lifecycle: retrieval, storage, and cleanup.
+ */
+export declare function useVgPlotChartRetention(specKey: string | null, params: Map<string, Param<any> | Selection> | undefined, externalRetention?: VgPlotChartRetention): {
+    getCachedChart: () => RetainedVgPlotChart | null;
+    setCachedChart: (chart: RetainedVgPlotChart) => void;
+};
+//# sourceMappingURL=useVgPlotChartRetention.d.ts.map

package/dist/useVgPlotChartRetention.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVgPlotChartRetention.d.ts","sourceRoot":"","sources":["../src/useVgPlotChartRetention.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAGrD,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAChD,CAAC;AAaF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,QAKpE;AAoBD;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,MAAM,GAAG,IAAI,EACtB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,EACvD,iBAAiB,CAAC,EAAE,oBAAoB;0BAaD,mBAAmB,GAAG,IAAI;4BA0BvD,mBAAmB;EAQ9B"}

package/dist/useVgPlotChartRetention.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef } from 'react';
+function getPlotInstance(element) {
+    const plot = element.value;
+    return plot && typeof plot === 'object' ? plot : null;
+}
+export function destroyRetainedVgPlotChart(chart) {
+    const plot = getPlotInstance(chart.element);
+    plot?.marks?.forEach((mark) => {
+        mark.destroy?.();
+    });
+}
+function areEquivalentParams(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (!left || !right || left.size !== right.size) {
+        return false;
+    }
+    for (const [key, value] of left) {
+        if (right.get(key) !== value) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Hook to manage chart retention (caching) across spec changes.
+ * Handles chart lifecycle: retrieval, storage, and cleanup.
+ */
+export function useVgPlotChartRetention(specKey, params, externalRetention) {
+    const localChartRef = useRef(null);
+    // Clean up old chart when spec changes
+    useEffect(() => {
+        const local = localChartRef.current;
+        if (local && local.specKey !== specKey) {
+            destroyRetainedVgPlotChart(local);
+            localChartRef.current = null;
+        }
+    }, [specKey]);
+    const getCachedChart = useCallback(() => {
+        const cached = externalRetention?.chart;
+        const local = localChartRef.current;
+        // Try local cache first
+        if (local &&
+            local.specKey === specKey &&
+            areEquivalentParams(local.params, params)) {
+            return local;
+        }
+        // Try external cache
+        if (cached &&
+            cached.specKey === specKey &&
+            areEquivalentParams(cached.params, params)) {
+            return cached;
+        }
+        return null;
+    }, [specKey, params, externalRetention]);
+    const setCachedChart = useCallback((chart) => {
+        localChartRef.current = chart;
+        externalRetention?.setChart(chart);
+    }, [externalRetention]);
+    return { getCachedChart, setCachedChart };
+}
+//# sourceMappingURL=useVgPlotChartRetention.js.map

package/dist/useVgPlotChartRetention.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVgPlotChartRetention.js","sourceRoot":"","sources":["../src/useVgPlotChartRetention.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAoBrD,SAAS,eAAe,CAAC,OAAe;IACtC,MAAM,IAAI,GAAI,OAA2C,CAAC,KAAK,CAAC;IAChE,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAE,IAAqB,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAC,KAA0B;IACnE,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5C,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,mBAAmB,CAC1B,IAA0C,EAC1C,KAA2C;IAE3C,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC;QAChD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;QAChC,IAAI,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAsB,EACtB,MAAuD,EACvD,iBAAwC;IAExC,MAAM,aAAa,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAE/D,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;QACpC,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YACvC,0BAA0B,CAAC,KAAK,CAAC,CAAC;YAClC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,cAAc,GAAG,WAAW,CAAC,GAA+B,EAAE;QAClE,MAAM,MAAM,GAAG,iBAAiB,EAAE,KAAK,CAAC;QACxC,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;QAEpC,wBAAwB;QACxB,IACE,KAAK;YACL,KAAK,CAAC,OAAO,KAAK,OAAO;YACzB,mBAAmB,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,qBAAqB;QACrB,IACE,MAAM;YACN,MAAM,CAAC,OAAO,KAAK,OAAO;YAC1B,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1C,CAAC;YACD,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,KAA0B,EAAE,EAAE;QAC7B,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,iBAAiB,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,OAAO,EAAC,cAAc,EAAE,cAAc,EAAC,CAAC;AAC1C,CAAC","sourcesContent":["import {Param, Selection} from '@uwdata/mosaic-core';\nimport {useCallback, useEffect, useRef} from 'react';\n\nexport type RetainedVgPlotChart = {\n  element: object;\n  params?: Map<string, Param<any> | Selection>;\n  specKey: string;\n  error?: Error;\n};\n\nexport type VgPlotChartRetention = {\n  chart?: RetainedVgPlotChart;\n  setChart: (chart: RetainedVgPlotChart) => void;\n};\n\ntype PlotInstance = {\n  marks?: Array<{destroy?: () => void}>;\n  render?: () => Promise<unknown> | unknown;\n  setAttribute?: (name: string, value: unknown) => boolean;\n};\n\nfunction getPlotInstance(element: object): PlotInstance | null {\n  const plot = (element as HTMLElement & {value?: unknown}).value;\n  return plot && typeof plot === 'object' ? (plot as PlotInstance) : null;\n}\n\nexport function destroyRetainedVgPlotChart(chart: RetainedVgPlotChart) {\n  const plot = getPlotInstance(chart.element);\n  plot?.marks?.forEach((mark) => {\n    mark.destroy?.();\n  });\n}\n\nfunction areEquivalentParams(\n  left?: Map<string, Param<any> | Selection>,\n  right?: Map<string, Param<any> | Selection>,\n) {\n  if (left === right) {\n    return true;\n  }\n  if (!left || !right || left.size !== right.size) {\n    return false;\n  }\n  for (const [key, value] of left) {\n    if (right.get(key) !== value) {\n      return false;\n    }\n  }\n  return true;\n}\n\n/**\n * Hook to manage chart retention (caching) across spec changes.\n * Handles chart lifecycle: retrieval, storage, and cleanup.\n */\nexport function useVgPlotChartRetention(\n  specKey: string | null,\n  params: Map<string, Param<any> | Selection> | undefined,\n  externalRetention?: VgPlotChartRetention,\n) {\n  const localChartRef = useRef<RetainedVgPlotChart | null>(null);\n\n  // Clean up old chart when spec changes\n  useEffect(() => {\n    const local = localChartRef.current;\n    if (local && local.specKey !== specKey) {\n      destroyRetainedVgPlotChart(local);\n      localChartRef.current = null;\n    }\n  }, [specKey]);\n\n  const getCachedChart = useCallback((): RetainedVgPlotChart | null => {\n    const cached = externalRetention?.chart;\n    const local = localChartRef.current;\n\n    // Try local cache first\n    if (\n      local &&\n      local.specKey === specKey &&\n      areEquivalentParams(local.params, params)\n    ) {\n      return local;\n    }\n\n    // Try external cache\n    if (\n      cached &&\n      cached.specKey === specKey &&\n      areEquivalentParams(cached.params, params)\n    ) {\n      return cached;\n    }\n\n    return null;\n  }, [specKey, params, externalRetention]);\n\n  const setCachedChart = useCallback(\n    (chart: RetainedVgPlotChart) => {\n      localChartRef.current = chart;\n      externalRetention?.setChart(chart);\n    },\n    [externalRetention],\n  );\n\n  return {getCachedChart, setCachedChart};\n}\n"]}

package/dist/wrapCoordinatorWithValidation.d.ts

@@ -0,0 +1,11 @@
+import { Coordinator } from '@uwdata/mosaic-core';
+/**
+ * Wraps coordinator's query method to validate result sizes.
+ * This prevents rendering charts with too many data points.
+ *
+ * @deprecated Prefer chart-owned `ChartDataPolicy` validation in renderer
+ * query-result lifecycles. A coordinator-wide limit cannot distinguish raw
+ * point charts from aggregate charts.
+ */
+export declare function wrapCoordinatorWithValidation(coordinator: Coordinator, maxDataPoints: number): void;
+//# sourceMappingURL=wrapCoordinatorWithValidation.d.ts.map

package/dist/wrapCoordinatorWithValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapCoordinatorWithValidation.d.ts","sourceRoot":"","sources":["../src/wrapCoordinatorWithValidation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAIhD;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,CAC3C,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,MAAM,GACpB,IAAI,CAcN"}

package/dist/wrapCoordinatorWithValidation.js

@@ -0,0 +1,23 @@
+import { DataPointLimitError } from './DataPointLimitError';
+import { getQueryResultRowCount } from './chart-runtime';
+/**
+ * Wraps coordinator's query method to validate result sizes.
+ * This prevents rendering charts with too many data points.
+ *
+ * @deprecated Prefer chart-owned `ChartDataPolicy` validation in renderer
+ * query-result lifecycles. A coordinator-wide limit cannot distinguish raw
+ * point charts from aggregate charts.
+ */
+export function wrapCoordinatorWithValidation(coordinator, maxDataPoints) {
+    const originalQuery = coordinator.query.bind(coordinator);
+    coordinator.query = async function (request, options) {
+        const result = await originalQuery(request, options);
+        // Validate all queries that return data
+        const rowCount = getQueryResultRowCount(result);
+        if (rowCount > maxDataPoints) {
+            throw new DataPointLimitError(rowCount, maxDataPoints);
+        }
+        return result;
+    };
+}
+//# sourceMappingURL=wrapCoordinatorWithValidation.js.map

package/dist/wrapCoordinatorWithValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapCoordinatorWithValidation.js","sourceRoot":"","sources":["../src/wrapCoordinatorWithValidation.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,iBAAiB,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,UAAU,6BAA6B,CAC3C,WAAwB,EACxB,aAAqB;IAErB,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAEzD,WAAmB,CAAC,KAAK,GAAG,KAAK,WAAW,OAAY,EAAE,OAAa;QACtE,MAAM,MAAM,GAAG,MAAM,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAErD,wCAAwC;QACxC,MAAM,QAAQ,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,QAAQ,GAAG,aAAa,EAAE,CAAC;YAC7B,MAAM,IAAI,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import {Coordinator} from '@uwdata/mosaic-core';\nimport {DataPointLimitError} from './DataPointLimitError';\nimport {getQueryResultRowCount} from './chart-runtime';\n\n/**\n * Wraps coordinator's query method to validate result sizes.\n * This prevents rendering charts with too many data points.\n *\n * @deprecated Prefer chart-owned `ChartDataPolicy` validation in renderer\n * query-result lifecycles. A coordinator-wide limit cannot distinguish raw\n * point charts from aggregate charts.\n */\nexport function wrapCoordinatorWithValidation(\n  coordinator: Coordinator,\n  maxDataPoints: number,\n): void {\n  const originalQuery = coordinator.query.bind(coordinator);\n\n  (coordinator as any).query = async function (request: any, options?: any) {\n    const result = await originalQuery(request, options);\n\n    // Validate all queries that return data\n    const rowCount = getQueryResultRowCount(result);\n    if (rowCount > maxDataPoints) {\n      throw new DataPointLimitError(rowCount, maxDataPoints);\n    }\n\n    return result;\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/mosaic",
-  "version": "0.29.0-rc.5",
+  "version": "0.29.0-rc.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sqlrooms/sqlrooms.git"
@@ -9,6 +9,24 @@
   "author": "SQLRooms Contributors",
   "sideEffects": false,
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./ai": {
+      "types": "./dist/ai.d.ts",
+      "import": "./dist/ai.js",
+      "default": "./dist/ai.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,17 +44,17 @@
   "dependencies": {
     "@observablehq/plot": "^0.6.17",
     "@paralleldrive/cuid2": "^3.0.0",
-    "@sqlrooms/codemirror": "0.29.0-rc.5",
-    "@sqlrooms/color-scales": "0.29.0-rc.5",
-    "@sqlrooms/data-table": "0.29.0-rc.5",
-    "@sqlrooms/db": "0.29.0-rc.5",
-    "@sqlrooms/documents": "0.29.0-rc.5",
-    "@sqlrooms/duckdb": "0.29.0-rc.5",
-    "@sqlrooms/layout": "0.29.0-rc.5",
-    "@sqlrooms/layout-config": "0.29.0-rc.5",
-    "@sqlrooms/room-store": "0.29.0-rc.5",
-    "@sqlrooms/ui": "0.29.0-rc.5",
-    "@sqlrooms/utils": "0.29.0-rc.5",
+    "@sqlrooms/codemirror": "0.29.0-rc.6",
+    "@sqlrooms/color-scales": "0.29.0-rc.6",
+    "@sqlrooms/data-table": "0.29.0-rc.6",
+    "@sqlrooms/db": "0.29.0-rc.6",
+    "@sqlrooms/documents": "0.29.0-rc.6",
+    "@sqlrooms/duckdb": "0.29.0-rc.6",
+    "@sqlrooms/layout": "0.29.0-rc.6",
+    "@sqlrooms/layout-config": "0.29.0-rc.6",
+    "@sqlrooms/room-store": "0.29.0-rc.6",
+    "@sqlrooms/ui": "0.29.0-rc.6",
+    "@sqlrooms/utils": "0.29.0-rc.6",
     "@uwdata/flechette": "^2.2.6",
     "@uwdata/mosaic-core": "^0.21.0",
     "@uwdata/mosaic-plot": "^0.21.0",
@@ -67,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2763a4d37b79117916c988a8350f87dc926b33d5"
+  "gitHead": "fbf5ee8897c5c06306b5433d26378cf658b5b298"
 }

package/dist/dashboard/MosaicDashboardToolbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MosaicDashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardToolbar.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAa1D,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EA2N1C,CAAC"}

package/dist/dashboard/MosaicDashboardToolbar.js

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Popover, PopoverContent, PopoverTrigger, } from '@sqlrooms/ui';
-import { BarChart3, Check, ChevronsUpDown, FileText, Plus, TableProperties, } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
-import { useMosaicDashboardContext } from './MosaicDashboardContext';
-import { createMosaicDashboardProfilerPanelConfig, createMosaicDashboardTextPanelConfig, getMosaicDashboardSelectionName, MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE, MOSAIC_DASHBOARD_TEXT_PANEL_TYPE, useStoreWithMosaicDashboard, } from './MosaicDashboardSlice';
-export const MosaicDashboardToolbar = () => {
-    const { dashboardId, canCreateChart, addDefaultChart } = useMosaicDashboardContext();
-    const dashboard = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.config.dashboardsById[dashboardId]);
-    const setSelectedTable = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.setSelectedTable);
-    const addPanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanel);
-    const panelRenderers = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.panelRenderers);
-    const addPanelActions = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.addPanelActions);
-    const getSelection = useStoreWithMosaicDashboard((state) => state.mosaic.getSelection);
-    const dashboardSelectionName = getMosaicDashboardSelectionName(dashboardId);
-    const dashboardSelection = useStoreWithMosaicDashboard((state) => state.mosaic.selections[dashboardSelectionName]);
-    const tables = useStoreWithMosaicDashboard((state) => state.db.tables);
-    const tablesWithColumns = useMemo(() => tables.filter((table) => table.columns && table.columns.length > 0), [tables]);
-    const selectedTable = useMemo(() => tablesWithColumns.find((table) => table.tableName === dashboard?.selectedTable), [dashboard?.selectedTable, tablesWithColumns]);
-    const [tablePickerOpen, setTablePickerOpen] = useState(false);
-    const canAddProfiler = Boolean(dashboard?.selectedTable &&
-        panelRenderers[MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE]);
-    const canAddText = Boolean(panelRenderers[MOSAIC_DASHBOARD_TEXT_PANEL_TYPE]);
-    const addPanelActionContext = useMemo(() => ({
-        dashboardId,
-        dashboard,
-        selectedTable,
-        tables: tablesWithColumns,
-    }), [dashboard, dashboardId, selectedTable, tablesWithColumns]);
-    const addPanelActionEntries = useMemo(() => addPanelActions.map((action) => ({
-        action,
-        enabled: action.isEnabled
-            ? action.isEnabled(addPanelActionContext)
-            : true,
-    })), [addPanelActionContext, addPanelActions]);
-    const canAddCustomPanel = addPanelActionEntries.some((entry) => entry.enabled);
-    const canAddAnyPanel = canCreateChart || canAddProfiler || canAddText || canAddCustomPanel;
-    const [selectionVersion, setSelectionVersion] = useState(0);
-    useEffect(() => {
-        if (!dashboardSelection) {
-            getSelection(dashboardSelectionName, 'crossfilter');
-        }
-    }, [dashboardSelection, dashboardSelectionName, getSelection]);
-    useEffect(() => {
-        if (!dashboardSelection) {
-            return;
-        }
-        const handleSelectionChange = () => {
-            setSelectionVersion((value) => value + 1);
-        };
-        dashboardSelection.addEventListener('value', handleSelectionChange);
-        return () => {
-            dashboardSelection.removeEventListener('value', handleSelectionChange);
-        };
-    }, [dashboardSelection]);
-    const hasActiveFilters = useMemo(() => Boolean(dashboardSelection?.clauses.length), [dashboardSelection, selectionVersion]);
-    const handleAddProfiler = () => {
-        const panel = dashboard?.selectedTable
-            ? createMosaicDashboardProfilerPanelConfig({
-                source: { tableName: dashboard.selectedTable },
-            })
-            : createMosaicDashboardProfilerPanelConfig();
-        addPanel(dashboardId, panel);
-    };
-    const handleAddText = () => {
-        const panel = createMosaicDashboardTextPanelConfig();
-        addPanel(dashboardId, panel);
-    };
-    const handleAddCustomPanel = (action) => {
-        const panel = action.createPanel(addPanelActionContext);
-        if (panel) {
-            addPanel(dashboardId, panel);
-        }
-    };
-    const handleResetFilters = () => {
-        dashboardSelection?.reset();
-    };
-    return (_jsxs("div", { className: "flex items-center justify-between border-b px-5 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Popover, { open: tablePickerOpen, onOpenChange: setTablePickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", role: "combobox", "aria-expanded": tablePickerOpen, className: "w-[200px] justify-between", children: [_jsx("span", { className: "truncate", children: dashboard?.selectedTable || 'Select table…' }), _jsx(ChevronsUpDown, { className: "ml-1 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[220px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search tables\u2026" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No tables found." }), _jsx(CommandGroup, { children: tablesWithColumns.map((table) => (_jsxs(CommandItem, { value: table.tableName, onSelect: (value) => {
-                                                            setSelectedTable(dashboardId, value);
-                                                            setTablePickerOpen(false);
-                                                        }, children: [_jsx(Check, { className: `mr-2 h-3.5 w-3.5 ${dashboard?.selectedTable === table.tableName ? 'opacity-100' : 'opacity-0'}` }), table.tableName] }, table.tableName))) })] })] }) })] }), _jsx(Button, { variant: "link", size: "sm", className: "h-8 px-0", disabled: !hasActiveFilters, onClick: handleResetFilters, children: "Reset filters" })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "outline", disabled: !canAddAnyPanel, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Add"] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: addDefaultChart, disabled: !canCreateChart, children: [_jsx(BarChart3, { className: "mr-2 h-4 w-4" }), "Chart"] }), _jsxs(DropdownMenuItem, { onClick: handleAddProfiler, disabled: !canAddProfiler, children: [_jsx(TableProperties, { className: "mr-2 h-4 w-4" }), "Profiler"] }), _jsxs(DropdownMenuItem, { onClick: handleAddText, disabled: !canAddText, children: [_jsx(FileText, { className: "mr-2 h-4 w-4" }), "Text"] }), addPanelActionEntries.map(({ action, enabled }) => {
-                                    const Icon = action.icon;
-                                    return (_jsxs(DropdownMenuItem, { onClick: () => handleAddCustomPanel(action), disabled: !enabled, children: [Icon ? _jsx(Icon, { className: "mr-2 h-4 w-4" }) : null, action.label] }, action.type));
-                                })] })] }) })] }));
-};
-//# sourceMappingURL=MosaicDashboardToolbar.js.map

package/dist/dashboard/MosaicDashboardToolbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MosaicDashboardToolbar.js","sourceRoot":"","sources":["../../src/dashboard/MosaicDashboardToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@sqlrooms/ui';\nimport {\n  BarChart3,\n  Check,\n  ChevronsUpDown,\n  FileText,\n  Plus,\n  TableProperties,\n} from 'lucide-react';\nimport React, {useEffect, useMemo, useState} from 'react';\nimport {useMosaicDashboardContext} from './MosaicDashboardContext';\nimport {\n  type MosaicDashboardAddPanelAction,\n  type MosaicDashboardAddPanelActionContext,\n  createMosaicDashboardProfilerPanelConfig,\n  createMosaicDashboardTextPanelConfig,\n  getMosaicDashboardSelectionName,\n  MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,\n  MOSAIC_DASHBOARD_TEXT_PANEL_TYPE,\n  useStoreWithMosaicDashboard,\n} from './MosaicDashboardSlice';\n\nexport const MosaicDashboardToolbar: React.FC = () => {\n  const {dashboardId, canCreateChart, addDefaultChart} =\n    useMosaicDashboardContext();\n  const dashboard = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.config.dashboardsById[dashboardId],\n  );\n  const setSelectedTable = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.setSelectedTable,\n  );\n  const addPanel = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanel,\n  );\n  const panelRenderers = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.panelRenderers,\n  );\n  const addPanelActions = useStoreWithMosaicDashboard(\n    (state) => state.mosaicDashboard.addPanelActions,\n  );\n  const getSelection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.getSelection,\n  );\n  const dashboardSelectionName = getMosaicDashboardSelectionName(dashboardId);\n  const dashboardSelection = useStoreWithMosaicDashboard(\n    (state) => state.mosaic.selections[dashboardSelectionName],\n  );\n  const tables = useStoreWithMosaicDashboard((state) => state.db.tables);\n  const tablesWithColumns = useMemo(\n    () => tables.filter((table) => table.columns && table.columns.length > 0),\n    [tables],\n  );\n  const selectedTable = useMemo(\n    () =>\n      tablesWithColumns.find(\n        (table) => table.tableName === dashboard?.selectedTable,\n      ),\n    [dashboard?.selectedTable, tablesWithColumns],\n  );\n  const [tablePickerOpen, setTablePickerOpen] = useState(false);\n  const canAddProfiler = Boolean(\n    dashboard?.selectedTable &&\n    panelRenderers[MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE],\n  );\n  const canAddText = Boolean(panelRenderers[MOSAIC_DASHBOARD_TEXT_PANEL_TYPE]);\n  const addPanelActionContext = useMemo<MosaicDashboardAddPanelActionContext>(\n    () => ({\n      dashboardId,\n      dashboard,\n      selectedTable,\n      tables: tablesWithColumns,\n    }),\n    [dashboard, dashboardId, selectedTable, tablesWithColumns],\n  );\n  const addPanelActionEntries = useMemo(\n    () =>\n      addPanelActions.map((action) => ({\n        action,\n        enabled: action.isEnabled\n          ? action.isEnabled(addPanelActionContext)\n          : true,\n      })),\n    [addPanelActionContext, addPanelActions],\n  );\n  const canAddCustomPanel = addPanelActionEntries.some(\n    (entry) => entry.enabled,\n  );\n  const canAddAnyPanel =\n    canCreateChart || canAddProfiler || canAddText || canAddCustomPanel;\n  const [selectionVersion, setSelectionVersion] = useState(0);\n\n  useEffect(() => {\n    if (!dashboardSelection) {\n      getSelection(dashboardSelectionName, 'crossfilter');\n    }\n  }, [dashboardSelection, dashboardSelectionName, getSelection]);\n\n  useEffect(() => {\n    if (!dashboardSelection) {\n      return;\n    }\n\n    const handleSelectionChange = () => {\n      setSelectionVersion((value) => value + 1);\n    };\n\n    dashboardSelection.addEventListener('value', handleSelectionChange);\n    return () => {\n      dashboardSelection.removeEventListener('value', handleSelectionChange);\n    };\n  }, [dashboardSelection]);\n\n  const hasActiveFilters = useMemo(\n    () => Boolean(dashboardSelection?.clauses.length),\n    [dashboardSelection, selectionVersion],\n  );\n\n  const handleAddProfiler = () => {\n    const panel = dashboard?.selectedTable\n      ? createMosaicDashboardProfilerPanelConfig({\n          source: {tableName: dashboard.selectedTable},\n        })\n      : createMosaicDashboardProfilerPanelConfig();\n    addPanel(dashboardId, panel);\n  };\n\n  const handleAddText = () => {\n    const panel = createMosaicDashboardTextPanelConfig();\n    addPanel(dashboardId, panel);\n  };\n\n  const handleAddCustomPanel = (action: MosaicDashboardAddPanelAction) => {\n    const panel = action.createPanel(addPanelActionContext);\n    if (panel) {\n      addPanel(dashboardId, panel);\n    }\n  };\n\n  const handleResetFilters = () => {\n    dashboardSelection?.reset();\n  };\n\n  return (\n    <div className=\"flex items-center justify-between border-b px-5 py-2\">\n      <div className=\"flex items-center gap-2\">\n        <Popover open={tablePickerOpen} onOpenChange={setTablePickerOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              role=\"combobox\"\n              aria-expanded={tablePickerOpen}\n              className=\"w-[200px] justify-between\"\n            >\n              <span className=\"truncate\">\n                {dashboard?.selectedTable || 'Select table…'}\n              </span>\n              <ChevronsUpDown className=\"ml-1 h-3.5 w-3.5 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-[220px] p-0\" align=\"start\">\n            <Command>\n              <CommandInput placeholder=\"Search tables…\" />\n              <CommandList>\n                <CommandEmpty>No tables found.</CommandEmpty>\n                <CommandGroup>\n                  {tablesWithColumns.map((table) => (\n                    <CommandItem\n                      key={table.tableName}\n                      value={table.tableName}\n                      onSelect={(value) => {\n                        setSelectedTable(dashboardId, value);\n                        setTablePickerOpen(false);\n                      }}\n                    >\n                      <Check\n                        className={`mr-2 h-3.5 w-3.5 ${dashboard?.selectedTable === table.tableName ? 'opacity-100' : 'opacity-0'}`}\n                      />\n                      {table.tableName}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <Button\n          variant=\"link\"\n          size=\"sm\"\n          className=\"h-8 px-0\"\n          disabled={!hasActiveFilters}\n          onClick={handleResetFilters}\n        >\n          Reset filters\n        </Button>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\" disabled={!canAddAnyPanel}>\n              <Plus className=\"mr-1 h-4 w-4\" />\n              Add\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem\n              onClick={addDefaultChart}\n              disabled={!canCreateChart}\n            >\n              <BarChart3 className=\"mr-2 h-4 w-4\" />\n              Chart\n            </DropdownMenuItem>\n            <DropdownMenuItem\n              onClick={handleAddProfiler}\n              disabled={!canAddProfiler}\n            >\n              <TableProperties className=\"mr-2 h-4 w-4\" />\n              Profiler\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={handleAddText} disabled={!canAddText}>\n              <FileText className=\"mr-2 h-4 w-4\" />\n              Text\n            </DropdownMenuItem>\n            {addPanelActionEntries.map(({action, enabled}) => {\n              const Icon = action.icon;\n              return (\n                <DropdownMenuItem\n                  key={action.type}\n                  onClick={() => handleAddCustomPanel(action)}\n                  disabled={!enabled}\n                >\n                  {Icon ? <Icon className=\"mr-2 h-4 w-4\" /> : null}\n                  {action.label}\n                </DropdownMenuItem>\n              );\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </div>\n  );\n};\n"]}