@quillsql/react 2.12.28 → 2.12.30

package/dist/esm/ReportBuilder.js

@@ -1,26 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable no-unused-vars */
 import { useContext, useEffect, useRef, useState, } from 'react';
 import { DEFAULT_TAB_OPTIONS, MemoizedButton, MemoizedCheckbox, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableSQLEditorComponent, } from './components/UiComponents';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { CSS as DND_CSS } from '@dnd-kit/utilities';
-import { getQuarter } from 'date-fns';
 import { ClientContext, CustomFieldContext, SchemaContext, ThemeContext, } from './Context';
-import { getTableAliases, getTableNames, isBoolColumnType, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
-import { ChartBuilderWithModal } from './ChartBuilder';
+import { extractColumnish, getTableAliases, getTableNames, isBoolColumnType, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
+import { ChartBuilderWithModal, createInitialFormData } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
-import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, TagWrapper, EditPopover, AddFilterPopover, QuillLimitPopover, } from './components/ReportBuilder/ui';
+import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, QuillLimitPopover, FilterPopoverWrapper, } from './components/ReportBuilder/ui';
 import { generateCurrentPeriodPostgres, generateEqualsPostgres, generateLastNPeriodsPostgres, generatePreviousPeriodPostgres, } from './components/ReportBuilder/postgres';
 import { convertBigQuery, convertGroupBy, convertRemoveSimpleParentheses, convertStringComparison, convertWildcardColumns, } from './components/ReportBuilder/convert';
-import { deepCopy, formatDateComparisonNode, getDateFilterInfo, getPostgresBasicType, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, isTopLevelBoolean, showNodeAsRow, tryConvertDateEquality, removeNonSelectedTableReferences, getCustomSentence, isEquals, } from './components/ReportBuilder/util';
+import { deepCopy, formatDateComparisonNode, getDateFilterInfo, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, showNodeAsRow, removeNonSelectedTableReferences, isEquals, } from './components/ReportBuilder/util';
 import { getDefaultOperatorSubtrees, OPERATOR_GROUPS, } from './components/ReportBuilder/operators';
 import { hashCode } from './utils/crypto';
-import { DATE_FMT, DAY_OF_WEEK, defaultAST, defaultBoolComparison, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, defaultVariant, MONTH_OF_YEAR, } from './components/ReportBuilder/constants';
+import { defaultAST, defaultBoolComparison, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, defaultVariant, } from './components/ReportBuilder/constants';
 import AddColumnModal from './components/ReportBuilder/AddColumnModal';
 import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
-import { PivotModal, generatePivotTableInMemory, } from './internals/ReportBuilder/PivotModal';
-import { snakeAndCamelCaseToTitleCase, } from './utils/textProcessing';
+import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
+import { snakeAndCamelCaseToTitleCase } from './utils/textProcessing';
 import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
 import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
@@ -28,13 +26,21 @@ import { QuillCard } from './components/QuillCard';
 import { getData } from './utils/dataFetcher';
 import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
 import { getPossiblePivotFieldOptions, pivotToSql, } from './utils/pivotProcessing';
-import { getUniqueValuesByColumns } from './utils/tableProcessing';
+import { getUniqueValuesByColumns, getDateRangeByColumns, getCountsByColumns, fetchTableByQuery, } from './utils/tableProcessing';
 import { useQuill } from './hooks/useQuill';
 import { getDataFromCloud } from './utils/dataFetcher';
 import { convertColumnInfoToColumnInternal, convertPostgresColumn, } from './utils/columnProcessing';
 import { getSelectFromAST, processApostrophe, processStarColumn, } from './utils/astProcessing';
 import PivotForm from './internals/ReportBuilder/PivotForm';
 import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { getDateBucketFromRange } from './utils/dates';
