@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/ReportBuilder.js

@@ -0,0 +1,3279 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState, } from 'react';
+import { DEFAULT_TAB_OPTIONS, MemoizedButton, MemoizedCheckbox, MemoizedDeleteButton, MemoizedHeader, MemoizedLabel, MemoizedSecondaryButton, MemoizedText, MemoizedPopover, QuillTabs, MemoizedModal, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillColumnSearchEmptyState, QuillChartBuilderFormContainer, QuillLoadingComponent, QuillTableSQLEditorComponent, } from './components/UiComponents';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
+import { CSS as DND_CSS } from '@dnd-kit/utilities';
+import { ClientContext, CustomFieldContext, SchemaContext, ThemeContext, } from './Context';
+import { extractColumnish, getTableAliases, getTableNames, isBoolColumnType, isDateishColumnType, isNumericColumnType, isTextColumnType, } from './components/ReportBuilder/ast';
+import { ChartBuilderWithModal, createInitialFormData } from './ChartBuilder';
+import { QuillTextInput } from './components/UiComponents';
+import { QuillSidebar, CustomContainer, QuillSelectColumn, QuillDraggableColumn, QuillSidebarHeading, QuillFilterPopover, QuillSortPopover, QuillLimitPopover, FilterPopoverWrapper, } from './components/ReportBuilder/ui';
+import { generateCurrentPeriodPostgres, generateEqualsPostgres, generateLastNPeriodsPostgres, generatePreviousPeriodPostgres, } from './components/ReportBuilder/postgres';
+import { convertBigQuery, convertGroupBy, convertRemoveSimpleParentheses, convertStringComparison, convertWildcardColumns, convertUnaryToBinary, } from './components/ReportBuilder/convert';
+import { deepCopy, formatDateComparisonNode, getDateFilterInfo, isColumnComparison, isDateTruncEquals, isInTheLastInterval, isNodeEmptyCollection, isTheCurrentInterval, isThePreviousInterval, showNodeAsRow, removeNonSelectedTableReferences, isEquals, } from './components/ReportBuilder/util';
+import { getDefaultOperatorSubtrees, OPERATOR_GROUPS, } from './components/ReportBuilder/operators';
+import { hashCode } from './utils/crypto';
+import { defaultAST, defaultBoolComparison, defaultColumn, defaultEntry, defaultNumericComparison, defaultTable, defaultVariant, } from './components/ReportBuilder/constants';
+import AddColumnModal from './components/ReportBuilder/AddColumnModal';
+import { AddSortPopover, SortSentence, } from './components/ReportBuilder/AddSortPopover';
+import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
+import { snakeAndCamelCaseToTitleCase } from './utils/textProcessing';
+import { AddLimitPopover, LimitSentence, } from './components/ReportBuilder/AddLimitPopover';
+import { updateFirstChildWidth } from './utils/width';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { QuillCard } from './components/QuillCard';
+import { getData } from './utils/dataFetcher';
+import { DATE_FORMAT_TYPES, quillFormat } from './utils/valueFormatter';
+import { getPossiblePivotFieldOptions, pivotToSql, } from './utils/pivotProcessing';
+import { getUniqueValuesByColumns, getDateRangeByColumns, getCountsByColumns, fetchTableByQuery, } from './utils/tableProcessing';
+import { useQuill } from './hooks/useQuill';
+import { getDataFromCloud } from './utils/dataFetcher';
+import { convertColumnInfoToColumnInternal, convertPostgresColumn, } from './utils/columnProcessing';
+import { getSelectFromAST, processApostrophe, processStarColumn, } from './utils/astProcessing';
+import PivotForm from './internals/ReportBuilder/PivotForm';
+import { getSchemaInfoWithCustomFields } from './utils/schema';
+import { getDateBucketFromRange } from './utils/dates';
+import FilterModal from './components/ReportBuilder/FilterModal';
+import { filterToAst, filterTreeToAst, } from './utils/astFilterProcessing';
+import useAstToFilterTree from './hooks/useAstToFilterTree';
+import { filterSentence } from './utils/filterProcessing';
+import { QuillMultiSelectComponentWithCombo } from './components/QuillMultiSelectWithCombo';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+import { EMPTY_REPORT, formatRowsFromReport } from './utils/report';
+import { parseValueFromBigQueryDates } from './utils/dataProcessing';
+export const QUILL_SERVER = (typeof process !== 'undefined' && process?.env?.QUILL_SERVER_HOST) ||
+    'https://quill-344421.uc.r.appspot.com';
+/**
+ * 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.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ReportBuilder />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ReportBuilder
+ *   initialTableName="transactions"
+ *   TableComponent={MyTable}
+ *   SelectComponent={MySelect}
+ *   ButtonComponent={MyButton}
+ *   PopoverComponent={MyPopover}
+ *   TextInputComponent={MyTextInput}
+ *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
+ * />
+ * ```
+ *
+ * ### Report Builder API
+ * @see https://docs.quillsql.com/components/report-builder
+ */
+export default function ReportBuilder({ initialTableName = '', onSubmitEditReport = () => void null, onSubmitCreateReport = () => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, DeleteButtonComponent = MemoizedDeleteButton, ModalComponent = MemoizedModal, TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponentWithCombo, TableComponent = QuillTableSQLEditorComponent, PopoverComponent = MemoizedPopover, TabsComponent = QuillTabs, CheckboxComponent = MemoizedCheckbox, SidebarComponent = QuillSidebar, ContainerComponent = CustomContainer, SelectColumnComponent = QuillSelectColumn, DraggableColumnComponent = QuillDraggableColumn, SidebarHeadingComponent = QuillSidebarHeading, FilterPopoverComponent = QuillFilterPopover, SortPopoverComponent = QuillSortPopover, LimitPopoverComponent = QuillLimitPopover, CardComponent = QuillCard, LabelComponent = MemoizedLabel, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, TextComponent = MemoizedText, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, LoadingComponent = QuillLoadingComponent, ColumnSearchEmptyState = QuillColumnSearchEmptyState, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ChartBuilderModalComponent = MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, onClickChartElement, }) {
+    const { data: report } = useQuill(reportId || '');
+    const [aiPrompt, setAiPrompt] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [baseAst, setBaseAst] = useState(null);
+    const [formData, setFormData] = useState(null);
+    const [orderedColumnNames, setOrderedColumnNames] = useState([]);
+    const [selectedColumns, setSelectedColumns] = useState([]);
+    const [selectedOrderedColumns, setSelectedOrderedColumns] = useState([]);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [activeQuery, setActiveQuery] = useState('');
+    const [activeEditItem, setActiveEditItem] = useState(null);
+    const [activePath, setActivePath] = useState(null);
+    const [openPopover, setOpenPopover] = useState(null);
+    const [loading, setLoading] = useState(!!initialTableName);
+    const [loadingSchema, setLoadingSchema] = useState(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [isPending, setIsPending] = useState(false);
+    const [isCopying, setIsCopying] = useState(false);
+    const [dataDisplayed, setDataDisplayed] = useState(false);
+    const [rows, setRows] = useState([]);
+    const [formattedRows, setFormattedRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [tempReport, setTempReport] = useState(EMPTY_REPORT);
+    const [topLevelBinaryOperator, setTopLevelBinaryOperator] = useState('AND');
+    const [uniqueValues, setUniqueValues] = useState({});
+    const [pivot, setPivot] = useState(null);
+    const [pivotData, setPivotData] = useState(null);
+    const [createdPivots, setCreatedPivots] = useState([]);
+    const [recommendedPivots, setRecommendedPivots] = useState([]);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
+    const [showPivotPopover, setShowPivotPopover] = useState(false);
+    const [isEditingPivot, setIsEditingPivot] = useState(false);
+    const [initialChartLoad, setInitialChartLoad] = useState(false);
+    const [askedAQuestion, setAskedAQuestion] = useState(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
+    const [initialLoad, setInitialLoad] = useState(!!initialTableName || !!reportId);
+    const [currentTable, setCurrentTable] = useState(initialTableName || '');
+    const parentRef = useRef(null);
+    const askAIContainerRef = useRef(null);
+    const askAILoadingContainerRef = useRef(null);
+    const [askAIInputWidth, setAskAIInputWidth] = useState(-1);
+    const [askAILoadingContainerWidth, setAskAILoadingContainerWidth] = useState(-1);
+    const [theme] = useContext(ThemeContext);
+    const [pivotRowField, setPivotRowField] = useState(undefined);
+    const [pivotColumnField, setPivotColumnField] = useState(undefined);
+    const [pivotValueField, setPivotValueField] = useState(undefined);
+    const [pivotAggregation, setPivotAggregation] = useState(undefined);
+    const [dateRanges, setDateRanges] = useState(null);
+    const [client] = useContext(ClientContext);
+    // JANK: This is temp and stupid
+    const [overrideRecommendations, setOverrideRecommendations] = useState(true);
+    const [customFields, setCustomFields] = useContext(CustomFieldContext);
+    const [fieldValuesMap, setFieldValuesMap] = useState({}); // Mapping of unique values per field, used in string filter 'in' and 'not in'
+    const filterTree = useAstToFilterTree(formData, client); // Stores the state of filters
+    useEffect(() => {
+        if (!client) {
+            return;
+        }
+        if (client.publicKey === '663416663aa9bc716e59a89d') {
+            setOverrideRecommendations(false);
+        }
+        if (!loadingSchema) {
+            fetchSchema();
+        }
+    }, [client]);
+    useEffect(() => {
+        updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+        updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+    }, [dataDisplayed]);
+    // Whenever unique values changes, update the fieldValuesMap, used in FilterModals
+    useEffect(() => {
+        const tables = getTableNames(baseAst);
+        const table = tables.length === 1 ? tables[0] : initialTableName;
+        const newFieldValues = {};
+        if (uniqueValues[table]) {
+            for (const field of Object.keys(uniqueValues[table])) {
+                newFieldValues[field] = [];
+                for (const value of Object.keys(uniqueValues[table][field])) {
+                    newFieldValues[field]?.push(value);
+                }
+            }
+        }
+        setFieldValuesMap(newFieldValues);
+    }, [uniqueValues]);
+    useEffect(() => {
+        // Since the TextInput component takes a required numeric width parameter,
+        // we dynamically calculate the width of this component here.
+        function handleResize() {
+            updateFirstChildWidth(askAIContainerRef, setAskAIInputWidth, { gap: 12 });
+            updateFirstChildWidth(askAILoadingContainerRef, setAskAILoadingContainerWidth, { gap: 12 });
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const updatePivot = async (changeField, fieldKey) => {
+        const newPivot = pivot;
+        setTableLoading(true);
+        // @ts-ignore
+        newPivot[fieldKey] = changeField;
+        if (fieldKey === 'rowField') {
+            // check to see if the new rowField value is a date field
+            const column = columns.find((c) => c.field === changeField);
+            if (column?.jsType === 'date') {
+                newPivot.rowFieldType = 'date';
+                newPivot.sort = 'true';
+                newPivot.sortField = changeField;
+                newPivot.sortFieldType = column.format;
+                newPivot.sortDirection = 'ASC';
+            }
+            else {
+                newPivot.rowFieldType = 'string';
+                newPivot.sort = undefined;
+            }
+        }
+        let dateBucket = undefined;
+        const tempDateRange = dateRanges && dateRanges[newPivot.rowField];
+        if (tempDateRange) {
+            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+        }
+        let distinctValuesForQuery = {};
+        if (pivot.columnField) {
+            distinctValuesForQuery = await getUniqueValuesByColumns([
+                {
+                    field: pivot.columnField,
+                    label: pivot.columnField,
+                    format: 'string',
+                },
+            ], activeQuery, [], client, customFields);
+        }
+        const pivotedData = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, distinctValuesForQuery);
+        setPivotData(pivotedData || []);
+        const formattedRows = formatRows(pivotedData.rows, columns, true, newPivot.aggregationType);
+        setPivot(newPivot);
+        setFormattedRows(formattedRows);
+        setTableLoading(false);
+    };
+    const enforceOrderOnColumns = (columnNames) => {
+        if (pivot) {
+            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));
+        }
+        // make the columnNames match the order of the selectedOrderedColumns
+        return columnNames.sort((a, b) => selectedOrderedColumns.indexOf(a) - selectedOrderedColumns.indexOf(b));
+        // return columnNames;
+    };
+    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(() => {
+            setAskedAQuestion(false);
+            setAiPrompt('');
+            setBaseAst(null);
+            setFormData(null);
+            setSelectedColumns([]);
+            setActiveQuery('');
+            setActiveEditItem(null);
+            setActivePath(null);
+            setOpenPopover(null);
+            setLoading(false);
+            setIsPending(false);
+            setDataDisplayed(false);
+            setRows([]);
+            setColumns([]);
+            setTopLevelBinaryOperator('AND');
+            setErrorMessage('');
+            setFormattedRows([]);
+            // setUniqueValues({});
+            setPivot(null);
+            setPivotData(null);
+            setRecommendedPivots([]);
+        }, 0);
+    };
+    useEffect(() => {
+        if (!client) {
+            return;
+        }
+        if (!initialLoad && client.publicKey) {
+            clearAllState();
+        }
+    }, [client]);
+    useEffect(() => {
+        if (activePath !== null) {
+            // update the modal with the new subtree
+            setActiveEditItem(getByKey(formData, activePath));
+        }
+    }, [formData]);
+    const formatRows = (rows, columns, pivot, aggregationType) => {
+        const copiedRows = deepCopy(rows);
+        if (pivot) {
+            const formattedRows = copiedRows.map((row) => {
+                const formattedRow = row;
+                Object.keys(row).forEach((key) => {
+                    const column = columns.find((c) => c.field === key);
+                    let format = 'string';
+                    if (!column) {
+                        format =
+                            aggregationType === 'count'
+                                ? 'whole_number'
+                                : 'two_decimal_places';
+                    }
+                    else {
+                        format = DATE_FORMAT_TYPES.includes(column.format)
+                            ? 'MMM_yyyy'
+                            : 'string';
+                    }
+                    const formattedValue = quillFormat({
+                        value: row[key],
+                        format,
+                    });
+                    formattedRow[key] = formattedValue;
+                });
+                return formattedRow;
+            });
+            return formattedRows;
+        }
+        else {
+            const formattedRows = copiedRows.map((row) => {
+                return columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = quillFormat({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            });
+            return formattedRows;
+        }
+    };
+    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]];
+            }
+        }
+        return current;
+    };
+    const copySQLToClipboard = () => {
+        let query = activeQuery;
+        if (pivot) {
+            query = pivotToSql(pivot, activeQuery, columns);
+        }
+        setIsCopying(true);
+        navigator.clipboard.writeText(query);
+        setTimeout(() => setIsCopying(false), 800);
+    };
+    const clearCheckboxes = () => {
+        const checkboxes = uniqueValues;
+        const newValues = {};
+        for (const table of Object.keys(checkboxes)) {
+            newValues[table] = {};
+            for (const column of Object.keys(checkboxes[table])) {
+                newValues[table][column] = {};
+                for (const variant of Object.keys(checkboxes[table][column])) {
+                    newValues[table][column][variant] = false;
+                }
+            }
+        }
+        setUniqueValues(newValues);
+    };
+    const fetchSqlQuery = async (ast, formData, fetchData = true) => {
+        if (fetchData) {
+            setLoading(true);
+        }
+        setErrorMessage('');
+        try {
+            const where = formData ? formData : ast?.where || null;
+            const response = await fetch(`${QUILL_SERVER}/sqlify`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    ast: { ...ast, where },
+                    publicKey: client.publicKey,
+                    useNewNodeSql: true, // new flag
+                }),
+            });
+            const data = await response.json();
+            setActiveQuery(data.query);
+            if (fetchData) {
+                fetchUponChange(ast, formData);
+            }
+            return data.query;
+        }
+        catch (error) {
+            setLoading(false);
+            console.error(error);
+        }
+    };
+    const getUniqueStringValues = async (columns, tableName) => {
+        const convertedStringColumns = columns
+            .filter((column) => {
+            return isTextColumnType(column.fieldType);
+        })
+            .map((column) => convertColumnInfoToColumnInternal(column));
+        const stringNames = convertedStringColumns.map((column) => column.field);
+        const smallStringColumns = await getCountsByColumns(convertedStringColumns, `Select ${stringNames.join(', ')} from ${tableName}`, client, customFields);
+        const smallStringNames = smallStringColumns.map((column) => column.field);
+        const newUniqueValues = await getUniqueValuesByColumns(smallStringColumns, `Select ${smallStringNames.join(', ')} from ${tableName}`, [], client, customFields);
+        const joinedUniqueValues = deepCopy(uniqueValues);
+        joinedUniqueValues[tableName] = newUniqueValues;
+        return joinedUniqueValues;
+    };
+    const getDateRanges = async (columns, tableName) => {
+        const dateColumns = columns.filter((column) => {
+            return column.fieldType === 'date';
+        });
+        if (dateColumns.length === 0) {
+            return {};
+        }
+        const dateColumnNames = dateColumns.map((column) => {
+            //@ts-ignore
+            return column.field || column.name;
+        });
+        const dateRanges = await getDateRangeByColumns(dateColumns, `Select ${dateColumnNames.join(', ')} from ${tableName}`, client, customFields);
+        return dateRanges;
+    };
+    // It's just like getColumnsInPivot but we expand the columnField
+    // if there is one to include all the variants just like it would
+    // show up in the table. (eg. category -> ...[Fuel, Food, Other])
+    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] &&
+            uniqueValues[table][columnField]) {
+            result.push(...Object.keys(uniqueValues[table][columnField]));
+        }
+        result.push(valueField, rowField);
+        return result.filter(Boolean);
+    };
+    const loadTable = async (tables) => {
+        if (!tables)
+            return;
+        setLoading(true);
+        const tableInfo = tables.find((tableInfo) => tableInfo.name === initialTableName);
+        if (tableInfo) {
+            const newUniqueValues = await getUniqueStringValues(tableInfo.columns, initialTableName);
+            if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                setUniqueValues(newUniqueValues);
+            }
+            const dateRangesTemp = await getDateRanges(tableInfo.columns, initialTableName);
+            setDateRanges(dateRangesTemp);
+        }
+        const columnsForTable = tables
+            .find((t) => t.name === initialTableName)
+            ?.columns.map((c) => c.name)
+            .sort((a, b) => {
+            const aIsId = a.endsWith('.id') ||
+                a.endsWith('_id') ||
+                a.endsWith('Id') ||
+                a === 'id';
+            const bIsId = b.endsWith('.id') ||
+                b.endsWith('_id') ||
+                b.endsWith('Id') ||
+                b === 'id';
+            if (aIsId && !bIsId)
+                return 1;
+            if (bIsId && !aIsId)
+                return -1;
+            return 0;
+        });
+        await handleAsk(`get ${columnsForTable} from ${initialTableName}`);
+        setInitialLoad(false);
+    };
+    const fetchSchema = async () => {
+        try {
+            setLoadingSchema(true);
+            const { schemaData, customFieldsByTable } = await getSchemaInfoWithCustomFields(client, 'rb');
+            setCustomFields(customFieldsByTable);
+            setSchema(schemaData ?? []);
+            setOrderedColumnNames((schemaData ?? []).flatMap((table) => table.columns
+                .map((c) => `${table.name}.${c.name}`)
+                .sort((a, b) => {
+                const aIsId = a.endsWith('.id') ||
+                    a.endsWith('_id') ||
+                    a.endsWith('Id') ||
+                    a === 'id';
+                const bIsId = b.endsWith('.id') ||
+                    b.endsWith('_id') ||
+                    b.endsWith('Id') ||
+                    b === 'id';
+                if (aIsId && !bIsId)
+                    return 1;
+                if (bIsId && !aIsId)
+                    return -1;
+                return 0;
+            })));
+            if (initialTableName) {
+                await loadTable(schemaData);
+            }
+            setLoadingSchema(false);
+            setInitialLoad(false);
+            return schemaData;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    useEffect(() => {
+        const loadChart = async () => {
+            setInitialChartLoad(true);
+            // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+            if (!report || report.referencedTables.length !== 1) {
+                setInitialChartLoad(false);
+                return;
+            }
+            try {
+                // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                const tableName = report.referencedTables[0];
+                if (!tableName) {
+                    return;
+                }
+                const resp = await getDataFromCloud(client, `astify`, {
+                    // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                    query: report.queryString,
+                    useNewNodeSql: true,
+                });
+                if (resp.success === false) {
+                    setErrorMessage(resp.message);
+                    return;
+                }
+                const ast = getSelectFromAST(resp.ast);
+                let convertedAst = processStarColumn(ast, report.columns);
+                processApostrophe(convertedAst, ['type', 'value']);
+                convertedAst = convertBigQuery(convertedAst);
+                const schemaInfo = schema.length !== 0 ? schema : await fetchSchema();
+                let newAst;
+                let groupByPivot = {};
+                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(convertedAst, 
+                // @ts-ignore
+                report.pivot, schemaInfo));
+                if (convertedAst.where) {
+                    setFormData(deepCopy(convertedAst.where));
+                }
+                // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+                setActiveQuery(report.queryString);
+                newAst = groupByPivot ? newAst : convertedAst;
+                const initialRows = await fetchUponChange(newAst, undefined);
+                if (initialRows.error) {
+                    setBaseAst(null);
+                    setErrorMessage(initialRows.message);
+                    setInitialChartLoad(false);
+                    return;
+                }
+                setBaseAst(newAst);
+                const tableInfo = schemaInfo.find((table) => table.name === tableName);
+                let newUniqueValues = undefined;
+                let dateRangesTemp = undefined;
+                if (tableName) {
+                    newUniqueValues = await getUniqueStringValues(tableInfo.columns, tableName);
+                    setUniqueValues(newUniqueValues);
+                    dateRangesTemp = await getDateRanges(tableInfo.columns, tableName);
+                    setDateRanges(dateRangesTemp);
+                }
+                if (groupByPivot) {
+                    // @ts-ignore
+                    setPivotRowField(groupByPivot.rowField);
+                    // @ts-ignore
+                    setPivotAggregation(groupByPivot.aggregationType);
+                    // @ts-ignore
+                    setPivotColumnField(groupByPivot.columnField);
+                    // @ts-ignore
+                    setPivotValueField(groupByPivot.valueField);
+                    setPivot(groupByPivot);
+                    let dateBucket = undefined;
+                    const tempDateRange = dateRangesTemp &&
+                        groupByPivot.rowField &&
+                        dateRangesTemp[groupByPivot.rowField];
+                    if (tempDateRange) {
+                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                    }
+                    const pivotedData = await generatePivotTable(
+                    // @ts-ignore
+                    groupByPivot, initialRows, tempDateRange, false, -1, undefined, dateBucket, report, client, newUniqueValues[tableName]);
+                    setPivotData(pivotedData || []);
+                    const formattedRows = formatRows(pivotedData.rows, report.columns, true, 
+                    // @ts-ignore
+                    groupByPivot.aggregationType);
+                    setFormattedRows(formattedRows);
+                }
+                else {
+                    const formattedRows = formatRows(report.rows, report.columns);
+                    setFormattedRows(formattedRows);
+                }
+                setCurrentTable(tableName);
+            }
+            catch (error) {
+                console.error(error);
+                setErrorMessage('Error loading report');
+            }
+            // This handles a flashing issue
+            setTimeout(() => {
+                setInitialChartLoad(false);
+            }, 500);
+        };
+        // @ts-ignore THIS PROCESS SHOULD BE UPDATED TO NOT USE USEQUILL
+        if (report && report.referencedTables.length === 1) {
+            loadChart();
+        }
+    }, [report]);
+    useEffect(() => {
+        if (schema.length === 0) {
+            fetchSchema();
+        }
+    }, [schema, initialTableName, reportId]);
+    const updateFormData = (updates, { isDeletion = false, isInsertion = false, isReplaceSubtree = false, isAddVariant = false, isDeleteVariant = false, topLevelBinOp = 'OR', isCondition = undefined, }) => {
+        // Function to immutably update or delete nodes based on their path
+        // TODO: fix the following horible code
+        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);
+                const newAst = deepCopy({
+                    ...defaultAST,
+                    ...baseAst,
+                    ...(!baseAst?.columns && {
+                        columns: getAllPossibleColumns().map((c) => {
+                            const newColumn = deepCopy(defaultColumn);
+                            newColumn.expr.column = c.name;
+                            return newColumn;
+                        }),
+                    }),
+                    ...(!baseAst?.from && {
+                        from: [{ ...defaultTable, table: initialTableName }],
+                    }),
+                    where: null,
+                });
+                setBaseAst(newAst);
+                fetchSqlQuery(newAst, null);
+                return;
+            }
+            if (!formData && isInsertion) {
+                const newAst = deepCopy({
+                    ...defaultAST,
+                    ...baseAst,
+                    ...(!baseAst?.columns && {
+                        columns: getAllPossibleColumns().map((c) => {
+                            const newColumn = deepCopy(defaultColumn);
+                            newColumn.expr.column = c.name;
+                            return newColumn;
+                        }),
+                    }),
+                    ...(!baseAst?.from && {
+                        from: [{ ...defaultTable, table: initialTableName }],
+                    }),
+                    where: value,
+                });
+                setFormData(value);
+                setBaseAst(newAst);
+                fetchSqlQuery(newAst, value);
+                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: topLevelBinOp,
+                    isCondition: isCondition,
+                    left: newState,
+                    right: value,
+                };
+            }
+            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);
+            const newAst = {
+                ...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 },
+            };
+            setBaseAst(newAst);
+            fetchSqlQuery(newAst, 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: newState,
+                    right: {
+                        ...defaultEntry,
+                        left: {
+                            ...defaultEntry.left,
+                            column: defaultColumn,
+                        },
+                    },
+                };
+            }
+            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, {});
+    };
+    // Function to handle operator changes
+    const handleOperatorChange = (value, node, keyPrefix, column = null) => {
+        if (!keyPrefix) {
+            setTopLevelBinaryOperator(value);
+        }
+        if (isPending) {
+            updateActiveItem([{ path: keyPrefix + 'operator', value }], { column });
+        }
+        else {
+            updateFormData([{ path: keyPrefix + 'operator', value }], { column });
+        }
+    };
+    // 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,
+        });
+    };
+    // 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: 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: 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 column = columns.find((col) => col.field === columnName);
+        return column?.fieldType;
+    };
+    const emptyPivotColumns = () => {
+        if (pivot && pivot.rowField && pivot.columnField && pivot.valueField) {
+            return [
+                { label: snakeAndCamelCaseToTitleCase(pivot.rowField) },
+                { label: snakeAndCamelCaseToTitleCase(pivot.columnField) },
+            ];
+        }
+        else if (pivot && pivot.rowField && pivot.valueField) {
+            return [
+                { label: snakeAndCamelCaseToTitleCase(pivot.rowField) },
+                { label: snakeAndCamelCaseToTitleCase(pivot.valueField) },
+            ];
+        }
+        else {
+            return [{ label: snakeAndCamelCaseToTitleCase(pivot.valueField) }];
+        }
+    };
+    const [previousPage, setPreviousPage] = useState(0);
+    const [currentProcessing, setCurrentProcessing] = useState({
+        page: DEFAULT_PAGINATION,
+    });
+    const [numberOfRows, setNumberOfRows] = useState(0);
+    const [tableLoading, setTableLoading] = useState(false);
+    const onPageChange = (page) => {
+        if (currentProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...currentProcessing.page, page };
+            const updatedProcessing = { ...currentProcessing, page: newPagination };
+            setCurrentProcessing(updatedProcessing);
+            handleRunQuery(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (shouldSortInMemory(DEFAULT_PAGINATION, numberOfRows, !!pivot)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        handleRunQuery(updatedProcessing, true);
+        setCurrentProcessing(updatedProcessing);
+        setPreviousPage(0);
+    };
+    const handleRunQuery = async (processing, resetRows = false) => {
+        try {
+            setErrorMessage('');
+            setTableLoading(true);
+            const tableInfo = await fetchTableByQuery(activeQuery, client, processing, customFields);
+            if (tableInfo.error) {
+                throw new Error(tableInfo.error);
+            }
+            else if (tableInfo.rows.length === 0) {
+                throw new Error('No data found');
+            }
+            if (tableInfo.rowCount) {
+                setNumberOfRows(tableInfo.rowCount);
+            }
+            setCurrentProcessing(processing);
+            let tempRows = [...rows, ...tableInfo.rows];
+            if (resetRows) {
+                tempRows = tableInfo.rows;
+            }
+            setRows(tempRows);
+            setFormattedRows(formatRowsFromReport({ rows: tempRows, columns: tableInfo.columns }));
+            setColumns(tableInfo.columns);
+            setTableLoading(false);
+        }
+        catch (e) {
+            setTableLoading(false);
+            setErrorMessage('Failed to run SQL query: ' + e.message);
+            setRows([]);
+            setColumns([]);
+            return;
+        }
+    };
+    /**
+     * 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, dateFilterType, intervalCount, intervalType, intervalPaths, } = getDateFilterInfo(node);
+                    const isPlural = intervalCount !== 1 && dateFilterType !== 'in the current'
+                        ? '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(SelectComponent, { value: dateColumn, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: getAllPossibleColumns().map((column) => ({
+                                    label: snakeAndCamelCaseToTitleCase(column.displayName),
+                                    value: column.name,
+                                })), width: 200 }), _jsx(SelectComponent, { value: dateFilterType, onChange: (event) => {
+                                    if (event.target.value === dateFilterType)
+                                        return null;
+                                    let newSubtree = {};
+                                    // TODO: implement one for each database type (eg. pg, snowflake, etc.)
+                                    if (event.target.value === 'in the last') {
+                                        newSubtree = generateLastNPeriodsPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
+                                        });
+                                    }
+                                    else if (event.target.value === 'in the previous') {
+                                        newSubtree = generatePreviousPeriodPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${intervalType}`,
+                                            currentPeriod: intervalType,
+                                        });
+                                    }
+                                    else if (event.target.value === 'in the current') {
+                                        newSubtree = generateCurrentPeriodPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: intervalType,
+                                        });
+                                    }
+                                    else if (event.target.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' },
+                                ], width: 200 }), !['in the current', 'equals'].includes(dateFilterType) && (_jsx(TextInputComponent, { id: "date_filter_interval_count", value: intervalCount?.toString() ?? '', width: 70, onChange: (e) => {
+                                    if (Number.isNaN(parseFloat(e.target.value || '0'))) {
+                                        alert('Please input a number.');
+                                        return;
+                                    }
+                                    const isPluralNow = parseFloat(e.target.value || '0') !== 1 ? 's' : '';
+                                    intervalPaths.forEach((intervalPath) => handleChangeText([
+                                        {
+                                            value: `${e.target.value || 0} ${intervalType}${isPluralNow}`,
+                                            path: keyPrefix + intervalPath,
+                                        },
+                                    ]));
+                                } })), _jsx(SelectComponent, { value: intervalType, onChange: (event) => {
+                                    if (intervalPaths.length === 1 &&
+                                        dateFilterType !== 'in the previous') {
+                                        handleChangeText([
+                                            {
+                                                value: intervalCount !== null
+                                                    ? `${intervalCount} ${event.target.value}${isPlural}`
+                                                    : event.target.value,
+                                                path: keyPrefix + intervalPaths[0],
+                                            },
+                                        ]);
+                                        return;
+                                    }
+                                    let newSubtree;
+                                    if (dateFilterType === 'in the previous') {
+                                        newSubtree = generatePreviousPeriodPostgres({
+                                            dateField: dateColumn,
+                                            intervalPeriod: `${intervalCount ?? 1} ${event.target.value}`,
+                                            currentPeriod: event.target.value,
+                                        });
+                                    }
+                                    else if (dateFilterType === 'equals') {
+                                        newSubtree = generateEqualsPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: event.target.value,
+                                            timestamp: rawDateStringEquals,
+                                        });
+                                    }
+                                    else {
+                                        newSubtree = generateCurrentPeriodPostgres({
+                                            dateField: dateColumn,
+                                            currentPeriod: event.target.value,
+                                        });
+                                    }
+                                    handleReplaceSubtree(keyPrefix, newSubtree);
+                                }, options: dateFilterType === 'in the previous' ||
+                                    dateFilterType === 'in the last'
+                                    ? [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ]
+                                    : [
+                                        { label: `year${isPlural}`, value: 'year' },
+                                        { label: `quarter${isPlural}`, value: 'quarter' },
+                                        { label: `month${isPlural}`, value: 'month' },
+                                        { label: `week${isPlural}`, value: 'week' },
+                                        { label: `day${isPlural}`, value: 'day' },
+                                        { label: `hour${isPlural}`, value: 'hour' },
+                                    ], width: 200 }), dateFilterType === 'equals' && (_jsx(TextInputComponent, { id: "date_filter_equals_raw_date", value: rawDateStringEquals, width: 120, onChange: (e) => {
+                                    handleChangeText([
+                                        {
+                                            value: e.target.value,
+                                            path: keyPrefix + rawDateStringEqualsPath,
+                                        },
+                                    ]);
+                                } }))] }));
+                }
+                else if (isInTheLastInterval(node, client.databaseType)) {
+                    const { dateColumn } = getDateFilterInfo(node);
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: snakeAndCamelCaseToTitleCase(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(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_LAST', onChange: (event) => {
+                                    handleOperatorChange(event.target.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' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
+                                ], width: 200 }), _jsx(TextInputComponent, { id: 'date_window_interval_count', value: node.right.args.value[1].expr.value, width: 120, onChange: (e) => {
+                                    handleChange([
+                                        {
+                                            value: e.target.value,
+                                            path: keyPrefix + 'right.args.value||1.expr.value',
+                                        },
+                                    ]);
+                                } }), _jsx("div", { children: _jsx(SelectComponent, { value: node.right.args.value[1].unit, onChange: (event) => handleChange([
+                                        {
+                                            value: event.target.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' },
+                                    ], width: 200 }) })] }));
+                }
+                else if (isTheCurrentInterval(node, client.databaseType)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: snakeAndCamelCaseToTitleCase(column.displayName),
+                        value: column.name,
+                    }));
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_CURRENT', onChange: (event) => {
+                                    handleOperatorChange(event.target.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' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
+                                    // { label: 'equals', value: 'equals' },
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
+                                    handleChange([
+                                        {
+                                            value: event.target.value,
+                                            path: 'right.args.value||1.column',
+                                        },
+                                        {
+                                            value: event.target.value,
+                                            path: 'left.args.value||1.column',
+                                        },
+                                    ]);
+                                }, options: [
+                                    { label: `year`, value: 'YEAR' },
+                                    { label: `quarter`, value: 'QUARTER' },
+                                    { label: `month`, value: 'MONTH' },
+                                    { label: `week`, value: 'WEEK' },
+                                ], width: 200 })] }));
+                }
+                else if (isThePreviousInterval(node)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: snakeAndCamelCaseToTitleCase(column.displayName),
+                        value: column.name,
+                    }));
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'IN_THE_PREVIOUS', onChange: (event) => {
+                                    handleOperatorChange(event.target.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' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
+                                    // { label: 'equals', value: 'equals' },
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.left.args.value[1].column, onChange: (event) => {
+                                    const dayConversion = {
+                                        YEAR: 365,
+                                        QUARTER: 90,
+                                        MONTH: 30,
+                                        WEEK: 7,
+                                    };
+                                    handleChange([
+                                        {
+                                            value: event.target.value,
+                                            path: 'left.args.value||1.column',
+                                        },
+                                        {
+                                            value: event.target.value,
+                                            path: 'right.args.value||1.column',
+                                        },
+                                        {
+                                            value: dayConversion[event.target.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' },
+                                ], width: 200 })] }));
+                }
+                else if (isEquals(node, client.databaseType)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: snakeAndCamelCaseToTitleCase(column.displayName),
+                        value: column.name,
+                    }));
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 20,
+                        }, children: [_jsx(SelectComponent, { value: node.left.column, onChange: (event) => {
+                                    const columnType = getColumnTypeByName(event.target.value);
+                                    if (isDateishColumnType(columnType)) {
+                                        // handleChange(value, keyPrefix + dateColumnPath, "text");
+                                        handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                    }
+                                    else if (isNumericColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else if (isBoolColumnType(columnType)) {
+                                        const newSubtree = deepCopy(defaultBoolComparison);
+                                        newSubtree.left.column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                    else {
+                                        const newSubtree = deepCopy(defaultEntry);
+                                        newSubtree.left.args.value[0].column = event.target.value;
+                                        handleReplaceSubtree(keyPrefix, newSubtree);
+                                    }
+                                }, options: options, width: 200 }), _jsx(SelectComponent, { value: 'EQUALS', onChange: (event) => {
+                                    handleOperatorChange(event.target.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' },
+                                    { label: 'is not null', value: 'IS NOT' },
+                                    { label: 'is null', value: 'IS' },
+                                    // { label: 'equals', value: 'equals' },
+                                ], width: 200 }), _jsx(SelectComponent, { value: node.right.args.value[1].column, onChange: (event) => {
+                                    handleChange([
+                                        {
+                                            value: event.target.value,
+                                            path: 'right.args.value||1.column',
+                                        },
+                                        {
+                                            value: event.target.value,
+                                            path: 'left.args.value||1.column',
+                                        },
+                                    ]);
+                                }, options: [
+                                    { label: `year`, value: 'YEAR' },
+                                    { label: `quarter`, value: 'QUARTER' },
+                                    { label: `month`, value: 'MONTH' },
+                                    { label: `week`, value: 'WEEK' },
+                                ], width: 200 }), _jsx(TextInputComponent, { id: 'quoted_string', value: node.right.args.value[0].value, width: 120, onChange: (e) => handleChange([
+                                    {
+                                        value: e.target.value,
+                                        path: 'right.args.value||0.value',
+                                    },
+                                ]) })] }));
+                }
+                else if (isColumnComparison(node)) {
+                    const options = getAllPossibleColumns().map((column) => ({
+                        label: snakeAndCamelCaseToTitleCase(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 tables = getTableNames(baseAst);
+                    const table = tables.length === 1 ? tables[0] : initialTableName;
+                    const column = schema
+                        .find((tableInfo) => tableInfo.name === table)
+                        ?.columns.find((col) => col.name === leftChildValue);
+                    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 exactly', value: 'LIKE' },
+                                { label: 'is not exactly', value: 'NOT LIKE' },
+                                { label: 'is', value: 'IN' },
+                                { label: 'is not', 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' },
+                            ]
+                            : []),
+                    ];
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            gap: 12,
+                            flexDirection: 'column',
+                            width: '100%',
+                            padding: '6px 0px',
+                        }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    gap: 20,
+                                    flexDirection: showNodeAsRow(node, formData)
+                                        ? 'row'
+                                        : 'column',
+                                    width: '100%',
+                                }, children: [_jsx(SelectComponent, { value: leftChildValue, onChange: (event) => {
+                                            const columnType = getColumnTypeByName(event.target.value);
+                                            if (isDateishColumnType(columnType)) {
+                                                handleOperatorChange('IN_THE_LAST', node, keyPrefix, event.target.value);
+                                            }
+                                            else if (isNumericColumnType(columnType)) {
+                                                const newSubtree = deepCopy(defaultNumericComparison);
+                                                newSubtree.left.column = event.target.value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
+                                            else if (isBoolColumnType(columnType)) {
+                                                const newSubtree = deepCopy(defaultBoolComparison);
+                                                newSubtree.left.column = event.target.value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
+                                            else {
+                                                const newSubtree = deepCopy(defaultEntry);
+                                                newSubtree.left.args.value[0].column = event.target.value;
+                                                handleReplaceSubtree(keyPrefix, newSubtree);
+                                            }
+                                        }, options: options, width: 200 }), operatorOptions.length > 0 && (_jsx(SelectComponent, { value: node.operator, onChange: (event) => {
+                                            handleOperatorChange(event.target.value, node, keyPrefix, leftChildValue);
+                                        }, options: operatorOptions, width: 200 })), 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: uniqueValues[table] &&
+                                    Object.keys(uniqueValues[table][leftChildValue] ?? {}).map((key) => (_jsx(CheckboxComponent, { label: key, isChecked: uniqueValues[table][leftChildValue][key], onChange: (event) => {
+                                            const newValues = deepCopy(uniqueValues);
+                                            newValues[table][leftChildValue][key] =
+                                                event.target.checked;
+                                            setUniqueValues(newValues);
+                                            if (event.target.checked) {
+                                                handleInsertVariant(keyPrefix + 'right.' + 'value', key);
+                                            }
+                                            else {
+                                                handleDeleteVariant(keyPrefix + 'right.' + 'value', key);
+                                            }
+                                        } }))) }, keyPrefix + 'right.'))] }));
+                }
+                else {
+                    const columnName = node.left.column;
+                    const column = schema
+                        .find((tableInfo) => tableInfo.name === currentTable)
+                        ?.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(SelectComponent, { value: node.operator, onChange: (event) => {
+                                    handleOperatorChange(event.target.value, node, keyPrefix);
+                                }, 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 exactly', value: 'LIKE' },
+                                            { label: 'is not exactly', value: 'NOT LIKE' },
+                                            { label: 'is', value: 'IN' },
+                                            { label: 'is not', 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' },
+                                        ]
+                                        : []),
+                                    // { label: `minus`, value: "-" },
+                                    // { label: `plus`, value: "+" },
+                                ], width: 200 }), node.right && renderNode(node.right, keyPrefix + 'right.')] }, keyPrefix));
+                }
+            case 'column_ref': {
+                const options = getAllPossibleColumns().map((column) => ({
+                    label: snakeAndCamelCaseToTitleCase(column.displayName),
+                    value: column.name,
+                }));
+                return (_jsx(SelectComponent, { value: node.column ?? options[0]?.value, onChange: (event) => {
+                        handleChange([
+                            { value: event.target.value, path: keyPrefix + 'column' },
+                        ]);
+                    }, options: options, width: 200 }));
+            }
+            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(TextInputComponent, { id: `expr_list_${index}`, width: 200, value: elem.value, onChange: (e) => handleChange([
+                                        {
+                                            value: e.target.value,
+                                            path: keyPrefix + `value.${index}.`,
+                                        },
+                                    ]) }, `input_${index}`));
+                            }
+                            return renderNode(elem, keyPrefix + `value.${index}.`);
+                        }), len > 1 && (_jsx(SecondaryButtonComponent, { label: '-', onClick: () => handleDeleteVariant(keyPrefix + 'value') })), _jsx(SecondaryButtonComponent, { onClick: () => handleInsertVariant(keyPrefix + 'value'), label: '+' })] }, keyPrefix));
+            }
+            case 'double_quote_string':
+            case 'single_quote_string':
+                return (_jsx(TextInputComponent, { id: 'quoted_string', value: node.value.replaceAll('%', ''), width: 120, onChange: (e) => handleChange([
+                        {
+                            value: e.target.value,
+                            path: keyPrefix + 'value',
+                        },
+                    ]) }));
+            case 'null':
+                return _jsx("div", {});
+            case 'number':
+                return (_jsx(TextInputComponent, { id: "quill_number_input", value: node.value, width: 120, onChange: (e) => {
+                        handleChange([
+                            {
+                                value: e.target.value,
+                                path: keyPrefix + 'value',
+                            },
+                        ]);
+                    } }));
+            case 'bool':
+                return (_jsx(SelectComponent, { value: node.value.toString(), onChange: (event) => {
+                        let formatted = true;
+                        if (event.target.value === 'false') {
+                            formatted = false;
+                        }
+                        handleChange([
+                            {
+                                value: formatted,
+                                path: keyPrefix + 'value',
+                            },
+                        ]);
+                    }, options: [
+                        { label: 'is true', value: 'true' },
+                        { label: 'is false', value: 'false' },
+                    ], width: 200 }));
+            case 'function':
+                if (!node.args) {
+                    return _jsx("label", {});
+                }
+                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 isValidPivot = (fields) => {
+        let validPivot = true;
+        if (pivot.rowField &&
+            !fields.find((field) => field.name === pivot.rowField)) {
+            validPivot = false;
+        }
+        if (pivot.valueField &&
+            !fields.find((field) => field.name === pivot.valueField)) {
+            validPivot = false;
+        }
+        if (pivot.columnField &&
+            !fields.find((field) => field.name === pivot.columnField)) {
+            validPivot = false;
+        }
+        return validPivot;
+    };
+    /**
+     * @param filterTree
+     * Returns a list of filters to be displayed
+     * Replaces the functionality of renderNodes in the context of filters
+     */
+    const renderFilters = (filterTree) => {
+        let tree = filterTree;
+        let filterStack = [];
+        /**
+         * Function that takes in a FilterTree and flattens it into an array using in order traversal
+         */
+        function traverseTree(node) {
+            if (!node) {
+                return;
+            }
+            if (node.leaf) {
+                filterStack.push(node);
+            }
+            else {
+                traverseTree(node.leftNode);
+                filterStack.push(node);
+                traverseTree(node.rightNode);
+            }
+        }
+        /**
+         * Given an array of Filters (presumed to be in in-order state), generate
+         * the corresponding Filter tree. Essentially the reverse of what traverseTree does
+         */
+        function filterStackToFilterTree(stack) {
+            function buildTree(i) {
+                const newNode = {
+                    leaf: false,
+                    operator: null,
+                    leftNode: null,
+                    rightNode: null,
+                };
+                if (i >= stack.length) {
+                    return null;
+                }
+                else if (stack[i].leaf) {
+                    if (i < stack.length - 1) {
+                        // more nodes later
+                        newNode.operator = stack[i + 1].operator;
+                        newNode.leftNode = {
+                            leaf: true,
+                            leftNode: null,
+                            rightNode: null,
+                            operator: null,
+                            value: stack[i].value,
+                        };
+                        newNode.rightNode = buildTree(i + 2);
+                    }
+                    else {
+                        newNode.leaf = true;
+                        newNode.value = stack[i].value;
+                    }
+                }
+                return newNode;
+            }
+            return buildTree(0);
+        }
+        traverseTree(tree);
+        // Remove null (invalid) filters from filter stack
+        filterStack = filterStack.filter((filter) => {
+            return ((!filter.leaf &&
+                filter.rightNode &&
+                (!filter.rightNode.leaf || filter.rightNode.value)) ||
+                (filter.leaf && filter.value));
+        });
+        // Render filterStack
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: filterStack.map((item, index) => {
+                if (!item.leaf &&
+                    (item.operator === 'and' || item.operator === 'or')) {
+                    return (_jsx("div", { style: {
+                            width: 'fit-content',
+                            marginBottom: '8px',
+                            marginTop: '8px',
+                        }, children: _jsx(TabsComponent, { value: item.operator.toUpperCase(), options: DEFAULT_TAB_OPTIONS, onChange: () => {
+                                if (item.operator === 'and') {
+                                    item.operator = 'or';
+                                }
+                                else {
+                                    item.operator = 'and';
+                                }
+                                let newFormData = null;
+                                if (tree) {
+                                    newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                                }
+                                const newAst = deepCopy({
+                                    ...defaultAST,
+                                    ...baseAst,
+                                    ...(!baseAst?.columns && {
+                                        columns: getAllPossibleColumns().map((c) => {
+                                            const newColumn = deepCopy(defaultColumn);
+                                            newColumn.expr.column = c.name;
+                                            return newColumn;
+                                        }),
+                                    }),
+                                    ...(!baseAst?.from && {
+                                        from: [{ ...defaultTable, table: initialTableName }],
+                                    }),
+                                    where: newFormData,
+                                });
+                                setBaseAst(newAst);
+                                setFormData(newFormData);
+                                fetchSqlQuery(newAst, newFormData);
+                            } }) }, index));
+                }
+                else {
+                    return (_jsx(FilterPopoverWrapper, { schema: schema.find((s) => s.name === currentTable || s.displayName === currentTable) ?? schema[0], filter: item.value, filterLabel: item.value ? filterSentence(item.value) : '', index: index, FilterTagComponent: FilterPopoverComponent, FilterModal: FilterModal, fieldValuesMap: fieldValuesMap, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent, handleFilterSave: (filter) => {
+                            item.value = filter;
+                            let newFormData = null;
+                            if (tree) {
+                                newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                            }
+                            const newAst = deepCopy({
+                                ...defaultAST,
+                                ...baseAst,
+                                ...(!baseAst?.columns && {
+                                    columns: getAllPossibleColumns().map((c) => {
+                                        const newColumn = deepCopy(defaultColumn);
+                                        newColumn.expr.column = c.name;
+                                        return newColumn;
+                                    }),
+                                }),
+                                ...(!baseAst?.from && {
+                                    from: [{ ...defaultTable, table: initialTableName }],
+                                }),
+                                where: newFormData,
+                            });
+                            setBaseAst(newAst);
+                            setFormData(newFormData);
+                            fetchSqlQuery(newAst, newFormData);
+                        }, handleFilterDelete: (i) => {
+                            if (i > 0) {
+                                filterStack.splice(i - 1, 2);
+                            }
+                            else {
+                                if (filterStack.length > 1) {
+                                    filterStack.splice(i, 2);
+                                }
+                                else {
+                                    filterStack.splice(i, 1);
+                                }
+                            }
+                            tree = filterStackToFilterTree(filterStack);
+                            let newFormData = null;
+                            if (tree) {
+                                newFormData = filterTreeToAst(tree, client.databaseType.toLowerCase());
+                            }
+                            const newAst = deepCopy({
+                                ...defaultAST,
+                                ...baseAst,
+                                ...(!baseAst?.columns && {
+                                    columns: getAllPossibleColumns().map((c) => {
+                                        const newColumn = deepCopy(defaultColumn);
+                                        newColumn.expr.column = c.name;
+                                        return newColumn;
+                                    }),
+                                }),
+                                ...(!baseAst?.from && {
+                                    from: [{ ...defaultTable, table: initialTableName }],
+                                }),
+                                where: newFormData,
+                            });
+                            setBaseAst(newAst);
+                            setFormData(newFormData);
+                            fetchSqlQuery(newAst, newFormData);
+                        } }, 'filter' + index));
+                }
+            }) }));
+    };
+    const getAllPossibleColumns = () => {
+        if (!baseAst || !baseAst.from) {
+            return schema.flatMap((table) => table.columns.map((c) => ({
+                ...c,
+                table: table.displayName,
+            })));
+        }
+        // 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 schema
+            .filter((t) => tableNamesInQuery.includes(t.displayName))
+            .flatMap((table) => table.columns
+            .map((c) => ({
+            ...c,
+            table: table.displayName,
+        }))
+            .sort((a, b) => {
+            const aIsId = a.name.toLowerCase() === 'id' ||
+                a.name.toLowerCase().endsWith('_id') ||
+                a.name.endsWith('Id');
+            const bIsId = b.name.toLowerCase() === 'id' ||
+                b.name.toLowerCase().endsWith('_id') ||
+                b.name.endsWith('Id');
+            if (aIsId && !bIsId)
+                return 1;
+            if (bIsId && !aIsId)
+                return -1;
+            return 0;
+        }));
+    };
+    /**
+     * 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('.');
+            const selectedTable = selectedColumns[0].split('.')[0];
+            return selectedTable === table;
+        });
+        return selectedColumns.length === allColumns.length;
+    };
+    const nameToColumn = (name) => ({
+        type: 'expr',
+        expr: {
+            type: 'column_ref',
+            table: null,
+            column: name,
+        },
+        as: null,
+    });
+    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(TabsComponent, { value: topLevelBinaryOperator, options: DEFAULT_TAB_OPTIONS, onChange: (event) => setTopLevelBinaryOperator(event.target.value) }), activeEditItem && renderNode(activeEditItem), _jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        gap: 8,
+                        justifyContent: 'end',
+                    }, children: _jsx(ButtonComponent, { onClick: onSave, label: 'Add condition' }) })] }));
+    };
+    const fetchUponChange = async (baseAst, newFormData) => {
+        // if newFormData is null still use it
+        const curFormData = newFormData !== undefined ? newFormData : formData;
+        let rows;
+        if ((curFormData || baseAst) && !loading) {
+            try {
+                setLoading(true);
+                const hostedBody = {
+                    metadata: {
+                        clientId: client.publicKey,
+                        ast: { ...baseAst, where: curFormData },
+                        publicKey: client.publicKey,
+                        orgId: client.customerId,
+                        task: 'patterns',
+                        getCustomFields: false,
+                        customFields,
+                        additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                        useUpdatedDataGathering: true,
+                        useNewNodeSql: true, // new flag
+                    },
+                };
+                const tables = getTableNames(baseAst);
+                const table = tables.length >= 1 ? tables[0] : initialTableName;
+                let newUniqueValues = uniqueValues;
+                let dateRangesTemp = dateRanges;
+                let curReport = tempReport;
+                if ((newUniqueValues && Object.keys(newUniqueValues).length === 0) ||
+                    table !== currentTable) {
+                    const tableInfo = schema.find((tableInfo) => tableInfo.name === table);
+                    if (tableInfo) {
+                        newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                        if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                            setUniqueValues(newUniqueValues);
+                        }
+                        dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                        setDateRanges(dateRangesTemp || {});
+                    }
+                    setCurrentTable(table);
+                }
+                const cloudBody = {};
+                const data2 = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+                if (data2.success === false) {
+                    throw new Error(data2.errorMessage);
+                }
+                if (client.databaseType &&
+                    client.databaseType.toLowerCase() === 'bigquery') {
+                    parseValueFromBigQueryDates(data2.rows, columns);
+                }
+                rows = data2.rows;
+                if (data2.rowCount) {
+                    setNumberOfRows(data2.rowCount);
+                }
+                if (data2.rows && data2.rows.length) {
+                    if (pivot) {
+                        // check if any of the pivot fields aren't in the data2.fields array
+                        if (!isValidPivot(data2.fields)) {
+                            const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                            setPivot(null);
+                            setPivotData(null);
+                            setRows(data2.rows);
+                            setColumns(processedFields);
+                            if (data2.rowCount) {
+                                const processedFormData = report
+                                    ? report
+                                    : createInitialFormData(processedFields);
+                                setNumberOfRows(data2.rowCount);
+                                curReport = {
+                                    ...formData,
+                                    ...processedFormData,
+                                    itemQuery: data2.itemQuery,
+                                    rowCount: data2.rowCount,
+                                    filtersApplied: [],
+                                    rows: data2.rows,
+                                    columns: processedFields,
+                                };
+                                setTempReport(curReport);
+                            }
+                            const formattedRows = formatRows(data2.rows, processedFields, false);
+                            setFormattedRows(formattedRows);
+                            return;
+                        }
+                        curReport = {
+                            ...formData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                        };
+                        // Do all of this to make sure we have the right unique columns when applying a pivot
+                        let dateBucket = undefined;
+                        const tempDateRange = dateRangesTemp &&
+                            pivot.rowField &&
+                            dateRangesTemp[pivot.rowField];
+                        if (tempDateRange) {
+                            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                        }
+                        let distinctValuesForQuery = {};
+                        if (pivot.columnField) {
+                            const sqlQuery = await fetchSqlQuery({ ...baseAst, where: curFormData }, null, false);
+                            distinctValuesForQuery = await getUniqueValuesByColumns([
+                                {
+                                    field: pivot.columnField,
+                                    label: pivot.columnField,
+                                    format: 'string',
+                                },
+                            ], sqlQuery, [], client, customFields);
+                        }
+                        const pivotedData = await generatePivotTable(
+                        // @ts-ignore
+                        pivot, data2.rows, undefined, false, -1, undefined, dateBucket, curReport, client, distinctValuesForQuery ? distinctValuesForQuery : undefined);
+                        console.info(`%c[Pivot]: ${JSON.stringify(pivot)}`, 'color: dimgray');
+                        const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                        setPivotData(pivotedData);
+                        setRows(data2.rows);
+                        setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : createInitialFormData(processedFields);
+                            setNumberOfRows(data2.rowCount);
+                            setTempReport({
+                                ...formData,
+                                ...processedFormData,
+                                itemQuery: data2.itemQuery,
+                                rowCount: data2.rowCount,
+                                filtersApplied: [],
+                                rows: data2.rows,
+                                columns: processedFields,
+                            });
+                        }
+                        const formattedRows = formatRows(pivotedData.rows, processedFields, true, pivot.aggregationType);
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
+                        }));
+                        setFormattedRows(formattedRows);
+                    }
+                    else {
+                        const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                        setRows(data2.rows);
+                        setColumns(processedFields);
+                        if (data2.rowCount) {
+                            const processedFormData = report
+                                ? report
+                                : createInitialFormData(processedFields);
+                            setNumberOfRows(data2.rowCount);
+                            setTempReport({
+                                ...formData,
+                                ...processedFormData,
+                                itemQuery: data2.itemQuery,
+                                rowCount: data2.rowCount,
+                                filtersApplied: [],
+                                rows: data2.rows,
+                                columns: processedFields,
+                            });
+                        }
+                        setSelectedColumns(processedFields.map((column) => {
+                            return `${table}.${column.field}`;
+                        }));
+                        const formattedRows = formatRows(data2.rows, processedFields, false);
+                        setFormattedRows(formattedRows);
+                        if (data2.errorMessage) {
+                            setErrorMessage(`Error: ${data2.errorMessage}`);
+                        }
+                    }
+                }
+                else {
+                    setRows([]);
+                    setColumns([]);
+                    setFormattedRows([]);
+                    setPivotData(null);
+                }
+                setLoading(false);
+                setDataDisplayed(true);
+                return rows;
+            }
+            catch (e) {
+                setErrorMessage(e.message);
+                setLoading(false);
+                setDataDisplayed(true);
+                setRows([]);
+                setColumns([]);
+                setFormattedRows([]);
+                setPivotData(null);
+                return { error: true, message: e.message };
+            }
+        }
+    };
+    // 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;
+            }
+        }
+        return false;
+    };
+    const handleAsk = async (overridePrompt = '') => {
+        if (!aiPrompt && !overridePrompt) {
+            return;
+        }
+        try {
+            setLoading(true);
+            setAskedAQuestion(true);
+            setErrorMessage('');
+            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(`${QUILL_SERVER}/magic`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            initialQuestion: aiPrompt || overridePrompt,
+                            publicKey: client.publicKey,
+                            useNewNodeSql: true, // new flag
+                        }),
+                    });
+                }
+                else {
+                    res = await fetch(`${QUILL_SERVER}/magic/edit`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            sqlQuery: activeQuery,
+                            initialQuestion: aiPrompt,
+                            publicKey: client.publicKey,
+                            useNewNodeSql: true, // new flag
+                        }),
+                    });
+                }
+                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 currentSchema = schema;
+            if (currentSchema && currentSchema.length === 0) {
+                currentSchema = await fetchSchema();
+            }
+            let newAst, groupByPivot;
+            if (ast) {
+                // Unwrap the ast object, supporting many possible types
+                ast = ast.length ? ast[0] : ast;
+                newAst = convertBigQuery(ast);
+                newAst = convertWildcardColumns(newAst, currentSchema); // must go before groupby
+                ({ ast: newAst, pivot: groupByPivot } = convertGroupBy(newAst, pivot, currentSchema));
+                newAst = convertStringComparison(newAst, client.databaseType);
+                newAst = convertRemoveSimpleParentheses(newAst);
+                const table = getTableNames(newAst)[0] ?? initialTableName;
+                const tableAlias = getTableAliases(newAst)[0] ?? initialTableName;
+                newAst = convertUnaryToBinary(newAst);
+                newAst = removeNonSelectedTableReferences(newAst, tableAlias ?? table, getAllPossibleColumns().map((col) => col.name));
+                const procesedColumns = deepCopy(newAst).columns?.map((column) => {
+                    if (column.expr.type === 'column_ref') {
+                        const columnName = extractColumnish(column.expr);
+                        return `${table}.${columnName}`;
+                    }
+                    else if (column.as) {
+                        return `${table}.${column.as}`;
+                    }
+                    return `${table}.${column.expr.value}`;
+                });
+                setSelectedColumns(procesedColumns);
+                if (groupByPivot) {
+                    setBaseAst(deepCopy({ ...newAst, orderby: null, limit: null }));
+                    newAst = deepCopy({ ...newAst, orderby: null, limit: null });
+                }
+                else {
+                    setBaseAst(deepCopy({ ...newAst }));
+                }
+                setFormData(deepCopy(newAst.where));
+                setTopLevelBinaryOperator(
+                // @ts-ignore
+                newAst?.where ? newAst?.where?.operator : 'AND');
+            }
+            ast = newAst; // so we fetch data for newAst later.
+            fetchSqlQuery(ast, undefined, false);
+            const table = getTableNames(newAst)[0] ?? initialTableName;
+            const hostedBody = {
+                metadata: {
+                    clientId: client.publicKey,
+                    ast,
+                    publicKey: client.publicKey,
+                    orgId: client.customerId,
+                    task: 'patterns',
+                    additionalProcessing: { page: { currentPage: 0, rowsPerPage: 20 } },
+                    useUpdatedDataGathering: true,
+                    pivot: groupByPivot,
+                    useNewNodeSql: true, // new flag
+                },
+            };
+            let currentUniqueValues = uniqueValues;
+            let dateRangesTemp = dateRanges;
+            if ((currentUniqueValues &&
+                currentUniqueValues[table] &&
+                Object.keys(currentUniqueValues[table]).length === 0) ||
+                table !== currentTable) {
+                const tableInfo = currentSchema.find((tableInfo) => tableInfo.name === table);
+                if (tableInfo) {
+                    const newUniqueValues = await getUniqueStringValues(tableInfo.columns, table);
+                    currentUniqueValues = newUniqueValues;
+                    if (hashCode(uniqueValues) !== hashCode(newUniqueValues)) {
+                        setUniqueValues(newUniqueValues);
+                    }
+                    dateRangesTemp = await getDateRanges(tableInfo.columns, table);
+                    setDateRanges(dateRangesTemp);
+                }
+                setCurrentTable(table);
+            }
+            const cloudBody = {};
+            const data2 = await getData(client, 'patterns', 'same-origin', hostedBody, cloudBody);
+            if (!data2 || data2.status === 'error') {
+                throw new Error('Error querying data from patterns');
+            }
+            if (data2.rows && data2.rows.length) {
+                const processedFields = data2.fields
+                    .map((elem) => convertPostgresColumn(elem))
+                    .map((elem) => {
+                    const tableInfo = currentSchema.find((t) => t.name === table);
+                    const columnInfo = tableInfo?.columns.find((column) => column.name === elem.field);
+                    return columnInfo
+                        ? convertColumnInfoToColumnInternal(columnInfo)
+                        : null;
+                })
+                    .filter((elem) => elem);
+                let possiblePivot = true;
+                const possibleColumns = getPossiblePivotFieldOptions(processedFields, currentUniqueValues[table]);
+                if (groupByPivot &&
+                    ((groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField)) ||
+                        (groupByPivot.rowField &&
+                            !possibleColumns.rowFields.includes(groupByPivot?.rowField)) ||
+                        (groupByPivot.valueField &&
+                            !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')))) {
+                    possiblePivot = false;
+                    let errorMessageEnding = '';
+                    if (groupByPivot.columnField &&
+                        !possibleColumns.columnFields.includes(groupByPivot?.columnField || '')) {
+                        if (currentUniqueValues[table]?.[groupByPivot?.columnField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} has more than 24 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.columnField} is not a proper column field.`;
+                        }
+                    }
+                    else if (groupByPivot.rowField &&
+                        !possibleColumns.rowFields.includes(groupByPivot?.rowField || '')) {
+                        if (currentUniqueValues[table]?.[groupByPivot?.rowField || '']) {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} has more than 36 unique values to pivot on.`;
+                        }
+                        else {
+                            errorMessageEnding = `The column ${groupByPivot?.rowField} is not a proper row field.`;
+                        }
+                    }
+                    else if (groupByPivot.valueField &&
+                        !possibleColumns.valueFields.includes(groupByPivot?.valueField || '')) {
+                        errorMessageEnding = `The column ${groupByPivot?.valueField} is not a proper value field.`;
+                    }
+                    setErrorMessage(`The requested pivot is not supported. ${errorMessageEnding}`);
+                }
+                if (groupByPivot && possiblePivot) {
+                    let curReport = report ? report : undefined;
+                    if (data2.rowCount) {
+                        const processedFormData = report
+                            ? report
+                            : createInitialFormData(processedFields);
+                        setNumberOfRows(data2.rowCount);
+                        curReport = {
+                            ...formData,
+                            ...processedFormData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                            columns: processedFields,
+                        };
+                        setTempReport(curReport || null);
+                    }
+                    let dateBucket = undefined;
+                    const tempDateRange = dateRangesTemp &&
+                        groupByPivot.rowField &&
+                        dateRangesTemp[groupByPivot.rowField];
+                    if (tempDateRange) {
+                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                    }
+                    const pivotedData = await generatePivotTable(
+                    // @ts-ignore
+                    groupByPivot, data2.rows, undefined, false, -1, undefined, dateBucket, curReport, client, groupByPivot.columnField
+                        ? currentUniqueValues[groupByPivot.columnField]
+                        : undefined);
+                    console.info(`%c[Pivot]: ${JSON.stringify(groupByPivot)}`, 'color: dimgray');
+                    setPivotData(pivotedData);
+                    setPivot(groupByPivot);
+                    if (client.databaseType &&
+                        client.databaseType.toLowerCase() === 'bigquery') {
+                        parseValueFromBigQueryDates(data2.rows, processedFields);
+                    }
+                    setRows(data2.rows);
+                    setPivotRowField(groupByPivot?.rowField);
+                    setPivotColumnField(groupByPivot?.columnField);
+                    setPivotValueField(groupByPivot?.valueField);
+                    setPivotAggregation(groupByPivot?.aggregationType);
+                    setColumns(processedFields);
+                    const formattedRows = formatRows(pivotedData.rows, processedFields, true, groupByPivot.aggregationType);
+                    setFormattedRows(formattedRows);
+                }
+                else {
+                    const processedFields = data2.fields.map((elem) => convertPostgresColumn(elem));
+                    if (client.databaseType &&
+                        client.databaseType.toLowerCase() === 'bigquery') {
+                        parseValueFromBigQueryDates(data2.rows, processedFields);
+                    }
+                    setRows(data2.rows);
+                    setColumns(processedFields);
+                    if (data2.rowCount) {
+                        setNumberOfRows(data2.rowCount);
+                        setTempReport({
+                            ...formData,
+                            itemQuery: data2.itemQuery,
+                            rowCount: data2.rowCount,
+                            filtersApplied: [],
+                            rows: data2.rows,
+                            columns: processedFields,
+                        });
+                    }
+                    const formattedRows = formatRows(data2.rows, processedFields, false);
+                    setFormattedRows(formattedRows);
+                }
+                return data2.rows;
+            }
+            else {
+                setPivotData([]);
+                setRows([]);
+                setColumns([]);
+                setFormattedRows([]);
+            }
+            if (data2.query) {
+                setActiveQuery(data2.query);
+            }
+            else {
+                setActiveQuery('');
+            }
+            if (data2.errorMessage) {
+                setErrorMessage(`Error: Couldn't process your request, please re-word your prompt.`);
+            }
+        }
+        catch (e) {
+            console.error(e);
+            setErrorMessage(`Error: Couldn't process your request, please re-word your prompt.`);
+        }
+        finally {
+            setLoading(false);
+            setDataDisplayed(true);
+        }
+    };
+    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 &&
+                    (!col.expr.column.expr || col.expr.column.expr.value !== name));
+            }
+            else if (col.as) {
+                return col.as !== name;
+            }
+            return col.expr.value !== name;
+        });
+        if (columns.length === 0) {
+            clearAllState();
+            return;
+        }
+        const newAst = deepCopy({ ...baseAst, columns });
+        setBaseAst(newAst);
+        fetchSqlQuery(newAst);
+    };
+    const DraggableItem = ({ id, label, onDelete }) => {
+        const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });
+        const style = {
+            transform: DND_CSS.Transform.toString(transform),
+            transition,
+        };
+        return (_jsx("div", { style: { ...style }, ref: setNodeRef, children: _jsx(DraggableColumnComponent, { label: snakeAndCamelCaseToTitleCase(label), onDelete: onDelete, DragHandle: (props) => (_jsx("div", { style: {
+                        cursor: 'grab',
+                    }, ...attributes, ...listeners, children: _jsx(props.dragIcon, {}) })) }) }));
+    };
+    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 || !over)
+                return;
+            if (active.id !== over.id) {
+                const oldIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${active.id}`));
+                const newIndex = orderedColumnNames.findIndex((c) => c.endsWith(`${currentTable}.${over.id}`));
+                const newOrder = arrayMove(orderedColumnNames, oldIndex, newIndex);
+                setOrderedColumnNames(newOrder);
+                const orderedSelectedColumns = [];
+                for (const value of newOrder) {
+                    const column = value.split('.')[1];
+                    if (selectedColumns.includes(value)) {
+                        orderedSelectedColumns.push(column);
+                    }
+                }
+                setSelectedOrderedColumns(orderedSelectedColumns);
+                // 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);
+                fetchSqlQuery(newAst, undefined, false);
+            }
+        }
+        const columnNamesInAst = baseAst?.columns
+            .map((col) => {
+            if (col.expr.type === 'column_ref' && col.expr.column) {
+                if (typeof col.expr.column === 'string') {
+                    return col.expr.column;
+                }
+                else {
+                    return col.expr.column.expr.value;
+                }
+            }
+            else if (col.as) {
+                if (typeof col.as === 'string') {
+                    return col.as;
+                }
+                else {
+                    return col.as.expr?.value;
+                }
+            }
+            else if (col.expr && col.expr.type === 'aggr_func') {
+                if (col.expr.args) {
+                    return `${col.expr.name.toLowerCase()}(${col.expr.args.expr.value})`;
+                }
+                return col.expr.name;
+            }
+            return col.expr.value;
+        })
+            .filter(
+        // remove duplicate entries
+        (value, index, self) => value && self.indexOf(value) === index) ?? [];
+        return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columnNamesInAst, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 8,
+                    }, children: [columnNamesInAst.map((name) => (_jsx(DraggableItem, { id: name, label: name, onDelete: () => handleDeleteColumn(name) }, name))), columnNamesInAst?.length > 0 && _jsx("div", { style: { height: 6 } })] }) }) }));
+    }
+    if (loading || initialChartLoad) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                height: '100%',
+                ...containerStyle,
+            }, className: className, ref: parentRef, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                        if (!openPopover) {
+                                            setOpenPopover('AddColumnModal');
+                                        }
+                                    }, label: 'Select columns' }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                        if (!isOpen) {
+                                            // delay onClose callback so onClick no-ops
+                                            setTimeout(() => {
+                                                setIsPending(false);
+                                                setActiveEditItem(null);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                            }, 100);
+                                        }
+                                    }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                            setBaseAst(ast);
+                                            fetchSqlQuery(ast);
+                                        }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                    }, children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
+                                                if (!openPopover) {
+                                                    const value = orderedColumnNames[0];
+                                                    const column = value.split('.')[1];
+                                                    const columnType = getColumnTypeByName(column);
+                                                    if (isNumericColumnType(columnType)) {
+                                                        const newSubtree = deepCopy(defaultNumericComparison);
+                                                        newSubtree.left.column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    else {
+                                                        const newSubtree = deepCopy(defaultEntry);
+                                                        newSubtree.left.args.value[0].column = column;
+                                                        setActiveEditItem(newSubtree);
+                                                    }
+                                                    setOpenPopover('AddFilterPopover');
+                                                    setActivePath('');
+                                                    setIsPending(true);
+                                                }
+                                            }, label: 'Add filter' }), _jsx("div", { style: {
+                                                position: 'relative',
+                                                ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                            }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                    if (!isOpen) {
+                                                        setIsPending(false);
+                                                        setActivePath(null);
+                                                        setOpenPopover(null);
+                                                        setTimeout(() => {
+                                                            clearCheckboxes();
+                                                            setActiveEditItem(null);
+                                                        }, 300);
+                                                    }
+                                                }, popoverTitle: 'Add filter', popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
+                                                        s.displayName === currentTable) ?? schema[0], fieldValuesMap: uniqueValues[getTableNames(baseAst).length === 1
+                                                        ? getTableNames(baseAst)[0]
+                                                        : initialTableName], onSubmitFilter: (filter) => {
+                                                        setOpenPopover(null);
+                                                        setIsPending(false);
+                                                        const item = filterToAst(filter, client.databaseType.toLowerCase());
+                                                        handleInsertion(item, 'AND', false);
+                                                    }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, SecondaryButtonComponent: SecondaryButtonComponent, MultiSelectComponent: MultiSelectComponent }) }) }), baseAst?.where &&
+                                            false && ( // temp removed the AddConditionPopover
+                                        _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                        if (!openPopover) {
+                                                            setActiveEditItem(deepCopy(defaultEntry));
+                                                            setOpenPopover('AddConditionPopover');
+                                                            setActivePath('');
+                                                            setIsPending(true);
+                                                        }
+                                                    }, label: "Add condition" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setTimeout(() => {
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add condition", popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
+                                                            if (isNodeEmptyCollection(activeEditItem)) {
+                                                                setIsPending(false);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                setActivePath(null);
+                                                                setOpenPopover(null);
+                                                            }
+                                                            else {
+                                                                setIsPending(false);
+                                                                handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                                setTimeout(() => {
+                                                                    setActiveEditItem(null);
+                                                                    clearCheckboxes();
+                                                                }, 300);
+                                                                setActivePath(null);
+                                                                setOpenPopover(null);
+                                                            }
+                                                        } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, CardComponent: CardComponent, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                        setPivot(null);
+                                        setPivotData(null);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
+                                    }, 
+                                    // TODOs
+                                    selectPivot: () => {
+                                        return;
+                                    }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, SecondaryButtonComponent: SecondaryButtonComponent, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !loading && (!baseAst || !dataDisplayed), pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport ?? report }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                        setPivotRowField(value);
+                                    }, setPivotColumnField: setPivotColumnField, setPivotValueField: setPivotValueField, setPivotAggregation: setPivotAggregation, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, onDelete: () => {
+                                        setPivot(null);
+                                        setPivotData([]);
+                                        const formattedRows = formatRows(rows, columns, false);
+                                        setFormattedRows(formattedRows);
+                                    }, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: _jsx(SortSentence, { sortData: {
+                                            type: pivot.sortDirection,
+                                            expr: { type: 'column_ref', column: pivot.sortField },
+                                        }, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                            setPivot({ ...pivot, sort: false });
+                                            setBaseAst(deepCopy(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, onSave: (column, direction) => {
+                                            const sortFieldType = column === (pivot.valueField || 'count')
+                                                ? 'number'
+                                                : pivot.rowFieldType;
+                                            setPivot({
+                                                ...pivot,
+                                                sort: true,
+                                                sortDirection: direction,
+                                                sortField: column,
+                                                sortFieldType: sortFieldType,
+                                            });
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(baseAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(baseAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, onSave: (column, direction) => {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setOpenPopover(null);
+                                            if (column === '')
+                                                return;
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby[id] = {
+                                                expr: {
+                                                    type: 'column_ref',
+                                                    table: null,
+                                                    column: column,
+                                                },
+                                                type: direction,
+                                            };
+                                            // look through the columns
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby.splice(id, 1);
+                                            setBaseAst(deepCopy(newAst));
+                                            if (!pivot) {
+                                                fetchSqlQuery(newAst);
+                                            }
+                                        }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                        if (!selectedColumns ||
+                                            selectedColumns.length === 0 ||
+                                            loading) {
+                                            return;
+                                        }
+                                        if (!openPopover) {
+                                            setOpenPopover('AddSortPopover');
+                                        }
+                                    }, label: "Add sort" }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                        if (!isOpen) {
+                                            setIsPending(false);
+                                            setActiveEditItem(null);
+                                            setActivePath(null);
+                                            setOpenPopover(null);
+                                        }
+                                    }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: selectedColumns, Select: SelectComponent, Button: ButtonComponent, onSave: () => { } }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: 8,
+                                        marginBottom: 12,
+                                    }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = null;
+                                            setBaseAst(deepCopy(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, onSave: (limit) => {
+                                            const newAst = { ...baseAst };
+                                            newAst.limit = {
+                                                seperator: '',
+                                                value: [
+                                                    {
+                                                        type: 'number',
+                                                        value: limit,
+                                                    },
+                                                ],
+                                            };
+                                            setOpenPopover(null);
+                                            setBaseAst(deepCopy(newAst));
+                                            fetchSqlQuery(newAst);
+                                        }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                if (!selectedColumns ||
+                                                    selectedColumns.length === 0 ||
+                                                    loading) {
+                                                    return;
+                                                }
+                                                if (!openPopover) {
+                                                    setOpenPopover('AddLimitPopover');
+                                                }
+                                            }, label: 'Add limit' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: () => { } }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAILoadingContainerRef, onSubmit: (event) => {
+                                event.preventDefault();
+                            }, style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                gap: 12,
+                                visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                    ? 'hidden'
+                                    : 'visible',
+                            }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_loading_bar", placeholder: askedAQuestion
+                                            ? 'Ask a follow-up question...'
+                                            : 'Ask a question...', width: askAIInputWidth !== -1
+                                            ? askAIInputWidth
+                                            : askAILoadingContainerWidth, value: aiPrompt, onChange: () => { } }), _jsx(ButtonComponent, { onClick: () => { }, label: "Ask AI" }), ((baseAst && dataDisplayed) ||
+                                        initialLoad ||
+                                        initialChartLoad) && (_jsx(SecondaryButtonComponent, { onClick: () => { }, label: "New report" }))] }) })), _jsxs(_Fragment, { children: [_jsx(TableComponent, { isLoading: true, rows: [], columns: [] }), baseAst && dataDisplayed && !initialChartLoad && (_jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        gap: '12px',
+                                    }, children: [_jsx("div", { style: { width: '100%' } }), !hideCopySQL && (_jsx(SecondaryButtonComponent, { onClick: () => copySQLToClipboard(), label: isCopying ? '✅ Copied' : 'Copy SQL' })), _jsx(ButtonComponent, { label: report ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] }));
+    }
+    return (_jsxs("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
+                (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsxs("div", { ref: parentRef, style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    height: '100%',
+                    overflowY: 'auto',
+                    boxSizing: 'border-box',
+                    ...containerStyle,
+                }, className: className, children: [_jsxs(SidebarComponent, { children: [_jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Columns" }), _jsx(DraggableColumns, {}), _jsx(SecondaryButtonComponent, { onClick: () => {
+                                            if (!orderedColumnNames) {
+                                                return;
+                                            }
+                                            if (!openPopover) {
+                                                setOpenPopover('AddColumnModal');
+                                            }
+                                        }, label: "Select columns" }), _jsx(ModalComponent, { isOpen: openPopover === 'AddColumnModal', setIsOpen: (isOpen) => {
+                                            if (!isOpen) {
+                                                // delay onClose callback so onClick no-ops
+                                                setTimeout(() => {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }, 100);
+                                            }
+                                        }, title: "Select columns", children: _jsx(AddColumnModal, { onSave: () => {
+                                                setActiveEditItem(null);
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                            }, orderedColumnNames: orderedColumnNames, setOrderedColumnNames: setOrderedColumnNames, selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, isSelectedAllColumns: isSelectedAllColumns, clearAllState: clearAllState, nameToColumn: nameToColumn, baseAst: baseAst, setBaseAst: (ast) => {
+                                                setBaseAst(ast);
+                                                fetchSqlQuery(ast);
+                                            }, pivot: pivot, initialTableName: initialTableName, defaultAST: defaultAST, defaultTable: defaultTable, schemaLoading: loadingSchema, setPivot: setPivot, TextInput: TextInputComponent, SelectColumn: SelectColumnComponent, SecondaryButton: SecondaryButtonComponent, Button: ButtonComponent, ColumnSearchEmptyState: ColumnSearchEmptyState, LoadingComponent: LoadingComponent }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Filters" }), formData && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: filterTree && renderFilters(filterTree) })), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'flex-start',
+                                        }, children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                    if (!selectedColumns ||
+                                                        selectedColumns.length === 0 ||
+                                                        loading) {
+                                                        return;
+                                                    }
+                                                    if (!openPopover) {
+                                                        const value = orderedColumnNames[0];
+                                                        const column = value.split('.')[1];
+                                                        const columnType = getColumnTypeByName(column);
+                                                        if (isNumericColumnType(columnType)) {
+                                                            const newSubtree = deepCopy(defaultNumericComparison);
+                                                            newSubtree.left.column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        else {
+                                                            const newSubtree = deepCopy(defaultEntry);
+                                                            newSubtree.left.args.value[0].column = column;
+                                                            setActiveEditItem(newSubtree);
+                                                        }
+                                                        setOpenPopover('AddFilterPopover');
+                                                        setActivePath('');
+                                                        setIsPending(true);
+                                                    }
+                                                }, label: 'Add filter' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddFilterPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddFilterPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            // delay onClose callback so onClick no-ops
+                                                            setOpenPopover(null);
+                                                            setTimeout(() => {
+                                                                setIsPending(false);
+                                                                setActivePath(null);
+                                                                clearCheckboxes();
+                                                                setActiveEditItem(null);
+                                                            }, 300);
+                                                        }
+                                                    }, popoverTitle: "Add filter", popoverChildren: _jsx(FilterModal, { schema: schema.find((s) => s.name === currentTable ||
+                                                            s.displayName === currentTable) ?? schema[0], fieldValuesMap: fieldValuesMap, onSubmitFilter: (filter) => {
+                                                            setOpenPopover(null);
+                                                            setIsPending(false);
+                                                            const item = filterToAst(filter, client.databaseType.toLowerCase());
+                                                            handleInsertion(item, 'AND', false);
+                                                        }, onDeleteFilter: () => { }, ButtonComponent: ButtonComponent, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, MultiSelectComponent: MultiSelectComponent }) }) }), baseAst?.where &&
+                                                false && ( // temp removed the AddConditionPopover
+                                            _jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { onClick: () => {
+                                                            if (!openPopover) {
+                                                                setActiveEditItem(deepCopy(defaultEntry));
+                                                                setOpenPopover('AddConditionPopover');
+                                                                setActivePath('');
+                                                                setIsPending(true);
+                                                            }
+                                                        }, label: 'Add condition' }), _jsx(PopoverComponent, { isOpen: openPopover === 'AddConditionPopover', setIsOpen: (isOpen) => {
+                                                            if (!isOpen) {
+                                                                // delay onClose callback so onClick no-ops
+                                                                setTimeout(() => {
+                                                                    setIsPending(false);
+                                                                    setActiveEditItem(null);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }, 200);
+                                                            }
+                                                        }, popoverChildren: _jsx(AddConditionPopover, { onSave: () => {
+                                                                if (isNodeEmptyCollection(activeEditItem)) {
+                                                                    setIsPending(false);
+                                                                    setTimeout(() => {
+                                                                        setActiveEditItem(null);
+                                                                    }, 300);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }
+                                                                else {
+                                                                    setIsPending(false);
+                                                                    handleInsertion(activeEditItem, topLevelBinaryOperator, true);
+                                                                    setTimeout(() => {
+                                                                        setActiveEditItem(null);
+                                                                    }, 300);
+                                                                    setActivePath(null);
+                                                                    setOpenPopover(null);
+                                                                    clearCheckboxes();
+                                                                }
+                                                            } }) })] }))] })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Pivot" }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: initialTableName, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, TextComponent: TextComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEditingPivot, setShowUpdatePivot: setIsEditingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: () => {
+                                            setPivot(null);
+                                            setPivotData(null);
+                                            const formattedRows = formatRows(rows, columns, false);
+                                            setFormattedRows(formattedRows);
+                                        }, selectPivot: async (pivot, uniqueValues, dateRange, pivotTable) => {
+                                            if (!pivot)
+                                                return;
+                                            const newAst = { ...baseAst };
+                                            newAst.orderby = null;
+                                            if (pivot.rowFieldType === 'date') {
+                                                pivot['sort'] = true;
+                                                pivot['sortDirection'] = 'ASC';
+                                            }
+                                            setBaseAst(newAst); // trigger refetch
+                                            let dateBucket = undefined;
+                                            if (dateRange) {
+                                                dateBucket = getDateBucketFromRange(dateRange);
+                                            }
+                                            if (!pivotTable) {
+                                                pivotTable = await generatePivotTable(pivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues);
+                                            }
+                                            setPivotData(pivotTable || []);
+                                            setPivot(pivot);
+                                            const formattedRows = formatRows(pivotTable.rows, columns, true, pivot.aggregationType);
+                                            setFormattedRows(formattedRows);
+                                            setErrorMessage('');
+                                        }, selectPivotOnEdit: true, showTrigger: !pivot, theme: theme, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, dateRange: undefined, pivotCountRequest: 4, query: activeQuery, initialUniqueValues: uniqueValues[currentTable], disabled: !baseAst || !dataDisplayed, pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, report: tempReport }), pivot && (_jsx(PivotForm, { columns: columns, uniqueValues: uniqueValues[currentTable], setPivotRowField: (value) => {
+                                            setPivotRowField(value);
+                                            updatePivot(value, 'rowField');
+                                        }, setPivotColumnField: (value) => {
+                                            setPivotColumnField(value);
+                                            updatePivot(value, 'columnField');
+                                        }, setPivotValueField: (value) => {
+                                            setPivotValueField(value);
+                                            updatePivot(value, 'valueField');
+                                        }, setPivotAggregation: (value) => {
+                                            setPivotAggregation(value);
+                                            updatePivot(value, 'aggregationType');
+                                        }, onDelete: () => {
+                                            setPivot(null);
+                                            setPivotData([]);
+                                            const formattedRows = formatRows(rows, columns, false);
+                                            setFormattedRows(formattedRows);
+                                        }, pivotRowField: pivotRowField, pivotColumnField: pivotColumnField, pivotValueField: pivotValueField, pivotAggregation: pivotAggregation, SecondaryButtonComponent: SecondaryButtonComponent, SelectComponent: SelectComponent, PivotColumnContainer: PivotColumnContainer }))] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Sort" }), pivot && pivot.sort && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(SortSentence, { sortData: {
+                                                type: pivot.sortDirection,
+                                                expr: { type: 'column_ref', column: pivot.sortField },
+                                            }, columns: pivot
+                                                ? pivot.columnField
+                                                    ? [`.${pivot.rowField}`]
+                                                    : [
+                                                        `.${pivot.rowField}`,
+                                                        `.${pivot.valueField || 'count'}`,
+                                                    ]
+                                                : selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: async () => {
+                                                if (pivot) {
+                                                    const tempPivot = { ...pivot, sort: false };
+                                                    let dateBucket = undefined;
+                                                    const tempDateRange = dateRanges &&
+                                                        pivot.rowField &&
+                                                        dateRanges[pivot.rowField];
+                                                    if (tempDateRange) {
+                                                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                                                    }
+                                                    setPivot(tempPivot);
+                                                    const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
+                                                    setPivotData(pivotedData || []);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    setFormattedRows(formattedRows);
+                                                    setErrorMessage('');
+                                                    return;
+                                                }
+                                                setBaseAst(deepCopy(baseAst));
+                                                fetchSqlQuery(deepCopy(baseAst));
+                                            }, onSave: async (column, direction) => {
+                                                if (pivot) {
+                                                    const sortFieldType = column === (pivot.valueField || 'count')
+                                                        ? 'number'
+                                                        : pivot.rowFieldType;
+                                                    const tempPivot = {
+                                                        ...pivot,
+                                                        sort: true,
+                                                        sortDirection: direction,
+                                                        sortField: column,
+                                                        sortFieldType: sortFieldType,
+                                                    };
+                                                    setPivot(tempPivot);
+                                                    let dateBucket = undefined;
+                                                    const tempDateRange = dateRanges &&
+                                                        pivot.rowField &&
+                                                        dateRanges[pivot.rowField];
+                                                    if (tempDateRange) {
+                                                        dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                                                    }
+                                                    const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
+                                                    setPivotData(pivotedData || []);
+                                                    const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                    setFormattedRows(formattedRows);
+                                                    setErrorMessage('');
+                                                    return;
+                                                }
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(baseAst));
+                                                fetchSqlQuery(deepCopy(baseAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-pivot`) })), baseAst && baseAst.orderby && (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: baseAst.orderby.map((sortData, id) => (_jsx(SortSentence, { sortData: sortData, columns: selectedColumns, setIsPending: setIsPending, setEditPopoverKey: () => { }, setActiveEditItem: setActiveEditItem, setActivePath: setActivePath, setOpenPopover: setOpenPopover, SortPopover: SortPopoverComponent, EditPopover: AddSortPopover, handleDelete: () => {
+                                                if (pivot) {
+                                                    setPivot({ ...pivot, sort: false });
+                                                    return;
+                                                }
+                                                const newAst = { ...baseAst };
+                                                newAst.orderby.splice(id, 1);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, onSave: (column, direction) => {
+                                                if (pivot) {
+                                                    const sortFieldType = column === (pivot.valueField || 'count')
+                                                        ? 'number'
+                                                        : pivot.rowFieldType;
+                                                    setPivot({
+                                                        ...pivot,
+                                                        sort: true,
+                                                        sortDirection: direction,
+                                                        sortField: column,
+                                                        sortFieldType: sortFieldType,
+                                                    });
+                                                    return;
+                                                }
+                                                setIsPending(false);
+                                                setActiveEditItem(null);
+                                                setOpenPopover(null);
+                                                if (column === '')
+                                                    return;
+                                                const newAst = { ...baseAst };
+                                                newAst.orderby[id] = {
+                                                    expr: {
+                                                        type: 'column_ref',
+                                                        table: null,
+                                                        column: column,
+                                                    },
+                                                    type: direction,
+                                                };
+                                                // look through the columns
+                                                setActivePath(null);
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }, `sort-sentence-${id}`))) })), _jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                            if (!selectedColumns || selectedColumns.length === 0) {
+                                                return;
+                                            }
+                                            if (!openPopover) {
+                                                setOpenPopover('AddSortPopover');
+                                            }
+                                        }, label: 'Add sort' }), _jsx("div", { style: {
+                                            position: 'relative',
+                                            ...(openPopover === 'AddSortPopover' && { top: 12 }),
+                                        }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddSortPopover', setIsOpen: (isOpen) => {
+                                                if (!isOpen) {
+                                                    setIsPending(false);
+                                                    setActiveEditItem(null);
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                }
+                                            }, popoverTitle: "Sort by", popoverChildren: _jsx(AddSortPopover, { columns: pivot
+                                                    ? pivot.columnField
+                                                        ? [`.${pivot.rowField}`]
+                                                        : [
+                                                            `.${pivot.rowField}`,
+                                                            `.${pivot.valueField || 'count'}`,
+                                                        ]
+                                                    : selectedColumns, Select: SelectComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: async (column, direction) => {
+                                                    if (column === '')
+                                                        return;
+                                                    if (pivot) {
+                                                        const sortFieldType = column === (pivot.valueField || 'count')
+                                                            ? 'number'
+                                                            : pivot.rowFieldType;
+                                                        const tempPivot = {
+                                                            ...pivot,
+                                                            sort: true,
+                                                            sortDirection: direction,
+                                                            sortField: column,
+                                                            sortFieldType: sortFieldType,
+                                                        };
+                                                        setPivot(tempPivot);
+                                                        let dateBucket = undefined;
+                                                        const tempDateRange = dateRanges &&
+                                                            pivot.rowField &&
+                                                            dateRanges[pivot.rowField];
+                                                        if (tempDateRange) {
+                                                            dateBucket = getDateBucketFromRange(tempDateRange.dateRange);
+                                                        }
+                                                        const pivotedData = await generatePivotTable(tempPivot, rows, undefined, false, -1, undefined, dateBucket, tempReport, client, uniqueValues[currentTable]);
+                                                        setErrorMessage('');
+                                                        setPivotData(pivotedData || []);
+                                                        const formattedRows = formatRows(pivotedData.rows, columns, true, pivot.aggregationType);
+                                                        setFormattedRows(formattedRows);
+                                                        setActivePath(null);
+                                                        setOpenPopover(null);
+                                                        setBaseAst(deepCopy(baseAst));
+                                                        return;
+                                                    }
+                                                    const newAst = { ...baseAst };
+                                                    if (!newAst.orderby)
+                                                        newAst.orderby = [];
+                                                    newAst.orderby.push({
+                                                        expr: { type: 'column_ref', column },
+                                                        type: direction,
+                                                    });
+                                                    // look through the columns
+                                                    setActivePath(null);
+                                                    setOpenPopover(null);
+                                                    setBaseAst(deepCopy(newAst));
+                                                    fetchSqlQuery(deepCopy(newAst));
+                                                } }) }) })] }), _jsxs("div", { style: { width: '100%' }, children: [_jsx(SidebarHeadingComponent, { label: "Limit" }), baseAst && baseAst.limit && baseAst.limit.value?.length > 0 ? (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 8,
+                                            marginBottom: 12,
+                                        }, children: _jsx(LimitSentence, { limit: baseAst.limit, setOpenPopover: setOpenPopover, LimitPopover: LimitPopoverComponent, EditPopover: AddLimitPopover, handleDelete: () => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = null;
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, onSave: (limit) => {
+                                                const newAst = { ...baseAst };
+                                                newAst.limit = {
+                                                    seperator: '',
+                                                    value: [
+                                                        {
+                                                            type: 'number',
+                                                            value: limit,
+                                                        },
+                                                    ],
+                                                };
+                                                setOpenPopover(null);
+                                                setBaseAst(deepCopy(newAst));
+                                                fetchSqlQuery(deepCopy(newAst));
+                                            }, TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent }) })) : (_jsxs(_Fragment, { children: [_jsx(SecondaryButtonComponent, { disabled: !baseAst || !dataDisplayed, onClick: () => {
+                                                    if (!selectedColumns || selectedColumns.length === 0) {
+                                                        return;
+                                                    }
+                                                    if (!baseAst) {
+                                                        return;
+                                                    }
+                                                    if (!openPopover) {
+                                                        setOpenPopover('AddLimitPopover');
+                                                    }
+                                                }, label: 'Add limit' }), _jsx("div", { style: {
+                                                    position: 'relative',
+                                                    ...(openPopover === 'AddLimitPopover' && { top: 12 }),
+                                                }, children: _jsx(PopoverComponent, { isOpen: openPopover === 'AddLimitPopover', setIsOpen: (isOpen) => {
+                                                        if (!isOpen) {
+                                                            setIsPending(false);
+                                                            setActiveEditItem(null);
+                                                            setActivePath(null);
+                                                            setOpenPopover(null);
+                                                        }
+                                                    }, popoverTitle: "Add limit", popoverChildren: _jsx(AddLimitPopover, { TextInput: TextInputComponent, Button: ButtonComponent, SecondaryButton: SecondaryButtonComponent, onSave: (limit) => {
+                                                            const newAst = { ...baseAst };
+                                                            newAst.limit = {
+                                                                seperator: '',
+                                                                value: [
+                                                                    {
+                                                                        type: 'number',
+                                                                        value: Number(limit),
+                                                                    },
+                                                                ],
+                                                            };
+                                                            setOpenPopover(null);
+                                                            setBaseAst(deepCopy(newAst));
+                                                            fetchSqlQuery(deepCopy(newAst));
+                                                        } }) }) })] }))] })] }), _jsxs(ContainerComponent, { children: [isAIEnabled && (_jsx("form", { ref: askAIContainerRef, onSubmit: (event) => {
+                                    event.preventDefault();
+                                }, style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: 12,
+                                    visibility: askAIInputWidth === -1 && askAILoadingContainerWidth === -1
+                                        ? 'hidden'
+                                        : 'visible',
+                                }, children: _jsxs(_Fragment, { children: [_jsx(TextInputComponent, { id: "ask_ai_input_bar", value: aiPrompt, width: askAIInputWidth !== -1
+                                                ? askAIInputWidth
+                                                : askAILoadingContainerWidth, onChange: (e) => setAiPrompt(e.target.value), placeholder: askedAQuestion
+                                                ? 'Ask a follow-up question...'
+                                                : 'Ask a question...' }), _jsx(ButtonComponent, { onClick: handleAsk, label: 'Ask AI' }), ((baseAst && dataDisplayed) || initialLoad) && (_jsx(SecondaryButtonComponent, { label: 'New report', onClick: clearAllState }))] }) })), baseAst && (_jsx(TableComponent, { isLoading: tableLoading ||
+                                    (loading && errorMessage.length === 0) ||
+                                    initialChartLoad, rows: formattedRows, rowCount: pivot ? undefined : numberOfRows, columns: pivot
+                                    ? pivotData?.columns || emptyPivotColumns()
+                                    : enforceOrderOnColumns(Object.keys(rows[0] ?? {})).map((c) => {
+                                        return {
+                                            label: snakeAndCamelCaseToTitleCase(c),
+                                            field: c,
+                                        };
+                                    }), onPageChange: onPageChange, onSortChange: onSortChange })), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    gap: '12px',
+                                    width: '100%',
+                                }, children: [errorMessage ? (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            overflow: 'hidden',
+                                            width: '100%',
+                                            gap: 12,
+                                            alignItems: 'center',
+                                        }, children: [_jsx(ErrorMessageComponent, { errorMessage: errorMessage }), _jsx(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : (_jsx("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initialChartLoad && (_jsxs(_Fragment, { children: [!hideCopySQL && (_jsx(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copySQLToClipboard() })), _jsx(ButtonComponent, { onClick: () => {
+                                                    setIsChartBuilderOpen(true);
+                                                }, disabled: !!errorMessage, label: report ? 'Save changes' : 'Add to dashboard' })] }))] })] }), _jsx("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && (_jsx(ChartBuilderWithModal, { report: report
+                    ? {
+                        ...report,
+                        ...tempReport,
+                        pivot: pivot,
+                        yAxisFields: report.pivot && !pivot ? [] : report.yAxisFields,
+                        columns: report.columns.filter((col) => {
+                            return columns.find((c) => {
+                                return col.field === c.field;
+                            });
+                        }),
+                        queryString: activeQuery,
+                        rows: rows,
+                    }
+                    : tempReport, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: report ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: report ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: report ? 'Save changes' : 'Add to dashboard', onClickChartElement: onClickChartElement, rowCount: numberOfRows, onPageChange: onPageChange, onSortChange: onSortChange, isLoading: tableLoading }))] }));
+}