Fix: simplify the see all metadata page (#409)

* update the maintenance page

* use in the footer portal name configuration variable instead of UI_THEME

* put in all metadata modal title to have the filled percentage metric

* simplify the all metadata modal table to show only the filled metadata

app/components/submission_metadata_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class SubmissionMetadataComponent < ViewComponent::Base
-  include ApplicationHelper, MetadataHelper,OntologiesHelper, AgentHelper
+  include ApplicationHelper, MetadataHelper, SubmissionInputsHelper,OntologiesHelper, AgentHelper
 
   def initialize(submission: , submission_metadata:)
     super
@@ -13,8 +13,10 @@ def initialize(submission: , submission_metadata:)
     @json_metadata.each do |metadata|
       metadata_list[metadata["attribute"]] = metadata["label"]
     end
-
-    @metadata_list = metadata_list.sort
+    reject = [:csvDump, :dataDump, :openSearchDescription, :metrics, :prefLabelProperty, :definitionProperty,
+              :definitionProperty, :synonymProperty, :authorProperty, :hierarchyProperty, :obsoleteProperty,
+              :ontology, :endpoint, :submissionId, :submissionStatus, :uploadFilePath]
+    @metadata_list = metadata_list.reject{|k,v| reject.include?(k.to_sym)}.sort
   end
 
   def display_attributes(metadata)
@@ -29,24 +31,4 @@ def display_attributes(metadata)
     end
     out.html_safe
   end
-  def attribute_help_text(attr)
-    if !attr["namespace"].nil?
-      help_text = "<strong>#{attr["namespace"]}:#{attr["attribute"]}</strong>"
-    else
-      help_text = "<strong>bioportal:#{attr["attribute"]}</strong>"
-    end
-
-    if (attr["metadataMappings"] != nil)
-      help_text += " (#{attr["metadataMappings"].join(", ")})"
-    end
-
-    if (!attr["enforce"].nil? && attr["enforce"].include?("uri"))
-      help_text += "<br/>This metadata should be an <strong>URI</strong>"
-    end
-
-    if (attr["helpText"] != nil)
-      help_text += "<br/><br/>#{attr["helpText"]}"
-    end
-    help_text.html_safe
-  end
 end

app/components/submission_metadata_component/submission_metadata_component.html.haml

@@ -1,18 +1,13 @@
 = render TableComponent.new(id: 'submission_metadata_table', borderless: true, layout_fixed: true) do |t|
-  - t.header do |h|
-    - h.th(width:'15%') {"Label"}
-    - h.th(width:'50%') {"Value"}
-    - h.th(width:'35%') {"Metadata"}
-
   - @metadata_list.each do |metadata, label|
+    - next if Array(@submission.send(metadata)).empty?
     - t.row do |r|
       - r.td do
-        = label || metadata.underscore.humanize
+        = attr_label(metadata.to_s, attr_metadata: attr_metadata(metadata.to_s))
       - r.td do
         .d-flex.flex-wrap.align-items-center
           = display_attributes(metadata)
-      - r.td {attribute_help_text(attr_metadata(metadata))}
 :javascript
-   $("#submission_metadata_table").dataTable({ paging: false, autoWidth: false })
+   $("#submission_metadata_table").dataTable({ paging: false, autoWidth: true, search :false })
 
 

app/helpers/metadata_helper.rb

@@ -83,7 +83,7 @@ def display_attribute(metadata, value)
     elsif attr_uri?(metadata)
       render LinkFieldComponent.new(value: value)
     elsif input_type?(attr_metadata(metadata), 'contact')
-      display_contact(value)
+      display_contact([value]).html_safe
     else
       render TextAreaFieldComponent.new(value: value.to_s)
     end

app/helpers/ontologies_helper.rb

@@ -147,6 +147,21 @@ def classes_link(ontology, count)
     count_links(ontology.ontology.acronym, 'classes', count)
   end
 
+  def metadata_filled_count(submission = @submission_latest, ontology = @ontology)
+    return if submission.nil?
+
+    reject = [:csvDump, :dataDump, :openSearchDescription, :metrics, :prefLabelProperty, :definitionProperty,
+              :definitionProperty, :synonymProperty, :authorProperty, :hierarchyProperty, :obsoleteProperty,
+              :ontology, :endpoint, :submissionId, :submissionStatus, :uploadFilePath, :context, :links, :ontology]
+    sub_values = submission.to_hash.except(*reject).values
+    count = sub_values.count{|x| !x.blank?}
+    content_tag(:div, class: 'd-flex align-items-center justify-content-center') do
+      content_tag(:span, style:'width: 50px; height: 50px', data: {controller: 'tooltip'}, title: "#{count} of #{sub_values.size}") do
+        render CircleProgressBarComponent.new(count: count , max:  sub_values.size )
+      end  +  content_tag(:span, class: 'mx-1') { "of #{ontology.acronym}  metadata properties are filled"}
+    end.html_safe
+  end
+
   # Creates a link based on the status of an ontology submission
   def download_link(submission, ontology = nil)
     ontology ||= @ontology

app/views/layouts/_footer.html.haml

@@ -8,10 +8,8 @@
     .footer-header
       .footer-logo
         %img{:src => "#{asset_path("logos/ontoportal.svg")}"}
-        - logo = $UI_THEME.to_s.capitalize
-        - logo.sub! 'portal' , 'Portal'
         %p
-          = logo
+          = portal_name
       .footer-social-media-links
         - $FOOTER_LINKS[:social].each do |link|
           %a{:href => link[:link], :target => "_blank"}

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

@@ -1,18 +1,8 @@
 = turbo_frame_tag 'application_modal_content' do
-  - sub_hash = @submission_latest.to_hash.except(:context, :links, :ontology)
   %div.card.overflow-hidden{style: 'border-radius: 20px;'}
-    %div
-      = render Display::AlertComponent.new(closable: false) do
-        %div.d-flex.align-items-center
-          %div{style:'width: 50px; height: 50px'}
-            - sub_values = sub_hash.values
-            - count = sub_values.count{|x| !(x.nil? || x.to_s.empty?)}
-            = render CircleProgressBarComponent.new(count: count , max: sub_values.size )
-          %div.mx-1
-            of the  metadata attributes were filled
-    %section.px-4{style:'height: 70vh; overflow-y: scroll'}
+    %section{style:'height: 70vh; overflow-y: scroll'}
       = render SubmissionMetadataComponent.new(submission: @submission_latest, submission_metadata: submission_metadata) unless @submission_latest.nil?
     %div.scroll-message.text-center.py-3.bg-light.text-primary
       %p.scroll-text.mb-0
         Scroll down to see more
-      %i.scroll-icon.fa.fa-chevron-down
+      %i.scroll-icon.fa.fa-chevron-down

app/views/ontologies/sections/metadata/_ontology_description_section.html.haml

@@ -65,4 +65,4 @@
     = ontology_icon_links(@ontology_icon_links, @submission_latest)
   %hr.w-100.my-3
   %div.text-center.pb-3
-    = link_to_modal('See all metadata...', "/ajax/submission/show_additional_metadata/#{@ontology.acronym}",data: { show_modal_title_value: "All metadata properties for #{@ontology.acronym}", show_modal_size_value: 'modal-xl' })
+    = link_to_modal('See all metadata...', "/ajax/submission/show_additional_metadata/#{@ontology.acronym}",data: { show_modal_title_value: metadata_filled_count, show_modal_size_value: 'modal-xl' })

public/maintenance/index.html

@@ -1,60 +1,18 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-<head>
-  <title>BioPortal :: Down for maintenance</title>
-
-  <link href="/maintenance/tripoli.simple.css" type="text/css" rel="stylesheet"> 
-  <!--[if IE]><link rel="stylesheet" type="text/css" href="/maintenance/tripoli.simple.ie.css"><![endif]-->
+<!doctype html>
+<title>Site Maintenance</title>
+<style>
+  body { text-align: center; padding: 150px; }
+  h1 { font-size: 50px; }
+  body { font: 20px Helvetica, sans-serif; color: #333; }
+  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
+  a { color: #dc8100; text-decoration: none; }
+  a:hover { color: #333; text-decoration: none; }
+</style>
 
-  <style type="text/css">
-    #bp_down {
-      text-align: center;
-      margin: 100px auto 0px;
-      width: 850px;
-      box-shadow: 5px 5px 5px grey;
-      -moz-box-shadow: 5px 5px 5px grey;
-      -webkit-box-shadow: 5px 5px 5px grey;
-      color: white;
-      background-color: #338D0C;
-    }
-
-    #bp_down h1 {
-      font-size: 250%;
-    }
-
-    #bp_down p {
-      font-size: 150%;
-      margin: .5em 0;
-    }
-
-    #bp_down a {
-      color: lightBlue;
-    }
-
-    #logo {
-      background: url("/maintenance/logo_background.jpg") repeat;
-      height: 43px;
-      width: 100%;
-      margin-bottom: 50px;
-    }
-
-    #down_text {
-      padding: 0 100px 100px;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="bp_down">
-    <div id="logo">
-      <img src="/maintenance/nav_logo.jpg">
-    </div>
-    <div id="down_text">
-      <h1>BioPortal is currently down for maintenance</h1>
-      <p>BioPortal will resume operation at 5:00pm PDT Friday, May 14. Thank you for your patience.</p>
-      <p>Please contact <a href="mailto:[email protected]">[email protected]</a> with questions or concerns</p>
-    </div>
+<article>
+  <h1>We&rsquo;ll be back soon!</h1>
+  <div>
+    <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:[email protected]">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
+    <p>&mdash; The AgroPortal Team</p>
   </div>
-</body>
-
-</html>
+</article>