@quillsql/react 2.13.7 → 2.13.9

package/dist/esm/ReportBuilder.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
-import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableSQLEditorComponent, } from './components/UiComponents';
+import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableReportBuilderComponent, } from './components/UiComponents';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { CSS as DND_CSS } from '@dnd-kit/utilities';
@@ -21,11 +21,11 @@ import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
 import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
-import { pivotToSql } from './utils/pivotProcessing';
-import { getUniqueValuesByColumns, getDateRangeByColumns, fetchResultsByQuery, getUniqueStringValues, fetchTableByAST, } from './utils/tableProcessing';
-import { fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, getAllPossibleColumns, } from './utils/astProcessing';
+import { getPossiblePivotFieldOptions, isValidPivot, pivotToSql, } from './utils/pivotProcessing';
+import { getUniqueValuesByColumns, getQueryDateRangeByColumns, fetchResultsByQuery, getUniqueStringValues, fetchTableByAST, } from './utils/tableProcessing';
+import { createBasicSelectASTFromColumns, fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, getAllPossibleColumns, } from './utils/astProcessing';
 import PivotForm from './internals/ReportBuilder/PivotForm';
-import { getDateBucketFromRange } from './utils/dates';
+import { getDateBucketFromRange, getDateFormatFromBucket } from './utils/dates';
 import FilterModal from './components/ReportBuilder/FilterModal';
 import { astToFilterTree, filterToAst, filterTreeToAst, } from './utils/astFilterProcessing';
 import useAstToFilterTree from './hooks/useAstToFilterTree';
@@ -67,7 +67,7 @@ import { QUILL_SERVER } from './utils/constants';
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, onCloseChartBuilder = undefined, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableSQLEditorComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, 
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, onCloseChartBuilder = undefined, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableReportBuilderComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, 
 // CheckboxComponent = MemoizedCheckbox,
 SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
     const [dashboard] = useContext(DashboardContext);
@@ -95,10 +95,11 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [openPopover, setOpenPopover] = useState(null);
     const [loading, setLoading] = useState(!!initialTableName);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [isAddLoading, setIsAddLoading] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
     const [dataDisplayed, setDataDisplayed] = useState(false);
     const [rows, setRows] = useState([]);
+    const [filteredRows, setFilteredRows] = useState([]);
+    const [chartBuilderInFilteredPreview, setChartBuilderInFilteredPreview] = useState(true);
     const [formattedRows, setFormattedRows] = useState([]);
     const [columns, setColumns] = useState([]);
     const [tempReport, setTempReport] = useState(EMPTY_INTERNAL_REPORT);
@@ -111,8 +112,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEditingPivot, setIsEditingPivot] = useState(false);
-    const [initialChartLoad, setInitialChartLoad] = useState(false);
     const [askedAQuestion, setAskedAQuestion] = useState(false);
+    const [askAILoading, setAskAILoading] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!reportId);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
@@ -125,9 +126,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [pivotRowField, setPivotRowField] = useState(undefined);
     const [pivotColumnField, setPivotColumnField] = useState(undefined);
     const [pivotValueField, setPivotValueField] = useState(undefined);
+    const [pivotValueField2, setPivotValueField2] = useState(undefined);
     const [pivotAggregation, setPivotAggregation] = useState(undefined);
+    const [pivotHint, setPivotHint] = useState('');
+    /* eslint-disable-next-line */
+    const [pivotError, setPivotError] = useState(undefined);
     const [dateRanges, setDateRanges] = useState(null);
     const [client] = useContext(ClientContext);
+    const [currentOrganizationId, setCurrentOrganizationId] = useState(client.organizationId);
     const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
     const [globalUniqueValues, setGlobalUniqueValues] = useState({});
     const [globalUniqueValuesIsLoading, setGlobalUniqueValuesIsLoading] = useState(false);
@@ -139,6 +145,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         rowsPerPage: 20,
         rowsPerRequest: 1000,
     };
+    const [unresolvedReportMessage, setUnresolvedReportMessage] = useState('');
     useEffect(() => {
         if (!client) {
             return;
@@ -212,6 +219,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         }
         let distinctValuesForQuery = {};
         setPivot(newPivot);
+        setPivotHint('');
         if (newPivot.columnField) {
             distinctValuesForQuery = await getUniqueValuesByColumns([
                 {
@@ -221,11 +229,25 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                 },
             ], activeQuery, [], client, schemaData.customFields ?? []);
         }
-        const pivotedData = await generatePivotTable(newPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, distinctValuesForQuery);
-        setPivotData(pivotedData || []);
-        const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
-        setFormattedRows(formattedRows);
-        setTableLoading(false);
+        try {
+            const pivotedData = await generatePivotTable({
+                pivot: newPivot,
+                dateBucket,
+                report: tempReport,
+                client,
+                uniqueValues: distinctValuesForQuery,
+            });
+            setPivotData(pivotedData || []);
+            const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
+            setFormattedRows(formattedRows);
+        }
+        catch (e) {
+            if (e instanceof Error)
+                setPivotError(e.message);
+        }
+        finally {
+            setTableLoading(false);
+        }
     };
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
@@ -257,11 +279,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setLoading(false);
             setDataDisplayed(false);
             setRows([]);
+            setFilteredRows([]);
             setColumns([]);
             setErrorMessage('');
             setFormattedRows([]);
             // setUniqueValues({});
             setPivot(null);
+            setPivotHint('');
             setPivotData(null);
             setRecommendedPivots([]);
         }, 0);
