Feature: Update search input in homepage and topnav to use the indexe…

…d content (#505) * fix styling warning of flex "end" deperection * fix search input text overflowing out of the container * add search content by rdfs label in additoon of skos prefLabel * implement search redirection to the good page * use ontologies_content_autocomplete helper in homepage and topnav * add the search ontology content route * clean unused agent search code from this branch * move the code in search helper to a concern * re-integrate search input loader code to show a loader while searching
ontoportal-lirmm · Apr 10, 2024 · 067bb7e · 067bb7e
1 parent b18f6a1
commit 067bb7e
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 30 deletions.
diff --git a/app/assets/stylesheets/annotator.scss b/app/assets/stylesheets/annotator.scss
@@ -45,7 +45,7 @@
 }
 .annotator-page-text-area .insert-sample-text-button{
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   padding: 10px 20px 20px 20px;
 }
 .annotator-page-text-area .insert-sample-text-button .button{

diff --git a/app/assets/stylesheets/components/progress_pages.scss b/app/assets/stylesheets/components/progress_pages.scss
@@ -37,7 +37,7 @@
 
 .progress-pages-container .progress-item:last-of-type {
     & > div {
-        align-items: end;
+        align-items: flex-end;
         left: -23px;
     }
 }

diff --git a/app/assets/stylesheets/components/search_input.scss b/app/assets/stylesheets/components/search_input.scss
@@ -11,6 +11,7 @@
 
 .search-content{
   display: flex;
+  flex-wrap: wrap;
   color: #777777 !important;
   justify-content: space-between;
   padding: 20px 20px;
@@ -26,10 +27,14 @@
 .search-content div img{
   width: 12px;
 }
+
 .search-content div p{
   font-weight: 300;
-  margin-left: 10px;
   margin-bottom: 0;
+  word-break: break-word;
+}
+.search-content div small {
+  word-break: break-word;
 }
 
 .search-dropdown-active{
@@ -38,6 +43,7 @@
 
 .search-element{
   margin-bottom: 0;
+  max-width: 280px;
 }
 
 .searched-elements{
@@ -49,24 +55,40 @@
 
 .home-search-button{
   position: absolute;
-  top: 42px;
-  right: 20px;
+  top: 38px;
+  right: 12px;
+}
+
+.home-search-button svg{
   width: 15px;
   height: 15px;
   cursor: pointer;
 }
-.home-search-button path{
+.home-search-button svg path{
   fill: var(--primary-color);
 }
 .home-search-button.search-input-nav-icon{
   position: absolute;
-  top: 11px;
-  right: 8px;
+  top: 4px;
+  right: 6px;
+  z-index: 99;
+}
+.home-search-button.search-input-nav-icon svg{
   width: 11px;
   height: 11px;
   cursor: pointer;
-  z-index: 99;
 }
-.home-search-button.search-input-nav-icon path{
+
+.home-search-button.search-input-nav-icon svg path{
   fill: white;
 }
+.search-component-loader{
+  padding-top: 4px;
+  padding-right: 2px;
+  color: var(--primary-color); 
+}
+.home-search-button.search-input-nav-icon .search-component-loader{
+  margin-top: 0;
+  padding-right: 0;
+  color: white;
+}
diff --git a/app/assets/stylesheets/recommender.scss b/app/assets/stylesheets/recommender.scss
@@ -52,7 +52,7 @@
 }
 .recommender-page-text-area .insert-sample-text-button{
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     padding: 20px;
 }
 .recommender-page-text-area .insert-sample-text-button .button{
@@ -176,7 +176,7 @@
 }
 .recommender-result-highlighted{
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
 }
 .recommender-page-text-area-results a{
     font-weight: 600;

diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
@@ -11,8 +11,11 @@
 }
 
 .search-page-input{
-  display: flex;
-  margin-bottom: 25px;
+  position: relative;
+  padding-bottom: 80px;
+  .search-container{
+    top:65px;
+  }
 }
 .search-page-input input{
   border-radius: 8px;

diff --git a/app/components/agent_search_input_component/agent_search_input_component.html.haml b/app/components/agent_search_input_component/agent_search_input_component.html.haml
@@ -6,6 +6,6 @@
   - s.template do
     %a{href: "LINK", class: "search-content", 'data-turbo-frame': '_self'}
       %p.search-element.home-searched-ontology
-        NAME(ACRONYM)
+        NAME (IDENTIFIERS)
       %p.home-result-type
         TYPE
diff --git a/app/components/search_input_component/search_input_component.html.haml b/app/components/search_input_component/search_input_component.html.haml
@@ -6,11 +6,18 @@
   'data-search-input-scroll-down-value': @scroll_down.to_s,
   'data-search-input-selected-item-value': 0
   }
+
   - if @search_icon_type
-    %a{href: '/search', 'data-search-input-target': 'button'}
-      = inline_svg_tag 'arrow-right.svg', class: "home-search-button #{nav_icon_class}"
+    %div{class: "home-search-button #{nav_icon_class}"}
+      %a{href: '/search', 'data-search-input-target': 'button'}
+        .search-component-arrow
+          = inline_svg_tag 'arrow-right.svg'
+      .search-component-loader.d-none{'data-search-input-target': 'loader'}
+        = render LoaderComponent.new(small: true)
   - else
+    %a.d-none{'data-search-input-target': 'loader'}
     %a.d-none{'data-search-input-target': 'button'}
+
   = render Input::InputFieldComponent.new(name: @name, placeholder: @placeholder,
                                             data: {'action': 'input->search-input#search blur->search-input#blur keydown.down->search-input#arrow_down keydown.up->search-input#arrow_up keydown.enter->search-input#enter_key',
                                             'search-input-target': 'input'})

diff --git a/app/components/search_input_component/search_input_component_controller.js b/app/components/search_input_component/search_input_component_controller.js
@@ -1,9 +1,10 @@
 import {Controller} from "@hotwired/stimulus"
 import useAjax from "../../javascript/mixins/useAjax";
+import debounce from 'debounce'
 
 // Connects to data-controller="search-input"
 export default class extends Controller {
-    static targets = ["input", "dropDown", "actionLink", "template", "button"]
+    static targets = ["input", "dropDown", "actionLink", "template", "button", "loader"]
     static values = {
         items: Array,
         ajaxUrl: String,
@@ -19,11 +20,18 @@ export default class extends Controller {
         this.dropDown = this.dropDownTarget
         this.actionLinks = this.actionLinkTargets
         this.items = this.itemsValue
+        this.search = debounce(this.search.bind(this), 100);
     }
 
     search() {
         this.selectedItemValue = 0
-        this.#searchInput()
+        this.loaderTarget.classList.remove("d-none")
+        this.buttonTarget.classList.add("d-none")
+        this.searchInput()
+    }
+
+    searchInput() {
+        this.#fetchItems()
     }
 
     prevent(event){
@@ -74,7 +82,7 @@ export default class extends Controller {
         } else {
             useAjax({
                 type: "GET",
-                url: this.ajaxUrlValue + this.#inputValue(),
+                url: this.ajaxUrlValue + encodeURIComponent(this.#inputValue()),
                 dataType: "json",
                 success: (data) => {
                     this.items = data.map(x => { return {...x, link: (this.itemLinkBaseValue + x[this.idKeyValue])}} )
@@ -89,6 +97,8 @@ export default class extends Controller {
     }
 
     #renderLines() {
+        this.loaderTarget.classList.add("d-none")
+        this.buttonTarget.classList.remove("d-none")
         const inputValue = this.#inputValue();
         let results_list = []
         if (inputValue.length > 0) {
@@ -112,9 +122,8 @@ export default class extends Controller {
 
                 let text =  Object.values(item).reduce((acc, value) => acc + value, "")
 
-
                 // Check if the item contains the substring
-                if (text.toLowerCase().includes(inputValue.toLowerCase())) {
+                if (!this.cacheValue || text.toLowerCase().includes(inputValue.toLowerCase())) {
                     results_list.push(item);
                     breaker = breaker + 1
                 }
@@ -149,13 +158,9 @@ export default class extends Controller {
                 value  = value.toString().split('/').slice(-1)
             }
             const regex = new RegExp('\\b' + key + '\\b', 'gi');
-            string =  string.replace(regex, value.toString())
+            string =  string.replace(regex, value ? value.toString() : "")
         })
 
         return new DOMParser().parseFromString(string, "text/html").body.firstElementChild
     }
-
-    #searchInput() {
-        this.#fetchItems()
-    }
 }