@quillsql/react 2.13.34 → 2.13.36

package/dist/cjs/ReportBuilder.js

@@ -108,7 +108,15 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
     const [rows, setRows] = (0, react_1.useState)([]);
     const [formattedRows, setFormattedRows] = (0, react_1.useState)([]);
     const [columns, setColumns] = (0, react_1.useState)([]);
-    const [tempReport, setTempReport] = (0, react_1.useState)(report_1.EMPTY_INTERNAL_REPORT);
+    const REPORT_BUILDER_PAGINATION = {
+        page: 0,
+        rowsPerPage: 20,
+        rowsPerRequest: 100,
+    };
+    const [tempReport, setTempReport] = (0, react_1.useState)({
+        ...report_1.EMPTY_INTERNAL_REPORT,
+        pagination: REPORT_BUILDER_PAGINATION,
+    });
     const [uniqueValues, setUniqueValues] = (0, react_1.useState)({});
     const [uniqueValuesIsLoading, setUniqueValuesIsLoading] = (0, react_1.useState)(false);
     const [pivot, setPivot] = (0, react_1.useState)(null);
@@ -144,11 +152,6 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
     const { filterTree, filterStack } = (0, useAstToFilterTree_1.default)(formData, client, columns); // Stores the state of filters
     const [removingFilter, setRemovingFilter] = (0, react_1.useState)(false);
     const [pivotRecommendationsEnabledState, setPivotRecommendationsEnabledState,] = (0, react_1.useState)(pivotRecommendationsEnabled);
