@quillsql/react 2.14.14 → 2.14.15

package/dist/esm/ReportBuilder.js

@@ -1,23 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState, } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableReportBuilderComponent, QuillChartBuilderCheckboxComponent, QuillToolTip, } from './components/UiComponents';
-import { ThemeContext } from './Context';
+import { ClientContext, FetchContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
 import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, QuillLimitPopover, } from './components/ReportBuilder/ui';
+import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
+import { PivotModal } from './internals/ReportBuilder/PivotModal';
+import { snakeAndCamelCaseToTitleCase } from './utils/textProcessing';
+import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
 import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
+import { isValidPivot, pivotFormData } from './utils/pivotProcessing';
+import { fetchResultsByQuery, fetchTableByAST, getUniqueStringValuesByTable, } from './utils/tableProcessing';
+import { createSelectStarFromAst, fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, } from './utils/astProcessing';
+import PivotForm from './internals/ReportBuilder/PivotForm';
+import FilterModal from './components/ReportBuilder/FilterModal';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
-import { SAVED_QUERIES_DASHBOARD } from './utils/constants';
-import { useReportBuilderInternal } from './hooks/useReportBuilder';
-import { AddColumns } from './components/ReportBuilder/ColumnComponent';
-import { AddFilters } from './components/ReportBuilder/FilterComponent';
-import { AddPivot } from './components/ReportBuilder/PivotComponent';
-import { AddLimit } from './components/ReportBuilder/LimitComponent';
-import { AddSort } from './components/ReportBuilder/SortComponent';
-import { SaveReport } from './components/ReportBuilder/SaveReport';
-import { ReportTable } from './components/ReportBuilder/TableComponent';
+import { DEFAULT_PAGINATION, shouldFetchMore, } from './utils/paginationProcessing';
+import { EMPTY_INTERNAL_REPORT, fetchReportBuilderDataFromAST, formatRowsFromReport, } from './utils/report';
+import { TEMP_REPORT_ID, } from './models/Report';
+import FilterStack from './components/ReportBuilder/FilterStack';
+import { SINGLE_TENANT, SAVED_QUERIES_DASHBOARD } from './utils/constants';
+import { convertQueryToSelectStar } from './components/ReportBuilder/convert';
+import { cleanDashboardItem } from './utils/dashboard';
+import { useAllReports, useDashboardInternal, useDashboards, } from './hooks/useDashboard';
+import { EMPTY_REPORT_BUILDER_STATE, } from './models/ReportBuilder';
+import DraggableColumns from './components/ReportBuilder/DraggableColumns';
+import AddColumnModal from './components/ReportBuilder/AddColumnModal';
+import { astToReportBuilderState, formatRows, isValidPivotForReport, reportBuilderStateToAst, setTypesOnPivot, validatedReportBuilderState, } from './utils/reportBuilder';
+import { fetchSqlQuery } from './utils/dataFetcher';
+import { getSchemaForeignKeyMapping } from './utils/schema';
+import { filterSentence } from './utils/filterProcessing';
 /**
  * Quill Report Builder
  *
@@ -89,45 +104,928 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     // isChartBuilderHorizontalView: whether the chart builder is in horizontal view mode
     // onClickChartElement: a callback function triggered when a chart element is clicked
     // Contexts
+    const { allReportsById } = useAllReports();
+    const [schemaData] = useContext(SchemaDataContext);
+    const { dashboards } = useDashboards();
+    const { data, isLoading: dashboardIsLoading, reload, } = useDashboardInternal(destinationDashboard);
+    const { getToken } = useContext(FetchContext);
+    const destinationDashboardConfig = useMemo(() => {
+        return dashboards?.find((d) => d.name === destinationDashboard);
+    }, [dashboards, destinationDashboard]);
+    const filteredSchema = useMemo(() => {
+        return schemaData.schemaWithCustomFields?.filter((table) => {
+            return (destinationDashboardConfig?.tenantKeys?.[0] === SINGLE_TENANT ||
+                !table.ownerTenantFields ||
+                table.ownerTenantFields?.length === 0 ||
+                table.ownerTenantFields?.includes(destinationDashboardConfig?.tenantKeys?.[0] ?? ''));
+        });
+    }, [
+        schemaData.schemaWithCustomFields,
+        destinationDashboardConfig?.tenantKeys,
+    ]);
+    const { tenants } = useContext(TenantContext);
     const [theme] = useContext(ThemeContext);
+    const [client] = useContext(ClientContext);
     // Refs
     const parentRef = useRef(null);
-    const askAIContainerRef = useRef(null);
-    const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
-    // UI
-    const [isCopying, setIsCopying] = useState(false);
+    // Consts
+    const REPORT_BUILDER_PAGINATION = {
+        page: 0,
+        rowsPerPage: 20,
+        rowsPerRequest: 100,
+    };
+    // ReportBuilder UI States
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [filtersEnabled, setFiltersEnabled] = useState(!!reportId);
     const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
-    // Main
-    const reportBuilder = useReportBuilderInternal({
-        reportId,
-        initialTableName,
-        destinationDashboard,
-        pivotRecommendationsEnabled,
-        onSaveChanges,
+    const [openPopover, setOpenPopover] = useState(null);
+    const [aiPrompt, setAiPrompt] = useState('');
+    const [reportBuilderLoading, setReportBuilderLoading] = useState(false);
+    const [tableLoading, setTableLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [unresolvedReportMessage, setUnresolvedReportMessage] = useState('');
+    // Core Report states
+    // Table order matters for joins. For now, assumed to have one 'primary' table (the first one)
+    const [tables, setTables] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [filterStack, setFilterStack] = useState([]);
+    const [pivot, setPivot] = useState(null);
+    const [sort, setSort] = useState([]);
+    const [limit, setLimit] = useState(null);
+    const reportBuilderState = useMemo(() => {
+        return {
+            tables,
+            columns,
+            filterStack,
+            pivot,
+            sort,
+            limit,
+        };
+    }, [columns, filterStack, limit, pivot, sort, tables]);
+    // For undo/redo
+    const [stateStack, setStateStack] = useState([]);
+    const [poppedStateStack, setPoppedStateStack] = useState([]);
+    // Other Report states
+    const [activeQuery, setActiveQuery] = useState('');
+    const [queryOutOfSync, setQueryOutOfSync] = useState(false);
+    const [unfilteredUniqueValues, setUnfilteredUniqueValues] = useState({}); // unique values before filtering
+    const [unfilteredUniqueValuesIsLoading, setUnfilteredUniqueValuesIsLoading] = useState(false);
+    const [filteredUniqueValues, setFilteredUniqueValues] = useState(null); // unique values after filtering
+    const [filteredUniqueValuesIsLoading, setFilteredUniqueValuesIsLoading] = useState(false);
+    const [columnUniqueValues, setColumnUniqueValues] = useState({});
+    const [dateRanges, setDateRanges] = useState(null);
+    const [tempReport, setTempReport] = useState({
+        ...EMPTY_INTERNAL_REPORT,
+        pagination: REPORT_BUILDER_PAGINATION,
+    });
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: REPORT_BUILDER_PAGINATION,
     });
-    const { 
-    // Core state
-    columns, tables, activeQuery, tempReport, stateStack, poppedStateStack, 
-    // UI state
-    errorMessage, unresolvedReportMessage, loading, tableLoading, askAILoading, 
-    // Pivot state and handlers
-    pivot, pivotData, pivotError, 
-    // Schema and client info
-    // foreignKeyMap,
-    // AI features
-    aiPrompt, setAiPrompt, fetchAstFromPromptHelper, 
-    // Action handlers
-    clearAllState, 
-    // handleMultiStateChange,
-    // handleColumnsChange,
-    handleUndo, handleRedo, onSaveQuery, onSaveReport, } = reportBuilder;
+    const [previousPage, setPreviousPage] = useState(0);
+    const [isCopying, setIsCopying] = useState(false);
+    const [sortOrLimitWasReset, setSortOrLimitWasReset] = useState(false);
+    // Table display states
+    const [reportColumns, setReportColumns] = useState([]);
+    const [reportRows, setReportRows] = useState([]);
+    const [formattedRows, setFormattedRows] = useState([]);
+    const [pivotData, setPivotData] = useState(null);
+    const [numberOfRows, setNumberOfRows] = useState(0);
+    const [rowCountIsLoading, setRowCountIsLoading] = useState(false);
+    const reportColumnsToStateColumns = useMemo(() => {
+        const positionMap = {};
+        columns.forEach((column, index) => {
+            positionMap[column.field] = index;
+            if (column.alias) {
+                positionMap[column.alias] = index;
+            }
+        });
+        // Sort reportColumns based on the position in columns
+        return [...reportColumns]
+            .filter((reportColumn) => positionMap[reportColumn.field] !== undefined)
+            .sort((a, b) => {
+            const posA = positionMap[a.field];
+            const posB = positionMap[b.field];
+            if (posA !== undefined && posB !== undefined) {
+                return posA - posB;
+            }
+            else {
+                return 0;
+            }
+        });
+    }, [columns, reportColumns]);
+    // Pivot form states
+    const [pivotRowField, setPivotRowField] = useState(undefined);
+    const [pivotColumnField, setPivotColumnField] = useState(undefined);
+    const [pivotAggregations, setPivotAggregations] = useState([]);
+    const [pivotHint, setPivotHint] = useState('');
+    const [pivotError, setPivotError] = useState('');
+    const [createdPivots, setCreatedPivots] = useState([]);
+    const [recommendedPivots, setRecommendedPivots] = useState([]);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
+    const [showPivotPopover, setShowPivotPopover] = useState(false);
+    const [isEditingPivot, setIsEditingPivot] = useState(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
+    const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = useState(pivotRecommendationsEnabled);
+    // Ask AI
+    const [askAILoading, setAskAILoading] = useState(false);
+    const askAIContainerRef = useRef(null);
+    const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
+    const loading = reportBuilderLoading || tableLoading;
+    const isSelectStar = useMemo(() => {
+        if (tables.length === 1) {
+            // Check if all columns are selected
+            const totalColumnLength = tables.reduce((acc, table) => {
+                const tableColumns = filteredSchema.find((t) => t.name === table.name)?.columns.length ??
+                    0;
+                return acc + tableColumns;
+            }, 0);
+            return totalColumnLength === columns.length;
+        }
+        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 = useMemo(() => {
+        if (!client || client?.databaseType !== 'mssql') {
+            return undefined;
+        }
+        else if (!pivot && !limit) {
+            return 'Please add a limit.';
+        }
+    }, [client, limit, pivot]);
+    const foreignKeyMap = useMemo(() => {
+        return getSchemaForeignKeyMapping(filteredSchema);
+    }, [filteredSchema]);
+    // State changing functions
+    const clearAllState = (resetStateStack = true) => {
+        setActiveQuery('');
+        setQueryOutOfSync(false);
+        handleMultiStateChange({
+            state: EMPTY_REPORT_BUILDER_STATE,
+            fetchData: false,
+            updateStateStack: true,
+        });
+        if (resetStateStack) {
+            setStateStack([]);
+            setPoppedStateStack([]);
+        }
+        setFilteredUniqueValues(null);
+        setUnfilteredUniqueValues({});
+        setColumnUniqueValues({});
+        setDateRanges(null);
+        setTempReport({
+            ...EMPTY_INTERNAL_REPORT,
+            pagination: REPORT_BUILDER_PAGINATION,
+        });
+        resetProcessing();
+        setReportColumns([]);
+        setReportRows([]);
+        setFormattedRows([]);
+        setPivotData(null);
+        setNumberOfRows(0);
+        setRowCountIsLoading(false);
+        setPivotRowField(undefined);
+        setPivotColumnField(undefined);
+        setPivotAggregations([]);
+        setCreatedPivots([]);
+        setRecommendedPivots([]);
+        setSelectedPivotIndex(-1);
+        setAskAILoading(false);
+        setReportBuilderLoading(false);
+        setTableLoading(false);
+        setPivotError('');
+        setErrorMessage('');
+        setUnresolvedReportMessage('');
+        setPivotHint('');
+    };
     const copySQLToClipboard = () => {
         const query = pivot && pivotData ? pivotData.pivotQuery : activeQuery;
         setIsCopying(true);
         navigator.clipboard.writeText(query);
         setTimeout(() => setIsCopying(false), 800);
     };
+    const handleTablesChange = (newTables, updateStateStack = true) => {
+        setTables(newTables);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, tables: newTables },
+            ]);
+            setPoppedStateStack([]);
+        }
+    };
+    const handleColumnsChange = (newColumns, fetchData, updateStateStack = true, bypassConfirmation = false) => {
+        const validReportBuilderState = bypassConfirmation
+            ? { ...reportBuilderState, columns: newColumns }
+            : 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: 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) => 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 ? setTypesOnPivot(newPivot, reportColumns) : null);
+        setPivotHint('');
+        setPivotError('');
+        if (!newPivot) {
+            setPivotData(null);
+            if (!fetchData) {
+                const formattedRows = formatRows(reportRows, reportColumns, false);
+                setFormattedRows(formattedRows);
+            }
+        }
+        let resetSortAndLimit = false;
+        if (!pivot && newPivot && (sort.length > 0 || limit)) {
+            setSort([]);
+            setLimit(null);
+            resetSortAndLimit = true;
+        }
+        setSortOrLimitWasReset(resetSortAndLimit);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                {
+                    ...reportBuilderState,
+                    pivot: newPivot,
+                    sort: resetSortAndLimit ? [] : sort,
+                    limit: resetSortAndLimit ? null : limit,
+                },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                pivot: newPivot,
+                sort: resetSortAndLimit ? [] : sort,
+                limit: resetSortAndLimit ? null : limit,
+            }, false, resetSortAndLimit);
+        }
+    };
+    const updatePivot = async (changeField, fieldKey) => {
+        if (!client || !pivot) {
+            return;
+        }
+        let newPivot = { ...pivot };
+        setPivotError('');
+        // @ts-ignore
+        newPivot[fieldKey] = changeField;
+        newPivot.rowLimit = undefined;
+        newPivot.sort = undefined;
+        newPivot.sortDirection = undefined;
+        newPivot.sortField = undefined;
+        newPivot.sortFieldType = undefined;
+        if (fieldKey === 'rowField') {
+            if (changeField === '' || changeField === undefined) {
+                setPivotColumnField(undefined);
+                // set all percentage aggregations to undefined
+                setPivotAggregations(pivotAggregations.map((agg) => ({
+                    ...agg,
+                    aggregationType: agg.aggregationType === 'percentage'
+                        ? undefined
+                        : agg.aggregationType,
+                })));
+            }
+        }
+        newPivot = 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 } = isValidPivot(newPivot);
+        if (!valid) {
+            setPivotError(reason);
+            return;
+        }
+        handlePivotChange(newPivot, true);
+    };
+    const handleSortChange = (newSort, fetchData, updateStateStack = true) => {
+        setSort(newSort);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, sort: newSort },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                sort: newSort,
+            });
+        }
+    };
+    const handleLimitChange = (newLimit, fetchData, updateStateStack = true) => {
+        setLimit(newLimit);
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, limit: newLimit },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({
+                ...reportBuilderState,
+                limit: newLimit,
+            }, false, true);
+        }
+    };
+    const handleMultiStateChange = ({ state, fetchData, updateStateStack = true, report, skipPivotColumnFetch = false, }) => {
+        if (state.tables !== undefined) {
+            handleTablesChange(state.tables, false);
+        }
+        if (state.columns !== undefined) {
+            handleColumnsChange(state.columns, false, false, true);
+        }
+        if (state.filterStack !== undefined) {
+            handleFilterStackChange(state.filterStack, false, false);
+        }
+        if (state.pivot !== undefined) {
+            handlePivotChange(state.pivot, false, false);
+        }
+        if (state.sort !== undefined) {
+            handleSortChange(state.sort, false, false);
+        }
+        if (state.limit !== undefined) {
+            handleLimitChange(state.limit, false, false);
+        }
+        if (updateStateStack) {
+            setStateStack((prevStack) => [
+                ...prevStack,
+                { ...reportBuilderState, ...state },
+            ]);
+            setPoppedStateStack([]);
+        }
+        if (fetchData) {
+            fetchDataFromReportBuilderState({ ...reportBuilderState, ...state }, !!state.filterStack, !!state.limit, !!state.tables, report, skipPivotColumnFetch);
+        }
+    };
+    const handleUndo = () => {
+        if (stateStack.length <= 1) {
+            return;
+        }
+        const previousState = stateStack[stateStack.length - 2];
+        setPoppedStateStack((prevStack) => [
+            ...prevStack,
+            stateStack[stateStack.length - 1],
+        ]);
+        setStateStack((prevStack) => prevStack.slice(0, -1));
+        // Only fetch data if the previous state has columns
+        handleMultiStateChange({
+            state: previousState,
+            fetchData: previousState.columns.length > 0,
+            updateStateStack: false,
+        });
+    };
+    const handleRedo = () => {
+        if (poppedStateStack.length === 0) {
+            return;
+        }
+        const lastState = poppedStateStack[poppedStateStack.length - 1];
+        setStateStack((prevStack) => [...prevStack, lastState]);
+        setPoppedStateStack((prevStack) => prevStack.slice(0, -1));
+        // Only fetch data if the last state has columns
+        handleMultiStateChange({
+            state: lastState,
+            fetchData: lastState.columns.length > 0,
+            updateStateStack: false,
+        });
+    };
+    const fetchDataFromReportBuilderState = (state, filtersChanged, limitChanged, tablesChanged, report, skipPivotColumnFetch) => {
+        if (!client) {
+            return;
+        }
+        const ast = reportBuilderStateToAst(state, client.databaseType?.toLowerCase() || 'postgresql');
+        fetchReportFromASTHelper({
+            ast,
+            pivot: state.pivot,
+            previousReport: report,
+            requiresNewFilteredUniqueValues: filtersChanged || limitChanged,
+            requiresNewUnfilteredUniqueValues: tablesChanged,
+            skipPivotColumnFetch,
+        });
+    };
+    const fetchReportFromASTHelper = async ({ ast, pivot, previousReport = tempReport, requiresNewFilteredUniqueValues = false, requiresNewUnfilteredUniqueValues = false, skipPivotColumnFetch = false, }) => {
+        let reportBuilderInfo = undefined;
+        setErrorMessage('');
+        const schema = filteredSchema;
+        try {
+            if (!client || reportBuilderLoading) {
+                return;
+            }
+            setReportBuilderLoading(true);
+            reportBuilderInfo = await fetchReportBuilderDataFromAST({
+                baseAst: ast,
+                schema,
+                client,
+                tenants,
+                pivot: pivot ?? undefined,
+                skipPivotColumnFetch,
+                previousRelevant: {
+                    uniqueStringsByTable: unfilteredUniqueValues,
+                    dateRanges: dateRanges ?? {},
+                    uniqueStringsByColumn: requiresNewFilteredUniqueValues
+                        ? {}
+                        : columnUniqueValues,
+                },
+                requiresNewFilteredUniqueValues,
+                report: previousReport,
+                customFields: schemaData.customFields,
+                skipUniqueValues: true,
+                skipRowCount: true,
+                processing: { page: REPORT_BUILDER_PAGINATION },
+                dashboardName: destinationDashboard,
+                getToken,
+            });
+            if (reportBuilderInfo.error) {
+                throw new Error(reportBuilderInfo.error);
+            }
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setErrorMessage(err.message);
+                setReportBuilderLoading(false);
+                return { error: true, message: err.message, rows: [] };
+            }
+            setReportBuilderLoading(false);
+            setErrorMessage('Failed to fetch');
+            return { error: true, message: 'Failed to fetch', rows: [] };
+        }
+        if (!reportBuilderInfo) {
+            setReportBuilderLoading(false);
+            setErrorMessage('Failed to fetch');
+            return;
+        }
+        const cleanedReport = await 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 fetchSqlQuery(createSelectStarFromAst(ast), client, getToken);
+                    uniqueStrings = await 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 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 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 &&
+            !isValidPivotForReport(astInfo.pivot, columnUniqueValues, reportColumns)) {
+            astInfo.pivot = null;
+            astInfo.ast.groupby = null;
+        }
+        setAskAILoading(false);
+        const newState = 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 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 = reportBuilderStateToAst(state, client.databaseType?.toLowerCase() || 'postgresql');
+        const query = await 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 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(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+                setTempReport((tempReport) => ({
+                    ...tempReport,
+                    rows: tempRows,
+                    rowCount: tableInfo.rowCount ?? tempReport.rowCount,
+                }));
+            }
+            else {
+                const tempRows = [...pivotData.rows, ...tableInfo.rows];
+                setPivotData((oldPivotData) => {
+                    if (oldPivotData) {
+                        return {
+                            ...oldPivotData,
+                            rows: tempRows,
+                            columns: tableInfo.columns,
+                        };
+                    }
+                    return null;
+                });
+                setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            }
+            setTableLoading(false);
+        }
+        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
+            : DEFAULT_PAGINATION;
+        if (currentProcessing.page &&
+            shouldFetchMore(pagination, page, previousPage, pivotData ? pivotData.rows.length : reportRows.length)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            handlePagination(updatedProcessing);
+        }
+        if (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);
+            }
+        }
+    };
     useEffect(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -140,6 +1038,81 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             window.removeEventListener('resize', handleResize);
         };
     }, []);
+    useEffect(() => {
+        if (!client) {
+            return;
+        }
+        if (client.featureFlags?.['recommendedPivotsDisabled'] !== undefined) {
+            setPivotRecommendationsEnabledState(!client.featureFlags?.['recommendedPivotsDisabled']);
+        }
+        if (!initialTableName && !reportId && client.publicKey) {
+            clearAllState();
+        }
+    }, [client]);
+    // Initialize ReportBuilder with a report
+    useEffect(() => {
+        const loadChart = async () => {
+            let report;
+            if (!client) {
+                return;
+            }
+            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 fetchASTFromQuillReport(report, client, filteredSchema, getToken);
+                const initialState = astToReportBuilderState(newAst, client.databaseType || 'postgresql', filteredSchema);
+                setTempReport(report);
+                handleMultiStateChange({
+                    state: {
+                        ...initialState,
+                        pivot: newPivot ?? null,
+                    },
+                    fetchData: true,
+                    report,
+                    skipPivotColumnFetch: true,
+                });
+            }
+            catch (err) {
+                console.error(err);
+                setErrorMessage('Error when loading chart');
+            }
+        };
+        if (reportId && client) {
+            loadChart();
+        }
+    }, [allReportsById[reportId || ''], client]);
+    useEffect(() => {
+        if (initialTableName) {
+            const tableColumns = filteredSchema.find((table) => {
+                return table.name === initialTableName;
+            })?.columns ?? [];
+            if (tableColumns.length > 0) {
+                handleMultiStateChange({
+                    state: {
+                        ...EMPTY_REPORT_BUILDER_STATE,
+                        tables: [{ name: initialTableName }],
+                        columns: tableColumns.map((col) => ({
+                            field: col.field,
+                            table: initialTableName,
+                        })),
+                    },
+                    fetchData: true,
+                });
+            }
+        }
+    }, [filteredSchema, initialTableName]);
+    useEffect(() => {
+        if (!data && !dashboardIsLoading) {
+            // need dashboard to be in Context for filteredSchema
+            reload();
+        }
+    }, [data, dashboardIsLoading]);
     useEffect(() => {
         if (isChartBuilderOpen === false) {
             onCloseChartBuilder && onCloseChartBuilder();
@@ -156,7 +1129,136 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         : '100%',
                     overscrollBehavior: 'none',
                     ...containerStyle,
-                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(AddColumns, { reportBuilder: reportBuilder, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, DraggableColumnComponent: DraggableColumnComponent, TextInputComponent: TextInputComponent, SelectColumnComponent: SelectColumnComponent, SecondaryButtonComponent: SecondaryButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), _jsx(AddFilters, { reportBuilder: reportBuilder, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, PopoverComponent: PopoverComponent })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(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 })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), _jsx(AddSort, { reportBuilder: reportBuilder, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PopoverComponent: PopoverComponent, SortPopoverComponent: SortPopoverComponent })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), _jsx(AddLimit, { reportBuilder: reportBuilder, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, TextInputComponent: TextInputComponent, PopoverComponent: PopoverComponent, LimitPopoverComponent: LimitPopoverComponent })] }), _jsx("div", { style: { width: '100%', minHeight: '30vh' } })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, { columns: columns, DraggableColumnComponent: DraggableColumnComponent, onColumnOrderChange: handleColumnsChange, loading: loading }), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                            if (!openPopover) {
+                                                setOpenPopover('AddColumnModal');
+                                            }
+                                        }, label: "Select columns", disabled: loading }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                            if (!isOpen) {
+                                                // delay onClose callback so onClick no-ops
+                                                setTimeout(() => {
+                                                    setOpenPopover(null);
+                                                }, 100);
+                                            }
+                                        }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: (tables, columns) => {
+                                                handleMultiStateChange({
+                                                    state: {
+                                                        ...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 }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), filterStack.length > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(FilterStack, { client: client, filterStack: filterStack, handleFilterStackChange: handleFilterStackChange, schemaData: schemaData, uniqueValues: unfilteredUniqueValues, uniqueValuesIsLoading: unfilteredUniqueValuesIsLoading, tables: tables, TabsComponent: TabsComponent, FilterPopoverComponent: FilterPopoverComponent, FilterModal: FilterModal, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, actionsEnabled: !loading, dashboardName: destinationDashboard, getToken: getToken, reportBuilderColumns: columns }) })), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start',
+                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: columns.length === 0 || loading, onClick: () => {
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddFilterPopover');
+                                                    }
+                                                }, label: 'Add filter' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { 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 }) }) })] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotAggregations: pivotAggregations, setPivotAggregations: setPivotAggregations, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SubheaderComponent: SubHeaderComponent, DeleteButtonComponent: DeleteButtonComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: reportRows, columns: reportColumnsToStateColumns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                            handlePivotChange(null, sortOrLimitWasReset);
+                                        }, selectPivot: async (selectedPivot) => {
+                                            if (!selectedPivot)
+                                                return;
+                                            handlePivotChange(selectedPivot, true);
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: columnUniqueValues, uniqueValuesIsLoading: filteredUniqueValuesIsLoading ||
+                                            unfilteredUniqueValuesIsLoading, disabled: !columns.length || tableLoading || loading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, report: tempReport, dashboardName: destinationDashboard }), pivot && (_jsx(PivotForm, { columns: reportColumnsToStateColumns, uniqueValues: columnUniqueValues, uniqueValuesIsLoading: filteredUniqueValuesIsLoading ||
+                                            unfilteredUniqueValuesIsLoading, setPivotRowField: (value) => {
+                                            setPivotRowField(value);
+                                            updatePivot(value, 'rowField');
+                                        }, 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 }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && pivot.sortField && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(SortSentence, { sortField: pivot.sortField, sortDirection: pivot.sortDirection || 'ASC', columns: pivotData?.columns ?? [], setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
+                                                onSortChange({
+                                                    field: pivot.sortField ?? '',
+                                                    direction: pivot.sortDirection ?? 'ASC',
+                                                }, true);
+                                            }, onSave: async (column, direction) => {
+                                                onSortChange({ field: column, direction });
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-pivot`) })), sort && sort.length > 0 && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: sort.map((sortData, id) => (_jsx(SortSentence, { sortField: sortData.field, sortDirection: sortData.direction, columns: reportColumnsToStateColumns, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                onSortChange(sortData, true);
+                                            }, onSave: (column, direction) => {
+                                                onSortChange({ field: column, direction });
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: columns.length === 0 ||
+                                            loading ||
+                                            tableLoading ||
+                                            !!mssqlSortWarning, onClick: () => {
+                                            if (!openPopover) {
+                                                setOpenPopover('AddSortPopover');
+                                            }
+                                        }, label: 'Add sort', tooltipText: mssqlSortWarning }), _jsx("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivotData
+                                                    ? pivotData.columns
+                                                    : reportColumnsToStateColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
+                                                    onSortChange({ field: column, direction });
+                                                    setOpenPopover(null);
+                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), limit || pivot?.rowLimit ? (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(LimitSentence, { limit: limit?.value || pivot?.rowLimit || 0, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                                onLimitChange(null);
+                                                setOpenPopover(null);
+                                            }, onSave: (limit) => {
+                                                onLimitChange(limit);
+                                                setOpenPopover(null);
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: columns.length === 0 || loading || tableLoading, onClick: () => {
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddLimitPopover');
+                                                    }
+                                                }, label: 'Add limit' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                            onLimitChange(limit);
+                                                            setOpenPopover(null);
+                                                        } }) }) })] }))] }), _jsx("div", { style: { width: '100%', minHeight: '30vh' } })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
                                     event.preventDefault();
                                 }, style: {
                                     display: 'flex',
@@ -172,7 +1274,18 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                     if (tables.length <= 1) {
                                                         fetchAstFromPromptHelper();
                                                     }
-                                                }, isLoading: askAILoading && columns.length === 0, label: 'Ask AI' }) }), !reportId && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: () => clearAllState(false), disabled: columns.length === 0 || loading }))] }) })), columns.length > 0 && (_jsx(ReportTable, { reportBuilder: reportBuilder, TableComponent: TableComponent })), _jsxs("div", { style: {
+                                                }, isLoading: askAILoading && columns.length === 0, label: 'Ask AI' }) }), !reportId && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: () => clearAllState(false), disabled: columns.length === 0 || loading }))] }) })), columns.length > 0 && (_jsx(TableComponent, { isLoading: tableLoading || (loading && errorMessage.length === 0), rows: formattedRows, rowCount: pivot ? pivotData?.rowCount : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
+                                    ? pivotData?.columns || []
+                                    : reportColumnsToStateColumns.map((col) => {
+                                        return {
+                                            field: col.field,
+                                            label: snakeAndCamelCaseToTitleCase(col.field),
+                                        };
+                                    }), onPageChange: onPageChange, onSortChange: (sort) => {
+                                    onSortChange(sort);
+                                }, disableSort: !!mssqlSortWarning, containerStyle: {
+                                    maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, reportRows.length), 20) * 37),
+                                } })), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -189,81 +1302,132 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                         }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage || pivotError }), aiPrompt.trim().length > 500 && (_jsx(SecondaryButtonComponent, { onClick: () => {
                                                     fetchAstFromPromptHelper();
                                                 }, label: 'Retry' })), _jsx(SecondaryButtonComponent, { onClick: () => clearAllState(false), label: 'Reset' })] })) : (_jsx("div", { style: { width: '100%' } })), stateStack.length > 0 && (_jsx(SecondaryButtonComponent, { onClick: handleUndo, label: "", icon: _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: _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 && (_jsx(SecondaryButtonComponent, { onClick: handleRedo, label: "", icon: _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: _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 && (_jsxs(_Fragment, { children: [onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), !isAdminEnabled || reportId ? null : (_jsx(SecondaryButtonComponent, { onClick: async () => {
-                                                    onSaveQuery();
+                                                    let tempReportQuery = activeQuery;
+                                                    if (queryOutOfSync) {
+                                                        tempReportQuery =
+                                                            await fetchQueryFromReportBuilderState(reportBuilderState);
+                                                    }
+                                                    const tempReportColumns = columns
+                                                        .map((column) => {
+                                                        return reportColumnsToStateColumns.find((col) => col.field === (column.alias || column.field));
+                                                    })
+                                                        .filter((col) => col !== undefined);
+                                                    let customFieldColumns = [];
+                                                    if (client && isSelectStar && schemaData.customFields) {
+                                                        customFieldColumns = tables.flatMap((table) => {
+                                                            return (schemaData.customFields?.[table.name || ''] || []).map((field) => field.field);
+                                                        });
+                                                    }
+                                                    setTempReport({
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? pivotFormData(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: TEMP_REPORT_ID,
+                                                        dashboardName: destinationDashboard,
+                                                        pivot: pivot,
+                                                        yAxisFields: tempReport?.pivot && !pivot
+                                                            ? []
+                                                            : tempReport?.yAxisFields,
+                                                        columns: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        columnInternal: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        queryString: isSelectStar
+                                                            ? convertQueryToSelectStar(tempReportQuery)
+                                                            : tempReportQuery,
+                                                        includeCustomFields: isSelectStar,
+                                                        rows: reportRows,
+                                                        pivotRows: pivotData?.rows,
+                                                        pivotColumns: pivotData?.columns,
+                                                        pivotRowCount: pivotData?.rowCount,
+                                                        pivotQuery: pivotData?.pivotQuery,
+                                                        comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                        flags: tempReport?.flags,
+                                                        chartType: 'table',
+                                                    });
                                                     setIsSaveQueryModalOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
                                                     !!unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), _jsx(ButtonComponent, { onClick: async () => {
-                                                    onSaveReport();
+                                                    let tempReportQuery = activeQuery;
+                                                    if (queryOutOfSync) {
+                                                        tempReportQuery =
+                                                            await fetchQueryFromReportBuilderState(reportBuilderState);
+                                                    }
+                                                    onSaveChanges && onSaveChanges();
+                                                    const tempReportColumns = columns
+                                                        .map((column) => {
+                                                        return reportColumnsToStateColumns.find((col) => col.field === (column.alias || column.field));
+                                                    })
+                                                        .filter((col) => col !== undefined);
+                                                    let customFieldColumns = [];
+                                                    if (client && isSelectStar && schemaData.customFields) {
+                                                        customFieldColumns = tables.flatMap((table) => {
+                                                            return (schemaData.customFields?.[table.name || ''] || []).map((field) => field.field);
+                                                        });
+                                                    }
+                                                    setTempReport({
+                                                        ...tempReport,
+                                                        ...(pivot
+                                                            ? pivotFormData(pivot, reportColumnsToStateColumns, tempReport, tempReport.chartType, pivotData ?? undefined)
+                                                            : {}),
+                                                        id: TEMP_REPORT_ID,
+                                                        dashboardName: destinationDashboard,
+                                                        pivot: pivot,
+                                                        yAxisFields: tempReport?.pivot && !pivot
+                                                            ? []
+                                                            : tempReport?.yAxisFields,
+                                                        columns: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        columnInternal: isSelectStar
+                                                            ? // if SELECT *, filter out custom fields from tabular view
+                                                                // so Automatic Custom Fields can be applied
+                                                                tempReportColumns.filter((col) => {
+                                                                    return !customFieldColumns.includes(col.field);
+                                                                })
+                                                            : tempReportColumns,
+                                                        queryString: isSelectStar
+                                                            ? convertQueryToSelectStar(tempReportQuery)
+                                                            : tempReportQuery,
+                                                        includeCustomFields: isSelectStar,
+                                                        rows: reportRows,
+                                                        pivotRows: pivotData?.rows,
+                                                        pivotColumns: pivotData?.columns,
+                                                        pivotRowCount: pivotData?.rowCount,
+                                                        pivotQuery: pivotData?.pivotQuery,
+                                                        comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                        flags: tempReport?.flags,
+                                                    });
                                                     setIsChartBuilderOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
-                                                    !!unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(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 && (_jsx(ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSubmitSaveQuery, destinationDashboard: SAVED_QUERIES_DASHBOARD, destinationSection: destinationSection, isAdmin: false, title: 'Save query', buttonLabel: 'Save query', tempReport: tempReport, reportId: reportId, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, CheckboxComponent: CheckboxComponent, hideDateRangeFilter: true, hideDeleteButton: true, hideDiscardChanges: true, hideSQLQuery: false, onClickChartElement: onClickChartElement, isEditingMode: true }))] }));
+                                                    !!unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { tempReport: tempReport, reportId: reportId, isAdmin: isAdminEnabled, title: chartBuilderTitle
+                    ? chartBuilderTitle
+                    : reportId
+                        ? 'Save changes'
+                        : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, 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 && (_jsx(ChartBuilderWithModal, { isHorizontalView: false, hideTableView: true, hideChartView: true, hidePivotForm: true, hideChartType: true, isOpen: isSaveQueryModalOpen, setIsOpen: setIsSaveQueryModalOpen, onAddToDashboardComplete: onSubmitSaveQuery, destinationDashboard: 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 }))] }));
 }