Add agent tooltip in summary page

app/assets/stylesheets/agent_tooltip.scss

@@ -0,0 +1,30 @@
+.agent-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px;
+}
+.agent-circle{
+    width: 70px;
+    height: 70px;
+    background-color: var(--light-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 35px;
+    margin-bottom: 12px;
+}
+.agent-name{
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 3px;
+}
+.agent-dependency{
+    font-size: 16px;
+    font-weight: 400;
+    color: #767676;
+    margin-bottom: 3px;
+}
+.agent-type-icon path{
+    fill: var(--primary-color)
+}

app/assets/stylesheets/application.css.scss.erb

@@ -63,6 +63,7 @@
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";
+@import "agent_tooltip";
 
 <% if (ui_theme = $UI_THEME.to_s.parameterize).present? && File.exists?(Rails.root.join('app', 'assets', 'stylesheets', 'themes', ui_theme)) %>
   @import "themes/<%= ui_theme %>/main";

app/helpers/agent_helper.rb

@@ -95,17 +95,6 @@ def display_identifiers(identifiers, link: true)
     end.join(', ')
   end
 
-  def display_agent(agent, link: true)
-    return agent if agent.is_a?(String)
-
-    out = agent.name.to_s
-    identifiers = display_identifiers(agent.identifiers, link: link)
-    out = "#{out} ( #{identifiers} )" unless identifiers.empty?
-    affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: link) }.join(', ')
-    out = "#{out} (affiliations: #{affiliations})" unless affiliations.empty?
-    out
-  end
-
   def agent_field_name(name, name_prefix = '')
     name_prefix&.empty? ? name : "#{name_prefix}[#{name}]"
   end
@@ -166,4 +155,20 @@ def agent_usage_error_display(error)
       details.values.join(', ').html_safe
     end.join('. ').html_safe
   end
+
+  def agent_tooltip(agent)
+    name = agent.name
+    email = agent.email
+    type = agent.agentType 
+    identifiers = display_identifiers(agent.identifiers, link: false)
+    affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: false) }.join(', ')
+    person_icon = inline_svg_tag 'icons/person.svg' , class: 'agent-type-icon'
+    organization_icon = inline_svg_tag 'icons/organization.svg', class: 'agent-type-icon'
+    agent_icon = type == "organization" ? organization_icon : person_icon
+    tooltip_html = "<div class='agent-container'><div class='agent-circle'>#{agent_icon}</div><div class='agent-name'>#{name}</div><div class='agent-dependency'>#{email || ''}</div><div class='agent-dependency'>#{identifiers || ''}</div><div class='agent-dependency'>#{affiliations || ''}</div></div>"
+    return tooltip_html
+  end
+
+
+
 end

app/views/ontologies/sections/_metadata.html.haml

@@ -20,10 +20,9 @@
 
       = properties_dropdown('person_and_organization','Persons and organizations','', @agents_properties) do |values|
         = horizontal_list_container(values) do |v|
-          = render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: '', class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do
-            = display_agent(v, link: false)
-
-
+          = render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: agent_tooltip(v) , class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do
+            = v.name.to_s
+
       = properties_dropdown('link','Other links','Metadata properties that highlight the links enabling access to datasets, downloading semantic resources, etc', @links_properties) do |values|
         = horizontal_list_container(values) do |v|
           = render LinkFieldComponent.new(value: v, raw: true)