Bugs/6104 missing rect box detailpage

src/components/box/BBoxConditionBox.tsx

@@ -9,14 +9,19 @@ import BBoxItem from "./BBoxItem";
 
 interface BBoxConditionProps {
   bboxCondition: BBoxCondition;
+  onRemove?: () => void;
 }
 
-const BBoxConditionBox: React.FC<BBoxConditionProps> = ({ bboxCondition }) => {
+const BBoxConditionBox: React.FC<BBoxConditionProps> = ({
+  onRemove,
+  bboxCondition,
+}) => {
   const bbox = bboxCondition.bbox;
   return (
     <DownloadConditionBox
+      id={bboxCondition.id}
       type={DownloadConditionType.BBOX}
-      conditionId={bboxCondition.id}
+      removeCallback={() => onRemove && onRemove()}
     >
       <Grid container>
         <Grid item md={5}>

src/components/box/DateRangeConditionBox.tsx

@@ -8,9 +8,11 @@ import { Typography } from "@mui/material";
 
 interface DateRangeConditionBoxProps {
   dateRangeCondition: DateRangeCondition;
+  onRemove?: () => void;
 }
 
 const DateRangeConditionBox: React.FC<DateRangeConditionBoxProps> = ({
+  onRemove,
   dateRangeCondition,
 }) => {
   const start = useMemo(
@@ -20,8 +22,9 @@ const DateRangeConditionBox: React.FC<DateRangeConditionBoxProps> = ({
   const end = useMemo(() => dateRangeCondition.end, [dateRangeCondition.end]);
   return (
     <DownloadConditionBox
+      id={dateRangeCondition.id}
       type={DownloadConditionType.DATE_RANGE}
-      conditionId={dateRangeCondition.id}
+      removeCallback={() => onRemove && onRemove()}
     >
       <Typography
         sx={{

src/components/box/DownloadConditionBox.tsx

@@ -1,15 +1,18 @@
-import { DownloadConditionType } from "../../pages/detail-page/context/DownloadDefinitions";
-import React, { useCallback } from "react";
+import React from "react";
+import {
+  DownloadConditionType,
+  IDownloadCondition,
+  IDownloadConditionCallback,
+} from "../../pages/detail-page/context/DownloadDefinitions";
 import { Grid, IconButton, Typography, useTheme } from "@mui/material";
 import BBOX_IMG from "../../assets/icons/bbox.png";
 import TIME_RANGE_IMG from "../../assets/images/time-range.png";
 import CloseIcon from "@mui/icons-material/Close";
-import { useDetailPageContext } from "../../pages/detail-page/context/detail-page-context";
 
-interface DownloadConditionBoxProps {
-  type: DownloadConditionType;
+interface DownloadConditionBoxProps
+  extends IDownloadCondition,
+    IDownloadConditionCallback {
   children: React.ReactNode;
-  conditionId: string;
 }
 
 const getIcon = (type: DownloadConditionType) => {
@@ -41,15 +44,9 @@ const getTitle = (type: DownloadConditionType) => {
 const DownloadConditionBox: React.FC<DownloadConditionBoxProps> = ({
   type,
   children,
-  conditionId,
+  removeCallback,
 }) => {
   const theme = useTheme();
-  const { deleteDownloadConditionBy } = useDetailPageContext();
-
-  const onConditionRemove = useCallback(() => {
-    deleteDownloadConditionBy(conditionId);
-  }, [conditionId, deleteDownloadConditionBy]);
-
   return (
     <Grid
       container
@@ -90,7 +87,7 @@ const DownloadConditionBox: React.FC<DownloadConditionBoxProps> = ({
         </Grid>
       </Grid>
       <Grid item md={1}>
-        <IconButton onClick={onConditionRemove}>
+        <IconButton onClick={removeCallback}>
           <CloseIcon fontSize="small" />
         </IconButton>
       </Grid>

src/components/common/constants.ts

@@ -1,6 +1,7 @@
 const dateDefault = {
   // Must use this format to do search, we do not care about the time
   DATE_TIME_FORMAT: "YYYY-MM-DDT00:00:00[Z]",
+  SIMPLE_DATE_FORMAT: "MM-YYYY",
   min: new Date("01/01/1970"),
   max: new Date(),
 };

src/components/map/mapbox/Map.tsx

@@ -32,12 +32,12 @@ const styles = [
   {
     id: "1",
     name: "Street map (MapBox)",
-    style: "mapbox://styles/mapbox/streets-v11",
+    style: "mapbox://styles/mapbox/streets-v12",
   },
   {
     id: "2",
     name: "Topographic map (MapBox)",
-    style: "mapbox://styles/mapbox/outdoors-v11",
+    style: "mapbox://styles/mapbox/outdoors-v12",
   },
   {
     id: "3",
@@ -109,7 +109,7 @@ const ReactMap = ({
       }
 
       // Create new map instance
-      const newMap = new Map({
+      return new Map({
         container: panelId,
         accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
         style: styles[MapDefaultConfig.DEFAULT_STYLE].style,
@@ -118,7 +118,6 @@ const ReactMap = ({
         testMode: import.meta.env.MODE === "dev",
         localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif",
       });
-      return newMap;
     } catch (err) {
       console.log("Map initialization failed:", err);
     }