+import FilterModal from './components/ReportBuilder/FilterModal';
+import { DateOperator, FilterNames } from './models/Filter';
+import { filterToAst, filterTreeToAst, } from './utils/astFilterProcessing';
+import useAstToFilterTree from './hooks/useAstToFilterTree';
+import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { formatRowsFromReport } from './utils/report';
 export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SERVER_HOST) ||
     'https://quill-344421.uc.r.appspot.com';
 /**
@@ -68,7 +74,7 @@ export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUI
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableSQLEditorComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, TableComponent = QuillTableSQLEditorComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
     const { data: report } = useQuill(reportId || '');
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
@@ -91,8 +97,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     const [rows, setRows] = useState([]);
     const [formattedRows, setFormattedRows] = useState([]);
     const [columns, setColumns] = useState([]);
+    const [tempReport, setTempReport] = useState({});
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
-    const [editPopoverKey, setEditPopoverKey] = useState(null);
     const [uniqueValues, setUniqueValues] = useState({});
     const [pivot, setPivot] = useState(null);
     const [pivotData, setPivotData] = useState(null);
@@ -100,8 +106,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     const [recommendedPivots, setRecommendedPivots] = useState([]);
     const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = useState(false);
-    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [initalChartLoad, setInitalChartLoad] = useState(false);
+    const [isEditingPivot, setIsEditingPivot] = useState(false);
+    const [initialChartLoad, setInitialChartLoad] = useState(false);
     const [askedAQuestion, setAskedAQuestion] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
     const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!reportId);
@@ -116,23 +122,44 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     const [pivotColumnField, setPivotColumnField] = useState(undefined);
     const [pivotValueField, setPivotValueField] = useState(undefined);
     const [pivotAggregation, setPivotAggregation] = useState(undefined);
-    // eslint-disable-next-line no-unused-vars
-    const [client, _setClient] = useContext(ClientContext);
+    const [dateRanges, setDateRanges] = useState(null);
+    const [client] = useContext(ClientContext);
     // JANK: This is temp and stupid
     const [overrideRecommendations, setOverrideRecommendations] = useState(true);
     const [customFields, setCustomFields] = useContext(CustomFieldContext);
+    const [openFilterIndex, setOpenFilterIndex] = useState(null); // Sets open filter modals
+    const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
+    const filterTree = useAstToFilterTree(formData, client); // Stores the state of filters
     useEffect(() => {
+        if (!client) {
+            return;
+        }
         if (client.publicKey === '663416663aa9bc716e59a89d') {
             setOverrideRecommendations(false);
         }
         if (!loadingSchema) {
             fetchSchema();
         }
-    }, [client.publicKey, client.customerId]);
+    }, [client]);
     useEffect(() => {
         updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
         updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
     }, [dataDisplayed]);
+    // Whenever unique values changes, update the fieldValuesMap, used in FilterModals
+    useEffect(() => {
+        const tables = getTableNames(baseAst);
+        const table = tables.length === 1 ? tables[0] : initialTableName;
+        const newFieldValues = {};
+        if (uniqueValues[table]) {
+            for (const field of Object.keys(uniqueValues[table])) {
+                newFieldValues[field] = [];
+                for (const value of Object.keys(uniqueValues[table][field])) {
+                    newFieldValues[field]?.push(value);
+                }
+            }
+        }
+        setFieldValuesMap(newFieldValues);
+    }, [uniqueValues]);
     useEffect(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -146,8 +173,9 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             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') {
@@ -165,11 +193,27 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 newPivot.sort = undefined;
             }
         }
-        setPivot(newPivot);
-        const pivotedData = generatePivotTableInMemory(newPivot, rows, undefined, false);
+        let dateBucket = undefined;
+        const tempDateRange = dateRanges && dateRanges[newPivot.rowField];
+        if (tempDateRange) {
+            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+        }
+        let distinctValuesForQuery = {};
+        if (pivot.columnField) {
+            distinctValuesForQuery = await getUniqueValuesByColumns([
+                {
+                    field: pivot.columnField,
+                    label: pivot.columnField,
+                    format: 'string',
+                },
+            ], activeQuery, [], client, customFields);
+        }
+        const pivotedData = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, distinctValuesForQuery);
         setPivotData(pivotedData || []);
         const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
+        setPivot(newPivot);
         setFormattedRows(formattedRows);
+        setTableLoading(false);
     };
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
@@ -204,7 +248,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             setRows([]);
             setColumns([]);
             setTopLevelBinaryOperator('AND');
-            setEditPopoverKey(null);
             setErrorMessage('');
             setFormattedRows([]);
             // setUniqueValues({});
@@ -214,10 +257,13 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         }, 0);
     };
     useEffect(() => {
+        if (!client) {
+            return;
+        }
         if (!initialLoad && client.publicKey) {
             clearAllState();
         }
-    }, [client.publicKey, client.customerId]);
+    }, [client]);
     useEffect(() => {
         if (activePath !== null) {
             // update the modal with the new subtree
@@ -229,8 +275,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         if (pivot) {
             const formattedRows = copiedRows.map((row) => {
                 const formattedRow = row;
-                Object.keys(row).forEach((key, index) => {
-                    let column = columns.find((c) => c.field === key);
+                Object.keys(row).forEach((key) => {
+                    const column = columns.find((c) => c.field === key);
                     let format = 'string';
                     if (!column) {
                         format =
@@ -290,42 +336,20 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         navigator.clipboard.writeText(query);
         setTimeout(() => setIsCopying(false), 800);
     };
-    const copyToClipboard = (str) => {
-        setIsCopying(true);
-        navigator.clipboard.writeText(str);
-        setTimeout(() => setIsCopying(false), 800);
-    };
     const clearCheckboxes = () => {
         const checkboxes = uniqueValues;
         const newValues = {};
-        for (let table of Object.keys(checkboxes)) {
+        for (const table of Object.keys(checkboxes)) {
             newValues[table] = {};
-            for (let column of Object.keys(checkboxes[table])) {
+            for (const column of Object.keys(checkboxes[table])) {
                 newValues[table][column] = {};
-                for (let variant of Object.keys(checkboxes[table][column])) {
+                for (const variant of Object.keys(checkboxes[table][column])) {
                     newValues[table][column][variant] = false;
                 }
             }
         }
         setUniqueValues(newValues);
     };
-    const setCheckboxes = (node) => {
-        if (!['IN', 'NOT IN'].includes(node.operator))
-            return;
-        const selectedItems = node.right.value.flatMap((v) => v.args.value.map((x) => x.value.toLowerCase()));
-        const checkboxes = uniqueValues;
-        const newValues = {};
-        for (let table of Object.keys(checkboxes)) {
-            newValues[table] = {};
-            for (let column of Object.keys(checkboxes[table])) {
-                newValues[table][column] = {};
-                for (let variant of Object.keys(checkboxes[table][column])) {
-                    newValues[table][column][variant] = selectedItems.includes(variant.toLowerCase());
-                }
-            }
-        }
-        setUniqueValues(newValues);
-    };
     const fetchSqlQuery = async (ast, formData, fetchData = true) => {
         if (fetchData) {
             setLoading(true);
@@ -341,6 +365,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 body: JSON.stringify({
                     ast: { ...ast, where },
                     publicKey: client.publicKey,
+                    useNewNodeSql: true, // new flag
                 }),
             });
             const data = await response.json();
@@ -348,12 +373,41 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             if (fetchData) {
                 fetchUponChange(ast, formData);
             }
+            return data.query;
         }
         catch (error) {
             setLoading(false);
             console.error(error);
         }
     };
+    const getUniqueStringValues = async (columns, tableName) => {
+        const convertedStringColumns = columns
+            .filter((column) => {
+            return isTextColumnType(column.fieldType);
+        })
+            .map((column) => convertColumnInfoToColumnInternal(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await getCountsByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, customFields);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, `Select ${smallStringNames.join(', ')} from ${tableName}`, [], client, customFields);
+        const joinedUniqueValues = 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 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])
@@ -380,18 +434,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         setLoading(true);
         const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
         if (tableInfo) {
-            const convertedStringColumns = tableInfo.columns
-                .filter((column) => {
-                return isTextColumnType(column.fieldType);
-            })
-                .map((column) => convertColumnInfoToColumnInternal(column));
-            const stringNames = convertedStringColumns.map((column) => column.field);
-            const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client, customFields);
-            const joinedUniqueValues = deepCopy(uniqueValues);
-            joinedUniqueValues[initialTableName] = newUniqueValues;
-            if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
-                setUniqueValues(joinedUniqueValues);
+            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName);
+            if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                setUniqueValues(newUniqueValues);
             }
+            const dateRangesTemp = await getDateRanges(tableInfo.columns, initialTableName);
+            setDateRanges(dateRangesTemp);
         }
         const columnsForTable = tables
             .find((t) => t.name === initialTableName)
@@ -450,80 +498,102 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
     };
     useEffect(() => {
         const loadChart = async () => {
-            setInitalChartLoad(true);
+            setInitialChartLoad(true);
+            // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
             if (!report || report.referencedTables.length !== 1) {
-                setInitalChartLoad(false);
-                return;
-            }
-            const tableName = report.referencedTables[0];
-            if (!tableName) {
-                return;
-            }
-            const resp = await getDataFromCloud(client, `astify`, {
-                query: report.queryString,
-            });
-            if (resp.success === false) {
-                setErrorMessage('Error: ' + resp.message);
+                setInitialChartLoad(false);
                 return;
             }
-            const ast = getSelectFromAST(resp.ast);
-            let convertedAst = processStarColumn(ast, report.columns);
-            processApostrophe(convertedAst, ['type', 'value']);
-            convertedAst = convertBigQuery(convertedAst);
-            let schemaInfo = schema.length !== 0 ? schema : await fetchSchema();
-            let newAst, groupByPivot;
-            ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(convertedAst, 
-            // @ts-ignore
-            report.pivot, schemaInfo));
-            if (convertedAst.where) {
-                setFormData(deepCopy(convertedAst.where));
-            }
-            setActiveQuery(report.queryString);
-            newAst = groupByPivot ? newAst : convertedAst;
-            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) => convertColumnInfoToColumnInternal(column));
-            if (stringColumns.length !== 0 && tableName) {
-                const stringNames = stringColumns.map((column) => column.field);
-                const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, [], client, customFields);
-                const joinedUniqueValues = deepCopy(uniqueValues);
-                joinedUniqueValues[tableName] = newUniqueValues;
-                setUniqueValues(joinedUniqueValues);
-            }
-            if (groupByPivot) {
-                // @ts-ignore
-                setPivotRowField(groupByPivot.rowField);
-                // @ts-ignore
-                setPivotAggregation(groupByPivot.aggregationType);
-                // @ts-ignore
-                setPivotColumnField(groupByPivot.columnField);
-                // @ts-ignore
-                setPivotValueField(groupByPivot.valueField);
-                setPivot(groupByPivot);
-                const pivotedData = generatePivotTableInMemory(
-                // @ts-ignore
-                groupByPivot, initialRows, undefined, false);
-                setPivotData(pivotedData || []);
-                const formattedRows = formatRows(pivotedData.rows, report.columns, true, 
+            try {
+                // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                const tableName = report.referencedTables[0];
+                if (!tableName) {
+                    return;
+                }
+                const resp = await getDataFromCloud(client, `astify`, {
+                    // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                    query: report.queryString,
+                    useNewNodeSql: true,
+                });
+                if (resp.success === false) {
+                    setErrorMessage(resp.message);
+                    return;
+                }
+                const ast = getSelectFromAST(resp.ast);
+                let convertedAst = processStarColumn(ast, report.columns);
+                processApostrophe(convertedAst, ['type', 'value']);
+                convertedAst = convertBigQuery(convertedAst);
+                const schemaInfo = schema.length !== 0 ? schema : await fetchSchema();
+                let newAst;
+                let groupByPivot = {};
+                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(convertedAst, 
                 // @ts-ignore
-                groupByPivot.aggregationType);
-                setFormattedRows(formattedRows);
+                report.pivot, schemaInfo));
+                if (convertedAst.where) {
+                    setFormData(deepCopy(convertedAst.where));
+                }
+                // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                setActiveQuery(report.queryString);
+                newAst = groupByPivot ? newAst : convertedAst;
+                const initialRows = await fetchUponChange(newAst, undefined);
+                if (initialRows.error) {
+                    setBaseAst(null);
+                    setErrorMessage(initialRows.message);
+                    setInitialChartLoad(false);
+                    return;
+                }
+                setBaseAst(newAst);
+                const tableInfo = schemaInfo.find((table) => table.name === tableName);
+                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
+                    setPivotRowField(groupByPivot.rowField);
+                    // @ts-ignore
+                    setPivotAggregation(groupByPivot.aggregationType);
+                    // @ts-ignore
+                    setPivotColumnField(groupByPivot.columnField);
+                    // @ts-ignore
+                    setPivotValueField(groupByPivot.valueField);
+                    setPivot(groupByPivot);
+                    let dateBucket = undefined;
+                    const tempDateRange = dateRangesTemp &&
+                        groupByPivot.rowField &&
+                        dateRangesTemp[groupByPivot.rowField];
+                    if (tempDateRange) {
+                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                    }
+                    const pivotedData = await generatePivotTable(
+                    // @ts-ignore
+                    groupByPivot, initialRows, tempDateRange, false, -1, undefined, dateBucket, report, client, newUniqueValues[tableName]);
+                    setPivotData(pivotedData || []);
+                    const formattedRows = formatRows(pivotedData.rows, report.columns, true, 
+                    // @ts-ignore
+                    groupByPivot.aggregationType);
+                    setFormattedRows(formattedRows);
+                }
+                else {
+                    const formattedRows = formatRows(report.rows, report.columns);
+                    setFormattedRows(formattedRows);
+                }
+                setCurrentTable(tableName);
             }
-            else {
-                const formattedRows = formatRows(report.rows, report.columns);
-                setFormattedRows(formattedRows);
+            catch (error) {
+                console.error(error);
+                setErrorMessage('Error loading report');
             }
-            setCurrentTable(tableName);
             // This handles a flashing issue
             setTimeout(() => {
-                setInitalChartLoad(false);
+                setInitialChartLoad(false);
             }, 500);
         };
+        // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
         if (report && report.referencedTables.length === 1) {
             loadChart();
         }
@@ -849,10 +919,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             isReplaceSubtree: true,
         });
     };
-    // Function to handle the deletion of expressions
-    const handleDelete = (key) => {
-        updateFormData([{ path: key, value: null }], { isDeletion: true });
-    };
     // Function to handle the insertion of expressions
     const handleInsertion = (value, op = 'OR', isCondition = undefined) => {
         updateFormData([{ path: '', value }], {
@@ -915,6 +981,66 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             return [{ label: snakeAndCamelCaseToTitleCase(pivot.valueField) }];
         }
     };
+    const [previousPage, setPreviousPage] = useState(0);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: DEFAULT_PAGINATION,
+    });
+    const [numberOfRows, setNumberOfRows] = useState(0);
+    const [tableLoading, setTableLoading] = useState(false);
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            handleRunQuery(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (report &&
+            shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        handleRunQuery(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setPreviousPage(0);
+    };
+    const handleRunQuery = async (processing, resetRows = false) => {
+        try {
+            setErrorMessage('');
+            setTableLoading(true);
+            const tableInfo = await fetchTableByQuery(activeQuery, client, processing, customFields);
+            if (tableInfo.error) {
+                throw new Error(tableInfo.error);
+            }
+            else if (tableInfo.rows.length === 0) {
+                throw new Error('No data found');
+            }
+            if (tableInfo.rowCount) {
+                setNumberOfRows(tableInfo.rowCount);
+            }
+            setCurrentProcessing(processing);
+            let tempRows = [...rows, ...tableInfo.rows];
+            if (resetRows) {
+                tempRows = tableInfo.rows;
+            }
+            setRows(tempRows);
+            setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            setColumns(tableInfo.columns);
+            setTableLoading(false);
+        }
+        catch (e) {
+            setTableLoading(false);
+            setErrorMessage('Failed to run SQL query: ' + e);
+            setRows([]);
+            setColumns([]);
+            return;
+        }
+    };
     /**
      * Render form fields based on the type of the node
      * @param node the AST or subtree to render recursively
@@ -930,10 +1056,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             case 'binary_expr':
                 if (dateComparisonPartialMatch ||
                     (isDateTruncEquals(node) && client.databaseType !== 'BigQuery')) {
-                    const { dateColumn, 
-                    // see onChange callback handleChange
-                    // eslint-disable-next-line no-unused-vars
-                    dateColumnPath, dateFilterType, intervalCount, intervalType, intervalPaths, } = getDateFilterInfo(node);
+                    const { dateColumn, dateFilterType, intervalCount, intervalType, intervalPaths, } = getDateFilterInfo(node);
                     const isPlural = intervalCount !== 1 && dateFilterType !== 'in the current'
                         ? 's'
                         : '';
@@ -1081,7 +1204,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                 } }))] }));
                 }
                 else if (isInTheLastInterval(node, client.databaseType)) {
-                    const { dateColumn, dateFilterType, intervalCount, intervalType } = getDateFilterInfo(node);
+                    const { dateColumn } = getDateFilterInfo(node);
                     const options = getAllPossibleColumns().map((column) => ({
                         label: snakeAndCamelCaseToTitleCase(column.displayName),
                         value: column.name,
@@ -1142,7 +1265,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                     ], width: 200 }) })] }));
                 }
                 else if (isTheCurrentInterval(node, client.databaseType)) {
-                    const { dateFilterType } = getDateFilterInfo(node);
                     const options = getAllPossibleColumns().map((column) => ({
                         label: snakeAndCamelCaseToTitleCase(column.displayName),
                         value: column.name,
@@ -1201,7 +1323,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                     { label: `week`, value: 'WEEK' },
                                 ], width: 200 })] }));
                 }
-                else if (isThePreviousInterval(node, client.databaseType)) {
+                else if (isThePreviousInterval(node)) {
                     const options = getAllPossibleColumns().map((column) => ({
                         label: snakeAndCamelCaseToTitleCase(column.displayName),
                         value: column.name,
@@ -1348,7 +1470,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         .find((tableInfo) => tableInfo.name === table)
                         ?.columns.find((col) => col.name === leftChildValue);
                     const columnType = column?.fieldType;
-                    let operatorOptions = [
+                    const operatorOptions = [
                         ...(isNumericColumnType(columnType)
                             ? [
                                 { label: 'equal to', value: '=' },
@@ -1589,112 +1711,214 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         }
         return validPivot;
     };
-    const renderSentence = (formData, node, keyPrefix = '', 
-    // @depreciated TODO: remove next update
-    // eslint-disable-next-line no-unused-vars
-    isTopLevel = false, 
-    // @depreciated TODO: remove next update
-    // eslint-disable-next-line no-unused-vars
-    isTopLevelAnd = false, isParentRow = false) => {
-        const uniqueSentence = getCustomSentence(node, client.databaseType);
-        let dateComparisonPartialMatch = null;
-        let dateEqualityPartialMatch = null;
-        if (client.databaseType !== 'BigQuery') {
-            dateComparisonPartialMatch = formatDateComparisonNode(node);
-            dateEqualityPartialMatch = tryConvertDateEquality(node, client.databaseType);
+    /**
+     *
+     * @param filterTree
+     * Returns a list of filters to be displayed
+     * Replaces the functionality of renderNodes in the context of filters
+     * Contains filterSentence, which replaces renderSentence
+     */
+    const renderFilters = (filterTree) => {
+        let tree = filterTree;
+        let filterStack = [];
+        /**
+         * Function that takes in a FilterTree and flattens it into an array using in order traversal
+         */
+        function traverseTree(node) {
+            if (!node) {
+                return;
+            }
+            if (node.leaf) {
+                filterStack.push(node);
+            }
+            else {
+                traverseTree(node.leftNode);
+                filterStack.push(node);
+                traverseTree(node.rightNode);
+            }
         }
-        const isRow = !isTopLevelBoolean(node);
-        const isCard = isRow && !isParentRow;
-        const OPS = {
-            AND: 'and',
-            OR: 'or',
-            LIKE: 'is exactly',
-            BETWEEN: 'is between',
-            IN: 'is',
-            'NOT IN': 'is not',
-            'NOT LIKE': 'is not exactly',
-            '!=': 'is not exactly',
-            '=': 'is',
-            '<': 'is less than',
-            '>': 'is greater than',
-            '<=': 'is less than or equal to',
-            '>=': 'is greater than or equal to',
-            '<>': 'is not',
-            '-': 'minus',
-            'IS NOT': 'is not',
-            IS: 'is',
-        };
-        switch (node.type) {
-            case 'binary_expr':
-                return (_jsx(TagWrapper, { keyPrefix: keyPrefix, formData: formData, activeEditItem: activeEditItem, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setCheckboxes: setCheckboxes, handleReplaceSubtree: handleReplaceSubtree, FilterPopover: FilterPopoverComponent, setActivePath: setActivePath, setOpenPopover: setOpenPopover, setIsPending: setIsPending, clearCheckboxes: clearCheckboxes, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, EditPopover: EditPopover, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, renderNode: renderNode, children: dateComparisonPartialMatch ??
-                        dateEqualityPartialMatch ??
-                        uniqueSentence ?? (_jsxs(_Fragment, { children: [node.left &&
-                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : isTopLevel || topLevelBinaryOperator === 'OR' ? (_jsx(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: SelectComponent })) : null, node.right &&
-                                renderSentence(formData, node.right, keyPrefix + 'right.', false, false, isRow)] })) }));
-            case 'column_ref':
-                return snakeAndCamelCaseToTitleCase(node.column);
-            case 'expr_list':
-                if (node.value.length === 1) {
-                    const subQuery = renderSentence(formData, node.value[0]);
-                    if (subQuery) {
-                        return `${subQuery}`;
-                    }
-                    return '()';
+        /**
+         * Returns a sentence to describe a Filter
+         */
+        function filterSentence(filter) {
+            let value = '';
+            if (filter.name == FilterNames.NullFilter) {
+                return `${snakeAndCamelCaseToTitleCase(filter.field)} ${filter.operator}`;
+            }
+            else if (filter.value === null || filter.value === undefined) {
+                return 'Error: filter missing value';
+            }
+            if (typeof filter.value === 'string' ||
+                typeof filter.value === 'number') {
+                value = filter.value.toString();
+            }
+            else if ('unit' in filter.value) {
+                if (filter.operator === DateOperator.InTheCurrent) {
+                    value = `${filter.value.unit}`;
                 }
-                return `${node.value
-                    .map((elem) => renderSentence(formData, elem))
-                    .join(', ')}`;
-            case 'single_quote_string':
-                return node.value.replaceAll('%', '');
-            case 'double_quote_string':
-            case 'number':
-                return node.value;
-            case 'null':
-                return 'null';
-            case 'bool':
-                return node.value.toString();
-            case 'interval':
-                if (node.unit) {
-                    // eg. `INTERVAL '90' DAY` -> "90 days"
-                    return `${node.expr.value} ${node.unit}s`;
+                else {
+                    value = `${filter.value.value} ${filter.value.unit}${filter.value.value === 1 ? '' : 's'}`;
                 }
-                return node.expr.value;
-            case 'function':
-                if (node.name.toLowerCase() === 'lower' ||
-                    node.name.toLowerCase() === 'upper') {
-                    // how many transactions were above 20 and not fuel or made in the last 90 days (hint: use lower)
-                    if (node.args.value.length < 1)
-                        return null;
-                    if (node.args.value[0].value) {
-                        if (node.args.value[0].type === 'single_quote_string') {
-                            return node.args.value[0].value.replaceAll('%', '');
-                        }
-                        return snakeAndCamelCaseToTitleCase(node.args.value[0].value.replaceAll('%', ''));
-                    }
-                    if (node.args.value[0].column)
-                        return snakeAndCamelCaseToTitleCase(node.args.value[0].column.replaceAll('%', ''));
+            }
+            else if ('startDate' in filter.value) {
+                value = `from ${filter.value.startDate}`;
+            }
+            else if (filter.value.length > 0) {
+                value = filter.value.join(', ');
+            }
+            return `${snakeAndCamelCaseToTitleCase(filter.field)} ${filter.operator} ${value}`;
+        }
+        /**
+         * Given an array of Filters (presumed to be in in-order state), generate
+         * the corresponding Filter tree. Essentially the reverse of what traverseTree does
+         */
+        function filterStackToFilterTree(stack) {
+            function buildTree(i) {
+                const newNode = {
+                    leaf: false,
+                    operator: null,
+                    leftNode: null,
+                    rightNode: null,
+                };
+                if (i >= stack.length) {
                     return null;
                 }
-                if (node.name.toLowerCase() === 'current_date' ||
-                    node.name.toLowerCase() === 'now') {
-                    return 'today';
-                }
-                if (node.name.toLowerCase() === 'date_trunc') {
-                    // eg. date_trunc('month', now())
-                    if (!node.args)
-                        return null;
-                    if (node.args.type !== 'expr_list')
-                        return null;
-                    if (node.args.value?.length !== 2)
-                        return null;
-                    const interval = renderSentence(formData, node.args.value[0]);
-                    const timestamp = renderSentence(formData, node.args.value[1]);
-                    return `start of the ${interval} of ${timestamp}`;
+                else if (stack[i].leaf) {
+                    if (i < stack.length - 1) {
+                        // more nodes later
+                        newNode.operator = stack[i + 1].operator;
+                        newNode.leftNode = {
+                            leaf: true,
+                            leftNode: null,
+                            rightNode: null,
+                            operator: null,
+                            value: stack[i].value,
+                        };
+                        newNode.rightNode = buildTree(i + 2);
+                    }
+                    else {
+                        newNode.leaf = true;
+                        newNode.value = stack[i].value;
+                    }
                 }
-                return null;
-            default:
-                return null;
+                return newNode;
+            }
+            return buildTree(0);
         }
+        traverseTree(tree);
+        // Remove null (invalid) filters from filter stack
+        filterStack = filterStack.filter((filter) => {
+            return ((!filter.leaf &&
+                filter.rightNode &&
+                (!filter.rightNode.leaf || filter.rightNode.value)) ||
+                (filter.leaf && filter.value));
+        });
+        // Render filterStack
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: filterStack.map((item, index) => {
+                if (!item.leaf &&
+                    (item.operator === 'and' || item.operator === 'or')) {
+                    return (_jsx("div", { style: {
+                            width: 'fit-content',
+                            marginBottom: '8px',
+                            marginTop: '8px',
+                        }, children: _jsx(TabsComponent, { value: item.operator.toUpperCase(), options: DEFAULT_TAB_OPTIONS, onChange: () => {
+                                if (item.operator === 'and') {
+                                    item.operator = 'or';
+                                }
+                                else {
+                                    item.operator = 'and';
+                                }
+                                let newFormData = null;
+                                if (tree) {
+                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                }
+                                const newAst = deepCopy({
+                                    ...defaultAST,
+                                    ...baseAst,
+                                    ...(!baseAst?.columns && {
+                                        columns: getAllPossibleColumns().map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.name;
+                                            return newColumn;
+                                        }),
+                                    }),
+                                    ...(!baseAst?.from && {
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                    }),
+                                    where: newFormData,
+                                });
+                                setBaseAst(newAst);
+                                setFormData(newFormData);
+                                fetchSqlQuery(newAst, newFormData);
+                            } }) }, index));
+                }
+                else {
+                    return (_jsx("div", { children: _jsx(FilterPopoverWrapper, { schema: schema.find((s) => s.name === currentTable ||
+                                s.displayName === currentTable) ?? schema[0], filter: item.value, filterLabel: item.value ? filterSentence(item.value) : '', index: index, openFilterIndex: openFilterIndex, setOpenFilterIndex: setOpenFilterIndex, FilterPopover: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: fieldValuesMap, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (filter) => {
+                                item.value = filter;
+                                let newFormData = null;
+                                if (tree) {
+                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                }
+                                const newAst = deepCopy({
+                                    ...defaultAST,
+                                    ...baseAst,
+                                    ...(!baseAst?.columns && {
+                                        columns: getAllPossibleColumns().map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.name;
+                                            return newColumn;
+                                        }),
+                                    }),
+                                    ...(!baseAst?.from && {
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                    }),
+                                    where: newFormData,
+                                });
+                                setBaseAst(newAst);
+                                setFormData(newFormData);
+                                fetchSqlQuery(newAst, newFormData);
+                            }, handleFilterDelete: (i) => {
+                                if (i > 0) {
+                                    filterStack.splice(i - 1, 2);
+                                }
+                                else {
+                                    if (filterStack.length > 1) {
+                                        filterStack.splice(i, 2);
+                                    }
+                                    else {
+                                        filterStack.splice(i, 1);
+                                    }
+                                }
+                                tree = filterStackToFilterTree(filterStack);
+                                let newFormData = null;
+                                if (tree) {
+                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                }
+                                const newAst = deepCopy({
+                                    ...defaultAST,
+                                    ...baseAst,
+                                    ...(!baseAst?.columns && {
+                                        columns: getAllPossibleColumns().map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.name;
+                                            return newColumn;
+                                        }),
+                                    }),
+                                    ...(!baseAst?.from && {
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                    }),
+                                    where: newFormData,
+                                });
+                                setBaseAst(newAst);
+                                setFormData(newFormData);
+                                fetchSqlQuery(newAst, newFormData);
+                            } }) }, index));
+                }
+            }) }));
     };
     const getAllPossibleColumns = () => {
         if (!baseAst || !baseAst.from) {
@@ -1736,7 +1960,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         if (selectedColumns.length < 1)
             return false;
         const allColumns = orderedColumnNames.filter((row) => {
-            const [table, _] = row.split('.');
+            const [table] = row.split('.');
             const selectedTable = selectedColumns[0].split('.')[0];
             return selectedTable === table;
         });
@@ -1780,35 +2004,38 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         task: 'patterns',
                         getCustomFields: false,
                         customFields,
-                        // additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                        additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                        useUpdatedDataGathering: true,
+                        useNewNodeSql: true, // new flag
                     },
                 };
