wip: continuous improvements

frontend/.env.sample

@@ -114,4 +114,16 @@ VITE_TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434"
 # The remote url to JOSM.
 # Data type: String (e.g., "http://127.0.0.1:8111/").
 # Default value: http://127.0.0.1:8111/.
-VITE_JOSM_REMOTE_URL =  "http://127.0.0.1:8111/"
+VITE_JOSM_REMOTE_URL =  "http://127.0.0.1:8111/"
+
+
+# The time to poll the backend for the status of the AOI training labels fetching, in milliseconds (ms).
+# Data type: Positive Integer (e.g., 900).
+# Default value: 5000 milliseconds (5 seconds).
+VITE_TRAINING_AREA_LABELS_FETCH_POOLING_INTERVAL_MS = 5000
+
+
+# The time to poll the backend for the status of the OSM last updated time, in milliseconds (ms).
+# Data type: Positive Integer (e.g., 900).
+# Default value: 10000 milliseconds (10 seconds).
+VITE_OSM_LAST_UPDATED_POOLING_INTERVAL_MS = 10000

frontend/src/app/router.tsx

@@ -1,13 +1,12 @@
-import { RootLayout } from "@/components/layouts";
 import { APPLICATION_ROUTES } from "@/utils";
 import {
   Navigate,
   RouterProvider,
   createBrowserRouter,
 } from "react-router-dom";
-import { ProtectedPage } from "@/app/routes/protected-route";
+import { ProtectedRoute } from "@/app/routes/protected-route";
 import { MainErrorFallback } from "@/components/errors";
