@quillsql/react 2.10.31 → 2.10.32

package/dist/esm/ReportBuilder.js

@@ -0,0 +1,996 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import { useState, useContext, useCallback, useEffect, useMemo, useRef, } from 'react';
+// import './nightOwlLight.css';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import { convertPostgresColumn } from './SQLEditor';
+import { format } from 'date-fns';
+import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
+import { getData, getDataFromCloud } from './utils/dataFetcher';
+import { getRangeFromPreset, reportBuilderOptions, } from './DateRangePicker/dateRangePickerUtils';
+import ChartBuilder from './ChartBuilder';
+import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
+export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = MemoizedTextInput, containerStyle, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
+    const [data, setData] = useState([]);
+    const [client, setClient] = useContext(ClientContext);
+    const [schema, setSchema] = useContext(SchemaContext);
+    const [theme] = useContext(ThemeContext);
+    const [columns, setColumns] = useState([]);
+    const [fields, setFields] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedPivot, setSelectedPivot] = useState(null);
+    const defaultDateRange = [null, null, null];
+    const [dateRange, setDateRange] = useState(defaultDateRange);
+    useEffect(() => {
+        let isSubscribed = true;
+        async function getClient() {
+            try {
+                const resp = await getDataFromCloud(client, `client/${client.publicKey}/`, null, 'GET');
+                if (resp) {
+                    setClient({ ...client, ...resp.client });
+                }
+            }
+            catch (error) {
+                console.error('ERROR getting client:', error);
+            }
+        }
+        if (isSubscribed) {
+            getClient();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, []);
+    useEffect(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            const { queryEndpoint, queryHeaders, publicKey } = client;
+            const response = await fetch(`${queryEndpoint}`, {
+                method: 'POST',
+                headers: {
+                    ...queryHeaders,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    metadata: {
+                        clientId: publicKey,
+                        publicKey: publicKey,
+                        task: 'schema',
+                    },
+                }),
+            });
+            const data = await response.json();
+            if (isSubscribed) {
+                setSchema(data.data.tables);
+            }
+        }
+        if (isSubscribed) {
+            getSchema();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (onDateFilterChange) {
+            onDateFilterChange(dateRange);
+        }
+    }, [dateRange]);
+    useEffect(() => {
+        if (onDateFilterChange) {
+            onDateFilterChange(defaultDateRange);
+        }
+    }, []);
+    useEffect(() => {
+        setColumns([]);
+    }, [tableName]);
+    const runQuery = async (query) => {
+        setLoading(true);
+        const hostedBody = {
+            metadata: {
+                query,
+                task: 'query',
+                orgId: client.customerId || '*',
+                databaseType: client?.databaseType,
+            },
+        };
+        const cloudBody = { query };
+        const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
+        if (resp && resp.errorMessage) {
+            onError(resp.errorMessage);
+            setData([]);
+            // onChangeData([]);
+            setColumns([]);
+            // onChangeColumns([]);
+            setFields([]);
+            if (onChangeFields) {
+                onChangeFields([]);
+            }
+            setLoading(false);
+            return;
+        }
+        setData(resp.rows);
+        setColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+        if (selectedPivot) {
+            const { rows, columns } = generatePivotTable(selectedPivot, resp.rows, dateRange);
+            if (onChangePivot) {
+                onChangePivot(selectedPivot, columns, rows);
+            }
+        }
+        else {
+            if (onChangeData) {
+                onChangeData(resp.rows);
+            }
+            if (onChangeColumns) {
+                onChangeColumns(resp.fields.map((elem) => convertPostgresColumn(elem)));
+            }
+        }
+        setFields(resp.fields);
+        if (onChangeFields) {
+            onChangeFields(resp.fields);
+        }
+        setLoading(false);
+    };
+    useEffect(() => {
+        if (onChangeLoading) {
+            onChangeLoading(loading);
+        }
+    }, [loading]);
+    if (!schema || !schema.length || !tableName) {
+        return null;
+    }
+    return (_jsx(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, editSQLEnabled: editSQLEnabled, navigateToSQLEditor: navigateToSQLEditor, theme: theme, data: data, columns: columns, fields: fields, chartBuilderTitle: chartBuilderTitle, chartBuilderButtonLabel: chartBuilderButtonLabel, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: (pivot) => {
+            setSelectedPivot(pivot);
+            if (onChangePivot) {
+                const table = pivot
+                    ? generatePivotTable(pivot, data, dateRange)
+                    : { rows: null, columns: null };
+                onChangePivot(pivot, table.columns, table.rows);
+            }
+        }, schema: schema, tableName: tableName, dateColumn: dateColumn, selectedTagBorderColor: selectedTagBorderColor, onChangeQuery: onChangeQuery, runQuery: runQuery, dateRange: dateRange, setDateRange: setDateRange, defaultDateRange: defaultDateRange, chartBuilderEnabled: chartBuilderEnabled, HeaderComponent: Header, LabelComponent: Label, SelectComponent: Select, TextComponent: Text, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, ModalComponent: Modal, PopoverComponent: Popover, TextInputComponent: TextInput, tagStyle: tagStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions }));
+}
+export function getPostgresBasicType(column) {
+    let format;
+    // first check if column.dataTypeID exists
+    if (column.dataTypeID) {
+        switch (column.dataTypeID) {
+            case 20: // int8
+            case 21: // int2
+            case 23: // int4
+            case 700: // float4
+            case 701: // float8
+            case 1700: // numeric
+                format = 'number';
+                break;
+            case 1082: // date
+            case 1083: // time
+            case 1184: // timestamptz
+            case 1114: // timestamp
+                format = 'date';
+                break;
+            case 1043: // varchar
+            default:
+                format = 'string';
+        }
+    }
+    else if (column.fieldType) {
+        // if column.dataTypeID doesn't exist, check column.fieldType
+        switch (column.fieldType) {
+            case 'int8':
+            case 'int2':
+            case 'int4':
+            case 'float4':
+            case 'float8':
+            case 'numeric':
+                format = 'number';
+                break;
+            case 'date':
+            case 'time':
+            case 'timestamptz':
+            case 'timestamp':
+                format = 'date';
+                break;
+            case 'varchar':
+            default:
+                format = 'string';
+        }
+    }
+    return format;
+}
+const newDateWhereAST = (column, dateRange, databaseType) => {
+    // all time means no filter
+    if (dateRange[2] === 'at') {
+        return null;
+    }
+    // if using preset
+    if (dateRange[2]) {
+        const timeInterval = reportBuilderOptions.find((elem) => elem.value === dateRange[2])?.dayInterval;
+        switch (databaseType) {
+            case 'BigQuery': {
+                return {
+                    type: 'binary_expr',
+                    operator: 'BETWEEN',
+                    left: {
+                        type: 'function',
+                        name: 'Date',
+                        args: {
+                            type: 'expr_list',
+                            value: [
+                                {
+                                    type: 'column_ref',
+                                    table: null,
+                                    column: column,
+                                },
+                            ],
+                        },
+                        over: null,
+                    },
+                    right: {
+                        type: 'expr_list',
+                        value: [
+                            {
+                                type: 'function',
+                                name: 'DATE_SUB',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [
+                                        {
+                                            type: 'function',
+                                            name: 'CURRENT_DATE',
+                                            args: {
+                                                type: 'expr_list',
+                                                value: [],
+                                            },
+                                            over: null,
+                                        },
+                                        {
+                                            type: 'interval',
+                                            expr: {
+                                                type: 'number',
+                                                value: timeInterval,
+                                            },
+                                            unit: 'day',
+                                        },
+                                    ],
+                                },
+                                over: null,
+                            },
+                            {
+                                type: 'function',
+                                name: 'CURRENT_DATE',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [],
+                                },
+                                over: null,
+                            },
+                        ],
+                    },
+                };
+            }
+            default: {
+                return {
+                    type: 'binary_expr',
+                    operator: 'AND',
+                    left: {
+                        type: 'binary_expr',
+                        operator: '>=',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'binary_expr',
+                            operator: '-',
+                            left: {
+                                type: 'function',
+                                name: 'now',
+                                args: {
+                                    type: 'expr_list',
+                                    value: [],
+                                },
+                            },
+                            right: {
+                                type: 'interval',
+                                expr: {
+                                    type: 'single_quote_string',
+                                    value: `${timeInterval} day`,
+                                },
+                                unit: '',
+                            },
+                        },
+                    },
+                    right: {
+                        type: 'binary_expr',
+                        operator: '<=',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'function',
+                            name: 'now',
+                            args: {
+                                type: 'expr_list',
+                                value: [],
+                            },
+                        },
+                    },
+                };
+            }
+        }
+    }
+    else {
+        return {
+            type: 'binary_expr',
+            operator: 'BETWEEN',
+            left: {
+                type: 'column_ref',
+                table: null,
+                column: column,
+            },
+            right: {
+                type: 'expr_list',
+                value: [
+                    {
+                        type: 'single_quote_string',
+                        value: format(new Date(dateRange[0]), 'MM/dd/yyyy'),
+                    },
+                    {
+                        type: 'single_quote_string',
+                        value: format(new Date(dateRange[1]), 'MM/dd/yyyy'),
+                    },
+                ],
+            },
+        };
+    }
+};
+function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, SecondaryButtonComponent, editSQLEnabled, navigateToSQLEditor, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, client, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
+    const selectedTable = useMemo(() => schema.find((t) => t.displayName === tableName), [schema, tableName]);
+    const [selectedColumn, setSelectedColumn] = useState(schema[0].columns.find((elem) => elem.name !== 'id'));
+    const parentRef = useRef();
+    const [filters, setFilters] = useState([]);
+    const [AST, setAST] = useState({
+        with: null,
+        type: 'select',
+        options: null,
+        distinct: { type: null },
+        columns: '*',
+        into: { position: null },
+        from: [{ db: null, table: selectedTable.displayName, as: null }],
+        // where: newDateWhereAST(dateColumn, defaultDateRange),
+        where: null,
+        groupby: null,
+        having: null,
+        orderby: null,
+        limit: { seperator: '', value: [] },
+        window: null,
+    });
+    const [ASTNoDateColumn, setASTNoDateColumn] = useState(AST);
+    const [numberStart, setNumberStart] = useState(0);
+    const [numberEnd, setNumberEnd] = useState(0);
+    const [filterDateRange, setFilterDateRange] = useState(getRangeFromPreset('90d'));
+    const [computedColumns, setComputedColumns] = useState({});
+    const [stringFilterValues, setStringFilterValues] = useState([]);
+    const [columnType, setColumnType] = useState(getPostgresBasicType(schema[0].columns[0]));
+    const [sqlQuery, setSqlQuery] = useState('');
+    const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = useState('');
+    const [indexBeingEdited, setIndexBeingEdited] = useState(-1);
+    const [isAddFilterModalOpen, setIsAddFilterModalOpen] = useState(false);
+    const [isEdittingPivot, setIsEdittingPivot] = useState(false);
+    const [isPivotModalOpen, setIsPivotModalOpen] = useState(false);
+    const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
+    const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
+    const [createdPivots, setCreatedPivots] = useState([]);
+    const [recommendedPivots, setRecommendedPivots] = useState([]);
+    const [pivotRowField, setPivotRowField] = useState(undefined);
+    const [pivotColumnField, setPivotColumnField] = useState(undefined);
+    const [pivotValueField, setPivotValueField] = useState(undefined);
+    const [pivotAggregation, setPivotAggregation] = useState(undefined);
+    const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
+    useEffect(() => {
+        setColumnType(getPostgresBasicType(selectedColumn));
+    }, [selectedColumn]);
+    useEffect(() => {
+        removePivot();
+        setCreatedPivots([]);
+        setRecommendedPivots([]);
+    }, [selectedTable]);
+    const selectFilter = (index) => {
+        const filter = filters[index];
+        const matchingColumn = selectedTable.columns.find((column) => column.name === filter.column);
+        if (indexBeingEdited === index) {
+            setIndexBeingEdited(-1);
+            setStringFilterValues([]);
+            setNumberStart(0);
+            setNumberEnd(0);
+            setFilterDateRange(getRangeFromPreset('90d'));
+            return;
+        }
+        setSelectedColumn(matchingColumn);
+        if (filter.columnType === 'string') {
+            setStringFilterValues(filter.stringFilterValues);
+            setIndexBeingEdited(index);
+        }
+        else if (filter.columnType === 'number') {
+            setNumberStart(filter.numberStart);
+            setNumberEnd(filter.numberEnd);
+            setIndexBeingEdited(index);
+        }
+        else if (filter.columnType === 'date') {
+            setFilterDateRange(filter.filterDateRange);
+            setIndexBeingEdited(index);
+        }
+    };
+    const selectedPivotTable = useMemo(() => {
+        if (selectedPivot && data) {
+            return generatePivotTable(selectedPivot, data, dateRange);
+        }
+        else {
+            return {};
+        }
+    }, [selectedPivot, data, dateRange]);
+    const removePivot = () => {
+        setSelectedPivotIndex(-1);
+        setSelectedPivot(null);
+        if (onChangePivot) {
+            onChangePivot(null, null, null);
+        }
+    };
+    const selectPivot = (pivot, index) => {
+        setSelectedPivotIndex(index);
+        setSelectedPivot(pivot);
+        const pivotTable = generatePivotTable(pivot, data, dateRange);
+        if (onChangePivot) {
+            onChangePivot(pivot, pivotTable.columns, pivotTable.rows);
+        }
+    };
+    const updateFilter = (index) => {
+        if (selectedColumn && columnType) {
+            if (columnType === 'string') {
+                setFilters((filters) => {
+                    const newFilters = [...filters];
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType,
+                        stringFilterValues,
+                        tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
+                    };
+                    return newFilters;
+                });
+            }
+            else if (columnType === 'number') {
+                setFilters((filters) => {
+                    const newFilters = [...filters];
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType,
+                        numberStart,
+                        numberEnd,
+                        tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
+                    };
+                    return newFilters;
+                });
+            }
+            else if (columnType === 'date') {
+                const label = filterDateRange[2]
+                    ? reportBuilderOptions.find((elem) => elem.value === filterDateRange[2])?.text
+                    : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
+                setFilters((filters) => {
+                    const newFilters = [...filters];
+                    newFilters[index] = {
+                        column: selectedColumn.name,
+                        columnType,
+                        filterDateRange,
+                        tag: `${selectedColumn.name} (${label})`,
+                    };
+                    return newFilters;
+                });
+            }
+            setStringFilterValues([]);
+            setNumberStart(0);
+            setNumberEnd(0);
+            setFilterDateRange(getRangeFromPreset('90d'));
+            setIndexBeingEdited(-1);
+            return;
+        }
+    };
+    // ADD FILTER TO "FILTERS" ARRAY
+    const addFilter = async () => {
+        if (selectedColumn && columnType) {
+            //   const type = getPostgresBasicType(selectedColumn);
+            let newCondition;
+            if (columnType === 'string') {
+                setFilters((filters) => {
+                    return [
+                        ...filters,
+                        {
+                            column: selectedColumn.name,
+                            columnType,
+                            stringFilterValues,
+                            tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
+                        },
+                    ];
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setFilterDateRange(getRangeFromPreset('90d'));
+                return;
+            }
+            else if (columnType === 'number') {
+                setFilters((filters) => {
+                    return [
+                        ...filters,
+                        {
+                            column: selectedColumn.name,
+                            columnType,
+                            numberStart,
+                            numberEnd,
+                            tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
+                        },
+                    ];
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setFilterDateRange(getRangeFromPreset('90d'));
+                return;
+            }
+            else if (columnType === 'date') {
+                const label = filterDateRange[2]
+                    ? reportBuilderOptions.find((elem) => elem.value === filterDateRange[2])?.text
+                    : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
+                setFilters((filters) => {
+                    return [
+                        ...filters,
+                        {
+                            column: selectedColumn.name,
+                            columnType,
+                            filterDateRange,
+                            tag: `${selectedColumn.name} (${label})`,
+                        },
+                    ];
+                });
+                setStringFilterValues([]);
+                setNumberStart(0);
+                setNumberEnd(0);
+                setFilterDateRange(getRangeFromPreset('90d'));
+            }
+        }
+    };
+    const handleRunQuery = (newSqlQuery) => {
+        const queryToUse = newSqlQuery || sqlQuery;
+        if (queryToUse && queryToUse.length) {
+            runQuery(queryToUse);
+        }
+    };
+    useEffect(() => {
+        // if selected table changes, clear everything
+        if (selectedTable.displayName !== AST.from.table) {
+            setSelectedColumn(selectedTable.columns.find((elem) => elem.name !== 'id'));
+            setFilters([]);
+            removePivot();
+            const resetAST = {
+                with: null,
+                type: 'select',
+                options: null,
+                distinct: { type: null },
+                columns: '*',
+                into: { position: null },
+                // where: newDateWhereAST(dateColumn, defaultDateRange),
+                where: null,
+                groupby: null,
+                having: null,
+                orderby: null,
+                limit: { seperator: '', value: [] },
+                window: null,
+                from: [{ db: null, table: selectedTable.displayName, as: null }],
+            };
+            setAST(resetAST);
+            setASTNoDateColumn(resetAST);
+            return;
+        }
+    }, [selectedTable]);
+    const generateNewAST = (includeDateColumn) => {
+        if (filters.length || dateRange) {
+            const newAST = {
+                with: null,
+                type: 'select',
+                options: null,
+                distinct: null,
+                columns: '*',
+                into: { position: null },
+                from: [{ db: null, table: selectedTable.displayName, as: null }],
+                // where: newDateWhereAST(dateColumn, dateRange || defaultDateRange),
+                where: null,
+                groupby: null,
+                having: null,
+                orderby: null,
+                limit: null,
+                window: null,
+            };
+            // FILTERS
+            for (let i = 0; i < filters.length; i++) {
+                const filter = filters[i];
+                const { column, columnType, stringFilterValues, numberStart, numberEnd, filterDateRange, } = filter;
+                let newCondition;
+                if (column === dateColumn && !includeDateColumn) {
+                    continue;
+                }
+                if (columnType === 'string') {
+                    newCondition = {
+                        type: 'binary_expr',
+                        operator: 'IN',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'expr_list',
+                            value: stringFilterValues.map((value) => ({
+                                type: 'single_quote_string',
+                                value,
+                            })),
+                        },
+                    };
+                }
+                else if (columnType === 'number') {
+                    newCondition = {
+                        type: 'binary_expr',
+                        operator: 'BETWEEN',
+                        left: {
+                            type: 'column_ref',
+                            table: null,
+                            column: column,
+                        },
+                        right: {
+                            type: 'expr_list',
+                            value: [
+                                { type: 'number', value: numberStart },
+                                { type: 'number', value: numberEnd },
+                            ],
+                        },
+                    };
+                }
+                else if (columnType === 'date') {
+                    newCondition = newDateWhereAST(column, filterDateRange, client.databaseType);
+                }
+                if (!newAST.where) {
+                    newAST.where = newCondition;
+                }
+                else {
+                    newAST.where = {
+                        type: 'binary_expr',
+                        operator: 'AND',
+                        left: newAST.where,
+                        right: newCondition,
+                    };
+                }
+            }
+            return newAST;
+        }
+    };
+    // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
+    useEffect(() => {
+        if (filters.length || dateRange) {
+            setAST(generateNewAST(true));
+            setASTNoDateColumn(generateNewAST(false));
+        }
+    }, [filters, dateRange]);
+    const removeFilter = index => {
+        setFilters(oldFilters => {
+            const newFilters = [...oldFilters];
+            newFilters.splice(index, 1);
+            return newFilters;
+        });
+        setIndexBeingEdited(-1);
+    };
+    const computeStats = useCallback(column => {
+        if ((!computedColumns[column.name] ||
+            computedColumns[column.name].length === 0) &&
+            data) {
+            const basicType = getPostgresBasicType(column);
+            let result;
+            if (basicType === 'number') {
+                let min = Infinity, max = -Infinity;
+                data.forEach(row => {
+                    const value = row[column.name];
+                    min = Math.min(min, value);
+                    max = Math.max(max, value);
+                });
+                result = { min, max };
+            }
+            else if (basicType === 'string') {
+                const freqMap = {};
+                data.forEach(row => {
+                    const value = row[column.name];
+                    if (value !== null && value !== undefined) {
+                        freqMap[value] = (freqMap[value] || 0) + 1;
+                    }
+                });
+                result = Object.entries(freqMap)
+                    .sort((a, b) => b[1] - a[1])
+                    .slice(0, 6)
+                    .map(([key]) => key);
+            }
+            else {
+                // Handle other column types if necessary
+            }
+            setComputedColumns({
+                ...computedColumns,
+                [column.name]: result,
+            });
+        }
+    }, [data, computedColumns]);
+    // Call this function whenever the selected column changes
+    useEffect(() => {
+        computeStats(selectedColumn);
+    }, [selectedColumn, data]);
+    // Use the results directly in your component
+    const columnStats = computedColumns[selectedColumn.name];
+    // useEffect(() => {
+    //   if (AST && AST.from[0].table) {
+    //     const parser = new Parser();
+    //     const sqlQuery = parser.sqlify(AST, { database: "PostgresQL" });
+    //     if (sqlQuery) {
+    //       runQuery(sqlQuery);
+    //       return;
+    //     }
+    //   }
+    // }, [AST]);
+    useEffect(() => {
+        const getSqlQueryFromAST = async () => {
+            try {
+                if (AST && AST.from[0].table) {
+                    const resp = await getDataFromCloud(client, 'sqlify', {
+                        ast: AST,
+                    });
+                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
+                    if (newSqlQuery && newSqlQuery !== sqlQuery) {
+                        onChangeQuery(newSqlQuery);
+                        setSqlQuery(newSqlQuery);
+                        handleRunQuery(newSqlQuery);
+                    }
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        };
+        getSqlQueryFromAST();
+    }, [AST]);
+    useEffect(() => {
+        const getSqlQueryFromAST = async () => {
+            try {
+                if (ASTNoDateColumn && ASTNoDateColumn.from[0].table) {
+                    const resp = await getDataFromCloud(client, 'sqlify', {
+                        ast: ASTNoDateColumn,
+                    });
+                    const newSqlQuery = resp.query; // assuming the response contains the SQL query
+                    if (newSqlQuery && newSqlQuery !== sqlQueryNoDateColumn) {
+                        setSqlQueryNoDateColumn(newSqlQuery);
+                    }
+                }
+            }
+            catch (err) {
+                console.error(err);
+            }
+        };
+        getSqlQueryFromAST();
+    }, [ASTNoDateColumn]);
+    if (!schema || !schema.length) {
+        return null;
+    }
+    return (_jsxs("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    // marginLeft: '25px',
+                    // marginRight: '25px',
+                    justifyContent: 'end',
+                }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [editSQLEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
+                                if (navigateToSQLEditor) {
+                                    navigateToSQLEditor(sqlQuery);
+                                }
+                            }, label: "Edit Query" })), _jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), chartBuilderEnabled && columns.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            width: '100%',
+                            height: '70px',
+                            gap: '8px',
+                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), _jsx(ChartBuilder, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
+}
+function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
+    const handleRemoveFilter = () => {
+        removeFilter(index);
+    };
+    const handleSelectFilter = () => {
+        selectFilter(index);
+        setIsOpen(true);
+    };
+    const styles = tagStyle || {
+        cursor: 'pointer',
+        borderRadius: 8,
+        border: '1px solid',
+        backgroundColor: '#EFF0FC',
+        paddingLeft: '12px',
+        paddingRight: '8px',
+        height: 30,
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: 13,
+        fontWeight: 'medium',
+        color: theme?.primaryTextColor,
+        fontFamily: theme?.fontFamily,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        outline: 'none',
+        maxWidth: 120,
+    };
+    const borderColor = {
+        borderColor: isSelected
+            ? selectedTagBorderColor || '#B3B4BD'
+            : styles.borderColor || '#EFF0FC',
+    };
+    return (_jsxs("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [_jsx("div", { style: {
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                }, children: label }), _jsx("div", { 
+                // onClick={handleRemoveFilter}
+                onClick: e => {
+                    e.stopPropagation(); // Prevents the event from bubbling up to the parent
+                    handleRemoveFilter();
+                }, style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    paddingLeft: '6px',
+                }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
+}
+const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setDateRange, dateRange, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
+                    position: 'relative',
+                    display: 'inline-block',
+                    textAlign: 'left',
+                }, children: [_jsx("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: filters.length > 0 && (_jsx("span", { style: {
+                                height: 10,
+                                width: 10,
+                                backgroundColor: theme.primaryButtonColor,
+                                borderRadius: '50%',
+                                position: 'absolute',
+                                top: -2,
+                                right: -2,
+                            } })) }), _jsx(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: _jsxs("div", { style: {
+                                backgroundColor: 'rgb(255, 255, 255)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: [filters.length > 0 && (_jsx("div", { style: { paddingBottom: 20 }, children: _jsx("div", { style: {
+                                            overflowY: 'scroll',
+                                            maxHeight: '300px',
+                                            display: 'flex',
+                                            gap: '5px',
+                                            flexDirection: 'row',
+                                            flexWrap: 'wrap',
+                                            alignItems: 'center',
+                                        }, children: filters.map((elem, index) => (_jsx(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), _jsx(LabelComponent, { children: "Column" }), _jsx(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
+                                        const column = selectedTable.columns.find(c => c.name === e);
+                                        setSelectedColumn(column);
+                                    }, options: selectedTable.columns
+                                        .filter(elem => !(elem.name === 'id' || elem.name.endsWith('_id')))
+                                        .map(elem => {
+                                        return { label: elem.name, value: elem.name };
+                                    }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        }, children: [_jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    marginTop: '20px',
+                                                }, children: [_jsx(LabelComponent, { children: "Minimum" }), _jsx(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), _jsx("div", { style: { width: 16 } }), _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    marginTop: '20px',
+                                                }, children: [_jsx(LabelComponent, { children: "Maximum" }), _jsx(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        justifyContent: 'space-between',
+                                        marginTop: 20,
+                                    }, children: _jsx(QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
+                                            setDateRange([dateRange[0], dateRange[1], null]);
+                                        }, preset: dateRange && dateRange.length === 3 && dateRange[2] !== null
+                                            ? dateRange[2]
+                                            : '', onChangePreset: preset => {
+                                            if (typeof preset === 'string') {
+                                                setDateRange(getRangeFromPreset(preset));
+                                                return;
+                                            }
+                                            setDateRange([
+                                                preset?.startDate || null,
+                                                new Date(),
+                                                preset?.value || '',
+                                            ]);
+                                        }, presetOptions: reportBuilderOptions }) })), columnType === 'string' &&
+                                    columnStats &&
+                                    columnStats.length > 0 && (_jsx("div", { style: {
+                                        flex: 'flex',
+                                        flexDirection: 'column',
+                                        marginTop: '14px',
+                                        overflow: 'hidden',
+                                    }, children: columnStats.map(value => (_jsx("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                        }, children: _jsxs("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingTop: 6,
+                                                paddingBottom: 6,
+                                            }, children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
+                                                        setStringFilterValues(prev => prev.includes(value)
+                                                            ? prev.filter(v => v !== value)
+                                                            : [...prev, value]);
+                                                    } }), _jsx("div", { style: {
+                                                        marginLeft: 6,
+                                                        display: 'block',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        color: theme?.primaryTextColor,
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: value })] }, value) }, value))) })), _jsx("div", { style: { height: 20 } }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
+                                            if (columnType === 'date' && !dateRange) {
+                                                return;
+                                            }
+                                            if (indexBeingEdited > -1) {
+                                                updateFilter(indexBeingEdited);
+                                                return;
+                                            }
+                                            addFilter();
+                                        }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), _jsx("div", { style: { height: '12px' } })] }));
+};
+const DivCheckbox = ({ onChange, checked, theme }) => {
+    const toggleCheckbox = () => {
+        if (onChange) {
+            onChange(!checked);
+        }
+    };
+    const style = {
+        // display: 'inline-block',
+        width: '18px',
+        height: '18px',
+        background: checked ? '#384151' : '#fff',
+        border: checked ? '1px solid #384151' : '1px solid #E7E7E7',
+        borderRadius: '4px',
+        position: 'relative',
+        cursor: 'pointer',
+        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        fontFamily: theme?.fontFamily,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    return (_jsx("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked, 
+        // className="shadow-sm"
+        role: "checkbox", children: checked && (
+        // <CheckIcon
+        //   style={{ color: theme?.backgroundColor, height: 16, width: 16 }}
+        //   className="text-white"
+        //   aria-hidden="true"
+        // />
+        _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.backgroundColor, height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", clipRule: "evenodd" }) })) }));
+};