-    const REPORT_BUILDER_PAGINATION = {
-        page: 0,
-        rowsPerPage: 20,
-        rowsPerRequest: 1000,
-    };
     const [unresolvedReportMessage, setUnresolvedReportMessage] = (0, react_1.useState)('');
     const dashboardName = (0, react_1.useMemo)(() => {
         if (destinationDashboard) {
@@ -160,12 +163,20 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         return dashboard[reportId]?.dashboardName;
     }, [reportId, dashboard, destinationDashboard]);
     const [filtersEnabled, setFiltersEnabled] = (0, react_1.useState)(!!reportId);
+    const mssqlSortWarning = (0, react_1.useMemo)(() => {
+        if (!client || client?.databaseType !== 'mssql') {
+            return undefined;
+        }
+        else if (!pivot && !baseAst?.top) {
+            return 'Please add a limit.';
+        }
+    }, [client, baseAst, pivot]);
     (0, react_1.useEffect)(() => {
         if (!client) {
             return;
         }
-        if (client.recommendedPivotsDisabled !== undefined) {
-            setPivotRecommendationsEnabledState(!client.recommendedPivotsDisabled);
+        if (client.featureFlags?.['recommendedPivotsDisabled'] !== undefined) {
+            setPivotRecommendationsEnabledState(!client.featureFlags?.['recommendedPivotsDisabled']);
         }
         if (!initialLoad && client.publicKey) {
             clearAllState();
@@ -211,6 +222,14 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         setPivotError(undefined);
         // @ts-ignore
         newPivot[fieldKey] = changeField;
+        if (fieldKey === 'columnField' &&
+            !changeField &&
+            pivotValueField === pivotValueField2) {
+            setPivotValueField2(undefined);
+            newPivot.valueField2 = undefined;
+        }
+        newPivot.rowLimit = undefined;
+        newPivot.sort = undefined;
         if (fieldKey === 'rowField') {
             // check to see if the new rowField value is a date field
             const column = columns.find((c) => c.field === changeField);
@@ -226,11 +245,15 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                 newPivot.sort = undefined;
             }
         }
+        setPivot(newPivot);
         const { valid, reason } = (0, pivotProcessing_1.isValidPivot)(newPivot);
         if (!valid) {
             setPivotError(reason);
             return;
         }
+        resetLimit();
+        resetSort();
+        setPreviousPage(0);
         setTableLoading(true);
         let dateBucket = undefined;
         const tempDateRange = dateRanges && dateRanges[newPivot.rowField || ''];
@@ -240,16 +263,20 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         let distinctValuesForQuery = {};
         const prevPivot = pivot;
         const prevPivotData = pivotData;
-        setPivot(newPivot);
         setPivotHint('');
         if (newPivot.columnField) {
-            distinctValuesForQuery = await (0, tableProcessing_1.getUniqueValuesByColumns)([
-                {
-                    field: newPivot.columnField,
-                    label: newPivot.columnField,
-                    format: 'string',
-                },
-            ], activeQuery, [], client, tenants, schemaData.customFields ?? [], undefined, dashboardName);
+            if (uniqueValues?.[newPivot.columnField]) {
+                distinctValuesForQuery = uniqueValues;
+            }
+            else {
+                distinctValuesForQuery = await (0, tableProcessing_1.getUniqueValuesByColumns)([
+                    {
+                        field: newPivot.columnField,
+                        label: newPivot.columnField,
+                        format: 'string',
+                    },
+                ], activeQuery, [], client, tenants, schemaData.customFields ?? [], undefined, dashboardName);
+            }
         }
         try {
             const pivotedData = await (0, PivotModal_1.generatePivotTable)({
@@ -260,7 +287,9 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                 uniqueValues: distinctValuesForQuery,
                 dashboardName,
                 tenants,
+                additionalProcessing: { page: REPORT_BUILDER_PAGINATION },
             });
+            resetProcessing();
             setPivotData(pivotedData || []);
             const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
             setFormattedRows(formattedRows);
@@ -292,6 +321,65 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             setTableLoading(false);
         }
     };
+    const resetLimit = (fetchData) => {
+        const newAst = {
+            ...baseAst,
+            limit: null,
+            top: null,
+            orderby: client?.databaseType === 'mssql' ? null : baseAst.orderby,
+        };
+        setBaseAst((prevAst) => ({
+            ...prevAst,
+            limit: null,
+            top: null,
+            orderby: client?.databaseType === 'mssql' ? null : prevAst.orderby,
+        }));
+        setPivot((oldPivot) => {
+            if (!oldPivot)
+                return null;
+            return {
+                ...oldPivot,
+                rowLimit: undefined,
+            };
+        });
+        if (fetchData) {
+            fetchReportFromASTHelper({
+                baseAst: newAst,
+                curPivot: pivot ? { ...pivot, rowLimit: undefined } : undefined,
+            });
+        }
+    };
+    const resetSort = (fetchData) => {
+        if (pivot) {
+            setPivot((oldPivot) => {
+                if (!oldPivot)
+                    return null;
+                return {
+                    ...oldPivot,
+                    sort: undefined,
+                    sortField: undefined,
+                    sortDirection: undefined,
+                    sortFieldType: undefined,
+                };
+            });
+        }
+        const newAst = { ...baseAst, orderby: null };
+        setBaseAst((prevAst) => ({ ...prevAst, orderby: null }));
+        if (fetchData) {
+            fetchReportFromASTHelper({
+                baseAst: newAst,
+                curPivot: pivot
+                    ? {
+                        ...pivot,
+                        sort: undefined,
+                        sortField: undefined,
+                        sortDirection: undefined,
+                        sortFieldType: undefined,
+                    }
+                    : undefined,
+            });
+        }
+    };
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -440,7 +528,10 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             const data = await response.json();
             setActiveQuery(data.query);
             if (fetchData) {
-                fetchReportFromASTHelper(ast, formData);
+                fetchReportFromASTHelper({
+                    baseAst: ast,
+                    newFormData: formData,
+                });
             }
             return data.query;
         }
@@ -560,7 +651,13 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                 }
                 const { ast: newAst, pivot: newPivot, schema: curSchema, } = await (0, astProcessing_1.fetchASTFromQuillReport)(report, client, schemaData.schema);
                 setBaseAst({ ...newAst, where: null });
-                await fetchReportFromASTHelper({ ...newAst, where: null }, newAst.where, newPivot, curSchema, report);
+                await fetchReportFromASTHelper({
+                    baseAst: { ...newAst, where: null },
+                    newFormData: newAst.where,
+                    curPivot: newPivot,
+                    curSchema,
+                    previousReport: report,
+                });
                 await onSchemaChange();
                 setReportInfo(report);
                 const query = await fetchSqlQuery(newAst, null, false);
@@ -642,7 +739,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             ];
         }
         else {
-            return [{ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(pivot.valueField) }];
+            return [{ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(pivot?.valueField || '') }];
         }
     };
     const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
@@ -652,12 +749,15 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
     const [numberOfRows, setNumberOfRows] = (0, react_1.useState)(0);
     const [rowCountIsLoading, setRowCountIsLoading] = (0, react_1.useState)(false);
     const [tableLoading, setTableLoading] = (0, react_1.useState)(false);
+    const resetProcessing = () => {
+        setCurrentProcessing({ page: REPORT_BUILDER_PAGINATION });
+    };
     const onPageChange = (page, initiator = 'ReportBuilder') => {
         const pagination = initiator === 'ReportBuilder'
             ? REPORT_BUILDER_PAGINATION
             : paginationProcessing_1.DEFAULT_PAGINATION;
         if (currentProcessing.page &&
-            (0, paginationProcessing_1.shouldFetchMore)(pagination, page, previousPage)) {
+            (0, paginationProcessing_1.shouldFetchMore)(pagination, page, previousPage, pivotData ? pivotData.rows.length : rows.length)) {
             const newPagination = { ...currentProcessing.page, page };
             const updatedProcessing = { ...currentProcessing, page: newPagination };
             setCurrentProcessing(updatedProcessing);
@@ -667,40 +767,130 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             setPreviousPage(page);
         }
     };
