@quillsql/react 2.14.14 → 2.14.16

package/dist/cjs/ReportBuilder.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ReportBuilder;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,19 +11,34 @@ const Context_1 = require("./Context");
 const ChartBuilder_1 = require("./ChartBuilder");
 const UiComponents_2 = require("./components/UiComponents");
 const ui_1 = require("./components/ReportBuilder/ui");
+const AddSortPopover_1 = require("./components/ReportBuilder/AddSortPopover");
+const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
+const textProcessing_1 = require("./utils/textProcessing");
+const AddLimitPopover_1 = require("./components/ReportBuilder/AddLimitPopover");
 const width_1 = require("./utils/width");
 const QuillSelect_1 = require("./components/QuillSelect");
 const QuillCard_1 = require("./components/QuillCard");
+const pivotProcessing_1 = require("./utils/pivotProcessing");
+const tableProcessing_1 = require("./utils/tableProcessing");
+const astProcessing_1 = require("./utils/astProcessing");
+const PivotForm_1 = __importDefault(require("./internals/ReportBuilder/PivotForm"));
+const FilterModal_1 = __importDefault(require("./components/ReportBuilder/FilterModal"));
 const QuillMultiSelectWithCombo_1 = require("./components/QuillMultiSelectWithCombo");
+const paginationProcessing_1 = require("./utils/paginationProcessing");
+const report_1 = require("./utils/report");
+const Report_1 = require("./models/Report");
+const FilterStack_1 = __importDefault(require("./components/ReportBuilder/FilterStack"));
 const constants_1 = require("./utils/constants");
