Merge pull request #34 from Ebubeker/indicators

feat: changes done the the frontend

apps/web/components/common/form-inputs/LayerFieldSelector.tsx

@@ -47,6 +47,7 @@ export const FieldTypeTag = styled("div")<{ fieldType: string }>(({ fieldType })
   lineHeight: "20px",
 }));
 
+
 const LayerFieldSelector = (props: SelectorProps) => {
   // const theme = useTheme();
   const [searchText, setSearchText] = useState("");
@@ -58,6 +59,7 @@ const LayerFieldSelector = (props: SelectorProps) => {
     });
     return filtered;
   }, [fields, searchText]);
+
   return (
     <FormControl 
       fullWidth 

apps/web/components/map/panels/common/ToolboxActionButtons.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Box, Button, useTheme } from "@mui/material";
+import { useTranslation } from "@/i18n/client";
+
+interface ToolboxActionButtonsProps {
+  resetFunction: () => void;
+  resetDisabled?: boolean;
+  runFunction: () => void;
+  runDisabled?: boolean;
+}
+
+const ToolboxActionButtons = (props: ToolboxActionButtonsProps) => {
+  const { resetFunction, resetDisabled, runFunction, runDisabled } = props;
+  const { t } = useTranslation("maps");
+
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        maxHeight: "5%",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          gap: theme.spacing(2),
+          alignItems: "center",
+          position: "absolute",
+          bottom: "-25px",
+          left: "-8px",
+          width: "calc(100% + 16px)",
+          padding: "16px",
+          background: "white",
+          boxShadow: "0px -5px 10px -5px rgba(58, 53, 65, 0.1)",
+        }}
+      >
+        <Button
+          color="error"
+          variant="outlined"
+          sx={{ flexGrow: "1" }}
+          onClick={resetFunction}
+          disabled={resetDisabled ? resetDisabled : false}
+        >
+          {t("panels.tools.reset")}
+        </Button>
+        <Button
+          sx={{ flexGrow: "1" }}
+          onClick={runFunction}
+          disabled={runDisabled ? runDisabled : false}
+        >
+          {t("panels.tools.run")}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ToolboxActionButtons;

