Feature: Update ontologies selector component (#508)

* init ontologies selector design

* ontologies selector options

* display ontologies in ontologies selector

* finalize ontologies selector design

* put ontologies selector in the modal component

* fix ontologies result display in ontologies selector

* Make ontologies selector search bar work

* show ontologies results count in ontologies selector

* make groups filter work in ontologies selector

* make filter by categories work in ontologies selector

* add ontologies selector loading animation

* make submission related filters work for ontologies selector

* make select all work in ontologies selector

* make retired ontologies and views filters work in ontologies selector

* fix ontologies style in ontologies selector

* add unselect all in ontologies selector

* show tab selected checks count in ontologies selector

* Clean ontologies selector js controller code

* Add loading animation to ontologies selector

* make ontology selection work in ontologies selector

* add clear selection to ontologies selector

* make ontologies selector component

* remove duplicated cross icon in ontologies selector

* clean ontologies controller code

* use rails cache in ontologies selector

* replace use cases of the old ontologies selector

* delete old ontologies selector code

* convert ontologies selector ui component into a helper

* replace the usages of the ontologies selector ui component by the ontologies selector helper

* replace 'selector' by 'ontologies_selector' in ontologies controller

* add internationalisation to ontologies selector

* remove the usage of static cache in ontologies selector

* extract save and cancel buttons to a reusable helper in ontologies selector

* undo extract save and cancel buttons to a reusable helper

* add another type to the loader component that uses the style of the three dots

* don't use display all in submissions fetching to make it faster in ontologies controller

* remove ontology_picker_single code and replace its usages

* give type argument in loader component a more significant value

* replace ontologies selector text input by text input helper

* replace ontologies selector chips components by chips components helpers

* extract save and cancel buttons to helpers in the ontologies selector

* fix ontologies selector name fild in search annotator and recommender page

* fix text input helper label

---------

Co-authored-by: Syphax bouazzouni <[email protected]>

app/assets/stylesheets/annotator.scss

@@ -46,7 +46,7 @@
 .annotator-page-text-area .insert-sample-text-button{
   display: flex;
   justify-content: end;
-  padding: 20px;
+  padding: 10px 20px 20px 20px;
 }
 .annotator-page-text-area .insert-sample-text-button .button{
   display: flex;
@@ -188,7 +188,7 @@
   display: flex;
   white-space: nowrap;
 }
-.annotation-parent div,a{
+.annotation-parent div, .annotation-parent a{
   margin-right: 11px;
 }
 .annotation-parent .text{
@@ -198,6 +198,9 @@
 .annotation-parent a{
   text-decoration: underline !important;
 }
+.annotator-page-options .prefrences{
+  margin-top: 10px;
+}
 
 .annotation-parent .level{
   font-weight: 600;

app/assets/stylesheets/bioportal.scss

@@ -676,6 +676,8 @@ div.tree_error {
   a.tree-link {
     display: inline-block;
     padding: 5px;
+    word-break: break-all;
+    text-wrap: wrap;
     color: var(--primary-color) !important;
   }
 
@@ -1063,27 +1065,6 @@ button.fg-button-menu, button.fg-button {
   border: none;
 }
 
-#ontology_picker_container div.chzn-container {
-  width: 432px !important;
-}
-
-#ontology_picker_container div.chzn-container-active ul.chzn-choices li.search-field input {
-  font-style: normal !important;
-}
-
-#ontology_picker_container div.chzn-container ul.chzn-choices {
-  max-height: 110px;
-  overflow: auto !important;
-}
-
-#ontology_picker_container div.chzn-container li.search-field input {
-  font-style: oblique;
-}
-
-#ontology_picker_container div.chzn-drop {
-  display: none;
-}
-
 .no_right_border {
   border-right: none !important;
 }

app/assets/stylesheets/components/index.scss

@@ -30,4 +30,6 @@
 @import "radio";
 @import "progress_bar";
 @import "search_result";
-@import "range_slider";
+@import "range_slider";
+@import "ontologies_selector";
+@import "loader";

app/assets/stylesheets/components/loader.scss

@@ -0,0 +1,12 @@
+.loader-component{
+    display: flex;
+    justify-content: center;
+}
+
+.lds-ellipsis.loader-component{
+    transform: scale(1);
+}
+
+.lds-ellipsis.loader-component div{
+    background: var(--primary-color);
+}

app/assets/stylesheets/components/ontologies_selector.scss

