@quillsql/react 2.11.23 → 2.11.25

package/dist/esm/ReportBuilder.js

@@ -1,13 +1,13 @@
 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, QuillTableComponent, QuillTabs, MemoizedModal, } from './components/UiComponents';
+import { DEFAULT_TAB_OPTIONS, MemoizedButton, MemoizedCheckbox, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, } 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, ThemeContext } from './Context';
-import { getTableAliases, getTableNames, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
+import { getTableAliases, getTableNames, isBoolColumnType, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
 import { ChartBuilderWithModal } from './ChartBuilder';
 import { QuillTextInput } from './components/UiComponents';
 import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, TagWrapper, EditPopover, AddFilterPopover, QuillLimitPopover, } from './components/ReportBuilder/ui';
@@ -16,8 +16,8 @@ import { convertBigQuery, convertGroupBy, convertRemoveSimpleParentheses, conver
 import { deepCopy, formatDateComparisonNode, getDateFilterInfo, getPostgresBasicType, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, isTopLevelBoolean, showNodeAsRow, tryConvertDateEquality, removeNonSelectedTableReferences, getCustomSentence, 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, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, defaultVariant, MONTH_OF_YEAR, } from './components/ReportBuilder/constants';
-import AddColumnPopover from './components/ReportBuilder/AddColumnPopover';
+import { DATE_FMT, DAY_OF_WEEK, defaultAST, defaultBoolComparison, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, defaultVariant, MONTH_OF_YEAR, } from './components/ReportBuilder/constants';
+import AddColumnModal from './components/ReportBuilder/AddColumnModal';
 import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
 import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
 import { PivotCard } from './internals/ReportBuilder/PivotList';
@@ -27,6 +27,12 @@ import { updateFirstChildWidth } from './utils/width';
 import { QuillSelectComponent } from './components/QuillSelect';
 import { QuillCard } from './components/QuillCard';
 import { convertPostgresColumn } from './SQLEditor';
+import { getData } from './utils/dataFetcher';
+import { quillFormat } from './utils/valueFormatter';
+import { getPossiblePivotFieldOptions } from './utils/pivotProcessing';
+import { getUniqueValuesByColumns } from './utils/tableProcessing';
+import { useQuill } from './hooks/useQuill';
+export const QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
 /**
  * Quill Report Builder
  *
@@ -58,7 +64,8 @@ import { convertPostgresColumn } from './SQLEditor';
  * ### Report Builder API
  * @see https://docs.quillsql.com/components/report-builder
  */
-export default function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, 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, TextComponent = MemoizedText, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, }) {
+export default function ReportBuilder({ initialTableName = '', onSubmitChartBuilder = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, TableComponent = QuillTableComponent, 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, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, initialChartId, }) {
+    const { data: initialData } = useQuill(initialChartId || '');
     const [aiPrompt, setAiPrompt] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
     const [baseAst, setBaseAst] = useState(null);
@@ -78,6 +85,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [isCopying, setIsCopying] = useState(false);
     const [dataDisplayed, setDataDisplayed] = useState(false);
     const [rows, setRows] = useState([]);
+    const [formattedRows, setFormattedRows] = useState([]);
     const [fields, setFields] = useState([]);
     const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
     const [editPopoverKey, setEditPopoverKey] = useState(null);
@@ -86,17 +94,17 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [pivotData, setPivotData] = useState(null);
     const [createdPivots, setCreatedPivots] = useState([]);
     const [recommendedPivots, setRecommendedPivots] = useState([]);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
     const [showPivotPopover, setShowPivotPopover] = useState(false);
     const [isEdittingPivot, setIsEdittingPivot] = useState(false);
     const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [initialLoad, setInitialLoad] = useState(!!initialTableName);
+    const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!initialChartId);
     const [currentTable, setCurrentTable] = useState(initialTableName || '');
     const parentRef = useRef(null);
     const askAIContainerRef = useRef(null);
     const askAILoadingContainerRef = useRef(null);
-    const [askAIInputWidth, setAskAIInputWidth] = useState(200);
-    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = useState(200);
+    const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
+    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = useState(-1);
     const [theme] = useContext(ThemeContext);
     const [pivotRowField, setPivotRowField] = useState(undefined);
     const [pivotColumnField, setPivotColumnField] = useState(undefined);
@@ -104,6 +112,17 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
     const [pivotAggregation, setPivotAggregation] = useState(undefined);
     // eslint-disable-next-line no-unused-vars
     const [client, _setClient] = useContext(ClientContext);
+    // JANK: This is temp and stupid
+    const [overrideRecommendations, setOverrideRecommendations] = useState(true);
+    useEffect(() => {
+        if (client.publicKey === '663416663aa9bc716e59a89d') {
+            setOverrideRecommendations(false);
+        }
+    }, [client.publicKey]);
+    useEffect(() => {
+        updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+        updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+    }, [dataDisplayed]);
     useEffect(() => {
         // Since the TextInput component takes a required numeric width parameter,
         // we dynamically calculate the width of this component here.
@@ -116,7 +135,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    }, [baseAst, loading]);
+    }, []);
     const enforceOrderOnColumns = (columnNames) => {
         if (pivot) {
             const rowName = pivot.rowField;
@@ -130,39 +149,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         return columnNames.sort((a, b) => selectedOrderedColumns.indexOf(a) - selectedOrderedColumns.indexOf(b));
         // return columnNames;
     };
-    /**
-     * Transforms an array of column names into an array of columnInfo objects
-     * with label, field, format, and fieldType keys.
-     */
-    const processColumnsForPivotModal = (columns) => {
-        return columns.map((col) => ({
-            label: col,
-            name: col,
-            displayName: snakeCaseToTitleCase(col),
-            field: col,
-            format: getPostgresBasicType(fields.find((f) => f.name === col))?.replace('number', 'whole_number') || 'string',
-            fieldType: schemaTables
-                .flatMap((t) => t.columns)
-                .find((c) => c.name === col)?.fieldType || 'text',
-        }));
-    };
-    /**
-     * Transforms an array of column names into an array of columnInfo objects
-     * with label, field, format, and fieldType keys.
-     */
-    const processColumnsForChartBuilder = (columns) => {
-        return columns.map((col) => ({
-            label: col,
-            name: col,
-            displayName: snakeCaseToTitleCase(col),
-            field: col,
-            format: convertPostgresColumn(fields.find((f) => f.name === col)).format ||
-                'string',
-            fieldType: schemaTables
-                .flatMap((t) => t.columns)
-                .find((c) => c.name === col)?.fieldType || 'text',
-        }));
-    };
     const clearAllState = () => {
         // We're trying to not block the main thread while resetting all the state.
         // This shouldn't be an issue since the dispatches shouldn't block, but
@@ -186,6 +172,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             setTopLevelBinaryOperator('AND');
             setEditPopoverKey(null);
             setErrorMessage('');
+            setFormattedRows([]);
             // setUniqueValues({});
             setPivot(null);
             setPivotData(null);
@@ -196,7 +183,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         if (!initialLoad && client.publicKey) {
             clearAllState();
         }
-    }, [client.publicKey]);
+    }, [client.publicKey, client.customerId]);
     useEffect(() => {
         if (activePath !== null) {
             // update the modal with the new subtree
@@ -259,7 +246,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         setErrorMessage('');
         try {
             const where = formData ? formData : ast?.where || null;
-            const response = await fetch(`https://quill-344421.uc.r.appspot.com/sqlify`, {
+            const response = await fetch(`${QUILL_SERVER}/sqlify`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -272,7 +259,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             const data = await response.json();
             setActiveQuery(data.query);
             if (fetchData) {
-                fetchUponChange(ast, formData);
+                fetchUponChange(ast, formData, data.query);
             }
         }
         catch (error) {
@@ -300,43 +287,84 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         result.push(valueField, rowField);
         return result.filter(Boolean);
     };
-    const fetchDistinctHelper = async (column, table) => {
+    const fetchDistinctStrings = async (query, table) => {
         try {
-            const query = `SELECT DISTINCT ${column} FROM ${table};`;
-            const response = await fetch(`https://quill-344421.uc.r.appspot.com/dashquery`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
+            const hostedBody = {
+                metadata: {
+                    query,
+                    task: 'query',
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    databaseType: client?.databaseType,
                 },
-                body: JSON.stringify({
-                    orgId: client.customerId,
-                    publicKey: client.publicKey,
-                    query: query,
-                }),
-            });
-            const data = await response.json();
+            };
+            const cloudBody = { query };
+            const data = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
             if (data.errorMessage) {
-                // console.error(data.errorMessage);
                 return null;
             }
-            const options = data.rows.map((r) => r[column]);
-            const newCheckboxValues = options.reduce((obj, col) => {
-                obj[col] = false;
-                return obj;
-            }, {});
-            return { table, column, values: newCheckboxValues };
+            const results = data.rows.map((columnInfo) => {
+                const column = columnInfo.field;
+                if (!columnInfo.string_values) {
+                    return { table, column, values: {} };
+                }
+                const values = columnInfo.string_values.reduce((result, value) => {
+                    result[value] = false;
+                    return result;
+                }, {});
+                return { table, column, values };
+            });
+            return results;
         }
         catch (e) {
             console.error(e);
             return null;
         }
     };
+    useEffect(() => {
+        const loadChart = async () => {
+            if (!initialData || initialData.referencedTables.length !== 1) {
+                return;
+            }
+            const initialRows = await handleAsk(initialData.queryString);
+            if (initialData.pivot) {
+                // @ts-ignore
+                setPivotRowField(initialData.pivot.rowField);
+                // @ts-ignore
+                setPivotAggregation(initialData.pivot.aggregationType);
+                // @ts-ignore
+                setPivotColumnField(initialData.pivot.columnField);
+                // @ts-ignore
+                setPivotValueField(initialData.pivot.valueField);
+                setPivot(initialData.pivot);
+                const pivotedData = generatePivotTable(
+                //@ts-ignore
+                initialData.pivot, initialRows, [null, null, null], false);
+                setPivotData(pivotedData || []);
+            }
+        };
+        if (initialData && initialData.referencedTables.length === 1) {
+            loadChart();
+        }
+    }, [initialData]);
     useEffect(() => {
         const loadTable = async (tables) => {
             if (!tables)
                 return;
             setLoading(true);
-            await getDistinctValues(initialTableName, tables);
+            const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === initialTableName);
+            if (tableInfo) {
+                const stringColumns = tableInfo.columns.filter((column) => {
+                    return isTextColumnType(column.fieldType);
+                });
+                const stringNames = stringColumns.map((column) => column.name);
+                const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${initialTableName}`, [], client);
+                const joinedUniqueValues = deepCopy(uniqueValues);
+                joinedUniqueValues[initialTableName] = newUniqueValues;
+                if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
+                    setUniqueValues(joinedUniqueValues);
+                }
+            }
             const columnsForTable = tables
                 .find((t) => t.name === initialTableName)
                 ?.columns.map((c) => c.name)
@@ -397,7 +425,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         return -1;
                     return 0;
                 })));
-                if (initialTableName && initialLoad) {
+                if (initialTableName && initialLoad && !initialChartId) {
                     await loadTable(tables);
                 }
                 setLoadingSchema(false);
@@ -410,7 +438,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         if (schemaTables.length === 0) {
             fetchSchema();
         }
-    }, [schemaTables, initialTableName]);
+    }, [schemaTables, initialTableName, initialLoad]);
     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
@@ -840,6 +868,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = deepCopy(defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -899,7 +932,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         },
                                     ]));
                                 } })), _jsx(SelectComponent, { value: intervalType, onChange: (event) => {
-                                    if (intervalPaths.length === 1) {
+                                    if (intervalPaths.length === 1 &&
+                                        dateFilterType !== 'in the previous') {
                                         handleChangeText([
                                             {
                                                 value: intervalCount !== null
@@ -911,7 +945,14 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         return;
                                     }
                                     let newSubtree;
-                                    if (dateFilterType === 'equals') {
+                                    if (dateFilterType === 'in the previous') {
+                                        newSubtree = generatePreviousPeriodPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${event.target.value}`,
+                                            currentPeriod: event.target.value,
+                                        });
+                                    }
+                                    else if (dateFilterType === 'equals') {
                                         newSubtree = generateEqualsPostgres({
                                             dateField: dateColumn,
                                             currentPeriod: event.target.value,
@@ -925,14 +966,23 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         });
                                     }
                                     handleReplaceSubtree(keyPrefix, newSubtree);
-                                }, options: [
-                                    { label: `year${isPlural}`, value: 'year' },
-                                    { label: `quarter${isPlural}`, value: 'quarter' },
-                                    { label: `month${isPlural}`, value: 'month' },
-                                    { label: `week${isPlural}`, value: 'week' },
-                                    { label: `day${isPlural}`, value: 'day' },
-                                    { label: `hour${isPlural}`, value: 'hour' },
-                                ], width: 200 }), dateFilterType === 'equals' && (_jsx(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
+                                }, options: dateFilterType === 'in the previous' ||
+                                    dateFilterType === 'in the last'
+                                    ? [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ]
+                                    : [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `quarter${isPlural}`, value: 'quarter' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ], width: 200 }), dateFilterType === 'equals' && (_jsx(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
                                     handleChangeText([
                                         {
                                             value: e.target.value,
@@ -964,6 +1014,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = deepCopy(defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -978,7 +1033,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                     { label: 'equals', value: 'EQUALS' },
                                     { label: 'is not null', value: 'IS NOT' },
                                     { label: 'is null', value: 'IS' },
-                                    // { label: 'equals', value: 'equals' },
                                 ], width: 200 }), _jsx(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
                                     handleChange([
                                         {
@@ -1020,6 +1074,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = deepCopy(defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1074,6 +1133,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = deepCopy(defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1138,6 +1202,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                         newSubtree.left.column = event.target.value;
                                         handleReplaceSubtree(keyPrefix, newSubtree);
                                     }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
                                     else {
                                         const newSubtree = deepCopy(defaultEntry);
                                         newSubtree.left.args.value[0].column = event.target.value;
@@ -1222,8 +1291,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                 },
                                 { label: 'in the current', value: 'IN_THE_CURRENT' },
                                 { label: 'equals', value: 'equals' },
-                                { label: 'is not null', value: 'IS NOT' },
-                                { label: 'is null', value: 'IS' },
                             ]
                             : []),
                     ];
@@ -1250,6 +1317,11 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                                                 newSubtree.left.column = event.target.value;
                                                 handleReplaceSubtree(keyPrefix, newSubtree);
                                             }
+                                            else if (isBoolColumnType(columnType)) {
+                                                const newSubtree = deepCopy(defaultBoolComparison);
+                                                newSubtree.left.column = event.target.value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
                                             else {
                                                 const newSubtree = deepCopy(defaultEntry);
                                                 newSubtree.left.args.value[0].column = event.target.value;
@@ -1372,6 +1444,22 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                             },
                         ]);
                     } }));
+            case 'bool':
+                return (_jsx(SelectComponent, { value: node.value.toString(), onChange: (event) => {
+                        let formatted = true;
+                        if (event.target.value === 'false') {
+                            formatted = false;
+                        }
+                        handleChange([
+                            {
+                                value: formatted,
+                                path: keyPrefix + 'value',
+                            },
+                        ]);
+                    }, options: [
+                        { label: 'is true', value: 'true' },
+                        { label: 'is false', value: 'false' },
+                    ], width: 200 }));
             case 'function':
                 if (!node.args) {
                     return _jsx("label", {});
@@ -1435,7 +1523,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             'NOT IN': 'is not',
             'NOT LIKE': 'is not exactly',
             '!=': 'is not exactly',
-            '=': 'is exactly',
+            '=': 'is',
             '<': 'is less than',
             '>': 'is greater than',
             '<=': 'is less than or equal to',
@@ -1447,7 +1535,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         };
         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, renderNode: renderNode, children: dateComparisonPartialMatch ??
+                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 &&
@@ -1472,6 +1560,8 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 return node.value;
             case 'null':
                 return 'null';
+            case 'bool':
+                return node.value.toString();
             case 'interval':
                 if (node.unit) {
                     // eg. `INTERVAL '90' DAY` -> "90 days"
@@ -1583,39 +1673,61 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         justifyContent: 'end',
                     }, children: _jsx(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
     };
-    const fetchUponChange = async (baseAst, newFormData) => {
+    const fetchUponChange = async (baseAst, newFormData, query) => {
         // if newFormData is null still use it
         const curFormData = newFormData !== undefined ? newFormData : formData;
         if ((curFormData || baseAst) && !loading) {
             try {
                 setLoading(true);
-                const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
+                const hostedBody = {
+                    metadata: {
+                        clientId: client.publicKey,
                         ast: { ...baseAst, where: curFormData },
                         publicKey: client.publicKey,
                         orgId: client.customerId,
-                    }),
-                });
+                        task: 'patterns',
+                    },
+                };
+                const cloudBody = {};
+                const data2 = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
                 const tables = getTableNames(baseAst);
                 const table = tables.length >= 1 ? tables[0] : initialTableName;
                 if (table !== currentTable) {
-                    await getDistinctValues(table);
+                    const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
+                    if (tableInfo) {
+                        const stringColumns = tableInfo.columns.filter((column) => {
+                            return isTextColumnType(column.fieldType);
+                        });
+                        const stringNames = stringColumns.map((column) => column.name);
+                        const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                        const joinedUniqueValues = deepCopy(uniqueValues);
+                        joinedUniqueValues[table] = newUniqueValues;
+                        if (hashCode(uniqueValues) !== hashCode(joinedUniqueValues)) {
+                            setUniqueValues(joinedUniqueValues);
+                        }
+                    }
                     setCurrentTable(table);
                 }
-                const data2 = await res2.json();
                 if (data2.rows && data2.rows.length) {
-                    const tables = getTableNames(baseAst);
                     if (pivot) {
                         // check if any of the pivot fields aren't in the data2.fields array
                         if (!isValidPivot(data2.fields)) {
+                            const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                             setPivot(null);
                             setPivotData(null);
                             setRows(data2.rows);
-                            setFields(data2.fields);
+                            setFields(processedFields);
+                            setFormattedRows(data2.rows.map((row) => {
+                                return processedFields.reduce((formattedRow, column) => {
+                                    // Apply the format function to each field in the row
+                                    const formattedValue = quillFormat({
+                                        value: row[column.field],
+                                        format: column.format,
+                                    });
+                                    formattedRow[column.field] = formattedValue;
+                                    return formattedRow;
+                                }, {});
+                            }));
                             return;
                         }
                         // Do all of this to make sure we have the right unique columns when applying a pivot
@@ -1627,13 +1739,37 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                         uniqueFormatted[pivot.columnField] = uniqueRecords;
                         const pivotedData = generatePivotTable(pivot, data2.rows, [null, null, null], false);
                         console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
+                        const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                         setPivotData(pivotedData || []);
                         setRows(data2.rows);
-                        setFields(data2.fields);
+                        setFields(processedFields);
+                        setFormattedRows(data2.rows.map((row) => {
+                            return processedFields.reduce((formattedRow, column) => {
+                                // Apply the format function to each field in the row
+                                const formattedValue = quillFormat({
+                                    value: row[column.field],
+                                    format: column.format,
+                                });
+                                formattedRow[column.field] = formattedValue;
+                                return formattedRow;
+                            }, {});
+                        }));
                     }
                     else {
+                        const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                         setRows(data2.rows);
-                        setFields(data2.fields);
+                        setFields(processedFields);
+                        setFormattedRows(data2.rows.map((row) => {
+                            return processedFields.reduce((formattedRow, column) => {
+                                // Apply the format function to each field in the row
+                                const formattedValue = quillFormat({
+                                    value: row[column.field],
+                                    format: column.format,
+                                });
+                                formattedRow[column.field] = formattedValue;
+                                return formattedRow;
+                            }, {});
+                        }));
                         if (data2.errorMessage) {
                             setErrorMessage(`Error: ${data2.errorMessage}`);
                         }
@@ -1642,6 +1778,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 else {
                     setRows([]);
                     setFields([]);
+                    setFormattedRows([]);
                     setPivotData(null);
                 }
             }
@@ -1721,6 +1858,14 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                     return x ?? 0.0;
                 };
             }
