@sqlrooms/deck 0.29.0-rc.7 → 0.29.0-rc.9

package/dist/dashboard.js

@@ -1,18 +1,116 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WebMercatorViewport } from '@deck.gl/core';
-import { escapeId, getColValAsNumber, useStoreWithDuckDb, } from '@sqlrooms/duckdb';
-import { column, sql, useMosaicClient, useStoreWithMosaicDashboard, } from '@sqlrooms/mosaic';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { column, sql, useMosaicClient, useStoreWithMosaicDashboard, usePanelClientRegistration, } from '@sqlrooms/mosaic';
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@sqlrooms/ui';
-import { FocusIcon, MapIcon, SettingsIcon } from 'lucide-react';
+import { AlertTriangleIcon, FocusIcon, MapIcon, SettingsIcon, } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DeckMapConfigPopoverEditor } from './DeckMapConfigPopoverEditor';
 import { DeckJsonMap } from './DeckJsonMap';
 import { MapSettingsPanel } from './MapSettings';
 import { MosaicDashboardPanelLayout } from '@sqlrooms/mosaic';
-import { asDeckJsonMapConfig, createDeckMapDashboardDatasetQuery, createDeckMapDashboardDatasets, DECK_MAP_DASHBOARD_PANEL_TYPE, resolveDeckMapDashboardDatasetSource, } from './dashboardConfig';
-import { getDeckMapDataPolicy } from './mapDataPolicy';
+import { asDeckJsonMapConfig, createDeckMapDashboardPanelConfig, createDeckMapDashboardDatasetQuery, createDeckMapDashboardDatasets, DECK_MAP_DASHBOARD_PANEL_TYPE, DEFAULT_DECK_MAP_MAX_DATA_POINTS, resolveDeckMapDashboardDatasetSource, } from './dashboardConfig';
+import { useDeckMapFitToBounds, emitDeckMapDashboardFitRequest, createDeckMapBoundsQuery, } from './useDeckMapFitToBounds';
+export { createDeckMapBoundsQuery };
+import { useDeckMapDatasets } from './useDeckMapDatasets';
 import { createDeckMapDashboardPanelConfigForTable, findGeometryColumn, findLongitudeLatitudeColumns, } from './mapConfigUtils';