@@ -281,7 +305,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             uniqueValuesDependenciesRef.current = { client, columns, currentTable };
         }
     }, [client, columns, currentTable, memoizedFetchGlobalUniqueValues]);
-    const formatRows = (rows, columns, pivot, aggregationType) => {
+    const formatRows = (rows, columns, pivot, aggregationType, dateBucket) => {
         const copiedRows = deepCopy(rows);
         if (pivot) {
             const formattedRows = copiedRows.map((row) => {
@@ -297,7 +321,9 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                     }
                     else {
                         format = DATE_FORMAT_TYPES.includes(column.format)
-                            ? 'MMM_yyyy'
+                            ? dateBucket
+                                ? getDateFormatFromBucket(dateBucket)
+                                : 'MMM_yyyy'
                             : 'string';
                     }
                     const formattedValue = quillFormat({
@@ -369,6 +395,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             });
             const data = await response.json();
             setActiveQuery(data.query);
+            fetchFilteredRows(data.query);
             if (fetchData) {
                 fetchReportFromASTHelper(ast, formData);
             }
@@ -389,7 +416,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         const dateColumnNames = dateColumns.map((column) => {
             return column.field;
         });
-        const dateRanges = await getDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, schemaData.customFields ?? []);
+        const dateRanges = await getQueryDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, schemaData.customFields ?? []);
         return dateRanges;
     };
     // It's just like getColumnsInPivot but we expand the columnField
@@ -497,10 +524,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                 setActiveQuery(query);
             }
             catch (err) {
-                setInitialChartLoad(false);
+                console.error(err);
+                setErrorMessage('Error when loading chart');
             }
         };
-        loadChart();
+        if (reportId) {
+            loadChart();
+        }
     }, [dashboard[reportId || '']]);
     useEffect(() => {
         onSchemaChange();
@@ -732,7 +762,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         setPreviousPage(0);
     };
     const onFilterPreviewChange = (preview) => {
-        handleRunQuery(currentProcessing, true, preview);
+        setChartBuilderInFilteredPreview(preview);
+        // handleRunQuery(currentProcessing, true, preview);
     };
     const fetchRowCount = async (processing, includeFilters) => {
         if (!client || !activeQuery) {
@@ -744,6 +775,11 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             : undefined, false, true);
         if (tableInfo.rowCount) {
             setNumberOfRows(tableInfo.rowCount);
+            // @ts-ignore
+            setTempReport((tempReport) => ({
+                ...tempReport,
+                rowCount: tableInfo.rowCount,
+            }));
         }
         setRowCountIsLoading(false);
     };
@@ -752,33 +788,52 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         const tableData = await fetchTableByAST({ ...ast, where }, client, { page: REPORT_BUILDER_PAGINATION }, undefined, false, true);
         if (tableData.rowCount) {
             setNumberOfRows(tableData.rowCount);
+            // @ts-ignore
+            setTempReport((tempReport) => ({
+                ...tempReport,
+                rowCount: tableData.rowCount,
+            }));
         }
         setRowCountIsLoading(false);
     };
+    const fetchFilteredRows = async (query) => {
+        const filteredTableInfo = await fetchResultsByQuery(query, client, currentProcessing, schemaData.customFields, specificDashboardFilters, tempReport.dateField, true);
+        if (filteredTableInfo.error) {
+            throw new Error(filteredTableInfo.error);
+        }
+        setFilteredRows([...filteredRows, ...filteredTableInfo.rows]);
+    };
     const handleRunQuery = async (processing, resetRows = false, includeFilters = false) => {
         try {
             setErrorMessage('');
             setTableLoading(true);
-            const tableInfo = await fetchResultsByQuery(activeQuery, client, processing, schemaData.customFields, includeFilters ? specificDashboardFilters : undefined, includeFilters ? tempReport.dateField : undefined, true);
+            const tableInfo = await fetchResultsByQuery(activeQuery, client, processing, schemaData.customFields, undefined, undefined, true);
+            const filteredTableInfo = await fetchResultsByQuery(activeQuery, client, processing, schemaData.customFields, specificDashboardFilters, tempReport.dateField, true);
             if (tableInfo.error) {
                 throw new Error(tableInfo.error);
             }
+            else if (filteredTableInfo.error) {
+                throw new Error(filteredTableInfo.error);
+            }
             else if (tableInfo.rows.length === 0) {
                 throw new Error('No data found');
             }
             fetchRowCount(processing, includeFilters);
             setCurrentProcessing(processing);
             let tempRows = [...rows, ...tableInfo.rows];
+            let tempFilteredRows = [...filteredRows, ...filteredTableInfo.rows];
             if (resetRows) {
                 tempRows = tableInfo.rows;
+                tempFilteredRows = filteredTableInfo.rows;
             }
             setRows(tempRows);
+            setFilteredRows(tempFilteredRows);
             setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
-            setTempReport({
+            setTempReport((tempReport) => ({
                 ...tempReport,
                 rows: tempRows,
                 rowCount: tableInfo.rowCount ?? tempReport.rowCount,
-            });
+            }));
             setColumns(tableInfo.columns);
             setTableLoading(false);
         }
@@ -786,6 +841,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setTableLoading(false);
             setErrorMessage('Failed to run SQL query: ' + e.message);
             setRows([]);
+            setFilteredRows([]);
             setColumns([]);
             return;
         }