+            else if (formatType === 'boolean') {
+                columnFormatters[field.name] = (x) => {
+                    if (x) {
+                        return 'True';
+                    }
+                    return 'False';
+                };
+            }
             else {
                 columnFormatters[field.name] = (x) => x;
             }
@@ -1751,39 +1896,14 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         }
         return false;
     };
-    const getDistinctValues = async (table, overrideSchema) => {
-        const schemaInfo = overrideSchema || schemaTables;
-        const tableInfo = schemaInfo.find((tableInfo) => tableInfo.name === table);
-        if (tableInfo) {
-            const pendingFetches = [];
-            for (let column of tableInfo.columns) {
-                if (!isTextColumnType(column.fieldType))
-                    continue;
-                const fetchPromise = fetchDistinctHelper(column.name, tableInfo.displayName);
-                pendingFetches.push(fetchPromise);
-            }
-            const newUniqueValues = {};
-            const resolvedPromises = await Promise.all(pendingFetches);
-            for (const resolvedData of resolvedPromises) {
-                if (resolvedData) {
-                    const { table, column, values } = resolvedData;
-                    if (!newUniqueValues[table]) {
-                        newUniqueValues[table] = {};
-                    }
-                    newUniqueValues[table][column] = values;
-                }
-            }
-            if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
-                setUniqueValues(newUniqueValues);
-            }
-        }
-    };
     const handleAsk = async (overridePrompt = '') => {
         if (!aiPrompt && !overridePrompt) {
             return;
         }
         try {
+            let errored = false;
             setLoading(true);
+            setErrorMessage('');
             let res, data, ast;
             let numRetries = 0;
             const MAX_RETRIES = 3;
@@ -1794,7 +1914,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 if (numRetries === MAX_RETRIES)
                     break;
                 if (!activeQuery || (ast && (isTableJoin || isSubquery(ast?.where)))) {
-                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic', {
+                    res = await fetch(`${QUILL_SERVER}/magic`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
@@ -1804,7 +1924,7 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                     });
                 }
                 else {
-                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic/edit', {
+                    res = await fetch(`${QUILL_SERVER}/magic/edit`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({
@@ -1844,15 +1964,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 const table = getTableNames(newAst)[0] ?? initialTableName;
                 const tableAlias = getTableAliases(newAst)[0] ?? initialTableName;
                 newAst = removeNonSelectedTableReferences(newAst, tableAlias ?? table, getAllPossibleColumns().map((col) => col.name));
-                // newAst = convertDateComparison(newAst); // TODO
-                if (table !== currentTable) {
-                    await getDistinctValues(table);
-                    setCurrentTable(table);
-                }
-                setPivotRowField(groupByPivot?.rowField);
-                setPivotColumnField(groupByPivot?.columnField);
-                setPivotValueField(groupByPivot?.valueField);
-                setPivotAggregation(groupByPivot?.aggregationType);
                 setSelectedColumns(deepCopy(newAst).columns?.map((column) => {
                     if (column.expr.type === 'column_ref') {
                         return `${table}.${column.expr.column}`;
@@ -1875,21 +1986,78 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 newAst?.where ? newAst?.where?.operator : 'AND');
             }
             ast = newAst; // so we fetch data for newAst later.
-            const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    ast: ast,
+            const table = getTableNames(newAst)[0] ?? initialTableName;
+            const tableAlias = getTableAliases(newAst)[0] ?? initialTableName;
+            const hostedBody = {
+                metadata: {
+                    clientId: client.publicKey,
+                    ast,
                     publicKey: client.publicKey,
                     orgId: client.customerId,
-                }),
-            });
-            const data2 = await res2.json();
+                    task: 'patterns',
+                },
+            };
+            const cloudBody = {};
+            const data2 = await getData(client, 'patterns', 'same-origin', hostedBody, cloudBody);
+            let currentUniqueValues = uniqueValues;
+            if (table !== currentTable) {
+                const tableInfo = schemaTables.find((tableInfo) => tableInfo.name === table);
+                if (tableInfo) {
+                    const stringColumns = tableInfo.columns.filter((column) => {
+                        return isTextColumnType(column.fieldType);
+                    });
+                    const stringNames = stringColumns.map((column) => column.name);
+                    const newUniqueValues = await getUniqueValuesByColumns(stringColumns, `Select ${stringNames.join(', ')} from ${table}`, rows, client);
+                    currentUniqueValues[table] = newUniqueValues;
+                    if (hashCode(uniqueValues) !== hashCode(currentUniqueValues)) {
+                        setUniqueValues(currentUniqueValues);
+                    }
+                }
+                setCurrentTable(table);
+            }
             if (data2.rows && data2.rows.length) {
-                const tables = getTableNames(newAst);
-                if (groupByPivot) {
+                const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                let possiblePivot = true;
+                const possibleColumns = getPossiblePivotFieldOptions(processedFields, currentUniqueValues[table]);
+                if (groupByPivot &&
+                    ((groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField)) ||
+                        (groupByPivot.rowField &&
+                            !possibleColumns.rowFields.includes(groupByPivot?.rowField)) ||
+                        (groupByPivot.valueField &&
+                            !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')))) {
+                    possiblePivot = false;
+                    let errorMessageEnding = '';
+                    if (groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField || '')) {
+                        if (currentUniqueValues[table][groupByPivot?.columnField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} has more than 24 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} is not a proper column field.`;
+                        }
+                    }
+                    else if (groupByPivot.rowField &&
+                        !possibleColumns.rowFields.includes(groupByPivot?.rowField || '')) {
+                        if (currentUniqueValues[table][groupByPivot?.rowField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} has more than 36 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} is not a proper row field.`;
+                        }
+                    }
+                    else if (groupByPivot.valueField &&
+                        !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')) {
+                        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 = generatePivotTable(
                     // @ts-ignore
                     groupByPivot, data2.rows, [null, null, null], false);
@@ -1897,17 +2065,42 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                     setPivotData(pivotedData);
                     setPivot(groupByPivot);
                     setRows(data2.rows);
-                    setFields(data2.fields);
+                    setFields(processedFields);
+                    setFormattedRows(data2.rows.map((row) => {
+                        return processedFields.reduce((formattedRow, column) => {
+                            // Apply the format function to each field in the row
+                            const formattedValue = quillFormat({
+                                value: row[column.field],
+                                format: column.format,
+                            });
+                            formattedRow[column.field] = formattedValue;
+                            return formattedRow;
+                        }, {});
+                    }));
                 }
                 else {
+                    const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
                     setRows(data2.rows);
-                    setFields(data2.fields);
+                    setFields(processedFields);
+                    setFormattedRows(data2.rows.map((row) => {
+                        return processedFields.reduce((formattedRow, column) => {
+                            // Apply the format function to each field in the row
+                            const formattedValue = quillFormat({
+                                value: row[column.field],
+                                format: column.format,
+                            });
+                            formattedRow[column.field] = formattedValue;
+                            return formattedRow;
+                        }, {});
+                    }));
                 }
+                return data2.rows;
             }
             else {
                 setPivotData([]);
                 setRows([]);
                 setFields([]);
+                setFormattedRows([]);
             }
             if (data2.query) {
                 setActiveQuery(data2.query);
@@ -1918,9 +2111,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             if (data2.errorMessage) {
                 setErrorMessage(`Error: ${data2.errorMessage}`);
             }
-            else {
-                setErrorMessage('');
-            }
         }
         catch (e) {
             console.error(e);
@@ -1929,7 +2119,6 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
         finally {
             setLoading(false);
             setDataDisplayed(true);
-            setAiPrompt('');
         }
     };
     const handleDeleteColumn = (name) => {
@@ -2040,273 +2229,295 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                 flexDirection: 'row',
                 height: '100%',
                 ...containerStyle,
-            }, className: className, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                if (loadingSchema)
-                                    return;
-                                if (!openPopover) {
-                                    setOpenPopover('AddColumnPopover');
-                                }
-                            }, label: 'Select columns' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddColumnPopover', setIsOpen: (isOpen) => {
-                                if (!isOpen) {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }
-                            }, popoverTitle: "Select columns", popoverChildren: _jsx(AddColumnPopover, { onSave: () => {
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
-                                    setBaseAst(newAst);
-                                    fetchSqlQuery(newAst);
-                                }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 2.5,
-                                alignItems: 'flex-start',
-                            }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                        if (!selectedColumns ||
-                                            selectedColumns.length === 0 ||
-                                            loading) {
+            }, 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) {
-                                            const value = orderedColumnNames[0];
-                                            const [_table, column] = value.split('.');
-                                            const columnType = getColumnTypeByName(column);
-                                            if (isNumericColumnType(columnType)) {
-                                                const newSubtree = deepCopy(defaultNumericComparison);
-                                                newSubtree.left.column = column;
-                                                setActiveEditItem(newSubtree);
-                                            }
-                                            else {
-                                                const newSubtree = deepCopy(defaultEntry);
-                                                newSubtree.left.args.value[0].column = column;
-                                                setActiveEditItem(newSubtree);
-                                            }
-                                            setOpenPopover('AddFilterPopover');
-                                            setActivePath('');
-                                            setIsPending(true);
+                                            setOpenPopover('AddColumnModal');
                                         }
-                                    }, label: 'Add filter' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                    }, label: 'Select columns' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
                                             setIsPending(false);