@@ -0,0 +1,137 @@
+.ontologies-selector-container{
+    width: 800px;
+    padding: 0 10px;
+
+}
+.ontologies-selector-input{
+    position: relative;
+    padding-bottom: 70px;
+}
+.ontologies-selector-input input{
+    width: 100%;
+    font-size: 15px;
+    padding: 15px 20px;
+    border-radius: 8px;
+    border: 1px solid #DCDCDC;
+    outline: none;
+    position: absolute;
+}
+.ontologies-selector-input input:focus{
+    border: 1px solid #a6a6a6;
+}
+.ontologies-selector-input svg{
+    position: absolute;
+    top: 17px;
+    right: 20px;
+}
+.ontologies-selector-input svg path{
+    fill: #a6a6a6;
+}
+
+.ontologies-selector-options .nav-item{
+    margin-right: 0px !important;
+}
+.ontologies-selector-options .tab-items{
+    width: 100%;
+    justify-content: space-between;
+}
+.ontologies-selector-options .tab-link{
+    padding: 0 10px;
+}
+.ontologies-selector-options .chips{
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+}
+.horizontal-line{
+    margin: 10px 0;
+    width: 100%;
+    height: 1px;
+    background-color: #d7d7d7;
+    border-radius: 100%;
+}
+
+.ontologies-selector-results .chips-container div label > span{
+    font-size: 16px;
+    padding: 10px 15px;
+}
+.ontologies-selector-results label{
+    width: 100%
+}
+.ontologies-selector-results .chips-container > div{
+    margin-right: 0;
+}
+.ontologies-selector-results .ontologies svg{
+    display: none !important;
+}
+.ontologies-selector-results .ontologies{
+    max-height: 300px;
+    overflow-y: scroll;
+}
+.save-cancel-buttons{
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+.ontologies-selector-results .button{
+    width: 200px;
+}
+.ontologies-selector-results .button + .button{
+    margin-left: 20px
+}
+.switch-filters {
+    display: flex;
+}
+.switch-filters > div{
+    display: flex;
+    padding: 15px 20px;
+    border: 1px solid #d7d7d7;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    color: #666666;
+}
+.switch-filters > div + div{
+    margin-left: 20px;
+}
+
+.switch-filters .text{
+    margin-right: 20px
+}
+
+.ontologies-selector-results .results-number{
+    color: #A1A1A1;
+    margin: 10px 0;
+}
+.ontologies-selector-results  .results-number span{
+    color: var(--primary-color);
+}
+.ontologies-selector-button{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+.ontologies-selector-button .clear-selection{
+    margin-top: 5px;
+    font-size: 15px;
+    color: var(--primary-color);
+    margin-right: 20px;
+    cursor: pointer;
+}
+.ontologies-selector-button a{
+    color: var(--primary-color) !important;
+    margin-top: 5px;
+    font-size: 15px;
+}
+.ontologies-selector-button a svg{
+    display: none;
+}
+.ontologies-selector-button a span{
+    display: none;
+}
+
+.ontologies-selector-results .select-all{
+    cursor: pointer;
+}
+.ontologies-selector-button a{
+    margin-right: 0;
+}

app/components/chips_component.rb

@@ -1,12 +1,13 @@
 class ChipsComponent < ViewComponent::Base
 
     renders_one :count
-    def initialize(id:nil, name:,  label: nil, value: nil, checked: false)
+    def initialize(id:nil, name:,  label: nil, value: nil, checked: false, tooltip: nil)
         @id = id || name
         @name = name
         @value = value || 'true'
         @checked = checked
         @label = label || @value
+        @tooltip = tooltip
     end
 
     def checked?

app/components/chips_component/chips_component.html.haml

@@ -1,10 +1,9 @@
-.chips-container{class: @disabled ?  'disabled' : ''}
+.chips-container{class: @disabled ?  'disabled' : '', 'data-controller': 'tooltip', title: @tooltip}
   %div
     %label{:for => "chips-#{@id}-check"}
       %input{:id => "chips-#{@id}-check", :name => @name, :type => "checkbox", :value => @value, checked: checked?, disabled: @disabled}
       %span
-        %svg.chips-check-icon{:fill => "none", :height => "8", :viewbox => "0 0 10 8", :width => "10", :xmlns => "http://www.w3.org/2000/svg"}
-          %path{:d => "M9.76764 0.232287C9.45824 -0.0775267 8.95582 -0.0773313 8.646 0.232287L3.59787 5.28062L1.35419 3.03696C1.04438 2.72714 0.542174 2.72714 0.23236 3.03696C-0.0774534 3.34677 -0.0774534 3.84897 0.23236 4.15879L3.03684 6.96326C3.19165 7.11807 3.39464 7.19567 3.59765 7.19567C3.80067 7.19567 4.00386 7.11827 4.15867 6.96326L9.76764 1.3541C10.0775 1.0445 10.0775 0.542081 9.76764 0.232287Z"}
+        = inline_svg_tag 'check.svg', class: 'chips-check-icon'
         %div
           = @label
         = count

app/components/input/text_input_component.rb

@@ -2,12 +2,12 @@
 
 class Input::TextInputComponent < Input::InputFieldComponent
   def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '', disabled: false, id: '', data: {})
-    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text, disabled: disabled, id: id)
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text, disabled: disabled, id: id, data: data)
   end
 
   def call
     render Input::InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder,
                                           error_message: @error_message, helper_text: @helper_text,