@@ -814,12 +870,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         as: null,
     });
     const updateUniqueValue = (uniqueStrings, table) => {
-        const uniqueStringsObj = {};
+        const uniqueStringsObj = uniqueValues ?? {};
         uniqueStringsObj[table] = uniqueStrings ?? {};
         setUniqueValues(uniqueStringsObj);
         updateFieldValuesMap(uniqueStringsObj, table);
+        return uniqueStringsObj;
     };
-    const fetchReportFromASTHelper = async (baseAst, newFormData, curPivot, curSchema, previousReport) => {
+    const fetchReportFromASTHelper = async (baseAst, newFormData, curPivot, curSchema, previousReport, keepPivotHint = false) => {
         const curFormData = newFormData !== undefined ? newFormData : formData;
         let reportBuilderInfo = undefined;
         try {
@@ -843,6 +900,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setErrorMessage('Failed to fetch');
             return;
         }
+        setTempReport(reportBuilderInfo.report);
         fetchRowCountFromAST(baseAst, curFormData);
         const reportTable = reportBuilderInfo.table;
         const reportBuilderInfoColumns = reportBuilderInfo.columns.map((column) => {
@@ -850,39 +908,105 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         });
         const prevFormData = formData;
         const prevTable = currentTable;
+        const prevOrganization = currentOrganizationId;
         setRows(reportBuilderInfo.rows);
-        setColumns(reportBuilderInfo.columns);
-        // setNumberOfRows(reportBuilderInfo.rowCount);
+        setFilteredRows(reportBuilderInfo.rows);
+        if (!(client.databaseType.toLowerCase() === 'bigquery') ||
+            (reportBuilderInfo.rows && reportBuilderInfo.rows.length > 0)) {
+            setColumns(reportBuilderInfo.columns);
+            setSelectedColumns(reportBuilderInfoColumns);
+        }
+        setNumberOfRows(reportBuilderInfo.rowCount);
         setPivot(reportBuilderInfo.pivot);
+        if (!keepPivotHint) {
+            setPivotHint('');
+        }
         setPivotData(reportBuilderInfo.pivotData);
         setDateRanges(reportBuilderInfo.dateRanges);
         setFormattedRows(reportBuilderInfo.formattedRows);
-        setTempReport(reportBuilderInfo.report);
-        setSelectedColumns(reportBuilderInfoColumns);
-        setLoading(false);
         setDataDisplayed(true);
         setCurrentTable(reportBuilderInfo.table);
+        setCurrentOrganizationId(client.organizationId);
         setFormData(curFormData);
         if (reportBuilderInfo.pivot) {
             setPivotRowField(reportBuilderInfo.pivot.rowField);
             setPivotAggregation(reportBuilderInfo.pivot.aggregationType);
             setPivotColumnField(reportBuilderInfo.pivot.columnField);
             setPivotValueField(reportBuilderInfo.pivot.valueField);
+            setPivotValueField2(reportBuilderInfo.pivot.valueField2);
+        }
+        else {
+            setLoading(false);
         }
         setReportInfo(reportBuilderInfo.report);
         // fetch unique values after everything else since it is the most expensive
         if (prevTable !== reportBuilderInfo.table ||
-            !equal(prevFormData, curFormData)) {
+            !equal(prevFormData, curFormData) ||
+            prevOrganization !== client.organizationId) {
             try {
                 setUniqueValuesIsLoading(true);
+                if (reportBuilderInfo.pivot) {
+                    setUnresolvedReportMessage('Processing pivot selection options...');
+                }
                 const schema = curSchema ?? schemaData.schema;
                 const tableInfo = schema.find((tableInfo) => tableInfo.name === reportBuilderInfo?.table);
                 if (!reportBuilderInfo.table || !tableInfo) {
                     throw new Error('No table found;');
                 }
-                const uniqueStrings = await getUniqueStringValues(tableInfo.columns, reportBuilderInfo.table, client, schemaData.customFields, undefined, true, reportBuilderInfo.query);
-                updateUniqueValue(uniqueStrings, reportBuilderInfo.table);
+                let query = reportBuilderInfo.query;
+                if (!query) {
+                    const queryResult = await fetchSqlQuery({
+                        ...createBasicSelectASTFromColumns(tableInfo.columns, reportBuilderInfo.table),
+                        where: curFormData,
+                    }, curFormData, false);
+                    if (queryResult.error) {
+                        console.error(queryResult.error);
+                    }
+                    else {
+                        query = queryResult.query;
+                    }
+                }
+                const uniqueStrings = await getUniqueStringValues(tableInfo.columns, reportBuilderInfo.table, client, schemaData.customFields, undefined, true, query);
+                const newUnique = updateUniqueValue(uniqueStrings, reportBuilderInfo.table);
+                let pivotChanged = false;
+                let newPivot;
+                if (reportBuilderInfo.pivot &&
+                    !isValidPivotForReport(reportBuilderInfo.pivot, newUnique)) {
+                    // try flipping row and column field
+                    newPivot = {
+                        ...reportBuilderInfo.pivot,
+                        rowField: reportBuilderInfo.pivot.columnField,
+                        columnField: reportBuilderInfo.pivot.rowField,
+                    };
+                    if (isValidPivotForReport(newPivot, newUnique)) {
+                        setPivot(newPivot);
+                        pivotChanged = true;
+                        setPivotHint('Flipped pivot row and column fields to maintain validity');
+                    }
+                    else if (isValidPivotForReport({ ...reportBuilderInfo.pivot, columnField: undefined }, newUnique)) {
+                        // try removing column field
+                        newPivot = {
+                            ...reportBuilderInfo.pivot,
+                            columnField: undefined,
+                        };
+                        setPivot(newPivot);
+                        pivotChanged = true;
+                        setPivotHint('Removed column field to maintain validity');
+                    }
+                    else {
+                        setUnresolvedReportMessage('Not a valid pivot');
+                    }
+                }
+                else {
+                    setUnresolvedReportMessage('');
+                }
                 setUniqueValuesIsLoading(false);
+                if (pivotChanged) {
+                    fetchReportFromASTHelper(baseAst, curFormData, newPivot, curSchema, previousReport, true);
+                }
+                else {
+                    setLoading(false);
+                }
             }
             catch (err) {
                 if (err instanceof Error) {
@@ -905,6 +1029,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         }
         try {
             setLoading(true);
+            setAskAILoading(true);
             astInfo = await fetchAndProcessASTFromPrompt(prompt, schemaData.schema, client, pivot, activeQuery);
             if (astInfo.error) {
                 throw new Error(astInfo.error);
@@ -913,10 +1038,16 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         catch (err) {
             if (err instanceof Error) {
                 setErrorMessage(err.message);
-                setLoading(false);
             }
+            setLoading(false);
+            setAskAILoading(false);
             return;
         }
+        // check if pivot works with ReportBuilder constraints
+        if (astInfo.pivot && !isValidPivotForReport(astInfo.pivot)) {
+            astInfo.pivot = null;
+            astInfo.ast.groupby = null;
+        }
         // parse the whereAst first
         const filterTree = astToFilterTree(astInfo.whereAST, client.databaseType?.toLowerCase());
         const cleanAst = filterTree
@@ -926,8 +1057,34 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         astInfo.ast.where = cleanAst;
         setBaseAst(astInfo.ast);
         fetchSqlQuery(astInfo.ast, cleanAst, false);
+        setAskAILoading(false);
         await fetchReportFromASTHelper(astInfo.ast, cleanAst, astInfo.pivot);
     };
+    const isValidPivotForReport = (pivot, uniqueValuesForPivot) => {
+        if (!isValidPivot) {
+            return false;
+        }
+        const uniqueValuesToCheck = uniqueValuesForPivot ?? uniqueValues;
+        // check that pivot rows and columns
+        const possibleOptions = getPossiblePivotFieldOptions(columns, uniqueValuesToCheck[currentTable] ?? {});
+        if (pivot.rowField &&
+            pivot.columnField &&
+            pivot.rowField === pivot.columnField) {
+            return false;
+        }
+        if (pivot.rowField && !possibleOptions.rowFields.includes(pivot.rowField)) {
+            return false;
+        }
+        if (pivot.columnField &&
+            !possibleOptions.columnFields.includes(pivot.columnField)) {
+            return false;
+        }
+        if (pivot.valueField &&
+            !possibleOptions.valueFields.includes(pivot.valueField)) {
+            return false;
+        }
+        return true;
+    };
     const handleDeleteColumn = (name) => {
         if (!baseAst || !baseAst.columns.length || selectedColumns.length === 1) {
             clearAllState();
@@ -960,7 +1117,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         };
         return (_jsx("div", { style: { ...style }, ref: setNodeRef, children: _jsx(DraggableColumnComponent, { label: snakeAndCamelCaseToTitleCase(label), onDelete: onDelete, DragHandle: (props) => (_jsx("div", { style: {
                         cursor: 'grab',
-                    }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })), deleteDisabled: loading }) }));
+                    }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })), deleteDisabled: loading || tableLoading }) }));
     };
     function DraggableColumns() {
         const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
@@ -1037,240 +1194,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => !loading && handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
     }
