@quillsql/react 2.14.13 → 2.14.14

package/dist/cjs/ReportBuilder.js

@@ -1,7 +1,4 @@
 "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");
@@ -11,34 +8,19 @@ 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 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");
+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");
 /**
  * Quill Report Builder
  *
@@ -110,921 +92,45 @@ 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);
-    // Consts
-    const REPORT_BUILDER_PAGINATION = {
-        page: 0,
-        rowsPerPage: 20,
-        rowsPerRequest: 100,
-    };
-    // ReportBuilder UI States
+    const askAIContainerRef = (0, react_1.useRef)(null);
+    const [askAIInputWidth, setAskAIInputWidth] = (0, react_1.useState)(-1);
+    // UI
+    const [isCopying, setIsCopying] = (0, react_1.useState)(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
-    const [filtersEnabled, setFiltersEnabled] = (0, react_1.useState)(!!reportId);
     const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = (0, react_1.useState)(false);
-    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,
+    // Main
+    const reportBuilder = (0, useReportBuilder_1.useReportBuilderInternal)({
+        reportId,
+        initialTableName,
+        destinationDashboard,
+        pivotRecommendationsEnabled,
+        onSaveChanges,
     });
-    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];
-            return posA && posB ? posA - posB : 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 { 
+    // 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 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,
-            });
-        }
-    };
-    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,
-            });
-        }
-    };
-    const handleMultiStateChange = ({ state, fetchData, updateStateStack = true, report, }) => {
-        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.tables, report);
-        }
-    };
-    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, tablesChanged, report) => {
-        if (!client) {
-            return;
-        }
-        const ast = (0, reportBuilder_1.reportBuilderStateToAst)(state, client.databaseType?.toLowerCase() || 'postgresql');
-        fetchReportFromASTHelper({
-            ast,
-            pivot: state.pivot,
-            previousReport: report,
-            requiresNewFilteredUniqueValues: filtersChanged,
-            requiresNewUnfilteredUniqueValues: tablesChanged,
-        });
-    };
-    const fetchReportFromASTHelper = async ({ ast, pivot, previousReport = tempReport, requiresNewFilteredUniqueValues = false, requiresNewUnfilteredUniqueValues = 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,
-                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.
@@ -1037,80 +143,6 @@ 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,
-                });
-            }
-            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();
@@ -1127,136 +159,7 @@ 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)(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) => {
+                }, 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) => {
                                     event.preventDefault();
                                 }, style: {
                                     display: 'flex',
@@ -1272,18 +175,7 @@ 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, { 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: {
+                                                }, 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: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -1300,132 +192,81 @@ 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 () => {
-                                                    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',
-                                                    });
+                                                    onSaveQuery();
                                                     setIsSaveQueryModalOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
                                                     !!unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: async () => {
-                                                    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,
-                                                    });
+                                                    onSaveReport();
                                                     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)(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 }))] }));
+                                                    !!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 }))] }));
 }