Use facets in the GBIF connector

src/assets/languageAssets/cs.js

@@ -88,6 +88,12 @@ Výsledky můžete také **sdílet 📤** a spolupracovat s ostatními uživatel
             apiEndpoint: 'API endpoint GBIF',
             howToContribute:
                 "Pokud chcete přispět k otevřeným datům pozorování biodiverzity agregovaným v GBIF, můžete využít kolaborativní platformy jako <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl{'@'}ntNet</a> nebo <a target='_blank' href='https://observation.org/'>Observation.org</a>.",
+            progress: {
+                fetching: 'Načítání pozorování...',
+                processing: 'Zpracování dat...',
+                enriching: 'Získávání informací o taxonech...',
+                finalizing: 'Dokončování...',
+            },
         },
         geonature: {
             api_endpoint: 'API endpoint GeoNature',

src/assets/languageAssets/de.js

@@ -88,6 +88,12 @@ Sie können Ihre Ergebnisse außerdem **teilen 📤**, um mit anderen Nutzern zu
             apiEndpoint: 'API-Adresse von GBIF',
             howToContribute:
                 "Wenn Sie zu den offenen Biodiversitätsbeobachtungsdaten beitragen möchten, die im GBIF aggregiert sind, können Sie kollaborative Plattformen wie <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl{'@'}ntNet</a> oder <a target='_blank' href='https://observation.org/'>Observation.org</a> nutzen.",
+            progress: {
+                fetching: 'Beobachtungen abrufen...',
+                processing: 'Daten verarbeiten...',
+                enriching: 'Taxon-Informationen abrufen...',
+                finalizing: 'Abschließen...',
+            },
         },
         geonature: {
             api_endpoint: 'API-Adresse von GeoNature',

src/assets/languageAssets/en.js

@@ -89,6 +89,12 @@ You can also **share your results 📤** to collaborate with other users.
             apiEndpoint: 'API endpoint of the GBIF',
             howToContribute:
                 "If you would like to contribute to the open biodiversity observation data aggregated in GBIF, you can use collaborative platforms such as <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl{'@'}ntNet</a> or <a target='_blank' href='https://observation.org/'>Observation.org</a>.",
+            progress: {
+                fetching: 'Fetching observations...',
+                processing: 'Processing data...',
+                enriching: 'Retrieving latest taxon information...',
+                finalizing: 'Finalizing...',
+            },
         },
         geonature: {
             api_endpoint: 'GeoNature  API endpoint',

src/assets/languageAssets/es.js

@@ -83,6 +83,12 @@ También puedes **compartir tus resultados 📤** para colaborar con otros usuar
             apiEndpoint: 'Punto final de la API de GBIF',
             howToContribute:
                 "Si desea contribuir a los datos abiertos de observaciones de biodiversidad agregados en GBIF, puede utilizar plataformas colaborativas como <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl{'@'}ntNet</a> o <a target='_blank' href='https://observation.org/'>Observation.org</a>.",
+            progress: {
+                fetching: 'Recuperando observaciones...',
+                processing: 'Procesando datos...',
+                enriching: 'Recuperando información de taxones...',
+                finalizing: 'Finalizando...',
+            },
         },
         geonature: {
             api_endpoint: 'Dirección de la API de GeoNature',

src/assets/languageAssets/fr.js

@@ -88,6 +88,12 @@ Vous pouvez également **partager vos résultats 📤** pour collaborer avec d'a
             apiEndpoint: "Adresse de l'API du GBIF",
             howToContribute:
                 "Si vous souhaitez contribuer aux données ouvertes d'observations de biodiversité agrégées dans le GBIF, vous pouvez utiliser des plateformes collaboratives comme <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl{'@'}ntNet</a> ou <a target='_blank' href='https://observation.org/'>Observation.org</a>.",
+            progress: {
+                fetching: 'Récupération des observations...',
+                processing: 'Traitement des données...',
+                enriching: 'Récupération des dernières infos sur les taxons...',
+                finalizing: 'Finalisation...',
+            },
         },
         geonature: {
             api_endpoint: "Adresse de l'API de GeoNature",

src/assets/languageAssets/it.js

@@ -89,6 +89,12 @@ Puoi anche **condividere i tuoi risultati 📤** per collaborare con altri utent
             apiEndpoint: 'Indirizzo API del GBIF',
             howToContribute:
                 "Se desideri contribuire ai dati aperti sulle osservazioni della biodiversità aggregati nel GBIF, puoi utilizzare piattaforme collaborative come <a target='_blank' href='https://www.inaturalist.org/'>iNaturalist</a>, <a target='_blank' href='https://plantnet.org/'>Pl@ntNet</a> o <a target='_blank' href='https://observation.org/'>Observation.org</a>.",
+            progress: {
+                fetching: 'Recupero delle osservazioni...',
+                processing: 'Elaborazione dei dati...',
+                enriching: 'Recupero delle informazioni sui taxon...',
+                finalizing: 'Finalizzazione...',
+            },
         },
         geonature: {
             api_endpoint: 'Indirizzo API di GeoNature',

src/components/commons/ProgressBar.vue

@@ -0,0 +1,120 @@
+<script setup>
+    import { ref, watch, computed } from 'vue';
+    import ParameterStore from '@/lib/parameterStore';
+
+    const { primaryColor } = ParameterStore.getInstance();
+
+    const props = defineProps({
+        progress: {
+            type: Number,
+            default: 0,
+            validator: (value) => value >= 0 && value <= 100,
+        },
+        message: {
+            type: String,
+            default: '',
+        },
+    });
+
+    const currentProgress = ref(props.progress);
+
+    watch(
+        () => props.progress,
+        (newVal) => {
+            currentProgress.value = newVal;
+        }
+    );
+
+    const progressWidth = computed(() => `${currentProgress.value}%`);
+    const primaryColorHex = computed(() =>
+        primaryColor.value ? `#${primaryColor.value}` : '#444444'
+    );
+</script>
+
+<template>
+    <div class="progress-container" data-testid="ProgressBar component">
+        <div class="progress-card">
+            <div class="progress-bar-wrapper">
+                <div class="progress-bar-background">
+                    <div
+                        class="progress-bar-fill"
+                        :style="{ width: progressWidth }"
+                    ></div>
+                </div>
+            </div>
+            <p v-if="message" class="progress-message">{{ message }}</p>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .progress-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 60px 0;
+    }
+
+    .progress-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: #ffffff;
+        border-radius: 18px;
+        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+        padding: 30px 50px;
+        transition: all 0.3s ease;
+        min-width: 320px;
+        max-width: 500px;
+    }
+
+    .progress-bar-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .progress-bar-background {
+        width: 100%;
+        height: 24px;
+        background: linear-gradient(to right, #f0f0f0, #e8e8e8);
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+        position: relative;
+    }
+
+    .progress-bar-fill {
+        height: 100%;
+        background: v-bind(primaryColorHex);
+        border-radius: 12px;
+        transition: width 0.3s ease;
+        box-shadow: 0 2px 8px v-bind('primaryColorHex + "4D"');
+        position: relative;
+    }
+
+    .progress-message {
+        margin-top: 16px;
+        margin-bottom: 0;
+        font-size: 1rem;
+        font-weight: 500;
+        color: #666;
+        text-align: center;
+        letter-spacing: 0.3px;
+    }
+
+    @media (max-width: 576px) {
+        .progress-card {
+            min-width: 280px;
+            padding: 25px 35px;
+        }
+
+        .progress-percentage {
+            font-size: 1rem;
+        }
+
+        .progress-message {
+            font-size: 0.9rem;
+        }
+    }
+</style>

src/components/core/filters/SourceFilter.vue

@@ -5,6 +5,7 @@
     import { getConnector } from '@/lib/connectors/utils';
     import { GeoNatureConnector } from '@/lib/connectors/geonature';
     import { GbifConnector } from '@/lib/connectors/gbif';
+    import { GbifFacetConnector } from '@/lib/connectors/gbiffacet';
     import { CONNECTORS } from '@/lib/connectors/connectors';
 
     const props = defineProps({
@@ -19,6 +20,7 @@
     const sourcesParams = {
         [CONNECTORS.GBIF]: new GbifConnector().getParamsSchema(),
         [CONNECTORS.GeoNature]: new GeoNatureConnector().getParamsSchema(),
+        [CONNECTORS.GBIF_FACET]: new GbifFacetConnector().getParamsSchema(),
     };
 
     const sourceName = ref(connector.value.name);

src/components/core/taxonList/TaxonDetailed.vue

@@ -23,10 +23,10 @@
                 :media="props.picture"
                 :alt="props.picture?.urlSource"
             >
-                <img
-                    :src="props.picture?.url"
+                <Image
+                    :imageUrl="props.picture?.url"
                     :alt="props.picture?.urlSource"
-                    data-testid="Taxon picture"
+                    testID="Taxon picture"
                 />
             </FullScreenImage>
             <AudioPlayer
@@ -45,7 +45,7 @@
         <div class="names">
             <div class="vernacular-name">
                 <StatusIcon
-                    v-if="props.status.status"
+                    v-if="props.status?.status"
                     :status="props.status.status"
                     :color="props.status.color"
                     :size="'1.2rem'"
@@ -122,18 +122,27 @@
         bottom: 10px;
         right: 10px;
         z-index: 2;
+        width: auto;
     }
 
-    img {
-        display: block;
+    .audio-overlay {
+        width: auto;
+    }
+
+    .image-container > :not(.audio-overlay):not(.copyright-overlay) {
         width: 100%;
-        height: auto;
-        aspect-ratio: 1;
-        object-fit: cover;
+    }
+
+    :deep(.image-wrapper) {
+        border-radius: 10px 10px 0px 0px;
+        -webkit-border-radius: 10px 10px 0px 0px;
+        -moz-border-radius: 10px 10px 0px 0px;
+    }
+
+    :deep(.image-wrapper img) {
         border-radius: 10px 10px 0px 0px;
         -webkit-border-radius: 10px 10px 0px 0px;
         -moz-border-radius: 10px 10px 0px 0px;
-        margin: 0 auto;
     }
 
     .statistics-wrapper {

src/components/core/taxonList/TaxonList.vue

@@ -81,6 +81,8 @@
         pageIndex,
         loadingObservations,
         loadingError,
+        loadingProgress,
+        loadingMessage,
     } = taxonManager;
 
     const speciesList = computed(() => searchResult.value.taxons);
@@ -168,6 +170,8 @@
                     <TaxonListMessages
                         :loading-error="loadingError"
                         :loading-observations="loadingObservations"
+                        :loading-progress="loadingProgress"
+                        :loading-message="loadingMessage"
                         :species-list="speciesList"
                         :filter-species-list="filteredSpecies"
                     />

src/components/core/taxonList/TaxonListMessages.vue

@@ -1,6 +1,7 @@
 <script setup>
     import { computed } from 'vue';
     import Loading from '@/components/commons/Loading.vue';
+    import ProgressBar from '@/components/commons/ProgressBar.vue';
     import ParameterStore from '@/lib/parameterStore';
 
     const parameterStore = ParameterStore.getInstance();
@@ -13,13 +14,31 @@
         loadingError: {
             type: Boolean,
         },
+        loadingProgress: {
+            type: Number,
+            default: 0,
+        },
+        loadingMessage: {
+            type: String,
+            default: '',
+        },
         speciesList: {
             type: Array,
         },
         filterSpeciesList: {
             type: Array,
         },
     });
+
+    // Determine if we should show progress bar or simple loading spinner
+    const showProgressBar = computed(
+        () => props.loadingObservations && props.loadingProgress > 0
+    );
+
+    const showLoading = computed(
+        () => props.loadingObservations && props.loadingProgress === 0
+    );
+
     // Calcul des états pour l'affichage des messages
     const noGeometry = computed(
         () =>
@@ -46,9 +65,19 @@
 
 <template>
     <div class="message">
+        <!-- Progress bar for connectors with progress reporting -->
+        <ProgressBar
+            v-if="showProgressBar"
+            :progress="props.loadingProgress"
+            :message="props.loadingMessage"
+            class="message-box"
+        />
+
+        <!-- Simple loading spinner for connectors without progress -->
         <Loading
+            v-if="showLoading"
             id="loadingObs"
-            :loadingStatus="props.loadingObservations"
+            :loadingStatus="true"
             class="message-box"
         />
 

src/components/core/taxonList/TaxonThumbnail.vue

@@ -47,7 +47,7 @@
             <div class="card-img-overlay">
                 <div class="card-title">
                     <StatusIcon
-                        v-if="props.status.status"
+                        v-if="props.status?.status"
                         :status="props.status.status"
                         :color="props.status.color"
                         :size="'1rem'"