@quillsql/react 2.12.52 → 2.13.0

package/dist/esm/ReportBuilder.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { DEFAULT_TAB_OPTIONS, MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableSQLEditorComponent, } 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';
-import { ClientContext, DashboardContext, SchemaDataContext, ThemeContext, } from './Context';
+import { ClientContext, DashboardContext, DashboardFiltersContext, SchemaDataContext, ThemeContext, } from './Context';
 import { getTableNames, isNumericColumnType, } from './components/ReportBuilder/ast';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
@@ -22,7 +22,7 @@ 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, fetchTableByQuery, getUniqueStringValues, } from './utils/tableProcessing';
+import { getUniqueValuesByColumns, getDateRangeByColumns, fetchResultsByQuery, getUniqueStringValues, fetchTableByAST, } from './utils/tableProcessing';
 import { fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, getAllPossibleColumns, } from './utils/astProcessing';
 import PivotForm from './internals/ReportBuilder/PivotForm';
 import { getDateBucketFromRange } from './utils/dates';
@@ -31,7 +31,7 @@ import { astToFilterTree, filterToAst, filterTreeToAst, } from './utils/astFilte
 import useAstToFilterTree from './hooks/useAstToFilterTree';
 import { filterSentence, filterStackToFilterTree, uniqueValuesToStringMap, } from './utils/filterProcessing';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
-import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { shouldFetchMore, shouldSortInMemory, } from './utils/paginationProcessing';
 import { EMPTY_INTERNAL_REPORT, fetchReportBuilderDataFromAST, formatRowsFromReport, } from './utils/report';
 import equal from 'fast-deep-equal';
 export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SERVER_HOST) ||
@@ -67,11 +67,20 @@ export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUI
  * ### 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, 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 = QuillTableSQLEditorComponent, 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);
     const [schemaData] = useContext(SchemaDataContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const specificDashboardFilters = useMemo(() => {
+        if (!reportId)
+            return [];
+        const dashboardName = dashboard[reportId]?.dashboardName;
+        if (!dashboardName)
+            return [];
+        return Object.values(dashboardFilters[dashboardName] ?? {}).map((f) => f.filter);
+    }, [dashboardFilters, reportId, dashboard]);
     const [reportInfo, setReportInfo] = useState(null);
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
@@ -86,7 +95,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [openPopover, setOpenPopover] = useState(null);
     const [loading, setLoading] = useState(!!initialTableName);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [, setIsPending] = useState(false);
+    const [isAddLoading, setIsAddLoading] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
     const [dataDisplayed, setDataDisplayed] = useState(false);
     const [rows, setRows] = useState([]);
@@ -94,6 +103,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [columns, setColumns] = useState([]);
     const [tempReport, setTempReport] = useState(EMPTY_INTERNAL_REPORT);
     const [uniqueValues, setUniqueValues] = useState({});
+    const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState(false);
     const [pivot, setPivot] = useState(null);
     const [pivotData, setPivotData] = useState(null);
     const [createdPivots, setCreatedPivots] = useState([]);
@@ -118,18 +128,23 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [pivotAggregation, setPivotAggregation] = useState(undefined);
     const [dateRanges, setDateRanges] = useState(null);
     const [client] = useContext(ClientContext);
-    // JANK: This is temp and stupid
-    const [overrideRecommendations, setOverrideRecommendations] = useState(true);
     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);
     const { filterTree, filterStack } = useAstToFilterTree(formData, client); // Stores the state of filters
     const [removingFilter, setRemovingFilter] = useState(false);
