Merge branch 'vue3-migration-2492' of https://github.com/FAIRsharing/fairsharing.github.io into vue3-migration-2492

Author: prakhyatox

documentation/html/quicksearch.html

@@ -110,7 +110,7 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
             &lt;v-autocomplete
               v-model="search"
               :color="color"
-              :items="flattenedTree"
+              :items="uniqueSearchItems"
               :label="`Search ${selectedOntology}s`"
               clearable
               hide-details
@@ -154,8 +154,8 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
                     :class="[
                       'chip-mimic mr-2',
                       item.isTarget
-                        ? 'bg-primary text-white font-weight-bold elevation-2'
-                        : 'text-grey-darken-2 border-grey',
+                        ? `bg-${color} text-white font-weight-bold elevation-2 border-0`
+                        : `text-${color} border-${color}`,
                     ]"
                   >
                     {{ item.name }}
@@ -236,6 +236,16 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
     };
   },
   computed: {
+    ...mapState("editor", ["colors"]),
+    // We do NOT map activeTerms/openedTerms directly to avoid undefined errors
+    ...mapState("ontologyBrowser", [
+      "tree",
+      "records",
+      "loadingData",
+      "flattenedTree",
+      "pagination",
+      "selectedTerm",
+    ]),
     selectedOntology() {
       return this.$route.params.id;
     },
@@ -245,7 +255,6 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
     color() {
       return this.colors[this.selectedOntology];
     },
-
     term() {
       const qTerm = this.$route.query["term"];
       if (!qTerm) return null;
@@ -254,18 +263,6 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
           node.name.toLowerCase() === decodeURIComponent(qTerm).toLowerCase(),
       );
     },
-
-    ...mapState("editor", ["colors"]),
-    // We do NOT map activeTerms/openedTerms directly to avoid undefined errors
-    ...mapState("ontologyBrowser", [
-      "tree",
-      "records",
-      "loadingData",
-      "flattenedTree",
-      "pagination",
-      "selectedTerm",
-    ]),
-
     // Manual State mapping with Safety Checks
     activeTerms() {
       return this.$store.state.ontologyBrowser.activeTerms || [];
@@ -327,6 +324,25 @@ <h1 class="page-title">Source: views/Browsers/OntologyBrowser.vue</h1>
       traverse(sourceTree);
       return result;
     },
+
+    /**
+     * UNIQUE SEARCH ITEMS
+     * Filters the flattenedTree to ensure each term ID appears only once
+     * in the Autocomplete dropdown.
+     */
+    uniqueSearchItems() {
+      const items = this.flattenedTree || [];
+      const seen = new Set();
+
+      return items.filter((item) => {
+        const id = item.identifier;
+        if (seen.has(id)) {
+          return false; // Duplicate found, skip it
+        }
+        seen.add(id);
+        return true; // New item, keep it
+      });
+    },
   },
   watch: {
     // URL Term Watcher