@quillsql/react 2.10.39 → 2.11.1

package/dist/esm/ReportBuilder.js

@@ -1,996 +1,2125 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { useState, useContext, useCallback, useEffect, useMemo, useRef, } from 'react';
-// import './nightOwlLight.css';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { convertPostgresColumn } from './SQLEditor';
-import { format } from 'date-fns';
-import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
-import { getData, getDataFromCloud } from './utils/dataFetcher';
-import { getRangeFromPreset, reportBuilderOptions, } from './DateRangePicker/dateRangePickerUtils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
+import { MemoizedCheckbox } 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 } from './Context';
+import { getTableNames, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
 import ChartBuilder from './ChartBuilder';
-import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
-export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = MemoizedTextInput, containerStyle, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
-    const [data, setData] = useState([]);
-    const [client, setClient] = useContext(ClientContext);
-    const [schema, setSchema] = useContext(SchemaContext);
-    const [theme] = useContext(ThemeContext);
-    const [columns, setColumns] = useState([]);
-    const [fields, setFields] = useState([]);
+import { QuillButton, QuillPopover, QuillSecondaryButton, QuillSelect, QuillReportBuilderTable, QuillTabs, QuillTextInput, QuillSidebar, CustomContainer, QuillHandleButton, QuillSelectColumn, QuillDraggableColumn, QuillButtonLoadingState, QuillTableLoadingState, QuillSidebarHeading, QuillSidebarSubHeading, QuillFilterPopover, DEFAULT_TAB_OPTIONS, TagWrapper, EditPopover, AddFilterPopover, } from './components/ReportBuilder/ui';
+import { generateCurrentPeriodPostgres, generateEqualsPostgres, generateLastNPeriodsPostgres, generatePreviousPeriodPostgres, } from './components/ReportBuilder/postgres';
+import { applyPivot, convertBigQuery, convertGroupBy, convertRemoveSimpleParentheses, convertStringComparison, convertWildcardColumns, } from './components/ReportBuilder/convert';
+import { deepCopy, formatDateComparisonNode, getDateFilterInfo, getInTheCurrentIntervalSentence, getInTheLastIntervalSentence, getInThePreviousIntervalSentence, getPostgresBasicType, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, isTopLevelBoolean, showNodeAsRow, tryConvertDateEquality, } 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';
+/**
+ * Quill Report Builder
+ *
+ * Allows non-technical users to build SQL queries using either UI or AI and
+ * then edit them on the fly. Once users have constructed a query they like,
+ * they can click a button and add that report to their dashboard or export it
+ * as a CSV.
+ */
+export default function ReportBuilder({ path = '', initialTableName = 'transactions', onAddToDashboardComplete = () => void null, destinationDashboard = undefined, dashboardItem = undefined, organizationName = '', Button = QuillButton, SecondaryButton = QuillSecondaryButton, TextInput = QuillTextInput, Select = QuillSelect, Table = QuillReportBuilderTable, Popover = QuillPopover, Tabs = QuillTabs, Checkbox = MemoizedCheckbox, Sidebar = QuillSidebar, Container = CustomContainer, HandleButton = QuillHandleButton, SelectColumn = QuillSelectColumn, DraggableColumn = QuillDraggableColumn, ButtonLoadingState = QuillButtonLoadingState, TableLoadingState = QuillTableLoadingState, SidebarHeading = QuillSidebarHeading, SidebarSubHeading = QuillSidebarSubHeading, FilterPopover = QuillFilterPopover, }) {
+    const [aiPrompt, setAiPrompt] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [baseAst, setBaseAst] = useState(null);
+    const [formData, setFormData] = useState(null);
+    const [orderedColumnNames, setOrderedColumnNames] = useState([]);
+    const [selectedColumns, setSelectedColumns] = useState([]);
+    const [schemaTables, setSchemaTables] = useState([]);
+    const [activeQuery, setActiveQuery] = useState('');
+    const [activeEditItem, setActiveEditItem] = useState(null);
+    const [activePath, setActivePath] = useState(null);
+    const [openPopover, setOpenPopover] = useState(null);
     const [loading, setLoading] = useState(false);
-    const [selectedPivot, setSelectedPivot] = useState(null);
-    const defaultDateRange = [null, null, null];
-    const [dateRange, setDateRange] = useState(defaultDateRange);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [isPending, setIsPending] = useState(false);
+    const [isCopying, setIsCopying] = useState(false);
+    const [rows, setRows] = useState([]);
+    const [fields, setFields] = useState([]);
+    const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
+    const [editPopoverKey, setEditPopoverKey] = useState(null);
+    const [uniqueValues, setUniqueValues] = useState({});
+    const [pivot, setPivot] = useState(null);
+    const [pivotData, setPivotData] = useState(null);
+    // eslint-disable-next-line no-unused-vars
+    const [client, _setClient] = useContext(ClientContext);
+    const enforceOrderOnColumns = (columnNames) => {
+        if (pivot) {
+            const rowName = pivot.rowField;
+            const sortFn = (a, b) => a === rowName ? -1 : b === rowName ? 1 : 0;
+            const columnsInPivot = getColumnsInPivotExpanded();
+            return columnNames
+                .sort(sortFn)
+                .filter((c) => columnsInPivot.includes(c));
+        }
+        return columnNames;
+    };
+    /**
+     * 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: 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',
+        }));
+    };
+    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
+        // this seems to work for now. ¯\_(ツ)_/¯
+        setTimeout(() => {
+            setAiPrompt('');
+            setBaseAst(null);
+            setFormData(null);
+            setOrderedColumnNames([]);
+            setSelectedColumns([]);
+            setSchemaTables([]);
+            setActiveQuery('');
+            setActiveEditItem(null);
+            setActivePath(null);
+            setOpenPopover(null);
+            setLoading(false);
+            setIsPending(false);
+            setRows([]);
+            setFields([]);
+            setTopLevelBinaryOperator('AND');
+            setEditPopoverKey(null);
+            // setUniqueValues({});
+            setPivot(null);
+            setPivotData(null);
+        }, 0);
+    };
     useEffect(() => {
-        let isSubscribed = true;
-        async function getClient() {
-            try {
-                const resp = await getDataFromCloud(client, `client/${client.publicKey}/`, null, 'GET');
-                if (resp) {
-                    setClient({ ...client, ...resp.client });
-                }
+        clearAllState();
+    }, [client]);
+    useEffect(() => {
+        if (activePath !== null) {
+            // update the modal with the new subtree
+            setActiveEditItem(getByKey(formData, activePath));
+        }
+    }, [formData]);
+    const getByKey = (formData, path) => {
+        if (!path)
+            return deepCopy(formData);
+        // Function to immutably update or delete nodes based on their path
+        const paths = path.split('.');
+        let current = deepCopy(formData);
+        for (let i = 0; i < paths.length; i++) {
+            if (current[paths[i]]) {
+                current = current[paths[i]];
             }
-            catch (error) {
-                console.error('ERROR getting client:', error);
+        }
+        return current;
+    };
+    const copyToClipboard = (str) => {
+        setIsCopying(true);
+        navigator.clipboard.writeText(str);
+        setTimeout(() => setIsCopying(false), 800);
+    };
+    const clearCheckboxes = () => {
+        const checkboxes = uniqueValues;
+        const newValues = {};
+        for (let table of Object.keys(checkboxes)) {
+            newValues[table] = {};
+            for (let column of Object.keys(checkboxes[table])) {
+                newValues[table][column] = {};
+                for (let variant of Object.keys(checkboxes[table][column])) {
+                    newValues[table][column][variant] = false;
+                }
             }
         }
-        if (isSubscribed) {
-            getClient();
+        setUniqueValues(newValues);
+    };
+    const setCheckboxes = (node) => {
+        if (!['IN', 'NOT IN'].includes(node.operator))
+            return;
+        const selectedItems = node.right.value.flatMap((v) => v.args.value.map((x) => x.value.toLowerCase()));
+        const checkboxes = uniqueValues;
+        const newValues = {};
+        for (let table of Object.keys(checkboxes)) {
+            newValues[table] = {};
+            for (let column of Object.keys(checkboxes[table])) {
+                newValues[table][column] = {};
+                for (let variant of Object.keys(checkboxes[table][column])) {
+                    newValues[table][column][variant] = selectedItems.includes(variant.toLowerCase());
+                }
+            }
         }
-        return () => {
-            isSubscribed = false;
-        };
-    }, []);
-    useEffect(() => {
-        let isSubscribed = true;
-        async function getSchema() {
-            const { queryEndpoint, queryHeaders, publicKey } = client;
-            const response = await fetch(`${queryEndpoint}`, {
+        setUniqueValues(newValues);
+    };
+    const fetchSqlQuery = async () => {
+        try {
+            const response = await fetch(`https://quill-344421.uc.r.appspot.com/sqlify`, {
                 method: 'POST',
                 headers: {
-                    ...queryHeaders,
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    metadata: {
-                        clientId: publicKey,
-                        publicKey: publicKey,
-                        task: 'schema',
-                    },
+                    ast: { ...baseAst, where: formData },
+                    publicKey: client.publicKey,
                 }),
             });
             const data = await response.json();
-            if (isSubscribed) {
-                setSchema(data.data.tables);
-            }
+            setActiveQuery(data.query);
+            fetchUponChange();
         }
-        if (isSubscribed) {
-            getSchema();
+        catch (error) {
+            console.error(error);
         }
-        return () => {
-            isSubscribed = false;
-        };
-    }, []);
+    };
     useEffect(() => {
-        if (onDateFilterChange) {
-            onDateFilterChange(dateRange);
+        setErrorMessage('');
+        if (baseAst || formData) {
+            fetchSqlQuery();
         }
-    }, [dateRange]);
+    }, [baseAst]);
+    // Returns an array of all the column names in the pivot config
+    // if there are any, otherwise returns [].
+    const getColumnsInPivot = () => {
+        if (!pivot)
+            return [];
+        const { valueField, rowField, columnField } = pivot;
+        return [valueField, rowField, columnField].filter(Boolean);
+    };
+    // It's just like getColumnsInPivot but we expand the columnField
+    // if there is one to include all the variants just like it would
+    // show up in the table. (eg. category -> ...[Fuel, Food, Other])
+    const getColumnsInPivotExpanded = () => {
+        if (!pivot)
+            return [];
+        const tables = getTableNames(baseAst);
+        if (tables.length !== 1)
+            return [];
+        const result = [];
+        const table = tables[0];
+        const { valueField, rowField, columnField } = pivot;
+        if (columnField && uniqueValues[table][columnField]) {
+            result.push(...Object.keys(uniqueValues[table][columnField]));
+        }
+        result.push(valueField, rowField);
+        return result.filter(Boolean);
+    };
     useEffect(() => {
-        if (onDateFilterChange) {
-            onDateFilterChange(defaultDateRange);
+        if (errorMessage) {
+            console.error(errorMessage);
         }
-    }, []);
+    }, [errorMessage]);
     useEffect(() => {
-        setColumns([]);
-    }, [tableName]);
-    const runQuery = async (query) => {
-        setLoading(true);
-        const hostedBody = {
-            metadata: {
-                query,
-                task: 'query',
-                orgId: client.customerId || '*',
-                databaseType: client?.databaseType,
-            },
+        const fetchDistinctHelper = async (column, 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',
+                    },
+                    body: JSON.stringify({
+                        orgId: 2,
+                        publicKey: client.publicKey,
+                        query: query,
+                    }),
+                });
+                const data = await response.json();
+                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 };
+            }
+            catch (e) {
+                console.error(e);
+                return null;
+            }
         };
-        const cloudBody = { query };
-        const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
-        if (resp && resp.errorMessage) {
-            onError(resp.errorMessage);
-            setData([]);
-            // onChangeData([]);
-            setColumns([]);
-            // onChangeColumns([]);
-            setFields([]);
-            if (onChangeFields) {
-                onChangeFields([]);
+        const fetchSchema = async () => {
+            try {
+                const response = await fetch(`https://quill-344421.uc.r.appspot.com/schema2/${client.publicKey}`).then((res) => res.json());
+                // Filter out hidden columns on tables back from schema2.
+                const tables = response?.tables;
+                for (const table of tables) {
+                    table.columns = table.columns.filter((column) => 
+                    // Quick and dirty fix for removing org ids from response.
+                    // TODO: Fix this on the backend or something.
+                    column.isVisible && column.displayName !== 'pm_company_id');
+                }
+                setSchemaTables(tables ?? []);
+                setOrderedColumnNames((tables ?? [])
+                    // .filter((t: any) => t.displayName === initialTableName)
+                    .flatMap((table) => table.columns.map((c) => `${table.displayName}.${c.displayName}`)));
+                // Fetch all the unique values in parallel
+                const pendingFetches = [];
+                for (let table of tables ?? []) {
+                    for (let column of table.columns) {
+                        if (!isTextColumnType(column.fieldType))
+                            continue;
+                        const fetchPromise = fetchDistinctHelper(column.name, table.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);
+                }
             }
-            setLoading(false);
-            return;
-        }
-        setData(resp.rows);
-        setColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
-        if (selectedPivot) {
-            const { rows, columns } = generatePivotTable(selectedPivot, resp.rows, dateRange);
-            if (onChangePivot) {
-                onChangePivot(selectedPivot, columns, rows);
+            catch (error) {
+                console.error(error);
             }
+        };
+        if (schemaTables.length === 0) {
+            fetchSchema();
         }
-        else {
-            if (onChangeData) {
-                onChangeData(resp.rows);
+    }, [schemaTables]);
+    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
+        updates.forEach(({ path, value }) => {
+            const globalPath = [
+                activePath ?? isDeletion ? path : '',
+                isDeletion || isReplaceSubtree ? '' : path,
+            ]
+                .filter(Boolean)
+                .join('.');
+            const paths = globalPath.split('.').filter((p) => p);
+            if (paths.length === 0 && !isInsertion && !isReplaceSubtree) {
+                setFormData(null);
+                setBaseAst(deepCopy({
+                    ...defaultAST,
+                    ...baseAst,
+                    ...(!baseAst?.columns && {
+                        columns: getAllPossibleColumns().map((c) => {
+                            const newColumn = deepCopy(defaultColumn);
+                            newColumn.expr.column = c.name;
+                            return newColumn;
+                        }),
+                    }),
+                    ...(!baseAst?.from && {
+                        from: [{ ...defaultTable, table: initialTableName }],
+                    }),
+                    where: null,
+                }));
+                return;
             }
-            if (onChangeColumns) {
-                onChangeColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            if (!formData && isInsertion) {
+                setFormData(value);
+                setBaseAst(deepCopy({
+                    ...defaultAST,
+                    ...baseAst,
+                    ...(!baseAst?.columns && {
+                        columns: getAllPossibleColumns().map((c) => {
+                            const newColumn = deepCopy(defaultColumn);
+                            newColumn.expr.column = c.name;
+                            return newColumn;
+                        }),
+                    }),
+                    ...(!baseAst?.from && {
+                        from: [{ ...defaultTable, table: initialTableName }],
+                    }),
+                    where: value,
+                }));
+                return;
             }
-        }
-        setFields(resp.fields);
-        if (onChangeFields) {
-            onChangeFields(resp.fields);
-        }
-        setLoading(false);
-    };
-    useEffect(() => {
-        if (onChangeLoading) {
-            onChangeLoading(loading);
-        }
-    }, [loading]);
-    if (!schema || !schema.length || !tableName) {
-        return null;
-    }
-    return (_jsx(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, editSQLEnabled: editSQLEnabled, navigateToSQLEditor: navigateToSQLEditor, theme: theme, data: data, columns: columns, fields: fields, chartBuilderTitle: chartBuilderTitle, chartBuilderButtonLabel: chartBuilderButtonLabel, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: (pivot) => {
-            setSelectedPivot(pivot);
-            if (onChangePivot) {
-                const table = pivot
-                    ? generatePivotTable(pivot, data, dateRange)
-                    : { rows: null, columns: null };
-                onChangePivot(pivot, table.columns, table.rows);
-            }
-        }, schema: schema, tableName: tableName, dateColumn: dateColumn, selectedTagBorderColor: selectedTagBorderColor, onChangeQuery: onChangeQuery, runQuery: runQuery, dateRange: dateRange, setDateRange: setDateRange, defaultDateRange: defaultDateRange, chartBuilderEnabled: chartBuilderEnabled, HeaderComponent: Header, LabelComponent: Label, SelectComponent: Select, TextComponent: Text, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, ModalComponent: Modal, PopoverComponent: Popover, TextInputComponent: TextInput, tagStyle: tagStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions }));
-}
-export function getPostgresBasicType(column) {
-    let format;
-    // first check if column.dataTypeID exists
-    if (column.dataTypeID) {
-        switch (column.dataTypeID) {
-            case 20: // int8
-            case 21: // int2
-            case 23: // int4
-            case 700: // float4
-            case 701: // float8
-            case 1700: // numeric
-                format = 'number';
-                break;
-            case 1082: // date
-            case 1083: // time
-            case 1184: // timestamptz
-            case 1114: // timestamp
-                format = 'date';
-                break;
-            case 1043: // varchar
-            default:
-                format = 'string';
-        }
-    }
-    else if (column.fieldType) {
-        // if column.dataTypeID doesn't exist, check column.fieldType
-        switch (column.fieldType) {
-            case 'int8':
-            case 'int2':
-            case 'int4':
-            case 'float4':
-            case 'float8':
-            case 'numeric':
-                format = 'number';
-                break;
-            case 'date':
-            case 'time':
-            case 'timestamptz':
-            case 'timestamp':
-                format = 'date';
-                break;
-            case 'varchar':
-            default:
-                format = 'string';
-        }
-    }
-    return format;
-}
-const newDateWhereAST = (column, dateRange, databaseType) => {
-    // all time means no filter
-    if (dateRange[2] === 'at') {
-        return null;
-    }
-    // if using preset
-    if (dateRange[2]) {
-        const timeInterval = reportBuilderOptions.find((elem) => elem.value === dateRange[2])?.dayInterval;
-        switch (databaseType) {
-            case 'BigQuery': {
-                return {
+            let newState = deepCopy(formData);
+            let current = newState;
+            let parent = null;
+            let parentKey = null;
+            for (let i = 0; i < paths.length - 1; i++) {
+                if (current[paths[i]]) {
+                    parent = current;
+                    parentKey = paths[i];
+                    current = current[paths[i]];
+                }
+            }
+            const lastKey = paths[paths.length - 1];
+            if (isDeletion) {
+                if (lastKey === 'left' || lastKey === 'right') {
+                    if (parent) {
+                        if (lastKey === 'right') {
+                            parent[parentKey] = parent[parentKey].left;
+                        }
+                        else {
+                            parent[parentKey] = parent[parentKey].right;
+                        }
+                    }
+                    else {
+                        delete current[lastKey];
+                        if (newState?.left && !newState?.right) {
+                            newState = newState.left;
+                        }
+                        else if (newState?.right && !newState?.left) {
+                            newState = newState.right;
+                        }
+                    }
+                }
+            }
+            else if (isInsertion) {
+                newState = {
                     type: 'binary_expr',
-                    operator: 'BETWEEN',
-                    left: {
-                        type: 'function',
-                        name: 'Date',
-                        args: {
-                            type: 'expr_list',
-                            value: [
-                                {
-                                    type: 'column_ref',
-                                    table: null,
-                                    column: column,
-                                },
-                            ],
-                        },
-                        over: null,
-                    },
-                    right: {
-                        type: 'expr_list',
-                        value: [
-                            {
-                                type: 'function',
-                                name: 'DATE_SUB',
-                                args: {
-                                    type: 'expr_list',
-                                    value: [
-                                        {
-                                            type: 'function',
-                                            name: 'CURRENT_DATE',
-                                            args: {
-                                                type: 'expr_list',
-                                                value: [],
-                                            },
-                                            over: null,
-                                        },
-                                        {
-                                            type: 'interval',
-                                            expr: {
-                                                type: 'number',
-                                                value: timeInterval,
-                                            },
-                                            unit: 'day',
-                                        },
-                                    ],
-                                },
-                                over: null,
-                            },
-                            {
-                                type: 'function',
-                                name: 'CURRENT_DATE',
-                                args: {
-                                    type: 'expr_list',
-                                    value: [],
-                                },
-                                over: null,
-                            },
-                        ],
-                    },
+                    operator: topLevelBinOp,
+                    isCondition: isCondition,
+                    left: newState,
+                    right: value,
                 };
             }
-            default: {
-                return {
+            else if (isAddVariant) {
+                const newVariant = deepCopy(defaultVariant);
+                if (value) {
+                    newVariant.args.value[0].value = value;
+                    // if there is already a single default value there,
+                    // let's remove it so when we push we replace.
+                    if (current[lastKey].length === 1 &&
+                        current[lastKey][0].args.value[0].value === '') {
+                        current[lastKey].pop();
+                    }
+                }
+                current[lastKey].push(newVariant);
+            }
+            else if (isDeleteVariant) {
+                if (value) {
+                    const argList = current[lastKey];
+                    argList.splice(argList.findIndex((arg) => arg.args.value[0].value === name), 1);
+                }
+                else {
+                    current[lastKey].pop();
+                }
+            }
+            else if (isReplaceSubtree) {
+                if (lastKey) {
+                    current[lastKey] = value;
+                }
+                else {
+                    newState = value;
+                }
+            }
+            else {
+                if (typeof current[lastKey] === 'object' && current[lastKey] !== null) {
+                    current[lastKey].value = value;
+                }
+                else {
+                    current[lastKey] = value;
+                }
+            }
+            setFormData(newState);
+            setBaseAst({
+                ...defaultAST,
+                ...baseAst,
+                ...(!baseAst?.columns && {
+                    columns: getAllPossibleColumns().map((c) => {
+                        const newColumn = deepCopy(defaultColumn);
+                        newColumn.expr.column = c.name;
+                        return newColumn;
+                    }),
+                }),
+                ...(!baseAst?.from && {
+                    from: [{ ...defaultTable, table: initialTableName }],
+                }),
+                where: { ...newState },
+            });
+        });
+    };
+    // TODO: Merge this function with the updateFormData function
+    const updateActiveItem = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, column = undefined, }) => {
+        let newState = deepCopy(activeEditItem);
+        updates.forEach(({ path, value }) => {
+            let current = newState;
+            const globalPath = path;
+            const paths = globalPath.split('.').filter((p) => p);
+            if (paths.length === 0 && !isInsertion && !isReplaceSubtree) {
+                setActiveEditItem(null);
+                return;
+            }
+            const isOperatorChange = paths[paths.length - 1] === 'operator';
+            let parent = null;
+            let parentKey = null;
+            for (let i = 0; i < paths.length - 1; i++) {
+                let currentPath = paths[i];
+                let index;
+                if (paths[i].includes('||')) {
+                    const splitPath = paths[i].split('||');
+                    currentPath = splitPath[0];
+                    index = splitPath[1];
+                }
+                if (current[currentPath]) {
+                    parent = current;
+                    parentKey = currentPath;
+                    current = current[currentPath];
+                }
+                if (index) {
+                    current = current[parseInt(index)];
+                }
+            }
+            const lastKey = paths[paths.length - 1];
+            if (isDeletion) {
+                if (lastKey === 'left' || lastKey === 'right') {
+                    if (parent) {
+                        if (lastKey === 'right') {
+                            parent[parentKey] = parent[parentKey].left;
+                        }
+                        else {
+                            parent[parentKey] = parent[parentKey].right;
+                        }
+                    }
+                    else {
+                        delete current[lastKey];
+                        if (newState?.left && !newState?.right) {
+                            newState = newState.left;
+                        }
+                        else if (newState?.right && !newState?.left) {
+                            newState = newState.right;
+                        }
+                    }
+                }
+            }
+            else if (isInsertion) {
+                const columns = getAllPossibleColumns();
+                const defaultColumn = columns[0].name;
+                // TODO: I think this is a bug, take a closer look here
+                newState = {
                     type: 'binary_expr',
                     operator: 'AND',
-                    left: {
-                        type: 'binary_expr',
-                        operator: '>=',
-                        left: {
-                            type: 'column_ref',
-                            table: null,
-                            column: column,
-                        },
-                        right: {
-                            type: 'binary_expr',
-                            operator: '-',
-                            left: {
-                                type: 'function',
-                                name: 'now',
-                                args: {
-                                    type: 'expr_list',
-                                    value: [],
-                                },
-                            },
-                            right: {
-                                type: 'interval',
-                                expr: {
-                                    type: 'single_quote_string',
-                                    value: `${timeInterval} day`,
-                                },
-                                unit: '',
-                            },
-                        },
-                    },
+                    left: newState,
                     right: {
-                        type: 'binary_expr',
-                        operator: '<=',
+                        ...defaultEntry,
                         left: {
-                            type: 'column_ref',
-                            table: null,
-                            column: column,
-                        },
-                        right: {
-                            type: 'function',
-                            name: 'now',
-                            args: {
-                                type: 'expr_list',
-                                value: [],
-                            },
+                            ...defaultEntry.left,
+                            column: defaultColumn,
                         },
                     },
                 };
             }
-        }
-    }
-    else {
-        return {
-            type: 'binary_expr',
-            operator: 'BETWEEN',
-            left: {
-                type: 'column_ref',
-                table: null,
-                column: column,
-            },
-            right: {
-                type: 'expr_list',
-                value: [
-                    {
-                        type: 'single_quote_string',
-                        value: format(new Date(dateRange[0]), 'MM/dd/yyyy'),
-                    },
-                    {
-                        type: 'single_quote_string',
-                        value: format(new Date(dateRange[1]), 'MM/dd/yyyy'),
-                    },
-                ],
-            },
-        };
-    }
-};
-function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, SecondaryButtonComponent, editSQLEnabled, navigateToSQLEditor, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, client, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
-    const selectedTable = useMemo(() => schema.find((t) => t.displayName === tableName), [schema, tableName]);
-    const [selectedColumn, setSelectedColumn] = useState(schema[0].columns.find((elem) => elem.name !== 'id'));
-    const parentRef = useRef();
-    const [filters, setFilters] = useState([]);
-    const [AST, setAST] = useState({
-        with: null,
-        type: 'select',
-        options: null,
-        distinct: { type: null },
-        columns: '*',
-        into: { position: null },
-        from: [{ db: null, table: selectedTable.displayName, as: null }],
-        // where: newDateWhereAST(dateColumn, defaultDateRange),
-        where: null,
-        groupby: null,
-        having: null,
-        orderby: null,
-        limit: { seperator: '', value: [] },
-        window: null,
-    });
-    const [ASTNoDateColumn, setASTNoDateColumn] = useState(AST);
-    const [numberStart, setNumberStart] = useState(0);
-    const [numberEnd, setNumberEnd] = useState(0);
-    const [filterDateRange, setFilterDateRange] = useState(getRangeFromPreset('90d'));
-    const [computedColumns, setComputedColumns] = useState({});
-    const [stringFilterValues, setStringFilterValues] = useState([]);
-    const [columnType, setColumnType] = useState(getPostgresBasicType(schema[0].columns[0]));
-    const [sqlQuery, setSqlQuery] = useState('');
-    const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = useState('');
-    const [indexBeingEdited, setIndexBeingEdited] = useState(-1);
-    const [isAddFilterModalOpen, setIsAddFilterModalOpen] = useState(false);
-    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
-    const [isPivotModalOpen, setIsPivotModalOpen] = useState(false);
-    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
-    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
-    const [createdPivots, setCreatedPivots] = useState([]);
-    const [recommendedPivots, setRecommendedPivots] = useState([]);
-    const [pivotRowField, setPivotRowField] = useState(undefined);
-    const [pivotColumnField, setPivotColumnField] = useState(undefined);
-    const [pivotValueField, setPivotValueField] = useState(undefined);
-    const [pivotAggregation, setPivotAggregation] = useState(undefined);
-    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
-    useEffect(() => {
-        setColumnType(getPostgresBasicType(selectedColumn));
-    }, [selectedColumn]);
-    useEffect(() => {
-        removePivot();
-        setCreatedPivots([]);
-        setRecommendedPivots([]);
-    }, [selectedTable]);
-    const selectFilter = (index) => {
-        const filter = filters[index];
-        const matchingColumn = selectedTable.columns.find((column) => column.name === filter.column);
-        if (indexBeingEdited === index) {
-            setIndexBeingEdited(-1);
-            setStringFilterValues([]);
-            setNumberStart(0);
-            setNumberEnd(0);
-            setFilterDateRange(getRangeFromPreset('90d'));
-            return;
-        }
-        setSelectedColumn(matchingColumn);
-        if (filter.columnType === 'string') {
-            setStringFilterValues(filter.stringFilterValues);
-            setIndexBeingEdited(index);
-        }
-        else if (filter.columnType === 'number') {
-            setNumberStart(filter.numberStart);
-            setNumberEnd(filter.numberEnd);
-            setIndexBeingEdited(index);
-        }
-        else if (filter.columnType === 'date') {
-            setFilterDateRange(filter.filterDateRange);
-            setIndexBeingEdited(index);
-        }
+            else if (isAddVariant) {
+                const newVariant = deepCopy(defaultVariant);
+                if (value) {
+                    newVariant.args.value[0].value = value;
+                    // if there is already a single default value there,
+                    // let's remove it so when we push we replace.
+                    if (current[lastKey].length === 1 &&
+                        current[lastKey][0].args.value[0].value === '') {
+                        current[lastKey].pop();
+                    }
+                }
+                current[lastKey].push(newVariant);
+            }
+            else if (isDeleteVariant) {
+                if (value) {
+                    const argList = current[lastKey];
+                    argList.splice(argList.findIndex((arg) => arg.args.value[0].value === value), 1);
+                }
+                else {
+                    current[lastKey].pop();
+                }
+                // add back in a phantom element to prevent app from crashing
+                // when the user removes all variants and hits save.
+                if (current[lastKey].length === 0) {
+                    const newVariant = deepCopy(defaultVariant);
+                    newVariant.args.value[0].value = '';
+                    current[lastKey].push(newVariant);
+                }
+            }
+            else if (isReplaceSubtree) {
+                if (lastKey) {
+                    current[lastKey] = value;
+                }
+                else {
+                    newState = value;
+                }
+            }
+            else if (isOperatorChange) {
+                const newOp = value;
+                const oldOp = current[lastKey];
+                if (OPERATOR_GROUPS[oldOp] === OPERATOR_GROUPS[newOp]) {
+                    current[lastKey] = value;
+                }
+                else {
+                    const group = OPERATOR_GROUPS[newOp];
+                    const subtree = getDefaultOperatorSubtrees(group, newOp, column, '', client.databaseType);
+                    if (parentKey) {
+                        parent[parentKey] = deepCopy(subtree);
+                    }
+                    else {
+                        newState = deepCopy(subtree);
+                    }
+                }
+            }
+            else {
+                if (typeof current[lastKey] === 'object' && current[lastKey] !== null) {
+                    current[lastKey].value = value;
+                }
+                else {
+                    current[lastKey] = value;
+                }
+            }
+        });
+        // Function to immutably update or delete nodes based on their path
+        setActiveEditItem(newState);
+    };
+    const handleChange = (updates) => {
+        const callback = isPending ? updateActiveItem : updateFormData;
+        callback(updates, {});
+    };
+    const handleChangeText = (updates) => {
+        const callback = isPending ? updateActiveItem : updateFormData;
+        callback(updates, {});
     };
-    const selectedPivotTable = useMemo(() => {
-        if (selectedPivot && data) {
-            return generatePivotTable(selectedPivot, data, dateRange);
+    // Function to handle operator changes
+    const handleOperatorChange = (value, node, keyPrefix, column = null) => {
+        if (isPending) {
+            updateActiveItem([{ path: keyPrefix + 'operator', value }], { column });
         }
         else {
-            return {};
-        }
-    }, [selectedPivot, data, dateRange]);
-    const removePivot = () => {
-        setSelectedPivotIndex(-1);
-        setSelectedPivot(null);
-        if (onChangePivot) {
-            onChangePivot(null, null, null);
+            updateFormData([{ path: keyPrefix + 'operator', value }], { column });
         }
     };
-    const selectPivot = (pivot, index) => {
-        setSelectedPivotIndex(index);
-        setSelectedPivot(pivot);
-        const pivotTable = generatePivotTable(pivot, data, dateRange);
-        if (onChangePivot) {
-            onChangePivot(pivot, pivotTable.columns, pivotTable.rows);
-        }
+    // Function to replace an entire subtree with a given value.
+    const handleReplaceSubtree = (keyPrefix, newValue, pending = isPending) => {
+        const callback = pending ? updateActiveItem : updateFormData;
+        callback([{ path: keyPrefix, value: newValue }], {
+            isReplaceSubtree: true,
+        });
     };
-    const updateFilter = (index) => {
-        if (selectedColumn && columnType) {
-            if (columnType === 'string') {
-                setFilters((filters) => {
-                    const newFilters = [...filters];
-                    newFilters[index] = {
-                        column: selectedColumn.name,
-                        columnType,
-                        stringFilterValues,
-                        tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
-                    };
-                    return newFilters;
-                });
-            }
-            else if (columnType === 'number') {
-                setFilters((filters) => {
-                    const newFilters = [...filters];
-                    newFilters[index] = {
-                        column: selectedColumn.name,
-                        columnType,
-                        numberStart,
-                        numberEnd,
-                        tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
-                    };
-                    return newFilters;
-                });
-            }
-            else if (columnType === 'date') {
-                const label = filterDateRange[2]
-                    ? reportBuilderOptions.find((elem) => elem.value === filterDateRange[2])?.text
-                    : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
-                setFilters((filters) => {
-                    const newFilters = [...filters];
-                    newFilters[index] = {
-                        column: selectedColumn.name,
-                        columnType,
-                        filterDateRange,
-                        tag: `${selectedColumn.name} (${label})`,
-                    };
-                    return newFilters;
-                });
-            }
-            setStringFilterValues([]);
-            setNumberStart(0);
-            setNumberEnd(0);
-            setFilterDateRange(getRangeFromPreset('90d'));
-            setIndexBeingEdited(-1);
-            return;
-        }
+    // Function to handle the deletion of expressions
+    const handleDelete = (key) => {
+        updateFormData([{ path: path + key, value: null }], { isDeletion: true });
     };
-    // ADD FILTER TO "FILTERS" ARRAY
-    const addFilter = async () => {
-        if (selectedColumn && columnType) {
-            //   const type = getPostgresBasicType(selectedColumn);
-            let newCondition;
-            if (columnType === 'string') {
-                setFilters((filters) => {
-                    return [
-                        ...filters,
-                        {
-                            column: selectedColumn.name,
-                            columnType,
-                            stringFilterValues,
-                            tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
-                        },
+    // Function to handle the insertion of expressions
+    const handleInsertion = (value, op = 'OR', isCondition = undefined) => {
+        updateFormData([{ path, value }], {
+            isInsertion: true,
+            topLevelBinOp: op,
+            isCondition,
+        });
+    };
+    // Function to handle the insertion of expr_list variants
+    const handleInsertVariant = (key, name = null) => {
+        // note: if name, treat that as the name of the value to insert
+        const callback = isPending ? updateActiveItem : updateFormData;
+        callback([{ path: path + key, value: name }], { isAddVariant: true });
+    };
+    // Function to handle the insertion of expr_list variants
+    const handleDeleteVariant = (key, name = null) => {
+        // note: if name, treat that as the name of the valeu to delete
+        const callback = isPending ? updateActiveItem : updateFormData;
+        callback([{ path: path + key, value: name }], { isDeleteVariant: true });
+    };
+    const getColumnValueForColumnComparison = (node) => node.left.value ??
+        node.left.column ??
+        node.left.args?.value[0]?.value ??
+        node.left.args?.value[0]?.column ??
+        undefined;
+    /**
+     * Searches for the column by name and returns the field type.
+     *
+     * Searches the known schema and returns the fieldType of the first column
+     * it can find with the given name. Will first search through the current
+     * list of fields in the current query if any, then will default to searching
+     * through the whole schema.
+     *
+     * If more than one column exist with the given name, it will return the first
+     * one that it finds. This might not be the one that you intended.
+     *
+     * TODO: pass an optional table param to limit the search to a given table.
+     *
+     * @param columnName the name to search for.
+     * @returns the fieldType string or undefined if not found.
+     */
+    const getColumnTypeByName = (columnName) => {
+        const field = fields.find((f) => f.name === columnName);
+        if (field)
+            return getPostgresBasicType(field);
+        const column = schemaTables
+            .flatMap((t) => t.columns)
+            .find((c) => c.name === columnName);
+        return column?.fieldType;
+    };
+    /**
+     * Render form fields based on the type of the node
+     * @param node the AST or subtree to render recursively
+     * @param keyPrefix a stringified version of the path from the root
+     *
+     * Note: The keyPrefix should be separated by '.' characters and each item
+     * should be a valid index into the node (eg. 'left.right.value' is a valid
+     * keyPrefix but 'left.args[0].value' is not -- should be 'left.args.0.value')
+     */
+    const renderNode = (node, keyPrefix = '') => {
+        const dateComparisonPartialMatch = formatDateComparisonNode(node);
+        switch (node.type) {
+            case 'binary_expr':
+                if (dateComparisonPartialMatch ||
+                    (isDateTruncEquals(node) && client.databaseType !== 'BigQuery')) {
+                    const { dateColumn, 
+                    // see onChange callback handleChange
+                    // eslint-disable-next-line no-unused-vars
+                    dateColumnPath, dateFilterType, intervalCount, intervalType, intervalPaths, } = getDateFilterInfo(node);
+                    const isPlural = intervalCount && intervalCount > 1 ? 's' : '';
+                    // Pull off the string literal date for "equals" comparisons
+                    const rawDateStringEquals = node.right?.value ??
+                        node.right?.args?.value[1]?.column ??
+                        node.right?.args?.value[1]?.value;
+                    const rawDateStringEqualsPath = (node.right?.value && 'node.right.value') ??
+                        (node.right?.args?.value[1]?.column &&
+                            'node.right.args.value.1.column') ??
+                        (node.right?.args?.value[1]?.value &&
+                            'node.right.args.value.1.value');
+                    return (_jsxs("div", { style: { display: 'flex', gap: 20 }, children: [_jsx(Select, { value: dateColumn, onChange: (value) => {
+                                    const columnType = getColumnTypeByName(value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: getAllPossibleColumns().map((column) => ({
+                                    label: column.displayName,
+                                    value: column.name,
+                                })) }), _jsx(Select, { value: dateFilterType, onChange: (value) => {
+                                    if (value === dateFilterType)
+                                        return null;
+                                    let newSubtree = {};
+                                    // TODO: implement one for each database type (eg. pg, snowflake, etc.)
+                                    if (value === 'in the last') {
+                                        newSubtree = generateLastNPeriodsPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
+                                        });
+                                    }
+                                    else if (value === 'in the previous') {
+                                        newSubtree = generatePreviousPeriodPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
+                                            currentPeriod: intervalType,
+                                        });
+                                    }
+                                    else if (value === 'in the current') {
+                                        newSubtree = generateCurrentPeriodPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: intervalType,
+                                        });
+                                    }
+                                    else if (value === 'equals') {
+                                        newSubtree = generateEqualsPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: intervalType,
+                                            timestamp: '2024-01-01',
+                                        });
+                                    }
+                                    // replace the entire subtree for this filter
+                                    handleReplaceSubtree(keyPrefix, newSubtree);
+                                }, options: [
+                                    { label: 'in the last', value: 'in the last' },
+                                    { label: 'in the previous', value: 'in the previous' },
+                                    { label: 'in the current', value: 'in the current' },
+                                    { label: 'equals', value: 'equals' },
+                                ] }), !['in the current', 'equals'].includes(dateFilterType) && (_jsx(TextInput, { value: intervalCount, type: "number", style: { width: '70px' }, onChange: (e) => {
+                                    const isPluralNow = e.target.value > 1 ? 's' : '';
+                                    intervalPaths.forEach((intervalPath) => handleChangeText([
+                                        {
+                                            value: `${e.target.value} ${intervalType}${isPluralNow}`,
+                                            path: keyPrefix + intervalPath,
+                                        },
+                                    ]));
+                                } })), _jsx(Select, { value: intervalType, onChange: (value) => {
+                                    if (intervalPaths.length === 1) {
+                                        handleChangeText([
+                                            {
+                                                value: intervalCount !== null
+                                                    ? `${intervalCount} ${value}${isPlural}`
+                                                    : value,
+                                                path: keyPrefix + intervalPaths[0],
+                                            },
+                                        ]);
+                                        return;
+                                    }
+                                    let newSubtree;
+                                    if (dateFilterType === 'equals') {
+                                        newSubtree = generateEqualsPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: value,
+                                            timestamp: rawDateStringEquals,
+                                        });
+                                    }
+                                    else {
+                                        newSubtree = generateCurrentPeriodPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: value,
+                                        });
+                                    }
+                                    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' },
+                                ] }), dateFilterType === 'equals' && (_jsx(TextInput, { value: rawDateStringEquals, type: "text", style: { width: '120px' }, onChange: (e) => {
+                                    handleChangeText([
+                                        {
+                                            value: e.target.value,
+                                            path: keyPrefix + rawDateStringEqualsPath,
+                                        },
+                                    ]);
+                                } }))] }));
+                }
+                else if (isInTheLastInterval(node, client.databaseType)) {
+                    const { dateColumn, dateFilterType, intervalCount, intervalType } = getDateFilterInfo(node);
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: column.displayName,
+                        value: column.name,
+                    }));
+                    const plural = node.right.args.value[1].expr.value > 1 ? 's' : '';
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx("div", { children: _jsx(Select, { value: node.left.column, onChange: (value) => {
+                                        const columnType = getColumnTypeByName(value);
+                                        if (isDateishColumnType(columnType)) {
+                                            // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                            handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                        }
+                                        else if (isNumericColumnType(columnType)) {
+                                            const newSubtree = deepCopy(defaultNumericComparison);
+                                            newSubtree.left.column = value;
+                                            handleReplaceSubtree(keyPrefix, newSubtree);
+                                        }
+                                        else {
+                                            const newSubtree = deepCopy(defaultEntry);
+                                            newSubtree.left.args.value[0].column = value;
+                                            handleReplaceSubtree(keyPrefix, newSubtree);
+                                        }
+                                    }, options: options }) }), _jsx(Select, { value: dateFilterType, onChange: (value) => {
+                                    handleOperatorChange(value, node, keyPrefix, dateColumn);
+                                }, options: [
+                                    { label: 'in the last', value: 'IN_THE_LAST' },
+                                    { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
+                                    { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    // { label: 'equals', value: 'equals' },
+                                ] }), _jsx(TextInput, { defaultValue: node.right.args.value[1].expr.value, type: "number", style: { width: '120px', height: '42px' }, min: 0, onBlur: (e) => {
+                                    handleChange([
+                                        {
+                                            value: e.target.value,
+                                            path: keyPrefix + 'right.args.value||1.expr.value',
+                                        },
+                                    ]);
+                                } }), _jsx("div", { children: _jsx(Select, { value: node.right.args.value[1].unit, onChange: (value) => handleChange([
+                                        { value, path: keyPrefix + 'right.args.value||1.unit' },
+                                    ]), options: [
+                                        { label: `year${plural}`, value: '* 365 DAY' },
+                                        { label: `month${plural}`, value: '* 30 DAY' },
+                                        { label: `week${plural}`, value: '* 7 DAY' },
+                                        { label: `day${plural}`, value: 'DAY' },
+                                    ] }) })] }));
+                }
+                else if (isTheCurrentInterval(node, client.databaseType)) {
+                    const { dateFilterType } = getDateFilterInfo(node);
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: column.displayName,
+                        value: column.name,
+                    }));
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx(Select, { value: node.left.column, onChange: (value) => {
+                                    const columnType = getColumnTypeByName(value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options }), _jsx(Select, { value: 'IN_THE_CURRENT', onChange: (value) => {
+                                    handleOperatorChange(value, node, keyPrefix, node.left.column);
+                                }, options: [
+                                    { label: 'in the last', value: 'IN_THE_LAST' },
+                                    { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
+                                    { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    // { label: 'equals', value: 'equals' },
+                                ] }), _jsx(Select, { value: node.left.args.value[1].column, onChange: (value) => {
+                                    handleChange([
+                                        { value, path: 'right.args.value||1.column' },
+                                        { value, path: 'left.args.value||1.column' },
+                                    ]);
+                                }, options: [
+                                    { label: `year`, value: 'YEAR' },
+                                    { label: `quarter`, value: 'QUARTER' },
+                                    { label: `month`, value: 'MONTH' },
+                                    { label: `week`, value: 'WEEK' },
+                                ] })] }));
+                }
+                else if (isThePreviousInterval(node, client.databaseType)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: column.displayName,
+                        value: column.name,
+                    }));
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx(Select, { value: node.left.column, onChange: (value) => {
+                                    const columnType = getColumnTypeByName(value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, opt: true, options: options }), _jsx(Select, { value: 'IN_THE_PREVIOUS', onChange: (value) => {
+                                    handleOperatorChange(value, node, keyPrefix, node.left.column);
+                                }, options: [
+                                    { label: 'in the last', value: 'IN_THE_LAST' },
+                                    { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
+                                    { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                    // { label: 'equals', value: 'equals' },
+                                ] }), _jsx(Select, { value: node.left.args.value[1].column, onChange: (value) => {
+                                    const dayConversion = {
+                                        YEAR: 365,
+                                        QUARTER: 90,
+                                        MONTH: 30,
+                                        WEEK: 7,
+                                    };
+                                    handleChange([
+                                        {
+                                            value,
+                                            path: 'left.args.value||1.column',
+                                        },
+                                        {
+                                            value,
+                                            path: 'right.args.value||1.column',
+                                        },
+                                        {
+                                            value: dayConversion[value] || 30,
+                                            path: 'right.args.value||0.args.value||1.expr.value',
+                                        },
+                                    ]);
+                                }, options: [
+                                    { label: `year`, value: 'YEAR' },
+                                    { label: `quarter`, value: 'QUARTER' },
+                                    { label: `month`, value: 'MONTH' },
+                                    { label: `week`, value: 'WEEK' },
+                                ] })] }));
+                }
+                else if (isColumnComparison(node)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: column.displayName,
+                        value: column.name,
+                    }));
+                    // grab the value of the left child of the column comparison
+                    // operator (ie. the column name)
+                    const leftChildValue = getColumnValueForColumnComparison(node);
+                    const column = schemaTables
+                        .flatMap((t) => t.columns)
+                        .find((col) => col.name === leftChildValue);
+                    const tables = getTableNames(baseAst);
+                    const table = tables.length === 1 ? tables[0] : initialTableName;
+                    const columnType = column?.fieldType;
+                    const operatorOptions = [
+                        ...(isNumericColumnType(columnType)
+                            ? [
+                                { label: 'equal to', value: '=' },
+                                { label: 'not equal to', value: '!=' },
+                                { label: 'greater than', value: '>' },
+                                { label: 'less than', value: '<' },
+                                { label: 'greater than or equal to', value: '>=' },
+                                { label: 'less than or equal to', value: '<=' },
+                                { label: 'is not null', value: 'IS NOT' },
+                                { label: 'is null', value: 'IS' },
+                            ]
+                            : []),
+                        ...(isTextColumnType(columnType)
+                            ? [
+                                { label: 'is', value: 'LIKE' },
+                                { label: 'is not', value: 'NOT LIKE' },
+                                { label: 'is one of', value: 'IN' },
+                                { label: 'is not one of', value: 'NOT IN' },
+                                { label: 'is not null', value: 'IS NOT' },
+                                { label: 'is null', value: 'IS' },
+                            ]
+                            : []),
+                        ...(isDateishColumnType(columnType)
+                            ? [
+                                { label: 'in the last', value: 'IN_THE_LAST' },
+                                {
+                                    label: 'in the previous',
+                                    value: 'IN_THE_PREVIOUS',
+                                },
+                                { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                { label: 'equals', value: 'equals' },
+                                { label: 'is not null', value: 'IS NOT' },
+                                { label: 'is null', value: 'IS' },
+                            ]
+                            : []),
                     ];
-                });
-                setStringFilterValues([]);
-                setNumberStart(0);
-                setNumberEnd(0);
-                setFilterDateRange(getRangeFromPreset('90d'));
-                return;
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            gap: 12,
+                            flexDirection: 'column',
+                            width: '100%',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    gap: 20,
+                                    // justifyContent: "space-between",
+                                    flexDirection: showNodeAsRow(node, formData)
+                                        ? 'row'
+                                        : 'column',
+                                    width: '100%',
+                                }, children: [_jsx(Select, { style: { width: 'min-content' }, value: leftChildValue, onChange: (value) => {
+                                            const columnType = getColumnTypeByName(value);
+                                            if (isDateishColumnType(columnType)) {
+                                                handleOperatorChange('IN_THE_LAST', node, keyPrefix, value);
+                                            }
+                                            else if (isNumericColumnType(columnType)) {
+                                                const newSubtree = deepCopy(defaultNumericComparison);
+                                                newSubtree.left.column = value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
+                                            else {
+                                                const newSubtree = deepCopy(defaultEntry);
+                                                newSubtree.left.args.value[0].column = value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
+                                        }, options: options }), operatorOptions.length > 0 && (_jsx(Select, { value: node.operator, onChange: (value) => {
+                                            handleOperatorChange(value, node, keyPrefix, leftChildValue);
+                                        }, style: { width: 'min-content' }, options: operatorOptions })), node.right &&
+                                        node.right.type !== 'expr_list' &&
+                                        renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix), node.right && node.right.type === 'expr_list' && (_jsx("div", { style: {
+                                    display: 'grid',
+                                    gridTemplateColumns: 'repeat(2, 1fr)',
+                                    gap: 12,
+                                }, children: Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => (_jsxs("label", { style: { display: 'flex', gap: 2 }, children: [_jsx(Checkbox, { checked: uniqueValues[table][leftChildValue][key], onChange: (checked) => {
+                                                const newValues = deepCopy(uniqueValues);
+                                                newValues[table][leftChildValue][key] = checked;
+                                                setUniqueValues(newValues);
+                                                if (checked) {
+                                                    handleInsertVariant(keyPrefix + 'right.' + 'value', key);
+                                                }
+                                                else {
+                                                    handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
+                                                }
+                                            } }), _jsx("span", { children: key })] }, key))) }, keyPrefix + 'right.'))] }));
+                }
+                else {
+                    const columnName = node.left.column;
+                    const column = schemaTables[0]?.columns.find((col) => col.name === columnName);
+                    const columnType = column?.fieldType;
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            gap: 12,
+                            justifyContent: 'space-between',
+                            flexDirection: showNodeAsRow(node, formData) ? 'row' : 'column',
+                            width: '100%',
+                        }, children: [node.left && renderNode(node.left, keyPrefix + 'left.'), _jsx(Select, { value: node.operator, onChange: (value) => {
+                                    handleOperatorChange(value, node, keyPrefix);
+                                }, style: { width: `100%` }, options: [
+                                    // { label: `and`, value: "AND" },
+                                    // { label: `or`, value: "OR" },
+                                    ...(isNumericColumnType(columnType)
+                                        ? [
+                                            { label: 'equal to', value: '=' },
+                                            { label: 'not equal to', value: '!=' },
+                                            { label: 'greater than', value: '>' },
+                                            { label: 'less than', value: '<' },
+                                            { label: 'greater than or equal to', value: '>=' },
+                                            { label: 'less than or equal to', value: '<=' },
+                                            { label: 'is not null', value: 'IS NOT' },
+                                            { label: 'is null', value: 'IS' },
+                                        ]
+                                        : []),
+                                    ...(isTextColumnType(columnType)
+                                        ? [
+                                            { label: 'is', value: 'LIKE' },
+                                            { label: 'is not', value: 'NOT LIKE' },
+                                            { label: 'is one of', value: 'IN' },
+                                            { label: 'is not one of', value: 'NOT IN' },
+                                            { label: 'is not null', value: 'IS NOT' },
+                                            { label: 'is null', value: 'IS' },
+                                        ]
+                                        : []),
+                                    ...(isDateishColumnType(columnType)
+                                        ? [
+                                            { label: 'in the last', value: 'IN_THE_LAST' },
+                                            { label: 'in the previous', value: 'IN_THE_PREVIOUS' },
+                                            { label: 'in the current', value: 'IN_THE_CURRENT' },
+                                            { label: 'is not null', value: 'IS NOT' },
+                                            { label: 'is null', value: 'IS' },
+                                        ]
+                                        : []),
+                                    // { label: `minus`, value: "-" },
+                                    // { label: `plus`, value: "+" },
+                                ] }), node.right && renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix));
+                }
+            case 'column_ref': {
+                const options = getAllPossibleColumns().map((column) => ({
+                    label: column.displayName,
+                    value: column.name,
+                }));
+                return (_jsx(Select, { style: { width: '120px' }, value: node.column ?? options[0]?.value, onChange: (value) => {
+                        handleChange([{ value, path: keyPrefix + 'column' }]);
+                    }, options: options }));
             }