-import ModelFormsLayout from "@/components/layouts/model-forms-layout";
+import { ModelFormsLayout, RootLayout } from "@/layouts";
 
 const router = createBrowserRouter([
   {
@@ -92,9 +91,9 @@ const router = createBrowserRouter([
        */
       {
         element: (
-          <ProtectedPage>
+          <ProtectedRoute>
             <ModelFormsLayout />
-          </ProtectedPage>
+          </ProtectedRoute>
         ),
         children: [
           /**
@@ -255,9 +254,9 @@ const router = createBrowserRouter([
           );
           return {
             Component: () => (
-              <ProtectedPage>
+              <ProtectedRoute>
                 <TrainingDatasetsPage />
-              </ProtectedPage>
+              </ProtectedRoute>
             ),
           };
         },
@@ -278,9 +277,9 @@ const router = createBrowserRouter([
           );
           return {
             Component: () => (
-              <ProtectedPage>
+              <ProtectedRoute>
                 <StartMappingPage />
-              </ProtectedPage>
+              </ProtectedRoute>
             ),
           };
         },

frontend/src/app/routes/about.tsx

@@ -1,9 +1,9 @@
 import { Header } from "@/components/shared";
 import { Image } from "@/components/ui/image";
-import HOTTeamLandscape from "@/assets/images/hot_team_landscape.png";
 import { Head } from "@/components/seo";
-import AIIcon from "@/assets/svgs/fair_ai_icon.svg";
 import { aboutPageContent } from "@/constants";
+import { HOTTeamLandscape } from "@/assets/images";
+import { AIIcon } from "@/assets/svgs";
 
 export const AboutPage = () => {
   return (

frontend/src/app/routes/account/models.tsx

@@ -1,6 +1,6 @@
-import Pagination, { PAGE_LIMIT } from "@/components/shared/pagination";
+import { Pagination, } from "@/components/shared";
 import { Head } from "@/components/seo";
-import { LayoutView } from "@/enums/models";
+import { LayoutView } from "@/enums";
 import { LayoutToggle, PageHeader } from "@/features/models/components";
 import { MobileModelFiltersDialog } from "@/features/models/components/dialogs";
 import {
@@ -24,6 +24,7 @@ import ModelNotFound from "@/features/models/components/model-not-found";
 import { SEARCH_PARAMS } from "@/app/routes/models/models-list";
 import { useAuth } from "@/app/providers/auth-provider";
 import { modelPagesContent } from "@/constants";
+import { PAGE_LIMIT } from "@/components/shared";
 
 export const UserModelsPage = () => {
   const { isOpened, openDialog, closeDialog } = useDialog();

frontend/src/app/routes/landing.tsx

@@ -1,12 +1,6 @@
-import { Header } from "@/components/landing/header";
-import WhatIsFAIR from "@/components/landing/about-fair/about-fair";
-import CoreFeatures from "@/components/landing/core-features/core-features";
-import Corevalues from "@/components/landing/core-values/core-values";
-import CallToAction from "@/components/landing/cta/cta";
-import TheFAIRProcess from "@/components/shared/fair-process/fair-process";
 import { FAQs } from "@/components/shared";
-import Kpi from "@/components/landing/kpi/kpi";
-import TaglineBanner from "@/components/landing/tagline/tagline";
+import { Header, Kpi, TaglineBanner, TheFAIRProcess, CallToAction, Corevalues, CoreFeatures, WhatIsFAIR } from "@/components/landing";
+
 import { Head } from "@/components/seo";
 
 export const LandingPage = () => {
@@ -19,7 +13,9 @@ export const LandingPage = () => {
       <TheFAIRProcess />
       <CoreFeatures />
       <Corevalues />
-      <FAQs />
+      <section className="app-padding">
+        <FAQs />
+      </section>
       <TaglineBanner />
       <CallToAction />
     </>

frontend/src/app/routes/learn.tsx

@@ -1,16 +1,17 @@
 import { TheFAIRProcess } from "@/components/landing";
 import { Header, SectionHeader } from "@/components/shared";
 import { Image } from "@/components/ui/image";
-import fAIrValues from "@/assets/svgs/fair_values.svg";
+
 import { ExternalLinkIcon, YouTubePlayCircleIcon } from "@/components/ui/icons";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/components/ui/link";
 import { SHOELACE_SIZES } from "@/enums";
 import { Head } from "@/components/seo";
 import { useState } from "react";
-import VideoPlaceholderImage from "@/assets/images/header_bg.jpg";
 import { learnPageContent } from "@/constants";
 import { TGuide, TVideo } from "@/types";
+import { JumbotronBackgroundImage } from "@/assets/images";
+import { fAIrValues } from "@/assets/svgs";
 
 export const LearnPage = () => {
   return (
@@ -118,7 +119,7 @@ const VideoCard = ({ video }: { video: TVideo }) => {
       <div className="relative">
         <div className="w-full h-full">
           <Image
-            src={VideoPlaceholderImage}
+            src={JumbotronBackgroundImage}
             width="100%"
             height="100%"
             alt={video.title}

frontend/src/app/routes/models/confirmation.tsx

@@ -1,5 +1,5 @@
 import { useModelsContext } from "@/app/providers/models-provider";
-import ModelFormConfirmation from "@/assets/images/model_creation_success.png";
+import { ModelFormConfirmation } from "@/assets/images";
 import { Button } from "@/components/ui/button";
 import { Image } from "@/components/ui/image";
 import { Link } from "@/components/ui/link";

frontend/src/app/routes/models/model-details.tsx

@@ -14,13 +14,13 @@ import { useDialog } from "@/hooks/use-dialog";
 import { APP_CONTENT, APPLICATION_ROUTES } from "@/utils";
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import TrainingInProgressImage from "@/assets/images/training_in_progress.png";
 import { Image } from "@/components/ui/image";
 import ModelEnhancementDialog from "@/features/models/components/dialogs/model-enhancement-dialog";
 import { TModelDetails, TTrainingDataset } from "@/types";
 import { useAuth } from "@/app/providers/auth-provider";
 import { TrainingAreaDrawer } from "@/features/models/components/training-area-drawer";
 import { useGetTrainingDataset } from "@/features/models/hooks/use-dataset";
+import { TrainingInProgressImage } from "@/assets/images";
 
 export const ModelDetailsPage = () => {
   const { id } = useParams<{ id: string }>();

frontend/src/app/routes/models/models-list.tsx

@@ -20,15 +20,15 @@ import {
   OrderingFilter,
   SearchFilter,
 } from "@/features/models/components/filters";
-import Pagination, { PAGE_LIMIT } from "@/components/shared/pagination";
+import { Pagination, PAGE_LIMIT } from "@/components/shared";
 import { APP_CONTENT } from "@/utils";
 import { PageHeader } from "@/features/models/components/";
 import { FeatureCollection } from "@/types";
 import ModelNotFound from "@/features/models/components/model-not-found";
 import { useDialog } from "@/hooks/use-dialog";
 import { MobileModelFiltersDialog } from "@/features/models/components/dialogs";
 import { Head } from "@/components/seo";
-import { LayoutView } from "@/enums/models";
+import { LayoutView } from "@/enums";
 import {
   useScrollToElement,
   useScrollToTop,
@@ -92,7 +92,7 @@ export const ModelsPage = () => {
     if (mapViewIsActive) {
       return (
         <div
-          id={mapViewElementId}
+
           className="w-full grid grid-cols-1 grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 md:border rounded-md lg:p-2 md:border-gray-border gap-x-2 mt-10  gap-y-6 lg:gap-y-0 h-screen"
         >
           <div className="w-full overflow-y-auto lg:row-start-1">
@@ -102,7 +102,7 @@ export const ModelsPage = () => {
               isError={isError}
             />
           </div>
-          <div className="row-start-1">
+          <div className="row-start-1" id={mapViewElementId}>
             {modelsMapDataIsPending || modelsMapDataIsError ? (
               <div className="w-full h-full animate-pulse bg-light-gray"></div>
             ) : (
@@ -149,8 +149,8 @@ export const ModelsPage = () => {
       <section className="my-10 min-h-screen">
         <PageHeader />
         {/* Filters */}
-        <div className="sticky top-0 bg-white z-10 py-2">
-          <div className="flex flex-col gap-y-4">
+        <div className="sticky top-0 bg-white z-10 py-1">
+          <div className="flex flex-col gap-y-1">
             <div className=" flex items-center justify-between w-full ">
               <div className="flex items-center justify-between w-full md:gap-x-4 gap-y-2 md:gap-y-0  md:w-auto">
                 <SearchFilter updateQuery={updateQuery} query={query} />
@@ -195,7 +195,7 @@ export const ModelsPage = () => {
           {isPending ? (
             <div className="w-full h-10 mt-10 bg-light-gray animate-pulse text-dark"></div>
           ) : (
-            <div className="flex items-center justify-between w-full my-10 top-16">
+            <div className="flex items-center justify-between w-full my-4 top-16">
               <div className="w-full flex items-center justify-between">
                 <p className="font-semibold text-body-3">
                   {data?.count}{" "}

frontend/src/app/routes/protected-route.tsx

@@ -9,7 +9,7 @@ type ProtectedRouteProps = {
   children: React.ReactNode;
 };
 
-export const ProtectedPage: React.FC<ProtectedRouteProps> = ({ children }) => {
+export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
   const { isAuthenticated } = useAuth();
   const { handleLogin, loading } = useLogin();
 

frontend/src/assets/images/index.ts

@@ -0,0 +1,10 @@
+export { default as JumbotronBackgroundImage } from "@/assets/images/header_bg.jpg";
+export { default as CreativeCommonsBadge } from "@/assets/images/cc_by_badge.png";
+export { default as HOTTeamTwo } from "@/assets/images/hot_team_2.jpg";
+export { default as HOTTeamLandscape } from "@/assets/images/hot_team_landscape.png";
+export { default as HOTTeam } from "@/assets/images/hot_team.jpg";
+export { default as MapMarkerIcon } from "@/assets/images/map_marker.png";
+export { default as MapathonOngoing } from "@/assets/images/mapathon_ongoing.jpg";
+export { default as ModelFormConfirmation } from "@/assets/images/model_creation_success.png";
+export { default as FairModelPlaceholderImage } from "@/assets/images/model_placeholder_image.png";
+export { default as TrainingInProgressImage } from "@/assets/images/training_in_progress.png";

frontend/src/assets/svgs/index.ts

@@ -0,0 +1,7 @@
+export { default as DashedLineConnector } from "@/assets/svgs/dashed_line.svg";
+export { default as AIIcon } from "@/assets/svgs/fair_ai_icon.svg";
+export { default as fAIrValues } from "@/assets/svgs/fair_values.svg";
+export { default as HamburgerIcon } from "@/assets/svgs/hamburger_icon.svg";
+export { default as HOTFairLogo } from "@/assets/svgs/hot_fair_logo.svg";
+export { default as JOSMLogo } from "@/assets/svgs/josm_logo.svg";
+export { default as OSMLogo } from "@/assets/svgs/osm_logo.svg";

frontend/src/components/errors/fallback.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { APP_CONTENT } from "@/utils";
 
-const MainErrorFallback = () => {
+export const MainErrorFallback = () => {
   return (
     <>
       <section className="min-h-[80vh] flex flex-col mt-20 items-center justify-around">
@@ -23,4 +23,3 @@ const MainErrorFallback = () => {
   );
 };
 
-export default MainErrorFallback;

frontend/src/components/errors/index.ts

@@ -1,2 +1,2 @@
-export { default as MainErrorFallback } from "./fallback";
-export { default as PageUnderConstruction } from "./under-construction";
+export { MainErrorFallback } from "./fallback";
+export { PageUnderConstruction } from "./under-construction";

frontend/src/components/errors/under-construction.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { APP_CONTENT } from "@/utils";
 
-const PageUnderConstruction = () => {
+export const PageUnderConstruction = () => {
   return (
     <section className="min-h-[80vh] flex flex-col mt-20 items-center justify-around">
       <div>
@@ -21,4 +21,3 @@ const PageUnderConstruction = () => {
   );
 };
 
-export default PageUnderConstruction;

frontend/src/components/landing/about-fair/about-fair.tsx

@@ -1,9 +1,10 @@
-import AIIcon from "@/assets/svgs/fair_ai_icon.svg";
+
 import styles from "./about-fair.module.css";
 import { APP_CONTENT } from "@/utils/content";
 import { Image } from "@/components/ui/image";
+import { AIIcon } from "@/assets/svgs";
 
-const WhatIsFAIR = () => {
+export const WhatIsFAIR = () => {
   return (
     <section className={styles.aboutfAIrContainer}>
       <div className={styles.featureContent}>
@@ -18,4 +19,4 @@ const WhatIsFAIR = () => {
   );
 };
 
-export default WhatIsFAIR;
+

frontend/src/components/landing/core-features/core-features.tsx

@@ -22,7 +22,7 @@ const coreFeatures: TCoreFeatures[] = [
   },
 ];
 
-const CoreFeatures = () => {
+export const CoreFeatures = () => {
   return (
     <section className={styles.coreFeatures}>
       {coreFeatures.map((feature, id) => (
@@ -36,5 +36,3 @@ const CoreFeatures = () => {
     </section>
   );
 };
-
-export default CoreFeatures;

frontend/src/components/landing/core-values/core-values.tsx

@@ -1,11 +1,10 @@
 import styles from "./core-values.module.css";
-import HOTTeam from "@/assets/images/hot_team.jpg";
-import MapathonOngoing from "@/assets/images/mapathon_ongoing.jpg";
 import { APP_CONTENT } from "@/utils/content";
-import DashedLineConnector from "@/assets/svgs/dashed_line.svg";
 import { Image } from "@/components/ui/image";
+import { HOTTeam, MapathonOngoing } from "@/assets/images";
+import { DashedLineConnector } from "@/assets/svgs";
 
-const Corevalues = () => {
+export const Corevalues = () => {
   return (
     <section className={styles.coreValues}>
       <div className={styles.sectionTitle}>
@@ -110,4 +109,3 @@ const Corevalues = () => {
   );
 };
 
-export default Corevalues;

frontend/src/components/landing/cta/cta.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@/components/ui/button/";
-import HOTTeam from "@/assets/images/hot_team_2.jpg";
 import styles from "./cta.module.css";
 import { APP_CONTENT } from "@/utils";
 import { Image } from "@/components/ui/image";
 import { Link } from "@/components/ui/link";
+import { HOTTeamTwo } from "@/assets/images";
 
-const CallToAction = () => {
+export const CallToAction = () => {
   return (
     <section className={`${styles.container}`}>
       <div className={styles.cta}>
@@ -28,7 +28,7 @@ const CallToAction = () => {
       </div>
       <div className={styles.imageBlock}>
         <Image
-          src={HOTTeam}
+          src={HOTTeamTwo}
           alt={APP_CONTENT.homepage.callToAction.ctaButton}
           className={styles.image}
         />
@@ -40,4 +40,3 @@ const CallToAction = () => {
   );
 };
 
-export default CallToAction;