+    const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = useState(pivotRecommendationsEnabled);
+    const REPORT_BUILDER_PAGINATION = {
+        page: 0,
+        rowsPerPage: 20,
+        rowsPerRequest: 1000,
+    };
     useEffect(() => {
         if (!client) {
             return;
         }
-        if (client.publicKey === '663416663aa9bc716e59a89d') {
-            setOverrideRecommendations(false);
+        if (client.recommendedPivotsDisabled !== undefined) {
+            setPivotRecommendationsEnabledState(!client.recommendedPivotsDisabled);
         }
         if (!initialLoad && client.publicKey) {
             clearAllState();
@@ -139,13 +154,18 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
         updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
     }, [dataDisplayed]);
+    useEffect(() => {
+        if (isChartBuilderOpen === false) {
+            onCloseChartBuilder && onCloseChartBuilder();
+        }
+    }, [isChartBuilderOpen]);
     // Whenever unique values changes, update the fieldValuesMap, used in FilterModals
-    const updateFieldValuesMap = (curUnqiueValues, tableName) => {
+    const updateFieldValuesMap = (curUniqueValues, tableName) => {
         const newFieldValues = {};
-        if (curUnqiueValues[tableName]) {
-            for (const field of Object.keys(curUnqiueValues[tableName])) {
+        if (curUniqueValues[tableName]) {
+            for (const field of Object.keys(curUniqueValues[tableName])) {
                 newFieldValues[field] = [];
-                for (const value of Object.keys(curUnqiueValues[tableName][field])) {
+                for (const value of Object.keys(curUniqueValues[tableName][field])) {
                     newFieldValues[field]?.push(value);
                 }
             }
@@ -166,7 +186,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         };
     }, []);
     const updatePivot = async (changeField, fieldKey) => {
-        const newPivot = pivot;
+        const newPivot = deepCopy(pivot);
         setTableLoading(true);
         // @ts-ignore
         newPivot[fieldKey] = changeField;
@@ -191,19 +211,19 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
         }
         let distinctValuesForQuery = {};
-        if (pivot.columnField) {
+        setPivot(newPivot);
+        if (newPivot.columnField) {
             distinctValuesForQuery = await getUniqueValuesByColumns([
                 {
-                    field: pivot.columnField,
-                    label: pivot.columnField,
+                    field: newPivot.columnField,
+                    label: newPivot.columnField,
                     format: 'string',
                 },
             ], activeQuery, [], client, schemaData.customFields ?? []);
         }
-        const pivotedData = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, distinctValuesForQuery);
+        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);
-        setPivot(newPivot);
         setFormattedRows(formattedRows);
         setTableLoading(false);
     };
@@ -235,7 +255,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setActivePath(null);
             setOpenPopover(null);
             setLoading(false);
-            setIsPending(false);
             setDataDisplayed(false);
             setRows([]);
             setColumns([]);
@@ -248,8 +267,10 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         }, 0);
     };
     const fetchGlobalUniqueValues = async (columns, currentTable, client) => {
-        const global = await getUniqueStringValues(columns, currentTable, client);
+        setGlobalUniqueValuesIsLoading(true);
+        const global = await getUniqueStringValues(columns, currentTable, client, schemaData.customFields, undefined, true);
         setGlobalUniqueValues(uniqueValuesToStringMap(global));
+        setGlobalUniqueValuesIsLoading(false);
     };
     const uniqueValuesDependenciesRef = useRef({ client, columns, currentTable });
     const memoizedFetchGlobalUniqueValues = useCallback(fetchGlobalUniqueValues, []);
@@ -397,11 +418,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         setLoading(true);
         const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
         if (tableInfo) {
-            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName, client, schemaData.customFields, uniqueValues);
+            setUniqueValuesIsLoading(true);
+            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName, client, schemaData.customFields, uniqueValues, true);
             if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
                 setUniqueValues(newUniqueValues);
                 updateFieldValuesMap(newUniqueValues, initialTableName);
             }
+            setUniqueValuesIsLoading(false);
             const dateRangesTemp = await getDateRanges(tableInfo.columns, initialTableName);
             setDateRanges(dateRangesTemp);
         }
@@ -682,13 +705,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     };
     const [previousPage, setPreviousPage] = useState(0);
     const [currentProcessing, setCurrentProcessing] = useState({
-        page: DEFAULT_PAGINATION,
+        page: REPORT_BUILDER_PAGINATION,
     });
     const [numberOfRows, setNumberOfRows] = useState(0);