-    // TODO: Refactor this part
-    if (loading || initialChartLoad) {
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                height: '100%',
-                ...containerStyle,
-            }, className: className, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                        if (!openPopover) {
-                                            setOpenPopover('AddColumnModal');
-                                        }
-                                    }, label: 'Select columns', disabled: true }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
-                                        if (!isOpen) {
-                                            // delay onClose callback so onClick no-ops
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                                setActivePath(null);
-                                                setOpenPopover(null);
-                                            }, 100);
-                                        }
-                                    }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
-                                            setBaseAst(ast);
-                                            fetchSqlQuery(ast);
-                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInputComponent: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 8,
-                                        marginBottom: 12,
-                                    }, children: _jsx(FilterStack, { client: client, filterStack: filterStack, filterTree: filterTree, defaultAST: defaultAST, baseAst: baseAst, setBaseAst: setBaseAst, setFormData: setFormData, fetchSqlQuery: fetchSqlQuery, schemaData: schemaData, defaultColumn: defaultColumn, defaultTable: defaultTable, currentTable: currentTable, initialTableName: initialTableName, globalUniqueValues: globalUniqueValues, globalUniqueValuesIsLoading: globalUniqueValuesIsLoading, columns: columns, removingFilter: removingFilter, setRemovingFilter: setRemovingFilter, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: false }) })), _jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'flex-start',
-                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                if (!selectedColumns ||
-                                                    selectedColumns.length === 0 ||
-                                                    loading) {
-                                                    return;
-                                                }
-                                                if (!openPopover) {
-                                                    const value = orderedColumnNames[0];
-                                                    const column = value.split('.')[1];
-                                                    const columnType = getColumnTypeByName(column);
-                                                    if (isNumericColumnType(columnType)) {
-                                                        const newSubtree = deepCopy(defaultNumericComparison);
-                                                        newSubtree.left.column = column;
-                                                        setActiveEditItem(newSubtree);
-                                                    }
-                                                    else {
-                                                        const newSubtree = deepCopy(defaultEntry);
-                                                        newSubtree.left.args.value[0].column = column;
-                                                        setActiveEditItem(newSubtree);
-                                                    }
-                                                    setOpenPopover('AddFilterPopover');
-                                                    setActivePath('');
-                                                }
-                                            }, label: 'Add filter', disabled: true }), _jsx("div", { style: {
-                                                position: 'relative',
-                                                ...(openPopover === 'AddFilterPopover' && { top: 12 }),
-                                            }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
-                                                    if (!isOpen) {
-                                                        setActivePath(null);
-                                                        setOpenPopover(null);
-                                                        setTimeout(() => {
-                                                            clearCheckboxes();
-                                                            setActiveEditItem(null);
-                                                        }, 300);
-                                                    }
-                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(FilterModal, { schema: schemaData.schema.find((s) => s.name === currentTable ||
-                                                        s.displayName === currentTable) ?? schemaData.schema[0], fieldValuesMap: uniqueValues[getTableNames(baseAst).length === 1
-                                                        ? getTableNames(baseAst)[0]
-                                                        : initialTableName], fieldValuesMapIsLoading: uniqueValuesIsLoading, onSubmitFilter: (filter) => {
-                                                        setOpenPopover(null);
-                                                        const item = filterToAst(filter, client.databaseType.toLowerCase());
-                                                        handleInsertion(item, 'AND', false);
-                                                    }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, SecondaryButtonComponent: SecondaryButtonComponent, MultiSelectComponent: MultiSelectComponent }) }) })] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                                        setPivot(null);
-                                        setPivotData(null);
-                                        const formattedRows = formatRows(rows, columns, false);
-                                        setFormattedRows(formattedRows);
-                                    }, 
-                                    // TODOs
-                                    selectPivot: () => {
-                                        return;
-                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: true, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, report: tempReport ?? reportInfo }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, setPivotRowField: (value) => {
-                                        setPivotRowField(value);
-                                    }, setPivotColumnField: setPivotColumnField, setPivotValueField: setPivotValueField, setPivotAggregation: setPivotAggregation, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, onDelete: () => {
-                                        setPivot(null);
-                                        setPivotData([]);
-                                        const formattedRows = formatRows(rows, columns, false);
-                                        setFormattedRows(formattedRows);
-                                    }, isLoading: tableLoading, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 8,
-                                        marginBottom: 12,
-                                    }, children: _jsx(SortSentence, { sortData: {
-                                            type: pivot.sortDirection,
-                                            expr: { type: 'column_ref', column: pivot.sortField },
-                                        }, columns: selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                            setPivot({ ...pivot, sort: false });
-                                            setBaseAst(deepCopy(baseAst));
-                                            if (!pivot) {
-                                                fetchSqlQuery(baseAst);
-                                            }
-                                        }, onSave: (column, direction) => {
-                                            const sortFieldType = column === (pivot.valueField || 'count')
-                                                ? 'number'
-                                                : pivot.rowFieldType;
-                                            setPivot({
-                                                ...pivot,
-                                                sort: true,
-                                                sortDirection: direction,
-                                                sortField: column,
-                                                sortFieldType: sortFieldType,
-                                            });
-                                            setOpenPopover(null);
-                                            setBaseAst(deepCopy(baseAst));
-                                            if (!pivot) {
-                                                fetchSqlQuery(baseAst);
-                                            }
-                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 8,
-                                        marginBottom: 12,
-                                    }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
-                                            setActiveEditItem(null);
-                                            setOpenPopover(null);
-                                            if (column === '')
-                                                return;
-                                            const newAst = { ...baseAst };
-                                            newAst.orderby[id] = {
-                                                expr: {
-                                                    type: 'column_ref',
-                                                    table: null,
-                                                    column: column,
-                                                },
-                                                type: direction,
-                                            };
-                                            // look through the columns
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            setBaseAst(deepCopy(newAst));
-                                            if (!pivot) {
-                                                fetchSqlQuery(newAst);
-                                            }
-                                        }, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                            const newAst = { ...baseAst };
-                                            newAst.orderby.splice(id, 1);
-                                            setBaseAst(deepCopy(newAst));
-                                            if (!pivot) {
-                                                fetchSqlQuery(newAst);
-                                            }
-                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: true }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                        if (!selectedColumns ||
-                                            selectedColumns.length === 0 ||
-                                            loading) {
-                                            return;
-                                        }
-                                        if (!openPopover) {
-                                            setOpenPopover('AddSortPopover');
-                                        }
-                                    }, label: "Add sort", disabled: true }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                                        if (!isOpen) {
-                                            setActiveEditItem(null);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                        }
-                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? (_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: 8,
-                                        marginBottom: 12,
-                                    }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
-                                            const newAst = { ...baseAst };
-                                            newAst.limit = null;
-                                            setBaseAst(deepCopy(newAst));
-                                            fetchSqlQuery(newAst);
-                                        }, onSave: (limit) => {
-                                            const newAst = { ...baseAst };
-                                            newAst.limit = {
-                                                seperator: '',
-                                                value: [
-                                                    {
-                                                        type: 'number',
-                                                        value: limit,
-                                                    },
-                                                ],
-                                            };
-                                            setOpenPopover(null);
-                                            setBaseAst(deepCopy(newAst));
-                                            fetchSqlQuery(newAst);
-                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: true }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                                if (!selectedColumns ||
-                                                    selectedColumns.length === 0 ||
-                                                    loading) {
-                                                    return;
-                                                }
-                                                if (!openPopover) {
-                                                    setOpenPopover('AddLimitPopover');
-                                                }
-                                            }, label: 'Add limit', disabled: true }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
-                                                if (!isOpen) {
-                                                    setActiveEditItem(null);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                }
-                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: () => { } }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
-                                event.preventDefault();
-                            }, style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                gap: 12,
-                                visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
-                                    ? 'hidden'
-                                    : 'visible',
-                            }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: askedAQuestion
-                                            ? 'Ask a follow-up question...'
-                                            : 'Ask a question...', width: askAIInputWidth !== -1
-                                            ? askAIInputWidth
-                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
-                                        initialLoad ||
-                                        initialChartLoad) &&
-                                        !reportId && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initialChartLoad && (_jsxs("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        gap: '12px',
-                                        marginTop: 'auto',
-                                    }, children: [_jsx("div", { style: { width: '100%' } }), onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { onClick: () => copySQLToClipboard(), label: isCopying ? 'Copied' : 'Copy SQL' })), _jsx(ButtonComponent, { label: reportInfo ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
-    }
     return (_jsxs("div", { style: { backgroundColor: theme?.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsxs("div", { ref: parentRef, style: {
                     display: 'flex',
@@ -1286,7 +1209,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             if (!openPopover) {
                                                 setOpenPopover('AddColumnModal');
                                             }
-                                        }, label: "Select columns" }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                        }, label: "Select columns", disabled: tableLoading || loading }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                             if (!isOpen) {
                                                 // delay onClose callback so onClick no-ops
                                                 setTimeout(() => {
@@ -1300,18 +1223,32 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 setActivePath(null);
                                                 setOpenPopover(null);
                                             }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
-                                                setBaseAst(ast);
-                                                fetchSqlQuery(ast);
+                                                if (baseAst &&
+                                                    ast?.from?.[0]?.table !== baseAst?.from?.[0]?.table) {
+                                                    // table changed, past presets no longer valid
+                                                    setFormData(null);
+                                                    setRecommendedPivots([]);
+                                                    setCreatedPivots([]);
+                                                    ast.where = null;
+                                                    ast.orderby = null;
+                                                    ast.limit = null;
+                                                    setBaseAst(ast);
+                                                    fetchSqlQuery(ast, null);
+                                                }
+                                                else {
+                                                    setBaseAst(ast);
+                                                    fetchSqlQuery(ast);
+                                                }
                                             }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, schemaLoading: schemaData.isSchemaLoading, setPivot: setPivot, TextInputComponent: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: _jsx(FilterStack, { client: client, filterStack: filterStack, filterTree: filterTree, defaultAST: defaultAST, baseAst: baseAst, setBaseAst: setBaseAst, setFormData: setFormData, fetchSqlQuery: fetchSqlQuery, schemaData: schemaData, defaultColumn: defaultColumn, defaultTable: defaultTable, currentTable: currentTable, initialTableName: initialTableName, globalUniqueValues: globalUniqueValues, globalUniqueValuesIsLoading: globalUniqueValuesIsLoading, columns: columns, removingFilter: removingFilter, setRemovingFilter: setRemovingFilter, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: true }) })), _jsxs("div", { style: {
+                                        }, children: _jsx(FilterStack, { client: client, filterStack: filterStack, filterTree: filterTree, defaultAST: defaultAST, baseAst: baseAst, setBaseAst: setBaseAst, setFormData: setFormData, fetchSqlQuery: fetchSqlQuery, schemaData: schemaData, defaultColumn: defaultColumn, defaultTable: defaultTable, currentTable: currentTable, initialTableName: initialTableName, globalUniqueValues: globalUniqueValues, globalUniqueValuesIsLoading: globalUniqueValuesIsLoading, columns: columns, removingFilter: removingFilter, setRemovingFilter: setRemovingFilter, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: !tableLoading && !loading }) })), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'flex-start',
-                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
                                                     if (!selectedColumns ||
                                                         selectedColumns.length === 0 ||
                                                         loading) {
@@ -1352,8 +1289,9 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                             setOpenPopover(null);
                                                             const item = filterToAst(filter, client.databaseType.toLowerCase());
                                                             handleInsertion(item, 'AND', false);
-                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent }) }) })] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent }) }) })] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, pivotValueField2: pivotValueField2, setPivotValueField: setPivotValueField, setPivotValueField2: setPivotValueField2, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                             setPivot(null);
+                                            setPivotHint('');
                                             setPivotData(null);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
