Feature: Update browse page design (#217)

* Update browse page design with the new design on figma

* Fix the problems in the design of the browse page and make it responsive

* Add the light color variable for differnet themes

* Extract the ontologies section in the browse page to be the src of the turbo frame

* Change the color of the turbo progress bar

* Update the design of the switch component

* Add the checked property to the chips component

* Add the filtering logic of the browse page

* Add the checked filters count in the browse page

* Remove the angular from the browse page

* In browse page, limit the ontology description to 3 lines and add a button show more to see the entire description

* remove duplicate action changed->turbo-frame#updateFrame in the browser

* add text truncate stimulus controller

* replace in the browser descriptions js with a controller to show more

* add timeago stimulus controller to show dates in a human readable way

* add ontology contacts and format to the ontology card

* remove old angular files

* yarn update to install the new JS dependencies

* add ontology browser page and empty state image

* refactor useHistory mixin

This reverts commit 719e456.

* add count slot to the chips components

* add small version of the loader component

* add filters count by ontology

* add the count slots to the chips in the browse page

* use turbo streams to update  ontologies result and the filters  counts

* add ontology browse private icon

* add admin-color theme variable

* add private only  switch to the ontologies browser

* implement the private only ontologies filter

* add title tooltip for the browser filters chips

* update turbo_frame component to use a custom loader

* handle the case where submission publication attribute is not an array

* update infinite scroll component to add custom loader and be generic

* create and use tree infinite scroll component

* create ontology browser card component

* decrease the debounce time of the browser search input

* remove no more used get_metrics_hash function

* move submission filters methods to a concern module

* add back to top button and counter loader to the browse page

* implement and use submissions filter concern

* create browser ontologies partial

* update chips component  to add label attribute

* update tooltip controller to not show if title is empty

* update browse page filters section titles

* use the new chips component 'label' attribute for the browser filters

* fix the wrong browser count when show private only

* migrate the fair score js code to stimulus to make it work with turbo

* put again the accidentally removed ontology_params method

* prevent zombie submission with no ontology) bug in the browse page

* fix browse page layout issues

* fix unable to see full content of the filter collapsible block in the browse page

* move  deprecated and view cards of ontology down instead next to name

* remove default margin left of the pill button component

* add tooltip message to the ontology that is the view of another ontology

* change the layout of the browse page to have the upload button and search in same level

* add admin style classes

* add interactive option for use tooltip controller

* add disabled state to chips component

* show the filter count loader each time changed

* add released  year card to the ontology cards

* add the debug card to the ontologies card if user is admin

---------

Co-authored-by: Bilelkihal <[email protected]>

Gemfile.lock

@@ -85,11 +85,12 @@ GEM
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     aes_key_wrap (1.1.0)
-    airbrussh (1.4.1)
+    airbrussh (1.4.2)
       sshkit (>= 1.6.1, != 1.7.0)
     ast (2.4.2)
     autoprefixer-rails (10.4.13.0)
       execjs (~> 2)
+    base64 (0.1.1)
     bcrypt_pbkdf (1.1.0)
     bindata (2.4.15)
     bindex (0.8.1)
@@ -131,7 +132,7 @@ GEM
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
-    css_parser (1.14.0)
+    css_parser (1.16.0)
       addressable
     cube-ruby (0.0.3)
     daemons (1.4.1)
@@ -147,7 +148,7 @@ GEM
     erubi (1.12.0)
     erubis (2.7.0)
     eventmachine (1.2.7)
-    excon (0.100.0)
+    excon (0.102.0)
     execjs (2.8.1)
     faraday (2.0.1)
       faraday-net_http (~> 2.0)
@@ -162,9 +163,9 @@ GEM
     faraday-net_http (2.1.0)
     ffi (1.15.5)
     flamegraph (0.9.5)
-    globalid (1.1.0)
-      activesupport (>= 5.0)
-    graphql (2.0.25)
+    globalid (1.2.0)
+      activesupport (>= 6.1)
+    graphql (2.1.0)
     graphql-client (0.18.0)
       activesupport (>= 3.0)
       graphql
@@ -239,10 +240,11 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     method_source (1.0.0)
-    mime-types (3.5.0)
+    mime-types (3.5.1)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2023.0218.1)
-    mini_mime (1.1.2)
+    mime-types-data (3.2023.0808)
+    mini_mime (1.1.5)
+    mini_portile2 (2.8.4)
     minitest (5.19.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
@@ -267,22 +269,22 @@ GEM
       net-protocol
     net-ssh (7.2.0)
     netrc (0.11.0)
-    newrelic_rpm (9.3.1)
+    newrelic_rpm (9.4.2)
     nio4r (2.5.9)
-    nokogiri (1.15.3)
+    nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-darwin)
+    nokogiri (1.15.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     oauth2 (1.4.11)
       faraday (>= 0.17.3, < 3.0)
       jwt (>= 1.0, < 3.0)
       multi_json (~> 1.3)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 4)
-    oj (3.15.1)
+    oj (3.16.1)
     omniauth (2.1.1)
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
@@ -320,7 +322,7 @@ GEM
       method_source (~> 1.0)
     psych (3.3.4)
     public_suffix (5.0.3)
-    puma (5.6.6)
+    puma (5.6.7)
       nio4r (~> 2.0)
     racc (1.7.1)
     rack (2.2.8)
@@ -353,7 +355,7 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    rails-i18n (7.0.7)
+    rails-i18n (7.0.8)
       i18n (>= 0.7, < 2)
       railties (>= 6.0.0, < 8)
     rails_autolink (1.1.8)
@@ -377,7 +379,7 @@ GEM
       json
     redcarpet (3.6.0)
     regexp_parser (2.8.1)
-    reline (0.3.7)
+    reline (0.3.8)
       io-console (~> 0.5)
     rest-client (2.1.0)
       http-accept (>= 1.7.0, < 2.0)
@@ -403,7 +405,8 @@ GEM
       rspec-mocks (~> 3.12)
       rspec-support (~> 3.12)
     rspec-support (3.12.1)
-    rubocop (1.55.1)
+    rubocop (1.56.2)
+      base64 (~> 0.1.1)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
       parallel (~> 1.10)

app/assets/stylesheets/application.css.scss.erb

@@ -58,6 +58,7 @@
 @import "nav_bar";
 @import "ontology_details_header";
 @import "ontology_viewer";
+@import "browse";
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/bioportal.scss

@@ -1,17 +1,37 @@
-a {
+.turbo-progress-bar {
+  height: 5px;
+  background-color: var(--light-color);
+}
+
+a{
   text-decoration: none !important;
 }
 p {
   margin-bottom: 0;
 }
 
+body{
+  position: relative;
+}
+
 .alignright {
   float:right;
 }
 .alignleft {
   float:left;
 }
 
+.admin-border{
+  border: 1px solid;
+  border-color: var(--admin-color) !important;
+}
+
+.admin-background{
+  background-color: var(--light-color) !important;
+  border-color: var(--admin-color) !important;
+  color: var(--admin-color) !important;
+}
+
 #hd {
   background: image-url('layout/header_bg.png') repeat-x;
   width: 100%;