@quillsql/react 2.14.17 → 2.15.0

package/dist/esm/ReportBuilder.js

@@ -1,38 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { useContext, useEffect, useRef, useState, } from 'react';
 import { MemoizedButton, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableReportBuilderComponent, QuillChartBuilderCheckboxComponent, QuillToolTip, } from './components/UiComponents';
-import { ClientContext, FetchContext, SchemaDataContext, TenantContext, ThemeContext, } from './Context';
+import { 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 { 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';
+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';
 /**
  * Quill Report Builder
  *
@@ -64,7 +49,7 @@ import { filterSentence } from './utils/filterProcessing';
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onSubmitSaveQuery = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, onCloseChartBuilder = undefined, destinationDashboard, destinationSection, chartBuilderTitle = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableReportBuilderComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = QuillChartBuilderCheckboxComponent, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onSubmitSaveQuery = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, onCloseChartBuilder = undefined, destinationDashboard, destinationSection, chartBuilderTitle = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableReportBuilderComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = QuillChartBuilderCheckboxComponent, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, onRequestAddVirtualTable, }) {
     /**
      * The state of the ReportBuilder is based off of an AST, which is a representation of a sql query
      * ASTs for the same query can vary between database types, so we create a layer of abstraction on top of it
@@ -104,930 +89,45 @@ 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);
-    // Consts
-    const REPORT_BUILDER_PAGINATION = {
-        page: 0,
-        rowsPerPage: 20,
-        rowsPerRequest: 100,
-    };
-    // ReportBuilder UI States
+    const askAIContainerRef = useRef(null);
+    const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
+    // UI
+    const [isCopying, setIsCopying] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [filtersEnabled, setFiltersEnabled] = useState(!!reportId);
     const [isSaveQueryModalOpen, setIsSaveQueryModalOpen] = useState(false);
-    const [openPopover, setOpenPopover] = useState(null);
-    const [aiPrompt, setAiPrompt] = useState('');
-    const [reportBuilderLoading, setReportBuilderLoading] = useState(false);
-    const [tableLoading, setTableLoading] = useState(false);
-    const [errorMessage, setErrorMessage] = useState('');
-    const [unresolvedReportMessage, setUnresolvedReportMessage] = useState('');
-    // Core Report states
-    // 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,
+    // Main
+    const reportBuilder = useReportBuilderInternal({
+        reportId,
+        initialTableName,
+        destinationDashboard,
+        pivotRecommendationsEnabled,
+        onSaveChanges,
     });
-    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 { 
+    // 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 }
-            : 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' &&
-                agg.aggregationType !== 'percentage')) {
-            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.
@@ -1040,81 +140,6 @@ 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();
@@ -1131,136 +156,7 @@ 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(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) => {
+                }, 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, onRequestAddVirtualTable: onRequestAddVirtualTable })] }), _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) => {
                                     event.preventDefault();
                                 }, style: {
                                     display: 'flex',
@@ -1276,18 +172,7 @@ 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(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: {
+                                                }, 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: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -1304,132 +189,81 @@ 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 () => {
-                                                    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',
-                                                    });
+                                                    onSaveQuery();
                                                     setIsSaveQueryModalOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
                                                     !!unresolvedReportMessage, label: 'Save query', tooltipText: unresolvedReportMessage })), _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
-                                                            ? 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,
-                                                    });
+                                                    onSaveReport();
                                                     setIsChartBuilderOpen(true);
                                                 }, disabled: !!errorMessage ||
                                                     !!pivotError ||
                                                     tableLoading ||
                                                     loading ||
-                                                    !!unresolvedReportMessage, label: reportId ? 'Save changes' : 'Add to dashboard', tooltipText: unresolvedReportMessage })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { tempReport: tempReport, reportId: reportId, isAdmin: isAdminEnabled, title: chartBuilderTitle
-                    ? 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 }))] }));
+                                                    !!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 }))] }));
 }