+                                            setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
                                         }
-                                    }, popoverTitle: 'Add filter', popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
-                                            if (isNodeEmptyCollection(activeEditItem)) {
-                                                setIsPending(false);
-                                                setActivePath(null);
-                                                setOpenPopover(null);
-                                                clearCheckboxes();
-                                                setTimeout(() => {
-                                                    setActiveEditItem(null);
-                                                }, 300);
-                                            }
-                                            else {
-                                                setIsPending(false);
-                                                handleInsertion(activeEditItem, 'AND', false);
-                                                setActivePath(null);
-                                                setOpenPopover(null);
-                                                clearCheckboxes();
-                                                setTimeout(() => {
-                                                    setActiveEditItem(null);
-                                                }, 300);
-                                            }
-                                        }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
-                                    false && ( // temp removed the AddConditionPopover
-                                _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                    }, popoverTitle: "Select columns", popoverChildren: _jsx(AddColumnModal, { onSave: () => {
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (newAst) => {
+                                            setBaseAst(newAst);
+                                            fetchSqlQuery(newAst);
+                                        }, 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: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
                                                 if (!openPopover) {
-                                                    setActiveEditItem(deepCopy(defaultEntry));
-                                                    setOpenPopover('AddConditionPopover');
+                                                    const value = orderedColumnNames[0];
+                                                    const [_table, column] = value.split('.');
+                                                    const columnType = getColumnTypeByName(column);
+                                                    if (isNumericColumnType(columnType)) {
+                                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                                        newSubtree.left.column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    else {
+                                                        const newSubtree = deepCopy(defaultEntry);
+                                                        newSubtree.left.args.value[0].column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    setOpenPopover('AddFilterPopover');
                                                     setActivePath('');
                                                     setIsPending(true);
                                                 }
-                                            }, label: "Add condition" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
-                                                if (!isOpen) {
-                                                    setIsPending(false);
-                                                    setTimeout(() => {
-                                                        setActiveEditItem(null);
-                                                    }, 300);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }
-                                            }, popoverTitle: "Add condition", popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
-                                                    if (isNodeEmptyCollection(activeEditItem)) {
+                                            }, label: 'Add filter' }), _jsx("div", { style: {
+                                                position: 'relative',
+                                                ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                            }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                    if (!isOpen) {
                                                         setIsPending(false);
-                                                        setTimeout(() => {
-                                                            setActiveEditItem(null);
-                                                        }, 300);
                                                         setActivePath(null);
                                                         setOpenPopover(null);
-                                                        clearCheckboxes();
-                                                    }
-                                                    else {
-                                                        setIsPending(false);
-                                                        handleInsertion(activeEditItem, topLevelBinaryOperator, true);
                                                         setTimeout(() => {
+                                                            clearCheckboxes();
                                                             setActiveEditItem(null);
                                                         }, 300);
-                                                        setActivePath(null);
-                                                        setOpenPopover(null);
-                                                        clearCheckboxes();
                                                     }
-                                                } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _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, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                                setPivot(null);
-                                setPivotData(null);
-                            }, 
-                            // TODOs
-                            selectPivot: (pivot) => {
-                                if (!pivot)
-                                    return;
-                                const newAst = { ...baseAst };
-                                newAst.orderby = null;
-                                setBaseAst(newAst); // trigger refetch
-                                setPivot(pivot);
-                                const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
-                                setPivotData(pivotedData || []);
-                            }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], recommendPivotCount: 3, SecondaryButtonComponent: SecondaryButtonComponent }), pivot && (_jsx(PivotCard, { pivotTable: {
-                                pivot: pivot,
-                                rows: pivotData?.rows || [],
-                                columns: pivotData?.columns || [],
-                            }, theme: theme, index: 0, onSelectPivot: () => {
-                                setIsEdittingPivot(true);
-                                setShowPivotPopover(true);
-                                setPivotRowField(pivot?.rowField);
-                                setPivotColumnField(pivot?.columnField);
-                                setPivotValueField(pivot?.valueField);
-                                setPivotAggregation(pivot?.aggregationType);
-                                setPivotPopUpTitle('Edit Pivot');
-                            }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
-                                setPivot(null);
-                                setPivotData(null);
-                                setBaseAst(deepCopy(baseAst)); // trigger refetch
-                            }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent })), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Sort" }), _jsx("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && (_jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: _jsx(SortSentence, { sortData: {
-                                    type: pivot.sortDirection,
-                                    expr: { type: 'column_ref', column: pivot.rowField },
-                                }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                    setPivot({ ...pivot, sort: false });
-                                    setBaseAst(deepCopy(baseAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(baseAst);
-                                    }
-                                }, onSave: (column, direction) => {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    setOpenPopover(null);
-                                    setBaseAst(deepCopy(baseAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(baseAst);
-                                    }
-                                }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setOpenPopover(null);
-                                    if (column === '')
-                                        return;
-                                    const newAst = { ...baseAst };
-                                    newAst.orderby[id] = {
-                                        expr: {
-                                            type: 'column_ref',
-                                            table: null,
-                                            column: column,
-                                        },
-                                        type: direction,
-                                    };
-                                    // look through the columns
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                    setBaseAst(deepCopy(newAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(newAst);
-                                    }
-                                }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                    const newAst = { ...baseAst };
-                                    newAst.orderby.splice(id, 1);
-                                    setBaseAst(deepCopy(newAst));
-                                    if (!pivot) {
-                                        fetchSqlQuery(newAst);
-                                    }
-                                }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
-                                if (!selectedColumns || selectedColumns.length === 0) {
-                                    return;
-                                }
-                                if (!openPopover) {
-                                    setOpenPopover('AddSortPopover');
-                                }
-                            }, label: "Add sort" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                                if (!isOpen) {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }
-                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Limit" }), _jsx("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? (_jsx("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 8,
-                                marginBottom: 12,
-                            }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
-                                    const newAst = { ...baseAst };
-                                    newAst.limit = null;
-                                    setBaseAst(deepCopy(newAst));
-                                    fetchSqlQuery(newAst);
-                                }, onSave: (limit) => {
-                                    const newAst = { ...baseAst };
-                                    newAst.limit = {
-                                        seperator: '',
-                                        value: [
-                                            {
-                                                type: 'number',
-                                                value: limit,
-                                            },
-                                        ],
-                                    };
-                                    setOpenPopover(null);
-                                    setBaseAst(deepCopy(newAst));
-                                    fetchSqlQuery(newAst);
-                                }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                }, 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 &&
+                                            false && ( // temp removed the AddConditionPopover
+                                        _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                        if (!openPopover) {
+                                                            setActiveEditItem(deepCopy(defaultEntry));
+                                                            setOpenPopover('AddConditionPopover');
+                                                            setActivePath('');
+                                                            setIsPending(true);
+                                                        }
+                                                    }, label: "Add condition" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setTimeout(() => {
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add condition", popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
+                                                            if (isNodeEmptyCollection(activeEditItem)) {
+                                                                setIsPending(false);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                setActivePath(null);
+                                                                setOpenPopover(null);
+                                                            }
+                                                            else {
+                                                                setIsPending(false);
+                                                                handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                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, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                        setPivot(null);
+                                        setPivotData(null);
+                                    }, 
+                                    // TODOs
+                                    selectPivot: (pivot) => {
+                                        if (!pivot)
+                                            return;
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby = null;
+                                        setBaseAst(newAst); // trigger refetch
+                                        setPivot(pivot);
+                                        const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                                        setPivotData(pivotedData || []);
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
+                                        pivot: pivot,
+                                        rows: pivotData?.rows || [],
+                                        columns: pivotData?.columns || [],
+                                    }, theme: theme, index: 0, onSelectPivot: () => {
+                                        setIsEdittingPivot(true);
+                                        setShowPivotPopover(true);
+                                        setPivotRowField(pivot?.rowField);
+                                        setPivotColumnField(pivot?.columnField);
+                                        setPivotValueField(pivot?.valueField);
+                                        setPivotAggregation(pivot?.aggregationType);
+                                        setPivotPopUpTitle('Edit pivot');
+                                    }, selectedPivotIndex: -1, onEditPivot: () => { }, CardComponent: CardComponent, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, showEdit: false, onClose: () => {
+                                        setPivot(null);
+                                        setPivotData(null);
+                                        setBaseAst(deepCopy(baseAst)); // trigger refetch
+                                    }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, 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: () => {
+                                            setPivot({ ...pivot, sort: false });
+                                            setBaseAst(deepCopy(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, onSave: (column, direction) => {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setOpenPopover(null);
+                                            if (column === '')
+                                                return;
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby[id] = {
+                                                expr: {
+                                                    type: 'column_ref',
+                                                    table: null,
+                                                    column: column,
+                                                },
+                                                type: direction,
+                                            };
+                                            // look through the columns
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby.splice(id, 1);
+                                            setBaseAst(deepCopy(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
+                                            return;
+                                        }
                                         if (!openPopover) {
-                                            setOpenPopover('AddLimitPopover');
+                                            setOpenPopover('AddSortPopover');
                                         }
-                                    }, label: 'Add limit' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                    }, label: "Add sort" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
                                         if (!isOpen) {
                                             setIsPending(false);
                                             setActiveEditItem(null);
                                             setActivePath(null);
                                             setOpenPopover(null);
                                         }
-                                    }, popoverTitle: "Limit", popoverChildren: _jsx(TextInputComponent, { id: "loading_input_limit", value: '0', width: 120, onChange: () => { } }) })] }))] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsxs("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
+                                    }, 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: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = null;
+                                            setBaseAst(deepCopy(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, onSave: (limit) => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = {
+                                                seperator: '',
+                                                value: [
+                                                    {
+                                                        type: 'number',
+                                                        value: limit,
+                                                    },
+                                                ],
+                                            };
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
+                                                if (!openPopover) {
+                                                    setOpenPopover('AddLimitPopover');
+                                                }
+                                            }, label: 'Add limit' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    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) => {
                                 event.preventDefault();
                             }, style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: 12,