@@ -1372,17 +1310,32 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 dateBucket = getDateBucketFromRange(dateRange);
                                             }
                                             setPivot(selectedPivot);
-                                            if (!pivotTable) {
-                                                setTableLoading(true);
-                                                pivotTable = await generatePivotTable(selectedPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
+                                            setPivotHint('');
+                                            try {
+                                                if (!pivotTable) {
+                                                    setTableLoading(true);
+                                                    pivotTable = await generatePivotTable({
+                                                        pivot: selectedPivot,
+                                                        dateBucket,
+                                                        report: tempReport,
+                                                        client,
+                                                        uniqueValues,
+                                                    });
+                                                }
+                                                setPivotData(pivotTable || []);
+                                                const formattedRows = formatRows(pivotTable.rows, columns, true, selectedPivot.aggregationType, dateBucket);
+                                                setFormattedRows(formattedRows);
+                                                setErrorMessage('');
+                                                setPivotError(undefined);
                                             }
-                                            // no other calls made
-                                            setPivotData(pivotTable || []);
-                                            const formattedRows = formatRows(pivotTable.rows, columns, true, selectedPivot.aggregationType);
-                                            setFormattedRows(formattedRows);
-                                            setErrorMessage('');
-                                            setTableLoading(false); // only set to false if this was the final call
-                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, disabled: !baseAst || !dataDisplayed || tableLoading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, report: tempReport }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, setPivotRowField: (value) => {
+                                            catch (e) {
+                                                if (e instanceof Error)
+                                                    setPivotError(e.message);
+                                            }
+                                            finally {
+                                                setTableLoading(false);
+                                            }
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, disabled: !baseAst || !dataDisplayed || tableLoading || loading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, report: tempReport }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, setPivotRowField: (value) => {
                                             setPivotRowField(value);
                                             updatePivot(value, 'rowField');
                                         }, setPivotColumnField: (value) => {
@@ -1391,15 +1344,19 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         }, setPivotValueField: (value) => {
                                             setPivotValueField(value);
                                             updatePivot(value, 'valueField');
+                                        }, setPivotValueField2: (value) => {
+                                            setPivotValueField2(value);
+                                            updatePivot(value, 'valueField2');
                                         }, setPivotAggregation: (value) => {
                                             setPivotAggregation(value);
                                             updatePivot(value, 'aggregationType');
                                         }, onDelete: () => {
                                             setPivot(null);
+                                            setPivotHint('');
                                             setPivotData([]);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, isLoading: tableLoading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                        }, isLoading: tableLoading || loading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotValueField2: pivotValueField2, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer, pivotHint: pivotHint }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
