Feature: Add json button to search page (#562)

* add json button ui to search page

* extract json_link method from annotator controller to application controller

* build the search page json link using json_link method

* move the search json button down besides the advanced options button

* remove this usage of api_params instead of direct params in search controller

---------

Co-authored-by: Syphax Bouazzouni <gs_bouazzouni@esi.dz>

app/assets/stylesheets/search.scss

@@ -57,6 +57,7 @@
 }
 .search-page-advanced-button{
   display: flex;
+  align-items: center;
 }
 .search-page-advanced-button :hover{
   cursor: pointer;

app/controllers/annotator_controller.rb

@@ -201,14 +201,6 @@ def empty_advanced_options
       params[:fast_context].nil? &&
       params[:lemmatize].nil?
   end
-
-
-  def json_link(url, optional_params)
-    base_url = "#{url}?"
-    filtered_params = optional_params.reject { |_, value| value.nil? }
-    optional_params_str = filtered_params.map { |param, value| "#{param}=#{value}" }.join("&")
-    return base_url + optional_params_str + "&apikey=#{$API_KEY}"
-  end
 
   def remove_special_chars(input)
     regex = /^[a-zA-Z0-9\s]*$/

app/controllers/application_controller.rb

@@ -718,6 +718,13 @@ def request_lang
     helpers.request_lang
   end
 
+  def json_link(url, optional_params)
+    base_url = "#{url}?"
+    filtered_params = optional_params.reject { |_, value| value.nil? }
+    optional_params_str = filtered_params.map { |param, value| "#{param}=#{value}" }.join("&")
+    return base_url + optional_params_str + "&apikey=#{$API_KEY}"
+  end
+
   private
   def not_found_record(exception)
     @error_message = exception.message

app/controllers/search_controller.rb

@@ -11,6 +11,7 @@ def index
     params[:query] = nil
     @advanced_options_open = false
     @search_results = []
+    @json_url = json_link("#{rest_url}/search", {})
 
     return if @search_query.empty?
 
@@ -19,6 +20,7 @@ def index
 
     @advanced_options_open = !search_params_empty?
     @search_results = aggregate_results(@search_query, results)
+    @json_url = json_link("#{rest_url}/search", params.permit!.to_h)
   end
 
   def json_search

app/helpers/application_helper.rb

@@ -28,6 +28,10 @@ def url_to_endpoint(url)
     endpoint
   end
 
+  def search_json_link(link = @json_url, style: '')
+    custom_style = "font-size: 50px; line-height: 0.5; margin-left: 6px; #{style}".strip
+    render IconWithTooltipComponent.new(icon: "json.svg",link: link, target: '_blank', title: t('fair_score.go_to_api'), size:'small', style: custom_style)
+  end
 
   def resolve_namespaces
     RESOLVE_NAMESPACE

app/views/search/index.html.haml

@@ -8,7 +8,7 @@
             = render Buttons::RegularButtonComponent.new(id:'search-page-button', value: "Search", variant: "primary", type: "submit") do |btn|
               = btn.icon_right do
                 = inline_svg_tag "icons/search.svg"
-            
+
 
         .search-page-advanced{'data-reveal-component-target': 'item', class: "#{@advanced_options_open ? '' : 'd-none'}"}
           .left
@@ -17,14 +17,14 @@
                 = t('search.advanced_options.search_language')
               .field
                 = search_language_selector(name: 'lang', selected: params[:lang])
-                
+
             .filter-container
               .title
                 = t("search.advanced_options.ontologies")
               .field
                 = ontologies_selector(id:'search_page_ontologies' ,name: 'ontologies[]', selected:  params[:ontologies]&.split(','))
 
-          .right 
+          .right
             .filter-container
               .title
                 = t("search.advanced_options.include_in_search_title")
@@ -40,20 +40,23 @@
                 = render(ChipsComponent.new(name: 'require_exact_match', label: t('search.advanced_options.show_only_values.exact_matches'),  checked:  params[:require_exact_match]))
                 = render(ChipsComponent.new(name: 'require_definition', label: t('search.advanced_options.show_only_values.classes_with_definitions'), checked: params[:require_definition]))
 
-        .search-page-options
-          - if @search_results
-            .search-page-number-of-results 
+        .search-page-options{class:  @search_results.empty? ? 'justify-content-end': ''}
+          - unless @search_results.empty?
+            .search-page-number-of-results
               = "#{t('search.match_in')} #{@search_results.length} #{t('search.ontologies')}"
-          .search-page-advanced-button.show-options{class: "#{@advanced_options_open ? 'd-none' : ''}",'data': {'action': 'click->reveal-component#show', 'reveal-component-target': 'showButton'}}
-            .icon
-              =inline_svg_tag 'icons/settings.svg'
-            .text
-              = t('search.show_advanced_options')
-          .search-page-advanced-button.hide-options{class: "#{@advanced_options_open ? '' : 'd-none'}", 'data': {'action': 'click->reveal-component#hide', 'reveal-component-target': 'hideButton'}}
-            .icon
-              =inline_svg_tag 'icons/hide.svg'
-            .text
-              = t('search.hide_advanced_options')
+          %div.d-flex
+            .search-page-json.mx-4
+              = search_json_link
+            .search-page-advanced-button.show-options{class: "#{@advanced_options_open ? 'd-none' : ''}",'data': {'action': 'click->reveal-component#show', 'reveal-component-target': 'showButton'}}
+              .icon
+                =inline_svg_tag 'icons/settings.svg'
+              .text
+                = t('search.show_advanced_options')
+            .search-page-advanced-button.hide-options{class: "#{@advanced_options_open ? '' : 'd-none'}", 'data': {'action': 'click->reveal-component#hide', 'reveal-component-target': 'hideButton'}}
+              .icon
+                =inline_svg_tag 'icons/hide.svg'
+              .text
+                = t('search.hide_advanced_options')
     - if @search_results
       .search-page-results-container
         - number = 0
@@ -69,7 +72,7 @@
                 - number = number + 1
                 - c.reuse(r[:root].merge(is_sub_component: true, number: number)) do |b|
                   - r[:descendants].each { |dd|  b.subresult(dd.merge(is_sub_component: true))}
-    
+
     - if @search_results.empty? && !@search_query.empty?
       .browse-empty-illustration
         %img{:src => "#{asset_path("empty-box.svg")}"}