@quillsql/react 2.12.27 → 2.12.29

package/dist/cjs/ReportBuilder.js

@@ -41,6 +41,8 @@ const columnProcessing_1 = require("./utils/columnProcessing");
 const astProcessing_1 = require("./utils/astProcessing");
 const PivotForm_1 = __importDefault(require("./internals/ReportBuilder/PivotForm"));
 const schema_1 = require("./utils/schema");
+const constants_2 = require("./utils/constants");
+const dates_1 = require("./utils/dates");
 exports.QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SERVER_HOST) ||
     'https://quill-344421.uc.r.appspot.com';
 /**
@@ -74,7 +76,7 @@ exports.QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SE
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableSQLEditorComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, ChartBuilderModalComponent = UiComponents_1.MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement }) {
+function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableSQLEditorComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, ChartBuilderModalComponent = UiComponents_1.MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
     const { data: report } = (0, useQuill_1.useQuill)(reportId || '');
     const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
@@ -97,6 +99,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
     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)({});
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = (0, react_1.useState)('AND');
     const [editPopoverKey, setEditPopoverKey] = (0, react_1.useState)(null);
     const [uniqueValues, setUniqueValues] = (0, react_1.useState)({});
@@ -122,19 +125,23 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
     const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
     const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
     const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
+    const [dateRanges, setDateRanges] = (0, react_1.useState)(null);
     // eslint-disable-next-line no-unused-vars
     const [client, _setClient] = (0, react_1.useContext)(Context_1.ClientContext);
     // JANK: This is temp and stupid
     const [overrideRecommendations, setOverrideRecommendations] = (0, react_1.useState)(true);
     const [customFields, setCustomFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
     (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
         if (client.publicKey === '663416663aa9bc716e59a89d') {
             setOverrideRecommendations(false);
         }
         if (!loadingSchema) {
             fetchSchema();
         }
-    }, [client.publicKey, client.customerId]);
+    }, [client]);
     (0, react_1.useEffect)(() => {
         (0, width_1.updateFirstChildWidth)(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
         (0, width_1.updateFirstChildWidth)(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
@@ -152,8 +159,9 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    const updatePivot = (changeField, fieldKey) => {
+    const updatePivot = async (changeField, fieldKey) => {
         const newPivot = pivot;
+        setTableLoading(true);
         // @ts-ignore
         newPivot[fieldKey] = changeField;
         if (fieldKey === 'rowField') {
@@ -171,11 +179,17 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                 newPivot.sort = undefined;
             }
         }
-        setPivot(newPivot);
-        const pivotedData = (0, PivotModal_1.generatePivotTable)(newPivot, rows, undefined, false);
+        let dateBucket = undefined;
+        const tempDateRange = dateRanges && dateRanges[newPivot.rowField];
+        if (tempDateRange) {
+            dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+        }
+        const pivotedData = await (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
         setPivotData(pivotedData || []);
         const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
+        setPivot(newPivot);
         setFormattedRows(formattedRows);
+        setTableLoading(false);
     };
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
@@ -220,10 +234,13 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
         }, 0);
     };
     (0, react_1.useEffect)(() => {
+        if (!client) {
+            return;
+        }
         if (!initialLoad && client.publicKey) {
             clearAllState();
         }
-    }, [client.publicKey, client.customerId]);
+    }, [client]);
     (0, react_1.useEffect)(() => {
         if (activePath !== null) {
             // update the modal with the new subtree
@@ -360,6 +377,34 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             console.error(error);
         }
     };
+    const getUniqueStringValues = async (columns, tableName) => {
+        const convertedStringColumns = columns
+            .filter((column) => {
+            return (0, ast_1.isTextColumnType)(column.fieldType);
+        })
+            .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await (0, tableProcessing_1.getCountsByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, customFields);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(smallStringColumns, `Select ${smallStringNames.join(', ')} from ${tableName}`, [], client, customFields);
+        const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
+        joinedUniqueValues[tableName] = newUniqueValues;
+        return joinedUniqueValues;
+    };
+    const getDateRanges = async (columns, tableName) => {
+        const dateColumns = columns.filter((column) => {
+            return column.fieldType === 'date';
+        });
+        if (dateColumns.length === 0) {
+            return {};
+        }
+        const dateColumnNames = dateColumns.map((column) => {
+            //@ts-ignore
+            return column.field || column.name;
+        });
+        const dateRanges = await (0, tableProcessing_1.getDateRangeByColumns)(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, customFields);
+        return dateRanges;
+    };
     // It's just like getColumnsInPivot but we expand the columnField
     // if there is one to include all the variants just like it would
     // show up in the table. (eg. category -> ...[Fuel, Food, Other])
@@ -386,18 +431,12 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
         setLoading(true);
         const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
         if (tableInfo) {
-            const convertedStringColumns = tableInfo.columns
-                .filter((column) => {
-                return (0, ast_1.isTextColumnType)(column.fieldType);
-            })
-                .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
-            const stringNames = convertedStringColumns.map((column) => column.field);
-            const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client, customFields);
-            const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
-            joinedUniqueValues[initialTableName] = newUniqueValues;
-            if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
-                setUniqueValues(joinedUniqueValues);
+            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName);
+            if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
+                setUniqueValues(newUniqueValues);
             }
+            const dateRangesTemp = await getDateRanges(tableInfo.columns, initialTableName);
+            setDateRanges(dateRangesTemp);
         }
         const columnsForTable = tables
             .find((t) => t.name === initialTableName)
@@ -489,17 +528,13 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             setBaseAst(newAst);
             const initialRows = await fetchUponChange(newAst, undefined);
             const tableInfo = schemaInfo.find((table) => table.name === tableName);
-            const stringColumns = tableInfo.columns
-                .filter((column) => {
-                return column.fieldType === 'varchar' || column.fieldType === 'text';
-            })
-                .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
-            if (stringColumns.length !== 0 && tableName) {
-                const stringNames = stringColumns.map((column) => column.field);
-                const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(stringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, [], client, customFields);
-                const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
-                joinedUniqueValues[tableName] = newUniqueValues;
-                setUniqueValues(joinedUniqueValues);
+            let newUniqueValues = undefined;
+            let dateRangesTemp = undefined;
+            if (tableName) {
+                newUniqueValues = await getUniqueStringValues(tableInfo.columns, tableName);
+                setUniqueValues(newUniqueValues);
+                dateRangesTemp = await getDateRanges(tableInfo.columns, tableName);
+                setDateRanges(dateRangesTemp);
             }
             if (groupByPivot) {
                 // @ts-ignore
@@ -511,9 +546,16 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                 // @ts-ignore
                 setPivotValueField(groupByPivot.valueField);
                 setPivot(groupByPivot);
-                const pivotedData = (0, PivotModal_1.generatePivotTable)(
+                let dateBucket = undefined;
+                const tempDateRange = dateRangesTemp &&
+                    groupByPivot.rowField &&
+                    dateRangesTemp[groupByPivot.rowField];
+                if (tempDateRange) {
+                    dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+                }
+                const pivotedData = await (0, PivotModal_1.generatePivotTable)(
                 // @ts-ignore
-                groupByPivot, initialRows, undefined, false);
+                groupByPivot, initialRows, tempDateRange, false, -1, undefined, dateBucket, report, client, newUniqueValues[tableName]);
                 setPivotData(pivotedData || []);
                 const formattedRows = formatRows(pivotedData.rows, report.columns, true, 
                 // @ts-ignore
@@ -921,6 +963,89 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
             return [{ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(pivot.valueField) }];
         }
     };
+    const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
+    const [currentProcessing, setCurrentProcessing] = (0, react_1.useState)({
+        page: { currentPage: 0, rowsPerPage: 20 },
+    });
+    const [numberOfRows, setNumberOfRows] = (0, react_1.useState)(0);
+    const [tableLoading, setTableLoading] = (0, react_1.useState)(false);
+    const onPageChange = (page) => {
+        if (pivot) {
+            return;
+        }
+        if ((previousPage < page.currentPage &&
+            (page.currentPage * page.rowsPerPage) % constants_2.MAX_COLUMN_ROWS_LIMIT === 0) ||
+            (previousPage > page.currentPage &&
+                (previousPage * page.rowsPerPage) % constants_2.MAX_COLUMN_ROWS_LIMIT === 0)) {
+            handleRunQuery({ ...currentProcessing, page });
+        }
+        setPreviousPage(page.currentPage);
+    };
+    const onSortChange = (sort) => {
+        if (pivot) {
+            return;
+        }
+        handleRunQuery({ sort, page: { currentPage: 0, rowsPerPage: 20 } });
+        setPreviousPage(0);
+    };
+    const handleRunQuery = async (processing) => {
+        try {
+            setErrorMessage('');
+            setTableLoading(true);
+            const hostedBody = {
+                metadata: {
+                    query: activeQuery,
+                    task: 'query',
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    databaseType: client?.databaseType,
+                    getCustomFields: !client.customerId || client.customerId === '*' ? false : true,
+                    customFieldsByTable: customFields,
+                    additionalProcessing: processing,
+                    useUpdatedDataGathering: true,
+                },
+            };
+            const cloudBody = { activeQuery };
+            const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+            if (resp && resp.errorMessage) {
+                setTableLoading(false);
+                setErrorMessage('Failed to run SQL query: ' + resp.errorMessage);
+                setRows([]);
+                setColumns([]);
+                return;
+            }
+            if (resp.rowCount) {
+                setNumberOfRows(resp.rowCount);
+            }
+            setErrorMessage('');
+            setCurrentProcessing(processing);
+            if (resp.rows.length === 0) {
+                setErrorMessage('No data found');
+            }
+            const temp_rows = resp.rows && resp.rows.length ? resp.rows : [];
+            const processedFields = resp.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
+            setRows(temp_rows);
+            // setNumberOfRows(resp.compareRows[0]?.count || temp_rows.length);
+            setFormattedRows(temp_rows.map((row) => {
+                return processedFields.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            }));
+            setColumns(processedFields);
+            setTableLoading(false);
+        }
+        catch (e) {
+            setTableLoading(false);
+            console.log('ERROR: ', e);
+            return;
+        }
+    };
     /**
      * Render form fields based on the type of the node
      * @param node the AST or subtree to render recursively
@@ -1786,6 +1911,8 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                         task: 'patterns',
                         getCustomFields: false,
                         customFields,
+                        additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                        useUpdatedDataGathering: true,
                     },
                 };
                 const cloudBody = {};
@@ -1794,23 +1921,23 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                     throw new Error(data2.errorMessage);
                 }
                 rows = data2.rows;
+                if (data2.rowCount) {
+                    setNumberOfRows(data2.rowCount);
+                }
                 const tables = (0, ast_1.getTableNames)(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
+                let newUniqueValues = uniqueValues;
+                let dateRangesTemp = dateRanges;
+                let curReport = undefined;
                 if (table !== currentTable) {
                     const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
                     if (tableInfo) {
-                        const convertedStringColumns = tableInfo.columns
-                            .filter((column) => {
-                            return (0, ast_1.isTextColumnType)(column.fieldType);
-                        })
-                            .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
-                        const stringNames = convertedStringColumns.map((column) => column.field);
-                        const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client, customFields);
-                        const joinedUniqueValues = (0, util_1.deepCopy)(uniqueValues);
-                        joinedUniqueValues[table] = newUniqueValues;
-                        if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(joinedUniqueValues)) {
-                            setUniqueValues(joinedUniqueValues);
+                        newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                        if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
+                            setUniqueValues(newUniqueValues);
                         }
+                        dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                        setDateRanges(dateRangesTemp || {});
                     }
                     setCurrentTable(table);
                 }
@@ -1823,6 +1950,22 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                             setPivotData(null);
                             setRows(data2.rows);
                             setColumns(processedFields);
+                            if (data2.rowCount) {
+                                const processedFormData = report
+                                    ? report
+                                    : (0, ChartBuilder_1.createInitialFormData)(processedFields);
+                                setNumberOfRows(data2.rowCount);
+                                curReport = {
+                                    ...formData,
+                                    ...processedFormData,
+                                    itemQuery: data2.itemQuery,
+                                    rowCount: data2.rowCount,
+                                    filtersApplied: [],
+                                    rows: data2.rows,
+                                    columns: processedFields,
+                                };
+                                setTempReport(curReport);
+                            }
                             const formattedRows = formatRows(data2.rows, processedFields, false);
                             setFormattedRows(formattedRows);
                             return;
@@ -1834,12 +1977,36 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                             return acc;
                         }, {});
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
-                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, data2.rows, undefined, false);
+                        let dateBucket = undefined;
+                        const tempDateRange = dateRangesTemp &&
+                            pivot.rowField &&
+                            dateRangesTemp[pivot.rowField];
+                        if (tempDateRange) {
+                            dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+                        }
+                        const pivotedData = await (0, PivotModal_1.generatePivotTable)(
+                        // @ts-ignore
+                        pivot, data2.rows, undefined, false, -1, undefined, dateBucket, curReport, client, uniqueFormatted[pivot.columnField]);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
                         const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                         setPivotData(pivotedData);
                         setRows(data2.rows);
                         setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : (0, ChartBuilder_1.createInitialFormData)(processedFields);
+                            setNumberOfRows(data2.rowCount);
+                            setTempReport({
+                                ...formData,
+                                ...processedFormData,
+                                itemQuery: data2.itemQuery,
+                                rowCount: data2.rowCount,
+                                filtersApplied: [],
+                                rows: data2.rows,
+                                columns: processedFields,
+                            });
+                        }
                         const formattedRows = formatRows(pivotedData.rows, processedFields, true, pivot.aggregationType);
                         setSelectedColumns(processedFields.map((column) => {
                             return `${table}.${column.field}`;
@@ -1850,6 +2017,21 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                         const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                         setRows(data2.rows);
                         setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : (0, ChartBuilder_1.createInitialFormData)(processedFields);
+                            setNumberOfRows(data2.rowCount);
+                            setTempReport({
+                                ...formData,
+                                ...processedFormData,
+                                itemQuery: data2.itemQuery,
+                                rowCount: data2.rowCount,
+                                filtersApplied: [],
+                                rows: data2.rows,
+                                columns: processedFields,
+                            });
+                        }
                         setSelectedColumns(processedFields.map((column) => {
                             return `${table}.${column.field}`;
                         }));
@@ -2084,6 +2266,9 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                     publicKey: client.publicKey,
                     orgId: client.customerId,
                     task: 'patterns',
+                    additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                    useUpdatedDataGathering: true,
+                    pivot: groupByPivot,
                 },
             };
             const cloudBody = {};
@@ -2092,20 +2277,16 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                 throw new Error('Error querying data from patterns');
             }
             let currentUniqueValues = uniqueValues;
+            let dateRangesTemp = dateRanges;
             if (table !== currentTable) {
                 const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
                 if (tableInfo) {
-                    const convertedStringColumns = tableInfo.columns
-                        .filter((column) => {
-                        return (0, ast_1.isTextColumnType)(column.fieldType);
-                    })
-                        .map((column) => (0, columnProcessing_1.convertColumnInfoToColumnInternal)(column));
-                    const stringNames = convertedStringColumns.map((column) => column.field);
-                    const newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByColumns)(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client, customFields);
-                    currentUniqueValues[table] = newUniqueValues;
-                    if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(currentUniqueValues)) {
-                        setUniqueValues(currentUniqueValues);
+                    const newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                    if ((0, crypto_1.hashCode)(uniqueValues) !== (0, crypto_1.hashCode)(newUniqueValues)) {
+                        setUniqueValues(newUniqueValues);
                     }
+                    dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                    setDateRanges(dateRangesTemp);
                 }
                 setCurrentTable(table);
             }
@@ -2148,15 +2329,43 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                     errored = true;
                 }
                 if (groupByPivot && possiblePivot) {
-                    setPivotRowField(groupByPivot?.rowField);
-                    setPivotColumnField(groupByPivot?.columnField);
-                    setPivotValueField(groupByPivot?.valueField);
-                    setPivotAggregation(groupByPivot?.aggregationType);
-                    const pivotedData = (0, PivotModal_1.generatePivotTable)(groupByPivot, data2.rows, undefined, false);
+                    let curReport = report ? report : undefined;
+                    if (data2.rowCount) {
+                        const processedFormData = report
+                            ? report
+                            : (0, ChartBuilder_1.createInitialFormData)(processedFields);
+                        setNumberOfRows(data2.rowCount);
+                        curReport = {
+                            ...formData,
+                            ...processedFormData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                            columns: processedFields,
+                        };
+                        setTempReport(curReport || null);
+                    }
+                    let dateBucket = undefined;
+                    const tempDateRange = dateRangesTemp &&
+                        groupByPivot.rowField &&
+                        dateRangesTemp[groupByPivot.rowField];
+                    if (tempDateRange) {
+                        dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+                    }
+                    const pivotedData = await (0, PivotModal_1.generatePivotTable)(
+                    // @ts-ignore
+                    groupByPivot, data2.rows, undefined, false, -1, undefined, dateBucket, curReport, client, groupByPivot.columnField
+                        ? currentUniqueValues[groupByPivot.columnField]
+                        : undefined);
                     console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
                     setPivotData(pivotedData);
                     setPivot(groupByPivot);
                     setRows(data2.rows);
+                    setPivotRowField(groupByPivot?.rowField);
+                    setPivotColumnField(groupByPivot?.columnField);
+                    setPivotValueField(groupByPivot?.valueField);
+                    setPivotAggregation(groupByPivot?.aggregationType);
                     setColumns(processedFields);
                     const formattedRows = formatRows(pivotedData.rows, processedFields, true, groupByPivot.aggregationType);
                     setFormattedRows(formattedRows);
@@ -2165,6 +2374,17 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                     const processedFields = data2.fields.map((elem) => (0, columnProcessing_1.convertPostgresColumn)(elem));
                     setRows(data2.rows);
                     setColumns(processedFields);
+                    if (data2.rowCount) {
+                        setNumberOfRows(data2.rowCount);
+                        setTempReport({
+                            ...formData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                            columns: processedFields,
+                        });
+                    }
                     const formattedRows = formatRows(data2.rows, processedFields, false);
                     setFormattedRows(formattedRows);
                 }
@@ -2439,17 +2659,8 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                     }, 
                                     // TODOs
                                     selectPivot: (pivot) => {
-                                        if (!pivot)
-                                            return;
-                                        const newAst = { ...baseAst };
-                                        newAst.orderby = null;
-                                        setBaseAst(newAst); // trigger refetch
-                                        setPivot(pivot);
-                                        const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false);
-                                        setPivotData(pivotedData || []);
-                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
-                                        setFormattedRows(formattedRows);
-                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                        return;
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport ?? report }), pivot && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
                                         setPivotRowField(value);
                                     }, setPivotColumnField: setPivotColumnField, setPivotValueField: setPivotValueField, setPivotAggregation: setPivotAggregation, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, onDelete: () => {
                                         setPivot(null);
@@ -2743,7 +2954,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                             setPivotData(null);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, selectPivot: (pivot) => {
+                                        }, selectPivot: async (pivot, uniqueValues, dateRange, pivotTable) => {
                                             if (!pivot)
                                                 return;
                                             const newAst = { ...baseAst };
@@ -2753,13 +2964,19 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                 pivot['sortDirection'] = 'ASC';
                                             }
                                             setBaseAst(newAst); // trigger refetch
+                                            let dateBucket = undefined;
+                                            if (dateRange) {
+                                                dateBucket = (0, dates_1.getDateBucketFromRange)(dateRange);
+                                            }
+                                            if (!pivotTable) {
+                                                pivotTable = await (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
+                                            }
+                                            setPivotData(pivotTable || []);
                                             setPivot(pivot);
-                                            const pivotedData = (0, PivotModal_1.generatePivotTable)(pivot, rows, undefined, false);
-                                            setPivotData(pivotedData || []);
-                                            const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                            const formattedRows = formatRows(pivotTable.rows, columns, true, pivot.aggregationType);
                                             setFormattedRows(formattedRows);
                                             setErrorMessage('');
-                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport }), pivot && ((0, jsx_runtime_1.jsx)(PivotForm_1.default, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
                                             setPivotRowField(value);
                                             updatePivot(value, 'rowField');
                                         }, setPivotColumnField: (value) => {
@@ -2791,10 +3008,18 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                         `.${pivot.rowField}`,
                                                         `.${pivot.valueField || 'count'}`,
                                                     ]
-                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: () => {
+                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover_1.AddSortPopover, handleDelete: async () => {
                                                 if (pivot) {
-                                                    setPivot({ ...pivot, sort: false });
-                                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({ ...pivot, sort: false }, rows, undefined, false);
+                                                    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);
+                                                    const pivotedData = await (0, PivotModal_1.generatePivotTable)(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
                                                     setPivotData(pivotedData || []);
                                                     const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
                                                     setFormattedRows(formattedRows);
@@ -2803,25 +3028,27 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                 }
                                                 setBaseAst((0, util_1.deepCopy)(baseAst));
                                                 fetchSqlQuery((0, util_1.deepCopy)(baseAst));
-                                            }, onSave: (column, direction) => {
+                                            }, onSave: async (column, direction) => {
                                                 if (pivot) {
                                                     const sortFieldType = column === (pivot.valueField || 'count')
                                                         ? 'number'
                                                         : pivot.rowFieldType;
-                                                    setPivot({
-                                                        ...pivot,
-                                                        sort: true,
-                                                        sortDirection: direction,
-                                                        sortField: column,
-                                                        sortFieldType: sortFieldType,
-                                                    });
-                                                    const pivotedData = (0, PivotModal_1.generatePivotTable)({
+                                                    const tempPivot = {
                                                         ...pivot,
                                                         sort: true,
                                                         sortDirection: direction,
                                                         sortField: column,
                                                         sortFieldType: sortFieldType,
-                                                    }, rows, undefined, false);
+                                                    };
+                                                    setPivot(tempPivot);
+                                                    let dateBucket = undefined;
+                                                    const tempDateRange = dateRanges &&
+                                                        pivot.rowField &&
+                                                        dateRanges[pivot.rowField];
+                                                    if (tempDateRange) {
+                                                        dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+                                                    }
+                                                    const pivotedData = await (0, PivotModal_1.generatePivotTable)(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
                                                     setPivotData(pivotedData || []);
                                                     const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
                                                     setFormattedRows(formattedRows);
@@ -2902,27 +3129,29 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                             `.${pivot.rowField}`,
                                                             `.${pivot.valueField || 'count'}`,
                                                         ]
-                                                    : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
+                                                    : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
                                                     if (column === '')
                                                         return;
                                                     if (pivot) {
                                                         const sortFieldType = column === (pivot.valueField || 'count')
                                                             ? 'number'
                                                             : pivot.rowFieldType;
-                                                        setPivot({
+                                                        const tempPivot = {
                                                             ...pivot,
                                                             sort: true,
                                                             sortDirection: direction,
                                                             sortField: column,
                                                             sortFieldType: sortFieldType,
-                                                        });
-                                                        const pivotedData = (0, PivotModal_1.generatePivotTable)({
-                                                            ...pivot,
-                                                            sort: true,
-                                                            sortDirection: direction,
-                                                            sortField: column,
-                                                            sortFieldType: sortFieldType,
-                                                        }, rows, undefined, false);
+                                                        };
+                                                        setPivot(tempPivot);
+                                                        let dateBucket = undefined;
+                                                        const tempDateRange = dateRanges &&
+                                                            pivot.rowField &&
+                                                            dateRanges[pivot.rowField];
+                                                        if (tempDateRange) {
+                                                            dateBucket = (0, dates_1.getDateBucketFromRange)(tempDateRange.dateRange);
+                                                        }
+                                                        const pivotedData = await (0, PivotModal_1.generatePivotTable)(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
                                                         setErrorMessage('');
                                                         setPivotData(pivotedData || []);
                                                         const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
@@ -3015,14 +3244,16 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                 ? askAIInputWidth
                                                 : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: askedAQuestion
                                                 ? 'Ask a follow-up question...'
-                                                : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
+                                                : 'Ask a question...' }), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && ((0, jsx_runtime_1.jsx)(TableComponent, { isLoading: tableLoading ||
+                                    (loading && errorMessage.length === 0) ||
+                                    initalChartLoad, rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, columns: pivot
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
                                             label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(c),
                                             field: c,
                                         };
-                                    }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }), onPageChange: onPageChange, onSortChange: onSortChange })), (0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -3038,6 +3269,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                                                 }, label: report ? 'Save changes' : 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { report: report
                     ? {
                         ...report,
+                        ...tempReport,
                         pivot: pivot,
                         yAxisFields: report.pivot && !pivot ? [] : report.yAxisFields,
                         columns: report.columns.filter((col) => {
@@ -3048,6 +3280,6 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
                         queryString: activeQuery,
                         rows: rows,
                     }
-                    : undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: report ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: report ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, 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: report ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement }))] }));
+                    : tempReport, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: report ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: report ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, 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: report ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement }))] }));
 }
 exports.default = ReportBuilder;