chore: fixed training area leayout

hotosm · Nov 16, 2024 · 8a4515e · 8a4515e
1 parent a192d79
commit 8a4515e
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 61 deletions.
diff --git a/frontend/src/components/layouts/model-forms-layout.tsx b/frontend/src/components/layouts/model-forms-layout.tsx
@@ -26,43 +26,43 @@ const pages: {
   icon: React.ElementType;
   path: string;
 }[] = [
-  {
-    id: 1,
-    title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
-    icon: TagsIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
-  },
-  {
-    id: 2,
-    title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
-    icon: DatabaseIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
-  },
-  {
-    id: 3,
-    title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
-    icon: SquareShadowIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
-  },
-  {
-    id: 4,
-    title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
-    icon: SettingsIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
-  },
-  {
-    id: 5,
-    title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
-    icon: CloudIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
-  },
-  {
-    id: 6,
-    title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
-    icon: StarIcon,
-    path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
-  },
-];
+    {
+      id: 1,
+      title: MODEL_CREATION_CONTENT.progressStepper.modelDetails,
+      icon: TagsIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL,
+    },
+    {
+      id: 2,
+      title: MODEL_CREATION_CONTENT.progressStepper.trainingDataset,
+      icon: DatabaseIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_DATASET,
+    },
+    {
+      id: 3,
+      title: MODEL_CREATION_CONTENT.progressStepper.trainingArea,
+      icon: SquareShadowIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_AREA,
+    },
+    {
+      id: 4,
+      title: MODEL_CREATION_CONTENT.progressStepper.trainingSettings,
+      icon: SettingsIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_TRAINING_SETTINGS,
+    },
+    {
+      id: 5,
+      title: MODEL_CREATION_CONTENT.progressStepper.submitModel,
+      icon: CloudIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_SUMMARY,
+    },
+    {
+      id: 6,
+      title: MODEL_CREATION_CONTENT.progressStepper.confirmation,
+      icon: StarIcon,
+      path: APPLICATION_ROUTES.CREATE_NEW_MODEL_CONFIRMATION,
+    },
+  ];
 
 const ModelCreationLayout = () => {
   const { pathname } = useLocation();

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
@@ -62,7 +62,7 @@ const TrainingAreaMap = ({
 
   const [featureArea, setFeatureArea] = useState<number>(0);
 
-  const { setTooltipVisible, tooltipPosition } = useToolTipVisibility([
+  const { setTooltipVisible, tooltipPosition, tooltipVisible } = useToolTipVisibility([
     drawingMode,
     currentZoom,
   ]);
@@ -376,7 +376,7 @@ const TrainingAreaMap = ({
 
   const showTooltip = Boolean(
     drawingMode === DrawingModes.RECTANGLE || showLabelsToolTip,
-  );
+  ) && tooltipVisible;
 
   const getTooltipColor = () => {
     if (featureArea !== 0) {

diff --git a/frontend/src/features/model-creation/components/training-area/training-area.tsx b/frontend/src/features/model-creation/components/training-area/training-area.tsx
@@ -13,13 +13,12 @@ import TrainingAreaList from "@/features/model-creation/components/training-area
 import { useGetTrainingAreas } from "@/features/model-creation/hooks/use-training-areas";
 import OpenAerialMap from "@/features/model-creation/components/training-area/open-area-map";
 import { useMap } from "@/app/providers/map-provider";
-import { useToastNotification } from "@/hooks/use-toast-notification";
-import { MODEL_CREATION_CONTENT } from "@/utils";
+import { MODEL_CREATION_CONTENT, showSuccessToast, TOAST_NOTIFICATIONS } from "@/utils";
 import { DrawingModes } from "@/enums";
 
 const TrainingAreaForm = () => {
   const { formData } = useModelsContext();
-  const toast = useToastNotification();
+
   const tileJSONURL = formData.tmsURL.split("/{z}/{x}/{y}")[0];
 
   const { closeDialog, isOpened, toggle } = useDialog();
@@ -69,16 +68,16 @@ const TrainingAreaForm = () => {
             </p>
           </div>
         </div>
-        <div className="flex-grow h-[90vh] w-full grid grid-cols-5 grid-rows-1 border-8 border-off-white">
-          <div className="h-full  w-full col-span-4">
+        <div className="flex-grow h-[90vh] w-full grid grid-cols-9  border-8 border-off-white">
+          <div className="h-full w-full col-span-6 2xl:col-span-7">
             <TrainingAreaMap
               tileJSONURL={tileJSONURL}
               data={trainingAreasData}
               trainingDatasetId={Number(formData.selectedTrainingDatasetId)}
               offset={offset}
             />
           </div>
-          <div className="flex  flex-col w-full h-full border-l-8 border-off-white gap-y-6 py-4">
+          <div className="flex col-span-3 2xl:col-span-2 flex-col w-full h-full border-l-8 border-off-white gap-y-6 py-4">
             <OpenAerialMap tileJSONURL={tileJSONURL} />
             <TrainingAreaList
               offset={offset}
@@ -89,23 +88,22 @@ const TrainingAreaForm = () => {
               datasetId={Number(formData.selectedTrainingDatasetId)}
             />
             <div
-              className={`flex mt-auto px-4  ${trainingAreasData?.count === 0 ? "flex-col gap-y-6 " : " items-center justify-between gap-x-2 "} w-full"`}
+              className={`flex mt-auto px-4  w-full ${trainingAreasData?.count === 0 ? "flex-col gap-y-6 " : "items-center justify-between gap-x-2 "}"`}
             >
-              <Button
-                variant="primary"
-                onClick={() => {
-                  setDrawingMode(DrawingModes.RECTANGLE);
-                  toast(
-                    "Draw mode activated. Hover on the map to start drawing.",
-                    "success",
-                  );
-                }}
-              >
-                <div className="flex items-center gap-x-2">
-                  <p>{MODEL_CREATION_CONTENT.trainingArea.form.draw}</p>
-                  <div className="w-4 h-4 border-2 rounded-md border-white"></div>
-                </div>
-              </Button>
+              <div>
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    setDrawingMode(DrawingModes.RECTANGLE);
+                    showSuccessToast(TOAST_NOTIFICATIONS.drawingModeActivated)
+                  }}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <p>{MODEL_CREATION_CONTENT.trainingArea.form.draw}</p>
+                    <div className="w-4 h-4 border-2 rounded-md border-white"></div>
+                  </div>
+                </Button>
+              </div>
               <ButtonWithIcon
                 label={MODEL_CREATION_CONTENT.trainingArea.form.upload}
                 variant="dark"

diff --git a/frontend/src/utils/content.ts b/frontend/src/utils/content.ts
@@ -7,6 +7,7 @@ import {
 import { formatAreaInAppropriateUnit } from "./geometry-utils";
 
 export const TOAST_NOTIFICATIONS = {
+  drawingModeActivated: "Draw mode activated. Hover on the map to start drawing",
   trainingAreasFileUploadSuccess: "Training areas created successfully.",
   trainingLabelsFetchSuccess: "Training labels fetched successfully.",
   trainingAreaDeletionSuccess: "Training area deleted successfully.",