-                const cloudBody = {};
-                const data2 = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
-                if (data2.success === false) {
-                    throw new Error(data2.errorMessage);
-                }
-                rows = data2.rows;
                 const tables = getTableNames(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
-                if (table !== currentTable) {
+                let newUniqueValues = uniqueValues;
+                let dateRangesTemp = dateRanges;
+                let curReport = tempReport;
+                if ((newUniqueValues && Object.keys(newUniqueValues).length === 0) ||
+                    table !== currentTable) {
                     const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
                     if (tableInfo) {
-                        const convertedStringColumns = tableInfo.columns
-                            .filter((column) => {
-                            return isTextColumnType(column.fieldType);
-                        })
-                            .map((column) => convertColumnInfoToColumnInternal(column));
-                        const stringNames = convertedStringColumns.map((column) => column.field);
-                        const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client, customFields);
-                        const joinedUniqueValues = deepCopy(uniqueValues);
-                        joinedUniqueValues[table] = newUniqueValues;
-                        if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
-                            setUniqueValues(joinedUniqueValues);
+                        newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                        if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                            setUniqueValues(newUniqueValues);
                         }
+                        dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                        setDateRanges(dateRangesTemp || {});
                     }
                     setCurrentTable(table);
                 }
+                const cloudBody = {};
+                const data2 = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+                if (data2.success === false) {
+                    throw new Error(data2.errorMessage);
+                }
+                rows = data2.rows;
+                if (data2.rowCount) {
+                    setNumberOfRows(data2.rowCount);
+                }
                 if (data2.rows && data2.rows.length) {
                     if (pivot) {
                         // check if any of the pivot fields aren't in the data2.fields array
@@ -1818,23 +2045,75 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                             setPivotData(null);
                             setRows(data2.rows);
                             setColumns(processedFields);
+                            if (data2.rowCount) {
+                                const processedFormData = report
+                                    ? report
+                                    : 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;
                         }
+                        curReport = {
+                            ...formData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                        };
                         // Do all of this to make sure we have the right unique columns when applying a pivot
-                        let uniqueFormatted = {};
-                        const uniqueRecords = Array.from(new Set(data2.rows.map((row) => row[pivot.columnField]))).reduce((acc, curr) => {
-                            acc[curr] = false;
-                            return acc;
-                        }, {});
-                        uniqueFormatted[pivot.columnField] = uniqueRecords;
-                        const pivotedData = generatePivotTableInMemory(pivot, data2.rows, undefined, false);
+                        let dateBucket = undefined;
+                        const tempDateRange = dateRangesTemp &&
+                            pivot.rowField &&
+                            dateRangesTemp[pivot.rowField];
+                        if (tempDateRange) {
+                            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                        }
+                        let distinctValuesForQuery = {};
+                        if (pivot.columnField) {
+                            const sqlQuery = await fetchSqlQuery({ ...baseAst, where: curFormData }, null, false);
+                            distinctValuesForQuery = await getUniqueValuesByColumns([
+                                {
+                                    field: pivot.columnField,
+                                    label: pivot.columnField,
+                                    format: 'string',
+                                },
+                            ], sqlQuery, [], client, customFields);
+                        }
+                        const pivotedData = await generatePivotTable(
+                        // @ts-ignore
+                        pivot, data2.rows, undefined, false, -1, undefined, dateBucket, curReport, client, distinctValuesForQuery ? distinctValuesForQuery : undefined);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
                         const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                         setPivotData(pivotedData);
                         setRows(data2.rows);
                         setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : 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}`;
@@ -1845,6 +2124,21 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                         setRows(data2.rows);
                         setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : 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}`;
                         }));