+function createEmptyDeckMapDashboardPanelConfig(title = 'Map') {
+    return createDeckMapDashboardPanelConfig({
+        title,
+        spec: {
+            initialViewState: { longitude: 0, latitude: 20, zoom: 1.5 },
+            layers: [],
+        },
+        datasets: {},
+    });
+}
+/**
+ * Extracts column names from common DuckDB "column not found" error messages
+ * and layer geometry incompatibility errors.
+ * Returns the column names if detected, or null for unrecognized errors.
+ */
+function parseMissingColumnsFromError(message) {
+    // "Referenced column "X" not found in FROM clause!" — may appear multiple times
+    const refMatches = [
+        ...message.matchAll(/Referenced column "([^"]+)" not found/gi),
+    ];
+    if (refMatches.length > 0)
+        return refMatches.map((m) => m[1]);
+    // "Binder Error: Column "X" does not exist" or "column X not found"
+    const colMatch = message.match(/(?:Column|column)\s+"([^"]+)"\s+(?:does not exist|not found)/i);
+    if (colMatch)
+        return [colMatch[1]];
+    // "Geometry column "X" was not found"
+    const geomNotFound = message.match(/Geometry column "([^"]+)" was not found/i);
+    if (geomNotFound)
+        return [geomNotFound[1]];
+    return null;
+}
+/**
+ * Detects geometry type mismatch errors (e.g. polygon layer on point data).
+ */
+function parseGeometryMismatchError(message) {
+    const match = message.match(/requires (\w+) geometry .+ but only (\w+) coordinates were found/i);
+    if (match)
+        return { required: match[1], found: match[2] };
+    return null;
+}
+/**
+ * Detects columns referenced in layer config that are missing from the loaded dataset.
+ */
+function detectMissingColumns(mapConfig, datasetStates) {
+    if (!mapConfig?.spec)
+        return [];
+    const missing = [];
+    const spec = mapConfig.spec;
+    const layers = Array.isArray(spec.layers) ? spec.layers : [];
+    for (const layer of layers) {
+        if (!layer || typeof layer !== 'object')
+            continue;
+        const layerObj = layer;
+        const binding = layerObj._sqlroomsBinding;
+        const datasetId = binding?.dataset;
+        const arrowTable = datasetId
+            ? datasetStates[datasetId]?.arrowTable
+            : undefined;
+        if (!arrowTable)
+            continue;
+        const fieldNames = new Set(arrowTable.schema.fields.map((f) => f.name.toLowerCase()));
+        const check = (col) => {
+            if (col && !fieldNames.has(col.toLowerCase())) {
+                missing.push(col);
+            }
+        };
+        // Check @@= accessors
+        for (const [propName, propValue] of Object.entries(layerObj)) {
+            // Skip elevation references when extrusion is disabled
+            if (propName === 'getElevation' && !layerObj.extruded)
+                continue;
+            if (typeof propValue === 'string' && propValue.startsWith('@@=')) {
+                check(propValue.slice(3).trim());
+            }
+            // Check @@function colorScale/scale field references
+            if (propValue &&
+                typeof propValue === 'object' &&
+                '@@function' in propValue) {
+                const fn = propValue;
+                if (typeof fn.field === 'string') {
+                    check(fn.field);
+                }
+            }
+        }
+    }
+    return [...new Set(missing)];
+}
 function DeckMapRuntimeIssuePanel({ issue }) {
+    if (issue.kind === 'sql-error' || issue.kind === 'render-error') {
+        const missingColumns = parseMissingColumnsFromError(issue.message);
+        if (missingColumns) {
+            return (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center p-4", children: [_jsx("div", { className: "mb-2 text-center font-semibold", children: "The visualization can't be displayed" }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { children: "Selected columns are missing in the dataset: " }), missingColumns.map((col, idx) => (_jsxs("span", { children: [_jsx("span", { className: "inline-flex items-center rounded-md border border-gray-600 bg-gray-800 px-1 py-0.5 text-xs font-medium text-gray-300", children: col }), ' '] }, idx)))] })] }));
+        }
+        const geomMismatch = parseGeometryMismatchError(issue.message);
+        if (geomMismatch) {
+            return (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center p-4", children: [_jsx("div", { className: "mb-2 text-center font-semibold", children: "The visualization can't be displayed" }), _jsxs("div", { className: "text-center text-sm", children: ["This layer requires ", geomMismatch.required, " geometry, but the current dataset only has ", geomMismatch.found, " coordinates."] })] }));
+        }
+    }
     const title = issue.kind === 'too-much-data'
         ? 'Too much data'
         : issue.kind === 'sql-error'
@@ -20,35 +118,54 @@ function DeckMapRuntimeIssuePanel({ issue }) {
             : 'Unable to display map';
     return (_jsxs("div", { className: "flex h-full min-h-[200px] flex-col items-center justify-center p-4", children: [_jsx("div", { className: "mb-2 text-center font-semibold", children: title }), _jsx("div", { className: "text-center text-sm whitespace-pre-wrap", children: issue.message })] }));
 }
-function DeckMapDashboardDatasetClient({ dashboard, dataset, datasetId, dataPolicy, panel, onDatasetState, runtimeIssueContext, runtimeIssueReporter, selectionName, }) {
+function DeckMapDashboardDatasetClient({ dashboard, dataset, datasetId, fitToData, panel, onDatasetState, runtimeIssueContext, runtimeIssueReporter, selectionName, maxRows, }) {
+    const datasetFitToData = useMemo(() => (fitToData?.dataset === datasetId ? fitToData : undefined), [datasetId, fitToData]);
     const source = useMemo(() => resolveDeckMapDashboardDatasetSource({
         dashboard,
         panel,
         dataset,
-    }), [dashboard, dataset, panel]);
+        fitToData: datasetFitToData,
+    }), [dashboard, dataset, datasetFitToData, panel]);
     const query = useCallback((filter) => source
-        ? createDeckMapDashboardDatasetQuery(source, filter)
-        : createDeckMapDashboardDatasetQuery({ tableName: '__missing_dashboard_map_dataset__' }, filter), [source]);
+        ? createDeckMapDashboardDatasetQuery(source, filter, {
+            sampleRows: maxRows,
+        })
+        : createDeckMapDashboardDatasetQuery({ tableName: '__missing_dashboard_map_dataset__' }, filter, { sampleRows: maxRows }), [maxRows, source]);
+    const queryError = useCallback((err) => {
+        onDatasetState(datasetId, {
+            arrowTable: undefined,
+            error: err,
+            isLoading: false,
+            client: null,
+            isSampled: false,
+        });
+    }, [datasetId, onDatasetState]);
+    const sourceKey = source?.tableName ?? dashboard.selectedTable ?? '';
+    const sourceQueryKey = source?.sqlQuery ?? '';
     const { data, error, isLoading, client } = useMosaicClient({
-        id: `${panel.id}:${datasetId}`,
+        id: `${panel.id}:${datasetId}:${sourceKey}:${sourceQueryKey}`,
         selectionName,
         query,
-        dataPolicy,
+        queryError,
         enabled: Boolean(source),
         runtimeIssueContext,
         runtimeIssueReporter,
     });
+    // Register client for panel reset button
+    usePanelClientRegistration(dashboard.id, panel.id, client ? [client] : []);
+    const isSampled = Boolean(data && data.numRows >= maxRows);
     useEffect(() => {
         onDatasetState(datasetId, {
             arrowTable: data ?? undefined,
             error,
             isLoading,
             client,
+            isSampled,
         });
         return () => {
             onDatasetState(datasetId, undefined);
         };
-    }, [client, data, datasetId, error, isLoading, onDatasetState]);
+    }, [client, data, datasetId, error, isLoading, isSampled, onDatasetState]);
     return null;
 }
 function createPointRadiusPredicate(interaction, coordinate) {
@@ -70,81 +187,6 @@ function getCoordinate(info) {
 function isPickedMapFeature(info) {
     return Boolean(info.picked || info.object || (info.index ?? -1) >= 0);
 }
-function createDeckMapBoundsQuery(options) {
-    const { source, fitToData } = options;
-    const baseSourceSql = source.sqlQuery
-        ? `SELECT * FROM (${source.sqlQuery}) AS "__sqlrooms_dashboard_map_source"`
-        : `SELECT * FROM ${(source.tableName ?? '')
-            .split('.')
-            .map(escapeId)
-            .join('.')}`;
-    const longitudeColumn = escapeId(fitToData.longitudeColumn);
-    const latitudeColumn = escapeId(fitToData.latitudeColumn);
-    return `
-    SELECT
-      ST_XMin(extent) AS min_longitude,
-      ST_YMin(extent) AS min_latitude,
-      ST_XMax(extent) AS max_longitude,
-      ST_YMax(extent) AS max_latitude
-    FROM (
-      SELECT ST_Extent_Agg(ST_Point(${longitudeColumn}, ${latitudeColumn})) AS extent
-      FROM (${baseSourceSql}) AS "__sqlrooms_dashboard_map_points"
-      WHERE ${longitudeColumn} IS NOT NULL AND ${latitudeColumn} IS NOT NULL
-    ) AS "__sqlrooms_dashboard_map_extent"
-    WHERE extent IS NOT NULL
-  `;
-}
-function readBoundsFromExtentResult(result) {
-    const minLongitude = getColValAsNumber(result, 'min_longitude');
-    const minLatitude = getColValAsNumber(result, 'min_latitude');
-    const maxLongitude = getColValAsNumber(result, 'max_longitude');
-    const maxLatitude = getColValAsNumber(result, 'max_latitude');
-    if (!Number.isFinite(minLongitude) ||
-        !Number.isFinite(minLatitude) ||
-        !Number.isFinite(maxLongitude) ||
-        !Number.isFinite(maxLatitude)) {
-        return null;
-    }
-    return [
-        [
-            minLongitude === maxLongitude ? minLongitude - 0.01 : minLongitude,
-            minLatitude === maxLatitude ? minLatitude - 0.01 : minLatitude,
-        ],
-        [
-            minLongitude === maxLongitude ? maxLongitude + 0.01 : maxLongitude,
-            minLatitude === maxLatitude ? maxLatitude + 0.01 : maxLatitude,
-        ],
-    ];
-}
-function fitViewStateToBounds(options) {
-    const { bounds, width, height, padding = 40, maxZoom = 12 } = options;
-    const viewport = new WebMercatorViewport({
-        width: Math.max(width, 1),
-        height: Math.max(height, 1),
-    });
-    const fitted = viewport.fitBounds([
-        [bounds[0][0], bounds[0][1]],
-        [bounds[1][0], bounds[1][1]],
-    ], { padding });
-    return {
-        longitude: fitted.longitude,
-        latitude: fitted.latitude,
-        zoom: Math.min(fitted.zoom, maxZoom),
-    };
-}
-const deckMapDashboardFitRequestTarget = new EventTarget();
-function emitDeckMapDashboardFitRequest(panelId) {
-    deckMapDashboardFitRequestTarget.dispatchEvent(new CustomEvent('fit-view', { detail: { panelId } }));
-}
-function createInitialDeckMapDashboardFitState(key) {
-    return {
-        key,
-        viewState: undefined,
-        didAutoFit: false,
-        fitRequestVersion: 0,
-        handledFitRequestVersion: 0,
-    };
-}
 function DeckMapDashboardHeaderActions({ dashboardId, panel, }) {
     const updatePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updatePanel);
     const mapConfig = asDeckJsonMapConfig(panel.config);
@@ -169,9 +211,18 @@ function DeckMapDashboardRenderer({ dashboard, dashboardId, panel, selectionName
     const getSelection = useStoreWithMosaicDashboard((state) => state.mosaic.getSelection);
     const updatePanel = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.updatePanel);
     const issue = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.getPanelIssue(dashboardId, panel.id));
-    const reportPanelIssue = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.reportPanelIssue);
     const clearPanelIssue = useStoreWithMosaicDashboard((state) => state.mosaicDashboard.clearPanelIssue);
-    const executeSql = useStoreWithDuckDb((state) => state.db.executeSql);
+    // Clear runtime issues when the active table or panel config changes so
+    // the map can recover (e.g., after switching tables or AI updating the map).
+    useEffect(() => {
+        clearPanelIssue(dashboardId, panel.id);
+    }, [
+        clearPanelIssue,
+        dashboard.selectedTable,
+        dashboardId,
+        panel.config,
+        panel.id,
+    ]);
     const isSettingsOpen = Boolean(panel.config.settingsOpen);
     const handleSettingsOpenChange = useCallback((isOpen) => {
         updatePanel(dashboardId, panel.id, {
@@ -180,33 +231,10 @@ function DeckMapDashboardRenderer({ dashboard, dashboardId, panel, selectionName
     }, [dashboardId, panel.config, panel.id, updatePanel]);
     const selection = useMemo(() => getSelection(selectionName, 'crossfilter'), [getSelection, selectionName]);
     const containerRef = useRef(null);
-    const [datasetStates, setDatasetStates] = useState({});
+    const deckMapRef = useRef(null);
     const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-    const handleDatasetState = useCallback((datasetId, state) => {
-        setDatasetStates((current) => {
-            const next = { ...current };
-            if (state) {
-                next[datasetId] = state;
-            }
-            else {
-                delete next[datasetId];
-            }
-            return next;
-        });
-    }, []);
-    const dataPolicy = useMemo(() => getDeckMapDataPolicy(mapConfig), [mapConfig]);
-    const runtimeIssueContext = useMemo(() => ({
-        panelId: panel.id,
-        chartType: DECK_MAP_DASHBOARD_PANEL_TYPE,
-    }), [panel.id]);
-    const runtimeIssueReporter = useMemo(() => ({
-        reportIssue: (issueToReport) => {
-            reportPanelIssue(dashboardId, panel.id, issueToReport);
-        },
-        clearIssue: () => {
-            clearPanelIssue(dashboardId, panel.id);
-        },
-    }), [clearPanelIssue, dashboardId, panel.id, reportPanelIssue]);
+    const [sampledDismissed, setSampledDismissed] = useState(false);
+    const { datasetStates, handleDatasetState, runtimeIssueContext, runtimeIssueReporter, handleRenderingError, } = useDeckMapDatasets({ dashboardId, panel });
     useEffect(() => {
         const container = containerRef.current;
         if (!container)
@@ -223,130 +251,14 @@ function DeckMapDashboardRenderer({ dashboard, dashboardId, panel, selectionName
         return () => {
             observer.disconnect();
         };
-    }, []);
-    const fitToData = mapConfig?.fitToData ?? null;
-    const fitToDataSource = useMemo(() => fitToData
-        ? resolveDeckMapDashboardDatasetSource({
-            dashboard,
-            panel,
-            dataset: mapConfig?.datasets[fitToData.dataset],
-        })
-        : undefined, [dashboard, fitToData, mapConfig?.datasets, panel]);
-    const fitToDataKey = useMemo(() => fitToData && fitToDataSource
-        ? JSON.stringify({
-            source: fitToDataSource,
-            fitToData,
-        })
-        : null, [fitToData, fitToDataSource]);
-    const fitStateKey = useMemo(() => JSON.stringify({ panelId: panel.id, fitToDataKey }), [fitToDataKey, panel.id]);
-    const [fitState, setFitState] = useState(() => createInitialDeckMapDashboardFitState(fitStateKey));
-    const activeFitState = fitState.key === fitStateKey
-        ? fitState
-        : createInitialDeckMapDashboardFitState(fitStateKey);
-    const { didAutoFit, fitRequestVersion, handledFitRequestVersion, viewState } = activeFitState;
-    useEffect(() => {
-        const handleFitRequest = (event) => {
-            const detail = event.detail;
-            if (detail?.panelId === panel.id) {
-                setFitState((current) => {
-                    const scoped = current.key === fitStateKey
-                        ? current
-                        : createInitialDeckMapDashboardFitState(fitStateKey);
-                    return {
-                        ...scoped,
-                        fitRequestVersion: scoped.fitRequestVersion + 1,
-                    };
-                });
-            }
-        };
-        deckMapDashboardFitRequestTarget.addEventListener('fit-view', handleFitRequest);
-        return () => {
-            deckMapDashboardFitRequestTarget.removeEventListener('fit-view', handleFitRequest);
-        };
-    }, [fitStateKey, panel.id]);
-    useEffect(() => {
-        const hasManualFitRequest = fitRequestVersion > handledFitRequestVersion;
-        if (!fitToData ||
-            !fitToDataSource ||
-            containerSize.width <= 0 ||
-            containerSize.height <= 0 ||
-            (!hasManualFitRequest && didAutoFit)) {
-            return;
-        }
-        let isCancelled = false;
-        const fitToDataBounds = async () => {
-            try {
-                const handle = await executeSql(createDeckMapBoundsQuery({
-                    source: fitToDataSource,
-                    fitToData,
-                }));
-                const result = handle ? await handle : null;
-                if (isCancelled || !result) {
-                    return;
-                }
-                const bounds = readBoundsFromExtentResult(result);
-                if (!bounds) {
-                    setFitState((current) => {
-                        const scoped = current.key === fitStateKey
-                            ? current
-                            : createInitialDeckMapDashboardFitState(fitStateKey);
-                        return {
-                            ...scoped,
-                            didAutoFit: true,
-                            handledFitRequestVersion: fitRequestVersion,
-                        };
-                    });
-                    return;
-                }
-                const nextViewState = fitViewStateToBounds({
-                    bounds,
-                    width: containerSize.width,
-                    height: containerSize.height,
-                    padding: fitToData.padding,
-                    maxZoom: fitToData.maxZoom,
-                });
-                setFitState((current) => {
-                    const scoped = current.key === fitStateKey
-                        ? current
-                        : createInitialDeckMapDashboardFitState(fitStateKey);
-                    return {
-                        ...scoped,
-                        viewState: nextViewState,
-                        didAutoFit: true,
-                        handledFitRequestVersion: fitRequestVersion,
-                    };
-                });
-            }
-            catch {
-                if (!isCancelled) {
-                    setFitState((current) => {
-                        const scoped = current.key === fitStateKey
-                            ? current
-                            : createInitialDeckMapDashboardFitState(fitStateKey);
-                        return {
-                            ...scoped,
-                            didAutoFit: true,
-                            handledFitRequestVersion: fitRequestVersion,
-                        };
-                    });
-                }
-            }
-        };
-        void fitToDataBounds();
-        return () => {
-            isCancelled = true;
-        };
-    }, [
-        containerSize.height,
-        containerSize.width,
-        didAutoFit,
-        executeSql,
-        fitRequestVersion,
-        fitStateKey,
-        fitToData,
-        fitToDataSource,
-        handledFitRequestVersion,
-    ]);
+    }, [issue]);
+    const { fitToData } = useDeckMapFitToBounds({
+        panelId: panel.id,
+        dashboard,
+        panel,
+        containerSize,
+        deckMapRef,
+    });
     const handleBrushEvent = useCallback((info) => {
         const interaction = mapConfig?.interaction;
         if (!interaction) {
@@ -372,41 +284,35 @@ function DeckMapDashboardRenderer({ dashboard, dashboardId, panel, selectionName
             predicate: createPointRadiusPredicate(interaction, coordinate),
         });
     }, [datasetStates, mapConfig?.interaction, selection]);
-    const handleViewStateChange = useCallback(({ viewState: nextViewState, interactionState, }) => {
-        const hasUserInteraction = Boolean(interactionState &&
-            ['isDragging', 'isPanning', 'isRotating', 'isZooming'].some((key) => Boolean(interactionState[key])));
-        if (fitToData &&
-            !didAutoFit &&
-            viewState === null &&
-            !hasUserInteraction) {
-            return;
-        }
-        setFitState((current) => {
-            const scoped = current.key === fitStateKey
-                ? current
-                : createInitialDeckMapDashboardFitState(fitStateKey);
-            return {
-                ...scoped,
-                viewState: nextViewState,
-                didAutoFit: hasUserInteraction || scoped.didAutoFit || !fitToData,
-            };
-        });
-    }, [didAutoFit, fitStateKey, fitToData, viewState]);
     const settingsContent = (_jsx(MapSettingsPanel, { dashboardId: dashboardId, panel: panel, onClose: () => handleSettingsOpenChange(false) }));
-    const mapContent = !mapConfig ? (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "Invalid map panel config." })) : issue ? (_jsx(DeckMapRuntimeIssuePanel, { issue: issue })) : Object.entries(mapConfig.datasets).length === 0 ? (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "Map panels require at least one dataset." })) : (_jsxs("div", { ref: containerRef, className: "relative h-full w-full", children: [Object.entries(mapConfig.datasets).map(([datasetId, dataset]) => (_jsx(DeckMapDashboardDatasetClient, { dashboard: dashboard, dataset: dataset, datasetId: datasetId, dataPolicy: dataPolicy, panel: panel, onDatasetState: handleDatasetState, runtimeIssueContext: runtimeIssueContext, runtimeIssueReporter: runtimeIssueReporter, selectionName: selectionName }, datasetId))), Object.entries(datasetStates)
-                .filter(([, state]) => state.error)
-                .map(([datasetId, state]) => (_jsxs("div", { className: "bg-background/90 text-destructive absolute inset-x-4 top-4 z-10 rounded-md border p-3 text-sm shadow", children: ["Failed to load dataset \"", datasetId, "\":", ' ', state.error?.message] }, datasetId))), _jsx(DeckJsonMap, { className: "h-full w-full", spec: mapConfig.spec, datasets: mapConfig
-                    ? createDeckMapDashboardDatasets(mapConfig, datasetStates)
-                    : {}, mapStyle: mapConfig.mapStyle, mapProps: mapConfig.mapProps, showLegends: mapConfig.showLegends, deckProps: {
-                    controller: true,
-                    ...(viewState ? { viewState } : {}),
-                    onViewStateChange: handleViewStateChange,
-                    ...(mapConfig.interaction
-                        ? (mapConfig.interaction.event ?? 'hover') === 'click'
-                            ? { onClick: handleBrushEvent }
-                            : { onHover: handleBrushEvent }
-                        : {}),
-                } })] }));
+    const datasetError = useMemo(() => {
+        for (const state of Object.values(datasetStates)) {
+            if (state.error)
+                return state.error;
+        }
+        return undefined;
+    }, [datasetStates]);
+    const missingColumns = useMemo(() => detectMissingColumns(mapConfig ?? undefined, datasetStates), [mapConfig, datasetStates]);
+    const mapContent = !mapConfig ? (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "Invalid map panel config." })) : Object.entries(mapConfig.datasets).length === 0 ? (_jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-sm", children: "Map panels require at least one dataset." })) : (_jsxs(_Fragment, { children: [Object.entries(mapConfig.datasets).map(([datasetId, dataset]) => (_jsx(DeckMapDashboardDatasetClient, { dashboard: dashboard, dataset: dataset, datasetId: datasetId, fitToData: fitToData ?? undefined, panel: panel, onDatasetState: handleDatasetState, runtimeIssueContext: runtimeIssueContext, runtimeIssueReporter: runtimeIssueReporter, selectionName: selectionName, maxRows: DEFAULT_DECK_MAP_MAX_DATA_POINTS }, datasetId))), issue ? (_jsx(DeckMapRuntimeIssuePanel, { issue: issue })) : datasetError ? (_jsx(DeckMapRuntimeIssuePanel, { issue: {
+                    kind: 'sql-error',
+                    panelId: panel.id,
+                    chartType: DECK_MAP_DASHBOARD_PANEL_TYPE,
+                    message: datasetError.message,
+                    recoverable: true,
+                } })) : (_jsxs("div", { ref: containerRef, className: "relative h-full w-full", children: [Object.values(datasetStates).some((s) => s.isSampled) &&
+                        !sampledDismissed && (_jsxs("div", { className: "bg-background/80 text-muted-foreground absolute top-2 left-2 z-10 flex items-center gap-1.5 rounded px-2 py-1 text-xs shadow", children: [_jsxs("span", { children: ["Data sampled to", ' ', DEFAULT_DECK_MAP_MAX_DATA_POINTS.toLocaleString(), " rows"] }), _jsx("button", { className: "text-muted-foreground/60 hover:text-foreground -mr-0.5 ml-0.5", onClick: () => setSampledDismissed(true), children: "\u00D7" })] })), missingColumns.length > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { className: `absolute left-2 z-10 flex h-5 w-5 items-center justify-center ${Object.values(datasetStates).some((s) => s.isSampled) &&
+                                        !sampledDismissed
+                                        ? 'top-9'
+                                        : 'top-2'}`, onClick: () => handleSettingsOpenChange(true), children: _jsx(AlertTriangleIcon, { className: "h-4 w-4 text-amber-500 drop-shadow-sm" }) }) }), _jsxs(TooltipContent, { side: "right", children: [_jsx("p", { className: "text-xs font-medium", children: "Missing columns:" }), _jsx("p", { className: "text-xs", children: missingColumns.join(', ') })] })] })), _jsx(DeckJsonMap, { ref: deckMapRef, className: "h-full w-full", spec: mapConfig.spec, datasets: mapConfig
+                            ? createDeckMapDashboardDatasets(mapConfig, datasetStates)
+                            : {}, mapStyle: mapConfig.mapStyle, mapProps: mapConfig.mapProps, showLegends: mapConfig.showLegends, onRenderingError: handleRenderingError, deckProps: {
+                            controller: true,
+                            ...(mapConfig.interaction
+                                ? (mapConfig.interaction.event ?? 'hover') === 'click'
+                                    ? { onClick: handleBrushEvent }
+                                    : { onHover: handleBrushEvent }
+                                : {}),
+                        } })] }))] }));
     return (_jsx("div", { className: "h-full min-h-0", children: _jsx(MosaicDashboardPanelLayout, { isOpen: isSettingsOpen, onIsOpenChange: handleSettingsOpenChange, settings: settingsContent, content: mapContent }) }));
 }
 export const deckMapDashboardPanelRenderer = {
@@ -418,15 +324,18 @@ export const deckMapDashboardAddPanelAction = {
     type: DECK_MAP_DASHBOARD_PANEL_TYPE,
     label: 'Map',
     icon: MapIcon,
-    isEnabled: ({ selectedTable }) => Boolean(findLongitudeLatitudeColumns(selectedTable) ??
-        findGeometryColumn(selectedTable)),
-    createPanel: ({ selectedTable }) => selectedTable
-        ? createDeckMapDashboardPanelConfigForTable({
-            title: `${selectedTable.tableName} map`,
-            tableName: selectedTable.tableName,
-            columns: selectedTable.columns,
-            tableReference: selectedTable.table,
-        })
-        : undefined,
+    createPanel: ({ selectedTable }) => {
+        if (selectedTable &&
+            (findLongitudeLatitudeColumns(selectedTable) ??
+                findGeometryColumn(selectedTable))) {
+            return createDeckMapDashboardPanelConfigForTable({
+                title: `${selectedTable.tableName} map`,
+                tableName: selectedTable.tableName,
+                columns: selectedTable.columns,
+                tableReference: selectedTable.table,
+            });
+        }
+        return createEmptyDeckMapDashboardPanelConfig(selectedTable ? `${selectedTable.tableName} map` : 'Map');
+    },
 };
 //# sourceMappingURL=dashboard.js.map