@quillsql/react 2.13.42 → 2.13.44

package/dist/esm/ReportBuilder.js

@@ -1,46 +1,36 @@
 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, QuillTableReportBuilderComponent, QuillChartBuilderCheckboxComponent, } 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, DashboardFiltersContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
-import { getTableNames, isNumericColumnType, } from './components/ReportBuilder/ast';
+import { 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, QuillTableReportBuilderComponent, QuillChartBuilderCheckboxComponent, QuillToolTip, } from './components/UiComponents';
+import { ClientContext, DashboardContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
 import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, QuillLimitPopover, } from './components/ReportBuilder/ui';
-import { deepCopy } from './components/ReportBuilder/util';
-import { hashCode } from './utils/crypto';
-import { defaultAST, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, } from './components/ReportBuilder/constants';
-import AddColumnModal from './components/ReportBuilder/AddColumnModal';
 import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
-import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
+import { PivotModal } from './internals/ReportBuilder/PivotModal';
 import { snakeAndCamelCaseToTitleCase } from './utils/textProcessing';
 import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
 import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
-import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
-import { getPossiblePivotFieldOptions, isValidPivot, pivotToSql, } from './utils/pivotProcessing';
-import { getUniqueValuesByColumns, getQueryDateRangeByColumns, fetchResultsByQuery, getUniqueStringValues, fetchTableByAST, } from './utils/tableProcessing';
-import { createBasicSelectASTFromColumns, fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, } from './utils/astProcessing';
+import { isValidPivot, pivotFormData, } from './utils/pivotProcessing';
+import { fetchResultsByQuery, fetchTableByAST, getUniqueStringValuesByTable, } from './utils/tableProcessing';
+import { createSelectStarFromAst, fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, } from './utils/astProcessing';
 import PivotForm from './internals/ReportBuilder/PivotForm';
-import { getDateBucketFromRange, getDateFormatFromBucket } from './utils/dates';
 import FilterModal from './components/ReportBuilder/FilterModal';
-import { astToFilterTree, filterTreeToAst, getFieldFromExpression, } from './utils/astFilterProcessing';
-import useAstToFilterTree from './hooks/useAstToFilterTree';
-import { filterStackToFilterTree, uniqueValuesToStringMap, } from './utils/filterProcessing';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
 import { DEFAULT_PAGINATION, shouldFetchMore, } from './utils/paginationProcessing';
 import { EMPTY_INTERNAL_REPORT, fetchReportBuilderDataFromAST, formatRowsFromReport, } from './utils/report';
 import { TEMP_REPORT_ID, } from './models/Report';
-import equal from 'fast-deep-equal';
 import FilterStack from './components/ReportBuilder/FilterStack';
-import { QUILL_SERVER } from './utils/constants';
+import { SINGLE_TENANT } from './utils/constants';
 import { convertQueryToSelectStar } from './components/ReportBuilder/convert';
-import { disambiguatedValueField } from './utils/pivotConstructor';
-import { isDateType, isNumberType } from './utils/columnProcessing';
 import { cleanDashboardItem } from './utils/dashboard';
+import { useDashboards } from './hooks/useDashboard';
+import { EMPTY_REPORT_BUILDER_STATE, } from './models/ReportBuilder';
+import DraggableColumns from './components/ReportBuilder/DraggableColumns';
+import NewAddColumnModal from './components/ReportBuilder/AddColumnModal';
+import { astToReportBuilderState, formatRows, isValidPivotForReport, reportBuilderStateToAst, setTypesOnPivot, } from './utils/reportBuilder';
+import { fetchSqlQuery } from './utils/dataFetcher';
 /**
  * Quill Report Builder
  *
@@ -73,173 +63,369 @@ import { cleanDashboardItem } from './utils/dashboard';
  * @see https://docs.quillsql.com/components/report-builder
  */
 export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onSubmitSaveQuery = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, onCloseChartBuilder = undefined, destinationDashboard, chartBuilderTitle = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableReportBuilderComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = QuillChartBuilderCheckboxComponent, 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, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
+    /**
+     * The state of the ReportBuilder is based off of an AST, which is a representation of a sql query
+     * ASTs for the same query can vary between database types, so we create a layer of abstraction on top of it
+     * An AST consists of these main parts:
+     * - from: the table(s) that the query is pulling data from
+     * - columns: the columns that the query is selecting
+     * - where: the conditions that the query is filtering by (filters)
+     * - groupby: the columns that the query is grouping by (these are represented by pivots)
+     * - orderby: the columns that the query is ordering by (sort)
+     * - limit: the number of rows that the query is limiting to (limit)
+     *
+     * The ReportBuilder maintains the state of these parts of the AST and assembles the AST when required
+     *
+     * User Interactions
+     * - Add Tables
+     * - Add Columns
+     * - Add Filters
+     * - Add Pivot
+     * - Add Sort
+     * - Add Limit
+     *
+     * - Two modes
+     *  - Automatic: Run Query after every change
+     *  - Manual: Run Query after user clicks "Run Query"
+     * */
+    // Notable ReportBuilder props
+    // intitialTableName: the table that the ReportBuilder will start with
+    // isAdminEnabled: whether the ReportBuilder is in admin mode
+    // isAIEnabled: whether the ReportBuilder's AI features are enabled
+    // pivotRecommendationsEnabled: whether the PivotModal's AI features are enabled
+    // reportId: a report id that the Report Builder will query from and modify
+    // onSubmitCreateReport: a callback function that will trigger when a new chart is saved
+    // onSubmitEditReport: a callback function that will trigger when a chart is edited
+    // onDiscardChanges: a callback function that will trigger when changes are discarded
+    // onCloseChartBuilder: a callback function that will trigger when the chart builder is closed
+    // hideCopySQL: hide the copy SQL button
+    // isChartBuilderHorizontalView: whether the chart builder is in horizontal view mode
+    // onClickChartElement: a callback function triggered when a chart element is clicked
+    // Contexts
     const [dashboard] = useContext(DashboardContext);
     const [schemaData] = useContext(SchemaDataContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const { dashboards } = useDashboards();
+    const destinationDashboardConfig = useMemo(() => {
+        return dashboards?.find((d) => d.name === destinationDashboard);
+    }, [dashboards, destinationDashboard]);
+    const filteredSchema = useMemo(() => {
+        return schemaData.schemaWithCustomFields?.filter((table) => {
+            return (destinationDashboardConfig?.tenantKeys?.[0] === SINGLE_TENANT ||
+                table.ownerTenantFields?.length === 0 ||
+                table.ownerTenantFields?.includes(destinationDashboardConfig?.tenantKeys?.[0] ?? ''));
+        });
+    }, [schemaData.schemaWithCustomFields, destinationDashboardConfig?.tenantKeys]);
     const { tenants } = useContext(TenantContext);
-    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 [theme] = useContext(ThemeContext);
     const [client] = useContext(ClientContext);
-    const [reportInfo, setReportInfo] = useState(null);
-    const [aiPrompt, setAiPrompt] = useState('');
-    const [errorMessage, setErrorMessage] = useState('');
-    const [baseAst, setBaseAst] = useState(null);
-    const [formData, setFormData] = useState(null);
-    const [orderedColumnNames, setOrderedColumnNames] = useState([]);
-    const [selectedColumns, setSelectedColumns] = useState([]);
-    const [selectedOrderedColumns, setSelectedOrderedColumns] = useState([]);
-    const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
-    const [activeQuery, setActiveQuery] = useState('');
-    const [, setActiveEditItem] = useState(null);
-    const [openPopover, setOpenPopover] = useState(null);
-    const [loading, setLoading] = useState(!!initialTableName);
-    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [isCopying, setIsCopying] = useState(false);
-    const [dataDisplayed, setDataDisplayed] = useState(false);
-    const [rows, setRows] = useState([]);
-    const [formattedRows, setFormattedRows] = useState([]);
-    const [columns, setColumns] = useState([]);
+    // Refs
+    const parentRef = useRef(null);
+    // Consts
     const REPORT_BUILDER_PAGINATION = {
         page: 0,
         rowsPerPage: 20,
         rowsPerRequest: 100,
     };
+    // ReportBuilder UI States
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [filtersEnabled, setFiltersEnabled] = useState(!!reportId);
+    const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
+    const [openPopover, setOpenPopover] = useState(null);
+    const [aiPrompt, setAiPrompt] = useState('');
+    const [reportBuilderLoading, setReportBuilderLoading] = useState(false);
+    const [tableLoading, setTableLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [unresolvedReportMessage, setUnresolvedReportMessage] = useState('');
+    // Core Report states
+    const [tables, setTables] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [filterStack, setFilterStack] = useState([]);
+    const [pivot, setPivot] = useState(null);
+    const [sort, setSort] = useState([]);
+    const [limit, setLimit] = useState(null);
+    const reportBuilderState = useMemo(() => {
+        return {
+            tables,
+            columns,
+            filterStack,
+            pivot,
+            sort,
+            limit,
+        };
+    }, [columns, filterStack, limit, pivot, sort, tables]);
+    const undoButtonEnabled = false; // TODO: enable
+    const [stateStack, setStateStack] = useState([]);
+    // Other Report states
+    const [activeQuery, setActiveQuery] = useState('');
+    const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState({}); // unique values before filtering
+    const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState(false);
+    const [filteredUniqueValues, setFilteredUniqueValues] = useState(null); // unique values after filtering
+    const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState(false);
+    const [columnUniqueValues, setColumnUniqueValues] = useState({});
+    const [dateRanges, setDateRanges] = useState(null);
     const [tempReport, setTempReport] = useState({
         ...EMPTY_INTERNAL_REPORT,
         pagination: REPORT_BUILDER_PAGINATION,
     });
-    const [uniqueValues, setUniqueValues] = useState({});
-    const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = useState(false);
-    const [pivot, setPivot] = useState(null);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: REPORT_BUILDER_PAGINATION,
+    });
+    const [previousPage, setPreviousPage] = useState(0);
+    const [isCopying, setIsCopying] = useState(false);
+    const [sortOrLimitWasReset, setSortOrLimitWasReset] = useState(false);
+    // Table display states
+    const [reportColumns, setReportColumns] = useState([]);
+    const [reportRows, setReportRows] = useState([]);
+    const [formattedRows, setFormattedRows] = useState([]);
     const [pivotData, setPivotData] = useState(null);
+    const [numberOfRows, setNumberOfRows] = useState(0);
+    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
+    const reportColumnsToStateColumns = (() => {
+        const positionMap = {};
+        columns.forEach((column, index) => {
+            positionMap[column.field] = index;
+            if (column.alias) {
+                positionMap[column.alias] = index;
+            }
+        });
+        // Sort reportColumns based on the position in columns
+        return [...reportColumns]
+            .filter((reportColumn) => positionMap[reportColumn.field] !== undefined)
+            .sort((a, b) => {
+            const posA = positionMap[a.field];
+            const posB = positionMap[b.field];
+            return posA && posB ? posA - posB : 0;
+        });
+    })();
+    // Pivot form states
+    const [pivotRowField, setPivotRowField] = useState(undefined);
+    const [pivotColumnField, setPivotColumnField] = useState(undefined);
+    const [pivotAggregations, setPivotAggregations] = useState([]);
+    const [pivotHint, setPivotHint] = useState('');
+    const [pivotError, setPivotError] = useState('');
     const [createdPivots, setCreatedPivots] = useState([]);
     const [recommendedPivots, setRecommendedPivots] = useState([]);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEditingPivot, setIsEditingPivot] = 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 || '');
-    const parentRef = useRef(null);
+    const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = useState(pivotRecommendationsEnabled);
+    // Ask AI
+    const [askAILoading, setAskAILoading] = useState(false);
     const askAIContainerRef = useRef(null);
-    const askAILoadingContainerRef = useRef(null);
     const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