@@ -1415,56 +1372,87 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                         `.${pivot.valueField || 'count'}`,
                                                     ]
                                                 : selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
-                                                if (pivot) {
-                                                    const tempPivot = { ...pivot, sort: false };
-                                                    let dateBucket = undefined;
-                                                    const tempDateRange = dateRanges &&
-                                                        pivot.rowField &&
-                                                        dateRanges[pivot.rowField];
-                                                    if (tempDateRange) {
-                                                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
-                                                    }
-                                                    setPivot(tempPivot);
-                                                    const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
+                                                if (!pivot) {
+                                                    setBaseAst(deepCopy(baseAst));
+                                                    fetchSqlQuery(deepCopy(baseAst));
+                                                    return;
+                                                }
+                                                const tempPivot = { ...pivot, sort: false };
+                                                let dateBucket = undefined;
+                                                const tempDateRange = dateRanges &&
+                                                    pivot.rowField &&
+                                                    dateRanges[pivot.rowField];
+                                                if (tempDateRange) {
+                                                    dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                                                }
+                                                setPivot(tempPivot);
+                                                setPivotHint('');
+                                                try {
+                                                    const pivotedData = await generatePivotTable({
+                                                        pivot: tempPivot,
+                                                        rowLimit: -1,
+                                                        dateBucket,
+                                                        report: tempReport,
+                                                        client,
+                                                        uniqueValues: uniqueValues[currentTable],
+                                                    });
                                                     setPivotData(pivotedData || []);
-                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
                                                     setFormattedRows(formattedRows);
                                                     setErrorMessage('');
-                                                    return;
                                                 }
-                                                setBaseAst(deepCopy(baseAst));
-                                                fetchSqlQuery(deepCopy(baseAst));
+                                                catch (e) {
+                                                    if (e instanceof Error)
+                                                        setPivotError(e.message);
+                                                }
+                                                finally {
+                                                    setTableLoading(false);
+                                                }
                                             }, onSave: async (column, direction) => {
-                                                if (pivot) {
-                                                    const sortFieldType = column === (pivot.valueField || 'count')
-                                                        ? 'number'
-                                                        : pivot.rowFieldType;
-                                                    const tempPivot = {
-                                                        ...pivot,
-                                                        sort: true,
-                                                        sortDirection: direction,
-                                                        sortField: column,
-                                                        sortFieldType: sortFieldType,
-                                                    };
-                                                    setPivot(tempPivot);
-                                                    let dateBucket = undefined;
-                                                    const tempDateRange = dateRanges &&
-                                                        pivot.rowField &&
-                                                        dateRanges[pivot.rowField];
-                                                    if (tempDateRange) {
-                                                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
-                                                    }
-                                                    const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
+                                                if (!pivot) {
+                                                    setOpenPopover(null);
+                                                    setBaseAst(deepCopy(baseAst));
+                                                    fetchSqlQuery(deepCopy(baseAst));
+                                                    return;
+                                                }
+                                                const sortFieldType = column === (pivot.valueField || 'count')
+                                                    ? 'number'
+                                                    : pivot.rowFieldType;
+                                                const tempPivot = {
+                                                    ...pivot,
+                                                    sort: true,
+                                                    sortDirection: direction,
+                                                    sortField: column,
+                                                    sortFieldType: sortFieldType,
+                                                };
+                                                setPivot(tempPivot);
+                                                setPivotHint('');
+                                                let dateBucket = undefined;
+                                                const tempDateRange = dateRanges &&
+                                                    pivot.rowField &&
+                                                    dateRanges[pivot.rowField];
+                                                if (tempDateRange) {
+                                                    dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                                                }
+                                                try {
+                                                    const pivotedData = await generatePivotTable({
+                                                        pivot: tempPivot,
+                                                        rowLimit: -1,
+                                                        dateBucket,
+                                                        report: tempReport,
+                                                        client,
+                                                        uniqueValues: uniqueValues[currentTable],
+                                                    });
                                                     setPivotData(pivotedData || []);
-                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
                                                     setFormattedRows(formattedRows);
                                                     setErrorMessage('');
-                                                    return;
                                                 }
-                                                setOpenPopover(null);
-                                                setBaseAst(deepCopy(baseAst));
-                                                fetchSqlQuery(deepCopy(baseAst));
-                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                                catch (e) {
+                                                    if (e instanceof Error)
+                                                        setPivotError(e.message);
+                                                }
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
@@ -1472,6 +1460,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                                 if (pivot) {
                                                     setPivot({ ...pivot, sort: false });
+                                                    setPivotHint('');
                                                     return;
                                                 }
                                                 const newAst = { ...baseAst };
@@ -1490,6 +1479,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                         sortField: column,
                                                         sortFieldType: sortFieldType,
                                                     });
