@quillsql/react 2.12.46 → 2.12.48

package/dist/esm/ReportBuilder.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState, } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { DEFAULT_TAB_OPTIONS, MemoizedButton, 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 { ClientContext, CustomFieldContext, DashboardContext, SchemaContext, ThemeContext, } from './Context';
-import { getTableNames, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
+import { ClientContext, DashboardContext, SchemaDataContext, ThemeContext, } from './Context';
+import { getTableNames, isNumericColumnType, } from './components/ReportBuilder/ast';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
 import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, QuillLimitPopover, FilterPopoverWrapper, } from './components/ReportBuilder/ui';
@@ -22,18 +22,18 @@ import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
 import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
 import { pivotToSql } from './utils/pivotProcessing';
-import { getUniqueValuesByColumns, getDateRangeByColumns, getCountsByColumns, fetchTableByQuery, } from './utils/tableProcessing';
+import { getUniqueValuesByColumns, getDateRangeByColumns, fetchTableByQuery, getUniqueStringValues, } from './utils/tableProcessing';
 import { fetchAndProcessASTFromPrompt, fetchASTFromQuillReport, getAllPossibleColumns, } 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 { filterToAst, filterTreeToAst, } from './utils/astFilterProcessing';
+import { astToFilterTree, filterToAst, filterTreeToAst, } from './utils/astFilterProcessing';
 import useAstToFilterTree from './hooks/useAstToFilterTree';
-import { filterSentence } from './utils/filterProcessing';
+import { filterSentence, filterStackToFilterTree, uniqueValuesToStringMap, } from './utils/filterProcessing';
 import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
 import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
 import { EMPTY_INTERNAL_REPORT, fetchReportBuilderDataFromAST, formatRowsFromReport, } from './utils/report';
+import equal from 'fast-deep-equal';
 export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SERVER_HOST) ||
     'https://quill-344421.uc.r.appspot.com';
 /**
@@ -67,11 +67,11 @@ 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, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableSQLEditorComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, 
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, onDiscardChanges = undefined, onSaveChanges = undefined, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, 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 [dashboard] = useContext(DashboardContext);
-    const [schema, setSchema] = useContext(SchemaContext);
+    const [schemaData] = useContext(SchemaDataContext);
     const [reportInfo, setReportInfo] = useState(null);
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
@@ -85,7 +85,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [activePath, setActivePath] = useState(null);
     const [openPopover, setOpenPopover] = useState(null);
     const [loading, setLoading] = useState(!!initialTableName);
-    const [loadingSchema, setLoadingSchema] = useState(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
     const [, setIsPending] = useState(false);
     const [isCopying, setIsCopying] = useState(false);
@@ -121,9 +120,10 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
     const [client] = useContext(ClientContext);
     // JANK: This is temp and stupid
     const [overrideRecommendations, setOverrideRecommendations] = useState(true);
-    const [customFields, setCustomFields] = useContext(CustomFieldContext);
     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
+    const [globalUniqueValues, setGlobalUniqueValues] = useState({});
+    const { filterTree, filterStack } = useAstToFilterTree(formData, client); // Stores the state of filters
+    const [removingFilter, setRemovingFilter] = useState(false);
     useEffect(() => {
         if (!client) {
             return;
@@ -131,8 +131,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         if (client.publicKey === '663416663aa9bc716e59a89d') {
             setOverrideRecommendations(false);
         }
-        if (!loadingSchema) {
-            fetchSchema();
+        if (!initialLoad && client.publicKey) {
+            clearAllState();
         }
     }, [client]);
     useEffect(() => {
@@ -198,7 +198,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                     label: pivot.columnField,
                     format: 'string',
                 },
-            ], activeQuery, [], client, customFields);
+            ], activeQuery, [], client, schemaData.customFields ?? []);
         }
         const pivotedData = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, distinctValuesForQuery);
         setPivotData(pivotedData || []);
@@ -247,14 +247,19 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             setRecommendedPivots([]);
         }, 0);
     };
+    const fetchGlobalUniqueValues = async (columns, currentTable, client) => {
+        const global = await getUniqueStringValues(columns, currentTable, client);
+        setGlobalUniqueValues(uniqueValuesToStringMap(global));
+    };
+    const uniqueValuesDependenciesRef = useRef({ client, columns, currentTable });
+    const memoizedFetchGlobalUniqueValues = useCallback(fetchGlobalUniqueValues, []);
     useEffect(() => {
-        if (!client) {
-            return;
+        const hasChanged = !equal({ client, columns, currentTable }, uniqueValuesDependenciesRef.current);
+        if (hasChanged && client && columns && currentTable) {
+            memoizedFetchGlobalUniqueValues(columns, currentTable, client);
+            uniqueValuesDependenciesRef.current = { client, columns, currentTable };
         }
-        if (!initialLoad && client.publicKey) {
-            clearAllState();
-        }
-    }, [client]);
+    }, [client, columns, currentTable, memoizedFetchGlobalUniqueValues]);
     const formatRows = (rows, columns, pivot, aggregationType) => {
         const copiedRows = deepCopy(rows);
         if (pivot) {
@@ -353,18 +358,6 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             console.error(error);
         }
     };
-    const getUniqueStringValues = async (columns, tableName) => {
-        const convertedStringColumns = columns.filter((column) => {
-            return isTextColumnType(column.fieldType);
-        });
-        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';
@@ -375,7 +368,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         const dateColumnNames = dateColumns.map((column) => {
             return column.field;
         });
-        const dateRanges = await getDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, customFields);
+        const dateRanges = await getDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, schemaData.customFields ?? []);
         return dateRanges;
     };
     // It's just like getColumnsInPivot but we expand the columnField
@@ -399,12 +392,12 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         return result.filter(Boolean);
     };
     const loadTable = async (tables) => {
-        if (!tables?.length || !schema?.length)
+        if (!tables?.length || !schemaData.schema?.length)
             return;
         setLoading(true);
         const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
         if (tableInfo) {
-            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName);
+            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName, client, schemaData.customFields, uniqueValues);
             if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
                 setUniqueValues(newUniqueValues);
                 updateFieldValuesMap(newUniqueValues, initialTableName);
@@ -433,13 +426,9 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         await fetchAstFromPromptHelper(`get ${columnsForTable} from ${initialTableName}`);
         setInitialLoad(false);
     };
-    const fetchSchema = async () => {
+    const onSchemaChange = async () => {
         try {
-            setLoadingSchema(true);
-            const { schemaData, customFieldsByTable } = await getSchemaInfoWithCustomFields(client, 'rb');
-            setCustomFields(customFieldsByTable);
-            setSchema(schemaData ?? []);
-            setOrderedColumnNames((schemaData ?? []).flatMap((table) => table.columns
+            setOrderedColumnNames((schemaData.schema ?? []).flatMap((table) => table.columns
                 .map((c) => `${table.name}.${c.field}`)
                 .sort((a, b) => {
                 const aIsId = a.endsWith('.id') ||
@@ -457,11 +446,9 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                 return 0;
             })));
             if (initialTableName) {
-                await loadTable(schemaData);
+                await loadTable(schemaData.schema);
             }
-            setLoadingSchema(false);
             setInitialLoad(false);
-            return schemaData;
         }
         catch (error) {
             console.error(error);
@@ -478,11 +465,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                 if (!report || report.referencedTables?.length !== 1) {
                     throw new Error('Report not found');
                 }
-                const { ast: newAst, pivot: newPivot, schema: curSchema, } = await fetchASTFromQuillReport(report, client, schema);
+                const { ast: newAst, pivot: newPivot, schema: curSchema, } = await fetchASTFromQuillReport(report, client, schemaData.schema);
                 setBaseAst({ ...newAst, where: null });
                 await fetchReportFromASTHelper({ ...newAst, where: null }, newAst.where, newPivot, curSchema, report);
-                await fetchSchema();
+                await onSchemaChange();
                 setReportInfo(report);
+                const query = await fetchSqlQuery(newAst, null, false);
+                setActiveQuery(query);
             }
             catch (err) {
                 setInitialChartLoad(false);
@@ -491,10 +480,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         loadChart();
     }, [dashboard[reportId || '']]);
     useEffect(() => {
-        if (schema.length === 0) {
-            fetchSchema();
-        }
-    }, [schema, initialTableName, reportId]);
+        onSchemaChange();
+    }, [schemaData.schema, initialTableName, reportId]);
     const updateFormData = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, topLevelBinOp = 'OR', isCondition = undefined, }) => {
         // Function to immutably update or delete nodes based on their path
         // TODO: fix the following horible code
@@ -512,7 +499,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                     ...defaultAST,
                     ...baseAst,
                     ...(!baseAst?.columns && {
-                        columns: getAllPossibleColumns(baseAst, schema).map((c) => {
+                        columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
                             const newColumn = deepCopy(defaultColumn);
                             newColumn.expr.column = c.field;
                             return newColumn;
@@ -532,7 +519,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                     ...defaultAST,
                     ...baseAst,
                     ...(!baseAst?.columns && {
-                        columns: getAllPossibleColumns(baseAst, schema).map((c) => {
+                        columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
                             const newColumn = deepCopy(defaultColumn);
                             newColumn.expr.column = c.field;
                             return newColumn;
@@ -633,7 +620,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                 ...defaultAST,
                 ...baseAst,
                 ...(!baseAst?.columns && {
-                    columns: getAllPossibleColumns(baseAst, schema).map((c) => {
+                    columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
                         const newColumn = deepCopy(defaultColumn);
                         newColumn.expr.column = c.field;
                         return newColumn;
@@ -724,7 +711,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         try {
             setErrorMessage('');
             setTableLoading(true);
-            const tableInfo = await fetchTableByQuery(activeQuery, client, processing, customFields);
+            const tableInfo = await fetchTableByQuery(activeQuery, client, processing, schemaData.customFields);
             if (tableInfo.error) {
                 throw new Error(tableInfo.error);
             }
@@ -752,75 +739,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             return;
         }
     };
-    /**
-     * @param filterTree
-     * Returns a list of filters to be displayed
-     * Replaces the functionality of renderNodes in the context of filters
-     */
-    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);
-            }
-        }
-        /**
-         * 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;
-                }
-                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 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));
-        });
+    const renderFilters = () => {
         // Render filterStack
         return (_jsx("div", { style: {
                 display: 'flex',
@@ -840,14 +759,14 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                     item.operator = 'and';
                                 }
                                 let newFormData = null;
-                                if (tree) {
-                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                if (filterTree) {
+                                    newFormData = filterTreeToAst(filterTree, client.databaseType.toLowerCase());
                                 }
                                 const newAst = deepCopy({
                                     ...defaultAST,
                                     ...baseAst,
                                     ...(!baseAst?.columns && {
-                                        columns: getAllPossibleColumns(baseAst, schema).map((c) => {
+                                        columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
                                             const newColumn = deepCopy(defaultColumn);
                                             newColumn.expr.column = c.field;
                                             return newColumn;
@@ -863,18 +782,18 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                 fetchSqlQuery(newAst, newFormData);
                             } }) }, index));
                 }
-                else {
-                    return (_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, FilterTagComponent: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: fieldValuesMap, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (filter) => {
+                else if (item.value) {
+                    return (_jsx(FilterPopoverWrapper, { schema: schemaData.schema.find((s) => s.name === currentTable || s.displayName === currentTable) ?? schemaData.schema[0], filter: item.value, filterLabel: item.value ? filterSentence(item.value) : '', index: index, FilterTagComponent: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: globalUniqueValues, priorFilters: filterStack.slice(0, index > 0 ? index - 1 : 0), columns: columns, client: client, customFields: schemaData.customFields, baseAst: baseAst, endpoint: QUILL_SERVER, 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());
+                            if (filterTree) {
+                                newFormData = filterTreeToAst(filterTree, client.databaseType.toLowerCase());
                             }
                             const newAst = deepCopy({
                                 ...defaultAST,
                                 ...baseAst,
                                 ...(!baseAst?.columns && {
-                                    columns: getAllPossibleColumns(baseAst, schema).map((c) => {
+                                    columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
                                         const newColumn = deepCopy(defaultColumn);
                                         newColumn.expr.column = c.field;
                                         return newColumn;
@@ -889,41 +808,46 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                             setFormData(newFormData);
                             fetchSqlQuery(newAst, newFormData);
                         }, handleFilterDelete: (i) => {
-                            if (i > 0) {
-                                filterStack.splice(i - 1, 2);
-                            }
-                            else {
-                                if (filterStack.length > 1) {
-                                    filterStack.splice(i, 2);
+                            if (!removingFilter) {
+                                setRemovingFilter(true);
+                                const newStack = filterStack;
+                                if (i > 0) {
+                                    newStack.splice(i - 1, 2);
                                 }
                                 else {
-                                    filterStack.splice(i, 1);
+                                    if (filterStack.length > 1) {
+                                        newStack.splice(i, 2);
+                                    }
+                                    else {
+                                        newStack.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(baseAst, schema).map((c) => {
-                                        const newColumn = deepCopy(defaultColumn);
-                                        newColumn.expr.column = c.field;
-                                        return newColumn;
+                                const tree = filterStackToFilterTree(newStack);
+                                let newFormData = null;
+                                if (tree) {
+                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                }
+                                const newAst = deepCopy({
+                                    ...defaultAST,
+                                    ...baseAst,
+                                    ...(!baseAst?.columns && {
+                                        columns: getAllPossibleColumns(baseAst, schemaData.schema).map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.field;
+                                            return newColumn;
+                                        }),
                                     }),
-                                }),
-                                ...(!baseAst?.from && {
-                                    from: [{ ...defaultTable, table: initialTableName }],
-                                }),
-                                where: newFormData,
-                            });
-                            setBaseAst(newAst);
-                            setFormData(newFormData);
-                            fetchSqlQuery(newAst, newFormData);
-                        } }, 'filter' + index));
+                                    ...(!baseAst?.from && {
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                    }),
+                                    where: newFormData,
+                                });
+                                setBaseAst(newAst);
+                                setFormData(newFormData);
+                                fetchSqlQuery(newAst, newFormData);
+                                setRemovingFilter(false);
+                            }
+                        } }, `filter_${index}_${item.value ? filterSentence(item.value) : ''}`));
                 }
             }) }));
     };
@@ -955,7 +879,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         let reportBuilderInfo = undefined;
         try {
             setLoading(true);
-            reportBuilderInfo = await fetchReportBuilderDataFromAST(baseAst, curFormData, curSchema ?? schema, client, curPivot ?? pivot, formData, currentTable, { uniqueStrings: uniqueValues, dateRanges: dateRanges ?? {} }, previousReport ?? reportInfo ?? undefined, customFields);
+            reportBuilderInfo = await fetchReportBuilderDataFromAST(baseAst, curFormData, curSchema ?? schemaData.schema, client, curPivot ?? pivot, formData, currentTable, { uniqueStrings: uniqueValues, dateRanges: dateRanges ?? {} }, previousReport ?? reportInfo ?? undefined, schemaData.customFields);
             if (reportBuilderInfo.error) {
                 throw new Error(reportBuilderInfo.error);
             }
@@ -1010,7 +934,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
         }
         try {
             setLoading(true);
-            astInfo = await fetchAndProcessASTFromPrompt(prompt, schema, client, pivot, activeQuery);
+            astInfo = await fetchAndProcessASTFromPrompt(prompt, schemaData.schema, client, pivot, activeQuery);
             if (astInfo.error) {
                 throw new Error(astInfo.error);
             }
@@ -1022,10 +946,16 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
             }
             return;
         }
+        // parse the whereAst first
+        const filterTree = astToFilterTree(astInfo.whereAST, client.databaseType?.toLowerCase());
+        const cleanAst = filterTree
+            ? filterTreeToAst(filterTree, client.databaseType?.toLowerCase())
+            : null;
+        setFormData(cleanAst);
+        astInfo.ast.where = cleanAst;
         setBaseAst(astInfo.ast);
-        setFormData(astInfo.whereAst);
-        fetchSqlQuery(astInfo.ast, astInfo.whereAst, false);
-        await fetchReportFromASTHelper(astInfo.ast, astInfo.whereAST, astInfo.pivot);
+        fetchSqlQuery(astInfo.ast, cleanAst, false);
+        await fetchReportFromASTHelper(astInfo.ast, cleanAst, astInfo.pivot);
     };
     const handleDeleteColumn = (name) => {
         if (!baseAst || !baseAst.columns.length || selectedColumns.length === 1) {
@@ -1136,6 +1066,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                         gap: 8,
                     }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
     }
+    // TODO: Refactor this part
     if (loading || initialChartLoad) {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -1163,12 +1094,12 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                         }, 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, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInputComponent: 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: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
+                                    }, children: renderFilters() })), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         alignItems: 'flex-start',
@@ -1209,8 +1140,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                             setActiveEditItem(null);
                                                         }, 300);
                                                     }
-                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
-                                                        s.displayName === currentTable) ?? schema[0], fieldValuesMap: uniqueValues[getTableNames(baseAst).length === 1
+                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(FilterModal, { schema: schemaData.schema.find((s) => s.name === currentTable ||
+                                                        s.displayName === currentTable) ?? schemaData.schema[0], fieldValuesMap: uniqueValues[getTableNames(baseAst).length === 1
                                                         ? getTableNames(baseAst)[0]
                                                         : initialTableName], onSubmitFilter: (filter) => {
                                                         setOpenPopover(null);
@@ -1353,7 +1284,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                     setActivePath(null);
                                                     setOpenPopover(null);
                                                 }
-                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: () => { } }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
+                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: () => { } }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
@@ -1368,11 +1299,13 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             ? askAIInputWidth
                                             : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
                                         initialLoad ||
-                                        initialChartLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initialChartLoad && (_jsxs("div", { style: {
+                                        initialChartLoad) &&
+                                        !reportId && (_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',
-                                    }, children: [_jsx("div", { style: { width: '100%' } }), !hideCopySQL && (_jsx(SecondaryButtonComponent, { onClick: () => copySQLToClipboard(), label: isCopying ? '✅ Copied' : 'Copy SQL' })), _jsx(ButtonComponent, { label: reportInfo ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
+                                        marginTop: 'auto',
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { onClick: () => copySQLToClipboard(), label: isCopying ? 'Copied' : 'Copy SQL' })), _jsx(ButtonComponent, { label: reportInfo ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
     }
     return (_jsxs("div", { style: { backgroundColor: theme?.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsxs("div", { ref: parentRef, style: {
@@ -1406,12 +1339,12 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             }, 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, 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: {
+                                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, schemaLoading: schemaData.isSchemaLoading, setPivot: setPivot, TextInputComponent: 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: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
+                                        }, children: renderFilters() })), _jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             alignItems: 'flex-start',
@@ -1453,8 +1386,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                                 setActiveEditItem(null);
                                                             }, 300);
                                                         }
-                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
-                                                            s.displayName === currentTable) ?? schema[0], fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: schemaData.schema.find((s) => s.name === currentTable ||
+                                                            s.displayName === currentTable) ?? schemaData.schema[0], fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
                                                             setOpenPopover(null);
                                                             setIsPending(false);
                                                             const item = filterToAst(filter, client.databaseType.toLowerCase());
@@ -1727,7 +1660,7 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                             setActivePath(null);
                                                             setOpenPopover(null);
                                                         }
-                                                    }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                    }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInputComponent: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
                                                             const newAst = { ...baseAst };
                                                             newAst.limit = {
                                                                 seperator: '',
@@ -1756,20 +1689,23 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                                 ? 'Ask a follow-up question...'
                                                 : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: () => {
                                                 fetchAstFromPromptHelper();
-                                            }, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: tableLoading ||
+                                            }, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && !reportId && (_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
+                                    initialChartLoad, rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, rowsPerPage: 20, columns: pivot
                                     ? pivotData?.columns || emptyPivotColumns()
                                     : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                         return {
                                             label: snakeAndCamelCaseToTitleCase(c),
                                             field: c,
                                         };
-                                    }), onPageChange: onPageChange, onSortChange: onSortChange })), _jsxs("div", { style: {
+                                    }), onPageChange: onPageChange, onSortChange: onSortChange, containerStyle: {
+                                    maxHeight: Math.max(window.innerHeight - 290, 75 + Math.min(Math.max(10, rows.length), 20) * 37),
+                                } })), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     gap: '12px',
                                     width: '100%',
+                                    marginTop: 'auto',
                                 }, children: [errorMessage ? (_jsxs("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
@@ -1779,7 +1715,8 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                                             alignItems: 'center',
                                         }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: () => {
                                                     fetchAstFromPromptHelper();
-                                                }, 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: () => {
+                                                }, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initialChartLoad && (_jsxs(_Fragment, { children: [onDiscardChanges && (_jsx(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), !hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? 'Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: () => {
+                                                    onSaveChanges && onSaveChanges();
                                                     setIsChartBuilderOpen(true);
                                                 }, disabled: !!errorMessage, label: reportId ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: reportInfo
                     ? {
@@ -1795,5 +1732,5 @@ SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectCol
                         queryString: activeQuery,
                         rows: rows,
                     }
-                    : tempReport, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: reportId ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? 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: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, isLoading: tableLoading }))] }));
+                    : tempReport, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, isAdmin: isAdminEnabled, title: reportId ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: reportId ? 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: !!reportId ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, isLoading: tableLoading, isEditingMode: true }))] }));
 }