From 6b12c324704720861ebfdd0c6fe3865433ac93bc Mon Sep 17 00:00:00 2001 From: Bilel Kihal <61744974+Bilelkihal@users.noreply.github.com> Date: Wed, 12 Jun 2024 08:54:54 +0200 Subject: [PATCH] Feature: Add back slices (#598) * Add slices section to home page * Update the design of the slice top notice bar * fix home slice name styles * fix slices error on home page, when there are no slices available * make the annotator support slices * make browse page compatible with slices * update home slices section to include the number of ontologies per slice and the description * make mappings page supports slices * rearrange home page sections to be in this order: slices, ontoportal instances then collaborations * remove unnecessary code in submission filter file * Adjust the slice link to comply with the production URL * update home page slices section style * add a description to the home page slice section * update home page slices section style * update ontoportal instances and support home sections styles * change the button of add new slice to suggest a new group/slice in the home page * update slices descriptive texti in the home page * add a description for ontoportal instances in the home page * move home_ontoportal_tooltip to home helper * add ontoportal links in config file * remove http from slice link to make it work with https * add slice notice to lang local files * remove mappings statistics slices support in the UI cause it's already done in the back * update ontoportal website links to be upper case * fix slices https issue --------- Co-authored-by: Syphax bouazzouni --- app/assets/images/icons/slices.svg | 4 + app/assets/stylesheets/home.scss | 74 +++++++++++++++++-- app/assets/stylesheets/notice.scss | 23 ++++++ .../stylesheets/theme-variables.scss.erb | 2 +- app/controllers/annotator_controller.rb | 17 ++++- app/controllers/application_controller.rb | 1 + app/controllers/home_controller.rb | 1 + app/controllers/mappings_controller.rb | 1 + app/helpers/home_helper.rb | 6 ++ app/views/home/index.html.haml | 55 ++++++++++---- app/views/layouts/_notices.html.haml | 27 +++---- config/bioportal_config_env.rb.sample | 4 +- config/locales/en.yml | 5 ++ config/locales/fr.yml | 5 ++ 14 files changed, 186 insertions(+), 39 deletions(-) create mode 100644 app/assets/images/icons/slices.svg diff --git a/app/assets/images/icons/slices.svg b/app/assets/images/icons/slices.svg new file mode 100644 index 0000000000..e92cb02f9d --- /dev/null +++ b/app/assets/images/icons/slices.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss index 327e0ed070..9965d2bfd5 100644 --- a/app/assets/stylesheets/home.scss +++ b/app/assets/stylesheets/home.scss @@ -150,7 +150,59 @@ i.fa.fa-caret-square-o-down { margin-bottom: 5px; font-weight: 700; } - +.home-section-title{ + display: flex; + flex-direction: column; + align-items: start; +} +.home-section-title .text{ + font-size: 20px; + font-weight: 600; + margin-bottom: 0; +} +.home-slice > a{ + display: flex; + align-items: center; +} +.home-slice-icon{ + display: flex; + flex-direction: column; + align-items: center; +} +.home-slice-icon svg{ + width: 40px; + height: 40px; +} +.home-slices-container{ + display: flex; + flex-wrap: wrap; + margin-top: 20px; +} +.home-section-description{ + color: #888888; +} +.home-slice{ + border: 1px solid var(--primary-color); + border-radius: 8px; + padding: 4px 15px; + margin-right: 20px; + margin-bottom: 20px; +} +.home-ontoportal-instances{ + margin-top: 50px; + background: #FBFBFB; + width: 100%; + display: flex; + justify-content: center; +} +.ontoportal-instances-container{ + padding: 0 50px; + width: 1248px; + padding-bottom: 20px; +} +.home-section-title.ontoportal{ + margin-top: 20px; +} .home-section-line{ width: 60px; margin-top: 3px; @@ -169,17 +221,26 @@ i.fa.fa-caret-square-o-down { } .home-statistics-container > div { display: flex; - align-items: center; + align-items: start; + justify-content: center; flex-wrap: wrap; } .home-agroportal-figures{ margin-bottom: 20px; } - +.home-slice-name{ + font-size: 16px; + font-weight: 400; + margin-left: 10px; +} +.home-slice-ontologies{ + font-size: 18px; + font-weight: 500; + margin-bottom: -18px; +} .home-statistics-container > div > p { font-size: 20px; font-weight: 600; - margin-left: 18px; margin-bottom: 0; } .home-statistics-item{ @@ -414,7 +475,6 @@ i.fa.fa-caret-square-o-down { } .home-support-items{ display: flex; - justify-content: center; flex-wrap: wrap; img{ object-fit: scale-down; @@ -429,8 +489,8 @@ i.fa.fa-caret-square-o-down { border-radius: 50%; display: block; } -.home-support-items > *:not(:first-child){ - margin-left: 40px; +.home-support-items > div, .home-support-items > a { + margin-right: 40px; } .home-support-items a{ margin-bottom: 40px; diff --git a/app/assets/stylesheets/notice.scss b/app/assets/stylesheets/notice.scss index c691896538..93dd13e0ef 100644 --- a/app/assets/stylesheets/notice.scss +++ b/app/assets/stylesheets/notice.scss @@ -14,3 +14,26 @@ div#notice_message { } } +.slice-notice-bar-container{ + background-color: var(--warning-color); + display: flex; + justify-content: center; +} +.slice-notice-bar{ + width: var(--container-max-width); + padding: 10px 40px; + display: flex; + justify-content: space-between; + align-items: center; + color: white; +} +.slice-notice-bar>div{ + display: flex; +} +.slice-notice-bar .slice-name{ + margin-left: 5px; + font-weight: 600; +} +.slice-notice-bar .warning-button.primary-button{ + background-color: #efb300 !important; +} diff --git a/app/assets/stylesheets/theme-variables.scss.erb b/app/assets/stylesheets/theme-variables.scss.erb index a76576e39b..0f87e44435 100644 --- a/app/assets/stylesheets/theme-variables.scss.erb +++ b/app/assets/stylesheets/theme-variables.scss.erb @@ -39,7 +39,7 @@ // common variables :root{ --error-color: #EB4335; - --warning-color: #e48c11; + --warning-color: #F2BE22; --gray-color: #888888; --success-color: #2DC54E; --admin-color: #145FF4; diff --git a/app/controllers/annotator_controller.rb b/app/controllers/annotator_controller.rb index aabf5ecf29..a1a4011d37 100644 --- a/app/controllers/annotator_controller.rb +++ b/app/controllers/annotator_controller.rb @@ -72,8 +72,23 @@ def annotator_results(uri) else @results_table_header.push(t('annotator.score')) end - annotations = LinkedData::Client::HTTP.get(uri.dup.to_s, api_params) + + # if we are in a slice, pass the ontologies of this slice in the params + + if at_slice? + slice_ontologies_acronyms = @subdomain_filter[:ontologies].map{ |id| link_last_part(id)} + if api_params[:ontologies] + selected_ontolgies = api_params[:ontologies].split(',') + filtred_ontologies = selected_ontolgies.select{ |ontology| slice_ontologies_acronyms.include?(ontology) } + else + filtred_ontologies = slice_ontologies_acronyms + end + api_params[:ontologies] = filtred_ontologies.join(',') + end + + annotations = LinkedData::Client::HTTP.get(uri, api_params) @ontologies = LinkedData::Client::Models::Ontology.all({:include_views => true}).map{ |o| [o.id.to_s, o]}.to_h + @semantic_types = get_semantic_types @results = [] annotations.each do |annotation| diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 4d5f32984f..6d2305ce64 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -123,6 +123,7 @@ def domain_ontology_set @subdomain_filter[:active] = true @subdomain_filter[:name] = slice.name @subdomain_filter[:acronym] = slice.acronym + @subdomain_filter[:ontologies] = slice.ontologies end end diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index 7c7492dbe4..4519adb19e 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -14,6 +14,7 @@ def index metrics = metrics.each_with_object(Hash.new(0)) do |h, sum| h.to_hash.slice(:classes, :properties, :individuals).each { |k, v| sum[k] += v } end + @slices = LinkedData::Client::Models::Slice.all @cls_count = metrics[:classes] @individuals_count = metrics[:individuals] diff --git a/app/controllers/mappings_controller.rb b/app/controllers/mappings_controller.rb index e6c9fabd4b..b1bcfc8c32 100644 --- a/app/controllers/mappings_controller.rb +++ b/app/controllers/mappings_controller.rb @@ -40,6 +40,7 @@ def index end @options[select_text] = ontology_acronym end + @options = @options.sort @options.unshift([]) diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb index 1be7758612..0f984002b0 100644 --- a/app/helpers/home_helper.rb +++ b/app/helpers/home_helper.rb @@ -30,4 +30,10 @@ def discover_ontologies_button end end + def home_ontoportal_tooltip + ontoportal_link = link_to("(#{$ONTOPORTAL_WEBSITE_LINK})", $ONTOPORTAL_WEBSITE_LINK, target: '_blank') + github_link = link_to("(#{$ONTOPORTAL_GITHUB_REPO})", $ONTOPORTAL_GITHUB_REPO, target: '_blank') + content_tag(:div, t('home.ontoportal_description', ontoportal_link: ontoportal_link, github_link: github_link).html_safe, style: "max-width: 600px;") + end + end \ No newline at end of file diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 7a010b73da..223141b4b1 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -176,20 +176,38 @@ .home-statistics-link.justify-content-end = link_to t("home.see_details"),'/statistics', target: "_blank" - .home-section - .home-statistics-container - .home-support-title - %p= t('home.support_and_collaborations') + - if @slices + .home-section + .home-section-title + .text + = "#{portal_name} slices" %hr.home-section-line/ - .home-support-items - - $HOME_PAGE_LOGOS&.each do |logo| - %a{href:logo[:url], target: "_blanc"} - %img{src: asset_path(logo[:img_src])} - - .home-section - .home-statistics-container - .home-support-title - %p= t('home.ontoportal_instances') + .home-section-description + .div + = t('home.slices_description') + .home-slices-container + - @slices.each do |slice, index| + - slice_link = "https://#{slice.acronym}.#{$UI_URL.sub("https://", "")}" + .home-slice{'data-controller': 'tooltip', title: content_tag(:div, slice.description, style: 'max-width: 200px')} + = link_to slice_link, target: '_blank' do + .home-slice-icon + .home-slice-ontologies + = slice.ontologies.length + = inline_svg 'icons/slices.svg', width: "70", height: "70" + + .home-slice-name + = "#{slice.name} (#{slice.acronym})" + = render Buttons::RegularButtonComponent.new(id:'regular-button', value: t('home.suggest_slice'), variant: "secondary", state: "regular", href: '/feedback') do |btn| + - btn.icon_right do + = inline_svg_tag "icons/plus.svg" + + .home-ontoportal-instances + .ontoportal-instances-container + .home-section-title.ontoportal + .d-flex.align-items-center + .text.mr-2 + = t('home.ontoportal_instances') + = render Display::InfoTooltipComponent.new(text: home_ontoportal_tooltip) %hr.home-section-line/ .home-support-items - $PORTALS_INSTANCES&.each do |portal| @@ -198,7 +216,16 @@ = inline_svg 'logo-white.svg', width: "35", height: "26" %p{style: "color: #{portal[:color]}"} = portal[:portal] - + + .home-section + .home-section-title + .text + = t('home.support_and_collaborations') + %hr.home-section-line/ + .home-support-items + - $HOME_PAGE_LOGOS&.each do |logo| + %a{href:logo[:url], target: "_blanc"} + %img{src: asset_path(logo[:img_src])} :javascript function submitAnnotator(){ diff --git a/app/views/layouts/_notices.html.haml b/app/views/layouts/_notices.html.haml index 7d99b276eb..8969a67d03 100644 --- a/app/views/layouts/_notices.html.haml +++ b/app/views/layouts/_notices.html.haml @@ -6,21 +6,18 @@ - do_not_display_subdomain_info_here = Set.new(["homeall_resources"]) - if at_slice? && !do_not_display_subdomain_info_here.include?("#{controller.controller_name}#{controller.action_name}") - .subdomain_info{:style => "margin: 13px; padding: 5px; border: 1px solid gray; font-size:14px; background-color: #ffffcc;"} - %p{:style => "text-align: left; margin-bottom: 0;"} - - query_string = request.query_string.empty? ? "" : "?#{request.query_string}" - You are viewing the - %b= @subdomain_filter[:name] - %a.pop_window{:href => "help?pop=true#slice_definition", :target => "_blank"} - = $SITE - = t('layout.notices.slice') - = t('layout.notices.at') - = succeed "." do - %b= request.host - = $SITE - = succeed "." do - %a{:href => "#{$UI_URL}#{request.path}#{query_string}"} - = t('layout.notices.visit_the_site') + .slice-notice-bar-container + .slice-notice-bar + %div + .title + = t('home.viewing_slice') + .slice-name + = @subdomain_filter[:name] + .view-full-site-button + - query_string = request.query_string.empty? ? "" : "?#{request.query_string}" + = render Buttons::RegularButtonComponent.new(id:'slices-view-full-site', value: t('home.view_full_site'), variant: "primary", href: "#{$UI_URL}#{request.path}#{query_string}", color: 'warning', size: "slim") do |btn| + = btn.icon_right do + = inline_svg_tag "arrow-right.svg" #site-notice - message_name = "" - unless $SITE_NOTICE.nil? || $SITE_NOTICE.empty? diff --git a/config/bioportal_config_env.rb.sample b/config/bioportal_config_env.rb.sample index 90e7aeb648..277b972015 100644 --- a/config/bioportal_config_env.rb.sample +++ b/config/bioportal_config_env.rb.sample @@ -258,6 +258,8 @@ $PORTALS_INSTANCES = [ link: 'https://biodivportal.gfbio.org/' } ] +$ONTOPORTAL_WEBSITE_LINK = "https://ontoportal.org/" +$ONTOPORTAL_GITHUB_REPO = "https://github.com/ontoportal" $GITHUB_ISSUES = "https://github.com/agroportal/project-management/issues" $FOOTER_LINKS = { @@ -275,7 +277,7 @@ $FOOTER_LINKS = { api: "https://data.agroportal.lirmm.fr/", tools: "/tools", sparql: "https://sparql.agroportal.lirmm.fr/test/", - ontoportal: "https://ontoportal.org/" + ontoportal: $ONTOPORTAL_WEBSITE_LINK }, support: { contact_us: "https://#{$SITE}.lirmm.fr/feedback", diff --git a/config/locales/en.yml b/config/locales/en.yml index 6089ff20cc..f00316dbc1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -409,6 +409,11 @@ en: feedback_complete: title: Feedback sent successfully message: Thank you for taking the time to share your feedback with us. Our support team will review your message and get back to you as soon as possible with a response. We value your opinion and appreciate your help in improving our services. Thank you for your support! + suggest_slice: Suggest a new group/slice + slices_description: Slices allow users to interact (both via API or UI) only with a subset of ontologies in AgroPortal. If browsing the slice, all the portal features will be restricted to the chosen subset, enabling users to focus on their specific use cases. On AgroPortal, slices and groups are synchronized, so every group has a corresponding slice displaying only the ontologies from that group. + ontoportal_description: "The OntoPortal Alliance %{ontoportal_link} is a consortium of research and infrastructure teams dedicated to promoting the development of ontology repositories and semantic artefact catalogues based on the open, collaboratively developed OntoPortal software %{github_link}. Hereafter are the current public and open repositories built with the technology maintained by the Alliance." + viewing_slice: "Viewing the slice:" + view_full_site: View full website landscape: #select_ontologies: Start typing to select ontologies or leave blank to use them all classes: Number of classes diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 5ed3522d12..2f4812d8d1 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -413,6 +413,11 @@ fr: feedback_complete: title: Retour envoyé avec succès message: Merci d'avoir pris le temps de partager votre retour avec nous. Notre équipe de support examinera votre message et vous répondra dès que possible. Nous apprécions votre opinion et sommes reconnaissants de votre aide pour améliorer nos services. Merci de votre soutien ! + suggest_slice: Proposer un nouveau groupe/slice + slices_description: Les "slices" permettent aux utilisateurs d'interagir (à la fois via l'API ou l'interface utilisateur) uniquement avec un sous-ensemble d'ontologies dans AgroPortal. Si vous parcourez une slice, toutes les fonctionnalités du portail seront limitées au sous-ensemble choisi; cela permet aux utilisateurs de se concentrer sur leurs cas d'utilisation spécifiques. Sur AgroPortal, les slices et les groupes sont synchronisés, de sorte que chaque groupe a une slice correspondante affichant uniquement les ontologies de ce groupe. + ontoportal_description: "L'OntoPortal Alliance %{ontoportal_link} est un consortium d'équipes de recherche et d'infrastructure dédiées à promouvoir le développement de portails d'ontologies et de catalogues d'artefacts sémantiques basés sur le logiciel OntoPortal %{github_link} ouvert et collaboratif. Ci-dessous se trouvent les portails publics et ouverts actuels construits avec la technologie maintenue par l'Alliance." + viewing_slice: "Affichage de la slice:" + view_full_site: Voir le site complet landscape: #select_ontologies: Commencez à taper pour sélectionner des ontologies ou laissez vide pour les utiliser toutes