@@ -1861,105 +2155,22 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     setFormattedRows([]);
                     setPivotData(null);
                 }
+                setLoading(false);
+                setDataDisplayed(true);
+                return rows;
             }
             catch (e) {
-                console.error(e);
                 setErrorMessage(e.message);
-            }
-            finally {
                 setLoading(false);
                 setDataDisplayed(true);
-                return rows;
+                setRows([]);
+                setColumns([]);
+                setFormattedRows([]);
+                setPivotData(null);
+                return { error: true, message: e.message };
             }
         }
     };
-    // Convert an array of columns to a map where the name is the
-    // key and the value is the column node.
-    const columnArrayToMap = (columns) => {
-        const columnMap = {};
-        for (const col of columns) {
-            const key = col.expr?.value ?? col.expr?.column ?? col.as;
-            columnMap[key] = col;
-        }
-        return columnMap;
-    };
-    const applyFormatting = (response, columns) => {
-        const columnFormatters = {};
-        const columnMap = columnArrayToMap(columns);
-        response.fields.forEach((field) => {
-            // TODO: columnMap[field.name] silently breaks for columnField columns
-            const formatType = getPostgresBasicType(field);
-            if (formatType === 'date') {
-                columnFormatters[field.name] = (x) => {
-                    const d = new Date(x);
-                    // check if d is a valid date
-                    if (isNaN(d.getTime())) {
-                        return 'Invalid Date';
-                    }
-                    d.setMinutes(d.getMinutes() + d.getTimezoneOffset()); // TZ adjust
-                    if (columnMap[field.name]?.expr.type === 'function' &&
-                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
-                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
-                            'month') {
-                        return d.toLocaleString('default', {
-                            month: 'short',
-                            year: 'numeric',
-                        });
-                    }
-                    else if (columnMap[field.name]?.expr.type === 'function' &&
-                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
-                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
-                            'quarter') {
-                        return `Q${getQuarter(d)} ${d.getFullYear()}`;
-                    }
-                    else if (columnMap[field.name]?.expr.type === 'function' &&
-                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
-                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
-                            'year') {
-                        return d.toLocaleString('default', {
-                            year: 'numeric',
-                        });
-                    }
-                    return DATE_FMT.format(d);
-                };
-            }
-            else if (formatType === 'number') {
-                columnFormatters[field.name] = (x) => {
-                    if (columnMap[field.name]?.expr.type === 'extract' &&
-                        columnMap[field.name]?.expr.args.field.toLowerCase() === 'dow') {
-                        return DAY_OF_WEEK[x];
-                    }
-                    else if (columnMap[field.name]?.expr.type === 'extract' &&
-                        columnMap[field.name]?.expr.args.field.toLowerCase() === 'month') {
-                        return MONTH_OF_YEAR[x - 1];
-                    }
-                    else if (`${x}`.includes('.')) {
-                        // return MONEY_FMT.format(Number(x ?? 0.0));
-                        return Number(x ?? 0.0).toFixed(2);
-                    }
-                    return x ?? 0.0;
-                };
-            }
-            else if (formatType === 'boolean') {
-                columnFormatters[field.name] = (x) => {
-                    if (x) {
-                        return 'True';
-                    }
-                    return 'False';
-                };
-            }
-            else {
-                columnFormatters[field.name] = (x) => x;
-            }
-        });
-        return response.rows.map((row) => {
-            const newRow = {};
-            Object.keys(row).forEach((key) => (newRow[key] = columnFormatters[key]
-                ? columnFormatters[key](row[key])
-                : row[key]));
-            return newRow;
-        });
-    };
     // Returns whether a where-clause contains a nested subquery.
     const isSubquery = (node) => {
         if (!node)
@@ -1983,7 +2194,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             return;
         }
         try {
-            let errored = false;
             setLoading(true);
             setAskedAQuestion(true);
             setErrorMessage('');
@@ -2003,6 +2213,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         body: JSON.stringify({
                             initialQuestion: aiPrompt || overridePrompt,
                             publicKey: client.publicKey,
+                            useNewNodeSql: true, // new flag
                         }),
                     });
                 }