-                                padding: 1,
-                            }, children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
-                                        ? 'Ask a follow-up question...'
-                                        : 'Ask a question...', width: askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && (_jsxs("div", { style: {
+                                visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                    ? 'hidden'
+                                    : 'visible',
+                            }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: baseAst || initialLoad
+                                            ? 'Ask a follow-up question...'
+                                            : 'Ask a question...', width: askAIInputWidth !== -1
+                                            ? askAIInputWidth
+                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         gap: '12px',
@@ -2319,341 +2530,405 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
             overflowY: 'auto',
             boxSizing: 'border-box',
             ...containerStyle,
-        }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
-                            if (loadingSchema)
-                                return;
-                            if (!orderedColumnNames) {
-                                return;
-                            }
-                            if (!openPopover) {
-                                setOpenPopover('AddColumnPopover');
-                            }
-                        }, label: "Select columns" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddColumnPopover', setIsOpen: (isOpen) => {
-                            if (!isOpen) {
-                                // delay onClose callback so onClick no-ops
-                                setTimeout(() => {
-                                    setIsPending(false);
-                                    setActiveEditItem(null);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                }, 100);
-                            }
-                        }, popoverTitle: "Select columns", popoverChildren: _jsx(AddColumnPopover, { onSave: () => {
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }, 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 }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2.5,
-                            alignItems: 'flex-start',
-                        }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0 || loading) {
+        }, 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;
                                     }
                                     if (!openPopover) {
-                                        const value = orderedColumnNames[0];
-                                        const [_table, column] = value.split('.');
-                                        const columnType = getColumnTypeByName(column);
-                                        if (isNumericColumnType(columnType)) {
-                                            const newSubtree = deepCopy(defaultNumericComparison);
-                                            newSubtree.left.column = column;
-                                            setActiveEditItem(newSubtree);
-                                        }
-                                        else {
-                                            const newSubtree = deepCopy(defaultEntry);
-                                            newSubtree.left.args.value[0].column = column;
-                                            setActiveEditItem(newSubtree);
-                                        }
-                                        setOpenPopover('AddFilterPopover');
-                                        setActivePath('');
-                                        setIsPending(true);
+                                        setOpenPopover('AddColumnModal');
                                     }
