Implemented stars filter + improved filtering (#81)

* WIP on star filter * added stars filter * fixed debounce timer * improved filtering * Update Slider.tsx * update select boxes based on stars filter
godatadriven · Nov 27, 2023 · 458c4a9 · 458c4a9
1 parent 9c461d4
commit 458c4a9
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 68 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -24,6 +24,7 @@
     "apexcharts": "^3.42.0",
     "date-fns": "^2.30.0",
     "duckdb-wasm-kit": "0.1.24",
+    "lodash": "^4.17.21",
     "material-react-table": "^1.15.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@mui/icons-material": "^5.14.9",
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

diff --git a/webapp/src/components/SelectBox.tsx b/webapp/src/components/SelectBox.tsx
@@ -1,23 +1,19 @@
 import { FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
-import { useState } from 'react';
 
 interface SelectBoxProps {
     items: string[];
     label: string;
-    initialSelection: string;
+    value: string;
     onChangeValue: (value: string) => void;
 }
 
 function SelectBox({
     items,
     label,
-    initialSelection,
+    value,
     onChangeValue,
 }: SelectBoxProps) {
-    const [selected, setSelected] = useState(initialSelection);
-
     function onChange(event: SelectChangeEvent) {
-        setSelected(event.target.value as string);
         onChangeValue(event.target.value as string);
     }
 
@@ -27,7 +23,7 @@ function SelectBox({
             <Select
                 labelId="demo-simple-select-label"
                 id="demo-simple-select"
-                value={selected}
+                value={value}
                 label={label}
                 onChange={onChange}
             >

diff --git a/webapp/src/components/Slider.tsx b/webapp/src/components/Slider.tsx
@@ -0,0 +1,22 @@
+import { FormControl, FormLabel, Slider as MSlider, SliderProps as MSliderProps } from '@mui/material';
+
+interface SliderProps {
+    label: string;
+    sliderProps: MSliderProps;
+}
+function Slider({
+    label,
+    sliderProps,
+}: SliderProps) {
+
+    return (
+        <FormControl fullWidth>
+            <FormLabel id={label}>{label}</FormLabel>
+            <MSlider
+                {...sliderProps}
+            />
+        </FormControl>
+    );
+}
+
+export default Slider;
diff --git a/webapp/src/hooks/useQueryFilter.ts b/webapp/src/hooks/useQueryFilter.ts
@@ -20,4 +20,4 @@ function useQueryFilter(filters: (QueryFilter | undefined)[]): string {
     return `WHERE ${whereClause}`;
 }
 
-export default useQueryFilter;
+export { useQueryFilter };