+    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
     const [tableLoading, setTableLoading] = useState(false);
     const onPageChange = (page) => {
         if (currentProcessing.page &&
-            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            shouldFetchMore(REPORT_BUILDER_PAGINATION, page, previousPage)) {
             const newPagination = { ...currentProcessing.page, page };
             const updatedProcessing = { ...currentProcessing, page: newPagination };
             setCurrentProcessing(updatedProcessing);
@@ -699,28 +723,50 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         }
     };
     const onSortChange = (sort) => {
-        if (shouldSortInMemory(DEFAULT_PAGINATION, numberOfRows, !!pivot)) {
+        if (shouldSortInMemory(REPORT_BUILDER_PAGINATION, numberOfRows, !!pivot)) {
             return;
         }
-        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        const updatedProcessing = { page: REPORT_BUILDER_PAGINATION, sort };
         handleRunQuery(updatedProcessing, true);
         setCurrentProcessing(updatedProcessing);
         setPreviousPage(0);
     };
-    const handleRunQuery = async (processing, resetRows = false) => {
+    const onFilterPreviewChange = (preview) => {
+        handleRunQuery(currentProcessing, true, preview);
+    };
+    const fetchRowCount = async (processing, includeFilters) => {
+        if (!client || !activeQuery) {
+            return;
+        }
+        setRowCountIsLoading(true);
+        const tableInfo = await fetchResultsByQuery(activeQuery, client, processing, schemaData.customFields, includeFilters ? specificDashboardFilters : undefined, includeFilters
+            ? tempReport.dateField ?? reportInfo?.dateField
+            : undefined, false, true);
+        if (tableInfo.rowCount) {
+            setNumberOfRows(tableInfo.rowCount);
+        }
+        setRowCountIsLoading(false);
+    };
+    const fetchRowCountFromAST = async (ast, where) => {
+        setRowCountIsLoading(true);
+        const tableData = await fetchTableByAST({ ...ast, where }, client, { page: REPORT_BUILDER_PAGINATION }, undefined, false, true);
+        if (tableData.rowCount) {
+            setNumberOfRows(tableData.rowCount);
+        }
+        setRowCountIsLoading(false);
+    };
+    const handleRunQuery = async (processing, resetRows = false, includeFilters = false) => {
         try {
             setErrorMessage('');
             setTableLoading(true);
-            const tableInfo = await fetchTableByQuery(activeQuery, client, processing, schemaData.customFields);
+            const tableInfo = await fetchResultsByQuery(activeQuery, client, processing, schemaData.customFields, includeFilters ? specificDashboardFilters : undefined, includeFilters ? tempReport.dateField : undefined, true);
             if (tableInfo.error) {
                 throw new Error(tableInfo.error);
             }
             else if (tableInfo.rows.length === 0) {
                 throw new Error('No data found');
             }
-            if (tableInfo.rowCount) {
-                setNumberOfRows(tableInfo.rowCount);
-            }
+            fetchRowCount(processing, includeFilters);
             setCurrentProcessing(processing);
             let tempRows = [...rows, ...tableInfo.rows];
             if (resetRows) {
@@ -728,6 +774,11 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             }
             setRows(tempRows);
             setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            setTempReport({
+                ...tempReport,
+                rows: tempRows,
+                rowCount: tableInfo.rowCount ?? tempReport.rowCount,
+            });
             setColumns(tableInfo.columns);
             setTableLoading(false);
         }
@@ -739,7 +790,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             return;
         }
     };
-    const renderFilters = () => {
+    const renderFilters = (actionsEnabled = true) => {
         // Render filterStack
         return (_jsx("div", { style: {
                 display: 'flex',
@@ -783,7 +834,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                             } }) }, index));
                 }
                 else if (item.value) {
-                    return (_jsx(FilterPopoverWrapper, { schema: schemaData.schema.find((s) => s.name === currentTable || s.displayName === currentTable) ?? schemaData.schema[0], filter: item.value, filterLabel: item.value ? filterSentence(item.value) : '', index: index, FilterTagComponent: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: globalUniqueValues, priorFilters: filterStack.slice(0, index > 0 ? index - 1 : 0), columns: columns, client: client, customFields: schemaData.customFields, baseAst: baseAst, endpoint: QUILL_SERVER, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (filter) => {
+                    return (_jsx(FilterPopoverWrapper, { schema: schemaData.schema.find((s) => s.name === currentTable || s.displayName === currentTable) ?? schemaData.schema[0], filter: item.value, filterLabel: item.value ? filterSentence(item.value) : '', index: index, FilterTagComponent: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: globalUniqueValues, fieldValuesMapIsLoading: globalUniqueValuesIsLoading, priorFilters: filterStack.slice(0, index > 0 ? index - 1 : 0), columns: columns, client: client, customFields: schemaData.customFields, baseAst: baseAst, endpoint: QUILL_SERVER, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (filter) => {
                             item.value = filter;
                             let newFormData = null;
                             if (filterTree) {
@@ -847,7 +898,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                 fetchSqlQuery(newAst, newFormData);
                                 setRemovingFilter(false);
                             }
-                        } }, `filter_${index}_${item.value ? filterSentence(item.value) : ''}`));
+                        }, disabled: !actionsEnabled }, `filter_${index}_${item.value ? filterSentence(item.value) : ''}`));
                 }
             }) }));
     };