-    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = useState(-1);
-    const [theme] = useContext(ThemeContext);
-    const [pivotRowField, setPivotRowField] = useState(undefined);
-    const [pivotColumnField, setPivotColumnField] = useState(undefined);
-    const [pivotAggregations, setPivotAggregations] = useState(reportInfo?.pivot?.aggregations ?? [
-        {
-            valueField: reportInfo?.pivot?.valueField,
-            valueField2: reportInfo?.pivot?.valueField2,
-            aggregationType: reportInfo?.pivot?.aggregationType,
-        },
-    ]);
-    const [pivotHint, setPivotHint] = useState('');
-    /* eslint-disable-next-line */
-    const [pivotError, setPivotError] = useState(undefined);
-    const [dateRanges, setDateRanges] = useState(null);
-    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, columns); // Stores the state of filters
-    const [removingFilter, setRemovingFilter] = useState(false);
-    const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = useState(pivotRecommendationsEnabled);
-    const [unresolvedReportMessage, setUnresolvedReportMessage] = useState('');
-    const dashboardName = useMemo(() => {
-        if (destinationDashboard) {
-            return destinationDashboard;
+    const loading = reportBuilderLoading || tableLoading;
+    const isSelectStar = useMemo(() => {
+        if (tables.length === 1) {
+            // Check if all columns are selected
+            const totalColumnLength = tables.reduce((acc, table) => {
+                const tableColumns = filteredSchema.find((t) => t.name === table.name)
+                    ?.columns.length ?? 0;
+                return acc + tableColumns;
+            }, 0);
+            return totalColumnLength === columns.length;
         }
-        if (!reportId) {
-            return undefined;
+        else {
+            // TODO: Implement this to work with joins
+            // SELECT * won't work if joined table has shared column name
+            return false;
         }
-        return dashboard[reportId]?.dashboardName;
-    }, [reportId, dashboard, destinationDashboard]);
-    const [filtersEnabled, setFiltersEnabled] = useState(!!reportId);
+    }, [tables, columns, filteredSchema]);
     const mssqlSortWarning = useMemo(() => {
         if (!client || client?.databaseType !== 'mssql') {
             return undefined;
         }
-        else if (!pivot && !baseAst?.top) {
+        else if (!pivot && !limit) {
             return 'Please add a limit.';
         }
-    }, [client, baseAst, pivot]);
-    useEffect(() => {
-        if (!client) {
-            return;
+    }, [client, limit, pivot]);
+    // State changing functions
+    const clearAllState = () => {
+        setActiveQuery('');
+        handleMultiStateChange(EMPTY_REPORT_BUILDER_STATE);
+        setStateStack([]);
+        setFilteredUniqueValues(null);
+        setUnfilteredUniqueValues({});
+        setColumnUniqueValues({});
+        setDateRanges(null);
+        setTempReport({
+            ...EMPTY_INTERNAL_REPORT,
+            pagination: REPORT_BUILDER_PAGINATION,
+        });
+        resetProcessing();
+        setReportColumns([]);
+        setReportRows([]);
+        setFormattedRows([]);
+        setPivotData(null);
+        setNumberOfRows(0);
+        setRowCountIsLoading(false);
+        setPivotRowField(undefined);
+        setPivotColumnField(undefined);
+        setPivotAggregations([]);
+        setCreatedPivots([]);
+        setRecommendedPivots([]);
+        setSelectedPivotIndex(-1);
+        setAskAILoading(false);
+        setReportBuilderLoading(false);
+        setTableLoading(false);
+        setPivotError('');
+        setErrorMessage('');
+        setUnresolvedReportMessage('');
+        setPivotHint('');
+    };
+    const copySQLToClipboard = () => {
+        const query = pivot && pivotData ? pivotData.pivotQuery : activeQuery;
+        setIsCopying(true);
+        navigator.clipboard.writeText(query);
+        setTimeout(() => setIsCopying(false), 800);
+    };
+    const handleTablesChange = (newTables, updateStateStack = true) => {
+        setTables(newTables);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, tables: newTables },
+            ]);
         }
-        if (client.featureFlags?.['recommendedPivotsDisabled'] !== undefined) {
-            setPivotRecommendationsEnabledState(!client.featureFlags?.['recommendedPivotsDisabled']);
+    };
+    const handleColumnsChange = (newColumns, fetchData, updateStateStack = true) => {
+        // If pivot is using removed columns, remove pivot
+        let removePivot = false;
+        if (pivot) {
+            const referencedColumns = [];
+            if (pivot.rowField) {
+                referencedColumns.push(pivot.rowField);
+            }
+            if (pivot.columnField) {
+                referencedColumns.push(pivot.columnField);
+            }
+            if (pivot.aggregations) {
+                pivot.aggregations.forEach((agg) => {
+                    if (agg.valueField) {
+                        referencedColumns.push(agg.valueField);
+                    }
+                    if (agg.valueField2) {
+                        referencedColumns.push(agg.valueField2);
+                    }
+                });
+            }
+            const columnMapping = referencedColumns
+                .map((col) => {
+                const column = columns.find((c) => (c.alias || c.field) === col);
+                return column;
+            })
+                .filter((c) => c !== undefined);
+            removePivot = !columnMapping.every((col) => newColumns.some((c) => (c.alias || c.field) === (col.alias || col.field) &&
+                c.table === col.table));
+            if (removePivot) {
+                handlePivotChange(null);
+            }
         }
-        if (!initialLoad && client.publicKey) {
-            clearAllState();
+        setColumns(newColumns);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, columns: newColumns },
+            ]);
         }
-    }, [client]);
-    useEffect(() => {
-        updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
-        updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
-    }, [dataDisplayed]);
-    useEffect(() => {
-        if (isChartBuilderOpen === false) {
-            onCloseChartBuilder && onCloseChartBuilder();
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                columns: newColumns,
+                pivot: removePivot ? null : pivot,
+            });
         }
-    }, [isChartBuilderOpen]);
-    // Whenever unique values changes, update the fieldValuesMap, used in FilterModals
-    const updateFieldValuesMap = (curUniqueValues, tableName) => {
-        const newFieldValues = {};
-        if (curUniqueValues[tableName]) {
-            for (const field of Object.keys(curUniqueValues[tableName])) {
-                newFieldValues[field] = [];
-                for (const value of Object.keys(curUniqueValues[tableName][field])) {
-                    newFieldValues[field]?.push(value);
-                }
+    };
+    const handleFilterInsertion = (newFilter) => {
+        const newFilterStack = [...filterStack];
+        if (newFilterStack.length > 0) {
+            const tabNode = {
+                leaf: false,
+                operator: 'and',
+                leftNode: null,
+                rightNode: null,
+            };
+            newFilterStack.push(tabNode);
+        }
+        const newItem = {
+            leaf: true,
+            operator: null,
+            leftNode: null,
+            rightNode: null,
+            value: newFilter,
+        };
+        newFilterStack.push(newItem);
+        handleFilterStackChange(newFilterStack, true);
+    };
+    const handleFilterStackChange = (newFilterStack, fetchData, updateStateStack = true) => {
+        setFilterStack(newFilterStack);
+        if (newFilterStack.length === 0) {
+            setFilteredUniqueValues(null);
+        }
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, filterStack: newFilterStack },
+            ]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                filterStack: newFilterStack,
+            }, true);
+        }
+    };
+    const handlePivotChange = (newPivot, fetchData, updateStateStack = true) => {
+        setPivot(newPivot ? setTypesOnPivot(newPivot, reportColumns) : null);
+        setPivotHint('');
+        setPivotError('');
+        if (!newPivot) {
+            setPivotData(null);
+            if (!fetchData) {
+                const formattedRows = formatRows(reportRows, reportColumns, false);
+                setFormattedRows(formattedRows);
             }
         }
-        setFieldValuesMap(newFieldValues);
+        let resetSortAndLimit = false;
+        if (!pivot && newPivot && (sort.length > 0 || limit)) {
+            setSort([]);
+            setLimit(null);
+            resetSortAndLimit = true;
+        }
+        setSortOrLimitWasReset(resetSortAndLimit);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                {
+                    ...reportBuilderState,
+                    pivot: newPivot,
+                    sort: resetSortAndLimit ? [] : sort,
+                    limit: resetSortAndLimit ? null : limit,
+                },
+            ]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                pivot: newPivot,
+                sort: resetSortAndLimit ? [] : sort,
+                limit: resetSortAndLimit ? null : limit,
+            });
+        }
     };
-    useEffect(() => {
-        // Since the TextInput component takes a required numeric width parameter,
-        // we dynamically calculate the width of this component here.
-        function handleResize() {
-            updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
-            updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+    const updatePivot = async (changeField, fieldKey) => {
+        if (!client || !pivot) {
+            return;
         }
-        handleResize();
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-    const setTypesOnPivot = (newPivot, searchColumns) => ({
-        ...newPivot,
-        aggregations: newPivot.aggregations?.map((agg) => ({
-            ...agg,
-            valueFieldType: searchColumns.find((c) => c.field === agg.valueField)
-                ?.jsType,
-            valueField2Type: searchColumns.find((c) => c.field === agg.valueField2)
-                ?.jsType,
-        })),
-        valueField: newPivot.aggregations?.[0]?.valueField,
-        valueField2: newPivot.aggregations?.[0]?.valueField2,
-        aggregationType: newPivot.aggregations?.[0]?.aggregationType,
-        valueFieldType: searchColumns.find((c) => c.field === newPivot.aggregations?.[0]?.valueField)?.jsType,
-        valueField2Type: searchColumns.find((c) => c.field === newPivot.aggregations?.[0]?.valueField2)?.jsType,
-    });
-    const updatePivot = async (changeField, fieldKey, prevValue) => {
-        let newPivot = deepCopy(pivot);
-        setPivotError(undefined);
+        let newPivot = { ...pivot };
+        setPivotError('');
         // @ts-ignore
         newPivot[fieldKey] = changeField;
         newPivot.rowLimit = undefined;
         newPivot.sort = undefined;
+        newPivot.sortDirection = undefined;
+        newPivot.sortField = undefined;
+        newPivot.sortFieldType = undefined;
         if (fieldKey === 'rowField') {
             if (changeField === '' || changeField === undefined) {
                 setPivotColumnField(undefined);
@@ -251,22 +437,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         : agg.aggregationType,
                 })));
             }
-            // check to see if the new rowField value is a date field
-            const column = columns.find((c) => c.field === changeField);
-            if (column?.jsType === 'date') {
-                newPivot.rowFieldType = 'date';
-                newPivot.sort = true;
-                newPivot.sortField = changeField;
-                newPivot.sortFieldType = column.format;
-                newPivot.sortDirection = 'ASC';
-            }
-            else {
-                newPivot.rowFieldType = 'string';
-                newPivot.sort = undefined;
-            }
         }
-        newPivot = setTypesOnPivot(newPivot, columns);
-        setPivot(setTypesOnPivot(newPivot, columns));
+        newPivot = setTypesOnPivot(newPivot, reportColumns);
         if (newPivot.aggregations?.length === 0 ||
             newPivot.aggregations?.some((agg) => !agg.aggregationType) ||
             newPivot.aggregations?.some((agg) => !agg.valueField && agg.aggregationType !== 'count')) {
@@ -277,793 +449,116 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             setPivotError(reason);
             return;
         }
-        resetLimit();
-        resetSort();
-        setPreviousPage(0);
-        setTableLoading(true);
-        let dateBucket = undefined;
-        const tempDateRange = dateRanges && dateRanges[newPivot.rowField || ''];
-        if (tempDateRange) {
-            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
-        }
-        let distinctValuesForQuery = {};
-        const prevPivot = pivot;
-        const prevPivotData = pivotData;
-        setPivotHint('');
-        if (newPivot.columnField) {
-            if (uniqueValues?.[newPivot.columnField]) {
-                distinctValuesForQuery = uniqueValues;
-            }
-            else {
-                distinctValuesForQuery = await getUniqueValuesByColumns([
-                    {
-                        field: newPivot.columnField,
-                        label: newPivot.columnField,
-                        format: 'string',
-                    },
-                ], activeQuery, [], client, tenants, schemaData.customFields ?? {}, undefined, dashboardName);
-            }
-        }
-        try {
-            const pivotedData = await generatePivotTable({
-                pivot: newPivot,
-                dateBucket,
-                report: tempReport,
-                client,
-                uniqueValues: distinctValuesForQuery,
-                dashboardName,
-                tenants,
-                additionalProcessing: { page: REPORT_BUILDER_PAGINATION },
-            });
-            resetProcessing();
-            setPivotData(pivotedData || []);
-            const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
-            setFormattedRows(formattedRows);
-        }
-        catch (e) {
-            switch (fieldKey) {
-                case 'rowField':
-                    setPivotRowField(prevValue);
-                    break;
-                case 'columnField':
-                    setPivotColumnField(prevValue);
-                    break;
-                case 'aggregations':
-                    setPivotAggregations(prevValue);
-                    break;
-            }
-            setPivot(prevPivot);
-            setPivotData(prevPivotData);
-            if (e instanceof Error)
-                setPivotError(e.message);
-        }
-        finally {
-            setTableLoading(false);
-        }
-    };
-    const resetLimit = (fetchData) => {
-        const newAst = {
-            ...baseAst,
-            limit: null,
-            top: null,
-            orderby: client?.databaseType === 'mssql' ? null : baseAst.orderby,
-        };
-        setBaseAst((prevAst) => ({
-            ...prevAst,
-            limit: null,
-            top: null,
-            orderby: client?.databaseType === 'mssql' ? null : prevAst.orderby,
-        }));
-        setPivot((oldPivot) => {
-            if (!oldPivot)
-                return null;
-            return {
-                ...oldPivot,
-                rowLimit: undefined,
-            };
-        });
-        if (fetchData) {
-            fetchReportFromASTHelper({
-                baseAst: newAst,
-                curPivot: pivot ? { ...pivot, rowLimit: undefined } : undefined,
-            });
-        }
+        handlePivotChange(newPivot, true);
     };
