Feature: Add concepts mappings button in search page results (#569)

* add mappings to concepts search results

* fix mapping count in concept page

* add new more from this ontology icon

* move concept_mappings_loader function to mappings helper

* remove indesired comment from _concept_mappings.html.haml file

* put url escape functions in a separate helper

app/assets/stylesheets/components/tabs_container.scss

@@ -21,7 +21,7 @@
   position: relative;
 }
 
-.tabs-container .tab-items div {
+.tabs-container .tab-items > div {
   font-size: 16px;
   font-weight: 400;
   color: #5e5e5e;

app/assets/stylesheets/concepts.scss

@@ -157,3 +157,7 @@ div.synonym-change-request button {
   color: var(--gray-color);
   margin-top: 10px;
 }
+
+.concepts-mapping-count .d-flex{
+  display: inline !important;
+}

app/components/display/search_result_component.rb

@@ -1,6 +1,6 @@
 class Display::SearchResultComponent < ViewComponent::Base
+  include UrlsHelper
   include ModalHelper
-
   renders_many :subresults, Display::SearchResultComponent
   renders_many :reuses, Display::SearchResultComponent
   def initialize(number: 0,title: nil, ontology_acronym: nil ,uri: nil, definition: nil, link: nil,  is_sub_component: false)
@@ -34,6 +34,21 @@ def details_button
       end
   end
 
+  def mappings_button
+    link_to_modal(nil, "/ajax/mappings/get_concept_table?ontologyid=#{@ontology_acronym}&conceptid=#{escape(@uri)}&type=modal", data: { show_modal_title_value: @title, show_modal_size_value: 'modal-xl' }) do
+      content_tag(:div, class: 'button') do
+        inline_svg_tag('icons/ontology.svg') +
+        content_tag(:div, class: 'text d-flex') do
+          render(TurboFrameComponent.new(id: 'mapping_count', src: "/ajax/mappings/get_concept_table?ontologyid=#{@ontology_acronym}&conceptid=#{escape(@uri)}", loading: "lazy")) do |t|
+            t.loader do
+             render LoaderComponent.new(small: true)
+            end
+          end + content_tag(:div, 'mappings', class: 'ml-1')
+        end
+      end
+    end
+  end
+
   def visualize_button
       link_to_modal(nil, "/ajax/biomixer/?ontology=#{@ontology_acronym}&conceptid=#{@uri}", data: { show_modal_title_value: @title, show_modal_size_value: 'modal-xl' }) do
         content_tag(:div, class: 'button') do

app/components/display/search_result_component/search_result_component.html.haml

@@ -11,8 +11,9 @@
     .actions
         = details_button
         = visualize_button
+        = mappings_button
         - if subresults?
-            = reveal_ontologies_button("#{subresults.size} #{t('search.result_component.more_from_ontology')}", sub_ontologies_id, 'icons/ontology.svg')
+            = reveal_ontologies_button("#{subresults.size} #{t('search.result_component.more_from_ontology')}", sub_ontologies_id, 'icons/three-dots.svg')
         - if reuses?
             = reveal_ontologies_button("#{t('search.result_component.reuses_in')} #{reuses.size} ontologies", reuses_id, 'icons/reuses.svg')
     - if subresults?
@@ -28,5 +29,4 @@
             .search-result-sub-components
                 - reuses.each do |reuse|
                     .search-result-sub-component
-                        = reuse
-
+                        = reuse

app/controllers/mappings_controller.rb

@@ -161,13 +161,9 @@ def get_concept_table
     @concept = @ontology.explore.single_class({ full: true }, params[:conceptid])
 
     @mappings = @concept.explore.mappings
-
+    @type = params[:type]
     @delete_mapping_permission = check_delete_mapping_permission(@mappings)
-    render turbo_stream: [
-      replace('mapping_count') { "#{@mappings.size}" },
-      replace('concept_mappings', partial: 'mappings/concept_mappings')
-    ]
-
+    render partial: 'mappings/concept_mappings', layout: false
   end
 
   def new

app/helpers/application_helper.rb

@@ -9,7 +9,7 @@ module ApplicationHelper
   REST_URI = $REST_URL
   API_KEY = $API_KEY
 
-  include ModalHelper, MultiLanguagesHelper
+  include ModalHelper, MultiLanguagesHelper, UrlsHelper
 
   RESOLVE_NAMESPACE = {:omv => "http://omv.ontoware.org/2005/05/ontology#", :skos => "http://www.w3.org/2004/02/skos/core#", :owl => "http://www.w3.org/2002/07/owl#",
                        :rdf => "http://www.w3.org/1999/02/22-rdf-syntax-ns#", :rdfs => "http://www.w3.org/2000/01/rdf-schema#", :metadata => "http://data.bioontology.org/metadata/",
@@ -92,14 +92,6 @@ def encode_param(string)
     CGI.escape(string)
   end
 
-  def escape(string)
-    CGI.escape(string) if string
-  end
-
-  def unescape(string)
-    CGI.unescape(string) if string
-  end
-
   def clean(string)
     string = string.gsub("\"",'\'')
     return string.gsub("\n",'')
@@ -642,4 +634,5 @@ def cancel_button_component(class_name: nil, id: , value:, data: nil)
       end
     end
   end
+
 end

app/helpers/mappings_helper.rb

@@ -198,4 +198,18 @@ def get_mappings_target
   def type?(type)
     @mapping_type.nil? && type.eql?('internal') || @mapping_type.eql?(type)
   end
+
+  def concept_mappings_loader(ontology_acronym: ,concept_id: )
+    content_tag(:span, id: 'mapping_count') do
+      concat(content_tag(:div, class: 'concepts-mapping-count ml-1 mr-1') do
+        render(TurboFrameComponent.new(
+          id: 'mapping_count',
+          src: "/ajax/mappings/get_concept_table?ontologyid=#{ontology_acronym}&conceptid=#{CGI.escape(concept_id)}",
+          loading: 'lazy'
+        )) do |t|
+          concat(t.loader { render(LoaderComponent.new(small: true)) })
+        end
+      end)
+    end
+  end
 end

app/helpers/urls_helper.rb

@@ -0,0 +1,9 @@
+module UrlsHelper
+    def escape(string)
+        CGI.escape(string) if string
+    end
+
+    def unescape(string)
+        CGI.unescape(string) if string
+    end
+end

app/views/concepts/_show.html.haml

@@ -30,12 +30,12 @@
           (
           %span#note_count= @notes.length
           )
-
       - c.item(id: 'mappings', path: '#mappings') do
-        #{t('concepts.mappings')}
-        (
-        %span#mapping_count= 'loading'
-        )
+        .d-flex
+          #{t('concepts.mappings')}
+          (
+          = concept_mappings_loader(ontology_acronym: @ontology.acronym, concept_id: @concept.id)
+          )
 
       - if @enable_ontolobridge
         - c.item(title: t('concepts.new_term_requests'), path: '#request_term')

app/views/mappings/_concept_mappings.html.haml

@@ -1,9 +1,7 @@
--# NOTES on control over mapping deletion:
--# deleteMappings() is a callback that is called by "#delete_mappings_button" created below.
--# The appearance of that button is controlled by updateMappingDeletePermissions(), which
--# relies on @delete_mapping_permission in /app/views/mappings/_mapping_table.html.haml; which,
--# in turn, is set by /app/controllers/application_controller.check_delete_mapping_permission()
-= turbo_frame_tag 'concept_mappings' do
+= turbo_frame_tag 'mapping_count' do
+  = "#{@mappings.size}"
+
+= turbo_frame_tag @type.eql?('modal') ? 'application_modal_content' : 'concept_mappings' do
   %div{:style => "padding: 1%; width: 98%"}
     - if session[:user].nil?
       = link_to "Create New Mapping", "/login?redirect=/ontologies/#{@ontology.acronym}/?p=classes&t=mappings&conceptid=#{escape(@concept.id)}", :method => :get, :class => "btn btn-default mb-3"