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 <gs_bouazzouni@esi.dz>
ontoportal-lirmm · Jun 12, 2024 · b438186 · b438186
1 parent e4700a1
commit b438186
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 40 deletions.
diff --git a/app/assets/images/icons/slices.svg b/app/assets/images/icons/slices.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/concerns/submission_filter.rb b/app/controllers/concerns/submission_filter.rb
@@ -53,7 +53,6 @@ def submissions_paginate_filter(params)
 
     submissions = sort_submission_by(submissions, @sort_by, @search)
 
-
     @page = paginate_submissions(submissions, request_params[:page].to_i, request_params[:pagesize].to_i)
 
     count = @page.page.eql?(1) ? count_objects(submissions) : {}

diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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