@@ -874,12 +925,18 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         },
         as: null,
     });
+    const updateUniqueValue = (uniqueStrings, table) => {
+        const uniqueStringsObj = {};
+        uniqueStringsObj[table] = uniqueStrings ?? {};
+        setUniqueValues(uniqueStringsObj);
+        updateFieldValuesMap(uniqueStringsObj, table);
+    };
     const fetchReportFromASTHelper = async (baseAst, newFormData, curPivot, curSchema, previousReport) => {
         const curFormData = newFormData !== undefined ? newFormData : formData;
         let reportBuilderInfo = undefined;
         try {
             setLoading(true);
-            reportBuilderInfo = await fetchReportBuilderDataFromAST(baseAst, curFormData, curSchema ?? schemaData.schema, client, curPivot ?? pivot, formData, currentTable, { uniqueStrings: uniqueValues, dateRanges: dateRanges ?? {} }, previousReport ?? reportInfo ?? undefined, schemaData.customFields);
+            reportBuilderInfo = await fetchReportBuilderDataFromAST(baseAst, curFormData, curSchema ?? schemaData.schema, client, curPivot ?? pivot, formData, currentTable, { uniqueStrings: uniqueValues, dateRanges: dateRanges ?? {} }, previousReport ?? reportInfo ?? undefined, schemaData.customFields, true, true, { page: REPORT_BUILDER_PAGINATION });
             if (reportBuilderInfo.error) {
                 throw new Error(reportBuilderInfo.error);
             }
@@ -898,21 +955,22 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setErrorMessage('Failed to fetch');
             return;
         }
+        fetchRowCountFromAST(baseAst, curFormData);
         const reportTable = reportBuilderInfo.table;
         const reportBuilderInfoColumns = reportBuilderInfo.columns.map((column) => {
             return `${reportTable}.${column.field}`;
         });
+        const prevFormData = formData;
+        const prevTable = currentTable;
         setRows(reportBuilderInfo.rows);
         setColumns(reportBuilderInfo.columns);
-        setNumberOfRows(reportBuilderInfo.rowCount);
+        // setNumberOfRows(reportBuilderInfo.rowCount);
         setPivot(reportBuilderInfo.pivot);
         setPivotData(reportBuilderInfo.pivotData);
+        setDateRanges(reportBuilderInfo.dateRanges);
         setFormattedRows(reportBuilderInfo.formattedRows);
         setTempReport(reportBuilderInfo.report);
         setSelectedColumns(reportBuilderInfoColumns);
-        setUniqueValues(reportBuilderInfo.uniqueValues);
-        updateFieldValuesMap(reportBuilderInfo.uniqueValues, reportBuilderInfo.table);
-        setDateRanges(reportBuilderInfo.dateRanges);
         setLoading(false);
         setDataDisplayed(true);
         setCurrentTable(reportBuilderInfo.table);
@@ -924,6 +982,31 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setPivotValueField(reportBuilderInfo.pivot.valueField);
         }
         setReportInfo(reportBuilderInfo.report);
+        // fetch unique values after everything else since it is the most expensive
+        if (prevTable !== reportBuilderInfo.table ||
+            !equal(prevFormData, curFormData)) {
+            try {
+                setUniqueValuesIsLoading(true);
+                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);
+                setUniqueValuesIsLoading(false);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setErrorMessage(err.message);
+                    setLoading(false);
+                    return { error: true, message: err.message, rows: [] };
+                }
+                setLoading(false);
+                setErrorMessage('Failed to fetch');
+                return { error: true, message: 'Failed to fetch', rows: [] };
+            }
+        }
     };
     const fetchAstFromPromptHelper = async (overridePrompt) => {
         let astInfo = {};
@@ -989,7 +1072,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, {}) })) }) }));
+                    }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })), deleteDisabled: loading }) }));
     };
     function DraggableColumns() {
         const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
@@ -1064,7 +1147,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                         display: 'flex',
                         flexDirection: 'column',
                         gap: 8,
-                    }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
+                    }, 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) {
@@ -1077,11 +1160,10 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         if (!openPopover) {
                                             setOpenPopover('AddColumnModal');
                                         }
-                                    }, label: 'Select columns' }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                    }, label: 'Select columns', disabled: true }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
                                             // delay onClose callback so onClick no-ops
                                             setTimeout(() => {
-                                                setIsPending(false);
                                                 setActiveEditItem(null);
                                                 setActivePath(null);
                                                 setOpenPopover(null);
@@ -1099,7 +1181,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         flexDirection: 'column',
                                         gap: 8,
                                         marginBottom: 12,
-                                    }, children: renderFilters() })), _jsxs("div", { style: {
+                                    }, children: renderFilters(false) })), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         alignItems: 'flex-start',
@@ -1125,14 +1207,12 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                     }
                                                     setOpenPopover('AddFilterPopover');
                                                     setActivePath('');