-                                          type: @type, disabled: @disabled)
+                                          type: @type, disabled: @disabled, data: @data)
   end
 end

app/components/loader_component.rb

@@ -3,23 +3,36 @@
 class LoaderComponent < ViewComponent::Base
   include ActionView::Helpers::TagHelper
 
-  def initialize(small: false)
+  def initialize(small: false, type: nil)
     super
     @small = small
+    @type = type
   end
 
   def small_class
     @small ? 'spinner-border-sm' : ''
   end
 
+  def type
+    !@type.eql?('pulsing')
+  end
+
   def call
-    content_tag(:div, class: 'd-flex align-items-center flex-column') do
-      content_tag(:div, class: "spinner-border #{small_class}") do
-        content_tag(:span) do
-          t('components.loading')
+    if type
+      content_tag(:div, class: 'd-flex align-items-center flex-column') do
+        content_tag(:div, class: "spinner-border #{small_class}") do
+          content_tag(:span) do
+            t('components.loading')
+          end
+          content_tag(:div, class: 'spinner-text my-2') do
+            t('components.loading')
+          end
         end
-        content_tag(:div, class: 'spinner-text my-2') do
-          t('components.loading')
+      end
+    else
+      content_tag(:div, class: 'loader-component') do
+        content_tag(:div, class: "lds-ellipsis loader-component") do
+          4.times.map{content_tag(:div)}.join.html_safe
         end
       end
     end

app/components/turbo_frame_component/turbo_frame_component.html.haml

@@ -7,6 +7,6 @@
       = loader
     - else
       %div.p-3
-        = render LoaderComponent.new
+        = render LoaderComponent.new(type: 'pulsing')
   %div{'data-turbo-frame-error-target': 'errorMessage', style:'display: none; width: 100%'}
     = render Display::AlertComponent.new(type:'danger')

app/controllers/ontologies_controller.rb

@@ -438,6 +438,58 @@ def metrics_evolution
     render partial: 'ontologies/sections/metadata/metrics_evolution_graph', locals: { data: data }
   end
 
+  def ontologies_selector
+    @categories = LinkedData::Client::Models::Category.all(display_links: false, display_context: false)
+    @groups = LinkedData::Client::Models::Group.all(display_links: false, display_context: false)
+    @filters = ontology_filters_init(@categories, @groups)
+    @select_id = params[:id]
+    render 'ontologies/ontologies_selector/ontologies_selector' , layout: false
+  end
+
+  def ontologies_selector_results
+    @ontologies = LinkedData::Client::Models::Ontology.all(include_views: params[:showOntologyViews])
+    @total_ontologies_number = @ontologies.length
+    @input = params[:input] || ''
+    @ontologies = @ontologies.select { |ontology| ontology.name.downcase.include?(@input.downcase) || ontology.acronym.downcase.include?(@input.downcase)}
+
+    if params[:groups] 
+      @ontologies = @ontologies.select do |ontology|
+        (ontology.group & params[:groups]).any?
+      end
+    end
+
+    if params[:categories]
+      @ontologies = @ontologies.select do |ontology|
+        (ontology.hasDomain & params[:categories]).any?
+      end
+    end
+
+    if params[:formats] || params[:naturalLanguage] || params[:formalityLevel] || params[:isOfType] || params[:showRetiredOntologies]
+      submissions = LinkedData::Client::Models::OntologySubmission.all({also_include_views: 'true'})
+      if params[:formats]
+        submissions = submissions.select { |submission| params[:formats].include?(submission.hasOntologyLanguage)}
+      end
+      if params[:naturalLanguage]
+        submissions = submissions.select do |submission|
+          (submission.naturalLanguage & params[:naturalLanguage]).any?
+        end
+      end
+      if params[:formalityLevel]
+        submissions = submissions.select { |submission| params[:formalityLevel].include?(submission.hasFormalityLevel)}
+      end
+      if params[:isOfType]
+        submissions = submissions.select { |submission| params[:isOfType].include?(submission.isOfType)}
+      end
+      if params[:showRetiredOntologies]
+        submissions = submissions.reject { |submission| submission.status.eql?('retired')}
+      end
+      @ontologies = @ontologies.select do |ontology|
+        submissions.any? { |submission| submission.ontology.id == ontology.id }
+      end
+    end
+    render 'ontologies/ontologies_selector/ontologies_selector_results'
+  end
+
   private
 
   def get_views(ontology)