Feature: Add agent display component (#404)

* Add agent tooltip in the summary page

* extract generate agent tooltip HTML to a function

* put back display_agent method, and extract agent_chip_componentt

* change generate_agent_tooltip function name

* make display_agent uses agent_chip_component

* add icon to agent chip component

* fix agent chip style

* fix when the agent is a string issue

* Make agent chip text truncate

* fix affliatinons issue in agent tooltip

* Treat the case when the agent have no affiliation in the agent tooltip

* remove scroll indicators from chips in summary page

* fix agent system tests

---------

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

app/assets/stylesheets/agent_tooltip.scss

@@ -0,0 +1,29 @@
+.agent-container{
+    display: flex;
+    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-right: 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/agents.scss

@@ -1,4 +1,29 @@
 .agents-inputs input {
   @extend .form-control !optional;
   height: 100% !important;
+}
+.agent-chip{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.agent-chip-circle svg{
+  height: 15px;
+}
+
+.agent-chip-circle{
+  height: 30px;
+  width: 30px;
+  background-color: rgba(128, 128, 128, 0.08);
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right:10px;
+}
+
+.agent-chip-name{
+  color: #8C8E8D;
+  font-size: 15px;
 }

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/components/layout/horizontal_list_component.rb

@@ -9,7 +9,7 @@ def call
     content_tag(:div, class: 'd-flex flex-wrap align-items-center') do
       out = ''
       elements.each do |element|
-        out = out +  content_tag(:div, element, class: 'mr-1 mb-1 text-truncate-scroll')
+        out = out +  content_tag(:div, element, class: 'mr-1 mb-1 text-truncate')
       end
       raw out
     end

app/components/nested_agent_search_input_component/nested_agent_search_input_component.html.haml

@@ -10,6 +10,9 @@
   - c.empty_state do
     = hidden_field_tag agent_field_name('',  @name_prefix+"[#{Array(@agents).size}]")
   - Array(@agents).each_with_index do |agent, i|
-    - if agent&.agentType
+    - if agent.is_a?(String)
+      - c.row do
+        = agent
+    - elsif agent&.agentType
       - c.row do
         = render partial: 'agents/agent_show', locals: {agent_id: i, agent: agent, name_prefix: @name_prefix, edit_on_modal: @edit_on_modal, parent_id: @parent_id}

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,68 @@ def agent_usage_error_display(error)
       details.values.join(', ').html_safe
     end.join('. ').html_safe
   end
+
+  def display_agent(agent, link: true)
+    agent_chip_component(agent)
+  end
+
+  def agent_tooltip(agent)
+    name = agent.name
+    email = agent.email
+    type = agent.agentType 
+    identifiers = display_identifiers(agent.identifiers, link: false)
+    #binding.pry
+    if agent.affiliations && agent.affiliations != []
+      affiliations = "affiliations: "
+      agent.affiliations.each do |affiliation|
+        affiliations = affiliations + affiliation.name + ". "
+      end
+    end
+    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 = generate_agent_tooltip(agent_icon, name, email, identifiers, affiliations)
+    return tooltip_html
+  end
+
+  def generate_agent_tooltip(agent_icon, name, email = nil, identifiers = nil, affiliations = nil)
+    content_tag(:div, class: 'agent-container') do
+      content_tag(:div, agent_icon, class: 'agent-circle') +
+      content_tag(:div) do
+        content_tag(:div, name, class: 'agent-name') +
+        content_tag(:div, email || '', class: 'agent-dependency') +
+        content_tag(:div, identifiers || '', class: 'agent-dependency') +
+        content_tag(:div, affiliations || '', class: 'agent-dependency')
+      end
+    end
+  end
+
+  def agent_chip_component(agent)
+    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 =  person_icon
+
+    if agent.is_a?(String)
+      name = agent
+      title = nil
+    else
+      name = agent.name
+      agent_icon = agent.agentType.eql?("organization") ? organization_icon : person_icon
+      title = agent_tooltip(agent)
+    end
+    render_chip_component(title, agent_icon, name)
+  end 
+
+
+  def render_chip_component(title,agent_icon,name)
+    render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: title , class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do 
+      content_tag(:div, class: 'agent-chip') do
+        content_tag(:div, agent_icon, class: 'agent-chip-circle') +
+        content_tag(:div, name, class: 'agent-chip-name text-truncate')
+      end   
+    end 
+  end
+
+
+
 end

app/views/agents/_agent_show.html.haml

@@ -7,7 +7,7 @@
     - if agent.id
       = hidden_field_tag agent_field_name(:id, agent_field_name), agent.id
 
-    = text_field_tag '', display_agent(agent, link: false), class: "form-control", disabled: true
+    =  display_agent(agent, link: false)
 
     - if current_user_admin? || agent.creator.eql?(current_user&.id.to_s)
       - if edit_on_modal

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

@@ -20,10 +20,8 @@
 
       = 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)
-
-
+          = agent_chip_component(v)
+
       = 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)

test/helpers/application_test_helpers.rb

@@ -33,6 +33,11 @@ def create_user(user , admin: false)
       existent_user
     end
 
+    def delete_users(ontologies = LinkedData::Client::Models::Ontology.all)
+      Array(ontologies).each do |o|
+        LinkedData::Client::Models::Ontology.find_by_acronym(o.acronym).first&.delete
+      end
+    end
     def delete_user(user)
       LinkedData::Client::Models::User.find_by_username(user.username).first&.delete
     end

test/system/agent_flows_test.rb

@@ -4,6 +4,7 @@ class AgentFlowsTest < ApplicationSystemTestCase
   include AgentHelper
 
   setup do
+    teardown
     @logged_user = fixtures(:users)[:john]
     @new_person = fixtures(:agents)[:agent1]
     @new_organization = fixtures(:agents)[:organization1]
@@ -12,7 +13,7 @@ class AgentFlowsTest < ApplicationSystemTestCase
 
   def teardown
     delete_agents
-    delete_user(@logged_user)
+    delete_users
   end
 
   test "go admin page and create an agent person and edit it" do
@@ -75,7 +76,7 @@ def create_agent_flow(new_agent, person_count: , organization_count:)
 
       new_agent.affiliations.map do |aff|
         aff["identifiers"] = aff["identifiers"].each{|x| x["schemaAgency"] = 'ORCID'}
-        assert_text display_agent(OpenStruct.new(aff), link: false)
+        assert_text aff['name']
       end
     end
   end
@@ -96,7 +97,7 @@ def edit_agent_flow(agent, person_count: , organization_count: )
 
       agent.affiliations.map do |aff|
         aff["identifiers"] = aff["identifiers"].each{|x| x["schemaAgency"] = 'ORCID'}
-        assert_text display_agent(OpenStruct.new(aff), link: false)
+        assert_text aff['name']
       end
     end
   end