From ceeedb1b783d083bbc4987c060ce83c3d0f8fe14 Mon Sep 17 00:00:00 2001
From: Bilelkihal <61744974+Bilelkihal@users.noreply.github.com>
Date: Mon, 27 Mar 2023 16:10:38 +0200
Subject: [PATCH] Fix the problems in the design of the browse page and make it
 responsive

---
 app/assets/stylesheets/browse.scss    | 227 +++++++++++++-----
 app/views/ontologies/browse.html.erb  | 324 --------------------------
 app/views/ontologies/browse.html.haml | 198 ++++++----------
 3 files changed, 242 insertions(+), 507 deletions(-)
 delete mode 100644 app/views/ontologies/browse.html.erb

diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss
index 9ba47a4f4..6fdd6188f 100644
--- a/app/assets/stylesheets/browse.scss
+++ b/app/assets/stylesheets/browse.scss
@@ -10,19 +10,44 @@
     margin: unset;
 }
 
-
-a{
-    text-decoration: none !important;
-}
 .browse-center{
     display: flex;
     justify-content: center;
     margin: 50px 0;
 }
 .browse-title{
-    font-size: 18px;
+    font-size: 22px;
     font-weight: 700;
 }
+
+.browse-submit-new-ontology-and-you-are-admin-container{
+    display: flex;
+    margin-bottom: 20px;
+    
+}
+.browse-you-are-admin{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid #DFDFDF;
+    border-radius: 5px;
+    padding: 20px;
+    margin-left: 180px
+}
+.browse-you-are-admin h3{
+    font-size: 20px;
+    font-weight: 600;
+    
+}
+.browse-you-are-admin div{
+    display: flex;
+    
+    align-items: center;
+    
+}
+.browse-you-are-admin div p{
+    margin-left: 20px;
+}
 .browse-upload-ontology-button{
     margin: 20px 0;
     display: flex;
@@ -67,6 +92,7 @@ a{
 
 .browse-sub-container{
     display: flex;
+    margin-top: 90px;
 }
 .browse-first-row{
     width: 300px;
@@ -132,7 +158,7 @@ a{
 .browse-ontology-cards{
     display: grid;
     grid-template-columns: 113px 113px;
-    grid-template-rows: 78px 78px;
+    grid-template-rows: min-content;
     grid-column-gap: 15px;
     grid-row-gap: 15px;
     direction: rtl;
@@ -167,6 +193,7 @@ a{
     font-weight: 600;
     font-size: 16px;
 }
+
 .browse-search-bar{
     display: flex;
 
@@ -175,12 +202,12 @@ a{
     border: none;
     border-radius: 14px;
     width: 100%;
-    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
+    box-shadow: rgba(100, 100, 111, 0.08) 0px 7px 29px 0px;
     padding: 20px 20px;
     margin-bottom: 20px;
     font-size: 16px;
     position: absolute;
-    width: 972px;
+    width: 1165px;
     z-index: 1;
 
 }
@@ -209,13 +236,13 @@ a{
 
 .browse-search-bar .browse-format-filter{
     position: absolute;
-    margin-left: 526px;
+    margin-left: 719px;
     z-index: 2;
     width: 150px;
 }
 .browse-search-bar .browse-sort-by-filter{
     position: absolute;
-    margin-left: 676px;
+    margin-left: 869px;
     z-index: 2;
     width: 296px;
     border-radius: 0 14px 14px 0;
@@ -261,55 +288,145 @@ a{
     cursor: pointer;
 }
 
+.browse-ontology-title-bar{
+    display: flex;
+    align-items: center;
+}
+.browse-ontology-deprecated{
+    background-color: #EB433521;
+    color: #EB4335;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 8px;
+    margin-left: 15px;
+    margin-right: 15px;
+    font-weight: 500;
+}
+.browse-ontology-view{
+    background-color: var(--light-color);
+    color: var(--primary-color);
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 8px;
+    margin-left: 15px;
+    margin-right: 15px;
+    font-weight: 500;
+}
+
+.browse-switch-filter{
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+.browse-switch-filter p{
+    font-size: 16px;
+    color: #666666;
+}
+
 
 
-/* Toggle switch css */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    height: 20px;
-}
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-    border-radius: 34px;
-}
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 13px;
-    width: 13px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-    border-radius: 50%;
+.browse-ontology-title-bar{
+    display: flex;
+    align-items: center;
 }
-input:checked + .slider {
-    background-color: var(--primary-color);
-} 
-input:focus + .slider {
-    box-shadow: 0 0 1px var(--primary-color);
+.browse-ontology-deprecated{
+    background-color: #EB433521;
+    color: #EB4335;
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 8px;
+    margin-left: 15px;
+    font-weight: 500;
+}
+.browse-ontology-view{
+    background-color: var(--light-color);
+    color: var(--primary-color);
+    padding: 10px;
+    font-size: 14px;
+    border-radius: 8px;
+    margin-left: 15px;
+    font-weight: 500;
+}
+
+
+
+
+@media only screen and (max-width: 1250px) {
+    .browse-first-row{
+        width: 24vw;
+        margin-right: 20px;
+    }
+    
+    .browse-second-row{
+        width: 68vw; 
+    }
+    .browse-search-bar input{
+        width: 94vw;
+    }
+    .browse-search-bar .browse-format-filter{
+        margin-left: 50%
+    }
+    .browse-search-bar .browse-sort-by-filter{
+        margin-left:65%
+    }
+
 }
-input:checked + .slider:before {
-    -webkit-transform: translateX(19px);
-    -ms-transform: translateX(19px);
-    transform: translateX(19px);
+@media only screen and (max-width: 1005px) {
+    .browse-sub-container{
+        display: block;
+    }
+    .browse-second-row{
+        width: 94vw;
+    }
+    .browse-first-row{
+        width: 94vw;
+    }
+    .browse-search-bar input{
+        position: static ;
+        margin-bottom: 1vw;
+    }
+    .browse-search-bar .browse-format-filter{
+        margin-left: 0;
+        position: static;
+        border-radius: 14px;
+        width:46.5vw;
+        box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
+        margin-right: 1vw;
+    }
+    .browse-search-bar .browse-sort-by-filter{
+        margin-left: 0;
+        position: static;
+        border-radius: 14px;
+        width:46vw;
+        box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
+    }
+    
+    .browse-sub-container{
+        margin-top: 20px;
+    }
+    .browse-center{
+        margin-left: 20px;
+    }
 }
-.account-page-subscribe-button{
 
+@media only screen and (max-width: 893px){
+    .browse-ontology-container{
+        display: block;
+    }
+    .browse-ontology-description{
+        width: 100%;
+    }
+    .browse-ontology-cards{
+        direction:ltr;
+        margin-top: 20px;
+    }
+    .browse-ontology-deprecated{
+        margin-right: 0;
+    }
+    .browse-ontology-view{
+        margin-right: 0;
+    }
+    
 }
+
diff --git a/app/views/ontologies/browse.html.erb b/app/views/ontologies/browse.html.erb
deleted file mode 100644
index c35fdd01c..000000000
--- a/app/views/ontologies/browse.html.erb
+++ /dev/null
@@ -1,324 +0,0 @@
-<link href="font/whhg.css"rel="stylesheet" type="text/css" media="all" />
-<link href="//cdnjs.cloudflare.com/ajax/libs/unsemantic/0/unsemantic-grid-responsive-tablet.css" rel="stylesheet" type="text/css" media="screen" />
-<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
-
-<div class="splash" ng-cloak>
-  <div style="font-size: 3em;">Ontologies loading</div>
-  <p>please wait...</p>
-</div>
-
-<main class="grid-container" role="main" style="margin-bottom: 1em; margin-top: 1em;" ng-cloak>
-  <h1 style="font-size: 3em;">Browse</h1>
-  <p>
-    <%= t('ontologies.intro').html_safe %>
-    <%= link_to(Rails.configuration.settings.links[:help_ontology_browse], id: 'ontology-browse-help',
-                'aria-label': 'View ontology browse help') do %>
-      <i class='fas fa-question-circle fa-lg' aria-hidden='true'></i>
-    <% end %>
-  </p>
-
-  <div ng-controller="OntologyList">
-    <div class="welcome_admin admin" ng-show="admin">
-      <b>Welcome admin</b><br/>This coloring indicates admin-only features
-    </div>
-
-    <div ng-show="debug" class="facet" style="position: relative;">
-      <h2>Debug Info</h2>
-      types: {{facets.types.active}}<br/>
-      artifacts: {{facets.artifacts.active}}<br/>
-      formats: {{facets.formats.active}}<br/>
-      groups: {{facets.groups.active}}<br/>
-      categories: {{facets.categories.active}}<br/>
-      Selected ontologies: {{visible_ont_count}}
-    </div>
-
-    <div id="facets" class="grid-20">
-      <%if session[:user].nil?%>
-        <a class="new_ontology_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/login?redirect=/ontologies/new">
-          <span class="ui-button-text">Submit New Ontology</span>
-        </a>
-      <%else%>
-        <a class="new_ontology_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="/ontologies/new">
-          <span class="ui-button-text">Submit New Ontology</span>
-        </a>
-      <%end%>
-
-      <!-- To add a new facet: set new filter to $scope.facets in angular defined in public/browse/app.js
-      Retrieve the attr value in browse_attributes and set it in the @ontologies in app/controllers/ontologies_controller.rb
-      Define possibles values for the attr in config/enforced_attribute_values.rb-->
-      <div id="ont_view_facet" class="facet">
-        <h4>Entry Type</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="type in types | toArray | orderBy:'sort'">
-            <input type="checkbox" checklist-model="facets.types.active" checklist-value="type.id" id="include_{{type.id}}" name="include_{{type.id}}" ng-disabled="!facet_counts['types'][type.id]">
-            <label for="include_{{type.id}}" ng-class="{facet_disabled: !facet_counts['types'][type.id]}">
-              {{type.id | idToTitle}}
-              <span class="smaller">({{facet_counts["types"][type.id] || 0}})</span>
-            </label>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="upload_date_facet" class="facet">
-        <h4>Uploaded in the Last</h4>
-        <div class="checkbox_list">
-          <select ng-model="facets.upload_date.active" ng-change="ontologySortOrder('-creationDate')">
-            <option ng-repeat="day in facets.upload_date.day_text" value="{{facets.upload_date.values[day]}}">
-              {{day | idToTitle}}
-            </option>
-          </select>
-        </div>
-      </div>
-
-      <div id="category_facet" class="facet">
-        <h4>Category</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="category in categories">
-            <input type="checkbox" checklist-model="facets.categories.active" checklist-value="category.id" name="category" id="category_{{category.acronym}}" ng-disabled="!facet_counts['categories'][category.id]">
-            <label for="category_{{category.acronym}}" title="{{category.description}}" ng-class="{facet_disabled: !facet_counts['categories'][category.id]}">{{category.name}}</label>
-            <span class="smaller">({{facet_counts["categories"][category.id] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="group_facet" class="facet">
-        <h4>Group</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="group in groups">
-            <input type="checkbox" checklist-model="facets.groups.active" checklist-value="group.id" name="group" id="group_{{group.acronym}}" ng-disabled="!facet_counts['groups'][group.id]">
-            <label for="group_{{group.acronym}}" title="{{group.name}} : {{group.description}}" ng-class="{facet_disabled: !facet_counts['groups'][group.id]}">{{group.acronym}}</label>
-            <span class="smaller">({{facet_counts["groups"][group.id] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="format_facet" class="facet">
-        <h4>Format</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="format in formats">
-            <input type="checkbox" checklist-model="facets.formats.active" checklist-value="format" name="format" id="format_{{format}}" ng-disabled="!facet_counts['formats'][format]">
-            <label for="format_{{format}}" ng-class="{facet_disabled: !facet_counts['formats'][format]}">{{format}}</label>
-            <span class="smaller">({{facet_counts["formats"][format] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="admin_facet" class="facet">
-        <h4>Ontology Content</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="artifact in artifacts">
-            <input type="checkbox" checklist-model="facets.artifacts.active" checklist-value="artifact" name="artifact" id="artifact_{{artifact}}" ng-disabled="!facet_counts['artifacts'][artifact]">
-            <label for="artifact_{{artifact}}" ng-class="{facet_disabled: !facet_counts['artifacts'][artifact]}">{{artifact | idToTitle}}</label>
-            <span class="smaller">({{facet_counts["artifacts"][artifact] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="language_facet" class="facet">
-        <h4>Natural Language</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="(language_uri,language_label) in natural_languages">
-            <input type="checkbox" checklist-model="facets.natural_languages.active" checklist-value="language_uri" name="natural_language"
-                   id="language_{{language_label.toLowerCase().split(' ').join('_')}}" ng-disabled="!facet_counts['natural_languages'][language_uri]">
-            <label for="language_{{language_label.toLowerCase().split(' ').join('_')}}" ng-class="{facet_disabled: !facet_counts['natural_languages'][language_uri]}">{{language_label}}</label>
-            <span class="smaller">({{facet_counts["natural_languages"][language_uri] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="formality_level_facet" class="facet">
-        <h4>Formality Levels</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="(formality_uri,formality_label) in formality_levels">
-            <input type="checkbox" checklist-model="facets.formality_levels.active" checklist-value="formality_uri" name="formality_level"
-                   id="formality_{{formality_label.toLowerCase().split(' ').join('_')}}" ng-disabled="!facet_counts['formality_levels'][formality_uri]">
-            <label for="formality_{{formality_label.toLowerCase().split(' ').join('_')}}" ng-class="{facet_disabled: !facet_counts['formality_levels'][formality_uri]}">{{formality_label}}</label>
-            <span class="smaller">({{facet_counts["formality_levels"][formality_uri] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="is_of_type_facet" class="facet">
-        <h4>Is of Type</h4>
-        <div class="checkbox_list">
-          <span ng-repeat="(is_of_type_uri,is_of_type_label) in is_of_type">
-            <input type="checkbox" checklist-model="facets.is_of_type.active" checklist-value="is_of_type_uri" name="is_of_type"
-                   id="is_of_type_{{is_of_type_label.toLowerCase().split(' ').join('_')}}" ng-disabled="!facet_counts['is_of_type'][is_of_type_uri]">
-            <label for="is_of_type_{{is_of_type_label.toLowerCase().split(' ').join('_')}}" ng-class="{facet_disabled: !facet_counts['is_of_type'][is_of_type_uri]}">{{is_of_type_label}}</label>
-            <span class="smaller">({{facet_counts["is_of_type"][is_of_type_uri] || 0}})</span>
-            <br/>
-          </span>
-        </div>
-      </div>
-
-      <div id="missing_status_facet" class="facet admin" ng-show="admin">
-        <h4>Missing Status</h4>
-        <div class="checkbox_list">
-          <select ng-model="facets.missing_status.active">
-            <option ng-repeat="status in facets.missing_status.values" value="{{status}}">
-              {{status | idToTitle}}
-            </option>
-          </select>
-        </div>
-      </div>
-
-    </div>
-
-    <div id="ontologies" class="grid-80">
-      <div id="searching">
-        <input type="text" placeholder="Search&hellip;" ng-model="searchText" ng-model-options="{debounce: 100}" class="search">
-      </div>
-
-      <div id="sorting" ng-show="visible_ont_count" style="margin-bottom: 2em;">
-        <div id="sorting_float">
-          <span style="padding: 7px 7px 4px;" id="visible_ont_count">Showing {{visible_ont_count}} of {{ontologies.length}}</span>
-          <label for="sort_order">Sort:</label>
-          <select ng-model="ontology_sort_order">
-            <option value="-popularity" selected="selected">Popular</option>
-            <option value="name">Name</option>
-            <option value="-class_count">Classes count</option>
-            <option value="-individual_count">Instances/Concepts count</option>
-            <option value="-project_count">Projects</option>
-            <option value="-note_count">Notes</option>
-            <!-- <option value="ratings">Rating</option> -->
-            <option value="-creationDate">Upload Date</option>
-            <option value="-released">Release Date</option>
-            <option value="-fairScore">FAIR score</option>
-            <option value="-search_rank" ng-show="searchText.length > 0">Search Rank</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="ontology" ng-show="visible_ont_count == 0" style="border: solid thin lightGray;">
-        <div style="text-align: center; color: gray; height: 2em; padding: 4em;">
-          <h2 style="font-weight: normal;">No matches!</h2>
-        </div>
-      </div>
-
-      <div class="ontology grid-parent clearfix" ng-repeat="ontology in ontologies | orderBy:ontology_sort_order" ng-if="ontology.show">
-        <div class="grid-75">
-          <div ng-if="ontology.type == 'ontology_view'" class="ontology_view_badge" title="This ontology is a view of {{ontology.viewOfOnt.name}}">VIEW</div>
-          <h2 style="font-size: 1.5em;">
-            <a href="/ontologies/{{ontology.acronym}}">
-              <span ng-if="debug">{{$index}} </span>
-              {{ontology.name}} ({{ontology.acronym}})
-            </a>
-            <i title="Private Ontology" ng-if="ontology.private" class="icon-key locked_ont"></i>
-          </h2>
-          <div ng-if="ontology.submission">
-            <p style="margin-bottom: 5px;">{{ontology.description | descriptionToText}}</p>
-            <span class="ont-info">
-              <b>Uploaded</b>: {{ontology.creationDate | date:'shortDate'}}
-            </span>
-            <span class="ont-info" ng-if="facets.formats.active.length > 1">
-              <b>Format</b>: {{ontology.format}}
-            </span>
-            <span class="ont-info" ng-if="ontology.type == 'ontology_view'">
-              <b>View of</b>: <a href="/ontologies/{{ontology.viewOfOnt.acronym}}">{{ontology.viewOfOnt.acronym}}</a>
-            </span>
-            <span class="ont-info" ng-if="ontology.summaryOnly">
-              <b>Summary Only</b>
-            </span>
-            <span class="ont-info" ng-if="facets.groups.active.length > 1">
-              <b>Groups</b>: {{groupAcronyms(ontology.groups).join(', ')}}
-            </span>
-            <span class="ont-info" ng-if="facets.categories.active.length > 1">
-              <b>Categories</b>: {{categoryNames(ontology.categories).join(', ')}}
-            </span>
-            <span>
-              <span class="ont-info admin" ng-if="admin">
-                <b>Admins</b>: {{adminUsernames(ontology.administeredBy).join(', ')}}
-              </span>
-              <span class="ont-info admin" ng-if="admin && ontology.pullLocation">
-                <b><a href="{{ontology.pullLocation}}">Pull URL</a></b>
-              </span>
-              <span class="ont-info admin" ng-if="admin && ontology.submission">
-                <b>Status</b>: {{ontology.submissionStatusFormatted}}
-              </span>
-            </span>
-          </div>
-
-          <span ng-hide="ontology.submission">No submissions available</span>
-        </div>
-
-
-
-        <div class="badges grid-25 grid-parent" ng-if="ontology.submission !== null">
-
-          <a href="/ontologies/{{ontology.acronym}}#fair-details" ng-if="ontology.fairScore !==null && ontology.acronym != 'AGROVOC'">
-            <div class="grid-50 badge_grid badge-fair">
-              <div class="ontology_badge" title="{{ontology.normalizedFairScore}}%">
-                <div class="badge_title">FAIR score</div>
-                <div class="badge_count">{{ontology.fairScore}}</div>
-              </div>
-            </div>
-          </a>
-
-          <a href="/ontologies/{{ontology.acronym}}?p=classes" ng-if="ontology.format !== 'SKOS' && ontology.class_count > 0">
-            <div class="grid-50 badge_grid">
-              <div class="ontology_badge">
-                <div class="badge_title">classes</div>
-                <div class="badge_count">{{ontology.class_count_formatted}}</div>
-              </div>
-            </div>
-          </a>
-
-          <a href="/ontologies/{{ontology.acronym}}?p=classes" ng-if="ontology.individual_count > 0 ">
-            <div class="grid-50 badge_grid">
-              <div class="ontology_badge">
-                <div class="badge_title">{{ontology.format === 'SKOS' ? "concepts" : "instances"}}</div>
-                <div class="badge_count">{{ontology.individual_count_formatted}}</div>
-              </div>
-            </div>
-          </a>
-
-          <a href="/ontologies/{{ontology.acronym}}#projects_content">
-            <div class="grid-50 badge_grid" ng-if="ontology.projects.length > 0">
-              <div class="ontology_badge">
-                <div class="badge_title">projects</div>
-                <div class="badge_count">{{ontology.projects.length}}</div>
-              </div>
-            </div>
-          </a>
-
-          <a href="/ontologies/{{ontology.acronym}}?p=notes">
-            <div class="grid-50 badge_grid" ng-if="ontology.notes.length > 0">
-              <div class="ontology_badge">
-                <div class="badge_title">notes</div>
-                <div class="badge_count">{{ontology.notes.length}}</div>
-              </div>
-            </div>
-          </a>
-
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
-
-
-<script>
-  jQuery(document).data().bp.ontologies = <%=MultiJson.dump(@ontologies[0..19]).html_safe%>;
-  jQuery(document).data().bp.fullOntologies = <%=MultiJson.dump(@ontologies).html_safe%>;
-  jQuery(document).data().bp.categories = <%=MultiJson.dump(@categories).html_safe%>;
-  jQuery(document).data().bp.categories_hash = <%=MultiJson.dump(@categories_hash).html_safe%>;
-  jQuery(document).data().bp.groups = <%=MultiJson.dump(@groups).html_safe%>;
-  jQuery(document).data().bp.groups_hash = <%=MultiJson.dump(@groups_hash).html_safe%>;
-  jQuery(document).data().bp.formats = <%=MultiJson.dump(@formats).html_safe%>;
-  jQuery(document).data().bp.admin = <%=MultiJson.dump(@admin).html_safe%>;
-  jQuery(document).data().bp.development = <%=MultiJson.dump(@development).html_safe%>;
-
-  jQuery(document).data().bp.formality_levels = <%=MultiJson.dump($FORMALITY_LEVELS).html_safe%>;
-  jQuery(document).data().bp.natural_languages = <%=MultiJson.dump($NATURAL_LANGUAGES).html_safe%>;
-  jQuery(document).data().bp.is_of_type = <%=MultiJson.dump($IS_OF_TYPE).html_safe%>;
-</script>
-
-<script src="lib/lunr.js/lunr.min.js"></script>
diff --git a/app/views/ontologies/browse.html.haml b/app/views/ontologies/browse.html.haml
index 3208034da..ddedb61a3 100644
--- a/app/views/ontologies/browse.html.haml
+++ b/app/views/ontologies/browse.html.haml
@@ -1,133 +1,75 @@
+
+
 .browse-center
   .browse-container
     %h2.browse-title Browse
     %hr#browse-title-line/
-    - if session[:user].nil?
-      %a.browse-upload-ontology-button{:href => "/login?redirect=/ontologies/new"}
-        %svg{:fill => "none", :height => "14", :viewbox => "0 0 15 14", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
-          %path{:d => "M3.46242 4.17686L6.91776 0.23682C6.98312 0.162278 7.06302 0.102677 7.15225 0.0618794C7.24149 0.0210821 7.33808 0 7.43576 0C7.53344 0 7.63003 0.0210821 7.71927 0.0618794C7.80851 0.102677 7.8884 0.162278 7.95377 0.23682L11.4092 4.17686C11.533 4.31795 11.5971 4.50373 11.5874 4.69334C11.5777 4.88295 11.4951 5.06086 11.3577 5.18792C11.2204 5.31498 11.0395 5.38079 10.8548 5.37087C10.6702 5.36095 10.497 5.27612 10.3732 5.13503L8.13286 2.58055V10.4116C8.13286 10.6015 8.05942 10.7836 7.92869 10.9178C7.79796 11.0521 7.62065 11.1275 7.43576 11.1275C7.25088 11.1275 7.07357 11.0521 6.94284 10.9178C6.8121 10.7836 6.73866 10.6015 6.73866 10.4116V2.58058L4.49846 5.13512C4.43719 5.20498 4.36313 5.26177 4.28049 5.30223C4.19785 5.3427 4.10826 5.36605 4.01684 5.37096C3.92541 5.37587 3.83394 5.36223 3.74764 5.33084C3.66135 5.29944 3.58192 5.2509 3.51389 5.18798C3.44586 5.12506 3.39057 5.04899 3.35117 4.96413C3.31176 4.87926 3.28902 4.78726 3.28425 4.69337C3.27947 4.59948 3.29274 4.50554 3.32331 4.41692C3.35388 4.32829 3.40115 4.24672 3.46242 4.17686ZM14.1744 12.488H0.697103C0.51222 12.488 0.334909 12.5635 0.204177 12.6977C0.0734445 12.832 0 13.0141 0 13.2039C0 13.3938 0.0734445 13.5759 0.204177 13.7101C0.334909 13.8444 0.51222 13.9198 0.697103 13.9198H14.1744C14.3593 13.9198 14.5366 13.8444 14.6673 13.7101C14.7981 13.5759 14.8715 13.3938 14.8715 13.2039C14.8715 13.0141 14.7981 12.832 14.6673 12.6977C14.5366 12.5635 14.3593 12.488 14.1744 12.488Z", :fill => "#31B404"}
-        Submit new ontology
-    - else
-      %a.browse-upload-ontology-button{:href => "/ontologies/new"}
-        %svg{:fill => "none", :height => "14", :viewbox => "0 0 15 14", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
-          %path{:d => "M3.46242 4.17686L6.91776 0.23682C6.98312 0.162278 7.06302 0.102677 7.15225 0.0618794C7.24149 0.0210821 7.33808 0 7.43576 0C7.53344 0 7.63003 0.0210821 7.71927 0.0618794C7.80851 0.102677 7.8884 0.162278 7.95377 0.23682L11.4092 4.17686C11.533 4.31795 11.5971 4.50373 11.5874 4.69334C11.5777 4.88295 11.4951 5.06086 11.3577 5.18792C11.2204 5.31498 11.0395 5.38079 10.8548 5.37087C10.6702 5.36095 10.497 5.27612 10.3732 5.13503L8.13286 2.58055V10.4116C8.13286 10.6015 8.05942 10.7836 7.92869 10.9178C7.79796 11.0521 7.62065 11.1275 7.43576 11.1275C7.25088 11.1275 7.07357 11.0521 6.94284 10.9178C6.8121 10.7836 6.73866 10.6015 6.73866 10.4116V2.58058L4.49846 5.13512C4.43719 5.20498 4.36313 5.26177 4.28049 5.30223C4.19785 5.3427 4.10826 5.36605 4.01684 5.37096C3.92541 5.37587 3.83394 5.36223 3.74764 5.33084C3.66135 5.29944 3.58192 5.2509 3.51389 5.18798C3.44586 5.12506 3.39057 5.04899 3.35117 4.96413C3.31176 4.87926 3.28902 4.78726 3.28425 4.69337C3.27947 4.59948 3.29274 4.50554 3.32331 4.41692C3.35388 4.32829 3.40115 4.24672 3.46242 4.17686ZM14.1744 12.488H0.697103C0.51222 12.488 0.334909 12.5635 0.204177 12.6977C0.0734445 12.832 0 13.0141 0 13.2039C0 13.3938 0.0734445 13.5759 0.204177 13.7101C0.334909 13.8444 0.51222 13.9198 0.697103 13.9198H14.1744C14.3593 13.9198 14.5366 13.8444 14.6673 13.7101C14.7981 13.5759 14.8715 13.3938 14.8715 13.2039C14.8715 13.0141 14.7981 12.832 14.6673 12.6977C14.5366 12.5635 14.3593 12.488 14.1744 12.488Z", :fill => "#31B404"}
-        Submit new ontology
-    .browse-search-bar
-      %input{:name => "search", :placeholder => "Ex: Agrovoc ...", :type => "text"}/
-      %select#format.browse-format-filter{:name => "format"}
-        %option{:disabled => "disabled", :hidden => "", :selected => "selected", :value => ""} Format
-        %option{:value => "OBO"} OBO
-        %option{:value => "OWL"} OWL
-        %option{:value => "SKOS"} SKOS
-        %option{:value => "UMLS"} UMLS
-      %select#Sort_by.browse-sort-by-filter{:name => "Sort_by"}
-        %option{:disabled => "disabled", :hidden => "", :selected => "selected", :value => ""} Sort by
-        %option{:value => "Popular"} Popular
-        %option{:value => "Name"} Name
-        %option{:value => "class count"} class count
-        %option{:value => "Instances/Concepts count"} Instances/Concepts count
-        %option{:value => "Projects"} Projects
-        %option{:value => "Notes"} Notes
-        %option{:value => "Upload date"} Upload date
-        %option{:value => "Release date"} Release date
-        %option{:value => "FAIR"} FAIR
-      .browse-search-button
-        %img{:src => "#{asset_path("search.svg")}"}/
-        %p Search
-    %br/
-    .browse-sub-container
-      .browse-first-row
-        %p.browse-filters-title Filters
-        %hr#browse-sub-title-line/
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-category-filtre", "data-toggle" => "collapse"}
-            %p Category
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-          #browse-category-filtre.collapse
-            .browse-filter-checks-container
-              - @categories.each do |category|
-                %div
-                  = render ChipsComponent.new(name:category.id, value: category.name)
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-group-filtre", "data-toggle" => "collapse"}
-            %p Group
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-          #browse-group-filtre.collapse
-            .browse-filter-checks-container
-              - @groups.each do |group|
-                %div
-                  = render ChipsComponent.new(name:group.id, value: group.name)
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-format-filtre", "data-toggle" => "collapse"}
-            %p Format
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-          #browse-format-filtre.collapse
-            .browse-filter-checks-container
-              - @formats.each do |format|
-                %div
-                  = render ChipsComponent.new(name:format, value: format)
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-ontology-content-filtre", "data-toggle" => "collapse"}
-            %p Ontology content
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-natural-language-filtre", "data-toggle" => "collapse"}
-            %p Natural language
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-formality-levels-filtre", "data-toggle" => "collapse"}
-            %p Formality levels
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-        .browse-filter
-          .browse-filter-title-bar{"data-target" => "#browse-is-of-type-filtre", "data-toggle" => "collapse"}
-            %p Is of type
-            %img{:src => "#{asset_path("arrow-down.svg")}"}/
-      .browse-second-row
-        %p.browse-desc-text{:style => "margin-bottom: 15px;"}
-          Showing 147 of 152
-        - @ontologies.each do |ontology|
-          .browse-ontology-container
-            .browse-ontology-description
-              %a.browse-ontology-title{:href => "/ontologies/#{ontology[:acronym]}"}
-                = ontology[:name]+" ("+ontology[:acronym]+")"
-              %p.browse-desc-text
-                = ontology[:description]
-              - unless ontology[:fairScore].nil? || ontology[:acronym] == 'AGROVOC'
-                .browse-fair
-                  %p.browse-fair-title
-                    FAIR score
-                  .browse-progress-bar
-                    .browse-faire-progress{:style => "width: #{ontology[:normalizedFairScore].to_s+"%"}"}
-                  %p.browse-fair-score
-                    = ontology[:fairScore]
-                  %a.browse-fair-details{:href => "/ontologies/#{ontology[:acronym]}#fair-details"} FAIR details ...
-              .browse-uploaded
-                %p Uploaded:
-                %p.browse-uploaded-date
-                  = ontology[:creationDate].to_s[0, 10]
-            .browse-ontology-cards
-              - if ontology[:format] != 'SKOS' && ontology[:class_count] > 0
-                %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
-                  %p.browse-card-number
-                    = ontology[:class_count_formatted]
-                  %p.browse-card-text
-                    classes
-              - if ontology[:individual_count] > 0
-                %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}?p=classes"}
-                  %p.browse-card-number
-                    = ontology[:individual_count_formatted]
-                  %p.browse-card-text
-                    = ontology[:format] == 'SKOS' ? "concepts" : "instances"
-              - if ontology[:project_count] > 0
-                %a.browse-onology-card{:href => "/ontologies/#{ontology[:acronym]}#projects_content"}
-                  %p.browse-card-number
-                    = ontology[:project_count]
-                  %p.browse-card-text
-                    projects
-              - if ontology[:note_count] > 0
-                %a.browse-onology-card{:href => "#"}
-                  %p.browse-card-number
-                    = ontology[:note_count]
-                  %p.browse-card-text
-                    notes
+    .browse-submit-new-ontology-and-you-are-admin-container
+      - if session[:user].nil?
+        %a.browse-upload-ontology-button{:href => "/login?redirect=/ontologies/new"}
+          %svg{:fill => "none", :height => "14", :viewbox => "0 0 15 14", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M3.46242 4.17686L6.91776 0.23682C6.98312 0.162278 7.06302 0.102677 7.15225 0.0618794C7.24149 0.0210821 7.33808 0 7.43576 0C7.53344 0 7.63003 0.0210821 7.71927 0.0618794C7.80851 0.102677 7.8884 0.162278 7.95377 0.23682L11.4092 4.17686C11.533 4.31795 11.5971 4.50373 11.5874 4.69334C11.5777 4.88295 11.4951 5.06086 11.3577 5.18792C11.2204 5.31498 11.0395 5.38079 10.8548 5.37087C10.6702 5.36095 10.497 5.27612 10.3732 5.13503L8.13286 2.58055V10.4116C8.13286 10.6015 8.05942 10.7836 7.92869 10.9178C7.79796 11.0521 7.62065 11.1275 7.43576 11.1275C7.25088 11.1275 7.07357 11.0521 6.94284 10.9178C6.8121 10.7836 6.73866 10.6015 6.73866 10.4116V2.58058L4.49846 5.13512C4.43719 5.20498 4.36313 5.26177 4.28049 5.30223C4.19785 5.3427 4.10826 5.36605 4.01684 5.37096C3.92541 5.37587 3.83394 5.36223 3.74764 5.33084C3.66135 5.29944 3.58192 5.2509 3.51389 5.18798C3.44586 5.12506 3.39057 5.04899 3.35117 4.96413C3.31176 4.87926 3.28902 4.78726 3.28425 4.69337C3.27947 4.59948 3.29274 4.50554 3.32331 4.41692C3.35388 4.32829 3.40115 4.24672 3.46242 4.17686ZM14.1744 12.488H0.697103C0.51222 12.488 0.334909 12.5635 0.204177 12.6977C0.0734445 12.832 0 13.0141 0 13.2039C0 13.3938 0.0734445 13.5759 0.204177 13.7101C0.334909 13.8444 0.51222 13.9198 0.697103 13.9198H14.1744C14.3593 13.9198 14.5366 13.8444 14.6673 13.7101C14.7981 13.5759 14.8715 13.3938 14.8715 13.2039C14.8715 13.0141 14.7981 12.832 14.6673 12.6977C14.5366 12.5635 14.3593 12.488 14.1744 12.488Z", :fill => "#31B404"}
+          Submit new ontology
+      - else
+        %a.browse-upload-ontology-button{:href => "/ontologies/new"}
+          %svg{:fill => "none", :height => "14", :viewbox => "0 0 15 14", :width => "15", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M3.46242 4.17686L6.91776 0.23682C6.98312 0.162278 7.06302 0.102677 7.15225 0.0618794C7.24149 0.0210821 7.33808 0 7.43576 0C7.53344 0 7.63003 0.0210821 7.71927 0.0618794C7.80851 0.102677 7.8884 0.162278 7.95377 0.23682L11.4092 4.17686C11.533 4.31795 11.5971 4.50373 11.5874 4.69334C11.5777 4.88295 11.4951 5.06086 11.3577 5.18792C11.2204 5.31498 11.0395 5.38079 10.8548 5.37087C10.6702 5.36095 10.497 5.27612 10.3732 5.13503L8.13286 2.58055V10.4116C8.13286 10.6015 8.05942 10.7836 7.92869 10.9178C7.79796 11.0521 7.62065 11.1275 7.43576 11.1275C7.25088 11.1275 7.07357 11.0521 6.94284 10.9178C6.8121 10.7836 6.73866 10.6015 6.73866 10.4116V2.58058L4.49846 5.13512C4.43719 5.20498 4.36313 5.26177 4.28049 5.30223C4.19785 5.3427 4.10826 5.36605 4.01684 5.37096C3.92541 5.37587 3.83394 5.36223 3.74764 5.33084C3.66135 5.29944 3.58192 5.2509 3.51389 5.18798C3.44586 5.12506 3.39057 5.04899 3.35117 4.96413C3.31176 4.87926 3.28902 4.78726 3.28425 4.69337C3.27947 4.59948 3.29274 4.50554 3.32331 4.41692C3.35388 4.32829 3.40115 4.24672 3.46242 4.17686ZM14.1744 12.488H0.697103C0.51222 12.488 0.334909 12.5635 0.204177 12.6977C0.0734445 12.832 0 13.0141 0 13.2039C0 13.3938 0.0734445 13.5759 0.204177 13.7101C0.334909 13.8444 0.51222 13.9198 0.697103 13.9198H14.1744C14.3593 13.9198 14.5366 13.8444 14.6673 13.7101C14.7981 13.5759 14.8715 13.3938 14.8715 13.2039C14.8715 13.0141 14.7981 12.832 14.6673 12.6977C14.5366 12.5635 14.3593 12.488 14.1744 12.488Z", :fill => "#31B404"}
+          Submit new ontology
+      - if session[:user]&.admin?
+        .browse-you-are-admin
+          %h3 Welcome admin
+          %div
+            %svg{:fill => "none", :height => "11", :viewbox => "0 0 11 11", :width => "11", :xmlns => "http://www.w3.org/2000/svg"}
+              %circle{:cx => "5.5", :cy => "5.5", :fill => "#145FF4", :r => "5.5"}
+            %p This coloring indicates admin-only features
+
+    %div{data: { controller: "turbo-frame history browse-filters" , "turbo-frame-url-value": "/ontologies_filter", action: "change->browse-filters#dispatchFilterEvent changed->history#updateURL changed->turbo-frame#updateFrame"}}
+      .browse-search-bar
+        .browse-search-container
+          %input{:name => "search", :placeholder => "Ex: Agrovoc ...", :type => "text", :value => @search, data: {action: "input->browse-filters#dispatchInputEvent"}}
+          .browse-search-filters
+            %select#format.browse-format-filter{:name => "format"}
+              - format= [["All formats",""], "OBO", "OWL", "SKOS", "UMLS"]
+              = options_for_select(format, @selected_format)
+            %select#Sort_by.browse-sort-by-filter{:name => "Sort_by"}
+              %option{:disabled => "disabled", :hidden => "", :selected => "selected", :value => ""} Sort by
+              %option{:value => "Popular"} Popular
+              %option{:value => "Name"} Name
+              %option{:value => "class count"} class count
+              %option{:value => "Instances/Concepts count"} Instances/Concepts count
+              %option{:value => "Projects"} Projects
+              %option{:value => "Notes"} Notes
+              %option{:value => "Upload date"} Upload date
+              %option{:value => "Release date"} Release date
+              %option{:value => "FAIR"} FAIR
+
+      .browse-sub-container
+        .browse-first-row{data:{controller: "browse-filters", action: "change->browse-filters#dispatchFilterEvent changed->history#updateURL changed->turbo-frame#updateFrame"}}
+          %p.browse-filters-title Filters
+          %hr#browse-sub-title-line
+          = render SwitchInputComponent.new(id:'filter-views', name:'views', checked: @show_views) do
+            Show ontology views
+          = render SwitchInputComponent.new(id:'filter-retired', name:'retired',checked: @show_retired) do
+            Show retired ontologies
+
+          - @filters.each do |key, values|
+            - if session[:user]&.admin? ||  key != :missingStatus
+              .browse-filter{data:{controller: "show-filter-count browse-filters", action: "change->show-filter-count#updateCount change->browse-filters#dispatchFilterEvent"}, id: "#{key}_filter_container", style: "#{"border-color: #145FF4;" if key == :missingStatus}"}
+                .browse-filter-title-bar{"data-target" => "#browse-#{key}-filter", "data-toggle" => "collapse"}
+                  %p
+                    #{key.to_s.underscore.humanize.capitalize}
+                    %span.badge.badge-secondary{"data-show-filter-count-target":"countSpan", style: "#{values[2] && values[2].positive? ? '' : 'display: none;'}"}
+                      = values[2] 
+                  %img{:src => "#{asset_path("arrow-down.svg")}"}/
+                .collapse{id: "browse-#{key}-filter", class: "#{values[2].positive? ? 'show': ''}"}
+                  .browse-filter-checks-container
+                    - values.first.each do |object|
+                      %div
+                        = render ChipsComponent.new(name: object["acronym"], value: object["name"] || object["id"], checked: values[1]&.include?(object["id"]))
+
+
 
+        .browse-second-row
+          = render TurboFrameComponent.new(id:"search-results" , src: "/ontologies_filter?#{request.original_url.split('?').last}",
+              data:{"turbo-frame-target":"frame", "turbo-frame-url-value": "/ontologies_filter"})
+