-    const onSortChange = (sort) => {
-        if ((0, paginationProcessing_1.shouldSortInMemory)(REPORT_BUILDER_PAGINATION, numberOfRows) ||
-            (pivot && pivot.rowField !== sort.field)) {
-            return;
+    const onSortChange = (sort, isDelete) => {
+        if (pivot) {
+            let newPivot = null;
+            if (isDelete) {
+                setPivot((oldPivot) => {
+                    if (!oldPivot)
+                        return null;
+                    newPivot = {
+                        ...oldPivot,
+                        sort: undefined,
+                        sortField: undefined,
+                        sortDirection: undefined,
+                        sortFieldType: undefined,
+                    };
+                    return newPivot;
+                });
+            }
+            else {
+                setPivot((oldPivot) => {
+                    if (!oldPivot)
+                        return null;
+                    newPivot = {
+                        ...oldPivot,
+                        sort: true,
+                        sortField: sort.field,
+                        sortDirection: sort.direction,
+                        sortFieldType: getColumnTypeByName(sort.field),
+                    };
+                    return newPivot;
+                });
+            }
+            fetchReportFromASTHelper({
+                baseAst: baseAst,
+                curPivot: newPivot,
+            });
         }
-        const newAst = { ...baseAst };
-        if (!newAst.orderby) {
-            newAst.orderby = [];
+        else {
+            const newAst = { ...baseAst };
+            if (!newAst.orderby) {
+                newAst.orderby = [];
+            }
+            const existingSortIndex = newAst.orderby.findIndex((item) => (0, astFilterProcessing_1.getFieldFromExpression)(item.expr) === sort.field);
+            if (isDelete) {
+                if (existingSortIndex !== -1) {
+                    newAst.orderby.splice(existingSortIndex, 1);
+                }
+            }
+            else if (existingSortIndex !== -1) {
+                newAst.orderby[existingSortIndex] = {
+                    expr: { type: 'column_ref', column: sort.field },
+                    type: sort.direction.toUpperCase(),
+                };
+            }
+            else {
+                newAst.orderby.push({
+                    expr: { type: 'column_ref', column: sort.field },
+                    type: sort.direction.toUpperCase(),
+                });
+            }
+            setBaseAst((0, util_1.deepCopy)(newAst));
+            fetchReportFromASTHelper({
+                baseAst: newAst,
+            });
+            setPreviousPage(0);
         }
-        const existingSortIndex = newAst.orderby.findIndex((item) => (0, astFilterProcessing_1.getFieldFromExpression)(item.expr) === sort.field);
-        if (existingSortIndex !== -1) {
-            newAst.orderby[existingSortIndex] = {
-                expr: { type: 'column_ref', column: sort.field },
-                type: sort.direction.toUpperCase(),
-            };
+    };
+    const onLimitChange = (limit) => {
+        if (limit) {
+            if (pivot) {
+                setPivot((oldPivot) => {
+                    if (!oldPivot)
+                        return null;
+                    const newPivot = { ...oldPivot, rowLimit: limit };
+                    fetchReportFromASTHelper({ baseAst, curPivot: newPivot });
+                    return newPivot;
+                });
+            }
+            else {
+                const newAst = { ...baseAst };
+                if (client.databaseType.toLowerCase() === 'mssql') {
+                    newAst.top = {
+                        value: limit,
+                    };
+                }
+                else {
+                    newAst.limit = {
+                        seperator: '',
+                        value: [
+                            {
+                                type: 'number',
+                                value: limit,
+                            },
+                        ],
+                    };
+                }
+                setBaseAst((0, util_1.deepCopy)(newAst));
+                fetchSqlQuery((0, util_1.deepCopy)(newAst), undefined, true);
+            }
         }
         else {
-            newAst.orderby.push({
-                expr: { type: 'column_ref', column: sort.field },
-                type: sort.direction.toUpperCase(),
-            });
+            resetLimit(true);
         }
-        setBaseAst((0, util_1.deepCopy)(newAst));
-        fetchReportFromASTHelper(newAst, newAst.where);
-        setPreviousPage(0);
+        setOpenPopover(null);
     };
     const fetchRowCount = async (processing, includeFilters) => {
         if (!client || !activeQuery) {
             return;
         }
         setRowCountIsLoading(true);
-        const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)(activeQuery, client, tenants, processing, schemaData.customFields, includeFilters ? specificDashboardFilters : undefined, includeFilters
-            ? (tempReport.dateField ?? reportInfo?.dateField)
-            : undefined, false, true, undefined, dashboardName);
+        const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)({
+            query: activeQuery,
+            client,
+            tenants,
+            processing,
+            customFields: schemaData.customFields,
+            filters: includeFilters ? specificDashboardFilters : undefined,
+            dateField: includeFilters
+                ? (tempReport.dateField ?? reportInfo?.dateField)
+                : undefined,
+            rowsOnly: false,
+            rowCountOnly: true,
+            filterMap: undefined,
+            dashboardName,
+        });
         if (tableInfo.rowCount) {
             setNumberOfRows(tableInfo.rowCount);
             // @ts-ignore
@@ -726,29 +916,62 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
     };
     const handleRunQuery = async (processing, resetRows = false, includeFilters = false) => {
         try {
+            const isPivotPagination = !!(pivot && pivotData);
             setErrorMessage('');
             setTableLoading(true);
-            const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)(activeQuery, client, tenants, processing, schemaData.customFields, undefined, undefined, true, undefined, undefined, dashboardName);
+            const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)({
+                query: isPivotPagination ? pivotData.pivotQuery : activeQuery,
+                comparisonQuery: pivot && pivotData ? pivotData.comparisonPivotQuery : undefined,
+                client,
+                tenants,
+                processing,
+                customFields: schemaData.customFields,
+                rowsOnly: true,
+                dashboardName,
+                pivot: pivot,
+                getPivotRowCount: false,
+            });
             if (tableInfo.error) {
                 throw new Error(tableInfo.error);
             }
             else if (tableInfo.rows.length === 0) {
                 throw new Error('No data found');
             }
-            fetchRowCount(processing, includeFilters);
-            let tempRows = [...rows, ...tableInfo.rows];
-            if (resetRows) {
-                tempRows = tableInfo.rows;
-                setPreviousPage(0);
+            if (!isPivotPagination) {
+                // fetching row count for non-pivot query
+                fetchRowCount(processing, includeFilters);
+                let tempRows = [...rows, ...tableInfo.rows];
+                if (resetRows) {
+                    tempRows = tableInfo.rows;
+                    setPreviousPage(0);
+                }
+                setRows(tempRows);
+                setFormattedRows((0, report_1.formatRowsFromReport)({ rows: tempRows, columns: tableInfo.columns }));
+                setTempReport((tempReport) => ({
+                    ...tempReport,
+                    rows: tempRows,
+                    rowCount: tableInfo.rowCount ?? tempReport.rowCount,
+                }));
+                setColumns(tableInfo.columns);
+            }
+            else {
+                let tempRows = [...pivotData.rows, ...tableInfo.rows];
+                if (resetRows) {
+                    tempRows = tableInfo.rows;
+                    setPreviousPage(0);
+                }
+                setPivotData((oldPivotData) => {
+                    if (oldPivotData) {
+                        return {
+                            ...oldPivotData,
+                            rows: tempRows,
+                            columns: tableInfo.columns,
+                        };
+                    }
+                    return null;
+                });
+                setFormattedRows((0, report_1.formatRowsFromReport)({ rows: tempRows, columns: tableInfo.columns }));
             }
-            setRows(tempRows);
-            setFormattedRows((0, report_1.formatRowsFromReport)({ rows: tempRows, columns: tableInfo.columns }));
-            setTempReport((tempReport) => ({
-                ...tempReport,
-                rows: tempRows,
-                rowCount: tableInfo.rowCount ?? tempReport.rowCount,
-            }));
-            setColumns(tableInfo.columns);
             setTableLoading(false);
         }
         catch (e) {
@@ -789,12 +1012,31 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         updateFieldValuesMap(uniqueStringsObj, table);
         return uniqueStringsObj;
     };
-    const fetchReportFromASTHelper = async (baseAst, newFormData, curPivot, curSchema, previousReport, keepPivotHint = false) => {
+    const fetchReportFromASTHelper = async ({ baseAst, newFormData, curPivot, curSchema, previousReport, keepPivotHint = false, }) => {
         const curFormData = newFormData !== undefined ? newFormData : formData;
         let reportBuilderInfo = undefined;
         try {
             setLoading(true);
-            reportBuilderInfo = await (0, report_1.fetchReportBuilderDataFromAST)(baseAst, curFormData, curSchema ?? schemaData.schema, client, tenants, curPivot ?? pivot, formData, currentTable, { uniqueStrings: uniqueValues, dateRanges: dateRanges ?? {} }, previousReport ?? reportInfo ?? undefined, schemaData.customFields, true, true, { page: REPORT_BUILDER_PAGINATION }, dashboardName);
+            reportBuilderInfo = await (0, report_1.fetchReportBuilderDataFromAST)({
+                baseAst,
+                formData: curFormData,
+                schema: curSchema ?? schemaData.schema,
+                client,
+                tenants,
+                pivot: curPivot ?? pivot,
+                previousFormData: formData,
+                currentTable,
+                previousRelevant: {
+                    uniqueStrings: uniqueValues,
+                    dateRanges: dateRanges ?? {},
+                },
+                report: previousReport ?? reportInfo ?? undefined,
+                customFields: schemaData.customFields,
+                skipUniqueValues: true,
+                skipRowCount: true,
+                processing: { page: REPORT_BUILDER_PAGINATION },
+                dashboardName,
+            });
             if (reportBuilderInfo.error) {
                 throw new Error(reportBuilderInfo.error);
             }
@@ -814,7 +1056,10 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             setErrorMessage('Failed to fetch');
             return;
         }
-        setTempReport(reportBuilderInfo.report);
+        setTempReport({
+            ...reportBuilderInfo.report,
+            pagination: REPORT_BUILDER_PAGINATION,
+        });
         fetchRowCountFromAST(baseAst, curFormData);
         const reportTable = reportBuilderInfo.table;
         const reportBuilderInfoColumns = reportBuilderInfo.columns.map((column) => {
@@ -832,7 +1077,6 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         if (prevTable !== reportBuilderInfo.table) {
             setSelectedOrderedColumns([]); // reset selected ordered columns
         }
-        setNumberOfRows(reportBuilderInfo.rowCount);
         setPivot(reportBuilderInfo.pivot);
         if (!keepPivotHint) {
             setPivotHint('');
@@ -908,7 +1152,14 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                 }
                 setUniqueValuesIsLoading(false);
                 if (pivotChanged) {
-                    fetchReportFromASTHelper(baseAst, curFormData, newPivot, curSchema, previousReport, true);
+                    fetchReportFromASTHelper({
+                        baseAst,
+                        newFormData: curFormData,
+                        curPivot: newPivot,
+                        curSchema,
+                        previousReport,
+                        keepPivotHint: true,
+                    });
                 }
                 else {
                     setLoading(false);
@@ -940,7 +1191,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
             setLoading(true);
             setAskAILoading(true);
             setErrorMessage('');
-            astInfo = await (0, astProcessing_1.fetchAndProcessASTFromPrompt)(prompt, schemaData.schema, client, pivot, activeQuery, currentTable, dashboardName);
+            astInfo = await (0, astProcessing_1.fetchAndProcessASTFromPrompt)(prompt, schemaData.schema, client, pivot ?? undefined, activeQuery, currentTable, dashboardName, tenants);
             if (astInfo.error) {
                 throw new Error(astInfo.error);
             }
@@ -975,7 +1226,11 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
         setBaseAst(astInfo.ast);
         fetchSqlQuery(astInfo.ast, cleanAst, false);
         setAskAILoading(false);
-        await fetchReportFromASTHelper(astInfo.ast, cleanAst, astInfo.pivot);
+        await fetchReportFromASTHelper({
+            baseAst: astInfo.ast,
+            newFormData: cleanAst,
+            curPivot: astInfo.pivot,
+        });
     };
     const makePivotValid = (pivot, uniqueValuesForPivot, reportTable, reportColumns) => {
         if (!pivot) {
@@ -1179,6 +1434,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                     ast.where = null;
                                                     ast.orderby = null;
                                                     ast.limit = null;
+                                                    ast.top = null;
                                                     setBaseAst(ast);
                                                     fetchSqlQuery(ast, null);
                                                 }
@@ -1237,23 +1493,29 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                             setPivot(null);
                                             setPivotHint('');
                                             setPivotData(null);
+                                            resetLimit();
+                                            resetSort(true);
+                                            setPreviousPage(0);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
                                         }, selectPivot: async (selectedPivot, uniqueValues, dateRange, pivotTable) => {
                                             if (!selectedPivot)
                                                 return;
-                                            const newAst = { ...baseAst };
-                                            newAst.orderby = null;
+                                            // const newAst = { ...baseAst };
+                                            // newAst.orderby = null;
                                             if (selectedPivot.rowFieldType === 'date') {
                                                 selectedPivot['sort'] = true;
                                                 selectedPivot['sortDirection'] = 'ASC';
                                             }
-                                            setBaseAst(newAst); // trigger refetch
+                                            // setBaseAst(newAst); // trigger refetch
                                             let dateBucket = undefined;
                                             if (dateRange) {
                                                 dateBucket = (0, dates_1.getDateBucketFromRange)(dateRange);
                                             }
                                             setPivot(selectedPivot);
+                                            resetLimit();
+                                            resetSort();
+                                            setPreviousPage(0);
                                             setPivotHint('');
                                             try {
                                                 if (!pivotTable) {
@@ -1266,8 +1528,12 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                         uniqueValues,
                                                         dashboardName,
                                                         tenants,
+                                                        additionalProcessing: {
+                                                            page: REPORT_BUILDER_PAGINATION,
+                                                        },
                                                     });
                                                 }
+                                                resetProcessing();
                                                 setPivotData(pivotTable || []);
                                                 const formattedRows = formatRows(pivotTable.rows, columns, true, selectedPivot.aggregationType, dateBucket);
                                                 setFormattedRows(formattedRows);
@@ -1305,167 +1571,48 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                             setPivot(null);
                                             setPivotError(undefined);
                                             setPivotHint('');
-                                            setPivotData([]);
+                                            setPivotData(null);
+                                            resetLimit();
+                                            resetSort();
+                                            setPreviousPage(0);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, isLoading: tableLoading || loading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotValueField2: pivotValueField2, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer, pivotHint: pivotHint }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, isLoading: tableLoading || loading, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotValueField2: pivotValueField2, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer, pivotHint: pivotHint }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && pivot.sortField && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: {
-                                                type: pivot.sortDirection,
-                                                expr: { type: 'column_ref', column: pivot.sortField },
-                                            }, columns: pivot
-                                                ? pivot.columnField
-                                                    ? [`.${pivot.rowField}`]
-                                                    : [
-                                                        `.${pivot.rowField}`,
-                                                        `.${pivot.valueField || 'count'}`,
-                                                    ]
-                                                : selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: async () => {
-                                                if (!pivot) {
-                                                    setBaseAst((0, util_1.deepCopy)(baseAst));
-                                                    fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                                                    return;
-                                                }
-                                                const tempPivot = { ...pivot, sort: false };
-                                                let dateBucket = undefined;
-                                                const tempDateRange = dateRanges &&
-                                                    pivot.rowField &&
-                                                    dateRanges[pivot.rowField];
-                                                if (tempDateRange) {
-                                                    dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
-                                                }
-                                                setPivot(tempPivot);
-                                                setPivotHint('');
-                                                try {
-                                                    const pivotedData = await (0, PivotModal_1.generatePivotTable)({
-                                                        pivot: tempPivot,
-                                                        rowLimit: -1,
-                                                        dateBucket,
-                                                        report: tempReport,
-                                                        client,
-                                                        uniqueValues: uniqueValues[currentTable],
-                                                        dashboardName,
-                                                        tenants,
-                                                    });
-                                                    setPivotData(pivotedData || []);
-                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
-                                                    setFormattedRows(formattedRows);
-                                                    setErrorMessage('');
-                                                }
-                                                catch (e) {
-                                                    if (e instanceof Error)
-                                                        setPivotError(e.message);
-                                                }
-                                                finally {
-                                                    setTableLoading(false);
-                                                }
+                                        }, children: (0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortField: pivot.sortField, sortDirection: pivot.sortDirection || 'ASC', columns: pivotData?.columns ?? [], setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: async () => {
+                                                onSortChange({
+                                                    field: pivot.sortField ?? '',
+                                                    direction: pivot.sortDirection ?? 'ASC',
+                                                }, true);
                                             }, onSave: async (column, direction) => {
-                                                if (!pivot) {
-                                                    setOpenPopover(null);
-                                                    setBaseAst((0, util_1.deepCopy)(baseAst));
-                                                    fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                                                    return;
-                                                }
-                                                const sortFieldType = column === (pivot.valueField || 'count')
-                                                    ? 'number'
-                                                    : pivot.rowFieldType;
-                                                const tempPivot = {
-                                                    ...pivot,
-                                                    sort: true,
-                                                    sortDirection: direction,
-                                                    sortField: column,
-                                                    sortFieldType: sortFieldType,
-                                                };
-                                                setPivot(tempPivot);
-                                                setPivotHint('');
-                                                let dateBucket = undefined;
-                                                const tempDateRange = dateRanges &&
-                                                    pivot.rowField &&
-                                                    dateRanges[pivot.rowField];
-                                                if (tempDateRange) {
-                                                    dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
-                                                }
-                                                try {
-                                                    const pivotedData = await (0, PivotModal_1.generatePivotTable)({
-                                                        pivot: tempPivot,
-                                                        rowLimit: -1,
-                                                        dateBucket,
-                                                        report: tempReport,
-                                                        client,
-                                                        uniqueValues: uniqueValues[currentTable],
-                                                        dashboardName,
-                                                        tenants,
-                                                    });
-                                                    setPivotData(pivotedData || []);
-                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
-                                                    setFormattedRows(formattedRows);
-                                                    setErrorMessage('');
-                                                }
-                                                catch (e) {
-                                                    if (e instanceof Error)
-                                                        setPivotError(e.message);
-                                                }
+                                                onSortChange({ field: column, direction });
                                             }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && baseAst.orderby.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
-                                                if (pivot) {
-                                                    setPivot({ ...pivot, sort: false });
-                                                    setPivotHint('');
-                                                    return;
-                                                }
-                                                const newAst = { ...baseAst };
-                                                newAst.orderby.splice(id, 1);
-                                                if (newAst.orderby.length === 0) {
-                                                    newAst.orderby = null;
-                                                }
-                                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                        }, children: baseAst.orderby.map((sortData, id) => ((0, jsx_runtime_1.jsx)(AddSortPopover_1.SortSentence, { sortField: sortData.expr?.column || sortData.expr?.value, sortDirection: sortData.type, columns: columns, setIsPending: () => { }, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                                onSortChange({
+                                                    field: sortData.expr?.column || sortData.expr?.value,
+                                                    direction: sortData.type,
+                                                }, true);
                                             }, onSave: (column, direction) => {
-                                                if (pivot) {
-                                                    const sortFieldType = column === (pivot.valueField || 'count')
-                                                        ? 'number'
-                                                        : pivot.rowFieldType;
-                                                    setPivot({
-                                                        ...pivot,
-                                                        sort: true,
-                                                        sortDirection: direction,
-                                                        sortField: column,
-                                                        sortFieldType: sortFieldType,
-                                                    });
-                                                    setPivotHint('');
-                                                    return;
-                                                }
-                                                setActiveEditItem(null);
-                                                setOpenPopover(null);
-                                                if (column === '')
-                                                    return;
-                                                const newAst = { ...baseAst };
-                                                newAst.orderby[id] = {
-                                                    expr: {
-                                                        type: 'column_ref',
-                                                        table: null,
-                                                        column: column,
-                                                    },
-                                                    type: direction,
-                                                };
-                                                // look through the columns
-                                                setOpenPopover(null);
-                                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
+                                                onSortChange({ field: column, direction });
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }, `sort-sentence-${id}`))) })), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst ||
+                                            !dataDisplayed ||
+                                            loading ||
+                                            tableLoading ||
+                                            mssqlSortWarning, onClick: () => {
                                             if (!selectedColumns || selectedColumns.length === 0) {
                                                 return;
                                             }
                                             if (!openPopover) {
                                                 setOpenPopover('AddSortPopover');
                                             }
-                                        }, label: 'Add sort' }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, label: 'Add sort', tooltipText: mssqlSortWarning }), (0, jsx_runtime_1.jsx)("div", { style: {
                                             position: 'relative',
                                             ...(openPopover === 'AddSortPopover' && { top: 12 }),
                                         }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
@@ -1473,14 +1620,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                     setActiveEditItem(null);
                                                     setOpenPopover(null);
                                                 }
-                                            }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivot
-                                                    ? pivot.columnField
-                                                        ? [`.${pivot.rowField}`]
-                                                        : [
-                                                            `.${pivot.rowField}`,
-                                                            `.${pivot.valueField || 'count'}`,
-                                                        ]
-                                                    : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
+                                            }, popoverTitle: "Sort by", popoverChildren: (0, jsx_runtime_1.jsx)(AddSortPopover_1.AddSortPopover, { columns: pivotData ? pivotData.columns : columns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
                                                     if (column === '')
                                                         return;
                                                     if (pivot) {
@@ -1512,7 +1652,11 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                                 uniqueValues: uniqueValues[currentTable],
                                                                 dashboardName,
                                                                 tenants,
+                                                                additionalProcessing: {
+                                                                    page: REPORT_BUILDER_PAGINATION,
+                                                                },
                                                             });
+                                                            resetProcessing();
                                                             setErrorMessage('');
                                                             setPivotData(pivotedData || []);
                                                             const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType, dateBucket);