-            else if (columnType === 'number') {
-                setFilters((filters) => {
-                    return [
-                        ...filters,
-                        {
-                            column: selectedColumn.name,
-                            columnType,
-                            numberStart,
-                            numberEnd,
-                            tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
-                        },
-                    ];
-                });
-                setStringFilterValues([]);
-                setNumberStart(0);
-                setNumberEnd(0);
-                setFilterDateRange(getRangeFromPreset('90d'));
-                return;
+            case 'expr_list': {
+                const len = node.value.length;
+                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 12 }, children: [node.value.map((elem, index) => {
+                            if (elem.value) {
+                                return (_jsx(TextInput, { type: elem.type === 'number' ? 'number' : 'text', defaultValue: elem.value, onBlur: (e) => handleChange([
+                                        {
+                                            value: elem.type === 'number'
+                                                ? parseFloat(e.target.value)
+                                                : e.target.value,
+                                            path: keyPrefix + `value.${index}.`,
+                                        },
+                                    ]) }, `input_${index}`));
+                            }
+                            return renderNode(elem, keyPrefix + `value.${index}.`);
+                        }), len > 1 && (_jsx(SecondaryButton, { onClick: () => handleDeleteVariant(keyPrefix + 'value'), children: "-" })), _jsx(SecondaryButton, { onClick: () => handleInsertVariant(keyPrefix + 'value'), children: "+" })] }, keyPrefix));
             }