@@ -2014,6 +2225,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                             sqlQuery: activeQuery,
                             initialQuestion: aiPrompt,
                             publicKey: client.publicKey,
+                            useNewNodeSql: true, // new flag
                         }),
                     });
                 }
@@ -2031,31 +2243,33 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 setErrorMessage("Error: Couldn't process your request, please re-word your prompt.");
                 return;
             }
+            let currentSchema = schema;
+            if (currentSchema && currentSchema.length === 0) {
+                currentSchema = await fetchSchema();
+            }
             let newAst, groupByPivot;
             if (ast) {
                 // Unwrap the ast object, supporting many possible types
                 ast = ast.length ? ast[0] : ast;
                 newAst = convertBigQuery(ast);
-                newAst = convertWildcardColumns(newAst, schema); // must go before groupby
-                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(newAst, pivot, schema));
-                if (groupByPivot && !groupByPivot?.valueField) {
-                    setErrorMessage("Error: Couldn't process your request, please re-word your prompt.");
-                    return;
-                }
+                newAst = convertWildcardColumns(newAst, currentSchema); // must go before groupby
+                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(newAst, pivot, currentSchema));
                 newAst = convertStringComparison(newAst, client.databaseType);
                 newAst = convertRemoveSimpleParentheses(newAst);
                 const table = getTableNames(newAst)[0] ?? initialTableName;
                 const tableAlias = getTableAliases(newAst)[0] ?? initialTableName;
                 newAst = removeNonSelectedTableReferences(newAst, tableAlias ?? table, getAllPossibleColumns().map((col) => col.name));