-    const resetSort = (fetchData) => {
-        if (pivot) {
-            setPivot((oldPivot) => {
-                if (!oldPivot)
-                    return null;
-                return {
-                    ...oldPivot,
-                    sort: undefined,
-                    sortField: undefined,
-                    sortDirection: undefined,
-                    sortFieldType: undefined,
-                };
-            });
+    const handleSortChange = (newSort, fetchData, updateStateStack = true) => {
+        setSort(newSort);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, sort: newSort },
+            ]);
         }
-        const newAst = { ...baseAst, orderby: null };
-        setBaseAst((prevAst) => ({ ...prevAst, orderby: null }));
         if (fetchData) {
-            fetchReportFromASTHelper({
-                baseAst: newAst,
-                curPivot: pivot
-                    ? {
-                        ...pivot,
-                        sort: undefined,
-                        sortField: undefined,
-                        sortDirection: undefined,
-                        sortFieldType: undefined,
-                    }
-                    : undefined,
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                sort: newSort,
             });
         }
     };
-    const enforceOrderOnColumns = (columnNames) => {
-        if (pivot) {
-            const rowName = pivot.rowField;
-            const sortFn = (a, b) => a === rowName ? -1 : b === rowName ? 1 : 0;
-            const columnsInPivot = getColumnsInPivotExpanded();
-            return columnNames
-                .sort(sortFn)
-                .filter((c) => columnsInPivot.includes(c));
-        }
-        // make the columnNames match the order of the selectedOrderedColumns
-        return columnNames.sort((a, b) => selectedOrderedColumns.indexOf(a) - selectedOrderedColumns.indexOf(b));
-        // return columnNames;
-    };
-    const clearAllState = () => {
-        // We're trying to not block the main thread while resetting all the state.
-        // This shouldn't be an issue since the dispatches shouldn't block, but
-        // this seems to work for now. ¯\_(ツ)_/¯
-        setTimeout(() => {
-            setAskedAQuestion(false);
-            setAiPrompt('');
-            setBaseAst(null);
-            setFormData(null);
-            setSelectedColumns([]);
-            setActiveQuery('');
-            setActiveEditItem(null);
-            setOpenPopover(null);
-            setLoading(false);
-            setDataDisplayed(false);
-            setRows([]);
-            setColumns([]);
-            setSelectedOrderedColumns([]);
-            setErrorMessage('');
-            setPivotError(undefined);
-            setFormattedRows([]);
-            setCurrentTable('');
-            setUniqueValues({});
-            setPivot(null);
-            setPivotHint('');
-            setPivotData(null);
-            setRecommendedPivots([]);
-        }, 0);
-    };
-    const fetchGlobalUniqueValues = async (columns, currentTable, client) => {
-        setGlobalUniqueValuesIsLoading(true);
-        const global = await getUniqueStringValues(columns, currentTable, client, tenants, schemaData.customFields, undefined, true, undefined, dashboardName);
-        setGlobalUniqueValues(uniqueValuesToStringMap(global));
-        setGlobalUniqueValuesIsLoading(false);
-    };
-    const uniqueValuesDependenciesRef = useRef({ client, columns, currentTable });
-    const memoizedFetchGlobalUniqueValues = useCallback(fetchGlobalUniqueValues, []);
-    useEffect(() => {
-        const hasChanged = !equal({ client, columns, currentTable }, uniqueValuesDependenciesRef.current);
-        if (hasChanged && client && columns && currentTable) {
-            memoizedFetchGlobalUniqueValues(columns, currentTable, client);
-            uniqueValuesDependenciesRef.current = { client, columns, currentTable };
-        }
-    }, [client, columns, currentTable, memoizedFetchGlobalUniqueValues]);
-    const formatRows = (rows, columns, pivot, aggregationType, dateBucket) => {
-        const copiedRows = deepCopy(rows);
-        if (pivot) {
-            const formattedRows = copiedRows.map((row) => {
-                const formattedRow = row;
-                Object.keys(row).forEach((key) => {
-                    const column = columns.find((c) => c.field === key);
-                    let format = 'string';
-                    if (!column) {
-                        format =
-                            aggregationType === 'count'
-                                ? 'whole_number'
-                                : 'two_decimal_places';
-                    }
-                    else {
-                        format = DATE_FORMAT_TYPES.includes(column.format)
-                            ? dateBucket
-                                ? getDateFormatFromBucket(dateBucket)
-                                : 'MMM_yyyy'
-                            : 'string';
-                    }
-                    const formattedValue = quillFormat({
-                        value: row[key],
-                        format,
-                    });
-                    formattedRow[key] = formattedValue;
-                });
-                return formattedRow;
-            });
-            return formattedRows;
-        }
-        else {
-            const formattedRows = copiedRows.map((row) => {
-                return columns.reduce((formattedRow, column) => {
-                    // Apply the format function to each field in the row
-                    const formattedValue = quillFormat({
-                        value: row[column.field],
-                        format: column.format,
-                    });
-                    formattedRow[column.field] = formattedValue;
-                    return formattedRow;
-                }, {});
-            });
-            return formattedRows;
-        }
-    };
-    const copySQLToClipboard = () => {
-        let query = activeQuery;
-        if (pivot) {
-            query = pivotToSql(pivot, activeQuery, columns);
-        }
-        setIsCopying(true);
-        navigator.clipboard.writeText(query);
-        setTimeout(() => setIsCopying(false), 800);
-    };
-    const clearCheckboxes = () => {
-        const checkboxes = uniqueValues;
-        const newValues = {};
-        for (const table of Object.keys(checkboxes)) {
-            newValues[table] = {};
-            for (const column of Object.keys(checkboxes[table])) {
-                newValues[table][column] = {};
-                for (const variant of Object.keys(checkboxes[table][column])) {
-                    newValues[table][column][variant] = false;
-                }
-            }
+    const handleLimitChange = (newLimit, fetchData, updateStateStack = true) => {
+        setLimit(newLimit);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, limit: newLimit },
+            ]);
         }
-        setUniqueValues(newValues);
-        updateFieldValuesMap(newValues, currentTable);
-    };
-    const fetchSqlQuery = async (ast, formData, fetchData = true) => {
         if (fetchData) {
-            setLoading(true);
-        }
-        setErrorMessage('');
-        try {
-            const where = formData ? formData : ast?.where || null;
-            const response = await fetch(`${QUILL_SERVER}/sqlify`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    ast: { ...ast, where },
-                    publicKey: client.publicKey,
-                    useNewNodeSql: true, // new flag
-                }),
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                limit: newLimit,
             });