-            else if (columnType === 'date') {
-                const label = filterDateRange[2]
-                    ? reportBuilderOptions.find((elem) => elem.value === filterDateRange[2])?.text
-                    : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
-                setFilters((filters) => {
-                    return [
-                        ...filters,
+            case 'double_quote_string':
+            case 'single_quote_string':
+                return (_jsx(TextInput, { type: "text", defaultValue: node.value.replaceAll('%', ''), style: { width: '120px' }, onBlur: (e) => handleChange([
                         {
-                            column: selectedColumn.name,
-                            columnType,
-                            filterDateRange,
-                            tag: `${selectedColumn.name} (${label})`,
+                            value: node.type === 'number'
+                                ? parseFloat(e.target.value)
+                                : e.target.value,
+                            path: keyPrefix + 'value',
                         },
-                    ];
-                });
-                setStringFilterValues([]);
-                setNumberStart(0);
-                setNumberEnd(0);
-                setFilterDateRange(getRangeFromPreset('90d'));
-            }
+                    ]) }));
+            case 'null':
+                return _jsx("div", {});
+            case 'number':
+                return (_jsx(TextInput, { defaultValue: node.value, type: "number", style: { width: '120px' }, onBlur: (e) => {
+                        handleChange([
+                            {
+                                value: node.type === 'number'
+                                    ? parseFloat(e.target.value)
+                                    : e.target.value,
+                                path: keyPrefix + 'value',
+                            },
+                        ]);
+                    } }));
+            case 'function':
+                if (!node.args) {
+                    return _jsx("label", {});
+                }
+                else if (node.args.type === 'expr_list' &&
+                    node.args.value.length === 1) {
+                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row' }, children: node.args.value[0] &&
+                            renderNode(node.args.value[0], keyPrefix + 'args.value.0.') }));
+                }
+                else if (node.args.type === 'expr_list' &&
+                    node.args.value.length === 2) {
+                    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: [node.args.value[0] &&
+                                renderNode(node.args.value[0], keyPrefix + 'args.value.0.'), node.args.value[1] &&
+                                renderNode(node.args.value[1], keyPrefix + 'args.value.1.')] }));
+                }
+                return node.name;
+            case 'interval':
+                return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', gap: 20 }, children: renderNode(node.expr, keyPrefix + 'expr.') }));
+            default:
+                return null;
         }
     };
