@quillsql/react 1.7.4 → 1.7.6

package/src/ReportBuilder.tsx

@@ -1,2202 +0,0 @@
-import React, { useState, useContext, useCallback, useEffect } from 'react';
-// import './nightOwlLight.css';
-import axios from 'axios';
-import { ClientContext, SchemaContext, ThemeContext } from './Context';
-import {
-  ChevronDownIcon,
-  ChevronRightIcon,
-  SparklesIcon,
-  MagnifyingGlassIcon,
-  XMarkIcon,
-  CheckIcon,
-} from '@heroicons/react/20/solid';
-import { convertPostgresColumn } from './SQLEditor';
-import { format } from 'date-fns';
-import { QuillTheme } from './QuillProvider';
-
-interface Option {
-  value: string;
-  label: string;
-}
-
-interface SelectComponentProps {
-  onChange: (value: string) => void;
-  value: string;
-  options: Option[];
-}
-
-interface ButtonComponentProps {
-  onClick: () => void;
-  label: string;
-}
-
-interface ModalTriggerComponentProps {
-  onClick: () => void;
-  label: string;
-}
-
-interface ModalComponentProps {
-  children: any;
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-}
-
-interface TextInputComponentProps {
-  onChange: (e: any) => void;
-  value: string;
-  id: string;
-}
-
-interface ReportBuilderProps {
-  onChangeQuery: (query: string) => void;
-  onChangeData: (data: object[]) => void;
-  onChangeColumns: (columns: object[]) => void;
-  onChangeLoading: (loading: boolean) => void;
-  onError: (error: string) => void;
-  SelectComponent?: (props: SelectComponentProps) => JSX.Element;
-  ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
-  ModalComponent?: (props: ModalComponentProps) => JSX.Element;
-  ModalTriggerComponent?: (props: ModalTriggerComponentProps) => JSX.Element;
-  TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
-  tagStyle: React.CSSProperties;
-}
-
-function QuillModal({ children, isOpen, onClose, title, theme }) {
-  if (!isOpen) {
-    return null;
-  }
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 45,
-        minWidth: 300,
-        left: 0,
-        backgroundColor: theme.backgroundColor || 'white',
-        padding: '20px',
-        zIndex: '1000',
-        borderRadius: 8,
-        boxShadow: '0 1px 8px 0 rgba(0,0,0,.09)',
-        borderWidth: theme.borderWidth,
-        borderStyle: 'solid',
-        borderColor: theme.borderColor,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default function ReportBuilder({
-  onChangeQuery,
-  onChangeData,
-  onChangeColumns,
-  onChangeLoading,
-  onError,
-  SelectComponent,
-  ButtonComponent,
-  ModalComponent,
-  ModalTriggerComponent,
-  TextInputComponent,
-  tagStyle,
-}: ReportBuilderProps) {
-  const [data, setData] = useState([]);
-  const [client] = useContext(ClientContext);
-  const [schema, setSchema] = useContext(SchemaContext);
-  const [theme] =
-    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
-  const [columns, setColumns] = useState([]);
-  const [fields, setFields] = useState([]);
-
-  useEffect(() => {
-    async function getData(schema) {
-      if (schema.length && !data.length) {
-        const { publicKey, customerId, environment } = client;
-        const response = await axios.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(() => {
-    let isSubscribed = true;
-    async function getSchema() {
-      const { publicKey, environment } = client;
-      const response3 = await axios.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 () => {
-      isSubscribed = false;
-    };
-  }, []);
-
-  const runQuery = async query => {
-    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
-      client;
-
-    let response;
-    if (queryEndpoint) {
-      response = await axios.post(
-        queryEndpoint,
-        { metadata: { query, task: 'query' } },
-        { headers: queryHeaders }
-      );
-    } else {
-      response = await axios.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 => convertPostgresColumn(elem)));
-    onChangeColumns(
-      response.data.fields.map(elem => convertPostgresColumn(elem))
-    );
-    setFields(response.data.fields);
-  };
-
-  if (!schema.length) {
-    return null;
-  }
-
-  return (
-    <ReportingTool
-      theme={theme}
-      data={data}
-      schema={schema}
-      onChangeQuery={onChangeQuery}
-      runQuery={runQuery}
-      SelectComponent={
-        SelectComponent
-          ? SelectComponent
-          : ({ onChange, value, options }: SelectComponentProps) => {
-              return (
-                <select
-                  onChange={event => onChange(event.target.value)}
-                  value={value}
-                  id={'reportbuilderdropdown'}
-                  style={{
-                    width: '100%',
-                    minWidth: 230,
-                    outline: 'none',
-                    textAlign: 'left',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    borderRadius: 6,
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    height: 38,
-                    borderWidth: theme.borderWidth,
-                    borderColor: theme.borderColor,
-                    background: theme.backgroundColor,
-                    color: theme.primaryTextColor,
-                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                    fontFamily: theme.fontFamily,
-                  }}
-                >
-                  {options.map((option, index) => (
-                    <option key={option.label + index} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </select>
-              );
-            }
-      }
-      ButtonComponent={
-        ButtonComponent
-          ? ButtonComponent
-          : ({ onClick, label }: ButtonComponentProps) => {
-              return (
-                <div
-                  style={{
-                    height: 32,
-                    background: theme.primaryButtonColor,
-                    borderWidth: theme.borderWidth,
-                    borderColor: theme.borderColor,
-                    color: theme.backgroundColor,
-                    display: 'flex',
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    outline: 'none',
-                    cursor: 'pointer',
-                    fontFamily: theme.fontFamily,
-                    fontWeight: theme.buttonFontWeight || 600,
-                  }}
-                  onClick={onClick}
-                >
-                  {label}
-                </div>
-              );
-            }
-      }
-      ModalComponent={
-        ModalComponent
-          ? ModalComponent
-          : ({ children, isOpen, onClose, title }: ModalComponentProps) => {
-              return (
-                <QuillModal
-                  isOpen={isOpen}
-                  theme={theme}
-                  onClose={onClose}
-                  title={title}
-                >
-                  {children}
-                </QuillModal>
-              );
-            }
-      }
-      ModalTriggerComponent={
-        ModalTriggerComponent
-          ? ModalTriggerComponent
-          : ({ onClick, label }: ModalTriggerComponentProps) => {
-              return (
-                <div
-                  style={{
-                    height: 32,
-                    background: theme.backgroundColor,
-                    borderWidth: theme.borderWidth,
-                    borderColor: theme.borderColor,
-                    borderStyle: 'solid',
-                    outline: 'none',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    borderRadius: 6,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                    paddingRight: 12,
-                    paddingLeft: 12,
-                    fontSize: 14,
-                    color: theme.primaryTextColor,
-                    fontWeight: theme.buttonFontWeight || 600,
-                    fontFamily: theme.fontFamily,
-                  }}
-                  onClick={onClick}
-                >
-                  {label}
-                </div>
-              );
-            }
-      }
-      TextInputComponent={
-        TextInputComponent
-          ? TextInputComponent
-          : ({ onChange, value, id }: TextInputComponentProps) => {
-              return (
-                <input
-                  style={{
-                    outline: 'none',
-                    textAlign: 'left',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    borderRadius: 6,
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    height: 38,
-                    borderWidth: theme.borderWidth,
-                    borderColor: theme.borderColor,
-                    borderStyle: 'solid',
-                    background: theme.backgroundColor,
-                    color: theme.primaryTextColor,
-                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                    fontFamily: theme.fontFamily,
-                  }}
-                  id={id}
-                  onChange={onChange}
-                  value={value}
-                />
-              );
-            }
-      }
-      tagStyle={tagStyle}
-    />
-  );
-}
-
-export function getPostgresBasicType(column) {
-  let format;
-
-  // first check if column.dataTypeID exists
-  if (column.dataTypeID) {
-    switch (column.dataTypeID) {
-      case 20: // int8
-      case 21: // int2
-      case 23: // int4
-      case 700: // float4
-      case 701: // float8
-      case 1700: // numeric
-        format = 'number';
-        break;
-      case 1082: // date
-      case 1083: // time
-      case 1184: // timestamptz
-      case 1114: // timestamp
-        format = 'date';
-        break;
-      case 1043: // varchar
-      default:
-        format = 'string';
-    }
-  } else if (column.fieldType) {
-    // if column.dataTypeID doesn't exist, check column.fieldType
-    switch (column.fieldType) {
-      case 'int8':
-      case 'int2':
-      case 'int4':
-      case 'float4':
-      case 'float8':
-      case 'numeric':
-        format = 'number';
-        break;
-      case 'date':
-      case 'time':
-      case 'timestamptz':
-      case 'timestamp':
-        format = 'date';
-        break;
-      case 'varchar':
-      default:
-        format = 'string';
-    }
-  }
-
-  return format;
-}
-
-function ReportingTool({
-  schema,
-  data,
-  runQuery,
-  SelectComponent,
-  ButtonComponent,
-  onChangeQuery,
-  theme,
-  ModalComponent,
-  ModalTriggerComponent,
-  TextInputComponent,
-  tagStyle,
-}) {
-  const [selectedTable, setSelectedTable] = useState(schema[0]);
-  const [selectedColumn, setSelectedColumn] = useState(schema[0].columns[0]);
-  const [filters, setFilters] = useState([]);
-  const [AST, setAST] = useState({
-    with: null,
-    type: 'select',
-    options: null,
-    distinct: { type: null },
-    columns: '*',
-    into: { position: null },
-    from: [{ db: null, table: schema[0].displayName, as: null }],
-    where: null,
-    groupby: null,
-    having: null,
-    orderby: null,
-    limit: { seperator: '', value: [] },
-    window: null,
-  });
-  const [numberStart, setNumberStart] = useState(0);
-  const [numberEnd, setNumberEnd] = useState(0);
-  const [dateStart, setDateStart] = useState('');
-  const [dateEnd, setDateEnd] = useState('');
-  const [computedColumns, setComputedColumns] = useState({});
-  const [stringFilterValues, setStringFilterValues] = useState([]);
-  const [columnType, setColumnType] = useState(
-    getPostgresBasicType(schema[0].columns[0])
-  );
-  const [sqlQuery, setSqlQuery] = useState('');
-  // month | week | day | quarter
-  const [dateBucket, setDateBucket] = useState('month');
-  const [indexBeingEdited, setIndexBeingEdited] = useState(-1);
-  const [groupBys, setGroupBys] = useState([]);
-  const [aggregations, setAggregations] = useState([]);
-  const [selectedGroupByColumn, setSelectedGroupByColumn] = useState(
-    schema[0].columns[0]
-  );
-  const [groupByColumnType, setGroupByColumnType] = useState(
-    getPostgresBasicType(schema[0].columns[0])
-  );
-  const [selectedSortByColumn, setSelectedSortByColumn] = useState(
-    schema[0].columns[0].name
-  );
-  const [sortBys, setSortBys] = useState([]);
-  const [selectedSortByDirection, setSelectedSortByDirection] =
-    useState('ascending');
-
-  const [groupByIndexBeingEdited, setGroupByIndexBeingEdited] = useState(-1);
-
-  const [sortByIndexBeingEdited, setSortByIndexBeingEdited] = useState(-1);
-  const [sortableColumns, setSortableColumns] = useState(
-    schema[0].columns.map(col => col.name)
-  );
-
-  const addGroupBy = () => {
-    if (selectedGroupByColumn && groupByColumnType) {
-      if (groupByColumnType === 'string') {
-        setGroupBys(groupBys => {
-          return [
-            ...groupBys,
-            {
-              column: selectedGroupByColumn.name,
-              columnType: groupByColumnType,
-              tag: selectedGroupByColumn.name,
-            },
-          ];
-        });
-        return;
-      } else if (groupByColumnType === 'number') {
-        // is this possible lmao
-        return;
-      } else if (groupByColumnType === 'date') {
-        setGroupBys(groupBys => {
-          return [
-            ...groupBys,
-            {
-              column: selectedGroupByColumn.name,
-              columnType: groupByColumnType,
-              bucket: dateBucket,
-              tag: dateBucket,
-            },
-          ];
-        });
-        return;
-      }
-    }
-  };
-
-  const addSortBy = () => {
-    setSortBys(sortBys => {
-      return [
-        ...sortBys,
-        {
-          column: selectedSortByColumn,
-          direction: selectedSortByDirection,
-        },
-      ];
-    });
-  };
-
-  const removeSortBy = index => {
-    setSortBys(oldSortBys => {
-      const newSortBys = [...oldSortBys];
-      newSortBys.splice(index, 1);
-      return newSortBys;
-    });
-    setSortByIndexBeingEdited(-1);
-  };
-
-  const removeGroupBy = index => {
-    const columnBeingDeleted = groupBys[index].tag;
-    setSortBys(oldSortBys => {
-      const newSortBys = [
-        ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
-      ];
-      return newSortBys;
-    });
-    setGroupBys(oldGroupBys => {
-      const newGroupBys = [...oldGroupBys];
-      newGroupBys.splice(index, 1);
-      return newGroupBys;
-    });
-    setGroupByIndexBeingEdited(-1);
-  };
-
-  const updateSortBy = index => {
-    if (selectedSortByColumn && selectedSortByDirection) {
-      setSortBys(sortBys => {
-        const newSortBys = [...sortBys];
-        newSortBys[index] = {
-          column: selectedSortByColumn,
-          direction: selectedSortByDirection,
-        };
-        return newSortBys;
-      });
-      setSortByIndexBeingEdited(-1);
-      return;
-    }
-  };
-
-  useEffect(() => {
-    setColumnType(getPostgresBasicType(selectedColumn));
-    // console.log("WTF: ", selectedColumn);
-  }, [selectedColumn]);
-
-  useEffect(() => {
-    setGroupByColumnType(getPostgresBasicType(selectedGroupByColumn));
-  }, [selectedGroupByColumn]);
-
-  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);
-      setIndexBeingEdited(index);
-    } else if (filter.columnType === 'number') {
-      setNumberStart(filter.numberStart);
-      setNumberEnd(filter.numberEnd);
-      setIndexBeingEdited(index);
-    } else if (filter.columnType === 'date') {
-      setDateStart(filter.dateStart);
-      setDateEnd(filter.dateEnd);
-      setIndexBeingEdited(index);
-    }
-  };
-
-  const selectSortBy = index => {
-    const sortBy = sortBys[index];
-    setSelectedSortByColumn(sortBy.column);
-    setSelectedSortByDirection(sortBy.direction);
-    setSortByIndexBeingEdited(index);
-  };
-
-  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);
-  };
-
-  const updateGroupBy = index => {
-    if (selectedGroupByColumn && groupByColumnType) {
-      // if column changed, then auto delete the sort using that column
-      const columnBeingDeleted =
-        selectedGroupByColumn.name !== groupBys[index].column
-          ? groupBys[index].tag
-          : 'nocolumnbeingdeleted';
-      setSortBys(oldSortBys => {
-        const newSortBys = [
-          ...oldSortBys.filter(sortBy => sortBy.column !== columnBeingDeleted),
-        ];
-        return newSortBys;
-      });
-      if (groupByColumnType === 'date') {
-        setGroupBys(groupBys => {
-          const newGroupBys = [...groupBys];
-          newGroupBys[index] = {
-            column: selectedGroupByColumn.name,
-            columnType: groupByColumnType,
-            bucket: dateBucket,
-            tag: dateBucket,
-          };
-          return newGroupBys;
-        });
-      } else {
-        setGroupBys(groupBys => {
-          const newGroupBys = [...groupBys];
-          newGroupBys[index] = {
-            column: selectedGroupByColumn.name,
-            columnType: groupByColumnType,
-            tag: selectedGroupByColumn.name,
-          };
-          return newGroupBys;
-        });
-      }
-      setGroupByIndexBeingEdited(-1);
-      return;
-    }
-  };
-
-  const updateFilter = index => {
-    if (selectedColumn && columnType) {
-      if (columnType === 'string') {
-        setFilters(filters => {
-          const newFilters = [...filters];
-          newFilters[index] = {
-            column: selectedColumn.name,
-            columnType,
-            stringFilterValues,
-            tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
-          };
-          return newFilters;
-        });
-      } else if (columnType === 'number') {
-        setFilters(filters => {
-          const newFilters = [...filters];
-          newFilters[index] = {
-            column: selectedColumn.name,
-            columnType,
-            numberStart,
-            numberEnd,
-            tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
-          };
-          return newFilters;
-        });
-      } else if (columnType === 'date') {
-        setFilters(filters => {
-          const newFilters = [...filters];
-          newFilters[index] = {
-            column: selectedColumn.name,
-            columnType,
-            dateStart,
-            dateEnd,
-            tag: `${selectedColumn.name} (${format(
-              new Date(dateStart),
-              'MMM dd'
-            )} - ${format(new Date(dateEnd), 'MMM dd')})`,
-          };
-          return newFilters;
-        });
-      }
-
-      setStringFilterValues([]);
-      setNumberStart(0);
-      setNumberEnd(0);
-      setDateStart('');
-      setDateEnd('');
-      setIndexBeingEdited(-1);
-      return;
-    }
-  };
-
-  // ADD FILTER TO "FILTERS" ARRAY
-  const addFilter = () => {
-    if (selectedColumn && columnType) {
-      //   const type = getPostgresBasicType(selectedColumn);
-      let newCondition;
-
-      if (columnType === 'string') {
-        setFilters(filters => {
-          return [
-            ...filters,
-            {
-              column: selectedColumn.name,
-              columnType,
-              stringFilterValues,
-              tag: `${selectedColumn.name} (${stringFilterValues.join(', ')})`,
-            },
-          ];
-        });
-        setStringFilterValues([]);
-        setNumberStart(0);
-        setNumberEnd(0);
-        setDateStart('');
-        setDateEnd('');
-        return;
-      } else if (columnType === 'number') {
-        setFilters(filters => {
-          return [
-            ...filters,
-            {
-              column: selectedColumn.name,
-              columnType,
-              numberStart,
-              numberEnd,
-              tag: `${numberStart} < ${selectedColumn.name} < ${numberEnd}`,
-            },
-          ];
-        });
-        setStringFilterValues([]);
-        setNumberStart(0);
-        setNumberEnd(0);
-        setDateStart('');
-        setDateEnd('');
-        return;
-      } else if (columnType === 'date') {
-        setFilters(filters => {
-          return [
-            ...filters,
-            {
-              column: selectedColumn.name,
-              columnType,
-              dateStart,
-              dateEnd,
-              tag: `${selectedColumn.name} (${format(
-                new Date(dateStart),
-                'MMM dd'
-              )} - ${format(new Date(dateEnd), 'MMM dd')})`,
-            },
-          ];
-        });
-        setStringFilterValues([]);
-        setNumberStart(0);
-        setNumberEnd(0);
-        setDateStart('');
-        setDateEnd('');
-      }
-    }
-  };
-
-  const setAggregationColumn = (column, index) => {
-    // ex
-    setAggregations(aggregations => {
-      const newAggregations = [...aggregations];
-      newAggregations[index] = {
-        ...newAggregations[index],
-        column: column,
-      };
-      return newAggregations;
-    });
-  };
-
-  const setAggregationType = (aggregationType, index) => {
-    // ex
-    setAggregations(aggregations => {
-      const newAggregations = [...aggregations];
-      newAggregations[index] = {
-        ...newAggregations[index],
-        aggregationType: aggregationType,
-      };
-      return newAggregations;
-    });
-  };
-
-  const addAggregation = () => {
-    // setAggregations([
-    //   {
-    //     column: selectedTable.columns.filter(
-    //       (col) => getPostgresBasicType(col) === "number"
-    //     )[0],
-    //     aggregationType: "sum",
-    //   },
-    // ]);
-    setAggregations(aggregations => {
-      const newAggregations = [
-        ...aggregations,
-        {
-          column: selectedTable.columns.filter(
-            col =>
-              getPostgresBasicType(col) === 'number' &&
-              !aggregations.map(elem => elem.name).includes(col.name)
-          )[0],
-          aggregationType: 'sum',
-        },
-      ];
-      return newAggregations;
-    });
-  };
-
-  useEffect(() => {
-    // if selected table changes, clear everything
-    if (selectedTable.displayName !== AST.from.table) {
-      setSelectedColumn(selectedTable.columns[0]);
-      setSortableColumns(selectedTable.columns.map(col => col.name));
-      setGroupBys([]);
-      setSortBys([]);
-      setFilters([]);
-      // setAST((AST) => {
-      //   return {
-      //     with: null,
-      //     type: "select",
-      //     options: null,
-      //     distinct: { type: null },
-      //     columns: "*",
-      //     into: { position: null },
-      //     where: null,
-      //     groupby: null,
-      //     having: null,
-      //     orderby: null,
-      //     limit: { seperator: "", value: [] },
-      //     window: null,
-      //     from: [{ db: null, table: selectedTable.displayName, as: null }],
-      //   };
-      // });
-      return;
-    }
-  }, [selectedTable]);
-
-  // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
-  useEffect(() => {
-    if (filters.length || groupBys.length || aggregations.length) {
-      const newAST = {
-        with: null,
-        type: 'select',
-        options: null,
-        distinct: null,
-        columns: null,
-        into: { position: null },
-        from: [{ db: null, table: selectedTable.displayName, as: null }],
-        where: null,
-        groupby: null,
-        having: null,
-        orderby: null,
-        limit: null,
-        window: null,
-      };
-      // FILTERS
-      for (let i = 0; i < filters.length; i++) {
-        const filter = filters[i];
-        const {
-          column,
-          columnType,
-          stringFilterValues,
-          numberStart,
-          numberEnd,
-          dateStart,
-          dateEnd,
-        } = filter;
-        let newCondition;
-        if (columnType === 'string') {
-          newCondition = {
-            type: 'binary_expr',
-            operator: 'IN',
-            left: {
-              type: 'column_ref',
-              table: null,
-              column: column,
-            },
-            right: {
-              type: 'expr_list',
-              value: stringFilterValues.map(value => ({
-                type: 'single_quote_string',
-                value,
-              })),
-            },
-          };
-        } else if (columnType === 'number') {
-          newCondition = {
-            type: 'binary_expr',
-            operator: 'BETWEEN',
-            left: {
-              type: 'column_ref',
-              table: null,
-              column: column,
-            },
-            right: {
-              type: 'expr_list',
-              value: [
-                { type: 'number', value: numberStart },
-                { type: 'number', value: numberEnd },
-              ],
-            },
-          };
-        } else if (columnType === 'date') {
-          newCondition = {
-            type: 'binary_expr',
-            operator: 'BETWEEN',
-            left: {
-              type: 'column_ref',
-              table: null,
-              column: column,
-            },
-            right: {
-              type: 'expr_list',
-              value: [
-                {
-                  type: 'single_quote_string',
-                  value: format(new Date(dateStart), 'MM/dd/yyyy'),
-                },
-                {
-                  type: 'single_quote_string',
-                  value: format(new Date(dateEnd), 'MM/dd/yyyy'),
-                },
-              ],
-            },
-          };
-        }
-
-        if (!newAST.where) {
-          newAST.where = newCondition;
-        } else {
-          newAST.where = {
-            type: 'binary_expr',
-            operator: 'AND',
-            left: newAST.where,
-            right: newCondition,
-          };
-        }
-      }
-
-      // GROUP BYS and AGGREGATIONS
-      // if (groupBys.length > 0) {
-      //   newAST.groupby = groupBys.map((groupBy) => ({
-      //     type: "column_ref",
-      //     table: null,
-      //     column: groupBy.column,
-      //   }));
-
-      //   if (aggregations.length > 0) {
-      //     newAST.columns = [
-      //       ...groupBys.map((groupBy) => ({
-      //         expr: {
-      //           type: "column_ref",
-      //           table: null,
-      //           column: groupBy.column,
-      //         },
-      //         as: null,
-      //       })),
-      //       ...aggregations.map((aggregation) => ({
-      //         expr: {
-      //           type: "aggr_func",
-      //           name: aggregation.aggregationType.toUpperCase(),
-      //           args: {
-      //             expr: {
-      //               type: "column_ref",
-      //               table: null,
-      //               column: aggregation.column.name,
-      //             },
-      //           },
-      //           over: null,
-      //         },
-      //         as: null,
-      //       })),
-      //     ];
-      //   } else {
-      //     newAST.columns = groupBys.map((groupBy) => ({
-      //       expr: {
-      //         type: "column_ref",
-      //         table: null,
-      //         column: groupBy.column,
-      //       },
-      //       as: null,
-      //     }));
-      //   }
-      // } else {
-      //   newAST.columns = "*";
-      //   newAST.groupby = null;
-      // }
-
-      // GROUP BYS
-      if (groupBys.length > 0) {
-        newAST.columns = [];
-        newAST.groupby = [];
-
-        for (let i = 0; i < groupBys.length; i++) {
-          const groupBy = groupBys[i];
-          if (groupBy.columnType === 'date') {
-            newAST.columns.push({
-              expr: {
-                type: 'function',
-                name: 'date_trunc',
-                args: {
-                  type: 'expr_list',
-                  value: [
-                    {
-                      type: 'single_quote_string',
-                      value: groupBy.bucket,
-                    },
-                    {
-                      type: 'column_ref',
-                      table: null,
-                      column: groupBy.column,
-                    },
-                  ],
-                },
-                over: null,
-              },
-              as: groupBy.bucket,
-            });
-            newAST.groupby.push({
-              type: 'column_ref',
-              table: null,
-              column: groupBy.bucket,
-            });
-          } else {
-            newAST.columns.push({
-              expr: {
-                type: 'column_ref',
-                table: null,
-                column: groupBy.column,
-              },
-              as: null,
-            });
-            newAST.groupby.push({
-              type: 'column_ref',
-              table: null,
-              column: groupBy.column,
-            });
-          }
-        }
-
-        // AGGREGATIONS
-        if (aggregations.length > 0) {
-          for (let i = 0; i < aggregations.length; i++) {
-            const aggregation = aggregations[i];
-            newAST.columns.push({
-              expr: {
-                type: 'aggr_func',
-                name: aggregation.aggregationType.toUpperCase(),
-                args: {
-                  expr: {
-                    type: 'column_ref',
-                    table: null,
-                    column: aggregation.column.name,
-                  },
-                },
-                over: null,
-              },
-              as: null,
-            });
-          }
-        }
-      } else {
-        newAST.columns = '*';
-        newAST.groupby = null;
-      }
-
-      if (sortBys.length > 0) {
-        newAST.orderby = [];
-        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',
-          });
-        }
-        // "orderby":[{"expr":{"type":"column_ref","table":null,"column":"amount"},"type":"DESC"},{"expr":{"type":"column_ref","table":null,"column":"month"},"type":"ASC"}]
-      }
-
-      setAST(newAST);
-    }
-  }, [filters, groupBys, aggregations, sortBys]);
-
-  const removeFilter = index => {
-    setFilters(oldFilters => {
-      const newFilters = [...oldFilters];
-      newFilters.splice(index, 1);
-      return newFilters;
-    });
-    setIndexBeingEdited(-1);
-  };
-
-  const computeStats = useCallback(
-    column => {
-      if (!computedColumns[column.name] && data) {
-        const basicType = getPostgresBasicType(column);
-        let result;
-
-        if (basicType === 'number') {
-          let min = Infinity,
-            max = -Infinity;
-          data.forEach(row => {
-            const value = row[column.name];
-            min = Math.min(min, value);
-            max = Math.max(max, value);
-          });
-          result = { min, max };
-        } else if (basicType === 'string') {
-          const freqMap = {};
-          data.forEach(row => {
-            const value = row[column.name];
-            freqMap[value] = (freqMap[value] || 0) + 1;
-          });
-          result = Object.entries(freqMap)
-            .sort((a, b) => b[1] - a[1])
-            .slice(0, 6)
-            .map(([key]) => key);
-        } else {
-          // Handle other column types if necessary
-        }
-
-        setComputedColumns({
-          ...computedColumns,
-          [column.name]: result,
-        });
-      }
-    },
-    [data, computedColumns]
-  );
-
-  // Call this function whenever the selected column changes
-  useEffect(() => {
-    computeStats(selectedColumn);
-  }, [selectedColumn]);
-
-  // Use the results directly in your component
-  const columnStats = computedColumns[selectedColumn.name];
-
-  // useEffect(() => {
-  //   if (AST && AST.from[0].table) {
-  //     const parser = new Parser();
-  //     const sqlQuery = parser.sqlify(AST, { database: "PostgresQL" });
-  //     if (sqlQuery) {
-  //       runQuery(sqlQuery);
-  //       return;
-  //     }
-  //   }
-  // }, [AST]);
-
-  useEffect(() => {
-    if (!aggregations.length) {
-      setAggregations([
-        {
-          column: selectedTable.columns.filter(
-            col => getPostgresBasicType(col) === 'number'
-          )[0],
-          aggregationType: 'sum',
-        },
-      ]);
-    }
-  }, [selectedGroupByColumn]);
-
-  useEffect(() => {
-    const getSqlQueryFromAST = async () => {
-      try {
-        if (AST && AST.from[0].table) {
-          const response = await axios.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)
-              );
-            }
-          }
-        }
-      } catch (err) {
-        console.error(err);
-      }
-    };
-
-    getSqlQueryFromAST();
-  }, [AST]);
-
-  useEffect(() => {
-    if (sortableColumns.length) {
-      setSelectedSortByColumn(sortableColumns[0]);
-    }
-  }, [sortableColumns]);
-
-  if (!schema || !schema.length) {
-    return null;
-  }
-
-  return (
-    <div style={{ marginLeft: '25px' }}>
-      <div style={{ maxWidth: 245 }}>
-        <div
-          style={{
-            fontSize: 14,
-            marginBottom: '6px',
-            fontWeight: '600',
-            color: theme.secondaryTextColor,
-            fontFamily: theme?.fontFamily,
-          }}
-        >
-          Table
-        </div>
-        <SelectComponent
-          label="Table"
-          value={selectedTable.displayName}
-          onChange={e => {
-            const table = schema.find(t => t.displayName === e);
-            setSelectedTable(table);
-          }}
-          options={
-            schema?.length
-              ? schema.map(elem => {
-                  return { label: elem.displayName, value: elem.displayName };
-                })
-              : []
-          }
-        />
-      </div>
-      <div
-        style={{ display: 'flex', flexDirection: 'column', marginTop: '12px' }}
-      >
-        {/* <AddFilterModal
-            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}
-            ref={ref}
-            indexBeingEdited={indexBeingEdited}
-            updateFilter={updateFilter}
-            SelectComponent={SelectComponent}
-          /> */}
-
-        <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}
-        />
-
-        {/* <div style={{ height: 12 }} /> */}
-
-        <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}
-        />
-
-        <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}
-        />
-      </div>
-    </div>
-  );
-}
-
-function FilterTag({
-  id,
-  label,
-  removeFilter,
-  index,
-  setIsOpen,
-  selectFilter,
-  theme,
-  tagStyle,
-}) {
-  const handleRemoveFilter = () => {
-    removeFilter(index);
-  };
-  const handleSelectFilter = () => {
-    selectFilter(index);
-    setIsOpen(true);
-  };
-  return (
-    <div
-      id={id}
-      onClick={handleSelectFilter}
-      style={
-        tagStyle || {
-          marginLeft: '12px',
-          cursor: 'pointer',
-          borderRadius: 8,
-          backgroundColor: '#EFF0FC',
-          paddingLeft: '12px',
-          paddingRight: '8px',
-          height: 30,
-          display: 'flex',
-          alignItems: 'center',
-          fontSize: 13,
-          fontWeight: 'medium',
-          color: theme?.primaryTextColor,
-          fontFamily: theme?.fontFamily,
-          outline: 'none',
-        }
-      }
-    >
-      <div
-        id={id}
-        style={{
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          maxWidth: '80px',
-        }}
-      >
-        {label}
-      </div>
-      <div
-        // onClick={handleRemoveFilter}
-        onClick={e => {
-          e.stopPropagation(); // Prevents the event from bubbling up to the parent
-          handleRemoveFilter();
-        }}
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          cursor: 'pointer',
-          paddingLeft: '6px',
-        }}
-      >
-        <XMarkIcon
-          style={{
-            height: '20px',
-            width: '20px',
-            color: tagStyle?.color || theme?.primaryTextColor,
-          }}
-          aria-hidden="true"
-        />
-      </div>
-    </div>
-  );
-}
-
-const SortByModal = ({
-  selectedSortByColumn,
-  selectedSortByDirection,
-  setSelectedSortByColumn,
-  setSelectedSortByDirection,
-  selectedTable,
-  sortableColumns,
-  removeSortBy,
-  selectSortBy,
-  updateSortBy,
-  addSortBy,
-  sortBys,
-  SelectComponent,
-  ButtonComponent,
-  ModalComponent,
-  tagStyle,
-  ModalTriggerComponent,
-  sortByIndexBeingEdited,
-  theme,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', marginTop: 12 }}>
-      <div
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          textAlign: 'left',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <ModalTriggerComponent
-            onClick={() => setIsOpen(isOpen => !isOpen)}
-            label="Sort"
-          />
-          <div
-            style={{
-              overflowX: 'scroll',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            {sortBys.map((elem, index) => (
-              <FilterTag
-                id="sort-tag"
-                label={elem.column}
-                removeFilter={removeSortBy}
-                selectFilter={selectSortBy}
-                setIsOpen={setIsOpen}
-                index={index}
-                theme={theme}
-                tagStyle={tagStyle}
-                key={'sort' + index}
-              />
-            ))}
-          </div>
-        </div>
-
-        <ModalComponent
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Add sort"
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-            // className="transform opacity-100 scale-100"
-          >
-            {/* <div
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-              }}
-            > */}
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <div
-                style={{
-                  fontSize: '14px',
-                  marginBottom: '6px',
-                  fontWeight: '600',
-                  color: theme.secondaryTextColor,
-                  fontFamily: theme?.fontFamily,
-                }}
-              >
-                Column
-              </div>
-              {/* select column */}
-              <SelectComponent
-                value={selectedSortByColumn}
-                onChange={e => {
-                  setSelectedSortByColumn(e);
-                }}
-                options={sortableColumns.map(elem => {
-                  return { label: elem, value: elem };
-                })}
-              />
-            </div>
-            {/* </div> */}
-            {/* Select bucket (if date) */}
-
-            {/* Select aggregations */}
-            <div
-              style={{
-                fontSize: '14px',
-                marginBottom: '6px',
-                fontWeight: '600',
-                color: theme.secondaryTextColor,
-                fontFamily: theme?.fontFamily,
-                marginTop: 20,
-              }}
-            >
-              Direction
-            </div>
-
-            <SelectComponent
-              value={selectedSortByDirection}
-              onChange={e => {
-                setSelectedSortByDirection(e);
-              }}
-              options={[
-                { label: 'ascending', value: 'ascending' },
-                { label: 'descending', value: 'descending' },
-              ]}
-            />
-            <div style={{ height: 20 }} />
-            <ButtonComponent
-              id="custom-button"
-              onClick={() => {
-                if (sortByIndexBeingEdited > -1) {
-                  updateSortBy(sortByIndexBeingEdited);
-                  setIsOpen(false);
-                  // close();
-                  return;
-                }
-                addSortBy();
-                setIsOpen(false);
-                // close();
-              }}
-              label={sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort'}
-            />
-          </div>
-        </ModalComponent>
-      </div>
-    </div>
-  );
-};
-
-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] = useState(false);
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          textAlign: 'left',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <ModalTriggerComponent
-            onClick={() => setIsOpen(isOpen => !isOpen)}
-            label="Group by"
-          />
-          <div
-            style={{
-              overflowX: 'scroll',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            {groupBys.map((elem, index) => (
-              <FilterTag
-                id="group-tag"
-                label={elem.tag}
-                removeFilter={removeGroupBy}
-                selectFilter={selectGroupBy}
-                setIsOpen={setIsOpen}
-                index={index}
-                theme={theme}
-                tagStyle={tagStyle}
-                key={'groupby' + index}
-              />
-            ))}
-          </div>
-        </div>
-        <ModalComponent
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Add group by"
-        >
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              {/* select column */}
-              <div
-                style={{
-                  fontSize: '14px',
-                  marginBottom: '6px',
-                  fontWeight: '600',
-                  fontFamily: theme?.fontFamily,
-                  color: theme.secondaryTextColor,
-                }}
-              >
-                Column
-              </div>
-              <SelectComponent
-                label="Column"
-                value={selectedGroupByColumn.name}
-                onChange={e => {
-                  const column = selectedTable.columns.find(c => c.name === e);
-                  setSelectedGroupByColumn(column);
-                }}
-                options={selectedTable.columns.map(elem => {
-                  return { label: elem.name, value: elem.name };
-                })}
-              />
-            </div>
-            {groupByColumnType === 'date' && (
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  // marginLeft: 12,
-                }}
-              >
-                <div
-                  style={{
-                    fontSize: '14px',
-                    marginBottom: '6px',
-                    fontWeight: '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme?.fontFamily,
-                    marginTop: 20,
-                  }}
-                >
-                  Bucket
-                </div>
-                <SelectComponent
-                  label="Bucket"
-                  value={dateBucket}
-                  onChange={e => {
-                    setDateBucket(e);
-                  }}
-                  options={[
-                    { label: 'month', value: 'month' },
-                    { label: 'day', value: 'day' },
-                    { label: 'week', value: 'week' },
-                  ]}
-                />
-              </div>
-            )}
-            {/* Select bucket (if date) */}
-
-            {/* Select aggregations */}
-            <div
-              style={{
-                fontSize: 14,
-                marginBottom: '6px',
-                fontWeight: '600',
-                marginTop: 20,
-                color: theme.secondaryTextColor,
-                fontFamily: theme?.fontFamily,
-              }}
-            >
-              Aggregations
-            </div>
-            {/* select column */}
-            {aggregations.map((aggregation, index) => (
-              // setAggregationType
-              <div
-                key={'agg' + index}
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                }}
-              >
-                <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 };
-                  })}
-                />
-                <div style={{ width: 16 }} />
-                <SelectComponent
-                  value={aggregation.aggregationType}
-                  onChange={e => {
-                    setAggregationType(e, index);
-                  }}
-                  options={[
-                    { label: 'sum', value: 'sum' },
-                    { label: 'average', value: 'average' },
-                    { label: 'count', value: 'count' },
-                  ]}
-                />
-              </div>
-            ))}
-            <div style={{ height: 20 }} />
-            <ButtonComponent
-              id="custom-button"
-              onClick={() => {
-                if (groupByIndexBeingEdited > -1) {
-                  updateGroupBy(groupByIndexBeingEdited);
-                  setIsOpen(false);
-                  // close();
-                  return;
-                }
-                addGroupBy();
-                setIsOpen(false);
-                // close();
-              }}
-              label={
-                groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'
-              }
-            />
-          </div>
-        </ModalComponent>
-      </div>
-    </div>
-  );
-};
-
-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] = useState(false);
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          position: 'relative',
-          display: 'inline-block',
-          textAlign: 'left',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          }}
-        >
-          <ModalTriggerComponent
-            onClick={() => setIsOpen(isOpen => !isOpen)}
-            label="Filter"
-          />
-          <div
-            style={{
-              overflowX: 'scroll',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            {filters.map((elem, index) => (
-              <FilterTag
-                id="filter-tag"
-                label={elem.tag}
-                removeFilter={removeFilter}
-                selectFilter={selectFilter}
-                index={index}
-                theme={theme}
-                setIsOpen={setIsOpen}
-                key={'filter' + index}
-                tagStyle={tagStyle}
-              />
-            ))}
-          </div>
-        </div>
-        <ModalComponent
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Add filter"
-        >
-          <div
-            style={{
-              backgroundColor: 'rgb(255, 255, 255)',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <div
-              style={{
-                fontSize: 14,
-                marginBottom: '6px',
-                fontWeight: '600',
-                color: theme.secondaryTextColor,
-                fontFamily: theme?.fontFamily,
-              }}
-            >
-              Column
-            </div>
-            <SelectComponent
-              id="custom-select"
-              value={selectedColumn.name}
-              onChange={e => {
-                const column = selectedTable.columns.find(c => c.name === e);
-                setSelectedColumn(column);
-              }}
-              options={selectedTable.columns.map(elem => {
-                return { label: elem.name, value: elem.name };
-              })}
-            />
-
-            {columnType === 'number' && (
-              <div>
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      marginTop: '20px',
-                    }}
-                  >
-                    <div
-                      style={{
-                        fontSize: '14px',
-                        fontWeight: '600',
-                        color: theme.secondaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        marginBottom: 6,
-                      }}
-                    >
-                      Minimum
-                    </div>
-                    <TextInputComponent
-                      id="min-input"
-                      value={numberStart}
-                      onChange={e => setNumberStart(e.target.value)}
-                    />
-                  </div>
-                  <div style={{ width: 16 }} />
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      marginTop: '20px',
-                    }}
-                  >
-                    <div
-                      style={{
-                        fontSize: '14px',
-                        fontWeight: '600',
-                        color: theme.secondaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        marginBottom: 6,
-                      }}
-                    >
-                      Maximum
-                    </div>
-                    <TextInputComponent
-                      id="max-input"
-                      value={numberEnd}
-                      onChange={e => setNumberEnd(e.target.value)}
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {columnType === 'date' && (
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    marginTop: '20px',
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: 14,
-                      fontWeight: '600',
-                      color: 'rgba(56, 65, 81, 0.7)',
-                      fontFamily: theme?.fontFamily,
-                    }}
-                  >
-                    Start date
-                  </div>
-                  <input
-                    type="date"
-                    value={dateStart}
-                    onChange={e => setDateStart(e.target.value)}
-                    placeholder="Start date"
-                    // style={{
-                    //   width: '115px',
-                    //   fontSize: '0.8rem',
-                    //   color: theme?.primaryTextColor,
-                    //   borderWidth: '1px',
-                    //   marginTop: '4px',
-                    //   borderColor: '#E7E7E7',
-                    //   backgroundColor: 'white',
-                    //   borderRadius: '0.375rem',
-                    //   boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                    //   paddingLeft: '0.5rem',
-                    //   paddingRight: '0.5rem',
-                    //   paddingTop: '0.375rem',
-                    //   paddingBottom: '0.375rem',
-                    //   fontFamily: theme?.fontFamily,
-                    // }}
-                  />
-                </div>
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    marginTop: '20px',
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: 14,
-                      fontWeight: '600',
-                      color: 'rgba(56, 65, 81, 0.7)',
-                      fontFamily: theme?.fontFamily,
-                    }}
-                  >
-                    End date
-                  </div>
-                  <input
-                    type="date"
-                    value={dateEnd}
-                    onChange={e => setDateEnd(e.target.value)}
-                    placeholder="End date"
-                    // style={{
-                    //   width: '115px',
-                    //   fontSize: '0.8rem',
-                    //   color: theme?.primaryTextColor,
-                    //   borderWidth: '1px',
-                    //   marginTop: '4px',
-                    //   borderColor: '#E7E7E7',
-                    //   backgroundColor: 'white',
-                    //   borderRadius: '0.375rem',
-                    //   boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                    //   paddingLeft: '0.5rem',
-                    //   paddingRight: '0.5rem',
-                    //   paddingTop: '0.375rem',
-                    //   paddingBottom: '0.375rem',
-                    //   fontFamily: theme?.fontFamily,
-                    // }}
-                  />
-                </div>
-              </div>
-            )}
-
-            {columnType === 'string' &&
-              columnStats &&
-              columnStats.length > 0 && (
-                <div
-                  style={{
-                    flex: 'flex',
-                    flexDirection: 'column',
-                    marginTop: '14px',
-                    overflow: 'hidden',
-                  }}
-                >
-                  {columnStats.map(value => (
-                    <div
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                      }}
-                      key={value}
-                    >
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'row',
-                          alignItems: 'center',
-                          paddingTop: 6,
-                          paddingBottom: 6,
-                        }}
-                        key={value}
-                      >
-                        <DivCheckbox
-                          theme={theme}
-                          checked={stringFilterValues.includes(value)}
-                          onChange={() => {
-                            setStringFilterValues(prev =>
-                              prev.includes(value)
-                                ? prev.filter(v => v !== value)
-                                : [...prev, value]
-                            );
-                          }}
-                        />
-                        <div
-                          style={{
-                            marginLeft: 6,
-                            display: 'block',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            color: theme?.primaryTextColor,
-                            fontFamily: theme?.fontFamily,
-                          }}
-                        >
-                          {value}
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            <div style={{ height: 20 }} />
-            <ButtonComponent
-              id="custom-button"
-              onClick={() => {
-                if (indexBeingEdited > -1) {
-                  updateFilter(indexBeingEdited);
-                  setIsOpen(false);
-                  return;
-                }
-                addFilter();
-                setIsOpen(false);
-              }}
-              label={indexBeingEdited > -1 ? 'Edit filter' : 'Add filter'}
-            />
-          </div>
-        </ModalComponent>
-        {/* )} */}
-      </div>
-      <div style={{ height: '12px' }}></div>
-    </div>
-  );
-};
-
-const DivCheckbox = ({ onChange, checked, theme }) => {
-  const toggleCheckbox = () => {
-    if (onChange) {
-      onChange(!checked);
-    }
-  };
-
-  const style = {
-    // display: 'inline-block',
-    width: '18px',
-    height: '18px',
-    background: checked ? '#384151' : '#fff',
-    border: checked ? '1px solid #384151' : '1px solid #E7E7E7',
-    borderRadius: '4px',
-    position: 'relative',
-    cursor: 'pointer',
-    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    fontFamily: theme?.fontFamily,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
-
-  return (
-    <div
-      style={style}
-      onClick={toggleCheckbox}
-      aria-checked={checked}
-      // className="shadow-sm"
-      role="checkbox"
-    >
-      {checked && (
-        <CheckIcon
-          style={{ color: theme?.backgroundColor, height: 16, width: 16 }}
-          className="text-white"
-          aria-hidden="true"
-        />
-      )}
-    </div>
-  );
-};