-            const data = await response.json();
-            setActiveQuery(data.query);
-            if (fetchData) {
-                fetchReportFromASTHelper({
-                    baseAst: ast,
-                    newFormData: formData,
-                });
-            }
-            return data.query;
-        }
-        catch (error) {
-            setLoading(false);
-            console.error(error);
-        }
-    };
-    const getDateRanges = async (columns, tableName) => {
-        const dateColumns = columns.filter((column) => {
-            return column.fieldType === 'date';
-        });
-        if (dateColumns.length === 0) {
-            return {};
-        }
-        const dateColumnNames = dateColumns.map((column) => {
-            return column.field;
-        });
-        const dateRanges = await getQueryDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, tenants, schemaData.customFields ?? {}, dashboardName);
-        return dateRanges;
-    };
-    // It's just like getColumnsInPivot but we expand the columnField
-    // if there is one to include all the variants just like it would
-    // show up in the table. (eg. category -> ...[Fuel, Food, Other])
-    const getColumnsInPivotExpanded = () => {
-        if (!pivot)
-            return [];
-        const tables = getTableNames(baseAst);
-        if (tables.length !== 1)
-            return [];
-        const result = [];
-        const table = tables[0];
-        const { valueField, rowField, columnField } = pivot;
-        if (columnField &&
-            uniqueValues[table] &&
-            uniqueValues[table][columnField]) {
-            result.push(...Object.keys(uniqueValues[table][columnField]));
-        }
-        result.push(valueField, rowField);
-        return result.filter(Boolean);
-    };
-    const loadTable = async (tables) => {
-        if (!tables?.length || !schemaData.schema?.length)
-            return;
-        setLoading(true);
-        const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
-        if (tableInfo) {
-            setUniqueValuesIsLoading(true);
-            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName, client, tenants, schemaData.customFields, uniqueValues, true, undefined, dashboardName);
-            if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
-                setUniqueValues(newUniqueValues);
-                updateFieldValuesMap(newUniqueValues, initialTableName);
-            }
-            setUniqueValuesIsLoading(false);
-            const dateRangesTemp = await getDateRanges(tableInfo.columns, initialTableName);
-            setDateRanges(dateRangesTemp);
-        }
-        const columnsForTable = tables
-            .find((t) => t.name === initialTableName)
-            ?.columns.map((c) => c.field)
-            .sort((a, b) => {
-            const aIsId = a.endsWith('.id') ||
-                a.endsWith('_id') ||
-                a.endsWith('Id') ||
-                a === 'id';
-            const bIsId = b.endsWith('.id') ||
-                b.endsWith('_id') ||
-                b.endsWith('Id') ||
-                b === 'id';
-            if (aIsId && !bIsId)
-                return 1;
-            if (bIsId && !aIsId)
-                return -1;
-            return 0;
-        });
-        await fetchAstFromPromptHelper(`get ${columnsForTable} from ${initialTableName}`);
-        setInitialLoad(false);
-    };
-    const onSchemaChange = async () => {
-        try {
-            setOrderedColumnNames((schemaData.schemaWithCustomFields ?? []).flatMap((table) => table.columns
-                .map((c) => `${table.name}.${c.field}`)
-                .sort((a, b) => {
-                const aIsId = a.endsWith('.id') ||
-                    a.endsWith('_id') ||
-                    a.endsWith('Id') ||
-                    a === 'id';
-                const bIsId = b.endsWith('.id') ||
-                    b.endsWith('_id') ||
-                    b.endsWith('Id') ||
-                    b === 'id';
-                if (aIsId && !bIsId)
-                    return 1;
-                if (bIsId && !aIsId)
-                    return -1;
-                return 0;
-            })));
-            if (initialTableName) {
-                await loadTable(schemaData.schemaWithCustomFields);
-            }
-            setInitialLoad(false);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    };
-    useEffect(() => {
-        const loadChart = async () => {
-            let report;
-            try {
-                if (!reportId) {
-                    throw new Error('Report ID is required');
-                }
-                report = dashboard[reportId];
-                if (!report || report.referencedTables?.length !== 1) {
-                    throw new Error('Report not found');
-                }
-                const { ast: newAst, pivot: newPivot, schema: curSchema, } = await fetchASTFromQuillReport(report, client, schemaData.schemaWithCustomFields);
-                setBaseAst({ ...newAst, where: null });
-                await fetchReportFromASTHelper({
-                    baseAst: { ...newAst, where: null },
-                    newFormData: newAst.where,
-                    curPivot: newPivot,
-                    curSchema,
-                    previousReport: report,
-                });
-                await onSchemaChange();
-                setReportInfo(report);
-                const query = await fetchSqlQuery(newAst, null, false);
-                setActiveQuery(query);
-            }
-            catch (err) {
-                console.error(err);
-                setErrorMessage('Error when loading chart');
-            }
-        };
-        if (reportId) {
-            loadChart();
-        }
-    }, [dashboard[reportId || '']]);
-    useEffect(() => {
-        onSchemaChange();
-    }, [schemaData.schemaWithCustomFields, initialTableName, reportId]);
-    // Function to handle the insertion of expressions
-    const handleInsertion = (value) => {
-        const newFilterStack = [...filterStack];
-        if (newFilterStack.length > 0) {
-            const tabNode = {
-                leaf: false,
-                operator: 'and',
-                leftNode: null,
-                rightNode: null,
-            };
-            newFilterStack.push(tabNode);
-        }
-        const newItem = {
-            leaf: true,
-            operator: null,
-            leftNode: null,
-            rightNode: null,
-            value: value,
-        };
-        newFilterStack.push(newItem);
-        const tree = filterStackToFilterTree(newFilterStack);
-        if (tree) {
-            const newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
-            setFormData(newFormData);
-            const newAst = { ...baseAst };
-            newAst.where = newFormData;
-            setBaseAst(newAst);
-            fetchSqlQuery(newAst, newFormData);
         }
     };
-    /**
-     * Searches for the column by name and returns the field type.
-     *
-     * Searches the known schema and returns the fieldType of the first column
-     * it can find with the given name. Will first search through the current
-     * list of fields in the current query if any, then will default to searching
-     * through the whole schema.
-     *
-     * If more than one column exist with the given name, it will return the first
-     * one that it finds. This might not be the one that you intended.
-     *
-     * TODO: pass an optional table param to limit the search to a given table.
-     *
-     * @param columnName the name to search for.
-     * @returns the fieldType string or undefined if not found.
-     */
-    const getColumnTypeByName = (columnName) => {
-        const column = columns.find((col) => col.field === columnName);
-        return column?.fieldType;
-    };
-    const emptyPivotColumns = () => {
-        if (pivot && pivot.rowField && pivot.columnField) {
-            return [
-                { label: snakeAndCamelCaseToTitleCase(pivot.rowField) },
-                { label: snakeAndCamelCaseToTitleCase(pivot.columnField) },
-            ];
-        }
-        else if (pivot && pivot.rowField) {
-            return [
-                { label: snakeAndCamelCaseToTitleCase(pivot.rowField) },
-                ...(pivot.aggregations ?? [])
-                    .filter((a) => !!a.valueField)
-                    .map((agg) => ({
-                    label: snakeAndCamelCaseToTitleCase(agg.valueField),
-                })),
-            ];
+    const handleMultiStateChange = (state, fetchData, updateStateStack = true) => {
+        if (state.tables !== undefined) {
+            handleTablesChange(state.tables, false);
         }
-        else {
-            return (pivot?.aggregations ?? [])
-                .filter((a) => !!a.valueField)
-                .map((agg) => ({
-                label: snakeAndCamelCaseToTitleCase(agg.valueField),
-            }));
+        if (state.columns !== undefined) {
+            handleColumnsChange(state.columns, false, false);
         }
-    };
-    const [previousPage, setPreviousPage] = useState(0);
-    const [currentProcessing, setCurrentProcessing] = useState({
-        page: REPORT_BUILDER_PAGINATION,
-    });
-    const [numberOfRows, setNumberOfRows] = useState(0);
-    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
-    const [tableLoading, setTableLoading] = useState(false);
-    const resetProcessing = () => {
-        setCurrentProcessing({ page: REPORT_BUILDER_PAGINATION });
-    };
-    const onPageChange = (page, initiator = 'ReportBuilder') => {
-        const pagination = initiator === 'ReportBuilder'
-            ? REPORT_BUILDER_PAGINATION
-            : DEFAULT_PAGINATION;
-        if (currentProcessing.page &&
-            shouldFetchMore(pagination, page, previousPage, pivotData ? pivotData.rows.length : rows.length)) {
-            const newPagination = { ...currentProcessing.page, page };
-            const updatedProcessing = { ...currentProcessing, page: newPagination };
-            setCurrentProcessing(updatedProcessing);
-            handleRunQuery(updatedProcessing);
+        if (state.filterStack !== undefined) {
+            handleFilterStackChange(state.filterStack, false, false);
         }
-        if (page > previousPage) {
-            setPreviousPage(page);
+        if (state.pivot !== undefined) {
+            handlePivotChange(state.pivot, false, false);
         }
-    };
-    const onSortChange = (sort, isDelete) => {
-        if (pivot) {
-            let newPivot = null;
-            if (isDelete) {
-                setPivot((oldPivot) => {
-                    if (!oldPivot)
-                        return null;
-                    newPivot = {
-                        ...oldPivot,
-                        sort: undefined,
-                        sortField: undefined,
-                        sortDirection: undefined,
-                        sortFieldType: undefined,
-                    };
-                    return newPivot;
-                });
-            }
-            else {
-                setPivot((oldPivot) => {
-                    if (!oldPivot)
-                        return null;
-                    newPivot = {
-                        ...oldPivot,
-                        sort: true,
-                        sortField: sort.field,
-                        sortDirection: sort.direction,
-                        sortFieldType: getColumnTypeByName(sort.field),
-                    };
-                    return newPivot;
-                });
-            }
-            fetchReportFromASTHelper({
-                baseAst: baseAst,
-                curPivot: newPivot,
-            });
+        if (state.sort !== undefined) {
+            handleSortChange(state.sort, false, false);
         }
-        else {
-            const newAst = { ...baseAst };
-            if (!newAst.orderby) {
-                newAst.orderby = [];
-            }
-            const existingSortIndex = newAst.orderby.findIndex((item) => getFieldFromExpression(item.expr) === sort.field);
-            if (isDelete) {
-                if (existingSortIndex !== -1) {
-                    newAst.orderby.splice(existingSortIndex, 1);
-                }
-            }
-            else if (existingSortIndex !== -1) {
-                newAst.orderby[existingSortIndex] = {
-                    expr: { type: 'column_ref', column: sort.field },
-                    type: sort.direction.toUpperCase(),
-                };
-            }
-            else {
-                newAst.orderby.push({
-                    expr: { type: 'column_ref', column: sort.field },
-                    type: sort.direction.toUpperCase(),
-                });
-            }
-            setBaseAst(deepCopy(newAst));
-            fetchReportFromASTHelper({
-                baseAst: newAst,
-            });
-            setPreviousPage(0);
+        if (state.limit !== undefined) {
+            handleLimitChange(state.limit, false, false);
         }
-    };
-    const onLimitChange = (limit) => {
-        if (limit) {
-            if (pivot) {
-                setPivot((oldPivot) => {
-                    if (!oldPivot)
-                        return null;
-                    const newPivot = { ...oldPivot, rowLimit: limit };
-                    fetchReportFromASTHelper({ baseAst, curPivot: newPivot });
-                    return newPivot;
-                });
-            }
-            else {
-                const newAst = { ...baseAst };
-                if (client.databaseType.toLowerCase() === 'mssql') {
-                    newAst.top = {
-                        value: limit,
-                    };
-                }
-                else {
-                    newAst.limit = {
-                        seperator: '',
-                        value: [
-                            {
-                                type: 'number',
-                                value: limit,
-                            },
-                        ],
-                    };
-                }
-                setBaseAst(deepCopy(newAst));
-                fetchSqlQuery(deepCopy(newAst), undefined, true);
-            }
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, ...state },
+            ]);
         }
-        else {
-            resetLimit(true);
+        if (fetchData) {
+            fetchDataFromReportBuilderState({ ...reportBuilderState, ...state }, !!state.filterStack, !!state.tables);
         }
-        setOpenPopover(null);
     };
-    const fetchRowCount = async (processing, includeFilters) => {
-        if (!client || !activeQuery) {
+    const handleUndo = () => {
+        if (stateStack.length <= 1) {
             return;
         }
-        setRowCountIsLoading(true);
-        const tableInfo = await fetchResultsByQuery({
-            query: activeQuery,
-            client,
-            tenants,
-            processing,
-            customFields: schemaData.customFields,
-            filters: includeFilters ? specificDashboardFilters : undefined,
-            dateField: includeFilters
-                ? (tempReport.dateField ?? reportInfo?.dateField)
-                : undefined,
-            rowsOnly: false,
-            rowCountOnly: true,
-            filterMap: undefined,
-            dashboardName,
-        });
-        if (tableInfo.rowCount) {
-            setNumberOfRows(tableInfo.rowCount);
-            // @ts-ignore
-            setTempReport((tempReport) => ({
-                ...tempReport,
-                rowCount: tableInfo.rowCount,
-            }));
-        }
-        setRowCountIsLoading(false);
+        const previousState = stateStack[stateStack.length - 2];
+        setStateStack((prevStack) => prevStack.slice(0, -1));
+        handleMultiStateChange(previousState, true, false);
     };
-    const fetchRowCountFromAST = async (ast, where) => {
-        setRowCountIsLoading(true);
-        const tableData = await fetchTableByAST({ ...ast, where }, client, tenants, { page: REPORT_BUILDER_PAGINATION }, schemaData.customFields, false, true, dashboardName);
-        if (tableData.rowCount) {
-            setNumberOfRows(tableData.rowCount);
-            // @ts-ignore
-            setTempReport((tempReport) => ({
-                ...tempReport,
-                rowCount: tableData.rowCount,
-            }));
-        }
-        setRowCountIsLoading(false);
-    };
-    const handleRunQuery = async (processing, resetRows = false, includeFilters = false) => {
-        try {
-            const isPivotPagination = !!(pivot && pivotData);
-            setErrorMessage('');
-            setTableLoading(true);
-            const tableInfo = await fetchResultsByQuery({
-                query: isPivotPagination ? pivotData.pivotQuery : activeQuery,
-                comparisonQuery: pivot && pivotData ? pivotData.comparisonPivotQuery : undefined,
-                client,
-                tenants,
-                processing,
-                customFields: schemaData.customFields,
-                rowsOnly: true,
-                dashboardName,
-                pivot: pivot,
-                getPivotRowCount: false,
-            });
-            if (tableInfo.error) {
-                throw new Error(tableInfo.error);
-            }
-            else if (tableInfo.rows.length === 0) {
-                throw new Error('No data found');
-            }
-            if (!isPivotPagination) {
-                // fetching row count for non-pivot query
-                fetchRowCount(processing, includeFilters);
-                let tempRows = [...rows, ...tableInfo.rows];
-                if (resetRows) {
-                    tempRows = tableInfo.rows;
-                    setPreviousPage(0);
-                }
-                setRows(tempRows);
-                setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
-                setTempReport((tempReport) => ({
-                    ...tempReport,
-                    rows: tempRows,
-                    rowCount: tableInfo.rowCount ?? tempReport.rowCount,
-                }));
-                setColumns(tableInfo.columns);
-            }
-            else {
-                let tempRows = [...pivotData.rows, ...tableInfo.rows];
-                if (resetRows) {
-                    tempRows = tableInfo.rows;
-                    setPreviousPage(0);
-                }
-                setPivotData((oldPivotData) => {
-                    if (oldPivotData) {
-                        return {
-                            ...oldPivotData,
-                            rows: tempRows,
-                            columns: tableInfo.columns,
-                        };
-                    }
-                    return null;
-                });
-                setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
-            }
-            setTableLoading(false);
-        }
-        catch (e) {
-            setTableLoading(false);
-            setErrorMessage('Failed to run SQL query: ' + e.message);
-            setRows([]);
-            setColumns([]);
+    const fetchDataFromReportBuilderState = (state, filtersChanged, tablesChanged) => {
+        if (!client) {
             return;
         }
-    };
-    /**
-     * Return whether all columns have been selected (used to hide select all
-     * and show clear button).
-     */
-    const isSelectedAllColumns = () => {
-        if (selectedColumns.length < 1)
-            return false;
-        const allColumns = orderedColumnNames.filter((row) => {
-            const [table] = row.split('.');
-            const selectedTable = selectedColumns[0].split('.')[0];
-            return selectedTable === table;
+        const ast = reportBuilderStateToAst(state, client.databaseType?.toLowerCase() || 'postgresql');
+        fetchReportFromASTHelper({
+            ast,
+            pivot: state.pivot,
+            requiresNewFilteredUniqueValues: filtersChanged,
+            requiresNewUnfilteredUniqueValues: tablesChanged,
         });
-        return selectedColumns.length === allColumns.length;
     };
-    const nameToColumn = (name) => ({
-        type: 'expr',
-        expr: {
-            type: 'column_ref',
-            table: null,
-            column: name,
-        },
-        as: null,
-    });
-    const updateUniqueValue = (uniqueStrings, table) => {
-        const uniqueStringsObj = uniqueValues ?? {};
-        uniqueStringsObj[table] = uniqueStrings ?? {};
-        setUniqueValues(uniqueStringsObj);
-        updateFieldValuesMap(uniqueStringsObj, table);
-        return uniqueStringsObj;
-    };
-    const fetchReportFromASTHelper = async ({ baseAst, newFormData, curPivot, curSchema, previousReport, keepPivotHint = false, }) => {
-        const curFormData = newFormData !== undefined ? newFormData : formData;
+    const fetchReportFromASTHelper = async ({ ast, pivot, previousReport, requiresNewFilteredUniqueValues = false, requiresNewUnfilteredUniqueValues = false, }) => {
         let reportBuilderInfo = undefined;
+        setErrorMessage('');
+        const schema = filteredSchema;
         try {
-            setLoading(true);
+            if (!client || reportBuilderLoading) {
+                return;
+            }
+            setReportBuilderLoading(true);
             reportBuilderInfo = await fetchReportBuilderDataFromAST({
-                baseAst,
-                formData: curFormData,
-                schema: curSchema ?? schemaData.schemaWithCustomFields,
+                baseAst: ast,
+                schema,
                 client,
                 tenants,
-                pivot: curPivot ?? pivot,
-                previousFormData: formData,
-                currentTable,
+                pivot: pivot ?? undefined,
                 previousRelevant: {
-                    uniqueStrings: uniqueValues,
+                    uniqueStringsByTable: unfilteredUniqueValues,
                     dateRanges: dateRanges ?? {},
+                    uniqueStringsByColumn: requiresNewFilteredUniqueValues
+                        ? {}
+                        : columnUniqueValues,
                 },
-                report: previousReport ?? reportInfo ?? undefined,
+                requiresNewFilteredUniqueValues,
+                report: previousReport,
                 customFields: schemaData.customFields,
                 skipUniqueValues: true,
                 skipRowCount: true,
                 processing: { page: REPORT_BUILDER_PAGINATION },
-                dashboardName,
+                dashboardName: destinationDashboard,
             });
             if (reportBuilderInfo.error) {
                 throw new Error(reportBuilderInfo.error);
@@ -1072,58 +567,41 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         catch (err) {
             if (err instanceof Error) {
                 setErrorMessage(err.message);
-                setLoading(false);
+                setReportBuilderLoading(false);
                 return { error: true, message: err.message, rows: [] };
             }
-            setLoading(false);
+            setReportBuilderLoading(false);
             setErrorMessage('Failed to fetch');
             return { error: true, message: 'Failed to fetch', rows: [] };
         }
         if (!reportBuilderInfo) {
-            setLoading(false);
+            setReportBuilderLoading(false);
             setErrorMessage('Failed to fetch');
             return;
         }
         const cleanedReport = await cleanDashboardItem({
             item: reportBuilderInfo.report,
-            dashboardFilters: specificDashboardFilters,
+            dashboardFilters: [],
             client,
             customFields: schemaData.customFields,
             skipPivotFetch: true,
         });
+        // set tempReport
         setTempReport({
             ...cleanedReport,
             pagination: REPORT_BUILDER_PAGINATION,
         });
-        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);
-        setPreviousPage(0);
-        if (!(client.databaseType.toLowerCase() === 'bigquery') ||
+        setActiveQuery(reportBuilderInfo.query);
+        // table data
+        fetchRowCountFromAST(ast, ast.where);
+        setReportRows(reportBuilderInfo.rows);
+        setFormattedRows(reportBuilderInfo.formattedRows);
+        resetProcessing();
+        if (!(client.databaseType?.toLowerCase() === 'bigquery') ||
             (reportBuilderInfo.rows && reportBuilderInfo.rows.length > 0)) {
-            setColumns(reportBuilderInfo.columns);
-            setSelectedColumns(reportBuilderInfoColumns);
-        }
-        if (prevTable !== reportBuilderInfo.table) {
-            setSelectedOrderedColumns([]); // reset selected ordered columns
-        }
-        setPivot(reportBuilderInfo.pivot
-            ? setTypesOnPivot(reportBuilderInfo.pivot, reportBuilderInfo.columns)
-            : null);
-        if (!keepPivotHint) {
-            setPivotHint('');
+            setReportColumns(reportBuilderInfo.columns);
         }
         setPivotData(reportBuilderInfo.pivotData);
-        setDateRanges(reportBuilderInfo.dateRanges);
-        setFormattedRows(reportBuilderInfo.formattedRows);
-        setDataDisplayed(true);
-        setCurrentTable(reportBuilderInfo.table);
-        setFormData(curFormData);
         if (reportBuilderInfo.pivot) {
             setPivotRowField(reportBuilderInfo.pivot.rowField);
             setPivotColumnField(reportBuilderInfo.pivot.columnField);
@@ -1132,107 +610,109 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     valueField: reportBuilderInfo.pivot.valueField,
                     valueField2: reportBuilderInfo.pivot.valueField2,
                     aggregationType: reportBuilderInfo.pivot.aggregationType,
-                },
-            ]);
-        }
-        else {
-            setLoading(false);
-        }
-        setReportInfo(reportBuilderInfo.report);
-        const schema = curSchema ?? schemaData.schemaWithCustomFields;
-        const tableInfo = schema.find((tableInfo) => tableInfo.name === reportBuilderInfo?.table);
-        let query = reportBuilderInfo.query;
-        if (!query && tableInfo) {
-            const ast = baseAst ??
-                createBasicSelectASTFromColumns(tableInfo.columns, reportBuilderInfo.table);
-            const queryResult = await fetchSqlQuery({
-                ...ast,
-                where: curFormData,
-            }, curFormData, false);
-            if (queryResult.error) {
-                console.error(queryResult.error);
-            }
-            else {
-                query = queryResult;
-                setActiveQuery(queryResult);
-            }
-        }
-        else if (query) {
-            setActiveQuery(query);
+                },
+            ]);
         }
+        setPivot(reportBuilderInfo.pivot);
+        setPivotHint(reportBuilderInfo.pivotHint);
+        setDateRanges(reportBuilderInfo.dateRanges);
+        const tableNames = reportBuilderInfo.tables;
+        const columnInfo = tableNames.flatMap((table) => {
+            const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
+            if (!tableInfo) {
+                return [];
+            }
+            return tableInfo.columns.map((col) => ({ ...col, table }));
+        });
         // fetch unique values after everything else since it is the most expensive
-        if (prevTable !== reportBuilderInfo.table ||
-            !equal(prevFormData, curFormData)) {
-            try {
-                setUniqueValuesIsLoading(true);
+        try {
+            let uniqueStrings = filteredUniqueValues ?? unfilteredUniqueValues;
+            let uniqueValuesByColumn = columnUniqueValues;
+            if (requiresNewUnfilteredUniqueValues) {
+                fetchGlobalUniqueValues(columnInfo, tableNames);
+            }
+            if (requiresNewFilteredUniqueValues) {
                 if (reportBuilderInfo.pivot) {
-                    setUnresolvedReportMessage('Processing pivot selection options...');
-                }
-                if (!tableInfo) {
-                    throw new Error('Table info not found');
-                }
-                const uniqueStrings = await getUniqueStringValues(tableInfo.columns, reportBuilderInfo.table, client, tenants, schemaData.customFields, undefined, true, query, dashboardName);
-                const newUnique = updateUniqueValue(uniqueStrings, reportBuilderInfo.table);
-                let pivotChanged = false;
-                let newPivot;
-                if (reportBuilderInfo.pivot &&
-                    !isValidPivotForReport(reportBuilderInfo.pivot, newUnique, reportBuilderInfo.table, reportBuilderInfo.columns)) {
-                    const { pivot, hint } = makePivotValid(reportBuilderInfo.pivot, newUnique, reportBuilderInfo.table, reportBuilderInfo.columns);
-                    if (pivot) {
-                        setPivot(setTypesOnPivot(pivot, reportBuilderInfo.columns));
-                        newPivot = pivot;
-                        pivotChanged = true;
-                        setPivotHint(hint);
-                    }
-                    else {
-                        setUnresolvedReportMessage('Not a valid pivot');
-                    }
+                    // if there's a pivot, these values would have had to been fetched
+                    uniqueStrings = reportBuilderInfo.uniqueStringsByTable;
+                    uniqueValuesByColumn = reportBuilderInfo.uniqueStringsByColumn;
                 }
                 else {
-                    setUnresolvedReportMessage('');
-                }
-                setUniqueValuesIsLoading(false);
-                if (pivotChanged) {
-                    fetchReportFromASTHelper({
-                        baseAst,
-                        newFormData: curFormData,
-                        curPivot: newPivot,
-                        curSchema,
-                        previousReport,
-                        keepPivotHint: true,
+                    setFilteredUniqueValuesIsLoading(true);
+                    const starQuery = await fetchSqlQuery(createSelectStarFromAst(ast), client);
+                    uniqueStrings = await getUniqueStringValuesByTable({
+                        columns: columnInfo,
+                        tables: tableNames,
+                        client,
+                        tenants,
+                        customFields: schemaData.customFields ?? undefined,
+                        withExceededColumns: true,
+                        dashboardName: destinationDashboard,
+                        queryTemplate: starQuery.query,
+                    });
+                    uniqueValuesByColumn = {};
+                    reportBuilderInfo.reportBuilderColumns.forEach((col) => {
+                        uniqueValuesByColumn[col.alias || col.field] =
+                            uniqueStrings[col.table || '']?.[col.field] ?? [];
                     });
-                }
-                else {
-                    setLoading(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: [] };
+            setFilteredUniqueValues(uniqueStrings);
+            setFilteredUniqueValuesIsLoading(false);
+            setColumnUniqueValues(uniqueValuesByColumn);
+            setReportBuilderLoading(false);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setErrorMessage(err.message);
+                setReportBuilderLoading(false);
+                return { error: true, message: err.message, rows: [] };
             }
+            setReportBuilderLoading(false);
+            setErrorMessage('Failed to fetch');
+            return { error: true, message: 'Failed to fetch', rows: [] };
         }
-        else {
-            setLoading(false);
+    };
+    const fetchRowCountFromAST = async (ast, where) => {
+        setRowCountIsLoading(true);
+        if (!client) {
+            return;
+        }
+        const tableData = await fetchTableByAST({ ...ast, where }, client, tenants, { page: REPORT_BUILDER_PAGINATION }, schemaData.customFields, false, true, destinationDashboard);
+        if (tableData.rowCount) {
+            setNumberOfRows(tableData.rowCount);
+            // @ts-ignore
+            setTempReport((tempReport) => ({
+                ...tempReport,
+                rowCount: tableData.rowCount,
+            }));
         }
+        setRowCountIsLoading(false);
     };
     const fetchAstFromPromptHelper = async (overridePrompt) => {
         let astInfo = {};
         const prompt = overridePrompt || aiPrompt;
+        if (!client) {
+            return;
+        }
         if (!prompt) {
             setErrorMessage('Please supply a prompt.');
             return;
         }
         try {
-            setLoading(true);
+            setReportBuilderLoading(true);
             setAskAILoading(true);
             setErrorMessage('');
-            astInfo = await fetchAndProcessASTFromPrompt(prompt, schemaData.schemaWithCustomFields, client, pivot ?? undefined, activeQuery, currentTable, dashboardName, tenants);
+            astInfo = await fetchAndProcessASTFromPrompt({
+                aiPrompt: prompt,
+                schema: filteredSchema,
+                client,
+                prevPivot: pivot ?? undefined,
+                currentQuery: activeQuery,
+                prevTable: tables?.[0]?.name,
+                dashboardName: destinationDashboard,
+                tenants,
+            });
             if (astInfo.error) {
                 throw new Error(astInfo.error);
             }
@@ -1241,246 +721,263 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             if (err instanceof Error) {
                 setErrorMessage(err.message);
             }
-            setLoading(false);
+            setReportBuilderLoading(false);
             setAskAILoading(false);
             return;
         }
         // check if pivot works with ReportBuilder constraints
-        if (uniqueValues[currentTable ?? ''] &&
+        if (Object.keys(columnUniqueValues).length > 0 &&
             astInfo.pivot &&
-            !isValidPivotForReport(astInfo.pivot)) {
+            !isValidPivotForReport(astInfo.pivot, columnUniqueValues, reportColumns)) {
             astInfo.pivot = null;
             astInfo.ast.groupby = null;
         }
-        const _tables = getTableNames(astInfo.ast);
-        const _table = _tables[0] ? _tables[0] : '';
-        const _columns = schemaData.schemaWithCustomFields.find((table) => {
-            return table.name === _table;
-        })?.columns;
-        // parse the whereAst first
-        const filterTree = astToFilterTree(astInfo.whereAST, client.databaseType?.toLowerCase(), _columns);
-        const cleanAst = filterTree
-            ? filterTreeToAst(filterTree, client.databaseType?.toLowerCase())
-            : null;
-        setFormData(cleanAst);
-        astInfo.ast.where = cleanAst;
-        setBaseAst(astInfo.ast);
-        fetchSqlQuery(astInfo.ast, cleanAst, false);
         setAskAILoading(false);
-        await fetchReportFromASTHelper({
-            baseAst: astInfo.ast,
-            newFormData: cleanAst,
-            curPivot: astInfo.pivot,
+        const newState = astToReportBuilderState(astInfo.ast, client.databaseType || 'postgresql', filteredSchema);
+        handleMultiStateChange({ ...newState, pivot: astInfo.pivot }, true);
+    };
+    const fetchGlobalUniqueValues = async (columns, tables) => {
+        if (!client) {
+            return;
+        }
+        setUnfilteredUniqueValuesIsLoading(true);
+        const uniqueStrings = await getUniqueStringValuesByTable({
+            columns,
+            tables,
+            client,
+            tenants,
+            customFields: schemaData.customFields ?? undefined,
+            withExceededColumns: true,
+            dashboardName: destinationDashboard,
         });
+        setUnfilteredUniqueValues(uniqueStrings);
+        setUnfilteredUniqueValuesIsLoading(false);
     };
-    const pivotFormData = (pivot) => {
-        const yAxisField = pivot.columnField ?? disambiguatedValueField(pivot) ?? '';
-        const yAxisLabel = tempReport?.yAxisFields && tempReport?.yAxisFields?.length > 0
-            ? (tempReport.yAxisFields[0]?.label ?? '')
-            : (disambiguatedValueField(pivot) ?? '');
-        // date labels for pivots should be treated like strings since they are
-        const yAxisIsDate = pivot.columnField
-            ? isDateField(pivot.columnFieldType ?? '')
-            : false;
-        const chartType = tempReport?.chartType ?? (pivot.rowField ? 'column' : 'metric');
-        const result = {
-            pivot,
-            chartType: chartType,
-            xAxisField: pivot.rowField
-                ? pivot.rowField
-                : disambiguatedValueField(pivot),
-            xAxisFormat: isDateType(pivot.rowFieldType ?? '')
-                ? 'string'
-                : isNumberType(pivot.rowFieldType ?? '')
-                    ? 'whole_number'
-                    : 'string',
-            xAxisLabel: tempReport?.xAxisLabel || pivot.rowField,
-            yAxisFields: [
-                {
-                    field: yAxisField,
-                    label: yAxisLabel,
-                    format: yAxisIsDate
-                        ? 'string'
-                        : tempReport?.yAxisFields && tempReport?.yAxisFields?.length > 0
-                            ? (tempReport?.yAxisFields[0]?.format ?? 'whole_number')
-                            : (tempReport?.columns.find((col) => col.field === disambiguatedValueField(pivot))?.format ?? 'whole_number'),
-                },
-            ],
-        };
-        return result;
+    const resetProcessing = () => {
+        setCurrentProcessing({ page: REPORT_BUILDER_PAGINATION });
+        setPreviousPage(0);
     };
-    const makePivotValid = (pivot, uniqueValuesForPivot, reportTable, reportColumns) => {
-        if (!pivot) {
-            return { pivot: null, hint: '' };
-        }
-        // try flipping row and column field
-        let newPivot = {
-            ...pivot,
-            rowField: pivot.columnField,
-            columnField: pivot.rowField,
-        };
-        if (isValidPivotForReport(newPivot, uniqueValuesForPivot, reportTable, reportColumns)) {
-            return {
-                pivot: newPivot,
-                hint: 'Flipping pivot row and column fields to maintain validity',
-            };
+    const handlePagination = async (processing) => {
+        try {
+            if (!client) {
+                return;
+            }
+            const isPivotPagination = !!(pivot && pivotData);
+            setErrorMessage('');
+            setTableLoading(true);
+            const tableInfo = await fetchResultsByQuery({
+                query: isPivotPagination ? pivotData.pivotQuery : activeQuery,
+                comparisonQuery: pivot && pivotData ? pivotData.comparisonPivotQuery : undefined,
+                client,
+                tenants,
+                processing,
+                customFields: schemaData.customFields,
+                rowsOnly: true,
+                dashboardName: destinationDashboard,
+                pivot: pivot,
+                getPivotRowCount: false,
+            });
+            if (tableInfo.error) {
+                throw new Error(tableInfo.error);
+            }
+            else if (tableInfo.rows.length === 0) {
+                throw new Error('No data found');
+            }
+            if (!isPivotPagination) {
+                const tempRows = [...reportRows, ...tableInfo.rows];
+                setReportRows(tempRows);
+                setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+                setTempReport((tempReport) => ({
+                    ...tempReport,
+                    rows: tempRows,
+                    rowCount: tableInfo.rowCount ?? tempReport.rowCount,
+                }));
+            }
+            else {
+                const tempRows = [...pivotData.rows, ...tableInfo.rows];
+                setPivotData((oldPivotData) => {
+                    if (oldPivotData) {
+                        return {
+                            ...oldPivotData,
+                            rows: tempRows,
+                            columns: tableInfo.columns,
+                        };
+                    }
+                    return null;
+                });
+                setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            }
+            setTableLoading(false);
         }
-        // try removing column field
-        newPivot = {
-            ...pivot,
-            rowField: pivot.rowField,
-            columnField: undefined,
-        };
-        if (isValidPivotForReport(newPivot, uniqueValuesForPivot, reportTable, reportColumns)) {
-            return {
-                pivot: newPivot,
-                hint: 'Removing column field to maintain validity',
-            };
+        catch (e) {
+            setTableLoading(false);
+            setErrorMessage('Failed to run SQL query: ' + e.message);
+            setReportRows([]);
+            setReportColumns([]);
+            return;
         }
-        return { pivot: null, hint: '' };
     };
-    const isValidPivotForReport = (pivot, uniqueValuesForPivot, reportTable, reportColumns) => {
-        if (!isValidPivot(pivot).valid) {
-            return false;
-        }
-        const uniqueValuesToCheck = uniqueValuesForPivot ?? uniqueValues;
-        // check that pivot rows and columns
-        const pivotTable = reportTable ?? currentTable;
-        const pivotColumns = reportColumns ?? columns;
-        const possibleOptions = getPossiblePivotFieldOptions(pivotColumns, uniqueValuesToCheck[pivotTable] ?? {});
-        if (pivot.rowField &&
-            pivot.columnField &&
-            pivot.rowField === pivot.columnField) {
-            return false;
+    const onPageChange = (page, initiator = 'ReportBuilder') => {
+        const pagination = initiator === 'ReportBuilder'
+            ? REPORT_BUILDER_PAGINATION
+            : DEFAULT_PAGINATION;
+        if (currentProcessing.page &&
+            shouldFetchMore(pagination, page, previousPage, pivotData ? pivotData.rows.length : reportRows.length)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            handlePagination(updatedProcessing);
         }
-        if (pivot.rowField && !possibleOptions.rowFields.includes(pivot.rowField)) {
-            return false;
+        if (page > previousPage) {
+            setPreviousPage(page);
         }
-        if (pivot.columnField &&
-            !possibleOptions.columnFields.includes(pivot.columnField)) {
-            return false;
+    };
+    const onSortChange = (newSort, isDelete) => {
+        if (!newSort.field) {
+            return;
         }
-        for (const agg of pivot.aggregations ?? []) {
-            if (agg.valueField &&
-                !possibleOptions.valueFields.includes(agg.valueField)) {
-                return false;
+        if (pivot) {
+            let newPivot = null;
+            if (isDelete) {
+                newPivot = {
+                    ...pivot,
+                    sort: undefined,
+                    sortField: undefined,
+                    sortDirection: undefined,
+                    sortFieldType: undefined,
+                };
+            }
+            else {
+                newPivot = {
+                    ...pivot,
+                    sort: true,
+                    sortField: newSort.field,
+                    sortDirection: newSort.direction,
+                    sortFieldType: reportColumns.find((col) => col.field === newSort.field)?.fieldType,
+                };
             }
+            handlePivotChange(newPivot, true);
         }
-        if (!pivot.aggregations || pivot.aggregations.length === 0) {
-            return false;
+        else {
+            const updatedSort = [...sort];
+            const existingSortIndex = updatedSort.findIndex((item) => item.field === newSort.field);
+            if (isDelete) {
+                if (existingSortIndex !== -1) {
+                    updatedSort.splice(existingSortIndex, 1);
+                }
+            }
+            else if (existingSortIndex !== -1) {
+                updatedSort[existingSortIndex] = {
+                    field: newSort.field,
+                    direction: newSort.direction,
+                };
+            }
+            else {
+                updatedSort.push({
+                    field: newSort.field,
+                    direction: newSort.direction,
+                });
+            }
+            handleSortChange(updatedSort, true);
         }
-        return true;
     };
-    const handleDeleteColumn = (name) => {
-        if (!baseAst || !baseAst.columns.length || selectedColumns.length === 1) {
-            clearAllState();
-            return;
+    const onLimitChange = (limit) => {
+        if (limit) {
+            if (pivot) {
+                const newPivot = { ...pivot, rowLimit: limit };
+                handlePivotChange(newPivot, true);
+            }
+            else {
+                handleLimitChange({ value: limit }, true);
+            }
         }
-        setSelectedColumns((selectedColumns) => selectedColumns.filter((column) => !column.endsWith(name)));
-        const columns = baseAst.columns.filter((col) => {
-            if (col.expr.type === 'column_ref') {
-                return (col.expr.column !== name &&
-                    (!col.expr.column.expr || col.expr.column.expr.value !== name));
+        else {
+            if (pivot) {
+                const newPivot = { ...pivot, rowLimit: undefined };
+                handlePivotChange(newPivot, true);
             }
-            else if (col.as) {
-                return col.as !== name;
+            else {
+                handleLimitChange(null, true);
             }
-            return col.expr.value !== name;
-        });
-        if (columns.length === 0) {
-            clearAllState();
-            return;
         }
-        const newAst = deepCopy({ ...baseAst, columns });
-        setBaseAst(newAst);
-        fetchSqlQuery(newAst);
     };
-    const DraggableItem = ({ id, label, onDelete }) => {
-        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
-        const style = {
-            transform: DND_CSS.Transform.toString(transform),
-            transition,
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
         };
-        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 || tableLoading }) }));
-    };
-    function DraggableColumns() {
-        const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        }));
-        // When a drag event ends, switch the item order.
-        function handleDragEnd(event) {
-            const { active, over } = event;
-            if (!active || !over)
+    }, []);
+    useEffect(() => {
+        if (!client) {
+            return;
+        }
+        if (client.featureFlags?.['recommendedPivotsDisabled'] !== undefined) {
+            setPivotRecommendationsEnabledState(!client.featureFlags?.['recommendedPivotsDisabled']);
+        }
+        if (!initialTableName && !reportId && client.publicKey) {
+            clearAllState();
+        }
+    }, [client]);
+    // Initialize ReportBuilder with a report
+    useEffect(() => {
+        const loadChart = async () => {
+            let report;
+            if (!client) {
                 return;
-            if (active.id !== over.id) {
-                const oldIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${active.id}`));
-                const newIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${over.id}`));
-                const newOrder = arrayMove(orderedColumnNames, oldIndex, newIndex);
-                setOrderedColumnNames(newOrder);
-                const orderedSelectedColumns = [];
-                for (const value of newOrder) {
-                    const [, ...rest] = value.split('.'); // table.field
-                    const column = rest.join('.');
-                    if (selectedColumns.includes(value)) {
-                        orderedSelectedColumns.push(column);
-                    }
-                }
-                setSelectedOrderedColumns(orderedSelectedColumns);
-                // If there is already an AST saved in state, only update the columns
-                // otherwise fill in the defaultAST shape and also update columns.
-                const fallbackAST = {
-                    ...defaultAST,
-                    from: [{ ...defaultTable }],
-                    columns: orderedSelectedColumns.map((name) => nameToColumn(name)),
-                };
-                const newBaseAst = {
-                    ...baseAst,
-                    columns: baseAst?.columns.length
-                        ? orderedSelectedColumns.map((name) => nameToColumn(name))
-                        : baseAst?.columns,
-                };
-                const newAst = baseAst ? newBaseAst : fallbackAST;
-                setBaseAst(newAst);
-                fetchSqlQuery(newAst, undefined, false);
             }
-        }
-        const columnNamesInAst = baseAst?.columns
-            .map((col) => {
-            if (col.expr.type === 'column_ref' && col.expr.column) {
-                if (typeof col.expr.column === 'string') {
-                    return col.expr.column;
+            try {
+                if (!reportId) {
+                    throw new Error('Report ID is required');
                 }
-                else {
-                    return col.expr.column.expr.value;
+                report = dashboard[reportId];
+                if (!report) {
+                    throw new Error('Report not found');
                 }
+                const { ast: newAst, pivot: newPivot } = await fetchASTFromQuillReport(report, client, filteredSchema);
+                const initialState = astToReportBuilderState(newAst, client.databaseType || 'postgresql', filteredSchema);
+                setTempReport(report);
+                handleMultiStateChange({
+                    ...initialState,
+                    pivot: newPivot ?? null,
+                }, true);
             }
-            else if (col.as) {
-                if (typeof col.as === 'string') {
-                    return col.as;
-                }
-                else {
-                    return col.as.expr?.value;
-                }
+            catch (err) {
+                console.error(err);
+                setErrorMessage('Error when loading chart');
             }
-            else if (col.expr && col.expr.type === 'aggr_func') {
-                if (col.expr.args) {
-                    return `${col.expr.name.toLowerCase()}(${col.expr.args.expr.value})`;
-                }
-                return col.expr.name;
+        };
+        if (reportId && client) {
+            loadChart();
+        }
+    }, [dashboard[reportId || ''], client]);
+    useEffect(() => {
+        if (initialTableName) {
+            const tableColumns = filteredSchema.find((table) => {
+                return table.name === initialTableName;
+            })?.columns ?? [];
+            if (tableColumns.length > 0) {
+                handleMultiStateChange({
+                    ...EMPTY_REPORT_BUILDER_STATE,
+                    tables: [{ name: initialTableName }],
+                    columns: tableColumns.map((col) => ({
+                        field: col.field,
+                        table: initialTableName,
+                    })),
+                }, true);
             }
-            return col.expr.value;
-        })
-            .filter(
-        // remove duplicate entries
-        (value, index, self) => value && self.indexOf(value) === index) ?? [];
-        return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columnNamesInAst, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        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 } })] }) }) }));
-    }
+        }
+    }, [filteredSchema, initialTableName]);
+    useEffect(() => {
+        if (isChartBuilderOpen === false) {
+            onCloseChartBuilder && onCloseChartBuilder();
+        }
+    }, [isChartBuilderOpen]);
     return (_jsxs("div", { style: { backgroundColor: theme?.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsxs("div", { ref: parentRef, style: {
                     display: 'flex',
@@ -1489,72 +986,37 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     overflowY: 'auto',
                     boxSizing: 'border-box',
                     ...containerStyle,
-                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                            if (!orderedColumnNames) {
-                                                return;
-                                            }
+                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, { columns: columns, DraggableColumnComponent: DraggableColumnComponent, onColumnOrderChange: handleColumnsChange, loading: loading }), _jsx(SecondaryButtonComponent, { onClick: () => {
                                             if (!openPopover) {
                                                 setOpenPopover('AddColumnModal');
                                             }
-                                        }, label: "Select columns", disabled: tableLoading || loading }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                        }, label: "Select columns", disabled: loading }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                             if (!isOpen) {
                                                 // delay onClose callback so onClick no-ops
                                                 setTimeout(() => {
-                                                    setActiveEditItem(null);
                                                     setOpenPopover(null);
                                                 }, 100);
                                             }
-                                        }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
-                                                setActiveEditItem(null);
+                                        }, title: "Select columns", children: _jsx(NewAddColumnModal, { onSave: (tables, columns) => {
+                                                handleMultiStateChange({
+                                                    ...EMPTY_REPORT_BUILDER_STATE,
+                                                    tables,
+                                                    columns,
+                                                }, true);
                                                 setOpenPopover(null);
-                                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (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;
-                                                    ast.top = 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: {
+                                            }, 
+                                            // selectedTables={tables} // Bring back after select table join UI
+                                            selectedColumns: columns, schema: filteredSchema, schemaLoading: schemaData.isSchemaLoading, TextInputComponent: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), filterStack.length > 0 && (_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: !tableLoading && !loading, dashboardName: dashboardName }) })), _jsxs("div", { style: {
+                                        }, children: _jsx(FilterStack, { client: client, filterStack: filterStack, handleFilterStackChange: handleFilterStackChange, schemaData: schemaData, uniqueValues: unfilteredUniqueValues, uniqueValuesIsLoading: unfilteredUniqueValuesIsLoading, tables: tables, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: !loading, dashboardName: destinationDashboard }) })), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'flex-start',
-                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
-                                                    if (!selectedColumns ||
-                                                        selectedColumns.length === 0 ||
-                                                        loading) {
-                                                        return;
-                                                    }
+                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: columns.length === 0 || loading, onClick: () => {
                                                     if (!openPopover) {
-                                                        const value = orderedColumnNames[0];
-                                                        const [, ...rest] = value.split('.'); // table.field
-                                                        const column = rest.join('.');
-                                                        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');
                                                     }
                                                 }, label: 'Add filter' }), _jsx("div", { style: {
@@ -1562,134 +1024,56 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                     ...(openPopover === 'AddFilterPopover' && { top: 12 }),
                                                 }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
                                                         if (!isOpen) {
-                                                            // delay onClose callback so onClick no-ops
                                                             setOpenPopover(null);
-                                                            setTimeout(() => {
-                                                                clearCheckboxes();
-                                                                setActiveEditItem(null);
-                                                            }, 300);
                                                         }
-                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: schemaData.schemaWithCustomFields.find((s) => s.name === currentTable ||
-                                                            s.displayName === currentTable) ?? schemaData.schemaWithCustomFields[0], fieldValuesMap: fieldValuesMap, fieldValuesMapIsLoading: uniqueValuesIsLoading, onSubmitFilter: (filter) => {
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: filteredSchema, tables: tables.map((table) => table.name), fieldValuesMap: filteredUniqueValues ?? unfilteredUniqueValues, fieldValuesMapIsLoading: filteredUniqueValuesIsLoading ||
+                                                            unfilteredUniqueValuesIsLoading, onSubmitFilter: (filter) => {
                                                             setOpenPopover(null);
-                                                            handleInsertion(filter);
-                                                        }, 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, pivotAggregations: pivotAggregations, setPivotAggregations: setPivotAggregations, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, 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);
-                                            resetLimit();
-                                            resetSort(true);
-                                            setPreviousPage(0);
-                                            const formattedRows = formatRows(rows, columns, false);
-                                            setFormattedRows(formattedRows);
-                                        }, selectPivot: async (selectedPivot, uniqueValues, dateRange, pivotTable) => {
+                                                            handleFilterInsertion(filter);
+                                                        }, hideTableName: tables.length === 1, 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, pivotAggregations: pivotAggregations, setPivotAggregations: setPivotAggregations, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, 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: reportRows, columns: reportColumnsToStateColumns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                            handlePivotChange(null, sortOrLimitWasReset);
+                                        }, selectPivot: async (selectedPivot) => {
                                             if (!selectedPivot)
                                                 return;
-                                            // const newAst = { ...baseAst };
-                                            // newAst.orderby = null;
-                                            if (selectedPivot.rowFieldType === 'date') {
-                                                selectedPivot['sort'] = true;
-                                                selectedPivot['sortDirection'] = 'ASC';
-                                            }
-                                            // setBaseAst(newAst); // trigger refetch
-                                            let dateBucket = undefined;
-                                            if (dateRange) {
-                                                dateBucket = getDateBucketFromRange(dateRange);
-                                            }
-                                            const processedPivot = setTypesOnPivot(selectedPivot, columns);
-                                            setPivot(processedPivot);
-                                            resetLimit();
-                                            resetSort();
-                                            setPreviousPage(0);
-                                            setPivotHint('');
-                                            try {
-                                                if (!pivotTable) {
-                                                    setTableLoading(true);
-                                                    pivotTable = await generatePivotTable({
-                                                        pivot: processedPivot,
-                                                        dateBucket,
-                                                        report: tempReport,
-                                                        client,
-                                                        uniqueValues,
-                                                        dashboardName,
-                                                        tenants,
-                                                        additionalProcessing: {
-                                                            page: REPORT_BUILDER_PAGINATION,
-                                                        },
-                                                    });
-                                                }
-                                                resetProcessing();
-                                                setPivotData(pivotTable || []);
-                                                setTempReport({
-                                                    ...tempReport,
-                                                    ...pivotFormData(processedPivot),
-                                                });
-                                                const formattedRows = formatRows(pivotTable.rows, columns, true, selectedPivot.aggregationType, dateBucket);
-                                                setFormattedRows(formattedRows);
-                                                setErrorMessage('');
-                                                setPivotError(undefined);
-                                            }
-                                            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, dashboardName: dashboardName }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], uniqueValuesIsLoading: uniqueValuesIsLoading, setPivotRowField: (value) => {
-                                            const prev = pivotRowField;
+                                            handlePivotChange(selectedPivot, true);
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: columnUniqueValues, uniqueValuesIsLoading: filteredUniqueValuesIsLoading ||
+                                            unfilteredUniqueValuesIsLoading, disabled: !columns.length || tableLoading || loading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, report: tempReport, dashboardName: destinationDashboard }), pivot && (_jsx(PivotForm, { columns: reportColumnsToStateColumns, uniqueValues: columnUniqueValues, uniqueValuesIsLoading: filteredUniqueValuesIsLoading ||
+                                            unfilteredUniqueValuesIsLoading, setPivotRowField: (value) => {
                                             setPivotRowField(value);
-                                            updatePivot(value, 'rowField', prev);
+                                            updatePivot(value, 'rowField');
                                         }, setPivotColumnField: (value) => {
-                                            const prev = pivotColumnField;
                                             setPivotColumnField(value);
-                                            updatePivot(value, 'columnField', prev);
+                                            updatePivot(value, 'columnField');
                                         }, setPivotAggregations: (value) => {
-                                            const prev = pivotAggregations;
                                             setPivotAggregations(value);
-                                            updatePivot(value, 'aggregations', prev);
+                                            updatePivot(value, 'aggregations');
                                         }, onDelete: () => {
-                                            setPivot(null);
-                                            setPivotError(undefined);
-                                            setPivotHint('');
-                                            setPivotData(null);
-                                            resetLimit();
-                                            resetSort();
-                                            setPreviousPage(0);
-                                            const formattedRows = formatRows(rows, columns, false);
-                                            setFormattedRows(formattedRows);
+                                            handlePivotChange(null, sortOrLimitWasReset);
                                         }, isLoading: tableLoading || loading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotAggregations: pivotAggregations, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer, DeleteButtonComponent: DeleteButtonComponent, pivotHint: pivotHint }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && pivot.sortField && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: _jsx(SortSentence, { sortField: pivot.sortField, sortDirection: pivot.sortDirection || 'ASC', columns: pivotData?.columns ?? [], setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
+                                        }, children: _jsx(SortSentence, { sortField: pivot.sortField, sortDirection: pivot.sortDirection || 'ASC', columns: pivotData?.columns ?? [], setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
                                                 onSortChange({
                                                     field: pivot.sortField ?? '',
                                                     direction: pivot.sortDirection ?? 'ASC',
                                                 }, true);
                                             }, onSave: async (column, direction) => {
                                                 onSortChange({ field: column, direction });
-                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && baseAst.orderby.length > 0 && (_jsx("div", { style: {
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-pivot`) })), sort && sort.length > 0 && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortField: sortData.expr?.column || sortData.expr?.value, sortDirection: sortData.type, columns: columns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                                onSortChange({
-                                                    field: sortData.expr?.column || sortData.expr?.value,
-                                                    direction: sortData.type,
-                                                }, true);
+                                        }, children: sort.map((sortData, id) => (_jsx(SortSentence, { sortField: sortData.field, sortDirection: sortData.direction, columns: reportColumnsToStateColumns, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                onSortChange(sortData, true);
                                             }, onSave: (column, direction) => {
                                                 onSortChange({ field: column, direction });
-                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst ||
-                                            !dataDisplayed ||
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: columns.length === 0 ||
                                             loading ||
                                             tableLoading ||
-                                            mssqlSortWarning, onClick: () => {
-                                            if (!selectedColumns || selectedColumns.length === 0) {
-                                                return;
-                                            }
+                                            !!mssqlSortWarning, onClick: () => {
                                             if (!openPopover) {
                                                 setOpenPopover('AddSortPopover');
                                             }
@@ -1698,103 +1082,25 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             ...(openPopover === 'AddSortPopover' && { top: 12 }),
                                         }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                                 if (!isOpen) {
-                                                    setActiveEditItem(null);
                                                     setOpenPopover(null);
                                                 }
-                                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivotData ? pivotData.columns : columns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
-                                                    if (column === '')
-                                                        return;
-                                                    if (pivot) {
-                                                        const sortFieldType = pivot.aggregations?.some((agg) => column === agg.valueField || column === 'count')
-                                                            ? 'number'
-                                                            : pivot.rowFieldType;
-                                                        const tempPivot = setTypesOnPivot({
-                                                            ...pivot,
-                                                            sort: true,
-                                                            sortDirection: direction,
-                                                            sortField: column,
-                                                            sortFieldType: sortFieldType,
-                                                        }, columns);
-                                                        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,
-                                                                dateBucket,
-                                                                report: tempReport,
-                                                                client,
-                                                                uniqueValues: uniqueValues[currentTable],
-                                                                dashboardName,
-                                                                tenants,
-                                                                additionalProcessing: {
-                                                                    page: REPORT_BUILDER_PAGINATION,
-                                                                },
-                                                            });
-                                                            resetProcessing();
-                                                            setErrorMessage('');
-                                                            setPivotData(pivotedData || []);
-                                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
-                                                            setFormattedRows(formattedRows);
-                                                        }
-                                                        catch (e) {
-                                                            if (e instanceof Error)
-                                                                setPivotError(e.message);
-                                                        }
-                                                        setOpenPopover(null);
-                                                        setBaseAst(deepCopy(baseAst));
-                                                        return;
-                                                    }
-                                                    else {
-                                                        const newAst = { ...baseAst };
-                                                        if (!newAst.orderby)
-                                                            newAst.orderby = [];
-                                                        const existingSortIndex = newAst.orderby.findIndex((item) => getFieldFromExpression(item.expr) === column);
-                                                        if (existingSortIndex !== -1) {
-                                                            newAst.orderby[existingSortIndex] = {
-                                                                expr: { type: 'column_ref', column },
-                                                                type: direction,
-                                                            };
-                                                        }
-                                                        else {
-                                                            newAst.orderby.push({
-                                                                expr: { type: 'column_ref', column },
-                                                                type: direction,
-                                                            });
-                                                        }
-                                                        // look through the columns
-                                                        setOpenPopover(null);
-                                                        setBaseAst(deepCopy(newAst));
-                                                        fetchSqlQuery(deepCopy(newAst));
-                                                    }
-                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), (baseAst &&
-                                        ((baseAst.limit && baseAst.limit.value?.length > 0) ||
-                                            (baseAst.top && baseAst.top.value))) ||
-                                        pivot?.rowLimit ? (_jsx("div", { style: {
+                                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivotData
+                                                    ? pivotData.columns
+                                                    : reportColumnsToStateColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
+                                                    onSortChange({ field: column, direction });
+                                                    setOpenPopover(null);
+                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), limit || pivot?.rowLimit ? (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: _jsx(LimitSentence, { limit: baseAst.limit?.value?.[0]?.value ||
-                                                baseAst.top?.value ||
-                                                pivot?.rowLimit ||
-                                                0, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                        }, children: _jsx(LimitSentence, { limit: limit?.value || pivot?.rowLimit || 0, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
                                                 onLimitChange(null);
+                                                setOpenPopover(null);
                                             }, onSave: (limit) => {
                                                 onLimitChange(limit);
-                                            }, 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;
-                                                    }
-                                                    if (!baseAst) {
-                                                        return;
-                                                    }
+                                                setOpenPopover(null);
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: columns.length === 0 || loading || tableLoading, onClick: () => {
                                                     if (!openPopover) {
                                                         setOpenPopover('AddLimitPopover');
                                                     }
@@ -1803,37 +1109,36 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                     ...(openPopover === 'AddLimitPopover' && { top: 12 }),
                                                 }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
                                                         if (!isOpen) {
-                                                            setActiveEditItem(null);
                                                             setOpenPopover(null);
                                                         }
                                                     }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
                                                             onLimitChange(limit);
+                                                            setOpenPopover(null);
                                                         } }) }) })] }))] }), _jsx("div", { style: { width: '100%', minHeight: '30vh' } })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, 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_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
-                                                ? askAIInputWidth
-                                                : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: askedAQuestion
-                                                ? 'Ask a follow-up question...'
-                                                : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: () => {
-                                                fetchAstFromPromptHelper();
-                                            }, 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 ? pivotData?.rowCount : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
-                                    ? pivotData?.columns || emptyPivotColumns()
-                                    : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                    visibility: askAIInputWidth === -1 ? 'hidden' : 'visible',
+                                }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: 'Ask a question...' }), _jsx(QuillToolTip, { enabled: tables.length > 1, text: "Ask AI does not support joined tables right now", textStyle: {
+                                                maxWidth: '250px',
+                                                whiteSpace: 'normal',
+                                            }, displayBelow: true, children: _jsx(ButtonComponent, { disabled: tables.length > 1, onClick: () => {
+                                                    if (tables.length <= 1) {
+                                                        fetchAstFromPromptHelper();
+                                                    }
+                                                }, isLoading: askAILoading && columns.length === 0, label: 'Ask AI' }) }), !reportId && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState, disabled: columns.length === 0 || loading }))] }) })), columns.length > 0 && (_jsx(TableComponent, { isLoading: tableLoading || (loading && errorMessage.length === 0), rows: formattedRows, rowCount: pivot ? pivotData?.rowCount : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
+                                    ? pivotData?.columns || []
+                                    : reportColumnsToStateColumns.map((col) => {
                                         return {
-                                            label: snakeAndCamelCaseToTitleCase(c),
-                                            field: c,
+                                            field: col.field,
+                                            label: snakeAndCamelCaseToTitleCase(col.field),
                                         };
                                     }), onPageChange: onPageChange, onSortChange: (sort) => {
                                     onSortChange(sort);
                                 }, disableSort: !!mssqlSortWarning, containerStyle: {
-                                    maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, rows.length), 20) * 37),
+                                    maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, reportRows.length), 20) * 37),
                                 } })), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
@@ -1848,130 +1153,122 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             width: '100%',
                                             gap: 12,
                                             alignItems: 'center',
-                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage || pivotError || '' }), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage || pivotError }), _jsx(SecondaryButtonComponent, { onClick: () => {
                                                     fetchAstFromPromptHelper();
-                                                }, label: 'Retry' }), _jsx(SecondaryButtonComponent, { onClick: clearAllState, label: 'Reset' })] })) : (_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() })), !isAdminEnabled ? null : (_jsx(SecondaryButtonComponent, { onClick: async () => {
-                                                    const tempReportColumns = selectedOrderedColumns.length > 0
-                                                        ? selectedOrderedColumns
-                                                            .map((columnName) => {
-                                                            return columns.find((col) => col.field === columnName);
-                                                        })
-                                                            .filter((col) => col !== undefined)
-                                                            .map((c) => reportInfo?.columns.find((col) => col.field === c.field))
-                                                            .filter((col) => col !== undefined)
-                                                        : (reportInfo?.columns.filter((col) => {
-                                                            return columns.find((c) => {
-                                                                return col.field === c.field;
-                                                            });
-                                                        }) ?? []);
+                                                }, label: 'Retry' }), _jsx(SecondaryButtonComponent, { onClick: clearAllState, label: 'Reset' })] })) : (_jsx("div", { style: { width: '100%' } })), columns.length > 0 && activeQuery && (_jsxs(_Fragment, { children: [undoButtonEnabled && stateStack.length > 1 && (_jsx(SecondaryButtonComponent, { onClick: handleUndo, label: "Undo", disabled: stateStack.length <= 1 || loading })), onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), !isAdminEnabled ? null : (_jsx(SecondaryButtonComponent, { onClick: async () => {
+                                                    const tempReportColumns = columns
+                                                        .map((column) => {
+                                                        return reportColumnsToStateColumns.find((col) => col.field === (column.alias || column.field));
+                                                    })
+                                                        .filter((col) => col !== undefined);
+                                                    let customFieldColumns = [];
+                                                    if (client && isSelectStar && schemaData.customFields) {
+                                                        customFieldColumns = tables.flatMap((table) => {
+                                                            return (schemaData.customFields?.[table.name || ''] || []).map((field) => field.field);
+                                                        });
+                                                    }
                                                     setTempReport({
-                                                        ...(reportInfo
-                                                            ? {
-                                                                ...reportInfo,
-                                                                ...tempReport,
-                                                                id: TEMP_REPORT_ID,
-                                                                dashboardName: 'quill-saved-queries',
-                                                                chartType: 'table',
-                                                                pivot: pivot,
-                                                                yAxisFields: reportInfo?.pivot && !pivot
-                                                                    ? []
-                                                                    : reportInfo?.yAxisFields,
-                                                                columns: isSelectedAllColumns()
-                                                                    ? // if SELECT *, filter out custom fields from tabular view
-                                                                        // so Automatic Custom Fields can be applied
-                                                                        tempReportColumns.filter((col) => {
-                                                                            return !schemaData.customFields?.[currentTable]?.some((field) => {
-                                                                                return field.field === col.field;
-                                                                            });
-                                                                        })
-                                                                    : tempReportColumns,
-                                                                queryString: isSelectedAllColumns()
-                                                                    ? convertQueryToSelectStar(activeQuery)
-                                                                    : activeQuery,
-                                                                includeCustomFields: isSelectedAllColumns(),
-                                                                rows: rows,
-                                                                pivotRows: pivotData?.rows,
-                                                                pivotColumns: pivotData?.columns,
-                                                                pivotRowCount: pivotData?.rowCount,
-                                                                pivotQuery: pivotData?.pivotQuery,
-                                                                comparisonPivotQuery: pivotData?.comparisonPivotQuery,
-                                                                flags: reportInfo?.flags ?? tempReport?.flags,
-                                                            }
-                                                            : {
-                                                                ...tempReport,
-                                                                chartType: 'table',
-                                                                id: TEMP_REPORT_ID,
-                                                                flags: tempReport?.flags,
-                                                            }),
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? pivotFormData(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: TEMP_REPORT_ID,
+                                                        dashboardName: destinationDashboard,
+                                                        pivot: pivot,
+                                                        yAxisFields: tempReport?.pivot && !pivot
+                                                            ? []
+                                                            : tempReport?.yAxisFields,
+                                                        columns: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        columnInternal: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        queryString: isSelectStar
+                                                            ? convertQueryToSelectStar(activeQuery)
+                                                            : activeQuery,
+                                                        includeCustomFields: isSelectStar,
+                                                        rows: reportRows,
+                                                        pivotRows: pivotData?.rows,
+                                                        pivotColumns: pivotData?.columns,
+                                                        pivotRowCount: pivotData?.rowCount,
+                                                        pivotQuery: pivotData?.pivotQuery,
+                                                        comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                        flags: tempReport?.flags,
                                                     });
                                                     setIsSaveQueryModalOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
-                                                    unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), _jsx(ButtonComponent, { onClick: async () => {
+                                                    !!unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), _jsx(ButtonComponent, { onClick: async () => {
                                                     onSaveChanges && onSaveChanges();
-                                                    const tempReportColumns = selectedOrderedColumns.length > 0
-                                                        ? selectedOrderedColumns
-                                                            .map((columnName) => {
-                                                            return columns.find((col) => col.field === columnName);
-                                                        })
-                                                            .filter((col) => col !== undefined)
-                                                            .map((c) => reportInfo?.columns.find((col) => col.field === c.field))
-                                                            .filter((col) => col !== undefined)
-                                                        : (reportInfo?.columns.filter((col) => {
-                                                            return columns.find((c) => {
-                                                                return col.field === c.field;
-                                                            });
-                                                        }) ?? []);
+                                                    const tempReportColumns = columns
+                                                        .map((column) => {
+                                                        return reportColumnsToStateColumns.find((col) => col.field === (column.alias || column.field));
+                                                    })
+                                                        .filter((col) => col !== undefined);
+                                                    let customFieldColumns = [];
+                                                    if (client && isSelectStar && schemaData.customFields) {
+                                                        customFieldColumns = tables.flatMap((table) => {
+                                                            return (schemaData.customFields?.[table.name || ''] || []).map((field) => field.field);
+                                                        });
+                                                    }
                                                     setTempReport({
-                                                        ...(reportInfo
-                                                            ? {
-                                                                ...reportInfo,
-                                                                ...tempReport,
-                                                                id: TEMP_REPORT_ID,
-                                                                dashboardName: destinationDashboard,
-                                                                pivot: pivot,
-                                                                yAxisFields: reportInfo?.pivot && !pivot
-                                                                    ? []
-                                                                    : reportInfo?.yAxisFields,
-                                                                columns: isSelectedAllColumns()
-                                                                    ? // if SELECT *, filter out custom fields from tabular view
-                                                                        // so Automatic Custom Fields can be applied
-                                                                        tempReportColumns.filter((col) => {
-                                                                            return !schemaData.customFields?.[currentTable]?.some((field) => {
-                                                                                return field.field === col.field;
-                                                                            });
-                                                                        })
-                                                                    : tempReportColumns,
-                                                                queryString: isSelectedAllColumns()
-                                                                    ? convertQueryToSelectStar(activeQuery)
-                                                                    : activeQuery,
-                                                                includeCustomFields: isSelectedAllColumns(),
-                                                                rows: rows,
-                                                                pivotRows: pivotData?.rows,
-                                                                pivotColumns: pivotData?.columns,
-                                                                pivotRowCount: pivotData?.rowCount,
-                                                                pivotQuery: pivotData?.pivotQuery,
-                                                                comparisonPivotQuery: pivotData?.comparisonPivotQuery,
-                                                                flags: reportInfo?.flags ?? tempReport?.flags,
-                                                            }
-                                                            : {
-                                                                ...tempReport,
-                                                                id: TEMP_REPORT_ID,
-                                                                flags: tempReport?.flags,
-                                                            }),
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? pivotFormData(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: TEMP_REPORT_ID,
+                                                        dashboardName: destinationDashboard,
+                                                        pivot: pivot,
+                                                        yAxisFields: tempReport?.pivot && !pivot
+                                                            ? []
+                                                            : tempReport?.yAxisFields,
+                                                        columns: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        columnInternal: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        queryString: isSelectStar
+                                                            ? convertQueryToSelectStar(activeQuery)
+                                                            : activeQuery,
+                                                        includeCustomFields: isSelectStar,
+                                                        rows: reportRows,
+                                                        pivotRows: pivotData?.rows,
+                                                        pivotColumns: pivotData?.columns,
+                                                        pivotRowCount: pivotData?.rowCount,
+                                                        pivotQuery: pivotData?.pivotQuery,
+                                                        comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                        flags: tempReport?.flags,
                                                     });
                                                     setIsChartBuilderOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
-                                                    unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { tempReport: tempReport, reportId: reportId, isAdmin: isAdminEnabled, title: chartBuilderTitle
+                                                    !!unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { tempReport: tempReport, reportId: reportId, isAdmin: isAdminEnabled, title: chartBuilderTitle
                     ? chartBuilderTitle
                     : reportId
                         ? 'Save changes'
-                        : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, organizationName: organizationName, 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, CheckboxComponent: CheckboxComponent, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, hideDeleteButton: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => {
+                        : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, initialUniqueValues: columnUniqueValues, initialUniqueValuesIsLoading: filteredUniqueValuesIsLoading || unfilteredUniqueValuesIsLoading, 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, CheckboxComponent: CheckboxComponent, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, hideDeleteButton: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => {
                     setFiltersEnabled(enabled);
                 }, isEditingMode: true })), isSaveQueryModalOpen && (_jsx(ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSubmitSaveQuery, destinationDashboard: 'quill-saved-queries', isAdmin: false, title: 'Save query', buttonLabel: 'Save query', tempReport: tempReport, reportId: reportId, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, CheckboxComponent: CheckboxComponent, hideDateRangeFilter: true, hideDeleteButton: true, hideDiscardChanges: true, hideSQLQuery: false, onClickChartElement: onClickChartElement, 
                 // hide filters table, make it a table chart etc