apps/web/components/map/panels/filter/BoundingBoxInput.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Box, TextField, useTheme } from '@mui/material'
+
+interface BoundingProps {
+  bounds: string;
+}
+
+const BoundingBoxInput = (props: BoundingProps) => {
+  const {bounds} = props;
+
+  const theme = useTheme();
+  console.log(bounds)
+  return (
+    <Box sx={{display: "flex", flexDirection: "column", gap: theme.spacing(4)}}>
+      <Box sx={{display: "flex", gap: theme.spacing(3)}}>
+        <TextField
+          sx={{flexGrow: 1}}
+          label="North (lon)"
+          value={11.435354}
+        />
+        <TextField 
+          sx={{flexGrow: 1}}
+          label="West (lat)"
+          value={11.435354}
+        />
+      </Box>
+      <Box sx={{display: "flex", gap: theme.spacing(3)}}>
+        <TextField 
+          sx={{flexGrow: 1}}
+          label="South (lon)"
+          value={11.435354}
+        />
+        <TextField 
+          sx={{flexGrow: 1}}
+          label="East (lat)"
+          value={11.435354}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+export default BoundingBoxInput

apps/web/components/map/panels/filter/Expression.tsx

@@ -24,12 +24,13 @@ import {
   NumberOption,
   SelectOption,
   DualNumberOption,
-} from "@/components/map/panels/filter/nonuse/FilterOption";
+} from "@/components/map/panels/filter/FilterOption";
 import { useUniqueValues } from "@/lib/api/layers";
 import LayerFieldSelector from "@/components/common/form-inputs/LayerFieldSelector";
-
+import { useMap } from "react-map-gl";
 import type { Expression as ExpressionType } from "@/lib/validations/filter";
 import type { SelectChangeEvent } from "@mui/material";
+import BoundingBoxInput from "@/components/map/panels/filter/BoundingBoxInput";
 
 interface ExpressionProps {
   expression: ExpressionType;
@@ -59,7 +60,7 @@ const Expression = React.memo(function Expression(props: ExpressionProps) {
   const { t } = useTranslation("maps");
   const { activeLayer } = useActiveLayer(projectId as string);
   const open = Boolean(anchorEl);
-
+  const { map } = useMap();
   const theme = useTheme();
 
   const { data } = useUniqueValues(
@@ -95,6 +96,12 @@ const Expression = React.memo(function Expression(props: ExpressionProps) {
     switch (expression.expression) {
       case "is":
       case "is_not":
+        if (
+          expression.expression === "is" &&
+          expression.attribute === "Bounding Box"
+        ) {
+          return <BoundingBoxInput bounds={expressionValue as string} />;
+        }
         if (attributeType === "string") {
           return (
             <TextOption
@@ -227,6 +234,11 @@ const Expression = React.memo(function Expression(props: ExpressionProps) {
       .join("")}`,
   );
 
+  layerAttributes.keys.push({
+    name: "Bounding Box",
+    type: "number",
+  });
+
   const attributeType = layerAttributes.keys.filter(
     (attrib) => attrib.name === expression.attribute,
   ).length
@@ -239,6 +251,38 @@ const Expression = React.memo(function Expression(props: ExpressionProps) {
     setAnchorEl(!anchorEl);
   }
 
+  const targetFieldChangeHandler = (field: {
+    type: "string" | "number";
+    name: string;
+  }) => {
+    if (field) {
+      modifyExpression(expression, "attribute", field.name);
+      if (field.name === "Bounding Box") {
+        expression.attribute = field.name;
+        expression.value = `${map.getBounds().getSouthWest().toArray()[0]},${
+          map.getBounds().getSouthWest().toArray()[1]
+        },${map.getBounds().getNorthEast().toArray()[0]},${
+          map.getBounds().getNorthEast().toArray()[1]
+        }`;
+        modifyExpression(expression, "expression", "is");
+        expression.expression = "is";
+        debounceEffect(
+          expression,
+          "value",
+          `${map.getBounds().getSouthWest().toArray()[0]},${
+            map.getBounds().getSouthWest().toArray()[1]
+          },${map.getBounds().getNorthEast().toArray()[0]},${
+            map.getBounds().getNorthEast().toArray()[1]
+          }`,
+        );
+      }
+    } else {
+      modifyExpression(expression, "attribute", "");
+    }
+    setStatisticsData([]);
+    setExpressionValue("");
+  };
+
   return (
     <Box
       sx={{
@@ -290,35 +334,19 @@ const Expression = React.memo(function Expression(props: ExpressionProps) {
             (key) => key.name === expression.attribute,
           )[0]
         }
-        setSelectedField={(field: {
-          type: "string" | "number";
-          name: string;
-        }) => {
-          if (field) {
-            modifyExpression(expression, "attribute", field.name);
-            // setValue("target_field", field.name);
-          } else {
-            modifyExpression(expression, "attribute", "");
-          }
-          setStatisticsData([]);
-          setExpressionValue("");
-        }}
+        setSelectedField={targetFieldChangeHandler}
         fields={layerAttributes.keys}
       />
       <FormControl fullWidth>
-        <InputLabel id="demo-simple-select-label">
-          {t("panels.filter.select_an_expression")}
-        </InputLabel>
+        <InputLabel>{t("panels.filter.select_an_expression")}</InputLabel>
         <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
           value={expression.expression}
           label={t("panels.filter.select_an_expression")}
           onChange={(event: SelectChangeEvent) => {
             modifyExpression(expression, "expression", event.target.value);
             setExpressionValue("");
-            setStatisticsData([]);
           }}
+          disabled={expression.attribute === "Bounding Box"}
         >
           {attributeType
             ? comparerModes[attributeType].map((attr) => (

apps/web/components/map/panels/filter/Filter.tsx

@@ -160,12 +160,8 @@ const FilterPanel = (props: FilterProps) => {
           <ProjectLayerDropdown projectId={projectId} />
           {expressions && expressions.length > 1 ? (
             <FormControl fullWidth>
-              <InputLabel id="demo-simple-select-label">
-                Logical Operator
-              </InputLabel>
+              <InputLabel>Logical Operator</InputLabel>
               <Select
-                labelId="demo-simple-select-label"
-                id="demo-simple-select"
                 value={logicalOperator}
                 label="Logical Operator"
                 onChange={(event: SelectChangeEvent) => {

apps/web/components/map/panels/filter/nonuse/FilterOption.tsx → apps/web/components/map/panels/filter/FilterOption.tsx

@@ -1,11 +1,18 @@
 import React from "react";
-import TextInputSelect from "./inputFields/TextInputSelect";
-import { Select, FormControl, InputLabel, MenuItem, Box, useTheme } from "@mui/material";
+import TextInputSelect from "@/components/map/panels/filter/TextInputSelect";
+import {
+  Select,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Box,
+  useTheme,
+} from "@mui/material";
 import { useTranslation } from "@/i18n/client";
 import { v4 } from "uuid";
 
 import type { SelectChangeEvent } from "@mui/material";
-import type { Option } from "./inputFields/TextInputSelect";
+import type { Option } from "@/components/map/panels/filter/TextInputSelect";
 
 interface simpleInput {
   value: string | number | undefined;
@@ -77,17 +84,13 @@ export const SelectOption = (props: SelectOptionProps) => {
   return (
     <div>
       <FormControl fullWidth>
-        <InputLabel id="demo-simple-select-label">
-          {t("panels.filter.select_value")}
-        </InputLabel>
+        <InputLabel>{t("panels.filter.select_value")}</InputLabel>
         <Select
           MenuProps={{
             PaperProps: {
               onScroll: onScrolling,
             },
           }}
-          labelId="demo-multiple-name-label"
-          id="demo-multiple-name"
           multiple
           value={value as unknown as string}
           label={t("panels.filter.select_value")}
@@ -122,7 +125,9 @@ export const DualNumberOption = (props: DualNumberOptionProps) => {
   const theme = useTheme();
 
   return (
-    <Box sx={{display: "flex", flexDirection: "column", gap: theme.spacing(3)}}>
+    <Box
+      sx={{ display: "flex", flexDirection: "column", gap: theme.spacing(3) }}
+    >
       <TextInputSelect
         setInputValue={setChange1}
         inputValue={value1 ? value1 : ""}