-                                }, label: 'Add filter' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                }, label: "Select columns" }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
                                     if (!isOpen) {
                                         // delay onClose callback so onClick no-ops
                                         setTimeout(() => {
                                             setIsPending(false);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            clearCheckboxes();
                                             setActiveEditItem(null);
-                                        }, 200);
-                                    }
-                                }, popoverTitle: "Add filter", popoverChildren: _jsx(AddFilterPopover, { onSave: () => {
-                                        if (isNodeEmptyCollection(activeEditItem)) {
-                                            setIsPending(false);
-                                            setActivePath(null);
-                                            setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
-                                        }
-                                        else {
-                                            setIsPending(false);
-                                            handleInsertion(activeEditItem, 'AND', false);
                                             setActivePath(null);
                                             setOpenPopover(null);
-                                            clearCheckboxes();
-                                            setTimeout(() => {
-                                                setActiveEditItem(null);
-                                            }, 300);
-                                        }
-                                    }, Button: ButtonComponent, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
-                                false && ( // temp removed the AddConditionPopover
-                            _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                        }, 100);
+                                    }
+                                }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
+                                        setActiveEditItem(null);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                    }, 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: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'flex-start',
+                                }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            if (!selectedColumns ||
+                                                selectedColumns.length === 0 ||
+                                                loading) {
+                                                return;
+                                            }
                                             if (!openPopover) {
-                                                setActiveEditItem(deepCopy(defaultEntry));
-                                                setOpenPopover('AddConditionPopover');
+                                                const value = orderedColumnNames[0];
+                                                const [_table, column] = value.split('.');
+                                                const columnType = getColumnTypeByName(column);
+                                                if (isNumericColumnType(columnType)) {
+                                                    const newSubtree = deepCopy(defaultNumericComparison);
+                                                    newSubtree.left.column = column;
+                                                    setActiveEditItem(newSubtree);
+                                                }
+                                                else {
+                                                    const newSubtree = deepCopy(defaultEntry);
+                                                    newSubtree.left.args.value[0].column = column;
+                                                    setActiveEditItem(newSubtree);
+                                                }
+                                                setOpenPopover('AddFilterPopover');
                                                 setActivePath('');
                                                 setIsPending(true);
                                             }