@@ -1526,50 +1670,43 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                         setBaseAst((0, util_1.deepCopy)(baseAst));
                                                         return;
                                                     }
-                                                    const newAst = { ...baseAst };
-                                                    if (!newAst.orderby)
-                                                        newAst.orderby = [];
-                                                    const existingSortIndex = newAst.orderby.findIndex((item) => (0, astFilterProcessing_1.getFieldFromExpression)(item.expr) === column);
-                                                    if (existingSortIndex !== -1) {
-                                                        newAst.orderby[existingSortIndex] = {
-                                                            expr: { type: 'column_ref', column },
-                                                            type: direction,
-                                                        };
-                                                    }
                                                     else {
-                                                        newAst.orderby.push({
-                                                            expr: { type: 'column_ref', column },
-                                                            type: direction,
-                                                        });
+                                                        const newAst = { ...baseAst };
+                                                        if (!newAst.orderby)
+                                                            newAst.orderby = [];
+                                                        const existingSortIndex = newAst.orderby.findIndex((item) => (0, astFilterProcessing_1.getFieldFromExpression)(item.expr) === column);
+                                                        if (existingSortIndex !== -1) {
+                                                            newAst.orderby[existingSortIndex] = {
+                                                                expr: { type: 'column_ref', column },
+                                                                type: direction,
+                                                            };
+                                                        }
+                                                        else {
+                                                            newAst.orderby.push({
+                                                                expr: { type: 'column_ref', column },
+                                                                type: direction,
+                                                            });
+                                                        }
+                                                        // look through the columns
+                                                        setOpenPopover(null);
+                                                        setBaseAst((0, util_1.deepCopy)(newAst));
+                                                        fetchSqlQuery((0, util_1.deepCopy)(newAst));
                                                     }