-    const handleRunQuery = (newSqlQuery) => {
-        const queryToUse = newSqlQuery || sqlQuery;
-        if (queryToUse && queryToUse.length) {
-            runQuery(queryToUse);
+    const renderSentence = (formData, node, keyPrefix = '', 
+    // @depreciated TODO: remove next update
+    // eslint-disable-next-line no-unused-vars
+    isTopLevel = false, 
+    // @depreciated TODO: remove next update
+    // eslint-disable-next-line no-unused-vars
+    isTopLevelAnd = false, isParentRow = false) => {
+        const isInTheCurrentIntervalSentence = isTheCurrentInterval(node, client.databaseType)
+            ? getInTheCurrentIntervalSentence(node, client.databaseType)
+            : null;
+        const isInTheLastIntervalSentence = isInTheLastInterval(node, client.databaseType)
+            ? getInTheLastIntervalSentence(node, client.databaseType)
+            : null;
+        const isInThePreviousIntervalSentence = isThePreviousInterval(node, client.databaseType)
+            ? getInThePreviousIntervalSentence(node, client.databaseType)
+            : null;
+        let dateComparisonPartialMatch = null;
+        let dateEqualityPartialMatch = null;
+        if (client.databaseType !== 'BigQuery') {
+            dateComparisonPartialMatch = formatDateComparisonNode(node);
+            dateEqualityPartialMatch = tryConvertDateEquality(node, client.databaseType);
+        }
+        const isRow = !isTopLevelBoolean(node);
+        const isCard = isRow && !isParentRow;
+        const OPS = {
+            AND: 'and',
+            OR: 'or',
+            LIKE: 'is',
+            BETWEEN: 'is between',
+            IN: 'is one of',
+            'NOT IN': 'is not one of',
+            'NOT LIKE': 'is not',
+            '!=': 'is not',
+            '=': 'is',
+            '<': 'is less than',
+            '>': 'is greater than',
+            '<=': 'is less than or equal to',
+            '>=': 'is greater than or equal to',
+            '<>': 'is not',
+            '-': 'minus',
+            'IS NOT': 'is not',
+            IS: 'is ',
+        };
+        switch (node.type) {
+            case 'binary_expr':
+                return (_jsx(TagWrapper, { keyPrefix: keyPrefix, formData: formData, activeEditItem: activeEditItem, setEditPopoverKey: setEditPopoverKey, setActiveEditItem: setActiveEditItem, setCheckboxes: setCheckboxes, handleReplaceSubtree: handleReplaceSubtree, FilterPopover: FilterPopover, setActivePath: setActivePath, setOpenPopover: setOpenPopover, setIsPending: setIsPending, clearCheckboxes: clearCheckboxes, fetchSqlQuery: fetchSqlQuery, handleDelete: handleDelete, editPopoverKey: editPopoverKey, isCard: isCard, isRow: isRow, getByKey: getByKey, node: node, EditPopover: EditPopover, Button: Button, renderNode: renderNode, Popover: Popover, style: {
+                        display: 'flex',
+                        gap: 3,
+                        flexDirection: isRow ? 'row' : 'column',
+                        padding: '1px',
+                        border: isCard ? '1px solid black' : 'none',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    }, children: dateComparisonPartialMatch ??
+                        dateEqualityPartialMatch ??
+                        isInTheCurrentIntervalSentence ??
+                        isInTheLastIntervalSentence ??
+                        isInThePreviousIntervalSentence ?? (_jsxs(_Fragment, { children: [node.left &&
+                                renderSentence(formData, node.left, keyPrefix + 'left.', false, false, isRow), isRow ? (' ' + OPS[node.operator] + ' ') : topLevelBinaryOperator === 'OR' ? (_jsx(TopLevelBooleanSwitch, { node: node, keyPrefix: keyPrefix, handleOperatorChange: handleOperatorChange, Select: Select })) : null, node.right &&
+                                renderSentence(formData, node.right, keyPrefix + 'right.', false, false, isRow)] })) }));
+            case 'column_ref':
+                return node.column;
+            case 'expr_list':
+                if (node.value.length === 1) {
+                    const subQuery = renderSentence(formData, node.value[0]);
+                    if (subQuery) {
+                        return `${subQuery}`;
+                    }
+                    return '()';
+                }
+                return `${node.value
+                    .map((elem) => renderSentence(formData, elem))
+                    .join(', ')}`;
+            case 'single_quote_string':
+                return node.value.replaceAll('%', '');
+            case 'double_quote_string':
+            case 'number':
+                return node.value;
+            case 'null':
+                return 'null';
+            case 'interval':
+                if (node.unit) {
+                    // eg. `INTERVAL '90' DAY` -> "90 days"
+                    return `${node.expr.value} ${node.unit}s`;
+                }
+                return node.expr.value;
+            case 'function':
+                if (node.name.toLowerCase() === 'lower' ||
+                    node.name.toLowerCase() === 'upper') {
+                    // how many transactions were above 20 and not fuel or made in the last 90 days (hint: use lower)
+                    if (node.args.value.length < 1)
+                        return null;
+                    if (node.args.value[0].value) {
+                        return node.args.value[0].value.replaceAll('%', '');
+                    }
+                    if (node.args.value[0].column)
+                        return node.args.value[0].column.replaceAll('%', '');
+                    return null;
+                }
+                if (node.name.toLowerCase() === 'current_date' ||
+                    node.name.toLowerCase() === 'now') {
+                    return 'today';
+                }
+                if (node.name.toLowerCase() === 'date_trunc') {
+                    // eg. date_trunc('month', now())
+                    if (!node.args)
+                        return null;
+                    if (node.args.type !== 'expr_list')
+                        return null;
+                    if (node.args.value?.length !== 2)
+                        return null;
+                    const interval = renderSentence(formData, node.args.value[0]);
+                    const timestamp = renderSentence(formData, node.args.value[1]);
+                    return `start of the ${interval} of ${timestamp}`;
+                }
+                return null;
+            default:
+                return null;
         }
     };
-    useEffect(() => {
-        // if selected table changes, clear everything
-        if (selectedTable.displayName !== AST.from.table) {
-            setSelectedColumn(selectedTable.columns.find((elem) => elem.name !== 'id'));
-            setFilters([]);
-            removePivot();
-            const resetAST = {
-                with: null,
-                type: 'select',
-                options: null,
-                distinct: { type: null },
-                columns: '*',
-                into: { position: null },
-                // where: newDateWhereAST(dateColumn, defaultDateRange),
-                where: null,
-                groupby: null,
-                having: null,
-                orderby: null,
-                limit: { seperator: '', value: [] },
-                window: null,
-                from: [{ db: null, table: selectedTable.displayName, as: null }],
-            };
-            setAST(resetAST);
-            setASTNoDateColumn(resetAST);
-            return;
+    const getAllPossibleColumns = () => {
+        if (!baseAst || !baseAst.from) {
+            return schemaTables.flatMap((table) => table.columns.map((c) => ({
+                ...c,
+                table: table.displayName,
+            })));
         }
-    }, [selectedTable]);
-    const generateNewAST = (includeDateColumn) => {
-        if (filters.length || dateRange) {
-            const newAST = {
-                with: null,
-                type: 'select',
-                options: null,
-                distinct: null,
-                columns: '*',
-                into: { position: null },
-                from: [{ db: null, table: selectedTable.displayName, as: null }],
-                // where: newDateWhereAST(dateColumn, dateRange || defaultDateRange),
-                where: null,
-                groupby: null,
-                having: null,
-                orderby: null,
-                limit: null,
-                window: null,
-            };
-            // FILTERS
-            for (let i = 0; i < filters.length; i++) {
-                const filter = filters[i];
-                const { column, columnType, stringFilterValues, numberStart, numberEnd, filterDateRange, } = filter;
-                let newCondition;
-                if (column === dateColumn && !includeDateColumn) {
-                    continue;
-                }
-                if (columnType === 'string') {
-                    newCondition = {
-                        type: 'binary_expr',
-                        operator: 'IN',
-                        left: {
-                            type: 'column_ref',
-                            table: null,
-                            column: column,
-                        },
-                        right: {
-                            type: 'expr_list',
-                            value: stringFilterValues.map((value) => ({
-                                type: 'single_quote_string',
-                                value,
-                            })),
-                        },
-                    };
-                }
-                else if (columnType === 'number') {
-                    newCondition = {
-                        type: 'binary_expr',
-                        operator: 'BETWEEN',
-                        left: {
-                            type: 'column_ref',
-                            table: null,
-                            column: column,
-                        },
-                        right: {
-                            type: 'expr_list',
-                            value: [
-                                { type: 'number', value: numberStart },
-                                { type: 'number', value: numberEnd },
-                            ],
-                        },
-                    };
+        // TODO: support infinitely nested FROM table lookups.
+        // This currently only supports top-level table names in the FROM section
+        // of queries (eg. FROM "table_name", not "FROM (SELECT * FROM other) AS table_name")
+        const tableNamesInQuery = baseAst.from.map((tbl) => tbl.table);
+        return schemaTables
+            .filter((t) => tableNamesInQuery.includes(t.displayName))
+            .flatMap((table) => table.columns.map((c) => ({
+            ...c,
+            table: table.displayName,
+        })));
+    };
+    const getDateColumns = () => {
+        const allColumns = getAllPossibleColumns();
+        return allColumns.filter((c) => isDateishColumnType(c.fieldType));
+    };
+    const getNumericColumns = () => {
+        const allColumns = getAllPossibleColumns();
+        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
+        return allColumns
+            .filter((column) => {
+            return selectedColumnNames.includes(column.name);
+        })
+            .filter((c) => isNumericColumnType(c.fieldType));
+    };
+    const getNonNumericColumns = () => {
+        const allColumns = getAllPossibleColumns();
+        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
+        return allColumns
+            .filter((column) => selectedColumnNames.includes(column.name))
+            .filter((c) => !isNumericColumnType(c.fieldType));
+    };
+    const getStringColumns = () => {
+        const allColumns = getAllPossibleColumns();
+        const selectedColumnNames = selectedColumns.map((col) => col.split('.')[1]);
+        return allColumns
+            .filter((column) => selectedColumnNames.includes(column.name))
+            .filter((c) => isTextColumnType(c.fieldType));
+    };
+    /**
+     * Return whether all columns have been selected (used to hide select all
+     * and show clear button).
+     */
+    const isSelectedAllColumns = () => {
+        if (selectedColumns.length < 1)
+            return false;
+        const allColumns = orderedColumnNames.filter((row) => {
+            const [table, _] = row.split('.');
+            return selectedColumns[0].startsWith(table);
+        });
+        return selectedColumns.length === allColumns.length;
+    };
+    const nameToColumn = (name) => ({
+        type: 'expr',
+        expr: {
+            type: 'column_ref',
+            table: null,
+            column: name,
+        },
+        as: null,
+    });
+    const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, }) => {
+        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
+        const style = {
+            transform: DND_CSS.Transform.toString(transform),
+            transition,
+        };
+        const handleSelect = () => {
+            setSelectedColumns((selectedColumns) => {
+                if (selectedColumns.includes(id)) {
+                    return selectedColumns.filter((column) => column !== id);
                 }
-                else if (columnType === 'date') {
-                    newCondition = newDateWhereAST(column, filterDateRange, client.databaseType);
+                else {
+                    return [...selectedColumns, id];
                 }
-                if (!newAST.where) {
-                    newAST.where = newCondition;
+            });
+        };
+        return (_jsx("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: _jsx(SelectColumn, { selected: selectedColumns?.includes(id), setSelected: handleSelect, label: label, children: _jsx("div", { style: {
+                        cursor: 'grab',
+                    }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
+    };
+    const AddConditionPopover = ({ onSave }) => {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("h1", { style: {
+                        fontWeight: '600',
+                        fontSize: 18,
+                        margin: 0,
+                        textAlign: 'left',
+                    }, children: "Add condition" }), _jsx(Tabs, { defaultValue: topLevelBinaryOperator, options: DEFAULT_TAB_OPTIONS, onValueChange: (value) => setTopLevelBinaryOperator(value) }), activeEditItem && renderNode(activeEditItem), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: 8,
+                        justifyContent: 'end',
+                    }, children: _jsx(Button, { onMouseUp: onSave, children: "Add condition" }) })] }));
+    };
+    const fetchUponChange = async () => {
+        if ((formData || 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({
+                        ast: { ...baseAst, where: formData },
+                        publicKey: client.publicKey,
+                        orgId: '2',
+                    }),
+                });
+                const data2 = await res2.json();
+                if (data2.rows && data2.rows.length) {
+                    const tables = getTableNames(baseAst);
+                    const table = tables.length >= 1 ? tables[0] : initialTableName;
+                    if (pivot) {
+                        // Do all of this to make sure we have the right unique columns when applying a pivot
+                        let uniqueFormatted = {};
+                        const uniqueRecords = Array.from(new Set(data2.rows.map((row) => row[pivot.columnField]))).reduce((acc, curr) => {
+                            acc[curr] = false;
+                            return acc;
+                        }, {});
+                        uniqueFormatted[pivot.columnField] = uniqueRecords;
+                        const pivotedData = applyPivot(data2, pivot, uniqueFormatted);
+                        console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
+                        setPivotData(pivotedData);
+                    }
+                    else {
+                        setRows(data2.rows);
+                        setFields(data2.fields);
+                        if (data2.errorMessage) {
+                            setErrorMessage(`Error: ${data2.errorMessage}`);
+                        }
+                    }
                 }
                 else {
-                    newAST.where = {
-                        type: 'binary_expr',
-                        operator: 'AND',
-                        left: newAST.where,
-                        right: newCondition,
-                    };
+                    setRows([]);
+                    setFields([]);
                 }
             }
-            return newAST;
+            catch (e) {
+                console.error(e);
+            }
+            finally {
+                setLoading(false);
+            }
         }
     };