+                                                    setPivotHint('');
                                                     return;
                                                 }
                                                 setActiveEditItem(null);
@@ -1510,7 +1500,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 setOpenPopover(null);
                                                 setBaseAst(deepCopy(newAst));
                                                 fetchSqlQuery(deepCopy(newAst));
-                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
                                             if (!selectedColumns || selectedColumns.length === 0) {
                                                 return;
                                             }
@@ -1548,6 +1538,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                             sortFieldType: sortFieldType,
                                                         };
                                                         setPivot(tempPivot);
+                                                        setPivotHint('');
                                                         let dateBucket = undefined;
                                                         const tempDateRange = dateRanges &&
                                                             pivot.rowField &&
@@ -1555,11 +1546,23 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                         if (tempDateRange) {
                                                             dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
                                                         }
-                                                        const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
-                                                        setErrorMessage('');
-                                                        setPivotData(pivotedData || []);
-                                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
-                                                        setFormattedRows(formattedRows);
+                                                        try {
+                                                            const pivotedData = await generatePivotTable({
+                                                                pivot: tempPivot,
+                                                                dateBucket,
+                                                                report: tempReport,
+                                                                client,
+                                                                uniqueValues: uniqueValues[currentTable],
+                                                            });
+                                                            setErrorMessage('');
+                                                            setPivotData(pivotedData || []);
+                                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
+                                                            setFormattedRows(formattedRows);
+                                                        }
+                                                        catch (e) {
+                                                            if (e instanceof Error)
+                                                                setPivotError(e.message);
+                                                        }
                                                         setActivePath(null);
                                                         setOpenPopover(null);
                                                         setBaseAst(deepCopy(baseAst));