-                                                    // look through the columns
-                                                    setOpenPopover(null);
-                                                    setBaseAst((0, util_1.deepCopy)(newAst));
-                                                    fetchSqlQuery((0, util_1.deepCopy)(newAst));
-                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(SidebarHeadingComponent, { label: "Limit" }), (baseAst &&
+                                        ((baseAst.limit && baseAst.limit.value?.length > 0) ||
+                                            (baseAst.top && baseAst.top.value))) ||
+                                        pivot?.rowLimit ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
-                                                const newAst = { ...baseAst };
-                                                newAst.limit = null;
-                                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                        }, children: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.LimitSentence, { limit: baseAst.limit?.value?.[0]?.value ||
+                                                baseAst.top?.value ||
+                                                pivot?.rowLimit ||
+                                                0, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover_1.AddLimitPopover, handleDelete: () => {
+                                                onLimitChange(null);
                                             }, onSave: (limit) => {
-                                                const newAst = { ...baseAst };
-                                                newAst.limit = {
-                                                    seperator: '',
-                                                    value: [
-                                                        {
-                                                            type: 'number',
-                                                            value: limit,
-                                                        },
-                                                    ],
-                                                };
-                                                setOpenPopover(null);
-                                                setBaseAst((0, util_1.deepCopy)(newAst));
-                                                fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                                onLimitChange(limit);
                                             }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, disabled: tableLoading || loading }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed || loading || tableLoading, onClick: () => {
                                                     if (!selectedColumns || selectedColumns.length === 0) {
                                                         return;
@@ -1589,19 +1726,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                             setOpenPopover(null);
                                                         }
                                                     }, popoverTitle: "Add limit", popoverChildren: (0, jsx_runtime_1.jsx)(AddLimitPopover_1.AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
-                                                            const newAst = { ...baseAst };
-                                                            newAst.limit = {
-                                                                seperator: '',
-                                                                value: [
-                                                                    {
-                                                                        type: 'number',
-                                                                        value: Number(limit),
-                                                                    },
-                                                                ],
-                                                            };
-                                                            setOpenPopover(null);
-                                                            setBaseAst((0, util_1.deepCopy)(newAst));
-                                                            fetchSqlQuery((0, util_1.deepCopy)(newAst));
+                                                            onLimitChange(limit);
                                                         } }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(ContainerComponent, { children: [isAIEnabled && ((0, jsx_runtime_1.jsx)("form", { ref: askAIContainerRef, onSubmit: (event) => {
                                     event.preventDefault();
                                 }, style: {
@@ -1617,7 +1742,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                 ? 'Ask a follow-up question...'
                                                 : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
                                                 fetchAstFromPromptHelper();
-                                            }, isLoading: askAILoading && !baseAst, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && !reportId && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: tableLoading || (loading && errorMessage.length === 0), rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
+                                            }, isLoading: askAILoading && !baseAst, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && !reportId && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: tableLoading || (loading && errorMessage.length === 0), rows: formattedRows, rowCount: pivot ? pivotData?.rowCount : numberOfRows, rowCountIsLoading: rowCountIsLoading, rowsPerPage: 20, columns: pivot
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
@@ -1626,7 +1751,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                         };
                                     }), onPageChange: onPageChange, onSortChange: (sort) => {
                                     onSortChange(sort);
-                                }, containerStyle: {
+                                }, disableSort: !!mssqlSortWarning, containerStyle: {
                                     maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, rows.length), 20) * 37),
                                 } })), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