-const useReportBuilder_1 = require("./hooks/useReportBuilder");
-const ColumnComponent_1 = require("./components/ReportBuilder/ColumnComponent");
-const FilterComponent_1 = require("./components/ReportBuilder/FilterComponent");
-const PivotComponent_1 = require("./components/ReportBuilder/PivotComponent");
-const LimitComponent_1 = require("./components/ReportBuilder/LimitComponent");
-const SortComponent_1 = require("./components/ReportBuilder/SortComponent");
-const SaveReport_1 = require("./components/ReportBuilder/SaveReport");
-const TableComponent_1 = require("./components/ReportBuilder/TableComponent");
+const convert_1 = require("./components/ReportBuilder/convert");
+const dashboard_1 = require("./utils/dashboard");
+const useDashboard_1 = require("./hooks/useDashboard");
+const ReportBuilder_1 = require("./models/ReportBuilder");
+const DraggableColumns_1 = __importDefault(require("./components/ReportBuilder/DraggableColumns"));
+const AddColumnModal_1 = __importDefault(require("./components/ReportBuilder/AddColumnModal"));
+const reportBuilder_1 = require("./utils/reportBuilder");
+const dataFetcher_1 = require("./utils/dataFetcher");
+const schema_1 = require("./utils/schema");
+const filterProcessing_1 = require("./utils/filterProcessing");
 /**
  * Quill Report Builder
  *
@@ -92,45 +110,928 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void
     // isChartBuilderHorizontalView: whether the chart builder is in horizontal view mode
     // onClickChartElement: a callback function triggered when a chart element is clicked
     // Contexts
+    const { allReportsById } = (0, useDashboard_1.useAllReports)();
+    const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
+    const { dashboards } = (0, useDashboard_1.useDashboards)();
+    const { data, isLoading: dashboardIsLoading, reload, } = (0, useDashboard_1.useDashboardInternal)(destinationDashboard);
+    const { getToken } = (0, react_1.useContext)(Context_1.FetchContext);
+    const destinationDashboardConfig = (0, react_1.useMemo)(() => {
+        return dashboards?.find((d) => d.name === destinationDashboard);
+    }, [dashboards, destinationDashboard]);
+    const filteredSchema = (0, react_1.useMemo)(() => {
+        return schemaData.schemaWithCustomFields?.filter((table) => {
+            return (destinationDashboardConfig?.tenantKeys?.[0] === constants_1.SINGLE_TENANT ||
+                !table.ownerTenantFields ||
+                table.ownerTenantFields?.length === 0 ||
+                table.ownerTenantFields?.includes(destinationDashboardConfig?.tenantKeys?.[0] ?? ''));
+        });
+    }, [
+        schemaData.schemaWithCustomFields,
+        destinationDashboardConfig?.tenantKeys,
+    ]);
+    const { tenants } = (0, react_1.useContext)(Context_1.TenantContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     // Refs
     const parentRef = (0, react_1.useRef)(null);
-    const askAIContainerRef = (0, react_1.useRef)(null);
-    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(-1);
-    // UI
-    const [isCopying, setIsCopying] = (0, react_1.useState)(false);
+    // Consts
+    const REPORT_BUILDER_PAGINATION = {
+        page: 0,
+        rowsPerPage: 20,
+        rowsPerRequest: 100,
+    };
+    // ReportBuilder UI States
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
+    const [filtersEnabled, setFiltersEnabled] = (0, react_1.useState)(!!reportId);
     const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = (0, react_1.useState)(false);
-    // Main
-    const reportBuilder = (0, useReportBuilder_1.useReportBuilderInternal)({
-        reportId,
-        initialTableName,
-        destinationDashboard,
-        pivotRecommendationsEnabled,
-        onSaveChanges,
+    const [openPopover, setOpenPopover] = (0, react_1.useState)(null);
+    const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
+    const [reportBuilderLoading, setReportBuilderLoading] = (0, react_1.useState)(false);
+    const [tableLoading, setTableLoading] = (0, react_1.useState)(false);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
+    const [unresolvedReportMessage, setUnresolvedReportMessage] = (0, react_1.useState)('');
+    // Core Report states
+    // Table order matters for joins. For now, assumed to have one 'primary' table (the first one)
+    const [tables, setTables] = (0, react_1.useState)([]);
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const [filterStack, setFilterStack] = (0, react_1.useState)([]);
+    const [pivot, setPivot] = (0, react_1.useState)(null);
+    const [sort, setSort] = (0, react_1.useState)([]);
+    const [limit, setLimit] = (0, react_1.useState)(null);
+    const reportBuilderState = (0, react_1.useMemo)(() => {
+        return {
+            tables,
+            columns,
+            filterStack,
+            pivot,
+            sort,
+            limit,
+        };
+    }, [columns, filterStack, limit, pivot, sort, tables]);
+    // For undo/redo
+    const [stateStack, setStateStack] = (0, react_1.useState)([]);
+    const [poppedStateStack, setPoppedStateStack] = (0, react_1.useState)([]);
+    // Other Report states
+    const [activeQuery, setActiveQuery] = (0, react_1.useState)('');
+    const [queryOutOfSync, setQueryOutOfSync] = (0, react_1.useState)(false);
+    const [unfilteredUniqueValues, setUnfilteredUniqueValues] = (0, react_1.useState)({}); // unique values before filtering
+    const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = (0, react_1.useState)(false);
+    const [filteredUniqueValues, setFilteredUniqueValues] = (0, react_1.useState)(null); // unique values after filtering
+    const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = (0, react_1.useState)(false);
+    const [columnUniqueValues, setColumnUniqueValues] = (0, react_1.useState)({});
+    const [dateRanges, setDateRanges] = (0, react_1.useState)(null);
+    const [tempReport, setTempReport] = (0, react_1.useState)({
+        ...report_1.EMPTY_INTERNAL_REPORT,
+        pagination: REPORT_BUILDER_PAGINATION,
+    });
+    const [currentProcessing, setCurrentProcessing] = (0, react_1.useState)({
+        page: REPORT_BUILDER_PAGINATION,
     });
-    const { 
-    // Core state
-    columns, tables, activeQuery, tempReport, stateStack, poppedStateStack, 
-    // UI state
-    errorMessage, unresolvedReportMessage, loading, tableLoading, askAILoading, 
-    // Pivot state and handlers
-    pivot, pivotData, pivotError, 
-    // Schema and client info
-    // foreignKeyMap,
-    // AI features
-    aiPrompt, setAiPrompt, fetchAstFromPromptHelper, 
-    // Action handlers
-    clearAllState, 
-    // handleMultiStateChange,
-    // handleColumnsChange,
-    handleUndo, handleRedo, onSaveQuery, onSaveReport, } = reportBuilder;
+    const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
+    const [isCopying, setIsCopying] = (0, react_1.useState)(false);
+    const [sortOrLimitWasReset, setSortOrLimitWasReset] = (0, react_1.useState)(false);
+    // Table display states
+    const [reportColumns, setReportColumns] = (0, react_1.useState)([]);
+    const [reportRows, setReportRows] = (0, react_1.useState)([]);
+    const [formattedRows, setFormattedRows] = (0, react_1.useState)([]);
+    const [pivotData, setPivotData] = (0, react_1.useState)(null);
+    const [numberOfRows, setNumberOfRows] = (0, react_1.useState)(0);
+    const [rowCountIsLoading, setRowCountIsLoading] = (0, react_1.useState)(false);
+    const reportColumnsToStateColumns = (0, react_1.useMemo)(() => {
+        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];
+            if (posA !== undefined && posB !== undefined) {
+                return posA - posB;
+            }
+            else {
+                return 0;
+            }
+        });
+    }, [columns, reportColumns]);
+    // Pivot form states
+    const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
+    const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
+    const [pivotAggregations, setPivotAggregations] = (0, react_1.useState)([]);
+    const [pivotHint, setPivotHint] = (0, react_1.useState)('');
+    const [pivotError, setPivotError] = (0, react_1.useState)('');
+    const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
+    const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
+    const [showPivotPopover, setShowPivotPopover] = (0, react_1.useState)(false);
+    const [isEditingPivot, setIsEditingPivot] = (0, react_1.useState)(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
+    const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = (0, react_1.useState)(pivotRecommendationsEnabled);
+    // Ask AI
+    const [askAILoading, setAskAILoading] = (0, react_1.useState)(false);
+    const askAIContainerRef = (0, react_1.useRef)(null);
+    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(-1);
+    const loading = reportBuilderLoading || tableLoading;
+    const isSelectStar = (0, react_1.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;
+        }
+        else {
+            // TODO: Implement this to work with joins
+            // SELECT * won't work if joined table has shared column name
+            return false;
+        }
+    }, [tables, columns, filteredSchema]);
+    const mssqlSortWarning = (0, react_1.useMemo)(() => {
+        if (!client || client?.databaseType !== 'mssql') {
+            return undefined;
+        }
+        else if (!pivot && !limit) {
+            return 'Please add a limit.';
+        }
+    }, [client, limit, pivot]);
+    const foreignKeyMap = (0, react_1.useMemo)(() => {
+        return (0, schema_1.getSchemaForeignKeyMapping)(filteredSchema);
+    }, [filteredSchema]);
+    // State changing functions
+    const clearAllState = (resetStateStack = true) => {
+        setActiveQuery('');
+        setQueryOutOfSync(false);
+        handleMultiStateChange({
+            state: ReportBuilder_1.EMPTY_REPORT_BUILDER_STATE,
+            fetchData: false,
+            updateStateStack: true,
+        });
+        if (resetStateStack) {
+            setStateStack([]);
+            setPoppedStateStack([]);
+        }
+        setFilteredUniqueValues(null);
+        setUnfilteredUniqueValues({});
+        setColumnUniqueValues({});
+        setDateRanges(null);
+        setTempReport({
+            ...report_1.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 },
+            ]);
+            setPoppedStateStack([]);
+        }
+    };
+    const handleColumnsChange = (newColumns, fetchData, updateStateStack = true, bypassConfirmation = false) => {
+        const validReportBuilderState = bypassConfirmation
+            ? { ...reportBuilderState, columns: newColumns }
+            : (0, reportBuilder_1.validatedReportBuilderState)({
+                ...reportBuilderState,
+                columns: newColumns,
+            }, foreignKeyMap);
+        if (validReportBuilderState.tables.length === 0 && !bypassConfirmation) {
+            if (!confirm('Removing all columns will clear all state. Are you sure you want to continue?')) {
+                return;
+            }
+            else {
+                handleMultiStateChange({
+                    state: ReportBuilder_1.EMPTY_REPORT_BUILDER_STATE,
+                    fetchData: false,
+                    updateStateStack: true,
+                });
+                return;
+            }
+        }
+        const tablesAffected = tables.length - validReportBuilderState.tables.length >= 2;
+        const filtersAffected = validReportBuilderState.filterStack.length !== filterStack.length;
+        const deletedTables = tables
+            .filter((table) => {
+            return !validReportBuilderState.tables.some((t) => t.name === table.name);
+        })
+            .map((table) => table.name);
+        const deletedFilters = filterStack
+            .filter((filter) => filter.value)
+            .filter((filter) => {
+            return deletedTables.some((table) => table === filter.value.table);
+        })
+            .map((filter) => (0, filterProcessing_1.filterSentence)(filter.value));
+        if (tablesAffected && filtersAffected) {
+            if (!confirm(`Removing this column will remove the following table${deletedTables.length > 1 ? 's' : ''}:
+          ${deletedTables.join(', ')}.
+          It will also remove the following filter${deletedFilters.length > 1 ? 's' : ''}:
+          ${deletedFilters.join(', ')}.
+          Are you sure you want to continue?
+          `
+                .replace(/\s+/g, ' ')
+                .trim())) {
+                return;
+            }
+        }
+        else if (tablesAffected) {
+            if (!confirm(`Removing this column will remove the following table${deletedTables.length > 1 ? 's' : ''}:
+          ${deletedTables.join(', ')}.
+          Are you sure you want to continue?
+          `
+                .replace(/\s+/g, ' ')
+                .trim())) {
+                return;
+            }
+        }
+        else if (filtersAffected) {
+            if (!confirm(`Removing this column will remove the following filter${deletedFilters.length > 1 ? 's' : ''}:
+          ${deletedFilters.join(', ')}.
+          Are you sure you want to continue?
+          `
+                .replace(/\s+/g, ' ')
+                .trim())) {
+                return;
+            }
+        }
+        if (validReportBuilderState.tables.length !== tables.length) {
+            handleTablesChange(validReportBuilderState.tables, false);
+            fetchData = true;
+        }
+        if (validReportBuilderState.filterStack.length !== filterStack.length) {
+            handleFilterStackChange(validReportBuilderState.filterStack, false, false);
+            fetchData = true;
+        }
+        if (validReportBuilderState.sort.length !== sort.length) {
+            handleSortChange(validReportBuilderState.sort, false, false);
+            fetchData = true;
+        }
+        if (pivot && !validReportBuilderState.pivot) {
+            handlePivotChange(validReportBuilderState.pivot, false, false);
+        }
+        setColumns(validReportBuilderState.columns);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [...prevStack, validReportBuilderState]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState(validReportBuilderState);
+        }
+        else {
+            setQueryOutOfSync(true);
+        }
+    };
+    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 },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                filterStack: newFilterStack,
+            }, true);
+        }
+    };
+    const handlePivotChange = (newPivot, fetchData, updateStateStack = true) => {
+        setPivot(newPivot ? (0, reportBuilder_1.setTypesOnPivot)(newPivot, reportColumns) : null);
+        setPivotHint('');
+        setPivotError('');
+        if (!newPivot) {
+            setPivotData(null);
+            if (!fetchData) {
+                const formattedRows = (0, reportBuilder_1.formatRows)(reportRows, reportColumns, false);
+                setFormattedRows(formattedRows);
+            }
+        }
+        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,
+                },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                pivot: newPivot,
+                sort: resetSortAndLimit ? [] : sort,
+                limit: resetSortAndLimit ? null : limit,
+            }, false, resetSortAndLimit);
+        }
+    };
+    const updatePivot = async (changeField, fieldKey) => {
+        if (!client || !pivot) {
+            return;
+        }
+        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);
+                // set all percentage aggregations to undefined
+                setPivotAggregations(pivotAggregations.map((agg) => ({
+                    ...agg,
+                    aggregationType: agg.aggregationType === 'percentage'
+                        ? undefined
+                        : agg.aggregationType,
+                })));
+            }
+        }
+        newPivot = (0, reportBuilder_1.setTypesOnPivot)(newPivot, reportColumns);
+        if (newPivot.aggregations?.length === 0 ||
+            newPivot.aggregations?.some((agg) => !agg.aggregationType) ||
+            newPivot.aggregations?.some((agg) => !agg.valueField && agg.aggregationType !== 'count')) {
+            return;
+        }
+        const { valid, reason } = (0, pivotProcessing_1.isValidPivot)(newPivot);
+        if (!valid) {
+            setPivotError(reason);
+            return;
+        }
+        handlePivotChange(newPivot, true);
+    };
+    const handleSortChange = (newSort, fetchData, updateStateStack = true) => {
+        setSort(newSort);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, sort: newSort },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                sort: newSort,
+            });
+        }
+    };
+    const handleLimitChange = (newLimit, fetchData, updateStateStack = true) => {
+        setLimit(newLimit);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, limit: newLimit },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                limit: newLimit,
+            }, false, true);
+        }
+    };
+    const handleMultiStateChange = ({ state, fetchData, updateStateStack = true, report, skipPivotColumnFetch = false, }) => {
+        if (state.tables !== undefined) {
+            handleTablesChange(state.tables, false);
+        }
+        if (state.columns !== undefined) {
+            handleColumnsChange(state.columns, false, false, true);
+        }
+        if (state.filterStack !== undefined) {
+            handleFilterStackChange(state.filterStack, false, false);
+        }
+        if (state.pivot !== undefined) {
+            handlePivotChange(state.pivot, false, false);
+        }
+        if (state.sort !== undefined) {
+            handleSortChange(state.sort, false, false);
+        }
+        if (state.limit !== undefined) {
+            handleLimitChange(state.limit, false, false);
+        }
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, ...state },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({ ...reportBuilderState, ...state }, !!state.filterStack, !!state.limit, !!state.tables, report, skipPivotColumnFetch);
+        }
+    };
+    const handleUndo = () => {
+        if (stateStack.length <= 1) {
+            return;
+        }
+        const previousState = stateStack[stateStack.length - 2];
+        setPoppedStateStack((prevStack) => [
+            ...prevStack,
+            stateStack[stateStack.length - 1],
+        ]);
+        setStateStack((prevStack) => prevStack.slice(0, -1));
+        // Only fetch data if the previous state has columns
+        handleMultiStateChange({
+            state: previousState,
+            fetchData: previousState.columns.length > 0,
+            updateStateStack: false,
+        });
+    };
+    const handleRedo = () => {
+        if (poppedStateStack.length === 0) {
+            return;
+        }
+        const lastState = poppedStateStack[poppedStateStack.length - 1];
+        setStateStack((prevStack) => [...prevStack, lastState]);
+        setPoppedStateStack((prevStack) => prevStack.slice(0, -1));
+        // Only fetch data if the last state has columns
+        handleMultiStateChange({
+            state: lastState,
+            fetchData: lastState.columns.length > 0,
+            updateStateStack: false,
+        });
+    };
+    const fetchDataFromReportBuilderState = (state, filtersChanged, limitChanged, tablesChanged, report, skipPivotColumnFetch) => {
+        if (!client) {
+            return;
+        }
+        const ast = (0, reportBuilder_1.reportBuilderStateToAst)(state, client.databaseType?.toLowerCase() || 'postgresql');
+        fetchReportFromASTHelper({
+            ast,
+            pivot: state.pivot,
+            previousReport: report,
+            requiresNewFilteredUniqueValues: filtersChanged || limitChanged,
+            requiresNewUnfilteredUniqueValues: tablesChanged,
+            skipPivotColumnFetch,
+        });
+    };
+    const fetchReportFromASTHelper = async ({ ast, pivot, previousReport = tempReport, requiresNewFilteredUniqueValues = false, requiresNewUnfilteredUniqueValues = false, skipPivotColumnFetch = false, }) => {
+        let reportBuilderInfo = undefined;
+        setErrorMessage('');
+        const schema = filteredSchema;
+        try {
+            if (!client || reportBuilderLoading) {
+                return;
+            }
+            setReportBuilderLoading(true);
+            reportBuilderInfo = await (0, report_1.fetchReportBuilderDataFromAST)({
+                baseAst: ast,
+                schema,
+                client,
+                tenants,
+                pivot: pivot ?? undefined,
+                skipPivotColumnFetch,
+                previousRelevant: {
+                    uniqueStringsByTable: unfilteredUniqueValues,
+                    dateRanges: dateRanges ?? {},
+                    uniqueStringsByColumn: requiresNewFilteredUniqueValues
+                        ? {}
+                        : columnUniqueValues,
+                },
+                requiresNewFilteredUniqueValues,
+                report: previousReport,
+                customFields: schemaData.customFields,
+                skipUniqueValues: true,
+                skipRowCount: true,
+                processing: { page: REPORT_BUILDER_PAGINATION },
+                dashboardName: destinationDashboard,
+                getToken,
+            });
+            if (reportBuilderInfo.error) {
+                throw new Error(reportBuilderInfo.error);
+            }
+        }
+        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: [] };
+        }
+        if (!reportBuilderInfo) {
+            setReportBuilderLoading(false);
+            setErrorMessage('Failed to fetch');
+            return;
+        }
+        const cleanedReport = await (0, dashboard_1.cleanDashboardItem)({
+            item: reportBuilderInfo.report,
+            dashboardFilters: [],
+            getToken,
+            client,
+            customFields: schemaData.customFields,
+            skipPivotFetch: true,
+            tenants,
+        });
+        // set tempReport
+        setTempReport({
+            ...cleanedReport,
+            pagination: REPORT_BUILDER_PAGINATION,
+        });
+        setActiveQuery(reportBuilderInfo.query);
+        setQueryOutOfSync(false);
+        // table data
+        fetchRowCountFromAST(ast, ast.where);
+        setReportRows(reportBuilderInfo.rows);
+        setFormattedRows(reportBuilderInfo.formattedRows);
+        resetProcessing();
+        if (!(client.databaseType?.toLowerCase() === 'bigquery') ||
+            (reportBuilderInfo.rows && reportBuilderInfo.rows.length > 0)) {
+            setReportColumns(reportBuilderInfo.columns);
+        }
+        setPivotData(reportBuilderInfo.pivotData);
+        if (reportBuilderInfo.pivot) {
+            setPivotRowField(reportBuilderInfo.pivot.rowField);
+            setPivotColumnField(reportBuilderInfo.pivot.columnField);
+            setPivotAggregations(reportBuilderInfo.pivot.aggregations ?? [
+                {
+                    valueField: reportBuilderInfo.pivot.valueField,
+                    valueField2: reportBuilderInfo.pivot.valueField2,
+                    aggregationType: reportBuilderInfo.pivot.aggregationType,
+                },
+            ]);
+        }
+        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 }));
+        });
+        setReportBuilderLoading(false);
+        // fetch unique values after everything else since it is the most expensive
+        try {
+            let uniqueStrings = filteredUniqueValues ?? unfilteredUniqueValues;
+            let uniqueValuesByColumn = columnUniqueValues;
+            if (requiresNewUnfilteredUniqueValues) {
+                fetchGlobalUniqueValues(columnInfo, tableNames);
+            }
+            if (requiresNewFilteredUniqueValues) {
+                if (reportBuilderInfo.pivot) {
+                    // if there's a pivot, these values would have had to been fetched
+                    uniqueStrings = reportBuilderInfo.uniqueStringsByTable;
+                    uniqueValuesByColumn = reportBuilderInfo.uniqueStringsByColumn;
+                }
+                else {
+                    setFilteredUniqueValuesIsLoading(true);
+                    const starQuery = await (0, dataFetcher_1.fetchSqlQuery)((0, astProcessing_1.createSelectStarFromAst)(ast), client, getToken);
+                    uniqueStrings = await (0, tableProcessing_1.getUniqueStringValuesByTable)({
+                        columns: columnInfo,
+                        tables: tableNames,
+                        client,
+                        tenants,
+                        customFields: schemaData.customFields ?? undefined,
+                        withExceededColumns: true,
+                        dashboardName: destinationDashboard,
+                        queryTemplate: starQuery.query,
+                        getToken,
+                    });
+                    uniqueValuesByColumn = {};
+                    reportBuilderInfo.reportBuilderColumns.forEach((col) => {
+                        uniqueValuesByColumn[col.alias || col.field] =
+                            uniqueStrings[col.table || '']?.[col.field] ?? [];
+                    });
+                }
+            }
+            setFilteredUniqueValues(uniqueStrings);
+            setFilteredUniqueValuesIsLoading(false);
+            setColumnUniqueValues(uniqueValuesByColumn);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setErrorMessage(err.message);
+                return { error: true, message: err.message, rows: [] };
+            }
+            setErrorMessage('Failed to fetch unique values');
+            return {
+                error: true,
+                message: 'Failed to fetch unique values',
+                rows: [],
+            };
+        }
+    };
+    const fetchRowCountFromAST = async (ast, where) => {
+        setRowCountIsLoading(true);
+        if (!client) {
+            return;
+        }
+        const tableData = await (0, tableProcessing_1.fetchTableByAST)({ ...ast, where }, client, getToken, tenants, destinationDashboard, { page: REPORT_BUILDER_PAGINATION }, schemaData.customFields, false, true);
+        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 {
+            setReportBuilderLoading(true);
+            setAskAILoading(true);
+            setErrorMessage('');
+            astInfo = await (0, astProcessing_1.fetchAndProcessASTFromPrompt)({
+                aiPrompt: prompt,
+                schema: filteredSchema,
+                client,
+                prevPivot: pivot ?? undefined,
+                currentQuery: activeQuery,
+                prevTable: tables?.[0]?.name,
+                dashboardName: destinationDashboard,
+                tenants,
+                getToken,
+            });
+            if (astInfo.error) {
+                throw new Error(astInfo.error);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setErrorMessage(err.message);
+            }
+            setReportBuilderLoading(false);
+            setAskAILoading(false);
+            return;
+        }
+        // check if pivot works with ReportBuilder constraints
+        if (Object.keys(columnUniqueValues).length > 0 &&
+            astInfo.pivot &&
+            !(0, reportBuilder_1.isValidPivotForReport)(astInfo.pivot, columnUniqueValues, reportColumns)) {
+            astInfo.pivot = null;
+            astInfo.ast.groupby = null;
+        }
+        setAskAILoading(false);
+        const newState = (0, reportBuilder_1.astToReportBuilderState)(astInfo.ast, client.databaseType || 'postgresql', filteredSchema);
+        handleMultiStateChange({
+            state: { ...newState, pivot: astInfo.pivot },
+            fetchData: true,
+        });
+    };
+    const fetchGlobalUniqueValues = async (columns, tables) => {
+        if (!client) {
+            return;
+        }
+        setUnfilteredUniqueValuesIsLoading(true);
+        const uniqueStrings = await (0, tableProcessing_1.getUniqueStringValuesByTable)({
+            columns,
+            tables,
+            client,
+            getToken,
+            tenants,
+            customFields: schemaData.customFields ?? undefined,
+            withExceededColumns: true,
+            dashboardName: destinationDashboard,
+        });
+        setUnfilteredUniqueValues(uniqueStrings);
+        setUnfilteredUniqueValuesIsLoading(false);
+    };
+    const fetchQueryFromReportBuilderState = async (state) => {
+        if (!client) {
+            return '';
+        }
+        const ast = (0, reportBuilder_1.reportBuilderStateToAst)(state, client.databaseType?.toLowerCase() || 'postgresql');
+        const query = await (0, dataFetcher_1.fetchSqlQuery)(ast, client, getToken);
+        setActiveQuery(query.query);
+        return query.query;
+    };
+    const resetProcessing = () => {
+        setCurrentProcessing({ page: REPORT_BUILDER_PAGINATION });
+        setPreviousPage(0);
+    };
+    const handlePagination = async (processing) => {
+        try {
+            if (!client) {
+                return;
+            }
+            const isPivotPagination = !!(pivot && pivotData);
+            setErrorMessage('');
+            setTableLoading(true);
+            const tableInfo = await (0, tableProcessing_1.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,
+                getToken,
+            });
+            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((0, report_1.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((0, report_1.formatRowsFromReport)({ rows: tempRows, columns: tableInfo.columns }));
+            }
+            setTableLoading(false);
+        }
+        catch (e) {
+            setTableLoading(false);
+            setErrorMessage('Failed to run SQL query: ' + e.message);
+            setReportRows([]);
+            setReportColumns([]);
+            return;
+        }
+    };
+    const onPageChange = (page, initiator = 'ReportBuilder') => {
+        const pagination = initiator === 'ReportBuilder'
+            ? REPORT_BUILDER_PAGINATION
+            : paginationProcessing_1.DEFAULT_PAGINATION;
+        if (currentProcessing.page &&
+            (0, paginationProcessing_1.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 (page > previousPage) {
+            setPreviousPage(page);
+        }
+    };
+    const onSortChange = (newSort, isDelete) => {
+        if (!newSort.field) {
+            return;
+        }
+        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);
+        }
+        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);
+        }
+    };
+    const onLimitChange = (limit) => {
+        if (limit) {
+            if (pivot) {
+                const newPivot = { ...pivot, rowLimit: limit };
+                handlePivotChange(newPivot, true);
+            }
+            else {
+                handleLimitChange({ value: limit }, true);
+            }
+        }
+        else {
+            if (pivot) {
+                const newPivot = { ...pivot, rowLimit: undefined };
+                handlePivotChange(newPivot, true);
+            }
+            else {
+                handleLimitChange(null, true);
+            }
+        }
+    };
     (0, react_1.useEffect)(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -143,6 +1044,81 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void
             window.removeEventListener('resize', handleResize);
         };
     }, []);
+    (0, react_1.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
+    (0, react_1.useEffect)(() => {
+        const loadChart = async () => {
+            let report;
+            if (!client) {
+                return;
+            }
+            try {
+                if (!reportId) {
+                    throw new Error('Report ID is required');
+                }
+                report = allReportsById[reportId];
+                if (!report) {
+                    console.log('no report');
+                    throw new Error('Report not found');
+                }
+                const { ast: newAst, pivot: newPivot } = await (0, astProcessing_1.fetchASTFromQuillReport)(report, client, filteredSchema, getToken);
+                const initialState = (0, reportBuilder_1.astToReportBuilderState)(newAst, client.databaseType || 'postgresql', filteredSchema);
+                setTempReport(report);
+                handleMultiStateChange({
+                    state: {
+                        ...initialState,
+                        pivot: newPivot ?? null,
+                    },
+                    fetchData: true,
+                    report,
+                    skipPivotColumnFetch: true,
+                });
+            }
+            catch (err) {
+                console.error(err);
+                setErrorMessage('Error when loading chart');
+            }
+        };
+        if (reportId && client) {
+            loadChart();
+        }
+    }, [allReportsById[reportId || ''], client]);
+    (0, react_1.useEffect)(() => {
+        if (initialTableName) {
+            const tableColumns = filteredSchema.find((table) => {
+                return table.name === initialTableName;
+            })?.columns ?? [];
+            if (tableColumns.length > 0) {
+                handleMultiStateChange({
+                    state: {
+                        ...ReportBuilder_1.EMPTY_REPORT_BUILDER_STATE,
+                        tables: [{ name: initialTableName }],
+                        columns: tableColumns.map((col) => ({
+                            field: col.field,
+                            table: initialTableName,
+                        })),
+                    },
+                    fetchData: true,
+                });
+            }
+        }
+    }, [filteredSchema, initialTableName]);
+    (0, react_1.useEffect)(() => {
+        if (!data && !dashboardIsLoading) {
+            // need dashboard to be in Context for filteredSchema
+            reload();
+        }
+    }, [data, dashboardIsLoading]);
     (0, react_1.useEffect)(() => {
         if (isChartBuilderOpen === false) {
             onCloseChartBuilder && onCloseChartBuilder();
@@ -159,7 +1135,136 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void
                         : '100%',
                     overscrollBehavior: 'none',
                     ...containerStyle,
-                }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(ColumnComponent_1.AddColumns, { reportBuilder: reportBuilder, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, DraggableColumnComponent: DraggableColumnComponent, TextInputComponent: TextInputComponent, SelectColumnComponent: SelectColumnComponent, SecondaryButtonComponent: SecondaryButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), (0, jsx_runtime_1.jsx)(FilterComponent_1.AddFilters, { reportBuilder: reportBuilder, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, PopoverComponent: PopoverComponent })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotComponent_1.AddPivot, { reportBuilder: reportBuilder, parentRef: parentRef, SubHeaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), (0, jsx_runtime_1.jsx)(SortComponent_1.AddSort, { reportBuilder: reportBuilder, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PopoverComponent: PopoverComponent, SortPopoverComponent: SortPopoverComponent })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), (0, jsx_runtime_1.jsx)(LimitComponent_1.AddLimit, { reportBuilder: reportBuilder, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, PopoverComponent: PopoverComponent, LimitPopoverComponent: LimitPopoverComponent })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', minHeight: '30vh' } })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                }, className: className, children: [(0, jsx_runtime_1.jsxs)(SidebarComponent, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Columns" }), (0, jsx_runtime_1.jsx)(DraggableColumns_1.default, { columns: columns, DraggableColumnComponent: DraggableColumnComponent, onColumnOrderChange: handleColumnsChange, loading: loading }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
+                                            if (!openPopover) {
+                                                setOpenPopover('AddColumnModal');
+                                            }
+                                        }, label: "Select columns", disabled: loading }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                            if (!isOpen) {
+                                                // delay onClose callback so onClick no-ops
+                                                setTimeout(() => {
+                                                    setOpenPopover(null);
+                                                }, 100);
+                                            }
+                                        }, title: "Select columns", children: (0, jsx_runtime_1.jsx)(AddColumnModal_1.default, { onSave: (tables, columns) => {
+                                                handleMultiStateChange({
+                                                    state: {
+                                                        ...ReportBuilder_1.EMPTY_REPORT_BUILDER_STATE,
+                                                        tables,
+                                                        columns,
+                                                    },
+                                                    fetchData: true,
+                                                });
+                                                setOpenPopover(null);
+                                            }, selectedTables: tables, selectedColumns: columns, schema: filteredSchema, foreignKeyMap: foreignKeyMap, schemaLoading: schemaData.isSchemaLoading, TextInputComponent: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Filters" }), filterStack.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: (0, jsx_runtime_1.jsx)(FilterStack_1.default, { client: client, filterStack: filterStack, handleFilterStackChange: handleFilterStackChange, schemaData: schemaData, uniqueValues: unfilteredUniqueValues, uniqueValuesIsLoading: unfilteredUniqueValuesIsLoading, tables: tables, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal_1.default, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: !loading, dashboardName: destinationDashboard, getToken: getToken, reportBuilderColumns: columns }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start',
+                                        }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: columns.length === 0 || loading, onClick: () => {
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddFilterPopover');
+                                                    }
+                                                }, label: 'Add filter' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                                }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add filter", popoverChildren: (0, jsx_runtime_1.jsx)(FilterModal_1.default, { schema: filteredSchema, tables: tables.map((table) => table.name), fieldValuesMap: filteredUniqueValues ?? unfilteredUniqueValues, fieldValuesMapIsLoading: filteredUniqueValuesIsLoading ||
+                                                            unfilteredUniqueValuesIsLoading, onSubmitFilter: (filter) => {
+                                                            setOpenPopover(null);
+                                                            handleFilterInsertion(filter);
+                                                        }, hideTableName: tables.length === 1, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, reportBuilderColumns: columns }) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Pivot" }), (0, jsx_runtime_1.jsx)(PivotModal_1.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;
+                                            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 && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { columns: reportColumnsToStateColumns, uniqueValues: columnUniqueValues, uniqueValuesIsLoading: filteredUniqueValuesIsLoading ||
+                                            unfilteredUniqueValuesIsLoading, setPivotRowField: (value) => {
+                                            setPivotRowField(value);
+                                            updatePivot(value, 'rowField');
+                                        }, setPivotColumnField: (value) => {
+                                            setPivotColumnField(value);
+                                            updatePivot(value, 'columnField');
+                                        }, setPivotAggregations: (value) => {
+                                            setPivotAggregations(value);
+                                            updatePivot(value, 'aggregations');
+                                        }, onDelete: () => {
+                                            handlePivotChange(null, sortOrLimitWasReset);
+                                        }, isLoading: tableLoading || loading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotAggregations: pivotAggregations, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer, DeleteButtonComponent: DeleteButtonComponent, pivotHint: pivotHint }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && pivot.sortField && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortField: pivot.sortField, sortDirection: pivot.sortDirection || 'ASC', columns: pivotData?.columns ?? [], setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.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`) })), sort && sort.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: sort.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortField: sortData.field, sortDirection: sortData.direction, columns: reportColumnsToStateColumns, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                                onSortChange(sortData, true);
+                                            }, onSave: (column, direction) => {
+                                                onSortChange({ field: column, direction });
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: columns.length === 0 ||
+                                            loading ||
+                                            tableLoading ||
+                                            !!mssqlSortWarning, onClick: () => {
+                                            if (!openPopover) {
+                                                setOpenPopover('AddSortPopover');
+                                            }
+                                        }, label: 'Add sort', tooltipText: mssqlSortWarning }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                        }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivotData
+                                                    ? pivotData.columns
+                                                    : reportColumnsToStateColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
+                                                    onSortChange({ field: column, direction });
+                                                    setOpenPopover(null);
+                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), limit || pivot?.rowLimit ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: limit?.value || pivot?.rowLimit || 0, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                                onLimitChange(null);
+                                                setOpenPopover(null);
+                                            }, onSave: (limit) => {
+                                                onLimitChange(limit);
+                                                setOpenPopover(null);
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: columns.length === 0 || loading || tableLoading, onClick: () => {
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddLimitPopover');
+                                                    }
+                                                }, label: 'Add limit' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                                }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                            onLimitChange(limit);
+                                                            setOpenPopover(null);
+                                                        } }) }) })] }))] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', minHeight: '30vh' } })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
                                     event.preventDefault();
                                 }, style: {
                                     display: 'flex',
@@ -175,7 +1280,18 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void
                                                     if (tables.length <= 1) {
                                                         fetchAstFromPromptHelper();
                                                     }
-                                                }, isLoading: askAILoading && columns.length === 0, label: 'Ask AI' }) }), !reportId && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: () => clearAllState(false), disabled: columns.length === 0 || loading }))] }) })), columns.length > 0 && ((0, jsx_runtime_1.jsx)(TableComponent_1.ReportTable, { reportBuilder: reportBuilder, TableComponent: TableComponent })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, isLoading: askAILoading && columns.length === 0, label: 'Ask AI' }) }), !reportId && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: () => clearAllState(false), disabled: columns.length === 0 || loading }))] }) })), columns.length > 0 && ((0, jsx_runtime_1.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 {
+                                            field: col.field,
+                                            label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(col.field),
+                                        };
+                                    }), onPageChange: onPageChange, onSortChange: (sort) => {
+                                    onSortChange(sort);
+                                }, disableSort: !!mssqlSortWarning, containerStyle: {
+                                    maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, reportRows.length), 20) * 37),
+                                } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -192,81 +1308,132 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void
                                         }, children: [(0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: errorMessage || pivotError }), aiPrompt.trim().length > 500 && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
                                                     fetchAstFromPromptHelper();
                                                 }, label: 'Retry' })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => clearAllState(false), label: 'Reset' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), stateStack.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleUndo, label: "", icon: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" }) }), disabled: stateStack.length <= 1 || loading })), stateStack.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleRedo, label: "", icon: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" }) }), disabled: poppedStateStack.length < 1 || loading })), columns.length > 0 && activeQuery && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onDiscardChanges && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), !isAdminEnabled || reportId ? null : ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: async () => {
-                                                    onSaveQuery();
+                                                    let tempReportQuery = activeQuery;
+                                                    if (queryOutOfSync) {
+                                                        tempReportQuery =
+                                                            await fetchQueryFromReportBuilderState(reportBuilderState);
+                                                    }
+                                                    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({
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? (0, pivotProcessing_1.pivotFormData)(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: Report_1.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
+                                                            ? (0, convert_1.convertQueryToSelectStar)(tempReportQuery)
+                                                            : tempReportQuery,
+                                                        includeCustomFields: isSelectStar,
+                                                        rows: reportRows,
+                                                        pivotRows: pivotData?.rows,
+                                                        pivotColumns: pivotData?.columns,
+                                                        pivotRowCount: pivotData?.rowCount,
+                                                        pivotQuery: pivotData?.pivotQuery,
+                                                        comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                        flags: tempReport?.flags,
+                                                        chartType: 'table',
+                                                    });
                                                     setIsSaveQueryModalOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
                                                     !!unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: async () => {
-                                                    onSaveReport();
+                                                    let tempReportQuery = activeQuery;
+                                                    if (queryOutOfSync) {
+                                                        tempReportQuery =
+                                                            await fetchQueryFromReportBuilderState(reportBuilderState);
+                                                    }
+                                                    onSaveChanges && onSaveChanges();
+                                                    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({
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? (0, pivotProcessing_1.pivotFormData)(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: Report_1.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
+                                                            ? (0, convert_1.convertQueryToSelectStar)(tempReportQuery)
+                                                            : tempReportQuery,
+                                                        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 })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(SaveReport_1.SaveReport
-            // The reason this isn't just using the default trigger and
-            // directly replacing the Add To Dashboard button above is because
-            // that button is in a div with overflow: hidden
-            , { 
-                // The reason this isn't just using the default trigger and
-                // directly replacing the Add To Dashboard button above is because
-                // that button is in a div with overflow: hidden
-                SaveTrigger: null, reportBuilder: reportBuilder, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, isAdminEnabled: isAdminEnabled, chartBuilderTitle: chartBuilderTitle, onSubmitEditReport: onSubmitEditReport, onSubmitCreateReport: onSubmitCreateReport, destinationSection: destinationSection, ModalComponent: ChartBuilderModalComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, CheckboxComponent: CheckboxComponent, ChartBuilderFormContainer: ChartBuilderFormContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, onClickChartElement: onClickChartElement })
-            // <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
-            //   }
-            //   destinationDashboard={destinationDashboard}
-            //   destinationSection={destinationSection}
-            //   organizationName={organizationName}
-            //   initialUniqueValues={columnUniqueValues}
-            //   initialUniqueValuesIsLoading={
-            //     filteredUniqueValuesIsLoading || unfilteredUniqueValuesIsLoading
-            //   }
-            //   pivotRecommendationsEnabled={pivotRecommendationsEnabled}
-            //   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: boolean) => {
-            //     setFiltersEnabled(enabled);
-            //   }}
-            //   isEditingMode={true}
-            //   runQueryOnMount={filtersEnabled}
-            // />
-            ), isSaveQueryModalOpen && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSubmitSaveQuery, destinationDashboard: constants_1.SAVED_QUERIES_DASHBOARD, destinationSection: destinationSection, 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, isEditingMode: true }))] }));
+                                                    !!unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.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, destinationDashboard: destinationDashboard, destinationSection: destinationSection, 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, runQueryOnMount: filtersEnabled })), isSaveQueryModalOpen && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSubmitSaveQuery, destinationDashboard: constants_1.SAVED_QUERIES_DASHBOARD, destinationSection: destinationSection, 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
+                filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => setFiltersEnabled(enabled), isEditingMode: true }))] }));
 }