-                                        }, label: 'Add condition' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
-                                            if (!isOpen) {
-                                                // delay onClose callback so onClick no-ops
-                                                setTimeout(() => {
-                                                    setIsPending(false);
-                                                    setActiveEditItem(null);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }, 200);
-                                            }
-                                        }, popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
-                                                if (isNodeEmptyCollection(activeEditItem)) {
-                                                    setIsPending(false);
-                                                    setTimeout(() => {
-                                                        setActiveEditItem(null);
-                                                    }, 300);
-                                                    setActivePath(null);
+                                        }, label: 'Add filter' }), _jsx("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    // delay onClose callback so onClick no-ops
                                                     setOpenPopover(null);
-                                                    clearCheckboxes();
-                                                }
-                                                else {
-                                                    setIsPending(false);
-                                                    handleInsertion(activeEditItem, topLevelBinaryOperator, true);
                                                     setTimeout(() => {
+                                                        setIsPending(false);
+                                                        setActivePath(null);
+                                                        clearCheckboxes();
                                                         setActiveEditItem(null);
                                                     }, 300);
-                                                    setActivePath(null);
-                                                    setOpenPopover(null);
-                                                    clearCheckboxes();
                                                 }
-                                            } }) })] }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), _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, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processColumnsForPivotModal(Object.keys(rows[0] ?? {})), triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
-                            setPivot(null);
-                            setPivotData(null);
-                        }, selectPivot: (pivot) => {
-                            if (!pivot)
-                                return;
-                            const newAst = { ...baseAst };
-                            newAst.orderby = null;
-                            if (pivot.rowFieldType === 'date') {
-                                pivot['sort'] = true;
-                                pivot['sortDirection'] = 'ASC';
-                            }
-                            setBaseAst(newAst); // trigger refetch
-                            setPivot(pivot);
-                            const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
-                            setPivotData(pivotedData || []);
-                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], recommendPivotCount: 3 }), pivot && (_jsx(PivotCard, { pivotTable: {
-                            pivot: pivot,
-                            rows: pivotData?.rows || [],
-                            columns: pivotData?.columns || [],
-                        }, theme: theme, index: 0, onSelectPivot: () => {
-                            setIsEdittingPivot(true);
-                            setShowPivotPopover(true);
-                            setPivotRowField(pivot?.rowField);
-                            setPivotColumnField(pivot?.columnField);
-                            setPivotValueField(pivot?.valueField);
-                            setPivotAggregation(pivot?.aggregationType);
-                            setPivotPopUpTitle('Edit Pivot');
-                        }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
-                            setPivot(null);
-                            setPivotData(null);
-                            setBaseAst(deepCopy(baseAst));
-                        }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent })), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Sort" }), _jsx("div", { style: { height: 4, width: '100%' } }), pivot && pivot.sort && (_jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: _jsx(SortSentence, { sortData: {
-                                type: pivot.sortDirection,
-                                expr: { type: 'column_ref', column: pivot.rowField },
-                            }, columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: false });
-                                    const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    return;
-                                }
-                                setBaseAst(deepCopy(baseAst));
-                                fetchSqlQuery(deepCopy(baseAst));
-                            }, onSave: (column, direction) => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    const pivotedData = generatePivotTable({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    return;
-                                }
-                                setOpenPopover(null);
-                                setBaseAst(deepCopy(baseAst));
-                                fetchSqlQuery(deepCopy(baseAst));
-                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
-                            display: 'flex',
-                            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: () => {
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: false });
-                                    return;
-                                }
-                                const newAst = { ...baseAst };
-                                newAst.orderby.splice(id, 1);
-                                setBaseAst(deepCopy(newAst));
-                                fetchSqlQuery(deepCopy(newAst));
-                            }, onSave: (column, direction) => {
-                                if (pivot) {
-                                    setPivot({
-                                        ...pivot,
-                                        sort: true,
-                                        sortDirection: direction,
-                                    });
-                                    return;
-                                }
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setOpenPopover(null);
-                                if (column === '')
-                                    return;
-                                const newAst = { ...baseAst };
-                                newAst.orderby[id] = {
-                                    expr: {
-                                        type: 'column_ref',
-                                        table: null,
-                                        column: column,
-                                    },
-                                    type: direction,
-                                };
-                                // look through the columns
-                                setActivePath(null);
-                                setOpenPopover(null);
-                                setBaseAst(deepCopy(newAst));
-                                fetchSqlQuery(deepCopy(newAst));
-                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
-                            if (!selectedColumns || selectedColumns.length === 0) {
-                                return;
-                            }
-                            if (!openPopover) {
-                                setOpenPopover('AddSortPopover');
-                            }
-                        }, label: 'Add sort' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
-                            if (!isOpen) {
-                                setIsPending(false);
-                                setActiveEditItem(null);
-                                setActivePath(null);
-                                setOpenPopover(null);
-                            }
-                        }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivot ? [`.${pivot.rowField}`] : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (column, direction) => {
-                                if (column === '')
-                                    return;
-                                if (pivot) {
-                                    setPivot({ ...pivot, sort: true, sortDirection: direction });
-                                    const pivotedData = generatePivotTable({ ...pivot, sort: true, sortDirection: direction }, rows, [null, null, null], false);
-                                    setPivotData(pivotedData || []);
-                                    setActivePath(null);
-                                    setOpenPopover(null);
-                                    setBaseAst(deepCopy(baseAst));
-                                    return;
-                                }
-                                const newAst = { ...baseAst };
-                                if (!newAst.orderby)
-                                    newAst.orderby = [];
-                                newAst.orderby.push({
-                                    expr: { type: 'column_ref', column },
-                                    type: direction,
-                                });
-                                // look through the columns
-                                setActivePath(null);
-                                setOpenPopover(null);
-                                setBaseAst(deepCopy(newAst));
-                                fetchSqlQuery(deepCopy(newAst));
-                            } }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeadingComponent, { label: "Limit" }), _jsx("div", { style: { height: 4, width: '100%' } }), baseAst && baseAst.limit ? (_jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 8,
-                            marginBottom: 12,
-                        }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
-                                const newAst = { ...baseAst };
-                                newAst.limit = null;
-                                setBaseAst(deepCopy(newAst));
-                                fetchSqlQuery(deepCopy(newAst));
-                            }, onSave: (limit) => {
-                                const newAst = { ...baseAst };
-                                newAst.limit = {
-                                    seperator: '',
-                                    value: [
-                                        {
-                                            type: 'number',
-                                            value: limit,
-                                        },
-                                    ],
-                                };
-                                setOpenPopover(null);
-                                setBaseAst(deepCopy(newAst));
-                                fetchSqlQuery(deepCopy(newAst));
-                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
-                                    if (!selectedColumns || selectedColumns.length === 0) {
-                                        return;
-                                    }
-                                    if (!baseAst) {
+                                            }, 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 &&
+                                        false && ( // temp removed the AddConditionPopover
+                                    _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                    if (!openPopover) {
+                                                        setActiveEditItem(deepCopy(defaultEntry));
+                                                        setOpenPopover('AddConditionPopover');
+                                                        setActivePath('');
+                                                        setIsPending(true);
+                                                    }
+                                                }, label: 'Add condition' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                    if (!isOpen) {
+                                                        // delay onClose callback so onClick no-ops
+                                                        setTimeout(() => {
+                                                            setIsPending(false);
+                                                            setActiveEditItem(null);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            clearCheckboxes();
+                                                        }, 200);
+                                                    }
+                                                }, popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
+                                                        if (isNodeEmptyCollection(activeEditItem)) {
+                                                            setIsPending(false);
+                                                            setTimeout(() => {
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                            clearCheckboxes();
+                                                        }
+                                                        else {
+                                                            setIsPending(false);
+                                                            handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                            setTimeout(() => {
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            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, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: fields, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                    setPivot(null);
+                                    setPivotData(null);
+                                }, selectPivot: (pivot) => {
+                                    if (!pivot)
                                         return;
+                                    const newAst = { ...baseAst };
+                                    newAst.orderby = null;
+                                    if (pivot.rowFieldType === 'date') {
+                                        pivot['sort'] = true;
+                                        pivot['sortDirection'] = 'ASC';
                                     }
-                                    if (!openPopover) {
-                                        setOpenPopover('AddLimitPopover');
-                                    }
-                                }, label: 'Add limit' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
-                                    if (!isOpen) {
+                                    setBaseAst(newAst); // trigger refetch
+                                    setPivot(pivot);
+                                    const pivotedData = generatePivotTable(pivot, rows, [null, null, null], false);
+                                    setPivotData(pivotedData || []);
+                                    setErrorMessage('');
+                                }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: [null, null, null], pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations }), pivot && (_jsx(PivotCard, { pivotTable: {
+                                    pivot: pivot,
+                                    rows: pivotData?.rows || [],
+                                    columns: pivotData?.columns || [],
+                                }, theme: theme, index: 0, onSelectPivot: () => {
+                                    setIsEdittingPivot(true);
+                                    setShowPivotPopover(true);
+                                    setPivotRowField(pivot?.rowField);
+                                    setPivotColumnField(pivot?.columnField);
+                                    setPivotValueField(pivot?.valueField);
+                                    setPivotAggregation(pivot?.aggregationType);
+                                    setPivotPopUpTitle('Edit pivot');
+                                }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, showEdit: false, onClose: () => {
+                                    setPivot(null);
+                                    setPivotData(null);
+                                    setBaseAst(deepCopy(baseAst));
+                                }, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: _jsx(SortSentence, { sortData: {
+                                        type: pivot.sortDirection,
+                                        expr: { type: 'column_ref', column: pivot.sortField },
+                                    }, columns: pivot
+                                        ? pivot.columnField
+                                            ? [`.${pivot.rowField}`]
+                                            : [
+                                                `.${pivot.rowField}`,
+                                                `.${pivot.valueField || 'count'}`,
+                                            ]
+                                        : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                        if (pivot) {
+                                            setPivot({ ...pivot, sort: false });
+                                            const pivotedData = generatePivotTable({ ...pivot, sort: false }, rows, [null, null, null], false);
+                                            setPivotData(pivotedData || []);
+                                            setErrorMessage('');
+                                            return;
+                                        }
+                                        setBaseAst(deepCopy(baseAst));
+                                        fetchSqlQuery(deepCopy(baseAst));
+                                    }, onSave: (column, direction) => {
+                                        if (pivot) {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            const pivotedData = generatePivotTable({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            }, rows, [null, null, null], false);
+                                            setPivotData(pivotedData || []);
+                                            setErrorMessage('');
+                                            return;
+                                        }
+                                        setOpenPopover(null);
+                                        setBaseAst(deepCopy(baseAst));
+                                        fetchSqlQuery(deepCopy(baseAst));
+                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                    display: 'flex',
+                                    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: () => {
+                                        if (pivot) {
+                                            setPivot({ ...pivot, sort: false });
+                                            return;
+                                        }
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby.splice(id, 1);
+                                        setBaseAst(deepCopy(newAst));
+                                        fetchSqlQuery(deepCopy(newAst));
+                                    }, onSave: (column, direction) => {
+                                        if (pivot) {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            return;
+                                        }
                                         setIsPending(false);
                                         setActiveEditItem(null);
+                                        setOpenPopover(null);
+                                        if (column === '')
+                                            return;
+                                        const newAst = { ...baseAst };
+                                        newAst.orderby[id] = {
+                                            expr: {
+                                                type: 'column_ref',
+                                                table: null,
+                                                column: column,
+                                            },
+                                            type: direction,
+                                        };
+                                        // look through the columns
                                         setActivePath(null);
                                         setOpenPopover(null);
+                                        setBaseAst(deepCopy(newAst));
+                                        fetchSqlQuery(deepCopy(newAst));
+                                    }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                        return;
+                                    }
+                                    if (!openPopover) {
+                                        setOpenPopover('AddSortPopover');
                                     }
-                                }, popoverTitle: "Limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                }, label: 'Add sort' }), _jsx("div", { style: {
+                                    position: 'relative',
+                                    ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                        if (!isOpen) {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }
+                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivot
+                                            ? pivot.columnField
+                                                ? [`.${pivot.rowField}`]
+                                                : [
+                                                    `.${pivot.rowField}`,
+                                                    `.${pivot.valueField || 'count'}`,
+                                                ]
+                                            : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (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 = generatePivotTable({
+                                                    ...pivot,
+                                                    sort: true,
+                                                    sortDirection: direction,
+                                                    sortField: column,
+                                                    sortFieldType: sortFieldType,
+                                                }, rows, [null, null, null], false);
+                                                setErrorMessage('');
+                                                setPivotData(pivotedData || []);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(baseAst));
+                                                return;
+                                            }
+                                            const newAst = { ...baseAst };
+                                            if (!newAst.orderby)
+                                                newAst.orderby = [];
+                                            newAst.orderby.push({
+                                                expr: { type: 'column_ref', column },
+                                                type: direction,
+                                            });
+                                            // look through the columns
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(newAst));
+                                            fetchSqlQuery(deepCopy(newAst));
+                                        } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit ? (_jsx("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: 8,
+                                    marginBottom: 12,
+                                }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                        const newAst = { ...baseAst };
+                                        newAst.limit = null;
+                                        setBaseAst(deepCopy(newAst));
+                                        fetchSqlQuery(deepCopy(newAst));
+                                    }, onSave: (limit) => {
                                         const newAst = { ...baseAst };
                                         newAst.limit = {
                                             seperator: '',
                                             value: [
                                                 {
                                                     type: 'number',
-                                                    value: Number(limit),
+                                                    value: limit,
                                                 },
                                             ],
                                         };
                                         setOpenPopover(null);
                                         setBaseAst(deepCopy(newAst));
                                         fetchSqlQuery(deepCopy(newAst));
-                                    } }) })] }))] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsxs("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                                    }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                                return;
+                                            }
+                                            if (!baseAst) {
+                                                return;
+                                            }
+                                            if (!openPopover) {
+                                                setOpenPopover('AddLimitPopover');
+                                            }
+                                        }, label: 'Add limit' }), _jsx("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                    const newAst = { ...baseAst };
+                                                    newAst.limit = {
+                                                        seperator: '',
+                                                        value: [
+                                                            {
+                                                                type: 'number',
+                                                                value: Number(limit),
+                                                            },
+                                                        ],
+                                                    };
+                                                    setOpenPopover(null);
+                                                    setBaseAst(deepCopy(newAst));
+                                                    fetchSqlQuery(deepCopy(newAst));
+                                                } }) }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
                             event.preventDefault();
                             handleAsk();
                         }, style: {
                             display: 'flex',
                             flexDirection: 'row',
                             gap: 12,
-                            padding: 1,
-                        }, children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? '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, rows: applyFormatting({
-                            rows: pivotData?.rows || rows,
-                            fields: pivotData?.fields || fields,
-                        }, baseAst?.columns ?? []), columns: pivot
+                            visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                ? 'hidden'
+                                : 'visible',
+                        }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
+                                        ? askAIInputWidth
+                                        : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? '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, rows: pivotData?.rows || formattedRows, columns: pivot
                             ? pivotData?.columns || emptyPivotColumns()
                             : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
                                 return { label: snakeCaseToTitleCase(c), field: c };
@@ -2661,12 +2936,14 @@ export default function ReportBuilder({ initialTableName = '', onSubmitChartBuil
                             display: 'flex',
                             flexDirection: 'row',
                             gap: '12px',
-                        }, children: [errorMessage && (_jsx("div", { style: {
-                                    color: 'red',
-                                    fontSize: 14,
-                                    padding: '12px',
-                                    whiteSpace: 'nowrap',
-                                }, children: errorMessage })), _jsx("div", { style: { width: '100%' } }), baseAst && dataDisplayed && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
+                            width: '100%',
+                        }, children: [errorMessage ? (_jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    overflow: 'hidden',
+                                    width: '100%',
+                                    gap: 12,
+                                }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) }), _jsx(ButtonComponent, { onClick: () => {
                                             setIsChartBuilderOpen(true);
-                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: rows, columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent })] }));
+                                        }, label: 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilderWithModal, { rows: rows, columns: fields, fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: "Add to dashboard", isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onSubmitChartBuilder, 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: ModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
 }