@prismiq/react 0.1.0 → 0.1.1

package/dist/{chunk-MOAEEF5P.js → chunk-3LDRRDJ6.js}

@@ -1,7 +1,7 @@
-import { ScatterChart, PieChart, AreaChart, LineChart, BarChart, MetricCard } from './chunk-2H5WTH4K.js';
-import { Dropdown, DropdownItem, Icon, DropdownSeparator, Button, Skeleton, EmptyState, Dialog, Input, Checkbox, DialogFooter, useAnalytics, useCrossFilterOptional, useDebouncedLayoutSave, AutoSaveIndicator, ResultsTable, CrossFilterProvider, QueryBuilder, SavedQueryPicker, useSchema, Select, CollapsibleSection, ColorPaletteSelector, FilterBuilder, TableSelector, JoinBuilder, TimeSeriesConfig, CalculatedFieldBuilder } from './chunk-UPYINBZU.js';
+import { ScatterChart, PieChart, AreaChart, LineChart, BarChart, MetricCard } from './chunk-FQ23KG6G.js';
+import { Dropdown, DropdownItem, Icon, DropdownSeparator, Button, Skeleton, EmptyState, Dialog, Input, Checkbox, DialogFooter, useAnalytics, useCrossFilterOptional, useDebouncedLayoutSave, AutoSaveIndicator, ResultsTable, CrossFilterProvider, Tooltip, QueryBuilder, SavedQueryPicker, useSchema, Select, CollapsibleSection, ColorPaletteSelector, FilterBuilder, TableSelector, JoinBuilder, TimeSeriesConfig, CalculatedFieldBuilder } from './chunk-ET7GCREP.js';
 import { useTheme } from './chunk-T6STUE7E.js';