-    // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
-    useEffect(() => {
-        if (filters.length || dateRange) {
-            setAST(generateNewAST(true));
-            setASTNoDateColumn(generateNewAST(false));
+    // Convert an array of columns to a map where the name is the
+    // key and the value is the column node.
+    const columnArrayToMap = (columns) => {
+        const columnMap = {};
+        for (const col of columns) {
+            const key = col.expr?.value ?? col.expr?.column ?? col.as;
+            columnMap[key] = col;
         }
-    }, [filters, dateRange]);
-    const removeFilter = index => {
-        setFilters(oldFilters => {
-            const newFilters = [...oldFilters];
-            newFilters.splice(index, 1);
-            return newFilters;
-        });
-        setIndexBeingEdited(-1);
-    };
-    const computeStats = useCallback(column => {
-        if ((!computedColumns[column.name] ||
-            computedColumns[column.name].length === 0) &&
-            data) {
-            const basicType = getPostgresBasicType(column);
-            let result;
-            if (basicType === 'number') {
-                let min = Infinity, max = -Infinity;
-                data.forEach(row => {
-                    const value = row[column.name];
-                    min = Math.min(min, value);
-                    max = Math.max(max, value);
-                });
-                result = { min, max };
-            }
-            else if (basicType === 'string') {
-                const freqMap = {};
-                data.forEach(row => {
-                    const value = row[column.name];
-                    if (value !== null && value !== undefined) {
-                        freqMap[value] = (freqMap[value] || 0) + 1;
+        return columnMap;
+    };
+    const applyFormatting = (response, columns) => {
+        const columnFormatters = {};
+        const columnMap = columnArrayToMap(columns);
+        response.fields.forEach((field) => {
+            // TODO: columnMap[field.name] silently breaks for columnField columns
+            const formatType = getPostgresBasicType(field);
+            if (formatType === 'date') {
+                columnFormatters[field.name] = (x) => {
+                    const d = new Date(x);
+                    // check if d is a valid date
+                    if (isNaN(d.getTime())) {
+                        return 'Invalid Date';
                     }
-                });
-                result = Object.entries(freqMap)
-                    .sort((a, b) => b[1] - a[1])
-                    .slice(0, 6)
-                    .map(([key]) => key);
+                    d.setMinutes(d.getMinutes() + d.getTimezoneOffset()); // TZ adjust
+                    if (columnMap[field.name]?.expr.type === 'function' &&
+                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
+                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
+                            'month') {
+                        return d.toLocaleString('default', {
+                            month: 'short',
+                            year: 'numeric',
+                        });
+                    }
+                    else if (columnMap[field.name]?.expr.type === 'function' &&
+                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
+                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
+                            'quarter') {
+                        return `Q${getQuarter(d)} ${d.getFullYear()}`;
+                    }
+                    else if (columnMap[field.name]?.expr.type === 'function' &&
+                        columnMap[field.name]?.expr.name.toLowerCase() === 'date_trunc' &&
+                        columnMap[field.name]?.expr.args.value[0].value.toLowerCase() ===
+                            'year') {
+                        return d.toLocaleString('default', {
+                            year: 'numeric',
+                        });
+                    }
+                    return DATE_FMT.format(d);
+                };
+            }
+            else if (formatType === 'number') {
+                columnFormatters[field.name] = (x) => {
+                    if (columnMap[field.name]?.expr.type === 'extract' &&
+                        columnMap[field.name]?.expr.args.field.toLowerCase() === 'dow') {
+                        return DAY_OF_WEEK[x];
+                    }
+                    else if (columnMap[field.name]?.expr.type === 'extract' &&
+                        columnMap[field.name]?.expr.args.field.toLowerCase() === 'month') {
+                        return MONTH_OF_YEAR[x - 1];
+                    }
+                    else if (`${x}`.includes('.')) {
+                        // return MONEY_FMT.format(Number(x ?? 0.0));
+                        return Number(x ?? 0.0).toFixed(2);
+                    }
+                    return x ?? 0.0;
+                };
             }
             else {
-                // Handle other column types if necessary
+                columnFormatters[field.name] = (x) => x;
+            }
+        });
+        return response.rows.map((row) => {
+            const newRow = {};
+            Object.keys(row).forEach((key) => (newRow[key] = columnFormatters[key]
+                ? columnFormatters[key](row[key])
+                : row[key]));
+            return newRow;
+        });
+    };
+    // Returns whether a where-clause contains a nested subquery.
+    const isSubquery = (node) => {
+        if (!node)
+            return false;
+        if (node.ast)
+            return true;
+        if (node.left && isSubquery(node.left))
+            return true;
+        if (node.right && isSubquery(node.right))
+            return true;
+        if (node.value && Array.isArray(node.value)) {
+            for (const value of node.value) {
+                if (isSubquery(value))
+                    return true;
             }
-            setComputedColumns({
-                ...computedColumns,
-                [column.name]: result,
-            });
         }
-    }, [data, computedColumns]);
-    // Call this function whenever the selected column changes
-    useEffect(() => {
-        computeStats(selectedColumn);
-    }, [selectedColumn, data]);
-    // Use the results directly in your component
-    const columnStats = computedColumns[selectedColumn.name];
-    // useEffect(() => {
-    //   if (AST && AST.from[0].table) {
-    //     const parser = new Parser();
-    //     const sqlQuery = parser.sqlify(AST, { database: "PostgresQL" });
-    //     if (sqlQuery) {
-    //       runQuery(sqlQuery);
-    //       return;
-    //     }
-    //   }
-    // }, [AST]);
-    useEffect(() => {
-        const getSqlQueryFromAST = async () => {
-            try {
-                if (AST && AST.from[0].table) {
-                    const resp = await getDataFromCloud(client, 'sqlify', {
-                        ast: AST,
+        return false;
+    };
+    const handleAsk = async () => {
+        if (!aiPrompt) {
+            return;
+        }
+        try {
+            setLoading(true);
+            let res, data, ast;
+            let numRetries = 0;
+            const MAX_RETRIES = 3;
+            // refetch the request if it comes back and we know it's invalid.
+            // TODO: remove this to allow joins later down the road
+            let isTableJoin = !ast || !ast.from || ast.from.length !== 1;
+            while (isTableJoin || isSubquery(ast?.where)) {
+                if (numRetries === MAX_RETRIES)
+                    break;
+                if (!activeQuery || (ast && (isTableJoin || isSubquery(ast?.where)))) {
+                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            initialQuestion: aiPrompt,
+                            publicKey: client.publicKey,
+                        }),
+                    });
+                }
+                else {
+                    res = await fetch('https://quill-344421.uc.r.appspot.com/magic/edit', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            sqlQuery: activeQuery,
+                            initialQuestion: aiPrompt,
+                            publicKey: client.publicKey,
+                        }),
                     });
-                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
-                    if (newSqlQuery && newSqlQuery !== sqlQuery) {
-                        onChangeQuery(newSqlQuery);
-                        setSqlQuery(newSqlQuery);
-                        handleRunQuery(newSqlQuery);
+                }
+                data = await res.json();
+                ast = data?.ast?.length ? data?.ast[0] : data?.ast;
+                // TODO: Debug invalid table joins in handleAsk
+                isTableJoin =
+                    ast?.type !== 'bigquery' &&
+                        (!ast || !ast.from || ast.from.length !== 1);
+                numRetries += 1;
+            }
+            if (numRetries === MAX_RETRIES) {
+                console.error('[Error]: Max retries exceeded.');
+                console.info(`%c[Prompt]: ${aiPrompt}`, 'color: dimgray');
+                setErrorMessage("Error: Couldn't process your request, please re-word your prompt.");
+                return;
+            }
+            let newAst, groupByPivot;
+            if (ast) {
+                // Unwrap the ast object, supporting many possible types
+                ast = ast.length ? ast[0] : ast;
+                newAst = convertBigQuery(ast);
+                newAst = convertWildcardColumns(newAst, schemaTables); // must go before groupby
+                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(newAst, pivot, schemaTables));
+                newAst = convertStringComparison(newAst, client.databaseType);
+                newAst = convertRemoveSimpleParentheses(newAst);
+                // newAst = convertDateComparison(newAst); // TODO
+                ast = newAst; // so we fetch data for newAst later.
+                const table = getTableNames(newAst)[0] ?? initialTableName;
+                setPivot(groupByPivot);
+                setSelectedColumns(deepCopy(newAst).columns?.map((column) => {
+                    if (column.expr.type === 'column_ref') {
+                        return `${table}.${column.expr.column}`;
+                    }
+                    else if (column.as) {
+                        return `${table}.${column.as}`;
                     }
+                    return `${table}.${column.expr.value}`;
+                }));
+                setBaseAst(deepCopy({ ...newAst }));
+                setFormData(deepCopy(newAst.where));
+                setTopLevelBinaryOperator(
+                // @ts-ignore
+                newAst?.where ? newAst?.where?.operator : 'AND');
+                if (groupByPivot)
+                    return; // the useEffect will handle the rest
+            }
+            const res2 = await fetch('https://quill-344421.uc.r.appspot.com/patterns', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    ast: ast,
+                    publicKey: client.publicKey,
+                    orgId: '2',
+                }),
+            });
+            const data2 = await res2.json();
+            if (data2.rows && data2.rows.length) {
+                const tables = getTableNames(newAst);
+                const table = tables.length >= 1 ? tables[0] : initialTableName;
+                if (groupByPivot) {
+                    const pivotedData = applyPivot(data2, groupByPivot, uniqueValues[table]);
+                    console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
+                    setPivotData(pivotedData);
+                }
+                else {
+                    setRows(data2.rows);
+                    setFields(data2.fields);
                 }
             }
-            catch (err) {
-                console.error(err);
+            else {
+                setRows([]);
+                setFields([]);
+            }
+            if (data2.query) {
+                setActiveQuery(data2.query);
+            }
+            else {
+                setActiveQuery('');
+            }
+            if (data2.errorMessage) {
+                setErrorMessage(`Error: ${data2.errorMessage}`);
             }
+            else {
+                setErrorMessage('');
+            }
+        }
+        catch (e) {
+            console.error(e);
+            setErrorMessage(`${e.name}: ${e.message}`);
+        }
+        finally {
+            setLoading(false);
+            setAiPrompt('');
+        }
+    };
+    const handleDeleteColumn = (name) => {
+        if (!baseAst || !baseAst.columns.length || selectedColumns.length === 1) {
+            clearAllState();
+            return;
+        }
+        setSelectedColumns((selectedColumns) => selectedColumns.filter((column) => !column.endsWith(name)));
+        const columns = baseAst.columns.filter((col) => {
+            if (col.expr.type === 'column_ref') {
+                return col.expr.column !== name;
+            }
+            else if (col.as) {
+                return col.as !== name;
+            }
+            return col.expr.value !== name;
+        });
+        if (columns.length === 0) {
+            clearAllState();
+            return;
+        }
+        const newAst = { ...baseAst, columns };
+        setBaseAst(deepCopy(newAst));
+    };
+    function TopLevelBooleanSwitch({ node, keyPrefix, handleOperatorChange, }) {
+        return (_jsx("div", { style: { width: 'fit-content' }, children: _jsx(Tabs, { defaultValue: node.operator, options: DEFAULT_TAB_OPTIONS, onValueChange: (value) => handleOperatorChange(value, node, keyPrefix) }) }));
+    }
+    const DraggableItem = ({ id, label, onDelete }) => {
+        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
+        const style = {
+            transform: DND_CSS.Transform.toString(transform),
+            transition,
         };
-        getSqlQueryFromAST();
-    }, [AST]);
-    useEffect(() => {
-        const getSqlQueryFromAST = async () => {
-            try {
-                if (ASTNoDateColumn && ASTNoDateColumn.from[0].table) {
-                    const resp = await getDataFromCloud(client, 'sqlify', {
-                        ast: ASTNoDateColumn,
-                    });
-                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
-                    if (newSqlQuery && newSqlQuery !== sqlQueryNoDateColumn) {
-                        setSqlQueryNoDateColumn(newSqlQuery);
+        return (_jsx("div", { style: { ...style }, ref: setNodeRef, children: _jsx(DraggableColumn, { label: label, onDelete: onDelete, children: _jsx("div", { style: {
+                        cursor: 'grab',
+                    }, ...attributes, ...listeners, children: _jsx(HandleButton, {}) }) }) }));
+    };
+    function DraggableColumns() {
+        const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }));
+        // When a drag event ends, switch the item order.
+        function handleDragEnd(event) {
+            const { active, over } = event;
+            if (active.id !== over.id) {
+                const oldIndex = orderedColumnNames.findIndex((c) => c.endsWith(active.id));
+                const newIndex = orderedColumnNames.findIndex((c) => c.endsWith(over.id));
+                const newOrder = arrayMove(orderedColumnNames, oldIndex, newIndex);
+                setOrderedColumnNames(newOrder);
+                const orderedSelectedColumns = [];
+                for (const value of newOrder) {
+                    const [_, column] = value.split('.');
+                    if (selectedColumns.includes(value)) {
+                        orderedSelectedColumns.push(column);
                     }
                 }
+                // If there is already an AST saved in state, only update the columns
+                // otherwise fill in the defaultAST shape and also update columns.
+                const fallbackAST = {
+                    ...defaultAST,
+                    from: [{ ...defaultTable }],
+                    columns: orderedSelectedColumns.map((name) => nameToColumn(name)),
+                };
+                const newBaseAst = {
+                    ...baseAst,
+                    columns: baseAst?.columns.length
+                        ? orderedSelectedColumns.map((name) => nameToColumn(name))
+                        : baseAst?.columns,
+                };
+                const newAst = baseAst ? newBaseAst : fallbackAST;
+                setBaseAst(newAst);
+            }
+        }
+        const columnNamesInAst = baseAst?.columns.map((col) => {
+            if (col.expr.type === 'column_ref') {
+                return col.expr.column;
             }
-            catch (err) {
-                console.error(err);
+            else if (col.as) {
+                return col.as;
             }
-        };
-        getSqlQueryFromAST();
-    }, [ASTNoDateColumn]);
-    if (!schema || !schema.length) {
-        return null;
+            else if (col.expr && col.expr.type === 'aggr_func') {
+                if (col.expr.args) {
+                    return `${col.expr.name.toLowerCase()}(${col.expr.args.expr.value})`;
+                }
+                return col.expr.name;
+            }
+            return col.expr.value;
+        }) ?? [];
+        return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columnNamesInAst, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 8,
+                    }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
     }
-    return (_jsxs("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [_jsx("div", { style: {
-                    display: 'flex',
-                    // marginLeft: '25px',
-                    // marginRight: '25px',
-                    justifyContent: 'end',
-                }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [editSQLEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
-                                if (navigateToSQLEditor) {
-                                    navigateToSQLEditor(sqlQuery);
-                                }
-                            }, label: "Edit Query" })), _jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), _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, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), chartBuilderEnabled && columns.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            width: '100%',
-                            height: '70px',
-                            gap: '8px',
-                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), _jsx(ChartBuilder, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
-}
-function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
-    const handleRemoveFilter = () => {
-        removeFilter(index);
-    };
-    const handleSelectFilter = () => {
-        selectFilter(index);
-        setIsOpen(true);
-    };
-    const styles = tagStyle || {
-        cursor: 'pointer',
-        borderRadius: 8,
-        border: '1px solid',
-        backgroundColor: '#EFF0FC',
-        paddingLeft: '12px',
-        paddingRight: '8px',
-        height: 30,
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 13,
-        fontWeight: 'medium',
-        color: theme?.primaryTextColor,
-        fontFamily: theme?.fontFamily,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        outline: 'none',
-        maxWidth: 120,
-    };
-    const borderColor = {
-        borderColor: isSelected
-            ? selectedTagBorderColor || '#B3B4BD'
-            : styles.borderColor || '#EFF0FC',
-    };
-    return (_jsxs("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [_jsx("div", { style: {
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                }, children: label }), _jsx("div", { 
-                // onClick={handleRemoveFilter}
-                onClick: e => {
-                    e.stopPropagation(); // Prevents the event from bubbling up to the parent
-                    handleRemoveFilter();
-                }, style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    paddingLeft: '6px',
-                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
-}
-const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setDateRange, dateRange, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
-                    position: 'relative',
-                    display: 'inline-block',
-                    textAlign: 'left',
-                }, children: [_jsx("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: filters.length > 0 && (_jsx("span", { style: {
-                                height: 10,
-                                width: 10,
-                                backgroundColor: theme.primaryButtonColor,
-                                borderRadius: '50%',
-                                position: 'absolute',
-                                top: -2,
-                                right: -2,
-                            } })) }), _jsx(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: _jsxs("div", { style: {
-                                backgroundColor: 'rgb(255, 255, 255)',
+    const allNumericColumns = getNumericColumns().map((column) => ({
+        label: column.displayName,
+        value: column.name,
+    }));
+    const allNonNumericColumns = getNonNumericColumns().map((column) => ({
+        label: column.displayName,
+        value: column.name,
+    }));
+    const allStringColumns = getStringColumns().map((column) => ({
+        label: column.displayName,
+        value: column.name,
+    }));
+    if (loading) {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', height: '100%' }, children: [_jsxs(Sidebar, { children: [_jsx(SidebarHeading, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(Popover, { isOpen: openPopover === 'AddColumnPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                    if (!openPopover) {
+                                        setOpenPopover('AddColumnPopover');
+                                    }
+                                }, children: "Select columns" }), title: "Select columns", onClose: () => {
+                                setIsPending(false);
+                                setActiveEditItem(null);
+                                setActivePath(null);
+                                setOpenPopover(null);
+                            }, children: _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: setBaseAst, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Filters" }), _jsx("div", { style: { height: 4, width: '100%' } }), formData && (_jsx("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [filters.length > 0 && (_jsx("div", { style: { paddingBottom: 20 }, children: _jsx("div", { style: {
-                                            overflowY: 'scroll',
-                                            maxHeight: '300px',
-                                            display: 'flex',
-                                            gap: '5px',
-                                            flexDirection: 'row',
-                                            flexWrap: 'wrap',
-                                            alignItems: 'center',
-                                        }, children: filters.map((elem, index) => (_jsx(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), _jsx(LabelComponent, { children: "Column" }), _jsx(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
-                                        const column = selectedTable.columns.find(c => c.name === e);
-                                        setSelectedColumn(column);
-                                    }, options: selectedTable.columns
-                                        .filter(elem => !(elem.name === 'id' || elem.name.endsWith('_id')))
-                                        .map(elem => {
-                                        return { label: elem.name, value: elem.name };
-                                    }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                        }, children: [_jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    marginTop: '20px',
-                                                }, children: [_jsx(LabelComponent, { children: "Minimum" }), _jsx(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), _jsx("div", { style: { width: 16 } }), _jsxs("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    marginTop: '20px',
-                                                }, children: [_jsx(LabelComponent, { children: "Maximum" }), _jsx(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && (_jsx("div", { style: {
+                                gap: 8,
+                                marginBottom: 12,
+                            }, children: renderSentence(formData, formData, '', true) })), _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 2.5,
+                                alignItems: 'flex-start',
+                            }, children: [_jsx(Popover, { isOpen: openPopover === 'AddFilterPopover', title: 'Add filter', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                            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);
+                                            }
+                                        }, children: "Add filter" }), onClose: () => {
+                                        setIsPending(false);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                        clearCheckboxes();
+                                        setTimeout(() => {
+                                            setActiveEditItem(null);
+                                        }, 300);
+                                    }, children: _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: Button, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
+                                    false && ( // temp removed the AddConditionPopover
+                                _jsx(Popover, { isOpen: openPopover === 'AddConditionPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                            if (!openPopover) {
+                                                setActiveEditItem(deepCopy(defaultEntry));
+                                                setOpenPopover('AddConditionPopover');
+                                                setActivePath('');
+                                                setIsPending(true);
+                                            }
+                                        }, children: "Add condition" }), onClose: () => {
+                                        setIsPending(false);
+                                        setTimeout(() => {
+                                            setActiveEditItem(null);
+                                        }, 300);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                        clearCheckboxes();
+                                    }, children: _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();
+                                            }
+                                        } }) }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), pivot !== null && (_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 12,
+                                marginBottom: 12,
+                            }, children: [_jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Aggregation" }), _jsx(Select, { onChange: void null, value: pivot.aggregationType, options: [
+                                                { label: 'sum', value: 'sum' },
+                                                { label: 'avg', value: 'avg' },
+                                                { label: 'min', value: 'min' },
+                                                { label: 'max', value: 'max' },
+                                                { label: 'count', value: 'count' },
+                                            ] })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Value field" }), _jsx(Select, { onChange: void null, value: pivot.valueField, options: [
+                                                { label: 'Select', value: '' },
+                                                ...allNumericColumns,
+                                            ] })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Group rows by" }), _jsx(Select, { onChange: void null, value: pivot.rowField ?? '', options: allNonNumericColumns })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Group columns by" }), _jsx(Select, { onChange: void null, value: pivot.columnField ?? '', options: [
+                                                { label: 'Select', value: '' },
+                                                ...allStringColumns,
+                                            ] })] })] })), _jsx(SecondaryButton, { children: pivot === null ? 'Add pivot' : 'Delete pivot' })] }), _jsxs(Container, { children: [_jsxs("form", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                gap: 12,
+                                padding: 1,
+                            }, children: [_jsx(TextInput, { placeholder: "Ask a question...", type: "text", style: { width: '100%', fontSize: 14 }, value: aiPrompt }), _jsx(ButtonLoadingState, {}), baseAst && (_jsx(SecondaryButton, { type: "button", onClick: clearAllState, children: "New report" }))] }), baseAst && (_jsxs(_Fragment, { children: [_jsx(TableLoadingState, {}), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
-                                        justifyContent: 'space-between',
-                                        marginTop: 20,
-                                    }, children: _jsx(QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
-                                            setDateRange([dateRange[0], dateRange[1], null]);
-                                        }, preset: dateRange && dateRange.length === 3 && dateRange[2] !== null
-                                            ? dateRange[2]
-                                            : '', onChangePreset: preset => {
-                                            if (typeof preset === 'string') {
-                                                setDateRange(getRangeFromPreset(preset));
-                                                return;
-                                            }
-                                            setDateRange([
-                                                preset?.startDate || null,
-                                                new Date(),
-                                                preset?.value || '',
-                                            ]);
-                                        }, presetOptions: reportBuilderOptions }) })), columnType === 'string' &&
-                                    columnStats &&
-                                    columnStats.length > 0 && (_jsx("div", { style: {
-                                        flex: 'flex',
-                                        flexDirection: 'column',
-                                        marginTop: '14px',
-                                        overflow: 'hidden',
-                                    }, children: columnStats.map(value => (_jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                        }, children: _jsxs("div", { style: {
-                                                display: 'flex',
-                                                flexDirection: 'row',
-                                                alignItems: 'center',
-                                                paddingTop: 6,
-                                                paddingBottom: 6,
-                                            }, children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
-                                                        setStringFilterValues(prev => prev.includes(value)
-                                                            ? prev.filter(v => v !== value)
-                                                            : [...prev, value]);
-                                                    } }), _jsx("div", { style: {
-                                                        marginLeft: 6,
-                                                        display: 'block',
-                                                        overflow: 'hidden',
-                                                        textOverflow: 'ellipsis',
-                                                        whiteSpace: 'nowrap',
-                                                        color: theme?.primaryTextColor,
-                                                        fontFamily: theme?.fontFamily,
-                                                    }, children: value })] }, value) }, value))) })), _jsx("div", { style: { height: 20 } }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
-                                            if (columnType === 'date' && !dateRange) {
-                                                return;
+                                        gap: '12px',
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), _jsx(SecondaryButton, { type: "button", onClick: () => copyToClipboard(activeQuery), children: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(Button, { children: "Add to dashboard" })] })] }))] }), _jsx("style", { children: `body{margin:0;}` })] }));
+    }
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            height: '100%',
+            overflowY: 'auto',
+        }, children: [_jsxs(Sidebar, { children: [_jsx(SidebarHeading, { label: "Columns" }), _jsx("div", { style: { height: 4, width: '100%' } }), _jsx(DraggableColumns, {}), _jsx(Popover, { isOpen: openPopover === 'AddColumnPopover', title: "Select columns", trigger: _jsx(SecondaryButton, { onClick: () => {
+                                if (!openPopover) {
+                                    setOpenPopover('AddColumnPopover');
+                                }
+                            }, children: "Select columns" }), onClose: () => {
+                            // delay onClose callback so onClick no-ops
+                            setTimeout(() => {
+                                setIsPending(false);
+                                setActiveEditItem(null);
+                                setActivePath(null);
+                                setOpenPopover(null);
+                            }, 100);
+                        }, children: _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: setBaseAst, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInput, SelectColumn: SelectColumn, SecondaryButton: SecondaryButton, Button: Button, HandleButton: HandleButton }) }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { 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(Popover, { title: 'Add filter', isOpen: openPopover === 'AddFilterPopover', trigger: _jsx(SecondaryButton, { onClick: (_e) => {
+                                        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);
                                             }
-                                            if (indexBeingEdited > -1) {
-                                                updateFilter(indexBeingEdited);
-                                                return;
+                                            else {
+                                                const newSubtree = deepCopy(defaultEntry);
+                                                newSubtree.left.args.value[0].column = column;
+                                                setActiveEditItem(newSubtree);
                                             }
-                                            addFilter();
-                                        }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), _jsx("div", { style: { height: '12px' } })] }));
-};
-const DivCheckbox = ({ onChange, checked, theme }) => {
-    const toggleCheckbox = () => {
-        if (onChange) {
-            onChange(!checked);
-        }
-    };
-    const style = {
-        // display: 'inline-block',
-        width: '18px',
-        height: '18px',
-        background: checked ? '#384151' : '#fff',
-        border: checked ? '1px solid #384151' : '1px solid #E7E7E7',
-        borderRadius: '4px',
-        position: 'relative',
-        cursor: 'pointer',
-        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        fontFamily: theme?.fontFamily,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-    };
-    return (_jsx("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked, 
-        // className="shadow-sm"
-        role: "checkbox", children: checked && (
-        // <CheckIcon
-        //   style={{ color: theme?.backgroundColor, height: 16, width: 16 }}
-        //   className="text-white"
-        //   aria-hidden="true"
-        // />
-        _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.backgroundColor, height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", clipRule: "evenodd" }) })) }));
-};
+                                            setOpenPopover('AddFilterPopover');
+                                            setActivePath('');
+                                            setIsPending(true);
+                                        }
+                                    }, children: "Add filter" }), onClose: () => {
+                                    // delay onClose callback so onClick no-ops
+                                    setTimeout(() => {
+                                        setIsPending(false);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                        clearCheckboxes();
+                                        setActiveEditItem(null);
+                                    }, 200);
+                                }, children: _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: Button, renderNode: renderNode, activeEditItem: activeEditItem }) }), baseAst?.where &&
+                                false && ( // temp removed the AddConditionPopover
+                            _jsx(Popover, { isOpen: openPopover === 'AddConditionPopover', trigger: _jsx(SecondaryButton, { onClick: () => {
+                                        if (!openPopover) {
+                                            setActiveEditItem(deepCopy(defaultEntry));
+                                            setOpenPopover('AddConditionPopover');
+                                            setActivePath('');
+                                            setIsPending(true);
+                                        }
+                                    }, children: "Add condition" }), onClose: () => {
+                                    // delay onClose callback so onClick no-ops
+                                    setTimeout(() => {
+                                        setIsPending(false);
+                                        setActiveEditItem(null);
+                                        setActivePath(null);
+                                        setOpenPopover(null);
+                                        clearCheckboxes();
+                                    }, 200);
+                                }, children: _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();
+                                        }
+                                    } }) }))] }), _jsx("div", { style: { height: 28, width: '100%' } }), _jsx(SidebarHeading, { label: "Pivot" }), _jsx("div", { style: { height: 4, width: '100%' } }), pivot !== null && (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 12,
+                            marginBottom: 12,
+                        }, children: [_jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Aggregation" }), _jsx(Select, { value: pivot.aggregationType, onChange: (value) => {
+                                            setBaseAst(deepCopy(baseAst)); // trigger refetch
+                                            setPivot({ ...pivot, aggregationType: value });
+                                        }, options: [
+                                            { label: 'sum', value: 'sum' },
+                                            { label: 'avg', value: 'avg' },
+                                            { label: 'min', value: 'min' },
+                                            { label: 'max', value: 'max' },
+                                            { label: 'count', value: 'count' },
+                                        ] })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Value field" }), _jsx(Select, { value: pivot.valueField, onChange: (value) => {
+                                            setBaseAst(deepCopy(baseAst)); // trigger refetch
+                                            setPivot({ ...pivot, valueField: value });
+                                        }, options: [{ label: 'Select', value: '' }, ...allNumericColumns] })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Group rows by" }), _jsx(Select, { value: pivot.rowField ?? '', onChange: (value) => {
+                                            setBaseAst(deepCopy(baseAst)); // trigger refetch
+                                            setPivot({
+                                                ...pivot,
+                                                rowField: value === '' ? undefined : value,
+                                            });
+                                        }, options: [
+                                            { label: 'Select', value: '' },
+                                            ...allNonNumericColumns,
+                                        ] })] }), _jsxs("div", { children: [_jsx(SidebarSubHeading, { label: "Group columns by" }), _jsx(Select, { value: pivot.columnField ?? '', onChange: (value) => {
+                                            setBaseAst(deepCopy(baseAst)); // trigger refetch
+                                            setPivot({
+                                                ...pivot,
+                                                columnField: value === '' ? undefined : value,
+                                            });
+                                        }, options: [
+                                            { label: 'Select', value: '' },
+                                            ...allStringColumns,
+                                        ].filter((option) => option.value !== pivot.rowField) })] })] })), _jsx(SecondaryButton, { onClick: () => {
+                            if (pivot) {
+                                setBaseAst(deepCopy(baseAst));
+                                setPivot(null);
+                                setPivotData(null);
+                            }
+                            else {
+                                if (allNumericColumns.length === 0) {
+                                    setErrorMessage('Unable to create pivot: Unsupported Schema.');
+                                    return;
+                                }
+                                if (!baseAst) {
+                                    let ast = deepCopy({
+                                        ...defaultAST,
+                                        columns: getAllPossibleColumns()
+                                            .filter((c) => c.table === initialTableName)
+                                            .map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.name;
+                                            return newColumn;
+                                        }),
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                        where: null,
+                                    });
+                                    ast = convertWildcardColumns(ast, schemaTables);
+                                    setBaseAst(ast);
+                                }
+                                else {
+                                    setBaseAst(deepCopy(baseAst));
+                                }
+                                setPivot({
+                                    aggregationType: 'sum',
+                                    valueField: allNumericColumns[0].value,
+                                    rowField: allNonNumericColumns[0]?.value,
+                                    columnField: undefined,
+                                });
+                            }
+                        }, children: pivot === null ? 'Add pivot' : 'Delete pivot' }), _jsx("div", { style: { height: 12, width: '100%' } })] }), _jsxs(Container, { children: [_jsxs("form", { onSubmit: handleAsk, style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: 12,
+                            padding: 1,
+                        }, children: [_jsx(TextInput, { type: "text", value: aiPrompt, style: { width: '100%', fontSize: 14 }, onChange: (e) => setAiPrompt(e.target.value), placeholder: baseAst ? 'Ask a follow-up question...' : 'Ask a question...' }), _jsx(Button, { type: "submit", onClick: handleAsk, children: "Ask AI" }), baseAst && (_jsx(SecondaryButton, { type: "button", onClick: clearAllState, children: "New report" }))] }), baseAst && (_jsxs(_Fragment, { children: [loading && errorMessage.length === 0 ? (_jsx(TableLoadingState, {})) : (_jsx(Table, { rows: applyFormatting({
+                                    rows: pivotData?.rows || rows,
+                                    fields: pivotData?.fields || fields,
+                                }, baseAst?.columns ?? []), columns: enforceOrderOnColumns(Object.keys((pivotData?.rows[0] || rows[0]) ?? {})), error: errorMessage, rowsPerPage: 20 })), _jsxs("div", { style: {
+                                    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%' } }), _jsx(SecondaryButton, { type: "button", onClick: () => copyToClipboard(activeQuery), children: isCopying ? '✅ Copied' : 'Copy SQL' }), _jsx(Button, { onClick: () => {
+                                            setIsChartBuilderOpen(true);
+                                        }, children: "Add to dashboard" })] })] }))] }), _jsx("style", { children: `body{margin:0;}` }), _jsx(ChartBuilder, { rows: applyFormatting({ rows, fields }, baseAst?.columns ?? []), columns: processColumnsForChartBuilder(Object.keys(rows[0] ?? {})), fields: fields, pivot: pivot, query: activeQuery, showTableFormatOptions: true, showDateFieldOptions: true, showAccessControlOptions: true, title: "Add to dashboard", isEditMode: false, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, destinationDashboard: destinationDashboard, dashboardItem: dashboardItem, organizationName: organizationName })] }));
+}