@@ -1674,8 +1799,10 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                                                                 rows: rows,
                                                                 pivotRows: pivotData?.rows,
                                                                 pivotColumns: pivotData?.columns,
-                                                                flags: reportInfo?.flags ??
-                                                                    tempReport?.flags,
+                                                                pivotRowCount: pivotData?.rowCount,
+                                                                pivotQuery: pivotData?.pivotQuery,
+                                                                comparisonPivotQuery: pivotData?.comparisonPivotQuery,
+                                                                flags: reportInfo?.flags ?? tempReport?.flags,
                                                             }
                                                             : {
                                                                 ...tempReport,
@@ -1692,7 +1819,7 @@ SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer,
                     ? chartBuilderTitle
                     : reportId
                         ? 'Save changes'
-                        : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, organizationName: organizationName, initialUniqueValues: uniqueValues[currentTable], initialUniqueValuesIsLoading: uniqueValuesIsLoading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => {
+                        : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? onSubmitEditReport : onSubmitCreateReport, organizationName: organizationName, initialUniqueValues: uniqueValues[currentTable], initialUniqueValuesIsLoading: uniqueValuesIsLoading, pivotRecommendationsEnabled: pivotRecommendationsEnabledState, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, hideDeleteButton: true, buttonLabel: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => {
                     setFiltersEnabled(enabled);
                 }, isEditingMode: true }))] }));
 }