-                setSelectedColumns(deepCopy(newAst).columns?.map((column) => {
+                const procesedColumns = deepCopy(newAst).columns?.map((column) => {
                     if (column.expr.type === 'column_ref') {
-                        return `${table}.${column.expr.column}`;
+                        const columnName = extractColumnish(column.expr);
+                        return `${table}.${columnName}`;
                     }
                     else if (column.as) {
                         return `${table}.${column.as}`;
                     }
                     return `${table}.${column.expr.value}`;
-                }));
+                });
+                setSelectedColumns(procesedColumns);
                 if (groupByPivot) {
                     setBaseAst(deepCopy({ ...newAst, orderby: null, limit: null }));
                     newAst = deepCopy({ ...newAst, orderby: null, limit: null });
@@ -2071,7 +2285,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
             ast = newAst; // so we fetch data for newAst later.
             fetchSqlQuery(ast, undefined, false);
             const table = getTableNames(newAst)[0] ?? initialTableName;
-            const tableAlias = getTableAliases(newAst)[0] ?? initialTableName;
             const hostedBody = {
                 metadata: {
                     clientId: client.publicKey,
@@ -2079,34 +2292,46 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     publicKey: client.publicKey,
                     orgId: client.customerId,
                     task: 'patterns',
-                    // additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                    additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                    useUpdatedDataGathering: true,
+                    pivot: groupByPivot,
+                    useNewNodeSql: true, // new flag
                 },
             };
-            const cloudBody = {};
-            const data2 = await getData(client, 'patterns', 'same-origin', hostedBody, cloudBody);
-            if (data2.status === 'error') {
-                throw new Error('Error querying data from patterns');
-            }
             let currentUniqueValues = uniqueValues;
-            if (table !== currentTable) {
-                const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
+            let dateRangesTemp = dateRanges;
+            if ((currentUniqueValues &&
+                currentUniqueValues[table] &&
+                Object.keys(currentUniqueValues[table]).length === 0) ||
+                table !== currentTable) {
+                const tableInfo = currentSchema.find((tableInfo) => tableInfo.name === table);
                 if (tableInfo) {
-                    const convertedStringColumns = tableInfo.columns
-                        .filter((column) => {
-                        return isTextColumnType(column.fieldType);
-                    })
-                        .map((column) => convertColumnInfoToColumnInternal(column));
-                    const stringNames = convertedStringColumns.map((column) => column.field);
-                    const newUniqueValues = await getUniqueValuesByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client, customFields);
-                    currentUniqueValues[table] = newUniqueValues;
-                    if (hashCode(uniqueValues) !== hashCode(currentUniqueValues)) {
-                        setUniqueValues(currentUniqueValues);
+                    const newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                    currentUniqueValues = newUniqueValues;
+                    if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                        setUniqueValues(newUniqueValues);
                     }
+                    dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                    setDateRanges(dateRangesTemp);
                 }
                 setCurrentTable(table);
             }
+            const cloudBody = {};
+            const data2 = await getData(client, 'patterns', 'same-origin', hostedBody, cloudBody);
+            if (!data2 || data2.status === 'error') {
+                throw new Error('Error querying data from patterns');
+            }
             if (data2.rows && data2.rows.length) {
-                const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                const processedFields = data2.fields
+                    .map((elem) => convertPostgresColumn(elem))
+                    .map((elem) => {
+                    const tableInfo = currentSchema.find((t) => t.name === table);
+                    const columnInfo = tableInfo?.columns.find((column) => column.name === elem.field);
+                    return columnInfo
+                        ? convertColumnInfoToColumnInternal(columnInfo)
+                        : null;
+                })
+                    .filter((elem) => elem);
                 let possiblePivot = true;
                 const possibleColumns = getPossiblePivotFieldOptions(processedFields, currentUniqueValues[table]);
                 if (groupByPivot &&
@@ -2120,7 +2345,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     let errorMessageEnding = '';
                     if (groupByPivot.columnField &&
                         !possibleColumns.columnFields.includes(groupByPivot?.columnField || '')) {
-                        if (currentUniqueValues[table][groupByPivot?.columnField || '']) {
+                        if (currentUniqueValues[table]?.[groupByPivot?.columnField || '']) {
                             errorMessageEnding = `The column ${groupByPivot?.columnField} has more than 24 unique values to pivot on.`;
                         }
                         else {
@@ -2129,7 +2354,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     }
                     else if (groupByPivot.rowField &&
                         !possibleColumns.rowFields.includes(groupByPivot?.rowField || '')) {
-                        if (currentUniqueValues[table][groupByPivot?.rowField || '']) {
+                        if (currentUniqueValues[table]?.[groupByPivot?.rowField || '']) {
                             errorMessageEnding = `The column ${groupByPivot?.rowField} has more than 36 unique values to pivot on.`;
                         }
                         else {
@@ -2141,18 +2366,45 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         errorMessageEnding = `The column ${groupByPivot?.valueField} is not a proper value field.`;
                     }
                     setErrorMessage(`The requested pivot is not supported. ${errorMessageEnding}`);
-                    errored = true;
                 }
                 if (groupByPivot && possiblePivot) {
-                    setPivotRowField(groupByPivot?.rowField);
-                    setPivotColumnField(groupByPivot?.columnField);
-                    setPivotValueField(groupByPivot?.valueField);
-                    setPivotAggregation(groupByPivot?.aggregationType);
-                    const pivotedData = generatePivotTableInMemory(groupByPivot, data2.rows, undefined, false);
+                    let curReport = report ? report : undefined;
+                    if (data2.rowCount) {
+                        const processedFormData = report
+                            ? report
+                            : 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 = getDateBucketFromRange(tempDateRange.dateRange);
+                    }
+                    const pivotedData = await 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);
@@ -2161,6 +2413,17 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     const processedFields = data2.fields.map((elem) => 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);
                 }
@@ -2179,7 +2442,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 setActiveQuery('');
             }
             if (data2.errorMessage) {
-                setErrorMessage(`Error: ${data2.errorMessage}`);
+                setErrorMessage(`Error: Couldn't process your request, please re-word your prompt.`);
             }
         }
         catch (e) {
@@ -2199,7 +2462,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         setSelectedColumns((selectedColumns) => selectedColumns.filter((column) => !column.endsWith(name)));
         const columns = baseAst.columns.filter((col) => {
             if (col.expr.type === 'column_ref') {
-                return col.expr.column !== name;
+                return (col.expr.column !== name &&
+                    (!col.expr.column.expr || col.expr.column.expr.value !== name));
             }
             else if (col.as) {
                 return col.as !== name;
@@ -2214,14 +2478,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
         setBaseAst(newAst);
         fetchSqlQuery(newAst);
     };
-    function TopLevelBooleanSwitch({ node, keyPrefix, handleOperatorChange, }) {
-        return (_jsx("div", { style: { width: 'fit-content' }, children: _jsx(TabsComponent, { value: node.operator, options: DEFAULT_TAB_OPTIONS, onChange: (event) => {
-                    if (loading) {
-                        return;
-                    }
-                    handleOperatorChange(event.target.value, node, keyPrefix);
-                } }) }));
-    }
     const DraggableItem = ({ id, label, onDelete }) => {
         const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
         const style = {
@@ -2248,7 +2504,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 setOrderedColumnNames(newOrder);
                 const orderedSelectedColumns = [];
                 for (const value of newOrder) {
-                    const [_, column] = value.split('.');
+                    const column = value.split('.')[1];
                     if (selectedColumns.includes(value)) {
                         orderedSelectedColumns.push(column);
                     }
@@ -2272,12 +2528,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 fetchSqlQuery(newAst, undefined, false);
             }
         }
-        const columnNamesInAst = baseAst?.columns.map((col) => {
-            if (col.expr.type === 'column_ref') {
-                return col.expr.column;
+        const columnNamesInAst = baseAst?.columns
+            .map((col) => {
+            if (col.expr.type === 'column_ref' && col.expr.column) {
+                if (typeof col.expr.column === 'string') {
+                    return col.expr.column;
+                }
+                else {
+                    return col.expr.column.expr.value;
+                }
             }
             else if (col.as) {
-                return col.as;
+                if (typeof col.as === 'string') {
+                    return col.as;
+                }
+                else {
+                    return col.as.expr?.value;
+                }
             }
             else if (col.expr && col.expr.type === 'aggr_func') {
                 if (col.expr.args) {
@@ -2286,22 +2553,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                 return col.expr.name;
             }
             return col.expr.value;
-        }) ?? [];
+        })
+            .filter(
+        // remove duplicate entries
+        (value, index, self) => value && self.indexOf(value) === index) ?? [];
         return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columnNamesInAst, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'column',
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
     }
-    if (loading || initalChartLoad) {
+    if (loading || initialChartLoad) {
         return (_jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
                 height: '100%',
                 ...containerStyle,
             }, className: className, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                        if (loadingSchema)
-                                            return;
                                         if (!openPopover) {
                                             setOpenPopover('AddColumnModal');
                                         }
@@ -2322,12 +2590,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                         }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
                                             setBaseAst(ast);
                                             fetchSqlQuery(ast);
-                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 8,
                                         marginBottom: 12,
-                                    }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                    }, children: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         alignItems: 'flex-start',
@@ -2339,7 +2607,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                 }
                                                 if (!openPopover) {
                                                     const value = orderedColumnNames[0];
-                                                    const [_table, column] = value.split('.');
+                                                    const column = value.split('.')[1];
                                                     const columnType = getColumnTypeByName(column);
                                                     if (isNumericColumnType(columnType)) {
                                                         const newSubtree = deepCopy(defaultNumericComparison);
@@ -2368,27 +2636,15 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                             setActiveEditItem(null);
                                                         }, 300);
                                                     }
-                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
-                                                        if (isNodeEmptyCollection(activeEditItem)) {
-                                                            setIsPending(false);
-                                                            setActivePath(null);
-                                                            setOpenPopover(null);
-                                                            setTimeout(() => {
-                                                                clearCheckboxes();
-                                                                setActiveEditItem(null);
-                                                            }, 300);
-                                                        }
-                                                        else {
-                                                            setIsPending(false);
-                                                            handleInsertion(activeEditItem, 'AND', false);
-                                                            setActivePath(null);
-                                                            setOpenPopover(null);
-                                                            setTimeout(() => {
-                                                                clearCheckboxes();
-                                                                setActiveEditItem(null);
-                                                            }, 300);
-                                                        }
-                                                    }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
+                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
+                                                        s.displayName === currentTable) ?? schema[0], fieldValuesMap: uniqueValues[getTableNames(baseAst).length === 1
+                                                        ? getTableNames(baseAst)[0]
+                                                        : initialTableName], onSubmitFilter: (filter) => {
+                                                        setOpenPopover(null);
+                                                        setIsPending(false);
+                                                        const item = filterToAst(filter, client.databaseType.toLowerCase());
+                                                        handleInsertion(item, 'AND', false);
+                                                    }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, SecondaryButtonComponent: SecondaryButtonComponent, MultiSelectComponent: MultiSelectComponent }) }) }), baseAst?.where &&
                                             false && ( // temp removed the AddConditionPopover
                                         _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                         if (!openPopover) {
@@ -2427,25 +2683,16 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                                 setActivePath(null);
                                                                 setOpenPopover(null);
                                                             }
-                                                        } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                        } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                         setPivot(null);
                                         setPivotData(null);
                                         const formattedRows = formatRows(rows, columns, false);
                                         setFormattedRows(formattedRows);
                                     }, 
                                     // TODOs
