chore: changed training area aoi color

hotosm · Nov 28, 2024 · 988731c · 988731c
1 parent 1ef38a1
commit 988731c
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 91 deletions.
diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -23,7 +23,7 @@ import {
 import { APPLICATION_CONTENTS } from "@/contents";
 import { useMap } from "@/app/providers/map-provider";
 import { BASE_MODELS } from "@/enums";
-import { FullSreenWidthComponent } from "@/components/ui/full-screen";
+
 
 export const SEARCH_PARAMS = {
   useJOSMQ: "useJOSMQ",
@@ -164,7 +164,7 @@ export const StartMappingPage = () => {
             />
           </div>
         </div>
-        <div className="hidden md:block col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
+        <div className="col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
           <StartMappingMapComponent
             trainingDataset={trainingDataset}
             modelPredictions={modelPredictions}
@@ -176,21 +176,6 @@ export const StartMappingPage = () => {
             modelPredictionsExist={modelPredictionsExist}
           />
         </div>
-
-        <FullSreenWidthComponent>
-          <div className="md:hidden col-span-12 h-[70vh] md:h-full w-full border-8 border-off-white flex-grow">
-            <StartMappingMapComponent
-              trainingDataset={trainingDataset}
-              modelPredictions={modelPredictions}
-              setModelPredictions={setModelPredictions}
-              trainingConfig={trainingConfig}
-              oamTileJSONIsError={oamTileJSONIsError}
-              oamTileJSON={oamTileJSON as TileJSON}
-              oamTileJSONError={oamTileJSONError}
-              modelPredictionsExist={modelPredictionsExist}
-            />
-          </div>
-        </FullSreenWidthComponent>
       </div>
     </>
   );

diff --git a/frontend/src/features/model-creation/components/training-area/training-area-item.tsx b/frontend/src/features/model-creation/components/training-area/training-area-item.tsx
@@ -28,7 +28,6 @@ import OSMLogo from "@/assets/svgs/osm_logo.svg";
 import { ToolTip } from "@/components/ui/tooltip";
 import { BBOX, GeoJSONType, Geometry, TTrainingAreaFeature } from "@/types";
 import {
-  fetchOSMDatabaseLastUpdated,
   useCreateTrainingLabelsForAOI,
   useDeleteTrainingArea,
   useGetTrainingAreaLabels,
@@ -37,7 +36,6 @@ import {
 import { useMap } from "@/app/providers/map-provider";
 import { useModelsContext } from "@/app/providers/models-provider";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 import FileUploadDialog from "../dialogs/file-upload-dialog";
 import { useDialog } from "@/hooks/use-dialog";
 import { geojsonToWKT } from "@terraformer/wkt";
@@ -196,11 +194,7 @@ const TrainingAreaItem: React.FC<
       : "0 m²";
   }, [trainingArea]);
 
-  const { data, isPending, isError } = useQuery({
-    queryKey: ["osm-database-last-updated"],
-    queryFn: fetchOSMDatabaseLastUpdated,
-    refetchInterval: 5000,
-  });
+
 
   const createTrainingLabelsForAOI = useCreateTrainingLabelsForAOI({});
 
@@ -236,36 +230,15 @@ const TrainingAreaItem: React.FC<
               ? "Fetching labels..."
               : trainingArea.properties.label_fetched !== null
                 ? truncateString(
-                    `Fetched ${timeSinceLabelFetch === "0 sec" ? "just now" : `${timeSinceLabelFetch} ago`}`,
-                    20,
-                  )
+                  `Fetched ${timeSinceLabelFetch === "0 sec" ? "just now" : `${timeSinceLabelFetch} ago`}`,
+                  20,
+                )
                 : "No labels yet"}
           </p>
         </div>
         <div className="flex items-center gap-x-3">
           <ToolTip
-            content={
-              <span className="flex flex-col gap-y-1">
-                {MODEL_CREATION_CONTENT.trainingArea.toolTips.fetchOSMLabels}
-                {isPending || isError ? (
-                  ""
-                ) : (
-                  <small>
-                    {
-                      MODEL_CREATION_CONTENT.trainingArea.toolTips
-                        .lastUpdatedPrefix
-                    }{" "}
-                    {formatDuration(
-                      new Date(String(data?.lastUpdated)),
-                      new Date(),
-                      1,
-                    )}{" "}
-                    ago
-                  </small>
-                )}
-              </span>
-            }
-          >
+            content={MODEL_CREATION_CONTENT.trainingArea.toolTips.fetchOSMLabels} >
             <button
               disabled={trainingAreaLabelsMutation.isPending}
               className="bg-green-secondary px-2 py-1 rounded-md text-nowrap text-[9px] flex items-center gap-x-2 font-light"

diff --git a/frontend/src/features/model-creation/components/training-area/training-area-list.tsx b/frontend/src/features/model-creation/components/training-area/training-area-list.tsx
@@ -2,7 +2,9 @@ import TrainingAreaItem from "@/features/model-creation/components/training-area
 import Pagination from "@/components/pagination";
 import { PaginatedTrainingArea } from "@/types";
 import { Dispatch, SetStateAction } from "react";
-import { MODEL_CREATION_CONTENT } from "@/utils";
+import { formatDuration, MODEL_CREATION_CONTENT } from "@/utils";
+import { useQuery } from "@tanstack/react-query";
+import { fetchOSMDatabaseLastUpdated } from "../../hooks/use-training-areas";
 
 const TrainingAreaList = ({
   offset,
@@ -19,6 +21,13 @@ const TrainingAreaList = ({
   offset: number;
   setOffset: Dispatch<SetStateAction<number>>;
 }) => {
+
+  const { data: osmData, isPending: isOSMPending, isError: isOSMError } = useQuery({
+    queryKey: ["osm-database-last-updated"],
+    queryFn: fetchOSMDatabaseLastUpdated,
+    refetchInterval: 5000,
+  });
+
   return (
     <div className="flex max-h-[60%] flex-col gap-y-4 justify-between p-2 lg:p-4">
       <div className="flex items-start w-full flex-col gap-y-4">
@@ -29,6 +38,24 @@ const TrainingAreaList = ({
             {data?.count ?? 0}
           </span>
         </p>
+        <span className="flex flex-col gap-y-1 text-gray italic">
+          {isOSMPending || isOSMError ? (
+            ""
+          ) : (
+            <small>
+              {
+                MODEL_CREATION_CONTENT.trainingArea.toolTips
+                  .lastUpdatedPrefix
+              }{" "}
+              {formatDuration(
+                new Date(String(osmData?.lastUpdated)),
+                new Date(),
+                1,
+              )}{" "}
+              ago
+            </small>
+          )}
+        </span>
         <div className="w-full">
           <Pagination
             hasNextPage={data?.hasNext}

diff --git a/frontend/src/features/start-mapping/components/map.tsx b/frontend/src/features/start-mapping/components/map.tsx
@@ -9,7 +9,7 @@ import {
 
 import { GeoJSONSource } from "maplibre-gl";
 
-import { MapComponent } from "@/components/map";
+import { MapComponent, MapCursorToolTip } from "@/components/map";
 import { ToolTip } from "@/components/ui/tooltip";
 import { useMapLayers } from "@/hooks/use-map-layer";
 import { useMap } from "@/app/providers/map-provider";
@@ -29,6 +29,8 @@ import {
   ALL_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
   ALL_MODEL_PREDICTIONS_SOURCE_ID,
   extractTileJSONURL,
+  MIN_ZOOM_LEVEL_FOR_PREDICTION,
+  MINIMUM_ZOOM_LEVEL_INSTRUCTION_FOR_PREDICTION,
   REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
   REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
   REJECTED_MODEL_PREDICTIONS_SOURCE_ID,
@@ -37,6 +39,7 @@ import {
 import PredictedFeatureActionPopup from "@/features/start-mapping/components/popup";
 import { TModelPredictionsConfig } from "@/features/start-mapping/api/get-model-predictions";
 import { APPLICATION_CONTENTS, TOAST_NOTIFICATIONS } from "@/contents";
+import { useToolTipVisibility } from "@/hooks/use-tooltip-visibility";
 
 const StartMappingMapComponent = ({
   trainingDataset,
@@ -60,7 +63,7 @@ const StartMappingMapComponent = ({
   modelPredictionsExist: boolean;
 }) => {
   const tileJSONURL = extractTileJSONURL(trainingDataset?.source_imagery ?? "");
-  const { map } = useMap();
+  const { map, currentZoom } = useMap();
   const [showPopup, setShowPopup] = useState<boolean>(false);
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [selectedFeature, setSelectedFeature] = useState(null);
@@ -70,6 +73,9 @@ const StartMappingMapComponent = ({
     map?.fitBounds(oamTileJSON?.bounds);
   }, [map, oamTileJSON?.bounds]);
 
+  const { tooltipPosition, tooltipVisible } =
+    useToolTipVisibility([currentZoom]);
+
   useEffect(() => {
     if (!oamTileJSONIsError) return;
     showErrorToast(undefined, TOAST_NOTIFICATIONS.trainingDataset.error);
@@ -263,7 +269,7 @@ const StartMappingMapComponent = ({
     ),
     [selectedEvent, trainingDataset],
   );
-
+  const showTooltip = currentZoom < MIN_ZOOM_LEVEL_FOR_PREDICTION && tooltipVisible;
   return (
     <MapComponent
       showCurrentZoom
@@ -277,42 +283,42 @@ const StartMappingMapComponent = ({
       layerControlLayers={[
         ...(modelPredictions.accepted.length > 0
           ? [
-              {
-                value:
-                  APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
-                    .acceptedPredictions,
-                subLayers: [
-                  ACCEPTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
-                  ACCEPTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-                ],
-              },
-            ]
+            {
+              value:
+                APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
+                  .acceptedPredictions,
+              subLayers: [
+                ACCEPTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
+                ACCEPTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+              ],
+            },
+          ]
           : []),
         ...(modelPredictions.rejected.length > 0
           ? [
-              {
-                value:
-                  APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
-                    .rejectedPredictions,
-                subLayers: [
-                  REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
-                  REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-                ],
-              },
-            ]
+            {
+              value:
+                APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
+                  .rejectedPredictions,
+              subLayers: [
+                REJECTED_MODEL_PREDICTIONS_FILL_LAYER_ID,
+                REJECTED_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+              ],
+            },
+          ]
           : []),
         ...(modelPredictions.all.length > 0
           ? [
-              {
-                value:
-                  APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
-                    .predictionResults,
-                subLayers: [
-                  ALL_MODEL_PREDICTIONS_FILL_LAYER_ID,
-                  ALL_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
-                ],
-              },
-            ]
+            {
+              value:
+                APPLICATION_CONTENTS.START_MAPPING.map.controls.legendControl
+                  .predictionResults,
+              subLayers: [
+                ALL_MODEL_PREDICTIONS_FILL_LAYER_ID,
+                ALL_MODEL_PREDICTIONS_OUTLINE_LAYER_ID,
+              ],
+            },
+          ]
           : []),
       ]}
     >
@@ -332,6 +338,13 @@ const StartMappingMapComponent = ({
           </button>
         </ToolTip>
       )}
+      <MapCursorToolTip
+        tooltipVisible={showTooltip}
+        color={'bg-primary'}
+        tooltipPosition={tooltipPosition}
+      >
+        {MINIMUM_ZOOM_LEVEL_INSTRUCTION_FOR_PREDICTION}
+      </MapCursorToolTip>
     </MapComponent>
   );
 };

diff --git a/frontend/src/features/start-mapping/components/model-action.tsx b/frontend/src/features/start-mapping/components/model-action.tsx
@@ -1,7 +1,7 @@
 import { TModelPredictions } from "@/types";
 import {
   MIN_ZOOM_LEVEL_FOR_PREDICTION,
-  MINIMUM_ZOOM_LEVEL_INSTRUCTION_FOR_PREDICTION,
+
   showErrorToast,
   showSuccessToast,
   uuid4,
@@ -74,11 +74,6 @@ const ModelAction = ({
 
   return (
     <div className="flex gap-y-3 flex-col-reverse flex-wrap  md:items-center md:flex-row md:justify-between md:gap-x-2 md:flex-nowrap">
-      {disablePredictionButton && (
-        <p className="text-primary text-xs md:text-nowrap italic">
-          {MINIMUM_ZOOM_LEVEL_INSTRUCTION_FOR_PREDICTION}
-        </p>
-      )}
       <Button
         disabled={disablePredictionButton || modelPredictionMutation.isPending}
         onClick={handlePrediction}

diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -176,9 +176,9 @@ export const LEGEND_NAME_MAPPING: Record<string, string> = {
  * Training area and labels styles.
  */
 export const TRAINING_AREAS_AOI_FILL_COLOR =
-  ENVS.TRAINING_AREAS_AOI_FILL_COLOR || "#92B48766";
+  ENVS.TRAINING_AREAS_AOI_FILL_COLOR || "#247DCACC";
 export const TRAINING_AREAS_AOI_OUTLINE_COLOR =
-  ENVS.TRAINING_AREAS_AOI_OUTLINE_COLOR || "#92B487";
+  ENVS.TRAINING_AREAS_AOI_OUTLINE_COLOR || "#247DCACC";
 export const TRAINING_AREAS_AOI_OUTLINE_WIDTH =
   ENVS.TRAINING_AREAS_AOI_OUTLINE_WIDTH || 4;
 export const TRAINING_AREAS_AOI_FILL_OPACITY =