@quillsql/react 1.7.2 → 1.7.3

package/lib/ReportBuilder.js

@@ -1,73 +1,22 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext, useCallback, useEffect } from 'react';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPostgresBasicType = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 // import './nightOwlLight.css';
-import axios from 'axios';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import { XMarkIcon, CheckIcon, } from '@heroicons/react/20/solid';
-import { convertPostgresColumn } from './SQLEditor';
-import { format } from 'date-fns';
-function QuillModal(_a) {
-    var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, theme = _a.theme;
+const axios_1 = __importDefault(require("axios"));
+const Context_1 = require("./Context");
+const solid_1 = require("@heroicons/react/20/solid");
+const SQLEditor_1 = require("./SQLEditor");
+const date_fns_1 = require("date-fns");
+function QuillModal({ children, isOpen, onClose, title, theme }) {
     if (!isOpen) {
         return null;
     }
-    return (_jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             position: 'absolute',
             top: 45,
             minWidth: 300,
@@ -80,134 +29,99 @@ function QuillModal(_a) {
             borderWidth: theme.borderWidth,
             borderStyle: 'solid',
             borderColor: theme.borderColor,
-        } }, { children: children })));
+        }, children: children }));
 }
-export default function ReportBuilder(_a) {
-    var _this = this;
-    var onChangeQuery = _a.onChangeQuery, onChangeData = _a.onChangeData, onChangeColumns = _a.onChangeColumns, onChangeLoading = _a.onChangeLoading, onError = _a.onError, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
-    var _b = useState([]), data = _b[0], setData = _b[1];
-    var client = useContext(ClientContext)[0];
-    var _c = useContext(SchemaContext), schema = _c[0], setSchema = _c[1];
-    var theme = useContext(ThemeContext)[0];
-    var _d = useState([]), columns = _d[0], setColumns = _d[1];
-    var _e = useState([]), fields = _e[0], setFields = _e[1];
-    useEffect(function () {
-        function getData(schema) {
-            return __awaiter(this, void 0, void 0, function () {
-                var publicKey, customerId, environment, response;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!(schema.length && !data.length)) return [3 /*break*/, 2];
-                            publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
-                            return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
-                                    query: "select * from ".concat(schema[0].displayName, " limit 10;"),
-                                }, {
-                                    params: {
-                                        orgId: customerId,
-                                        publicKey: publicKey,
-                                    },
-                                    headers: {
-                                        Authorization: "Bearer ",
-                                        environment: environment || undefined,
-                                    },
-                                })];
-                        case 1:
-                            response = _a.sent();
-                            setData(response.data.rows);
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
+function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onError, SelectComponent, ButtonComponent, ModalComponent, ModalTriggerComponent, TextInputComponent, tagStyle, }) {
+    const [data, setData] = (0, react_1.useState)([]);
+    const [client] = (0, react_1.useContext)(Context_1.ClientContext);
+    const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const [fields, setFields] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        async function getData(schema) {
+            if (schema.length && !data.length) {
+                const { publicKey, customerId, environment } = client;
+                const response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/dashquery`, {
+                    query: `select * from ${schema[0].displayName} limit 10;`,
+                }, {
+                    params: {
+                        orgId: customerId,
+                        publicKey,
+                    },
+                    headers: {
+                        Authorization: `Bearer `,
+                        environment: environment || undefined,
+                    },
                 });
-            });
+                setData(response.data.rows);
+            }
         }
         getData(schema);
     }, [schema]);
-    useEffect(function () {
-        var isSubscribed = true;
-        function getSchema() {
-            return __awaiter(this, void 0, void 0, function () {
-                var publicKey, environment, response3;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            publicKey = client.publicKey, environment = client.environment;
-                            return [4 /*yield*/, axios.get("https://quill-344421.uc.r.appspot.com/schema2/".concat(publicKey, "/"), {
-                                    headers: {
-                                        Authorization: "Bearer ",
-                                        environment: environment || undefined,
-                                    },
-                                })];
-                        case 1:
-                            response3 = _a.sent();
-                            if (isSubscribed) {
-                                setSchema(response3.data.tables);
-                            }
-                            return [2 /*return*/];
-                    }
-                });
+    (0, react_1.useEffect)(() => {
+        let isSubscribed = true;
+        async function getSchema() {
+            const { publicKey, environment } = client;
+            const response3 = await axios_1.default.get(`https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`, {
+                headers: {
+                    Authorization: `Bearer `,
+                    environment: environment || undefined,
+                },
             });
+            if (isSubscribed) {
+                setSchema(response3.data.tables);
+            }
         }
         if (isSubscribed) {
             getSchema();
         }
-        return function () {
+        return () => {
             isSubscribed = false;
         };
     }, []);
-    var runQuery = function (query) { return __awaiter(_this, void 0, void 0, function () {
-        var publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, response;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders, withCredentials = client.withCredentials;
-                    if (!queryEndpoint) return [3 /*break*/, 2];
-                    return [4 /*yield*/, axios.post(queryEndpoint, { metadata: { query: query, task: 'query' } }, { headers: queryHeaders, withCredentials: withCredentials })];
-                case 1:
-                    response = _a.sent();
-                    return [3 /*break*/, 4];
-                case 2: return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
-                        query: query,
-                    }, {
-                        params: {
-                            orgId: customerId,
-                            publicKey: publicKey,
-                        },
-                        headers: {
-                            Authorization: "Bearer ",
-                            environment: environment || undefined,
-                        },
-                    })];
-                case 3:
-                    response = _a.sent();
-                    _a.label = 4;
-                case 4:
-                    if (response && response.data && response.data.errorMessage) {
-                        onError(response.data.errorMessage);
-                        setData([]);
-                        onChangeData([]);
-                        setColumns([]);
-                        onChangeColumns([]);
-                        setFields([]);
-                        return [2 /*return*/];
-                    }
-                    setData(response.data.rows);
-                    onChangeData(response.data.rows);
-                    setColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
-                    onChangeColumns(response.data.fields.map(function (elem) { return convertPostgresColumn(elem); }));
-                    setFields(response.data.fields);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
+    const runQuery = async (query) => {
+        const { publicKey, customerId, environment, queryEndpoint, queryHeaders } = client;
+        let response;
+        if (queryEndpoint) {
+            response = await axios_1.default.post(queryEndpoint, { metadata: { query, task: 'query' } }, { headers: queryHeaders });
+        }
+        else {
+            response = await axios_1.default.post(`https://quill-344421.uc.r.appspot.com/dashquery`, {
+                query,
+            }, {
+                params: {
+                    orgId: customerId,
+                    publicKey,
+                },
+                headers: {
+                    Authorization: `Bearer `,
+                    environment: environment || undefined,
+                },
+            });
+        }
+        if (response && response.data && response.data.errorMessage) {
+            onError(response.data.errorMessage);
+            setData([]);
+            onChangeData([]);
+            setColumns([]);
+            onChangeColumns([]);
+            setFields([]);
+            return;
+        }
+        setData(response.data.rows);
+        onChangeData(response.data.rows);
+        setColumns(response.data.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
+        onChangeColumns(response.data.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
+        setFields(response.data.fields);
+    };
     if (!schema.length) {
         return null;
     }
-    return (_jsx(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent
+    return ((0, jsx_runtime_1.jsx)(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent
             ? SelectComponent
-            : function (_a) {
-                var onChange = _a.onChange, value = _a.value, options = _a.options;
-                return (_jsx("select", __assign({ onChange: function (event) { return onChange(event.target.value); }, value: value, id: 'reportbuilderdropdown', style: {
+            : ({ onChange, value, options }) => {
+                return ((0, jsx_runtime_1.jsx)("select", { onChange: event => onChange(event.target.value), value: value, id: 'reportbuilderdropdown', style: {
                         width: '100%',
                         minWidth: 230,
                         outline: 'none',
@@ -225,12 +139,11 @@ export default function ReportBuilder(_a) {
                         color: theme.primaryTextColor,
                         boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
                         fontFamily: theme.fontFamily,
-                    } }, { children: options.map(function (option, index) { return (_jsx("option", __assign({ value: option.value }, { children: option.label }), option.label + index)); }) })));
+                    }, children: options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index))) }));
             }, ButtonComponent: ButtonComponent
             ? ButtonComponent
-            : function (_a) {
-                var onClick = _a.onClick, label = _a.label;
-                return (_jsx("div", __assign({ style: {
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
                         height: 32,
                         background: theme.primaryButtonColor,
                         borderWidth: theme.borderWidth,
@@ -244,17 +157,15 @@ export default function ReportBuilder(_a) {
                         cursor: 'pointer',
                         fontFamily: theme.fontFamily,
                         fontWeight: theme.buttonFontWeight || 600,
-                    }, onClick: onClick }, { children: label })));
+                    }, onClick: onClick, children: label }));
             }, ModalComponent: ModalComponent
             ? ModalComponent
-            : function (_a) {
-                var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
-                return (_jsx(QuillModal, __assign({ isOpen: isOpen, theme: theme, onClose: onClose, title: title }, { children: children })));
+            : ({ children, isOpen, onClose, title }) => {
+                return ((0, jsx_runtime_1.jsx)(QuillModal, { isOpen: isOpen, theme: theme, onClose: onClose, title: title, children: children }));
             }, ModalTriggerComponent: ModalTriggerComponent
             ? ModalTriggerComponent
-            : function (_a) {
-                var onClick = _a.onClick, label = _a.label;
-                return (_jsx("div", __assign({ style: {
+            : ({ onClick, label }) => {
+                return ((0, jsx_runtime_1.jsx)("div", { style: {
                         height: 32,
                         background: theme.backgroundColor,
                         borderWidth: theme.borderWidth,
@@ -273,12 +184,11 @@ export default function ReportBuilder(_a) {
                         color: theme.primaryTextColor,
                         fontWeight: theme.buttonFontWeight || 600,
                         fontFamily: theme.fontFamily,
-                    }, onClick: onClick }, { children: label })));
+                    }, onClick: onClick, children: label }));
             }, TextInputComponent: TextInputComponent
             ? TextInputComponent
-            : function (_a) {
-                var onChange = _a.onChange, value = _a.value, id = _a.id;
-                return (_jsx("input", { style: {
+            : ({ onChange, value, id }) => {
+                return ((0, jsx_runtime_1.jsx)("input", { style: {
                         outline: 'none',
                         textAlign: 'left',
                         whiteSpace: 'nowrap',
@@ -298,8 +208,9 @@ export default function ReportBuilder(_a) {
                     }, id: id, onChange: onChange, value: value }));
             }, tagStyle: tagStyle }));
 }
-export function getPostgresBasicType(column) {
-    var format;
+exports.default = ReportBuilder;
+function getPostgresBasicType(column) {
+    let format;
     // first check if column.dataTypeID exists
     if (column.dataTypeID) {
         switch (column.dataTypeID) {
@@ -346,13 +257,12 @@ export function getPostgresBasicType(column) {
     }
     return format;
 }
-function ReportingTool(_a) {
-    var _this = this;
-    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, onChangeQuery = _a.onChangeQuery, theme = _a.theme, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
-    var _b = useState(schema[0]), selectedTable = _b[0], setSelectedTable = _b[1];
-    var _c = useState(schema[0].columns[0]), selectedColumn = _c[0], setSelectedColumn = _c[1];
-    var _d = useState([]), filters = _d[0], setFilters = _d[1];
-    var _e = useState({
+exports.getPostgresBasicType = getPostgresBasicType;
+function ReportingTool({ schema, data, runQuery, SelectComponent, ButtonComponent, onChangeQuery, theme, ModalComponent, ModalTriggerComponent, TextInputComponent, tagStyle, }) {
+    const [selectedTable, setSelectedTable] = (0, react_1.useState)(schema[0]);
+    const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns[0]);
+    const [filters, setFilters] = (0, react_1.useState)([]);
+    const [AST, setAST] = (0, react_1.useState)({
         with: null,
         type: 'select',
         options: null,
@@ -366,39 +276,40 @@ function ReportingTool(_a) {
         orderby: null,
         limit: { seperator: '', value: [] },
         window: null,
-    }), AST = _e[0], setAST = _e[1];
-    var _f = useState(0), numberStart = _f[0], setNumberStart = _f[1];
-    var _g = useState(0), numberEnd = _g[0], setNumberEnd = _g[1];
-    var _h = useState(''), dateStart = _h[0], setDateStart = _h[1];
-    var _j = useState(''), dateEnd = _j[0], setDateEnd = _j[1];
-    var _k = useState({}), computedColumns = _k[0], setComputedColumns = _k[1];
-    var _l = useState([]), stringFilterValues = _l[0], setStringFilterValues = _l[1];
-    var _m = useState(getPostgresBasicType(schema[0].columns[0])), columnType = _m[0], setColumnType = _m[1];
-    var _o = useState(''), sqlQuery = _o[0], setSqlQuery = _o[1];
+    });
+    const [numberStart, setNumberStart] = (0, react_1.useState)(0);
+    const [numberEnd, setNumberEnd] = (0, react_1.useState)(0);
+    const [dateStart, setDateStart] = (0, react_1.useState)('');
+    const [dateEnd, setDateEnd] = (0, react_1.useState)('');
+    const [computedColumns, setComputedColumns] = (0, react_1.useState)({});
+    const [stringFilterValues, setStringFilterValues] = (0, react_1.useState)([]);
+    const [columnType, setColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
+    const [sqlQuery, setSqlQuery] = (0, react_1.useState)('');
     // month | week | day | quarter
-    var _p = useState('month'), dateBucket = _p[0], setDateBucket = _p[1];
-    var _q = useState(-1), indexBeingEdited = _q[0], setIndexBeingEdited = _q[1];
-    var _r = useState([]), groupBys = _r[0], setGroupBys = _r[1];
-    var _s = useState([]), aggregations = _s[0], setAggregations = _s[1];
-    var _t = useState(schema[0].columns[0]), selectedGroupByColumn = _t[0], setSelectedGroupByColumn = _t[1];
-    var _u = useState(getPostgresBasicType(schema[0].columns[0])), groupByColumnType = _u[0], setGroupByColumnType = _u[1];
-    var _v = useState(schema[0].columns[0].name), selectedSortByColumn = _v[0], setSelectedSortByColumn = _v[1];
-    var _w = useState([]), sortBys = _w[0], setSortBys = _w[1];
-    var _x = useState('ascending'), selectedSortByDirection = _x[0], setSelectedSortByDirection = _x[1];
-    var _y = useState(-1), groupByIndexBeingEdited = _y[0], setGroupByIndexBeingEdited = _y[1];
-    var _z = useState(-1), sortByIndexBeingEdited = _z[0], setSortByIndexBeingEdited = _z[1];
-    var _0 = useState(schema[0].columns.map(function (col) { return col.name; })), sortableColumns = _0[0], setSortableColumns = _0[1];
-    var addGroupBy = function () {
+    const [dateBucket, setDateBucket] = (0, react_1.useState)('month');
+    const [indexBeingEdited, setIndexBeingEdited] = (0, react_1.useState)(-1);
+    const [groupBys, setGroupBys] = (0, react_1.useState)([]);
+    const [aggregations, setAggregations] = (0, react_1.useState)([]);
+    const [selectedGroupByColumn, setSelectedGroupByColumn] = (0, react_1.useState)(schema[0].columns[0]);
+    const [groupByColumnType, setGroupByColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
+    const [selectedSortByColumn, setSelectedSortByColumn] = (0, react_1.useState)(schema[0].columns[0].name);
+    const [sortBys, setSortBys] = (0, react_1.useState)([]);
+    const [selectedSortByDirection, setSelectedSortByDirection] = (0, react_1.useState)('ascending');
+    const [groupByIndexBeingEdited, setGroupByIndexBeingEdited] = (0, react_1.useState)(-1);
+    const [sortByIndexBeingEdited, setSortByIndexBeingEdited] = (0, react_1.useState)(-1);
+    const [sortableColumns, setSortableColumns] = (0, react_1.useState)(schema[0].columns.map(col => col.name));
+    const addGroupBy = () => {
         if (selectedGroupByColumn && groupByColumnType) {
             if (groupByColumnType === 'string') {
-                setGroupBys(function (groupBys) {
-                    return __spreadArray(__spreadArray([], groupBys, true), [
+                setGroupBys(groupBys => {
+                    return [
+                        ...groupBys,
                         {
                             column: selectedGroupByColumn.name,
                             columnType: groupByColumnType,
                             tag: selectedGroupByColumn.name,
                         },
-                    ], false);
+                    ];
                 });
                 return;
             }
@@ -407,55 +318,59 @@ function ReportingTool(_a) {
                 return;
             }
             else if (groupByColumnType === 'date') {
-                setGroupBys(function (groupBys) {
-                    return __spreadArray(__spreadArray([], groupBys, true), [
+                setGroupBys(groupBys => {
+                    return [
+                        ...groupBys,
                         {
                             column: selectedGroupByColumn.name,
                             columnType: groupByColumnType,
                             bucket: dateBucket,
                             tag: dateBucket,
                         },
-                    ], false);
+                    ];
                 });
                 return;
             }
         }
     };
-    var addSortBy = function () {
-        setSortBys(function (sortBys) {
-            return __spreadArray(__spreadArray([], sortBys, true), [
+    const addSortBy = () => {
+        setSortBys(sortBys => {
+            return [
+                ...sortBys,
                 {
                     column: selectedSortByColumn,
                     direction: selectedSortByDirection,
                 },
-            ], false);
+            ];
         });
     };
-    var removeSortBy = function (index) {
-        setSortBys(function (oldSortBys) {
-            var newSortBys = __spreadArray([], oldSortBys, true);
+    const removeSortBy = index => {
+        setSortBys(oldSortBys => {
+            const newSortBys = [...oldSortBys];
             newSortBys.splice(index, 1);
             return newSortBys;
         });
         setSortByIndexBeingEdited(-1);
     };
-    var removeGroupBy = function (index) {
-        var columnBeingDeleted = groupBys[index].tag;
-        setSortBys(function (oldSortBys) {
-            var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted; }), true);
+    const removeGroupBy = index => {
+        const columnBeingDeleted = groupBys[index].tag;
+        setSortBys(oldSortBys => {
+            const newSortBys = [
+                ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
+            ];
             return newSortBys;
         });
-        setGroupBys(function (oldGroupBys) {
-            var newGroupBys = __spreadArray([], oldGroupBys, true);
+        setGroupBys(oldGroupBys => {
+            const newGroupBys = [...oldGroupBys];
             newGroupBys.splice(index, 1);
             return newGroupBys;
         });
         setGroupByIndexBeingEdited(-1);
     };
-    var updateSortBy = function (index) {
+    const updateSortBy = index => {
         if (selectedSortByColumn && selectedSortByDirection) {
-            setSortBys(function (sortBys) {
-                var newSortBys = __spreadArray([], sortBys, true);
+            setSortBys(sortBys => {
+                const newSortBys = [...sortBys];
                 newSortBys[index] = {
                     column: selectedSortByColumn,
                     direction: selectedSortByDirection,
@@ -466,16 +381,16 @@ function ReportingTool(_a) {
             return;
         }
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         setColumnType(getPostgresBasicType(selectedColumn));
         // console.log("WTF: ", selectedColumn);
     }, [selectedColumn]);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
     }, [selectedGroupByColumn]);
-    var selectFilter = function (index) {
-        var filter = filters[index];
-        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === filter.column; });
+    const selectFilter = index => {
+        const filter = filters[index];
+        const matchingColumn = selectedTable.columns.find(column => column.name === filter.column);
         setSelectedColumn(matchingColumn);
         if (filter.columnType === 'string') {
             setStringFilterValues(filter.stringFilterValues);
@@ -492,34 +407,36 @@ function ReportingTool(_a) {
             setIndexBeingEdited(index);
         }
     };
-    var selectSortBy = function (index) {
-        var sortBy = sortBys[index];
+    const selectSortBy = index => {
+        const sortBy = sortBys[index];
         setSelectedSortByColumn(sortBy.column);
         setSelectedSortByDirection(sortBy.direction);
         setSortByIndexBeingEdited(index);
     };
-    var selectGroupBy = function (index) {
-        var groupBy = groupBys[index];
-        var matchingColumn = selectedTable.columns.find(function (column) { return column.name === groupBy.column; });
+    const selectGroupBy = index => {
+        const groupBy = groupBys[index];
+        const matchingColumn = selectedTable.columns.find(column => column.name === groupBy.column);
         setSelectedGroupByColumn(matchingColumn);
         if (groupBy.bucket) {
             setDateBucket(groupBy.bucket);
         }
         setGroupByIndexBeingEdited(index);
     };
-    var updateGroupBy = function (index) {
+    const updateGroupBy = index => {
         if (selectedGroupByColumn && groupByColumnType) {
             // if column changed, then auto delete the sort using that column
-            var columnBeingDeleted_1 = selectedGroupByColumn.name !== groupBys[index].column
+            const columnBeingDeleted = selectedGroupByColumn.name !== groupBys[index].column
                 ? groupBys[index].tag
                 : 'nocolumnbeingdeleted';
-            setSortBys(function (oldSortBys) {
-                var newSortBys = __spreadArray([], oldSortBys.filter(function (sortBy) { return sortBy.column !== columnBeingDeleted_1; }), true);
+            setSortBys(oldSortBys => {
+                const newSortBys = [
+                    ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
+                ];
                 return newSortBys;
             });
             if (groupByColumnType === 'date') {
-                setGroupBys(function (groupBys) {
-                    var newGroupBys = __spreadArray([], groupBys, true);
+                setGroupBys(groupBys => {
+                    const newGroupBys = [...groupBys];
                     newGroupBys[index] = {
                         column: selectedGroupByColumn.name,
                         columnType: groupByColumnType,
@@ -530,8 +447,8 @@ function ReportingTool(_a) {
                 });
             }
             else {
-                setGroupBys(function (groupBys) {
-                    var newGroupBys = __spreadArray([], groupBys, true);
+                setGroupBys(groupBys => {
+                    const newGroupBys = [...groupBys];
                     newGroupBys[index] = {
                         column: selectedGroupByColumn.name,
                         columnType: groupByColumnType,
@@ -544,42 +461,42 @@ function ReportingTool(_a) {
             return;
         }
     };
-    var updateFilter = function (index) {
+    const updateFilter = index => {
         if (selectedColumn && columnType) {
             if (columnType === 'string') {
-                setFilters(function (filters) {
-                    var newFilters = __spreadArray([], filters, true);
+                setFilters(filters => {
+                    const newFilters = [...filters];
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType: columnType,
-                        stringFilterValues: stringFilterValues,
-                        tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
+                        columnType,
+                        stringFilterValues,
+                        tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
                     };
                     return newFilters;
                 });
             }
             else if (columnType === 'number') {
-                setFilters(function (filters) {
-                    var newFilters = __spreadArray([], filters, true);
+                setFilters(filters => {
+                    const newFilters = [...filters];
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType: columnType,
-                        numberStart: numberStart,
-                        numberEnd: numberEnd,
-                        tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
+                        columnType,
+                        numberStart,
+                        numberEnd,
+                        tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
                     };
                     return newFilters;
                 });
             }
             else if (columnType === 'date') {
-                setFilters(function (filters) {
-                    var newFilters = __spreadArray([], filters, true);
+                setFilters(filters => {
+                    const newFilters = [...filters];
                     newFilters[index] = {
                         column: selectedColumn.name,
-                        columnType: columnType,
-                        dateStart: dateStart,
-                        dateEnd: dateEnd,
-                        tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
+                        columnType,
+                        dateStart,
+                        dateEnd,
+                        tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
                     };
                     return newFilters;
                 });
@@ -594,20 +511,21 @@ function ReportingTool(_a) {
         }
     };
     // ADD FILTER TO "FILTERS" ARRAY
-    var addFilter = function () {
+    const addFilter = () => {
         if (selectedColumn && columnType) {
             //   const type = getPostgresBasicType(selectedColumn);
-            var newCondition = void 0;
+            let newCondition;
             if (columnType === 'string') {
-                setFilters(function (filters) {
-                    return __spreadArray(__spreadArray([], filters, true), [
+                setFilters(filters => {
+                    return [
+                        ...filters,
                         {
                             column: selectedColumn.name,
-                            columnType: columnType,
-                            stringFilterValues: stringFilterValues,
-                            tag: "".concat(selectedColumn.name, " (").concat(stringFilterValues.join(', '), ")"),
+                            columnType,
+                            stringFilterValues,
+                            tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
                         },
-                    ], false);
+                    ];
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -617,16 +535,17 @@ function ReportingTool(_a) {
                 return;
             }
             else if (columnType === 'number') {
-                setFilters(function (filters) {
-                    return __spreadArray(__spreadArray([], filters, true), [
+                setFilters(filters => {
+                    return [
+                        ...filters,
                         {
                             column: selectedColumn.name,
-                            columnType: columnType,
-                            numberStart: numberStart,
-                            numberEnd: numberEnd,
-                            tag: "".concat(numberStart, " < ").concat(selectedColumn.name, " < ").concat(numberEnd),
+                            columnType,
+                            numberStart,
+                            numberEnd,
+                            tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
                         },
-                    ], false);
+                    ];
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -636,16 +555,17 @@ function ReportingTool(_a) {
                 return;
             }
             else if (columnType === 'date') {
-                setFilters(function (filters) {
-                    return __spreadArray(__spreadArray([], filters, true), [
+                setFilters(filters => {
+                    return [
+                        ...filters,
                         {
                             column: selectedColumn.name,
-                            columnType: columnType,
-                            dateStart: dateStart,
-                            dateEnd: dateEnd,
-                            tag: "".concat(selectedColumn.name, " (").concat(format(new Date(dateStart), 'MMM dd'), " - ").concat(format(new Date(dateEnd), 'MMM dd'), ")"),
+                            columnType,
+                            dateStart,
+                            dateEnd,
+                            tag: `${selectedColumn.name} (${(0, date_fns_1.format)(new Date(dateStart), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(dateEnd), 'MMM dd')})`,
                         },
-                    ], false);
+                    ];
                 });
                 setStringFilterValues([]);
                 setNumberStart(0);
@@ -655,23 +575,29 @@ function ReportingTool(_a) {
             }
         }
     };
-    var setAggregationColumn = function (column, index) {
+    const setAggregationColumn = (column, index) => {
         // ex
-        setAggregations(function (aggregations) {
-            var newAggregations = __spreadArray([], aggregations, true);
-            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { column: column });
+        setAggregations(aggregations => {
+            const newAggregations = [...aggregations];
+            newAggregations[index] = {
+                ...newAggregations[index],
+                column: column,
+            };
             return newAggregations;
         });
     };
-    var setAggregationType = function (aggregationType, index) {
+    const setAggregationType = (aggregationType, index) => {
         // ex
-        setAggregations(function (aggregations) {
-            var newAggregations = __spreadArray([], aggregations, true);
-            newAggregations[index] = __assign(__assign({}, newAggregations[index]), { aggregationType: aggregationType });
+        setAggregations(aggregations => {
+            const newAggregations = [...aggregations];
+            newAggregations[index] = {
+                ...newAggregations[index],
+                aggregationType: aggregationType,
+            };
             return newAggregations;
         });
     };
-    var addAggregation = function () {
+    const addAggregation = () => {
         // setAggregations([
         //   {
         //     column: selectedTable.columns.filter(
@@ -680,24 +606,23 @@ function ReportingTool(_a) {
         //     aggregationType: "sum",
         //   },
         // ]);
-        setAggregations(function (aggregations) {
-            var newAggregations = __spreadArray(__spreadArray([], aggregations, true), [
+        setAggregations(aggregations => {
+            const newAggregations = [
+                ...aggregations,
                 {
-                    column: selectedTable.columns.filter(function (col) {
-                        return getPostgresBasicType(col) === 'number' &&
-                            !aggregations.map(function (elem) { return elem.name; }).includes(col.name);
-                    })[0],
+                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number' &&
+                        !aggregations.map(elem => elem.name).includes(col.name))[0],
                     aggregationType: 'sum',
                 },
-            ], false);
+            ];
             return newAggregations;
         });
     };
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         // if selected table changes, clear everything
         if (selectedTable.displayName !== AST.from.table) {
             setSelectedColumn(selectedTable.columns[0]);
-            setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
+            setSortableColumns(selectedTable.columns.map(col => col.name));
             setGroupBys([]);
             setSortBys([]);
             setFilters([]);
@@ -722,9 +647,9 @@ function ReportingTool(_a) {
         }
     }, [selectedTable]);
     // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (filters.length || groupBys.length || aggregations.length) {
-            var newAST = {
+            const newAST = {
                 with: null,
                 type: 'select',
                 options: null,
@@ -740,11 +665,11 @@ function ReportingTool(_a) {
                 window: null,
             };
             // FILTERS
-            for (var i = 0; i < filters.length; i++) {
-                var filter = filters[i];
-                var column = filter.column, columnType_1 = filter.columnType, stringFilterValues_1 = filter.stringFilterValues, numberStart_1 = filter.numberStart, numberEnd_1 = filter.numberEnd, dateStart_1 = filter.dateStart, dateEnd_1 = filter.dateEnd;
-                var newCondition = void 0;
-                if (columnType_1 === 'string') {
+            for (let i = 0; i < filters.length; i++) {
+                const filter = filters[i];
+                const { column, columnType, stringFilterValues, numberStart, numberEnd, dateStart, dateEnd, } = filter;
+                let newCondition;
+                if (columnType === 'string') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'IN',
@@ -755,14 +680,14 @@ function ReportingTool(_a) {
                         },
                         right: {
                             type: 'expr_list',
-                            value: stringFilterValues_1.map(function (value) { return ({
+                            value: stringFilterValues.map(value => ({
                                 type: 'single_quote_string',
-                                value: value,
-                            }); }),
+                                value,
+                            })),
                         },
                     };
                 }
-                else if (columnType_1 === 'number') {
+                else if (columnType === 'number') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'BETWEEN',
@@ -774,13 +699,13 @@ function ReportingTool(_a) {
                         right: {
                             type: 'expr_list',
                             value: [
-                                { type: 'number', value: numberStart_1 },
-                                { type: 'number', value: numberEnd_1 },
+                                { type: 'number', value: numberStart },
+                                { type: 'number', value: numberEnd },
                             ],
                         },
                     };
                 }
-                else if (columnType_1 === 'date') {
+                else if (columnType === 'date') {
                     newCondition = {
                         type: 'binary_expr',
                         operator: 'BETWEEN',
@@ -794,11 +719,11 @@ function ReportingTool(_a) {
                             value: [
                                 {
                                     type: 'single_quote_string',
-                                    value: format(new Date(dateStart_1), 'MM/dd/yyyy'),
+                                    value: (0, date_fns_1.format)(new Date(dateStart), 'MM/dd/yyyy'),
                                 },
                                 {
                                     type: 'single_quote_string',
-                                    value: format(new Date(dateEnd_1), 'MM/dd/yyyy'),
+                                    value: (0, date_fns_1.format)(new Date(dateEnd), 'MM/dd/yyyy'),
                                 },
                             ],
                         },
@@ -867,8 +792,8 @@ function ReportingTool(_a) {
             if (groupBys.length > 0) {
                 newAST.columns = [];
                 newAST.groupby = [];
-                for (var i = 0; i < groupBys.length; i++) {
-                    var groupBy = groupBys[i];
+                for (let i = 0; i < groupBys.length; i++) {
+                    const groupBy = groupBys[i];
                     if (groupBy.columnType === 'date') {
                         newAST.columns.push({
                             expr: {
@@ -916,8 +841,8 @@ function ReportingTool(_a) {
                 }
                 // AGGREGATIONS
                 if (aggregations.length > 0) {
-                    for (var i = 0; i < aggregations.length; i++) {
-                        var aggregation = aggregations[i];
+                    for (let i = 0; i < aggregations.length; i++) {
+                        const aggregation = aggregations[i];
                         newAST.columns.push({
                             expr: {
                                 type: 'aggr_func',
@@ -942,8 +867,8 @@ function ReportingTool(_a) {
             }
             if (sortBys.length > 0) {
                 newAST.orderby = [];
-                for (var i = 0; i < sortBys.length; i++) {
-                    var sortBy = sortBys[i];
+                for (let i = 0; i < sortBys.length; i++) {
+                    const sortBy = sortBys[i];
                     newAST.orderby.push({
                         expr: { type: 'column_ref', table: null, column: sortBy.column },
                         type: sortBy.direction === 'descending' ? 'DESC' : 'ASC',
@@ -954,54 +879,53 @@ function ReportingTool(_a) {
             setAST(newAST);
         }
     }, [filters, groupBys, aggregations, sortBys]);
-    var removeFilter = function (index) {
-        setFilters(function (oldFilters) {
-            var newFilters = __spreadArray([], oldFilters, true);
+    const removeFilter = index => {
+        setFilters(oldFilters => {
+            const newFilters = [...oldFilters];
             newFilters.splice(index, 1);
             return newFilters;
         });
         setIndexBeingEdited(-1);
     };
-    var computeStats = useCallback(function (column) {
-        var _a;
+    const computeStats = (0, react_1.useCallback)(column => {
         if (!computedColumns[column.name] && data) {
-            var basicType = getPostgresBasicType(column);
-            var result = void 0;
+            const basicType = getPostgresBasicType(column);
+            let result;
             if (basicType === 'number') {
-                var min_1 = Infinity, max_1 = -Infinity;
-                data.forEach(function (row) {
-                    var value = row[column.name];
-                    min_1 = Math.min(min_1, value);
-                    max_1 = Math.max(max_1, value);
+                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: min_1, max: max_1 };
+                result = { min, max };
             }
             else if (basicType === 'string') {
-                var freqMap_1 = {};
-                data.forEach(function (row) {
-                    var value = row[column.name];
-                    freqMap_1[value] = (freqMap_1[value] || 0) + 1;
+                const freqMap = {};
+                data.forEach(row => {
+                    const value = row[column.name];
+                    freqMap[value] = (freqMap[value] || 0) + 1;
                 });
-                result = Object.entries(freqMap_1)
-                    .sort(function (a, b) { return b[1] - a[1]; })
+                result = Object.entries(freqMap)
+                    .sort((a, b) => b[1] - a[1])
                     .slice(0, 6)
-                    .map(function (_a) {
-                    var key = _a[0];
-                    return key;
-                });
+                    .map(([key]) => key);
             }
             else {
                 // Handle other column types if necessary
             }
-            setComputedColumns(__assign(__assign({}, computedColumns), (_a = {}, _a[column.name] = result, _a)));
+            setComputedColumns({
+                ...computedColumns,
+                [column.name]: result,
+            });
         }
     }, [data, computedColumns]);
     // Call this function whenever the selected column changes
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         computeStats(selectedColumn);
     }, [selectedColumn]);
     // Use the results directly in your component
-    var columnStats = computedColumns[selectedColumn.name];
+    const columnStats = computedColumns[selectedColumn.name];
     // useEffect(() => {
     //   if (AST && AST.from[0].table) {
     //     const parser = new Parser();
@@ -1012,53 +936,43 @@ function ReportingTool(_a) {
     //     }
     //   }
     // }, [AST]);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (!aggregations.length) {
             setAggregations([
                 {
-                    column: selectedTable.columns.filter(function (col) { return getPostgresBasicType(col) === 'number'; })[0],
+                    column: selectedTable.columns.filter(col => getPostgresBasicType(col) === 'number')[0],
                     aggregationType: 'sum',
                 },
             ]);
         }
     }, [selectedGroupByColumn]);
-    useEffect(function () {
-        var getSqlQueryFromAST = function () { return __awaiter(_this, void 0, void 0, function () {
-            var response, sqlQuery_1, err_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 3, , 4]);
-                        if (!(AST && AST.from[0].table)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, axios.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST })];
-                    case 1:
-                        response = _a.sent();
-                        sqlQuery_1 = response.data.query;
-                        // alert(sqlQuery);
-                        if (sqlQuery_1) {
-                            onChangeQuery(sqlQuery_1);
-                            runQuery(sqlQuery_1);
-                            setSqlQuery(sqlQuery_1);
-                            if (AST.columns === '*') {
-                                setSortableColumns(selectedTable.columns.map(function (col) { return col.name; }));
-                            }
-                            else if (AST.columns.length) {
-                                setSortableColumns(AST.columns.map(function (elem) { return elem.as || elem.expr.name; }));
-                            }
+    (0, react_1.useEffect)(() => {
+        const getSqlQueryFromAST = async () => {
+            try {
+                if (AST && AST.from[0].table) {
+                    const response = await axios_1.default.post('https://quill-344421.uc.r.appspot.com/sqlify', { ast: AST });
+                    const sqlQuery = response.data.query; // assuming the response contains the SQL query
+                    // alert(sqlQuery);
+                    if (sqlQuery) {
+                        onChangeQuery(sqlQuery);
+                        runQuery(sqlQuery);
+                        setSqlQuery(sqlQuery);
+                        if (AST.columns === '*') {
+                            setSortableColumns(selectedTable.columns.map(col => col.name));
+                        }
+                        else if (AST.columns.length) {
+                            setSortableColumns(AST.columns.map(elem => elem.as || elem.expr.name));
                         }
-                        _a.label = 2;
-                    case 2: return [3 /*break*/, 4];
-                    case 3:
-                        err_1 = _a.sent();
-                        console.error(err_1);
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+                    }
                 }
-            });
-        }); };
+            }
+            catch (err) {
+                console.error(err);
+            }
+        };
         getSqlQueryFromAST();
     }, [AST]);
-    useEffect(function () {
+    (0, react_1.useEffect)(() => {
         if (sortableColumns.length) {
             setSelectedSortByColumn(sortableColumns[0]);
         }
@@ -1066,31 +980,30 @@ function ReportingTool(_a) {
     if (!schema || !schema.length) {
         return null;
     }
-    return (_jsxs("div", __assign({ style: { marginLeft: '25px' } }, { children: [_jsxs("div", __assign({ style: { maxWidth: 245 } }, { children: [_jsx("div", __assign({ style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginLeft: '25px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: 245 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             fontSize: 14,
                             marginBottom: '6px',
                             fontWeight: '600',
                             color: theme.secondaryTextColor,
-                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                        } }, { children: "Table" })), _jsx(SelectComponent, { label: "Table", value: selectedTable.displayName, onChange: function (e) {
-                            var table = schema.find(function (t) { return t.displayName === e; });
+                            fontFamily: theme?.fontFamily,
+                        }, children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Table", value: selectedTable.displayName, onChange: e => {
+                            const table = schema.find(t => t.displayName === e);
                             setSelectedTable(table);
-                        }, options: (schema === null || schema === void 0 ? void 0 : schema.length)
-                            ? schema.map(function (elem) {
+                        }, options: schema?.length
+                            ? schema.map(elem => {
                                 return { label: elem.displayName, value: elem.displayName };
                             })
-                            : [] })] })), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: '12px' } }, { children: [_jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, theme: theme }), _jsx(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme }), _jsx(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, tagStyle: tagStyle, theme: theme })] }))] })));
+                            : [] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: '12px' }, children: [(0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, theme: theme }), (0, jsx_runtime_1.jsx)(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme }), (0, jsx_runtime_1.jsx)(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, tagStyle: tagStyle, theme: theme })] })] }));
 }
-function FilterTag(_a) {
-    var id = _a.id, label = _a.label, removeFilter = _a.removeFilter, index = _a.index, setIsOpen = _a.setIsOpen, selectFilter = _a.selectFilter, theme = _a.theme, tagStyle = _a.tagStyle;
-    var handleRemoveFilter = function () {
+function FilterTag({ id, label, removeFilter, index, setIsOpen, selectFilter, theme, tagStyle, }) {
+    const handleRemoveFilter = () => {
         removeFilter(index);
     };
-    var handleSelectFilter = function () {
+    const handleSelectFilter = () => {
         selectFilter(index);
         setIsOpen(true);
     };
-    return (_jsxs("div", __assign({ id: id, onClick: handleSelectFilter, style: tagStyle || {
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: tagStyle || {
             marginLeft: '12px',
             cursor: 'pointer',
             borderRadius: 8,
@@ -1102,17 +1015,17 @@ function FilterTag(_a) {
             alignItems: 'center',
             fontSize: 13,
             fontWeight: 'medium',
-            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
-            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+            color: theme?.primaryTextColor,
+            fontFamily: theme?.fontFamily,
             outline: 'none',
-        } }, { children: [_jsx("div", __assign({ id: id, style: {
+        }, children: [(0, jsx_runtime_1.jsx)("div", { id: id, style: {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     maxWidth: '80px',
-                } }, { children: label })), _jsx("div", __assign({ 
+                }, children: label }), (0, jsx_runtime_1.jsx)("div", { 
                 // onClick={handleRemoveFilter}
-                onClick: function (e) {
+                onClick: e => {
                     e.stopPropagation(); // Prevents the event from bubbling up to the parent
                     handleRemoveFilter();
                 }, style: {
@@ -1121,54 +1034,53 @@ function FilterTag(_a) {
                     alignItems: 'center',
                     cursor: 'pointer',
                     paddingLeft: '6px',
-                } }, { children: _jsx(XMarkIcon, { style: {
+                }, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { style: {
                         height: '20px',
                         width: '20px',
-                        color: (tagStyle === null || tagStyle === void 0 ? void 0 : tagStyle.color) || (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor),
-                    }, "aria-hidden": "true" }) }))] })));
+                        color: tagStyle?.color || theme?.primaryTextColor,
+                    }, "aria-hidden": "true" }) })] }));
 }
-var SortByModal = function (_a) {
-    var selectedSortByColumn = _a.selectedSortByColumn, selectedSortByDirection = _a.selectedSortByDirection, setSelectedSortByColumn = _a.setSelectedSortByColumn, setSelectedSortByDirection = _a.setSelectedSortByDirection, selectedTable = _a.selectedTable, sortableColumns = _a.sortableColumns, removeSortBy = _a.removeSortBy, selectSortBy = _a.selectSortBy, updateSortBy = _a.updateSortBy, addSortBy = _a.addSortBy, sortBys = _a.sortBys, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, tagStyle = _a.tagStyle, ModalTriggerComponent = _a.ModalTriggerComponent, sortByIndexBeingEdited = _a.sortByIndexBeingEdited, theme = _a.theme;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: 12 } }, { children: _jsxs("div", __assign({ style: {
+const SortByModal = ({ selectedSortByColumn, selectedSortByDirection, setSelectedSortByColumn, setSelectedSortByDirection, selectedTable, sortableColumns, removeSortBy, selectSortBy, updateSortBy, addSortBy, sortBys, SelectComponent, ButtonComponent, ModalComponent, tagStyle, ModalTriggerComponent, sortByIndexBeingEdited, theme, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', marginTop: 12 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
                 textAlign: 'left',
-            } }, { children: [_jsxs("div", __assign({ style: {
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Sort" }), _jsx("div", __assign({ style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => setIsOpen(isOpen => !isOpen), label: "Sort" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 overflowX: 'scroll',
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                            } }, { children: sortBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'sort' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add sort" }, { children: _jsxs("div", __assign({ style: {
+                            }, children: sortBys.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'sort' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add sort", children: (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
-                        } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                             fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
                                             color: theme.secondaryTextColor,
-                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                        } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedSortByColumn, onChange: function (e) {
+                                            fontFamily: theme?.fontFamily,
+                                        }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: selectedSortByColumn, onChange: e => {
                                             setSelectedSortByColumn(e);
-                                        }, options: sortableColumns.map(function (elem) {
+                                        }, options: sortableColumns.map(elem => {
                                             return { label: elem, value: elem };
-                                        }) })] })), _jsx("div", __assign({ style: {
+                                        }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                     fontSize: '14px',
                                     marginBottom: '6px',
                                     fontWeight: '600',
                                     color: theme.secondaryTextColor,
-                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                    fontFamily: theme?.fontFamily,
                                     marginTop: 20,
-                                } }, { children: "Direction" })), _jsx(SelectComponent, { value: selectedSortByDirection, onChange: function (e) {
+                                }, children: "Direction" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: selectedSortByDirection, onChange: e => {
                                     setSelectedSortByDirection(e);
                                 }, options: [
                                     { label: 'ascending', value: 'ascending' },
                                     { label: 'descending', value: 'descending' },
-                                ] }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
+                                ] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
                                     if (sortByIndexBeingEdited > -1) {
                                         updateSortBy(sortByIndexBeingEdited);
                                         setIsOpen(false);
@@ -1178,80 +1090,76 @@ var SortByModal = function (_a) {
                                     addSortBy();
                                     setIsOpen(false);
                                     // close();
-                                }, label: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' })] })) }))] })) })));
+                                }, label: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' })] }) })] }) }));
 };
-var GroupByModal2 = function (_a) {
-    var selectedGroupByColumn = _a.selectedGroupByColumn, addGroupBy = _a.addGroupBy, setSelectedGroupByColumn = _a.setSelectedGroupByColumn, selectedTable = _a.selectedTable, groupByColumnType = _a.groupByColumnType, groupByIndexBeingEdited = _a.groupByIndexBeingEdited, updateGroupBy = _a.updateGroupBy, groupBys = _a.groupBys, removeGroupBy = _a.removeGroupBy, selectGroupBy = _a.selectGroupBy, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, aggregations = _a.aggregations, setAggregationColumn = _a.setAggregationColumn, setAggregationType = _a.setAggregationType, addAggregation = _a.addAggregation, dateBucket = _a.dateBucket, setDateBucket = _a.setDateBucket, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
+const GroupByModal2 = ({ selectedGroupByColumn, addGroupBy, setSelectedGroupByColumn, selectedTable, groupByColumnType, groupByIndexBeingEdited, updateGroupBy, groupBys, removeGroupBy, selectGroupBy, SelectComponent, ButtonComponent, aggregations, setAggregationColumn, setAggregationType, addAggregation, dateBucket, setDateBucket, ModalComponent, theme, ModalTriggerComponent, TextInputComponent, tagStyle, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 position: 'relative',
                 display: 'inline-block',
                 textAlign: 'left',
-            } }, { children: [_jsxs("div", __assign({ style: {
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Group by" }), _jsx("div", __assign({ style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => setIsOpen(isOpen => !isOpen), label: "Group by" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 overflowX: 'scroll',
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                            } }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'groupby' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add group by" }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                            }, children: groupBys.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'groupby' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add group by", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                             fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
-                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                            fontFamily: theme?.fontFamily,
                                             color: theme.secondaryTextColor,
-                                        } }, { children: "Column" })), _jsx(SelectComponent, { label: "Column", value: selectedGroupByColumn.name, onChange: function (e) {
-                                            var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                        }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Column", value: selectedGroupByColumn.name, onChange: e => {
+                                            const column = selectedTable.columns.find(c => c.name === e);
                                             setSelectedGroupByColumn(column);
-                                        }, options: selectedTable.columns.map(function (elem) {
+                                        }, options: selectedTable.columns.map(elem => {
                                             return { label: elem.name, value: elem.name };
-                                        }) })] })), groupByColumnType === 'date' && (_jsxs("div", __assign({ style: {
+                                        }) })] }), groupByColumnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     // marginLeft: 12,
-                                } }, { children: [_jsx("div", __assign({ style: {
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                             fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
                                             color: theme.secondaryTextColor,
-                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                            fontFamily: theme?.fontFamily,
                                             marginTop: 20,
-                                        } }, { children: "Bucket" })), _jsx(SelectComponent, { label: "Bucket", value: dateBucket, onChange: function (e) {
+                                        }, children: "Bucket" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: "Bucket", value: dateBucket, onChange: e => {
                                             setDateBucket(e);
                                         }, options: [
                                             { label: 'month', value: 'month' },
                                             { label: 'day', value: 'day' },
                                             { label: 'week', value: 'week' },
-                                        ] })] }))), _jsx("div", __assign({ style: {
+                                        ] })] })), (0, jsx_runtime_1.jsx)("div", { style: {
                                     fontSize: 14,
                                     marginBottom: '6px',
                                     fontWeight: '600',
                                     marginTop: 20,
                                     color: theme.secondaryTextColor,
-                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                } }, { children: "Aggregations" })), aggregations.map(function (aggregation, index) {
-                                var _a;
-                                return (
-                                // setAggregationType
-                                _jsxs("div", __assign({ style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                    } }, { children: [_jsx(SelectComponent, { value: (_a = aggregation.column) === null || _a === void 0 ? void 0 : _a.name, onChange: function (e) {
-                                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
-                                                setAggregationColumn(column, index);
-                                            }, options: selectedTable.columns.map(function (elem) {
-                                                return { label: elem.name, value: elem.name };
-                                            }) }), _jsx("div", { style: { width: 16 } }), _jsx(SelectComponent, { value: aggregation.aggregationType, onChange: function (e) {
-                                                setAggregationType(e, index);
-                                            }, options: [
-                                                { label: 'sum', value: 'sum' },
-                                                { label: 'average', value: 'average' },
-                                                { label: 'count', value: 'count' },
-                                            ] })] }), 'agg' + index));
-                            }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
+                                    fontFamily: theme?.fontFamily,
+                                }, children: "Aggregations" }), aggregations.map((aggregation, index) => (
+                            // setAggregationType
+                            (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: aggregation.column?.name, onChange: e => {
+                                            const column = selectedTable.columns.find(c => c.name === e);
+                                            setAggregationColumn(column, index);
+                                        }, options: selectedTable.columns.map(elem => {
+                                            return { label: elem.name, value: elem.name };
+                                        }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: aggregation.aggregationType, onChange: e => {
+                                            setAggregationType(e, index);
+                                        }, options: [
+                                            { label: 'sum', value: 'sum' },
+                                            { label: 'average', value: 'average' },
+                                            { label: 'count', value: 'count' },
+                                        ] })] }, 'agg' + index))), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
                                     if (groupByIndexBeingEdited > -1) {
                                         updateGroupBy(groupByIndexBeingEdited);
                                         setIsOpen(false);
@@ -1261,119 +1169,116 @@ var GroupByModal2 = function (_a) {
                                     addGroupBy();
                                     setIsOpen(false);
                                     // close();
-                                }, label: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' })] })) }))] })) })));
+                                }, label: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' })] }) })] }) }));
 };
-var AddFilterModal2 = function (_a) {
-    var filters = _a.filters, selectedColumn = _a.selectedColumn, numberStart = _a.numberStart, numberEnd = _a.numberEnd, dateStart = _a.dateStart, setDateStart = _a.setDateStart, columnStats = _a.columnStats, stringFilterValues = _a.stringFilterValues, setStringFilterValues = _a.setStringFilterValues, addFilter = _a.addFilter, setSelectedColumn = _a.setSelectedColumn, setNumberStart = _a.setNumberStart, setNumberEnd = _a.setNumberEnd, selectedTable = _a.selectedTable, columnType = _a.columnType, setDateEnd = _a.setDateEnd, dateEnd = _a.dateEnd, removeFilter = _a.removeFilter, selectFilter = _a.selectFilter, indexBeingEdited = _a.indexBeingEdited, updateFilter = _a.updateFilter, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
+const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, dateStart, setDateStart, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, setDateEnd, dateEnd, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, ModalComponent, theme, ModalTriggerComponent, TextInputComponent, tagStyle, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     position: 'relative',
                     display: 'inline-block',
                     textAlign: 'left',
-                } }, { children: [_jsxs("div", __assign({ style: {
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
-                        } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Filter" }), _jsx("div", __assign({ style: {
+                        }, children: [(0, jsx_runtime_1.jsx)(ModalTriggerComponent, { onClick: () => setIsOpen(isOpen => !isOpen), label: "Filter" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                     overflowX: 'scroll',
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                } }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle }, 'filter' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add filter" }, { children: _jsxs("div", __assign({ style: {
+                                }, children: filters.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle }, 'filter' + index))) })] }), (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            } }, { children: [_jsx("div", __assign({ style: {
+                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                         fontSize: 14,
                                         marginBottom: '6px',
                                         fontWeight: '600',
                                         color: theme.secondaryTextColor,
-                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                    } }, { children: "Column" })), _jsx(SelectComponent, { id: "custom-select", value: selectedColumn.name, onChange: function (e) {
-                                        var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                        fontFamily: theme?.fontFamily,
+                                    }, children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "custom-select", value: selectedColumn.name, onChange: e => {
+                                        const column = selectedTable.columns.find(c => c.name === e);
                                         setSelectedColumn(column);
-                                    }, options: selectedTable.columns.map(function (elem) {
+                                    }, options: selectedTable.columns.map(elem => {
                                         return { label: elem.name, value: elem.name };
-                                    }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", __assign({ style: {
+                                    }) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
-                                        } }, { children: [_jsxs("div", __assign({ style: {
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                } }, { children: [_jsx("div", __assign({ style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                             fontSize: '14px',
                                                             fontWeight: '600',
                                                             color: theme.secondaryTextColor,
-                                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                            fontFamily: theme?.fontFamily,
                                                             marginBottom: 6,
-                                                        } }, { children: "Minimum" })), _jsx(TextInputComponent, { id: "min-input", value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); } })] })), _jsx("div", { style: { width: 16 } }), _jsxs("div", __assign({ style: {
+                                                        }, children: "Minimum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "min-input", value: numberStart, onChange: e => setNumberStart(e.target.value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     marginTop: '20px',
-                                                } }, { children: [_jsx("div", __assign({ style: {
+                                                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                             fontSize: '14px',
                                                             fontWeight: '600',
                                                             color: theme.secondaryTextColor,
-                                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                            fontFamily: theme?.fontFamily,
                                                             marginBottom: 6,
-                                                        } }, { children: "Maximum" })), _jsx(TextInputComponent, { id: "max-input", value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); } })] }))] })) })), columnType === 'date' && (_jsxs("div", __assign({ style: {
+                                                        }, children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", value: numberEnd, onChange: e => setNumberEnd(e.target.value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'space-between',
-                                    } }, { children: [_jsxs("div", __assign({ style: {
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            } }, { children: [_jsx("div", __assign({ style: {
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                         fontSize: 14,
                                                         fontWeight: '600',
                                                         color: 'rgba(56, 65, 81, 0.7)',
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date" })] })), _jsxs("div", __assign({ style: {
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: "Start date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateStart, onChange: e => setDateStart(e.target.value), placeholder: "Start date" })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
-                                            } }, { children: [_jsx("div", __assign({ style: {
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                                         fontSize: 14,
                                                         fontWeight: '600',
                                                         color: 'rgba(56, 65, 81, 0.7)',
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date" })] }))] }))), columnType === 'string' &&
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: "End date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", value: dateEnd, onChange: e => setDateEnd(e.target.value), placeholder: "End date" })] })] })), columnType === 'string' &&
                                     columnStats &&
-                                    columnStats.length > 0 && (_jsx("div", __assign({ style: {
+                                    columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                         flex: 'flex',
                                         flexDirection: 'column',
                                         marginTop: '14px',
                                         overflow: 'hidden',
-                                    } }, { children: columnStats.map(function (value) { return (_jsx("div", __assign({ style: {
+                                    }, children: columnStats.map(value => ((0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
-                                        } }, { children: _jsxs("div", __assign({ style: {
+                                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 alignItems: 'center',
                                                 paddingTop: 6,
                                                 paddingBottom: 6,
-                                            } }, { children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: function () {
-                                                        setStringFilterValues(function (prev) {
-                                                            return prev.includes(value)
-                                                                ? prev.filter(function (v) { return v !== value; })
-                                                                : __spreadArray(__spreadArray([], prev, true), [value], false);
-                                                        });
-                                                    } }), _jsx("div", __assign({ style: {
+                                            }, children: [(0, jsx_runtime_1.jsx)(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
+                                                        setStringFilterValues(prev => prev.includes(value)
+                                                            ? prev.filter(v => v !== value)
+                                                            : [...prev, value]);
+                                                    } }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                         marginLeft: 6,
                                                         display: 'block',
                                                         overflow: 'hidden',
                                                         textOverflow: 'ellipsis',
                                                         whiteSpace: 'nowrap',
-                                                        color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } }, { children: value }))] }), value) }), value)); }) }))), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
+                                                        color: theme?.primaryTextColor,
+                                                        fontFamily: theme?.fontFamily,
+                                                    }, children: value })] }, value) }, value))) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
                                         if (indexBeingEdited > -1) {
                                             updateFilter(indexBeingEdited);
                                             setIsOpen(false);
@@ -1381,16 +1286,15 @@ var AddFilterModal2 = function (_a) {
                                         }
                                         addFilter();
                                         setIsOpen(false);
-                                    }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })] })) }))] })), _jsx("div", { style: { height: '12px' } })] })));
+                                    }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '12px' } })] }));
 };
-var DivCheckbox = function (_a) {
-    var onChange = _a.onChange, checked = _a.checked, theme = _a.theme;
-    var toggleCheckbox = function () {
+const DivCheckbox = ({ onChange, checked, theme }) => {
+    const toggleCheckbox = () => {
         if (onChange) {
             onChange(!checked);
         }
     };
-    var style = {
+    const style = {
         // display: 'inline-block',
         width: '18px',
         height: '18px',
@@ -1400,14 +1304,14 @@ var DivCheckbox = function (_a) {
         position: 'relative',
         cursor: 'pointer',
         boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+        fontFamily: theme?.fontFamily,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
     };
-    return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, 
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked, 
         // className="shadow-sm"
-        role: "checkbox" }, { children: checked && (_jsx(CheckIcon, { style: { color: theme === null || theme === void 0 ? void 0 : theme.backgroundColor, height: 16, width: 16 }, className: "text-white", "aria-hidden": "true" })) })));
+        role: "checkbox", children: checked && ((0, jsx_runtime_1.jsx)(solid_1.CheckIcon, { style: { color: theme?.backgroundColor, height: 16, width: 16 }, className: "text-white", "aria-hidden": "true" })) }));
 };
 //# sourceMappingURL=ReportBuilder.js.map