-                                    selectPivot: (pivot) => {
-                                        if (!pivot)
-                                            return;
-                                        const newAst = { ...baseAst };
-                                        newAst.orderby = null;
-                                        setBaseAst(newAst); // trigger refetch
-                                        setPivot(pivot);
-                                        const pivotedData = generatePivotTableInMemory(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 && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                    selectPivot: () => {
+                                        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 && (_jsx(PivotForm, { 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);
@@ -2460,7 +2707,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                     }, children: _jsx(SortSentence, { sortData: {
                                             type: pivot.sortDirection,
                                             expr: { type: 'column_ref', column: pivot.sortField },
-                                        }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                             setPivot({ ...pivot, sort: false });
                                             setBaseAst(deepCopy(baseAst));
                                             if (!pivot) {
@@ -2509,7 +2756,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             if (!pivot) {
                                                 fetchSqlQuery(newAst);
                                             }
-                                        }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                             const newAst = { ...baseAst };
                                             newAst.orderby.splice(id, 1);
                                             setBaseAst(deepCopy(newAst));
@@ -2532,7 +2779,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             setActivePath(null);
                                             setOpenPopover(null);
                                         }
-                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? (_jsx("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 8,
@@ -2587,7 +2834,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             ? askAIInputWidth
                                             : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
                                         initialLoad ||
-                                        initalChartLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initalChartLoad && (_jsxs("div", { style: {
+                                        initialChartLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initialChartLoad && (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2602,8 +2849,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                     boxSizing: 'border-box',
                     ...containerStyle,
                 }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                            if (loadingSchema)
-                                                return;
                                             if (!orderedColumnNames) {
                                                 return;
                                             }
@@ -2627,12 +2872,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
                                                 setBaseAst(ast);
                                                 fetchSqlQuery(ast);
-                                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, schemaLoading: loadingSchema, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                        }, children: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'flex-start',
@@ -2644,7 +2889,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                     }
                                                     if (!openPopover) {
                                                         const value = orderedColumnNames[0];
-                                                        const [_table, column] = value.split('.');
+                                                        const column = value.split('.')[1];
                                                         const columnType = getColumnTypeByName(column);
                                                         if (isNumericColumnType(columnType)) {
                                                             const newSubtree = deepCopy(defaultNumericComparison);
@@ -2674,27 +2919,13 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                                 setActiveEditItem(null);
                                                             }, 300);
                                                         }
-                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
-                                                            if (isNodeEmptyCollection(activeEditItem)) {
-                                                                setOpenPopover(null);
-                                                                clearCheckboxes();
-                                                                setIsPending(false);
-                                                                setTimeout(() => {
-                                                                    setActivePath(null);
-                                                                    setActiveEditItem(null);
-                                                                }, 300);
-                                                            }
-                                                            else {
-                                                                setOpenPopover(null);
-                                                                setIsPending(false);
-                                                                handleInsertion(activeEditItem, 'AND', false);
-                                                                setActivePath(null);
-                                                                setTimeout(() => {
-                                                                    clearCheckboxes();
-                                                                    setActiveEditItem(null);
-                                                                }, 300);
-                                                            }
-                                                        }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }) }), baseAst?.where &&
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
+                                                            s.displayName === currentTable) ?? schema[0], fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                            setOpenPopover(null);
+                                                            setIsPending(false);
+                                                            const item = filterToAst(filter, client.databaseType.toLowerCase());
+                                                            handleInsertion(item, 'AND', false);
+                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent }) }) }), baseAst?.where &&
                                                 false && ( // temp removed the AddConditionPopover
                                             _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
                                                             if (!openPopover) {
@@ -2734,12 +2965,12 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                                     setOpenPopover(null);
                                                                     clearCheckboxes();
                                                                 }
-                                                            } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                                            } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
                                             setPivot(null);
                                             setPivotData(null);
                                             const formattedRows = formatRows(rows, columns, false);
                                             setFormattedRows(formattedRows);
