chore: wip

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

Hide file tree

Showing 15 changed files with 189 additions and 200 deletions.
diff --git a/frontend/src/app/routes/models/confirmation.tsx b/frontend/src/app/routes/models/confirmation.tsx
@@ -14,7 +14,11 @@ export const ModelConfirmationPage = () => {
   const { isEditMode } = useModelsContext();
 
   return (
-    <div className={"col-span-12 md:col-start-3 md:col-span-8 flex flex-col gap-y-10"}>
+    <div
+      className={
+        "col-span-12 md:col-start-3 md:col-span-8 flex flex-col gap-y-10"
+      }
+    >
       <div className="flex items-center justify-center w-full h-full flex-col gap-y-10 text-center">
         <ConfettiExplosion
           force={0.2}

diff --git a/frontend/src/app/routes/start-mapping.tsx b/frontend/src/app/routes/start-mapping.tsx
@@ -24,7 +24,6 @@ import { APPLICATION_CONTENTS } from "@/contents";
 import { useMap } from "@/app/providers/map-provider";
 import { BASE_MODELS } from "@/enums";
 
-
 export const SEARCH_PARAMS = {
   useJOSMQ: "useJOSMQ",
   confidenceLevel: "confidenceLevel",
@@ -164,7 +163,7 @@ export const StartMappingPage = () => {
             />
           </div>
         </div>
-        <div className="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 border-8 border-off-white flex-grow fullscreen md:no-fullscreen">
           <StartMappingMapComponent
             trainingDataset={trainingDataset}
             modelPredictions={modelPredictions}

diff --git a/frontend/src/components/ui/full-screen/full-screen.tsx b/frontend/src/components/ui/full-screen/full-screen.tsx
diff --git a/frontend/src/components/ui/full-screen/index.ts b/frontend/src/components/ui/full-screen/index.ts
diff --git a/frontend/src/contents/start-mapping.ts b/frontend/src/contents/start-mapping.ts
@@ -40,7 +40,8 @@ export const START_MAPPING_CONTENT = {
       options: {
         allFeatures: "All Features as GeoJSON",
         acceptedFeatures: "Accepted Features Only",
-        openInJOSM: "Open in JOSM",
+        openAllFeaturesInJOSM: "Open All Features in JOSM",
+        openAcceptedFeaturesInJOSM: "Open All Features in JOSM",
       },
     },
     predictionInProgress: "running",

diff --git a/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx b/frontend/src/features/model-creation/components/dialogs/file-upload-dialog.tsx
@@ -174,9 +174,13 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
       className="border-2 border-gray-border rounded-lg px-3.5 py-1 flex items-center text-gray justify-between w-full"
     >
       <div className="flex items-center gap-x-2">
-        <span className="border-2 border-gray-border p-1 flex items-center"><FileIcon className="icon " /></span>
+        <span className="border-2 border-gray-border p-1 flex items-center">
+          <FileIcon className="icon " />
+        </span>
         <div>
-          <p className="text-dark text-body-3">{truncateString(file.file.name)}</p>
+          <p className="text-dark text-body-3">
+            {truncateString(file.file.name)}
+          </p>
           <SlFormatBytes value={file.file.size} className="text-sm" />
         </div>
       </div>
@@ -204,7 +208,9 @@ const FileUploadDialog: React.FC<FileUploadDialogProps> = ({
           <UploadIcon className="icon-lg w-10 h-10 " />
           <input {...getInputProps()} />
           {isDragActive ? (
-            <p className="text-body-4 md:text-body-3 text-center">Drop the files here ...</p>
+            <p className="text-body-4 md:text-body-3 text-center">
+              Drop the files here ...
+            </p>
           ) : (
             <>
               <p className="text-body-4 md:text-body-3 text-center">

diff --git a/frontend/src/features/model-creation/components/training-area/open-area-map.tsx b/frontend/src/features/model-creation/components/training-area/open-area-map.tsx
@@ -31,7 +31,7 @@ const OpenAerialMap = ({ tileJSONURL }: { tileJSONURL: string }) => {
   }, [map, fitToTMSBounds]);
 
   return (
-    <div className="flex w-full flex-col  gap-y-2 border-b-8 border-off-white px-4 pb-4">
+    <div className="flex w-full flex-col  gap-y-2 border-b-8 border-off-white py-2 px-4 pb-4">
       <p className="text-body-2 md:text-body-1 font-medium">
         {MODEL_CREATION_CONTENT.trainingArea.form.openAerialMap}
       </p>

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
@@ -194,8 +194,6 @@ const TrainingAreaItem: React.FC<
       : "0 m²";
   }, [trainingArea]);
 
-
-
   const createTrainingLabelsForAOI = useCreateTrainingLabelsForAOI({});
 
   const fileUploadHandler = async (geometry: Geometry) => {
@@ -230,15 +228,18 @@ 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={MODEL_CREATION_CONTENT.trainingArea.toolTips.fetchOSMLabels} >
+            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
@@ -1,10 +1,10 @@
 import TrainingAreaItem from "@/features/model-creation/components/training-area/training-area-item";
 import Pagination from "@/components/pagination";
 import { PaginatedTrainingArea } from "@/types";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useMemo } from "react";
 import { formatDuration, MODEL_CREATION_CONTENT } from "@/utils";
 import { useQuery } from "@tanstack/react-query";
-import { fetchOSMDatabaseLastUpdated } from "../../hooks/use-training-areas";
+import { fetchOSMDatabaseLastUpdated } from "@/features/model-creation/hooks/use-training-areas";
 
 const TrainingAreaList = ({
   offset,
@@ -21,13 +21,36 @@ const TrainingAreaList = ({
   offset: number;
   setOffset: Dispatch<SetStateAction<number>>;
 }) => {
-
-  const { data: osmData, isPending: isOSMPending, isError: isOSMError } = useQuery({
+  const {
+    data: osmData,
+    isPending: isOSMPending,
+    isError: isOSMError,
+  } = useQuery({
     queryKey: ["osm-database-last-updated"],
     queryFn: fetchOSMDatabaseLastUpdated,
     refetchInterval: 5000,
   });
 
+  const OSMLastUpdated = useMemo(() => {
+    return (
+      <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>
+    );
+  }, [isOSMPending, isOSMError, osmData]);
+
   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">
@@ -38,24 +61,7 @@ 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>
+        {OSMLastUpdated}
         <div className="w-full">
           <Pagination
             hasNextPage={data?.hasNext}

diff --git a/frontend/src/features/model-creation/components/training-area/training-area-map.tsx b/frontend/src/features/model-creation/components/training-area/training-area-map.tsx
@@ -1,7 +1,7 @@
 import { useMap } from "@/app/providers/map-provider";
 import { MapComponent, MapCursorToolTip } from "@/components/map";
 import { GeoJSONType, PaginatedTrainingArea } from "@/types";
-import { GeoJSONSource, GeoJSONSourceSpecification } from "maplibre-gl";
+import { GeoJSONSource } from "maplibre-gl";
 import { useCallback, useEffect, useState } from "react";
 import {
   useCreateTrainingArea,
@@ -30,6 +30,7 @@ import {
 import useDebounce from "@/hooks/use-debounce";
 import { DrawingModes } from "@/enums";
 import { useToolTipVisibility } from "@/hooks/use-tooltip-visibility";
+import { useMapLayers } from "@/hooks/use-map-layer";
 
 const TrainingAreaMap = ({
   tileJSONURL,
@@ -76,36 +77,9 @@ const TrainingAreaMap = ({
    * Callbacks
    */
 
-  const initializeSourcesAndLayers = useCallback(() => {
-    if (!map || !map.isStyleLoaded()) return;
-
-    /**
-     * Sources
-     */
-
-    if (data?.results && !map.getSource(trainingAreasSourceId)) {
-      map.addSource(trainingAreasSourceId, {
-        type: "geojson",
-        data: data.results,
-      } as GeoJSONSourceSpecification);
-    }
-
-    if (!map.getSource(trainingDatasetLabelsSourceId)) {
-      map.addSource(trainingDatasetLabelsSourceId, {
-        type: "geojson",
-        data: labels ?? {
-          type: "FeatureCollection",
-          features: [],
-        },
-      } as GeoJSONSourceSpecification);
-    }
-
-    /**
-     * Layers
-     */
-
-    if (!map.getLayer(trainingDatasetLabelsLayerId)) {
-      map.addLayer({
+  useMapLayers(
+    [
+      {
         id: trainingDatasetLabelsLayerId,
         type: "fill",
         source: trainingDatasetLabelsSourceId,
@@ -115,10 +89,8 @@ const TrainingAreaMap = ({
         },
         minzoom: TRAINING_LABELS_MIN_ZOOM_LEVEL,
         layout: { visibility: "visible" },
-      });
-    }
-    if (!map.getLayer(trainingDatasetLabelsOutlineLayerId)) {
-      map.addLayer({
+      },
+      {
         id: trainingDatasetLabelsOutlineLayerId,
         type: "line",
         source: trainingDatasetLabelsSourceId,
@@ -128,10 +100,8 @@ const TrainingAreaMap = ({
         },
         minzoom: TRAINING_LABELS_MIN_ZOOM_LEVEL,
         layout: { visibility: "visible" },
-      });
-    }
-    if (data?.results && !map.getLayer(trainingAreasFillLayerId)) {
-      map.addLayer({
+      },
+      {
         id: trainingAreasFillLayerId,
         type: "fill",
         source: trainingAreasSourceId,
@@ -140,10 +110,8 @@ const TrainingAreaMap = ({
           "fill-opacity": TRAINING_AREAS_AOI_FILL_OPACITY,
         },
         layout: { visibility: "visible" },
-      });
-    }
-    if (data?.results && !map.getLayer(trainingAreasLayerId)) {
-      map.addLayer({
+      },
+      {
         id: trainingAreasLayerId,
         type: "line",
         source: trainingAreasSourceId,
@@ -152,9 +120,28 @@ const TrainingAreaMap = ({
           "line-width": TRAINING_AREAS_AOI_OUTLINE_WIDTH,
         },
         layout: { visibility: "visible" },
-      });
-    }
-  }, [map, data?.results, labels]);
+      },
+    ],
+    [
+      {
+        id: trainingAreasSourceId,
+        spec: {
+          type: "geojson",
+          data: data?.results as GeoJSONType,
+        },
+      },
+      {
+        id: trainingDatasetLabelsSourceId,
+        spec: {
+          type: "geojson",
+          data: (labels as GeoJSONType) ?? {
+            type: "FeatureCollection",
+            features: [],
+          },
+        },
+      },
+    ],
+  );
 
   const updateTrainingLabels = useCallback(() => {
     if (map) {
@@ -188,31 +175,14 @@ const TrainingAreaMap = ({
    */
   useEffect(() => {
     if (!map) return;
-    const moveUpdates = () => {
-      updateBbox();
-    };
-    map.on("moveend", moveUpdates);
+    map.on("moveend", updateBbox);
     return () => {
-      map.off("moveend", moveUpdates);
+      map.off("moveend", updateBbox);
     };
   }, [map]);
 
   useEffect(() => {
-    if (!map) return;
-    const onStyleData = () => {
-      initializeSourcesAndLayers();
-    };
-    if (!map.isStyleLoaded()) {
-      map.once("styledata", onStyleData);
-    } else {
-      onStyleData();
-    }
-    return () => {
-      map.off("styledata", onStyleData);
-    };
-  }, [map, initializeSourcesAndLayers]);
-
-  useEffect(() => {
+    if (!data?.results) return;
     updateTrainingArea();
   }, [data?.results]);