@quillsql/react 1.5.4 → 1.5.6

package/src/ReportBuilder.tsx

@@ -0,0 +1,2233 @@
+import React, {
+  useState,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
+// import './nightOwlLight.css';
+import axios from 'axios';
+import { TailSpin } from 'react-loader-spinner';
+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';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectComponentProps {
+  onChange: (value: string) => void;
+  value: string;
+  options: Option[];
+}
+
+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;
+}
+
+export default function ReportBuilder({
+  onChangeQuery,
+  onChangeData,
+  onChangeColumns,
+  onChangeLoading,
+  onError,
+  SelectComponent,
+}: ReportBuilderProps) {
+  const [data, setData] = useState([]);
+  const [client] = useContext(ClientContext);
+  const [schema, setSchema] = useContext(SchemaContext);
+  const [theme] = useContext(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 } = client;
+    const 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}
+    />
+  );
+}
+
+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,
+  onChangeQuery,
+  theme,
+}) {
+  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) {
+      let 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={{
+          fontSize: '0.8rem',
+          marginBottom: '6px',
+          fontWeight: 'bold',
+          color: theme.secondaryTextColor,
+          fontFamily: theme?.fontFamily,
+        }}
+      >
+        Table
+      </div>
+      {/* <br />
+        <div>what ast should be</div>
+        <div>{JSON.stringify(lmao)}</div>
+        <br /> */}
+      {/* <div>actual ast</div>
+        <div>{JSON.stringify(AST)}</div>
+        <br /> */}
+      {/* <div>actual sql query</div>
+        <div>{sqlQuery}</div>
+        <br /> */}
+      {/* <div>group bys</div>
+        <div>{JSON.stringify(groupBys)}</div>
+        <div>aggregations</div>
+        <div>{JSON.stringify(aggregations)}</div> */}
+
+      {/* <Dropdown
+          value={selectedTable.name}
+          onChange={(e) => {
+            const table = schema.find((t) => t.name === e);
+            setSelectedTable(table);
+          }}
+          options={schema.map((elem) => {
+            return { label: elem.name, value: elem.name };
+          })}
+        /> */}
+      <SelectComponent
+        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 };
+              })
+            : []
+        }
+      />
+      {/* <SelectComponent
+          value={selectedTable.name}
+          onChange={(e) => {
+            const table = schema.find((t) => t.name === e);
+            setSelectedTable(table);
+          }}
+          options={schema.map((elem) => {
+            return { label: elem.name, value: elem.name };
+          })}
+        /> */}
+      <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}
+          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}
+          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}
+          theme={theme}
+        />
+      </div>
+    </div>
+  );
+}
+
+function FilterTag({ id, label, removeFilter, index, selectFilter, theme }) {
+  const handleRemoveFilter = () => {
+    removeFilter(index);
+  };
+  const handleSelectFilter = () => {
+    selectFilter(index);
+  };
+  return (
+    <div
+      id={id}
+      onClick={handleSelectFilter}
+      style={{
+        marginLeft: '12px',
+        cursor: 'pointer',
+        border: '1px',
+        borderColor: '#EFF0FC',
+        borderRadius: 6,
+        backgroundColor: '#EFF0FC',
+        paddingLeft: '1rem',
+        paddingRight: '0.5rem',
+        // paddingTop: "0.44rem",
+        // paddingBottom: "0.44rem",
+        height: 35,
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: 14,
+        fontWeight: 'medium',
+        color: theme.primaryTextColor,
+        outline: 'none',
+        // ring: "2",
+        // ringColor: "white",
+        // ringOpacity: "75",
+      }}
+    >
+      <div
+        id={id}
+        style={{
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          fontFamily: theme?.fontFamily,
+        }}
+      >
+        {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: '0.375rem',
+        }}
+      >
+        <XMarkIcon
+          style={{
+            height: '1.25rem',
+            width: '1.25rem',
+            color: theme.primaryTextColor,
+          }}
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+  );
+}
+
+const SortByModal = ({
+  selectedSortByColumn,
+  selectedSortByDirection,
+  setSelectedSortByColumn,
+  setSelectedSortByDirection,
+  selectedTable,
+  sortableColumns,
+  removeSortBy,
+  selectSortBy,
+  updateSortBy,
+  addSortBy,
+  sortBys,
+  SelectComponent,
+  sortByIndexBeingEdited,
+  theme,
+}) => {
+  const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Event listener to close the dropdown menu when clicking outside
+    const handleOutsideClick = event => {
+      if (
+        event.target.id === 'sort-toggle-button' ||
+        event.target.id === 'sort-tag'
+      ) {
+        setIsOpen(isOpen => !isOpen);
+        return;
+      }
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    // Attach the event listener to the document
+    document.addEventListener('click', handleOutsideClick);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+  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',
+          }}
+        >
+          <button
+            id="sort-toggle-button"
+            // onClick={() => setIsOpen((isOpen) => !isOpen)}
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded="true"
+            data-headlessui-state="open"
+            style={{
+              display: 'inline-flex',
+              boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+              borderRadius: '0.375rem',
+              backgroundColor: 'rgba(0, 0, 0, 0)',
+              padding: '0.375rem 0.75rem',
+              fontSize: '0.875rem',
+              fontWeight: '500',
+              color: theme.primaryTextColor,
+              fontFamily: theme?.fontFamily,
+              borderWidth: 1,
+              borderStyle: 'solid',
+              borderColor: theme.borderColor,
+            }}
+          >
+            Sort
+          </button>
+          <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}
+                index={index}
+                theme={theme}
+              />
+            ))}
+          </div>
+        </div>
+        {isOpen && (
+          <div
+            ref={dropdownRef}
+            role="menu"
+            tabindex="0"
+            data-headlessui-state="open"
+            style={{
+              zIndex: 120,
+              position: 'absolute',
+              left: '0px',
+              marginTop: '12px',
+              transformOrigin: 'right top',
+              display: 'flex',
+              flexDirection: 'column',
+              padding: '1rem',
+              borderRadius: '0.375rem',
+              backgroundColor: 'rgb(255, 255, 255)',
+              boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+            }}
+            className="transform opacity-100 scale-100"
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div
+                  style={{
+                    fontSize: '0.875rem',
+                    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: '0.875rem',
+                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' },
+              ]}
+            />
+            <button
+              style={{
+                width: '15.3125rem',
+                marginTop: '1.25rem',
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+                paddingLeft: '0.75rem',
+                paddingRight: '0.75rem',
+                backgroundColor: theme.primaryButtonColor,
+                fontFamily: theme?.fontFamily,
+                // hover: { opacity: "90" },
+                color: 'white',
+                fontWeight: '500',
+                borderRadius: '0.375rem',
+                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+              }}
+              onClick={() => {
+                if (sortByIndexBeingEdited > -1) {
+                  updateSortBy(sortByIndexBeingEdited);
+                  setIsOpen(false);
+                  // close();
+                  return;
+                }
+                addSortBy();
+                setIsOpen(false);
+                // close();
+              }}
+            >
+              {sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const GroupByModal2 = ({
+  selectedGroupByColumn,
+  addGroupBy,
+  setSelectedGroupByColumn,
+  selectedTable,
+  groupByColumnType,
+  groupByIndexBeingEdited,
+  updateGroupBy,
+  groupBys,
+  removeGroupBy,
+  selectGroupBy,
+  SelectComponent,
+  aggregations,
+  setAggregationColumn,
+  setAggregationType,
+  addAggregation,
+  dateBucket,
+  setDateBucket,
+  theme,
+}) => {
+  const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Event listener to close the dropdown menu when clicking outside
+    const handleOutsideClick = event => {
+      if (
+        event.target.id === 'group-toggle-button' ||
+        event.target.id === 'group-tag'
+      ) {
+        setIsOpen(isOpen => !isOpen);
+        return;
+      }
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    // Attach the event listener to the document
+    document.addEventListener('click', handleOutsideClick);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          textAlign: 'left',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <button
+            id="group-toggle-button"
+            // onClick={() => setIsOpen((isOpen) => !isOpen)}
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded="true"
+            data-headlessui-state="open"
+            style={{
+              display: 'inline-flex',
+              boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+              borderRadius: '0.375rem',
+              backgroundColor: 'rgba(0, 0, 0, 0)',
+              padding: '0.375rem 0.75rem',
+              fontSize: '0.875rem',
+              fontWeight: '500',
+              color: theme.primaryButtonColor,
+              borderWidth: 1,
+              borderStyle: 'solid',
+              borderColor: theme.borderColor,
+              fontFamily: theme?.fontFamily,
+            }}
+          >
+            Groups
+          </button>
+          <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}
+                index={index}
+              />
+            ))}
+          </div>
+        </div>
+        {isOpen && (
+          <div
+            ref={dropdownRef}
+            role="menu"
+            tabindex="0"
+            data-headlessui-state="open"
+            style={{
+              zIndex: 120,
+              position: 'absolute',
+              left: '0px',
+              marginTop: '12px',
+              transformOrigin: 'right top',
+              padding: '1rem',
+              borderRadius: '0.375rem',
+              backgroundColor: 'rgb(255, 255, 255)',
+              boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+            }}
+            // className="transform opacity-100 scale-100"
+          >
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div
+                  style={{
+                    fontSize: '0.875rem',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    fontFamily: theme?.fontFamily,
+                    color: theme.secondaryTextColor,
+                  }}
+                >
+                  Column
+                </div>
+                {/* select column */}
+                <SelectComponent
+                  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: '0.875rem',
+                      marginBottom: '6px',
+                      fontWeight: '600',
+                      color: theme.secondaryTextColor,
+                      fontFamily: theme?.fontFamily,
+                    }}
+                  >
+                    Bucket
+                  </div>
+                  <SelectComponent
+                    value={dateBucket}
+                    onChange={e => {
+                      setDateBucket(e);
+                    }}
+                    options={[
+                      { label: 'month', value: 'month' },
+                      { label: 'day', value: 'day' },
+                      { label: 'week', value: 'week' },
+                    ]}
+                  />
+                </div>
+              )}
+            </div>
+            {/* Select bucket (if date) */}
+
+            {/* Select aggregations */}
+            <div
+              style={{
+                fontSize: '0.875rem',
+                marginBottom: '6px',
+                fontWeight: '600',
+                marginTop: 20,
+                color: theme.secondaryTextColor,
+                fontFamily: theme?.fontFamily,
+              }}
+            >
+              Aggregations
+            </div>
+            {/* select column */}
+            {aggregations.map((aggregation, index) => (
+              // setAggregationType
+              <div
+                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: 12 }} />
+                <SelectComponent
+                  value={aggregation.aggregationType}
+                  onChange={e => {
+                    setAggregationType(e, index);
+                  }}
+                  options={[
+                    { label: 'sum', value: 'sum' },
+                    { label: 'average', value: 'average' },
+                    { label: 'count', value: 'count' },
+                  ]}
+                />
+              </div>
+            ))}
+            <button
+              style={{
+                width: '100%',
+                marginTop: '1.25rem',
+                paddingTop: '0.5rem',
+                paddingBottom: '0.5rem',
+                paddingLeft: '0.75rem',
+                paddingRight: '0.75rem',
+                backgroundColor: theme.primaryButtonColor,
+                // hover: { opacity: "90" },
+                color: 'white',
+                fontWeight: '500',
+                borderRadius: '0.375rem',
+                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                fontFamily: theme?.fontFamily,
+              }}
+              onClick={() => {
+                if (groupByIndexBeingEdited > -1) {
+                  updateGroupBy(groupByIndexBeingEdited);
+                  setIsOpen(false);
+                  // close();
+                  return;
+                }
+                addGroupBy();
+                setIsOpen(false);
+                // close();
+              }}
+            >
+              {groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'}
+            </button>
+          </div>
+        )}
+      </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,
+  theme,
+}) => {
+  const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Event listener to close the dropdown menu when clicking outside
+    const handleOutsideClick = event => {
+      if (
+        event.target.id === 'toggle-button' ||
+        event.target.id === 'filter-tag'
+      ) {
+        setIsOpen(isOpen => !isOpen);
+        return;
+      }
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    // Attach the event listener to the document
+    document.addEventListener('click', handleOutsideClick);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      document.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          textAlign: 'left',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <button
+            id="toggle-button"
+            // onClick={() => setIsOpen((isOpen) => !isOpen)}
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded="true"
+            data-headlessui-state="open"
+            style={{
+              display: 'inline-flex',
+              borderWidth: '1px',
+              borderStyle: 'solid',
+              borderColor: theme.borderColor,
+              boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
+              borderRadius: '0.375rem',
+              backgroundColor: theme.backgroundColor,
+              padding: '0.375rem 0.75rem',
+              fontSize: '0.875rem',
+              fontWeight: '500',
+              color: theme.primaryTextColor,
+              fontFamily: theme?.fontFamily,
+            }}
+          >
+            Filters
+          </button>
+          <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}
+              />
+            ))}
+          </div>
+        </div>
+        {isOpen && (
+          <div
+            ref={dropdownRef}
+            role="menu"
+            tabindex="0"
+            data-headlessui-state="open"
+            style={{
+              zIndex: 120,
+              position: 'absolute',
+              left: '0px',
+              marginTop: '12px',
+              transformOrigin: 'right top',
+              padding: '1rem',
+              borderRadius: '0.375rem',
+              backgroundColor: 'rgb(255, 255, 255)',
+              boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+            // className="transform opacity-100 scale-100"
+          >
+            <div
+              style={{
+                fontSize: '0.875rem',
+                marginBottom: '6px',
+                fontWeight: '600',
+                color: theme.secondaryFontColor,
+                fontFamily: theme?.fontFamily,
+                // opacity: 0.7,
+              }}
+            >
+              Column
+            </div>
+            <SelectComponent
+              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
+                style={{
+                  width: '245px',
+                  maxWidth: '245px',
+                  zIndex: 50,
+                }}
+              >
+                {/* <MultiRangeSlider
+                    style={{
+                      border: "none",
+                      boxShadow: "none",
+                      padding: 0,
+                      marginTop: 28,
+                    }}
+                    min={0}
+                    max={1000000}
+                    // step={5}
+                    minValue={numberStart}
+                    maxValue={numberEnd}
+                    ruler={false}
+                    label={false}
+                    preventWheel
+                    barLeftColor="transparent"
+                    barRightColor="transparent"
+                    barInnerColor="#384151"
+                    onInput={(e) => {
+                      setNumberStart(e.minValue);
+                      setNumberEnd(e.maxValue);
+                    }}
+                  /> */}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      marginTop: '20px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: '0.875rem',
+                        fontWeight: '600',
+                        color: theme.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                      }}
+                    >
+                      Minimum
+                    </div>
+                    <input
+                      // type="number"
+                      value={numberStart}
+                      onChange={e => setNumberStart(e.target.value)}
+                      placeholder=""
+                      style={{
+                        textAlign: 'right',
+                        width: '100px',
+                        border: '1px solid #E7E7E7',
+                        color: theme.primaryTextColor,
+                        marginTop: '4px',
+                        height: 38,
+                        paddingRight: 8,
+                        backgroundColor: 'white',
+                        borderRadius: '0.375rem',
+                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                        fontFamily: theme?.fontFamily,
+                      }}
+                    />
+                  </div>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      marginTop: '20px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: '0.875rem',
+                        fontWeight: '600',
+                        color: theme.secondaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                      }}
+                    >
+                      Maximum
+                    </div>
+                    <input
+                      // type="number"
+                      value={numberEnd}
+                      onChange={e => setNumberEnd(e.target.value)}
+                      placeholder=""
+                      style={{
+                        textAlign: 'right',
+                        width: '100px',
+                        border: '1px solid #E7E7E7',
+                        color: theme.primaryTextColor,
+                        fontFamily: theme?.fontFamily,
+                        marginTop: '4px',
+                        paddingRight: 8,
+                        height: 38,
+                        backgroundColor: 'white',
+                        borderRadius: '0.375rem',
+                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                      }}
+                    />
+                  </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: '0.8rem',
+                      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: '0.8rem',
+                      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',
+                  }}
+                >
+                  {columnStats.map(value => (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                      }}
+                      key={value}
+                    >
+                      {/* Rest of the code */}
+                      <div
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          paddingTop: 6,
+                          paddinBottom: 6,
+                        }}
+                        key={value}
+                      >
+                        <DivCheckbox
+                          //   type="checkbox"
+                          //   style={{
+                          //     border: "1px solid red",
+                          //     borderRadius: "4px",
+                          //   boxSizing: "border-box",
+                          // color: "#fff",
+                          //     height: "18px",
+                          //     minWidth: "18px",
+                          //     position: "relative",
+                          //     width: "18px",
+                          //   }}
+                          // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
+                          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>
+              )}
+            <button
+              style={{
+                width: '245px',
+                marginTop: '20px',
+                padding: '0.5rem 0.75rem',
+                backgroundColor: 'rgb(56, 65, 81)',
+                color: 'rgb(255, 255, 255)',
+                fontWeight: '500',
+                borderRadius: '0.375rem',
+                boxShadow: 'rgba(0, 0, 0, 0.05) 0px 1px 2px 0px',
+                fontFamily: theme?.fontFamily,
+              }}
+              onClick={() => {
+                if (indexBeingEdited > -1) {
+                  updateFilter(indexBeingEdited);
+                  setIsOpen(false);
+                  return;
+                }
+                addFilter();
+                setIsOpen(false);
+              }}
+            >
+              {indexBeingEdited > -1 ? 'Edit filter' : 'Add filter'}
+            </button>
+          </div>
+        )}
+      </div>
+      <div style={{ height: '12px' }}></div>
+    </div>
+  );
+};
+
+const DivCheckbox = ({ onChange, checked }) => {
+  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,
+  };
+
+  return (
+    <div
+      style={style}
+      onClick={toggleCheckbox}
+      aria-checked={checked}
+      // className="shadow-sm"
+      role="checkbox"
+    >
+      {checked && <CheckIcon className="text-white" aria-hidden="true" />}
+    </div>
+  );
+};