-                                                    setIsPending(true);
                                                 }
-                                            }, label: 'Add filter' }), _jsx("div", { style: {
+                                            }, label: 'Add filter', disabled: true }), _jsx("div", { style: {
                                                 position: 'relative',
                                                 ...(openPopover === 'AddFilterPopover' && { top: 12 }),
                                             }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
                                                     if (!isOpen) {
-                                                        setIsPending(false);
                                                         setActivePath(null);
                                                         setOpenPopover(null);
                                                         setTimeout(() => {
@@ -1143,9 +1223,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 }, 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], onSubmitFilter: (filter) => {
+                                                        : initialTableName], fieldValuesMapIsLoading: uniqueValuesIsLoading, onSubmitFilter: (filter) => {
                                                         setOpenPopover(null);
-                                                        setIsPending(false);
                                                         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: () => {
@@ -1157,14 +1236,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                     // 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: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport ?? reportInfo }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                    }, 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);
-                                    }, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                    }, 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,
@@ -1172,7 +1251,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                     }, children: _jsx(SortSentence, { sortData: {
                                             type: pivot.sortDirection,
                                             expr: { type: 'column_ref', column: pivot.sortField },
-                                        }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, columns: selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                             setPivot({ ...pivot, sort: false });
                                             setBaseAst(deepCopy(baseAst));
                                             if (!pivot) {
@@ -1200,7 +1279,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         gap: 8,
                                         marginBottom: 12,
                                     }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
-                                            setIsPending(false);
                                             setActiveEditItem(null);
                                             setOpenPopover(null);
                                             if (column === '')
@@ -1221,14 +1299,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             if (!pivot) {
                                                 fetchSqlQuery(newAst);
                                             }
-                                        }, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, 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 }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: true }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
                                         if (!selectedColumns ||
                                             selectedColumns.length === 0 ||
                                             loading) {
@@ -1237,9 +1315,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         if (!openPopover) {
                                             setOpenPopover('AddSortPopover');
                                         }
-                                    }, label: "Add sort" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                    }, label: "Add sort", disabled: true }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
-                                            setIsPending(false);
                                             setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
@@ -1268,7 +1345,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             setOpenPopover(null);
                                             setBaseAst(deepCopy(newAst));
                                             fetchSqlQuery(newAst);
