@quillsql/react 2.10.30 → 2.10.31

package/dist/esm/ReportBuilder.js

@@ -1,996 +0,0 @@
-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" }) })) }));
-};