-import { formatRelativeTime, createDateFormatters, pivotQueryResult, parseMarkdownSafe, parseColumnRef } from './chunk-EX74SI67.js';
+import { formatRelativeTime, createDateFormatters, pivotQueryResult, parseMarkdownSafe, parseColumnRef } from './chunk-LBE6GIBC.js';
 import { createContext, forwardRef, useState, useEffect, useCallback, useRef, useMemo, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { WidthProvider, Responsive } from 'react-grid-layout/legacy';
@@ -169,6 +169,7 @@ function DashboardProvider({
   const clientRef = useRef(client);
   clientRef.current = client;
   const loadedDashboardRef = useRef(null);
+  const abortControllerRef = useRef(null);
   const setDashboardData = useCallback((data) => {
     setDashboard(data);
     const defaults = data.filters.filter((f) => f.default_value !== void 0).map((f) => ({
@@ -187,7 +188,7 @@ function DashboardProvider({
     }
   }, []);
   const executeWidgetQuery = useCallback(
-    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false) => {
+    async (widget, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, signal) => {
       if (!widget.query) {
         return;
       }
@@ -207,16 +208,21 @@ function DashboardProvider({
           currentFilters
         );
         query = applyCrossFiltersToQuery(query, currentCrossFilters, widget.id);
-        const result = await client.executeQuery(query, bypassCache);
+        const result = await client.executeQuery(query, bypassCache, signal);
+        if (signal?.aborted) return;
         setWidgetResults((prev) => ({ ...prev, [widget.id]: result }));
         const refreshTime = result.cached_at ?? Date.now() / 1e3;
         setWidgetRefreshTimes((prev) => ({ ...prev, [widget.id]: refreshTime }));
       } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
         setWidgetErrors((prev) => ({
           ...prev,
           [widget.id]: err instanceof Error ? err : new Error("Query failed")
         }));
       } finally {
+        if (signal?.aborted) return;
         setWidgetLoading((prev) => ({ ...prev, [widget.id]: false }));
         if (bypassCache) {
           setRefreshingWidgets((prev) => {
@@ -230,9 +236,10 @@ function DashboardProvider({
     [client]
   );
   const executeWidgetsInBatches = useCallback(
-    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize) => {
+    async (widgets, currentDashboard, currentFilters, currentCrossFilters, bypassCache = false, currentBatchSize = batchSize, signal) => {
       const widgetsWithQueries = widgets.filter((w) => w.query !== null);
       for (let i = 0; i < widgetsWithQueries.length; i += currentBatchSize) {
+        if (signal?.aborted) return;
         const batch = widgetsWithQueries.slice(i, i + currentBatchSize);
         await Promise.all(
           batch.map(
@@ -241,7 +248,8 @@ function DashboardProvider({
               currentDashboard,
               currentFilters,
               currentCrossFilters,
-              bypassCache
+              bypassCache,
+              signal
             )
           )
         );
@@ -253,16 +261,19 @@ function DashboardProvider({
     async (currentDashboard, currentFilters, currentCrossFilters) => {
       const requestId = Math.random().toString(36).substring(2, 11);
       requestIdRef.current = requestId;
+      const signal = abortControllerRef.current?.signal;
       await executeWidgetsInBatches(
         currentDashboard.widgets,
         currentDashboard,
         currentFilters,
         currentCrossFilters,
-        false
+        false,
         // Don't bypass cache on initial load
+        batchSize,
+        signal
       );
     },
-    [executeWidgetsInBatches]
+    [executeWidgetsInBatches, batchSize]
   );
   const refreshDashboard = useCallback(async () => {
     if (!dashboard) return;
@@ -428,13 +439,16 @@ function DashboardProvider({
       (w) => visibleWidgets.has(w.id) && w.query !== null && !widgetResults[w.id] && !widgetLoading[w.id]
     );
     if (widgetsToLoad.length > 0) {
+      const signal = abortControllerRef.current?.signal;
       executeWidgetsInBatches(
         widgetsToLoad,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
         // Don't bypass cache
+        batchSize,
+        signal
       );
     }
   }, [
@@ -446,7 +460,8 @@ function DashboardProvider({
     widgetLoading,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
   const filterValuesKey = JSON.stringify(filterValues);
   const prevFilterValuesRef = useRef(filterValuesKey);
@@ -459,12 +474,17 @@ function DashboardProvider({
       // Only re-execute if previously loaded
     );
     if (widgetsToRefresh.length > 0) {
+      abortControllerRef.current?.abort();
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
       executeWidgetsInBatches(
         widgetsToRefresh,
         dashboard,
         filterValues,
         crossFilters,
-        false
+        false,
+        batchSize,
+        controller.signal
       );
     }
   }, [
@@ -476,8 +496,16 @@ function DashboardProvider({
     widgetResults,
     filterValues,
     crossFilters,
-    executeWidgetsInBatches
+    executeWidgetsInBatches,
+    batchSize
   ]);
+  useEffect(() => {
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    return () => {
+      controller.abort();
+    };
+  }, [dashboardId]);
   const contextValue = useMemo(
     () => ({
       dashboard,
@@ -1450,6 +1478,9 @@ function WidgetContent({
   if (widget.type === "text") {
     return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(TextContent, { config: widget.config }) });
   }
+  if (!result && !error && widget.query) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(LoadingState, {}) });
+  }
   if (!result || result.row_count === 0) {
     return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(EmptyState2, {}) });
   }
@@ -1586,10 +1617,22 @@ function WidgetContent({
         const dimensionColumns = result.columns.filter(
           (col) => col !== widget.config.pivot_column && col !== widget.config.value_column
         );
+        let pivotColumnFormat;
+        if (widget.config.dateFormats?.[widget.config.pivot_column]) {
+          pivotColumnFormat = widget.config.dateFormats[widget.config.pivot_column];
+        } else if (widget.query) {
+          const pivotCol = widget.query.columns.find(
+            (c) => c.alias === widget.config.pivot_column || c.column === widget.config.pivot_column
+          );
+          if (pivotCol?.date_format) {
+            pivotColumnFormat = pivotCol.date_format;
+          }
+        }
         tableResult = pivotQueryResult(result, {
           pivotColumn: widget.config.pivot_column,
           valueColumn: widget.config.value_column,
-          dimensionColumns
+          dimensionColumns,
+          pivotColumnFormat
         });
       }
       const tableContainerStyle = {
@@ -2995,7 +3038,9 @@ function WidgetTypeSelector({
     borderRadius: theme.radius.sm,
     border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
     cursor: "pointer",
-    transition: "all 0.15s ease"
+    transition: "all 0.15s ease",
+    minWidth: 0
+    // Allow grid item to shrink below content width
   });
   const iconStyle = (isSelected) => ({
     width: "28px",
@@ -3022,9 +3067,7 @@ function WidgetTypeSelector({
   const descStyle = {
     fontSize: theme.fontSizes.xs,
     color: theme.colors.textMuted,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    whiteSpace: "nowrap"
   };
   return /* @__PURE__ */ jsxs("div", { className: `prismiq-widget-type-selector ${className}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx("label", { style: labelStyle, children: "Widget Type" }),
@@ -3191,19 +3234,26 @@ function MetricConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialAggregation = query?.columns[0]?.aggregation ?? "count";
-  const initialColumn = query?.columns[0]?.column ?? "*";
+  const rawInitialColumn = query?.columns[0]?.column ?? "*";
+  const needsColumnForInitial = AGGREGATIONS.find((a) => a.value === initialAggregation)?.needsColumn ?? false;
+  const initialColumn = rawInitialColumn === "*" && needsColumnForInitial ? "" : rawInitialColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [aggregation, setAggregation] = useState(initialAggregation);
   const [selectedColumn, setSelectedColumn] = useState(initialColumn);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3218,8 +3268,12 @@ function MetricConfig({
   const needsColumn = useMemo(() => {
     return AGGREGATIONS.find((a) => a.value === aggregation)?.needsColumn ?? false;
   }, [aggregation]);
+  const isValidAggregation = useMemo(() => {
+    return AGGREGATIONS.some((a) => a.value === aggregation);
+  }, [aggregation]);
   useEffect(() => {
     if (!selectedTable) return;
+    if (!isValidAggregation) return;
     const tableId = "t1";
     const tables = [{ id: tableId, name: selectedTable }];
     const column = needsColumn ? selectedColumn : "*";
@@ -3237,7 +3291,7 @@ function MetricConfig({
       filters: filters.length > 0 ? filters : void 0
     };
     onChange(queryDef);
-  }, [selectedTable, aggregation, selectedColumn, needsColumn, filters, onChange]);
+  }, [selectedTable, aggregation, selectedColumn, needsColumn, isValidAggregation, filters, onChange]);
   const handleTableChange = useCallback((value) => {
     setSelectedTable(value);
     setSelectedColumn("");
@@ -3362,17 +3416,23 @@ function ChartConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTables = query?.tables ?? [];
   const groupByCol = query?.columns.find((c) => c.aggregation === "none");
   const initialGroupBy = groupByCol?.column ?? query?.group_by?.[0]?.column ?? "";
   const initialGroupByTableId = groupByCol?.table_id ?? query?.tables?.[0]?.id ?? "t1";
   const initialDateTrunc = groupByCol?.date_trunc ?? "";
-  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => ({
-    // Store as table-qualified ref so parseColumnRef can resolve it correctly
-    column: c.table_id ? `${c.table_id}.${c.column}` : c.column,
-    aggregation: c.aggregation,
-    table_id: c.table_id
-  })) ?? [];
+  const initialMeasures = query?.columns.filter((c) => c.aggregation !== "none").map((c) => {
+    const isStarWithNonCount = (c.column === "*" || c.column.endsWith(".*")) && c.aggregation !== "count";
+    const column = isStarWithNonCount ? "" : c.table_id ? `${c.table_id}.${c.column}` : c.column;
+    return {
+      column,
+      aggregation: c.aggregation,
+      table_id: c.table_id,
+      // Preserve original alias to maintain compatibility with widget config
+      alias: c.alias
+    };
+  }) ?? [];
   const initialJoins = query?.joins ?? [];
   const [tables, setTables] = useState(initialTables);
   const [joins, setJoins] = useState(initialJoins);
@@ -3393,9 +3453,9 @@ function ChartConfig({
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3465,7 +3525,7 @@ function ChartConfig({
         const parsedMeasures = [];
         const invalidColumns = [];
         validMeasures.forEach((m, i) => {
-          const measureAlias = validMeasures.length > 1 ? `value_${i + 1}` : "value";
+          const measureAlias = m.alias ?? (validMeasures.length > 1 ? `value_${i + 1}` : "value");
           if (m.aggregation === "count" && (!m.column || m.column.endsWith(".*") || m.column === "*")) {
             parsedMeasures.push({
               table_id: m.table_id ?? tables[0]?.id ?? "t1",
@@ -3529,6 +3589,9 @@ function ChartConfig({
     setJoins(
       (prev) => prev.filter((j) => tableIds.has(j.from_table_id) && tableIds.has(j.to_table_id))
     );
+    setFilters(
+      (prev) => prev.filter((f) => tableIds.has(f.table_id))
+    );
     if (!tableIds.has(groupByTableId)) {
       setGroupByColumn("");
       setGroupByTableId(newTables[0]?.id ?? "t1");
@@ -3783,25 +3846,31 @@ function PieConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const labelCol = query?.columns.find((c) => c.aggregation === "none");
   const initialLabel = labelCol?.column ?? "";
   const initialDateTrunc = labelCol?.date_trunc ?? "";
   const measureCol = query?.columns.find((c) => c.aggregation !== "none");
-  const initialValueColumn = measureCol?.column ?? "";
+  const rawInitialValueColumn = measureCol?.column ?? "";
   const initialAggregation = measureCol?.aggregation ?? "sum";
+  const initialValueColumn = rawInitialValueColumn === "*" && initialAggregation !== "count" ? "" : rawInitialValueColumn;
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [labelColumn, setLabelColumn] = useState(initialLabel);
   const [dateTrunc, setDateTrunc] = useState(initialDateTrunc);
   const [valueColumn, setValueColumn] = useState(initialValueColumn);
   const [aggregation, setAggregation] = useState(initialAggregation);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -3826,8 +3895,12 @@ function PieConfig({
       label: `${c.name} (${c.data_type})`
     }));
   }, [currentTable]);
+  const isValidAggregation = useMemo(() => {
+    return AGGREGATIONS3.some((a) => a.value === aggregation);
+  }, [aggregation]);
   useEffect(() => {
     if (!selectedTable || !labelColumn) return;
+    if (!isValidAggregation) return;
     const needsValueColumn = aggregation !== "count";
     if (needsValueColumn && !valueColumn) return;
     const tableId = "t1";
@@ -3857,7 +3930,7 @@ function PieConfig({
       order_by: [{ table_id: tableId, column: labelColumn, direction: "ASC" }]
     };
     onChange(queryDef);
-  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, filters, onChange]);
+  }, [selectedTable, labelColumn, dateTrunc, valueColumn, aggregation, isValidAggregation, filters, onChange]);
   const handleTableChange = useCallback((value) => {
     setSelectedTable(value);
     setLabelColumn("");
@@ -3978,18 +4051,23 @@ function TableConfig({
   onChange
 }) {
   const { theme } = useTheme();
+  const { getDisplayName } = useSchema();
   const initialTable = query?.tables[0]?.name ?? "";
   const initialColumns = query?.columns.map((c) => c.column) ?? [];
+  const initialFilters = (query?.filters ?? []).map((f) => ({
+    ...f,
+    table_id: "t1"
+  }));
   const [selectedTable, setSelectedTable] = useState(initialTable);
   const [selectedColumns, setSelectedColumns] = useState(initialColumns);
-  const [filters, setFilters] = useState(query?.filters ?? []);
+  const [filters, setFilters] = useState(initialFilters);
   const [limit, setLimit] = useState(query?.limit ?? 100);
   const tableOptions = useMemo(() => {
     return schema.tables.map((t) => ({
       value: t.name,
-      label: t.name
+      label: getDisplayName(t.name)
     }));
-  }, [schema.tables]);
+  }, [schema.tables, getDisplayName]);
   const currentTable = useMemo(() => {
     return schema.tables.find((t) => t.name === selectedTable);
   }, [schema.tables, selectedTable]);
@@ -5303,7 +5381,7 @@ function WidgetEditorPage({
     widget?.position ?? { x: 0, y: 0, w: 6, h: 4, minW: 2, minH: 2 }
   );
   const [dataSourceMode, setDataSourceMode] = useState(
-    isNew ? "guided" : widget?.dataSourceMode ?? "guided"
+    isNew ? "guided" : widget?.config?.data_source_mode ?? "guided"
   );
   const [previewResult, setPreviewResult] = useState(null);
   const [previewLoading, setPreviewLoading] = useState(false);
@@ -5350,6 +5428,26 @@ function WidgetEditorPage({
       setPreviewError(null);
     }
   }, [query, refreshPreview]);
+  const queryHasAdvancedFeatures = useCallback((q) => {
+    if (!q) return false;
+    if (q.tables && q.tables.length > 1 && q.joins && q.joins.length > 0) return true;
+    if (q.calculated_fields && q.calculated_fields.length > 0) return true;
+    if (q.group_by && q.group_by.length > 0) return true;
+    if (q.order_by && q.order_by.length > 0) return true;
+    if (q.limit != null) return true;
+    if (q.offset != null) return true;
+    if (q.time_series) return true;
+    return false;
+  }, []);
+  const handleModeSwitch = useCallback((newMode) => {
+    if (newMode === "guided" && (dataSourceMode === "advanced" || dataSourceMode === "saved") && queryHasAdvancedFeatures(query)) {
+      const confirmed = window.confirm(
+        "This query uses advanced features (e.g. joins, calculated fields, grouping, sorting, pagination, time series) that Guided mode may not fully represent. The query will be preserved but some settings may not be editable in Guided mode.\n\nSwitch to Guided mode?"
+      );
+      if (!confirmed) return;
+    }
+    setDataSourceMode(newMode);
+  }, [dataSourceMode, query, queryHasAdvancedFeatures]);
   const handleSavedQuerySelect = useCallback((savedQuery) => {
     setQuery(savedQuery.query);
   }, []);
@@ -5366,11 +5464,10 @@ function WidgetEditorPage({
       id: widget?.id ?? generateId(),
       type,
       title,
-      config,
+      config: { ...config, data_source_mode: dataSourceMode },
       query,
       position,
-      hyperlink,
-      dataSourceMode
+      hyperlink
     };
     onSave(savedWidget);
   }, [widget, type, title, config, query, position, hyperlink, dataSourceMode, onSave]);
@@ -5396,7 +5493,8 @@ function WidgetEditorPage({
     justifyContent: "space-between",
     padding: `${theme.spacing.md} ${theme.spacing.lg}`,
     borderBottom: `1px solid ${theme.colors.border}`,
-    backgroundColor: theme.colors.surface
+    backgroundColor: theme.colors.surface,
+    flexShrink: 0
   };
   const headerLeftStyle = {
     display: "flex",
@@ -5427,38 +5525,28 @@ function WidgetEditorPage({
   };
   const bodyStyle = {
     flex: 1,
-    display: "flex",
-    minHeight: 0
+    overflow: "auto",
+    display: "grid",
+    gridTemplateColumns: "360px 1fr"
   };
   const leftPanelStyle = {
-    width: "320px",
-    flexShrink: 0,
     borderRight: `1px solid ${theme.colors.border}`,
-    overflow: "auto",
     padding: theme.spacing.md,
+    paddingBottom: theme.spacing.xl,
     display: "flex",
     flexDirection: "column",
     gap: theme.spacing.lg
   };
   const mainPanelStyle = {
-    flex: 1,
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0
+    minWidth: 0
   };
   const previewPanelStyle = {
-    height: "300px",
-    flexShrink: 0,
-    padding: theme.spacing.md,
-    borderBottom: `1px solid ${theme.colors.border}`
-  };
-  const dataSourcePanelStyle = {
-    flex: "1 1 auto",
-    display: "flex",
-    flexDirection: "column",
-    minHeight: 0,
+    height: "440px",
+    padding: theme.spacing.lg,
+    borderBottom: `1px solid ${theme.colors.border}`,
     overflow: "hidden"
   };
+  const dataSourcePanelStyle = {};
   const dataSourceHeaderStyle = {
     display: "flex",
     alignItems: "center",
@@ -5478,15 +5566,12 @@ function WidgetEditorPage({
     transition: "all 0.15s ease"
   });
   const dataSourceContentStyle = {
-    flex: "1 1 auto",
-    overflow: "auto",
     padding: theme.spacing.md,
-    paddingBottom: "100px",
-    // Extra space to ensure filter buttons are visible
-    minHeight: "250px"
+    paddingBottom: "200px"
+    // Extra padding to create scroll room for filters
   };
   const sectionStyle = {
-    marginBottom: theme.spacing.md
+    // Note: Parent has flex gap for spacing between sections
   };
   const sectionTitleStyle = {
     fontSize: theme.fontSizes.xs,
@@ -5880,30 +5965,39 @@ function WidgetEditorPage({
           /* @__PURE__ */ jsxs("div", { style: dataSourceHeaderStyle, children: [
             /* @__PURE__ */ jsx("span", { style: { fontSize: theme.fontSizes.sm, fontWeight: 500, marginRight: "auto" }, children: "Data Source" }),
             /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                style: tabStyle(dataSourceMode === "guided"),
-                onClick: () => setDataSourceMode("guided"),
-                children: "Guided"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
+              Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "advanced"),
-                onClick: () => setDataSourceMode("advanced"),
-                children: "Advanced"
+                content: "Quick setup: pick columns from dropdowns to build your chart",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-guided",
+                    style: tabStyle(dataSourceMode === "guided"),
+                    onClick: () => handleModeSwitch("guided"),
+                    children: "Guided"
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Tooltip,
               {
-                type: "button",
-                style: tabStyle(dataSourceMode === "saved"),
-                onClick: () => setDataSourceMode("saved"),
-                children: "Saved Query"
+                content: "Full control: combine tables, add filters, and create custom calculations",
+                position: "bottom",
+                style: { whiteSpace: "normal" },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-testid": "data-source-mode-advanced",
+                    style: tabStyle(dataSourceMode === "advanced"),
+                    onClick: () => handleModeSwitch("advanced"),
+                    children: "Advanced"
+                  }
+                )
               }
             )
           ] }),
@@ -7506,5 +7600,5 @@ var DashboardDialog = forwardRef(
 );
 
 export { Dashboard, DashboardCard, DashboardContext, DashboardDialog, DashboardEditor, DashboardLayout, DashboardList, DashboardProvider, DateRangeFilter, EditableDashboardLayout, EditorToolbar, FilterBar, LazyWidget, MultiSelectFilter, SelectFilter, TextFilter, Widget, WidgetContainer, WidgetContent, WidgetEditor, WidgetEditorPage, WidgetHeader, WidgetPalette, WidgetPlaceholder, WidgetPreview, WidgetTypeSelector, useAutoRefresh, useDashboard, useDashboardFilters, useFullscreen, useWidget, useWidgetVisibility };
-//# sourceMappingURL=chunk-MOAEEF5P.js.map
-//# sourceMappingURL=chunk-MOAEEF5P.js.map
+//# sourceMappingURL=chunk-3LDRRDJ6.js.map
+//# sourceMappingURL=chunk-3LDRRDJ6.js.map