-                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: true }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                 if (!selectedColumns ||
                                                     selectedColumns.length === 0 ||
                                                     loading) {
@@ -1277,9 +1354,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 if (!openPopover) {
                                                     setOpenPopover('AddLimitPopover');
                                                 }
-                                            }, label: 'Add limit' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                            }, label: 'Add limit', disabled: true }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
                                                 if (!isOpen) {
-                                                    setIsPending(false);
                                                     setActiveEditItem(null);
                                                     setActivePath(null);
                                                     setOpenPopover(null);
@@ -1326,7 +1402,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             if (!isOpen) {
                                                 // delay onClose callback so onClick no-ops
                                                 setTimeout(() => {
-                                                    setIsPending(false);
                                                     setActiveEditItem(null);
                                                     setActivePath(null);
                                                     setOpenPopover(null);
@@ -1370,7 +1445,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                         }
                                                         setOpenPopover('AddFilterPopover');
                                                         setActivePath('');
-                                                        setIsPending(true);
                                                     }
                                                 }, label: 'Add filter' }), _jsx("div", { style: {
                                                     position: 'relative',
@@ -1380,16 +1454,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                             // delay onClose callback so onClick no-ops
                                                             setOpenPopover(null);
                                                             setTimeout(() => {
-                                                                setIsPending(false);
                                                                 setActivePath(null);
                                                                 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: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                            s.displayName === currentTable) ?? schemaData.schema[0], fieldValuesMap: fieldValuesMap, fieldValuesMapIsLoading: uniqueValuesIsLoading, onSubmitFilter: (filter) => {
                                                             setOpenPopover(null);
-                                                            setIsPending(false);
                                                             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: () => {
@@ -1397,29 +1469,32 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             setPivotData(null);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, selectPivot: async (pivot, uniqueValues, dateRange, pivotTable) => {
-                                            if (!pivot)
+                                        }, selectPivot: async (selectedPivot, uniqueValues, dateRange, pivotTable) => {
+                                            if (!selectedPivot)
                                                 return;
                                             const newAst = { ...baseAst };
                                             newAst.orderby = null;
-                                            if (pivot.rowFieldType === 'date') {
-                                                pivot['sort'] = true;
-                                                pivot['sortDirection'] = 'ASC';
+                                            if (selectedPivot.rowFieldType === 'date') {
+                                                selectedPivot['sort'] = true;
+                                                selectedPivot['sortDirection'] = 'ASC';
                                             }
                                             setBaseAst(newAst); // trigger refetch
                                             let dateBucket = undefined;
                                             if (dateRange) {
                                                 dateBucket = getDateBucketFromRange(dateRange);
                                             }
+                                            setPivot(selectedPivot);
                                             if (!pivotTable) {
-                                                pivotTable = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
+                                                setTableLoading(true);
+                                                pivotTable = await generatePivotTable(selectedPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
                                             }
+                                            // no other calls made
                                             setPivotData(pivotTable || []);
-                                            setPivot(pivot);
-                                            const formattedRows = formatRows(pivotTable.rows, columns, true, pivot.aggregationType);
+                                            const formattedRows = formatRows(pivotTable.rows, columns, true, selectedPivot.aggregationType);
                                             setFormattedRows(formattedRows);
                                             setErrorMessage('');
-                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                            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) => {
                                             setPivotRowField(value);
                                             updatePivot(value, 'rowField');
                                         }, setPivotColumnField: (value) => {
@@ -1436,7 +1511,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             setPivotData([]);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, 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, 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: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
@@ -1451,7 +1526,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                         `.${pivot.rowField}`,
                                                         `.${pivot.valueField || 'count'}`,
                                                     ]
-                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
+                                                : 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;
@@ -1506,7 +1581,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, 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 });
                                                     return;
@@ -1529,7 +1604,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                     });
                                                     return;
                                                 }
-                                                setIsPending(false);
                                                 setActiveEditItem(null);
                                                 setOpenPopover(null);
                                                 if (column === '')
@@ -1560,7 +1634,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             ...(openPopover === 'AddSortPopover' && { top: 12 }),
                                         }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                                 if (!isOpen) {
-                                                    setIsPending(false);
                                                     setActiveEditItem(null);
                                                     setActivePath(null);
                                                     setOpenPopover(null);
@@ -1655,7 +1728,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                     ...(openPopover === 'AddLimitPopover' && { top: 12 }),
                                                 }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
                                                         if (!isOpen) {
-                                                            setIsPending(false);
                                                             setActiveEditItem(null);
                                                             setActivePath(null);
                                                             setOpenPopover(null);
@@ -1689,9 +1761,10 @@ 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: tableLoading ||
-                                    (loading && errorMessage.length === 0) ||
-                                    initialChartLoad, rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, rowsPerPage: 20, columns: pivot
+                                            }, 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
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
@@ -1715,13 +1788,17 @@ 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: () => {
+                                                }, 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);
                                                     onSaveChanges && onSaveChanges();
                                                     setIsChartBuilderOpen(true);
-                                                }, disabled: !!errorMessage, label: reportId ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: reportInfo
+                                                }, disabled: !!errorMessage, label: reportId ? 'Save changes' : 'Add to dashboard', isLoading: isAddLoading })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: reportInfo
                     ? {
                         ...reportInfo,
                         ...tempReport,
+                        filtersApplied: specificDashboardFilters,
                         pivot: pivot,
                         yAxisFields: reportInfo.pivot && !pivot ? [] : reportInfo.yAxisFields,
                         columns: reportInfo.columns.filter((col) => {
@@ -1732,5 +1809,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                         queryString: activeQuery,
                         rows: rows,
                     }
-                    : tempReport, 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], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, 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, isLoading: tableLoading, isEditingMode: true }))] }));
+                    : {
+                        ...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 }))] }));
 }