@@ -1601,7 +1604,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 setOpenPopover(null);
                                                 setBaseAst(deepCopy(newAst));
                                                 fetchSqlQuery(deepCopy(newAst));
-                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
                                                     if (!selectedColumns || selectedColumns.length === 0) {
                                                         return;
                                                     }
@@ -1649,10 +1652,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 ? 'Ask a follow-up question...'
                                                 : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: () => {
                                                 fetchAstFromPromptHelper();
-                                            }, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && !reportId && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: !isAddLoading &&
-                                    (tableLoading ||
-                                        (loading && errorMessage.length === 0) ||
-                                        initialChartLoad), rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
+                                            }, isLoading: askAILoading && !baseAst, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && !reportId && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: tableLoading || (loading && errorMessage.length === 0), rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
@@ -1676,13 +1676,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             alignItems: 'center',
                                         }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: () => {
                                                     fetchAstFromPromptHelper();
-                                                }, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initialChartLoad && (_jsxs(_Fragment, { children: [onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: async () => {
-                                                    setIsAddLoading(true);
-                                                    await handleRunQuery(currentProcessing, true);
-                                                    setIsAddLoading(false);
+                                                }, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && (_jsxs(_Fragment, { children: [onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: async () => {
                                                     onSaveChanges && onSaveChanges();
                                                     setIsChartBuilderOpen(true);
-                                                }, disabled: !!errorMessage, label: reportId ? 'Save changes' : 'Add to dashboard', isLoading: isAddLoading })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: reportInfo
+                                                }, disabled: !!errorMessage ||
+                                                    tableLoading ||
+                                                    loading ||
+                                                    unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: reportInfo
                     ? {
                         ...reportInfo,
                         ...tempReport,
@@ -1700,5 +1700,5 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                     : {
                         ...tempReport,
                         filtersApplied: specificDashboardFilters,
-                    }, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, isAdmin: isAdminEnabled, title: reportId ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], initialUniqueValuesIsLoading: uniqueValuesIsLoading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, onFilterPreviewChange: onFilterPreviewChange, isLoading: tableLoading || isAddLoading, isEditingMode: true }))] }));
+                    }, rows: chartBuilderInFilteredPreview ? filteredRows : rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, isAdmin: isAdminEnabled, title: reportId ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], initialUniqueValuesIsLoading: uniqueValuesIsLoading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, onFilterPreviewChange: onFilterPreviewChange, isLoading: tableLoading, isEditingMode: true }))] }));
 }