-                                        }, selectPivot: (pivot) => {
+                                        }, selectPivot: async (pivot, uniqueValues, dateRange, pivotTable) => {
                                             if (!pivot)
                                                 return;
                                             const newAst = { ...baseAst };
@@ -2749,13 +2980,19 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                 pivot['sortDirection'] = 'ASC';
                                             }
                                             setBaseAst(newAst); // trigger refetch
+                                            let dateBucket = undefined;
+                                            if (dateRange) {
+                                                dateBucket = getDateBucketFromRange(dateRange);
+                                            }
+                                            if (!pivotTable) {
+                                                pivotTable = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
+                                            }
+                                            setPivotData(pivotTable || []);
                                             setPivot(pivot);
-                                            const pivotedData = generatePivotTableInMemory(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 && (_jsx(PivotForm, { 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 && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
                                             setPivotRowField(value);
                                             updatePivot(value, 'rowField');
                                         }, setPivotColumnField: (value) => {
@@ -2787,10 +3024,18 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                         `.${pivot.rowField}`,
                                                         `.${pivot.valueField || 'count'}`,
                                                     ]
-                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
                                                 if (pivot) {
-                                                    setPivot({ ...pivot, sort: false });
-                                                    const pivotedData = generatePivotTableInMemory({ ...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 = getDateBucketFromRange(tempDateRange.dateRange);
+                                                    }
+                                                    setPivot(tempPivot);
+                                                    const pivotedData = await 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);
@@ -2799,25 +3044,27 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                 }
                                                 setBaseAst(deepCopy(baseAst));
                                                 fetchSqlQuery(deepCopy(baseAst));
-                                            }, onSave: (column, direction) => {
+                                            }, onSave: async (column, direction) => {
                                                 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 = generatePivotTableInMemory({
-                                                        ...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 = getDateBucketFromRange(tempDateRange.dateRange);
+                                                    }
+                                                    const pivotedData = await 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);
@@ -2832,7 +3079,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             flexDirection: 'column',
                                             gap: 8,
                                             marginBottom: 12,
-                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
                                                 if (pivot) {
                                                     setPivot({ ...pivot, sort: false });
                                                     return;
@@ -2898,27 +3145,29 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                             `.${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({
-                                                            ...pivot,
-                                                            sort: true,
-                                                            sortDirection: direction,
-                                                            sortField: column,
-                                                            sortFieldType: sortFieldType,
-                                                        });
-                                                        const pivotedData = generatePivotTableInMemory({
+                                                        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 = getDateBucketFromRange(tempDateRange.dateRange);
+                                                        }
+                                                        const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
                                                         setErrorMessage('');
                                                         setPivotData(pivotedData || []);
                                                         const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
@@ -2940,7 +3189,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                     setOpenPopover(null);
                                                     setBaseAst(deepCopy(newAst));
                                                     fetchSqlQuery(deepCopy(newAst));
-                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? (_jsx("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: 8,
@@ -3011,14 +3260,16 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                                 ? askAIInputWidth
                                                 : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: askedAQuestion
                                                 ? 'Ask a follow-up question...'
-                                                : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: (loading && errorMessage.length === 0) || initalChartLoad, rows: formattedRows, columns: pivot
+                                                : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: tableLoading ||
+                                    (loading && errorMessage.length === 0) ||
+                                    initialChartLoad, rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, columns: pivot
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
                                             label: snakeAndCamelCaseToTitleCase(c),
                                             field: c,
                                         };
-                                    }) })), _jsxs("div", { style: {
+                                    }), onPageChange: onPageChange, onSortChange: onSortChange })), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
@@ -3029,11 +3280,13 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                                             overflow: 'hidden',
                                             width: '100%',
                                             gap: 12,
-                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && (_jsxs(_Fragment, { children: [!hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: () => {
+                                            alignItems: 'center',
+                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initialChartLoad && (_jsxs(_Fragment, { children: [!hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: () => {
                                                     setIsChartBuilderOpen(true);
-                                                }, label: report ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: report
+                                                }, disabled: !!errorMessage, label: report ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: report
                     ? {
                         ...report,
+                        ...tempReport,
                         pivot: pivot,
                         yAxisFields: report.pivot && !pivot ? [] : report.yAxisFields,
                         columns: report.columns.filter((col) => {
@@ -3044,5 +3297,5 @@ export default function ReportBuilder({ initialTableName = '', onSubmitEditRepor
                         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, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, isLoading: tableLoading }))] }));
 }