From 99dfb6c75784a1329526bd1aa86438ce7f8d59a0 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 15:59:08 -0700
Subject: [PATCH 01/95] Use Bootstrap Ruby instead of bootstrap-sass (#74)

---
 Gemfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index 1ae6006440..7dbae98ed8 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,7 +12,7 @@ gem 'uglifier', '>= 1.0.3'
 
 gem 'jquery-ui-rails'
 gem 'jquery-rails'
-gem 'bootstrap-sass', '~> 3.3.7'
+gem 'bootstrap', '~> 4.0.0'
 gem 'font-awesome-sass', '~> 4.7.0'
 gem 'chart-js-rails'
 gem 'select2-rails'

From adae8cb6430f719a793d46e89e70b6aadda406f5 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:00:33 -0700
Subject: [PATCH 02/95] Gemfile.lock update

---
 Gemfile.lock | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 94608b28fe..0ac968c733 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -64,9 +64,10 @@ GEM
     arel (6.0.4)
     autoprefixer-rails (8.3.0)
       execjs
-    bootstrap-sass (3.3.7)
-      autoprefixer-rails (>= 5.2.1)
-      sass (>= 3.3.4)
+    bootstrap (4.0.0)
+      autoprefixer-rails (>= 6.0.3)
+      popper_js (>= 1.12.9, < 2)
+      sass (>= 3.5.2)
     builder (3.2.3)
     capistrano (3.8.2)
       airbrussh (>= 1.0.0)
@@ -159,6 +160,7 @@ GEM
       mini_portile2 (~> 2.3.0)
     oj (3.5.1)
     open_uri_redirections (0.2.1)
+    popper_js (1.12.9)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -252,7 +254,7 @@ PLATFORMS
   x86_64-darwin-16
 
 DEPENDENCIES
-  bootstrap-sass (~> 3.3.7)
+  bootstrap (~> 4.0.0)
   capistrano (~> 3.8.2)
   capistrano-bundler
   capistrano-locally

From 38bbe73ef8b3a750a1a378d3fa0cab0ec1372a1e Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:20:01 -0700
Subject: [PATCH 03/95] Upgrade Bootstrap Ruby gem to 4.1.0

#74
---
 Gemfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index 7dbae98ed8..82822e8412 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,7 +12,7 @@ gem 'uglifier', '>= 1.0.3'
 
 gem 'jquery-ui-rails'
 gem 'jquery-rails'
-gem 'bootstrap', '~> 4.0.0'
+gem 'bootstrap', '~> 4.1.0'
 gem 'font-awesome-sass', '~> 4.7.0'
 gem 'chart-js-rails'
 gem 'select2-rails'

From c3c5dc73fc172462e974d48792a3fe30d3675ec4 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:20:33 -0700
Subject: [PATCH 04/95] Gemfile.lock update

---
 Gemfile.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 0ac968c733..84a3e7c62f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -64,7 +64,7 @@ GEM
     arel (6.0.4)
     autoprefixer-rails (8.3.0)
       execjs
-    bootstrap (4.0.0)
+    bootstrap (4.1.0)
       autoprefixer-rails (>= 6.0.3)
       popper_js (>= 1.12.9, < 2)
       sass (>= 3.5.2)
@@ -254,7 +254,7 @@ PLATFORMS
   x86_64-darwin-16
 
 DEPENDENCIES
-  bootstrap (~> 4.0.0)
+  bootstrap (~> 4.1.0)
   capistrano (~> 3.8.2)
   capistrano-bundler
   capistrano-locally

From 72fd26fb42ed676fb040140e1cf3bcb2a89d3a21 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:22:43 -0700
Subject: [PATCH 05/95] Import Bootstrap styles

#74
---
 app/assets/stylesheets/application.css.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 33ad7e5ae5..e59ce1e626 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -26,6 +26,7 @@
  *
  */
 
+@import "bootstrap";
 @import "font-awesome-sprockets";
 @import "font-awesome";
 

From c00534cb0506d91491d76003451b16d9cad84a4c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:39:27 -0700
Subject: [PATCH 06/95] Shorten file extensions from css.scss to just scss

#74
---
 app/assets/stylesheets/{admin.css.scss => admin.scss}             | 0
 app/assets/stylesheets/{annotator.css.scss => annotator.scss}     | 0
 app/assets/stylesheets/{bioportal.css.scss => bioportal.scss}     | 0
 ...tstrap_and_overrides.css.scss => bootstrap_and_overrides.scss} | 0
 app/assets/stylesheets/{home.css.scss => home.scss}               | 0
 app/assets/stylesheets/{mappings.css => mappings.scss}            | 0
 app/assets/stylesheets/{recommender.css => recommender.scss}      | 0
 .../stylesheets/{resource_index.css.scss => resource_index.scss}  | 0
 app/assets/stylesheets/{submissions.css.scss => submissions.scss} | 0
 app/assets/stylesheets/{tree.css => tree.scss}                    | 0
 10 files changed, 0 insertions(+), 0 deletions(-)
 rename app/assets/stylesheets/{admin.css.scss => admin.scss} (100%)
 rename app/assets/stylesheets/{annotator.css.scss => annotator.scss} (100%)
 rename app/assets/stylesheets/{bioportal.css.scss => bioportal.scss} (100%)
 rename app/assets/stylesheets/{bootstrap_and_overrides.css.scss => bootstrap_and_overrides.scss} (100%)
 rename app/assets/stylesheets/{home.css.scss => home.scss} (100%)
 rename app/assets/stylesheets/{mappings.css => mappings.scss} (100%)
 rename app/assets/stylesheets/{recommender.css => recommender.scss} (100%)
 rename app/assets/stylesheets/{resource_index.css.scss => resource_index.scss} (100%)
 rename app/assets/stylesheets/{submissions.css.scss => submissions.scss} (100%)
 rename app/assets/stylesheets/{tree.css => tree.scss} (100%)

diff --git a/app/assets/stylesheets/admin.css.scss b/app/assets/stylesheets/admin.scss
similarity index 100%
rename from app/assets/stylesheets/admin.css.scss
rename to app/assets/stylesheets/admin.scss
diff --git a/app/assets/stylesheets/annotator.css.scss b/app/assets/stylesheets/annotator.scss
similarity index 100%
rename from app/assets/stylesheets/annotator.css.scss
rename to app/assets/stylesheets/annotator.scss
diff --git a/app/assets/stylesheets/bioportal.css.scss b/app/assets/stylesheets/bioportal.scss
similarity index 100%
rename from app/assets/stylesheets/bioportal.css.scss
rename to app/assets/stylesheets/bioportal.scss
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
similarity index 100%
rename from app/assets/stylesheets/bootstrap_and_overrides.css.scss
rename to app/assets/stylesheets/bootstrap_and_overrides.scss
diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.scss
similarity index 100%
rename from app/assets/stylesheets/home.css.scss
rename to app/assets/stylesheets/home.scss
diff --git a/app/assets/stylesheets/mappings.css b/app/assets/stylesheets/mappings.scss
similarity index 100%
rename from app/assets/stylesheets/mappings.css
rename to app/assets/stylesheets/mappings.scss
diff --git a/app/assets/stylesheets/recommender.css b/app/assets/stylesheets/recommender.scss
similarity index 100%
rename from app/assets/stylesheets/recommender.css
rename to app/assets/stylesheets/recommender.scss
diff --git a/app/assets/stylesheets/resource_index.css.scss b/app/assets/stylesheets/resource_index.scss
similarity index 100%
rename from app/assets/stylesheets/resource_index.css.scss
rename to app/assets/stylesheets/resource_index.scss
diff --git a/app/assets/stylesheets/submissions.css.scss b/app/assets/stylesheets/submissions.scss
similarity index 100%
rename from app/assets/stylesheets/submissions.css.scss
rename to app/assets/stylesheets/submissions.scss
diff --git a/app/assets/stylesheets/tree.css b/app/assets/stylesheets/tree.scss
similarity index 100%
rename from app/assets/stylesheets/tree.css
rename to app/assets/stylesheets/tree.scss

From e406e329da922036221e24d9c98cfa911dda311f Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 16:49:58 -0700
Subject: [PATCH 07/95] Remove bootstrap-sockets

This was required for bootstrap-sass (Bootstrap 3), but not Bootstrap
Ruby Gem (Bootstrap 4).
---
 app/assets/stylesheets/bootstrap_and_overrides.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
index e46a7f380f..7c465d204f 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_and_overrides.scss
@@ -1,4 +1,3 @@
-@import "bootstrap-sprockets";
 @import "bootstrap";
 
 /* Sticky footer styles from Bootstrap: 

From 992a74e6abe84b15de24466a3c5fd69ef79a44a9 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 17:03:01 -0700
Subject: [PATCH 08/95] Require popper (Bootstrap 4 dependency)

#74
---
 app/assets/javascripts/vendor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/vendor.js b/app/assets/javascripts/vendor.js
index a8bb6a5ff1..fb3c8691b2 100644
--- a/app/assets/javascripts/vendor.js
+++ b/app/assets/javascripts/vendor.js
@@ -11,6 +11,7 @@
 //= require jquery-migrate-1.3.0.min
 //= require jquery_ujs
 //= require jquery-ui
+//= require popper
 //= require bootstrap-sprockets
 //
 //= require jquery.blockUI

From 7002bbd53518f5909ab544da4ba0a1ad78b76de1 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 17 Apr 2018 17:41:08 -0700
Subject: [PATCH 09/95] Refactor application manifest for stylesheets

#74
---
 app/assets/stylesheets/application.css.scss    | 18 ++++++++++++++----
 .../stylesheets/bootstrap_and_overrides.scss   |  2 --
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index e59ce1e626..6239a1927b 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -8,10 +8,7 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require_self
  *= require jquery-ui
- *= require_tree .
- *
  *= require alertify
  *= require chosen
  *= require facebox
@@ -26,7 +23,20 @@
  *
  */
 
+/* BioPortal */
+@import "admin";
+@import "annotator";
+@import "bioportal";
+@import "bootstrap_and_overrides";
+@import "home";
+@import "mappings";
+@import "recommender";
+@import "resource_index";
+@import "submissions";
+@import "tree";
+@import "visits";
+
+/* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "font-awesome-sprockets";
 @import "font-awesome";
-
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
index 7c465d204f..2f6a0eed09 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_and_overrides.scss
@@ -1,5 +1,3 @@
-@import "bootstrap";
-
 /* Sticky footer styles from Bootstrap: 
    http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
 -------------------------------------------------- */

From 23a5c6e2ae133d4f870a27b57cf02ff6df2f258d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 19 Apr 2018 10:32:10 -0700
Subject: [PATCH 10/95] Rename CSS file

---
 app/assets/stylesheets/application.css.scss                     | 2 +-
 .../{bootstrap_and_overrides.scss => bootstrap_overrides.scss}  | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/assets/stylesheets/{bootstrap_and_overrides.scss => bootstrap_overrides.scss} (100%)

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 6239a1927b..f22e983a49 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -27,7 +27,7 @@
 @import "admin";
 @import "annotator";
 @import "bioportal";
-@import "bootstrap_and_overrides";
+@import "bootstrap_overrides";
 @import "home";
 @import "mappings";
 @import "recommender";
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_overrides.scss
similarity index 100%
rename from app/assets/stylesheets/bootstrap_and_overrides.scss
rename to app/assets/stylesheets/bootstrap_overrides.scss

From 30ea5fd5fc05f1e03a525456a1b377a5e9557f4a Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 20 Apr 2018 17:12:10 -0700
Subject: [PATCH 11/95] Refactor top navigation bar to use Bootstrap 4

---
 app/assets/javascripts/bioportal.js.erb       |   2 +-
 app/assets/stylesheets/bioportal.scss         |  75 +----------
 .../stylesheets/bootstrap_overrides.scss      |  25 ----
 app/views/layouts/_topnav.html.haml           | 124 +++++++-----------
 4 files changed, 55 insertions(+), 171 deletions(-)

diff --git a/app/assets/javascripts/bioportal.js.erb b/app/assets/javascripts/bioportal.js.erb
index 61e1bc54ca..39b68a27eb 100644
--- a/app/assets/javascripts/bioportal.js.erb
+++ b/app/assets/javascripts/bioportal.js.erb
@@ -528,7 +528,7 @@ function bpPopWindow(e) {
     newWindow.focus()
   };
 }
-jQuery("div.footer-support, ul.dropdown-menu.support-menu").on("click", "a.pop_window", { w: "800", h: "600" }, bpPopWindow)
+jQuery("div.footer-support, div.dropdown-menu.dropdown-menu-right").on("click", "a.pop_window", { w: "800", h: "600" }, bpPopWindow)
 
 /**************************************************************
  * Standardized BP modal popups
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 9b4ba5f1a4..f900926f58 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1514,45 +1514,6 @@ button.fg-button-menu, button.fg-button {
     padding-left: 10px;
 }
 
-
-/************************************
- * Top-right Nav Menu
- ************************************/
-
-#top_right_menu {
-  padding-top: .9em !important;
-}
-
-#top_right_menu .ui-state-default, #top_right_menu .ui-widget-content .ui-state-default, #top_right_menu .ui-widget-header .ui-state-default {
-  background: none;
-  border: none;
-  border-right: 1px solid #AED0EA;
-  color: white;
-}
-
-#top_right_menu .ui-state-active {
-  background: #3baae3 image-url('jquery-ui-1.8.1.custom/ui-bg_glass_50_3baae3_1x400.png') 50% 50% repeat-x;
-  font-weight: bold;
-  color: #ffffff;
-  border-right: 1px solid #3baae3;
-}
-
-#top_right_menu .ui-state-active .ui-icon {
-  background-image: image-url('jquery-ui-1.8.1.custom/ui-icons_ffffff_256x240.png') !important;
-}
-
-#top_right_menu .ui-state-default .ui-icon {
-  background-image: image-url('jquery-ui-1.8.1.custom/ui-icons_72a7cf_256x240.png');
-}
-
-#top_right_menu .ui-state-default a:hover, #top_right_menu .ui-widget-content .ui-state-default a:hover, #top_right_menu .ui-widget-header .ui-state-default a:hover {
-  color: gray;
-}
-
-.top_right_menu_last {
-  border: none !important;
-}
-
 /************************************
  * Browse Page
  ************************************/
@@ -1627,12 +1588,14 @@ button.fg-button-menu, button.fg-button {
 }
 
 /************************************
- * Topnav header
+ * Top navigation bar
  ************************************/
+#topNavLoginLink {
+  color: #C58612;
+}
 
-.bp_nav_link {
-  display: block;
-  height: 43px;
+.navbar-custom {
+  background-color: #234979;
 }
 
 .nav_text a {
@@ -1652,32 +1615,6 @@ button.fg-button-menu, button.fg-button {
   color: lightGray !important;
 }
 
-/**
- * Ordering of these two class definitions needs to remain as-is for high-res images to work
- **/
-.nav_logo {
-  background: image-url('layout/nav_logo.png') no-repeat;
-  background-size: 126px 43px;
-  height: 43px;
-  width: 126px;
-  display: block;
-}
-@media (-webkit-min-device-pixel-ratio: 2),
-(-o-min-device-pixel-ratio: 2/1),
-(min--moz-device-pixel-ratio: 2),
-(min-device-pixel-ratio: 2),
-(min-resolution: 2dppx),
-(dpi: 196dpi) {
-    .nav_logo {
-        background: image-url('layout/nav_logo_hi_res.png') no-repeat;
-        background-size: 126px 43px;
-        height: 43px;
-        width: 126px;
-        display: block;
-    }
-}
-
-
 /************************************
  * Ontology picker
  ************************************/
diff --git a/app/assets/stylesheets/bootstrap_overrides.scss b/app/assets/stylesheets/bootstrap_overrides.scss
index 2f6a0eed09..1038da898c 100644
--- a/app/assets/stylesheets/bootstrap_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_overrides.scss
@@ -20,31 +20,6 @@ body {
   padding: 30px 0;
 }
 
-/* Top navigation bar
--------------------------------------------------- */
-.navbar-inverse {
-  background-color: #234979;
-  border: 0;
-  box-shadow: 0 3px 5px #999;
-}
-
-.navbar-brand {
-  height: 80px;
-}
-
-.navbar-inverse .navbar-nav > li > a {
-  font-size: 150%;
-  height: 80px;
-  line-height: 80px;
-  padding-top: 0;
-}
-
-.navbar-inverse .navbar-nav > .open > a, 
-.navbar-inverse .navbar-nav > .open > a:hover, 
-.navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #4D82C5;
-}
-
 /* Footer 
 -------------------------------------------------- */
 .social-icons li {
diff --git a/app/views/layouts/_topnav.html.haml b/app/views/layouts/_topnav.html.haml
index 6cced9a0b9..452cf6dc3f 100644
--- a/app/views/layouts/_topnav.html.haml
+++ b/app/views/layouts/_topnav.html.haml
@@ -1,77 +1,49 @@
-%nav.navbar.navbar-inverse.navbar-static-top
-  
-  %div.container-fluid
-
-    %div.navbar-header
-      = button_tag(type: "button", class: "navbar-toggle collapsed", data: { toggle: "collapse", target: "#navbar" }, aria: { expanded: "false", controls: "navbar" }) do
-        %span{class: "sr-only"} Toggle navigation
-        %span{class: "icon-bar"}
-        %span{class: "icon-bar"}
-        %span{class: "icon-bar"}
-      = link_to(image_tag("logos/bioportal-logo.png"), root_path(), class: "navbar-brand")
-
-    %div#navbar.navbar-collapse.collapse
-
-      %ul.nav.navbar-nav.navbar-right
-        - if session[:user].nil?
-          %li
-            = link_to("Login", login_index_path(redirect: request.original_url), style: "color: #C58612")
-        - else
-          -# Account menu
-          %li.dropdown
-            = link_to("#", class: "dropdown-toggle", role: "button", data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}) do
-              = session[:user].username
-              %i.fa.fa-caret-square-o-down{aria: "hidden: true"}
-            %ul.dropdown-menu
-              %li
-                = link_to("Account Settings", "/account")
-              - unless session[:ontologies].nil?
-                %li.divider{role: "separator"}
-                %li.dropdown-header Recently Viewed
-                - for ont in session[:ontologies]
-                  %li
-                    = link_to(ont.ontology_name, "/ontologies/#{ont.ontology_acronym}/?p=classes&conceptid=#{CGI.escape(ont.concept)}")
-                %li.divider{role: "separator"}
-              %li
-                = link_to("Logout", logout_path())
-
-        -# Tools menu
-        %li.dropdown
-          = link_to("#", class: "dropdown-toggle", role: "button", data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}) do
-            Tools
-            %i.fa.fa-caret-square-o-down{aria: "hidden: true"}
-          %ul.dropdown-menu
-            -if (!session[:user].nil? && session[:user].admin?)
-              %li
-                = link_to("Admin", admin_index_path())
-            %li
-              = link_to("Ontology Browser", ontologies_path())
-            %li
-              = link_to("Search", "/search")
-            %li
-              = link_to("Annotator", annotator_index_path())
-            %li
-              = link_to("Mappings", mappings_path())
-            %li
-              = link_to("Recommender", recommender_index_path())
-            - unless Rails.env.appliance?
-              %li
-                = link_to("Resource Index", resource_index_index_path())            
-        
-        -# Support menu
-        %li.dropdown
-          = link_to("#", class: "dropdown-toggle", role: "button", data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}) do
-            Support
-            %i.fa.fa-caret-square-o-down{aria: "hidden: true"}
-          %ul.dropdown-menu.support-menu
-            %li
-              = link_to("Submit Feedback", feedback_path(location: encode_param(request.url)), class: 'pop_window')
-            %li.divider{role: "separator"}
-            %li.dropdown-header Documentation
-            %li
-              = link_to("Help", "#{$WIKI_HELP_PAGE}", target: "_blank")
-            %li
-              = link_to("Release Notes", "#{$RELEASE_NOTES}", target: "_blank")
-            %li
-              = link_to("How to Cite", "https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal", target: "_blank")
+%nav.navbar.navbar-expand-lg.navbar-dark.navbar-custom
+  = link_to(image_tag("logos/bioportal-logo.png"), root_path(), class: "navbar-brand")
+  = button_tag(type: "button", class: "navbar-toggler", data: {toggle: "collapse", target: "#topNavigationToggler"}, aria: {controls: "topNavigationToggler", expanded: "false", label: "Toggle navigation"}) do
+    %span.navbar-toggler-icon
 
+  %div#topNavigationToggler.navbar-collapse.collapse.justify-content-between
+    %ul.navbar-nav
+      %li.nav-item
+        = link_to("Ontologies", ontologies_path(), class: "nav-link")
+      %li.nav-item
+        = link_to("Search", "/search", class: "nav-link")
+      %li.nav-item
+        = link_to("Annotator", annotator_index_path(), class: "nav-link")
+      %li.nav-item
+        = link_to("Recommender", recommender_index_path(), class: "nav-link")
+      %li.nav-item
+        = link_to("Mappings", mappings_path(), class: "nav-link")
+      - unless Rails.env.appliance?
+        %li.nav-item
+          = link_to("Resource Index", resource_index_index_path(), class: "nav-link")
+    %ul.navbar-nav
+      - if session[:user].nil?
+        %li.nav-item
+          = link_to("Login", login_index_path(redirect: request.original_url), id: "topNavLoginLink", class: "nav-link")
+      - else
+        -# Account menu
+        %li.nav-item.dropdown
+          = link_to("#", id: "accountMenuDropdownLink", class: "nav-link dropdown-toggle", role: "button", data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}) do
+            = session[:user].username
+          %div.dropdown-menu.dropdown-menu-right{aria: {labelledby: "accountMenuDropdownLink"}}
+            = link_to("Account Settings", "/account", class: "dropdown-item")
+            - unless session[:ontologies].nil?
+              %div.dropdown-divider
+              %h6.dropdown-header Recently Viewed
+              - for ont in session[:ontologies]
+                = link_to(ont.ontology_name, "/ontologies/#{ont.ontology_acronym}/?p=classes&conceptid=#{CGI.escape(ont.concept)}", class: "dropdown-item")
+              %div.dropdown-divider
+            = link_to("Logout", logout_path(), class: "dropdown-item")            
+      -# Support menu
+      %li.nav-item.dropdown
+        = link_to("#", id: "supportMenuDropdownLink", class: "nav-link dropdown-toggle", role: "button", data: {toggle: "dropdown"}, aria: {haspopup: "true", expanded: "false"}) do
+          Support
+        %div.dropdown-menu.dropdown-menu-right{aria: {labelledby: "supportMenuDropdownLink"}}
+          = link_to("Submit Feedback", feedback_path(location: encode_param(request.url)), id: "submitFeedbackMenuItem", class: "dropdown-item pop_window")
+          %div.dropdown-divider
+          %h6.dropdown-header Documentation
+          = link_to("Help", "#{$WIKI_HELP_PAGE}", target: "_blank", class: "dropdown-item")
+          = link_to("Release Notes", "#{$RELEASE_NOTES}", target: "_blank", class: "dropdown-item")
+          = link_to("How to Cite", "https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal", target: "_blank", class: "dropdown-item")
\ No newline at end of file

From d8ae6ca472f8932aac48709fc7eca0dbabda5d03 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 25 Apr 2018 11:36:52 -0700
Subject: [PATCH 12/95] Move JS out of home view and into asset pipeline

---
 Gemfile.lock                          |  10 +-
 app/assets/javascripts/application.js |   1 +
 app/assets/javascripts/home.js        | 207 +++++++++++++++++++++++++
 app/controllers/home_controller.rb    |  10 ++
 app/views/home/index.html.haml        | 214 +-------------------------
 5 files changed, 226 insertions(+), 216 deletions(-)
 create mode 100644 app/assets/javascripts/home.js

diff --git a/Gemfile.lock b/Gemfile.lock
index 84a3e7c62f..d635ff99fc 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -99,13 +99,13 @@ GEM
     cube-ruby (0.0.3)
     daemons (1.2.6)
     dalli (2.7.8)
-    domain_name (0.5.20170404)
+    domain_name (0.5.20180417)
       unf (>= 0.0.5, < 1.0.0)
     erubis (2.7.0)
     eventmachine (1.2.5)
     excon (0.62.0)
     execjs (2.7.0)
-    faraday (0.14.0)
+    faraday (0.15.0)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.23)
     flamegraph (0.9.5)
@@ -127,7 +127,7 @@ GEM
     i18n-debug (1.1.1)
       i18n (< 2)
     iconv (1.0.5)
-    jquery-rails (4.3.1)
+    jquery-rails (4.3.3)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
@@ -164,7 +164,7 @@ GEM
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    rack (1.6.9)
+    rack (1.6.10)
     rack-mini-profiler (1.0.0)
       rack (>= 1.2.0)
     rack-test (0.6.3)
@@ -242,7 +242,7 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.9)
+    uglifier (4.1.10)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 5e43500a12..2d40ea7e53 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -29,6 +29,7 @@
 //= require bp_recommender
 //= require bp_property_tree
 //= require bp_ont_chart
+//= require home
 //= require projects
 //= require submissions
 
diff --git a/app/assets/javascripts/home.js b/app/assets/javascripts/home.js
new file mode 100644
index 0000000000..f244116035
--- /dev/null
+++ b/app/assets/javascripts/home.js
@@ -0,0 +1,207 @@
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+function jumpToValueOntology() {
+  var ontology = jQuery("#find_ontology")[0].value;
+  var ontology_id = jQuery("#find_ontology_id").val();
+
+  if (ontology_id == null || ontology_id == "") {
+    // didnt pick an ont
+    alert("The ontology does not exist. You must pick an ontology from the list.")
+
+    return false;
+  }
+
+  if (!!ontology_id) {
+    var sValue = jQuery("#find_ontology_id").val();
+    if (sValue == null || sValue == "") {
+      sValue = data;
+    }
+    document.location="/ontologies/"+sValue;
+    jQuery.blockUI({ message: '<h1>#{image_tag("jquery.simple.tree/spinner.gif")} Loading Ontology...</h1>' });
+    return;
+  }
+}
+
+function formatResultOntologySearch(value, data) {
+  jQuery("#find_ontology_id").val("");
+  var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
+  var keywords = jQuery("#find_ontology").val().replace(specials, "\\$&").split(' ').join('|');
+  var regex = new RegExp( '(' + keywords + ')', 'gi' );
+  return value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
+}
+
+function jumpToValueResource(){
+  var cls = jQuery("#find_resource")[0].value;
+  var data = jQuery('body').data("resource_results");
+
+  if (data == null) {
+    // I'm doing a search
+    var search = confirm("Press OK to Search for resources using the concept, or Cancel to select a concept")
+    if (search) {
+      query = jQuery("#find_resource").val();
+      document.location="/resource_index";
+      return;
+    }
+  }
+
+  if (!!data) {
+    var concept_id = data[0];
+    var ontology_version_id = data[2];
+    var ontology_id = data[7];
+    var full_ontology_id = jQuery(document).data().bp.config.rest_url + "/ontologies/" + ontology_id;
+    window.location = "/resource_index/resources?classes[" + encodeURIComponent(full_ontology_id) + "]=" + encodeURIComponent(concept_id);
+    return;
+  }
+}
+
+function formatItemResource(value, data) {
+  jQuery('body').data("resource_results", null);
+  var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
+  var keywords = jQuery("#find_resource").val().replace(specials, "\\$&").split(' ').join('|');
+  var regex = new RegExp( '(' + keywords + ')', 'gi' );
+
+  // data[7] is the ontology_id, only included when searching multiple ontologies
+  if (data[6] == undefined) {
+    var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>";
+  } else {
+    var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>" + "<span style='color:grey;font-size:7pt;'> from: " + data[6] + "</span>";
+  }
+
+  return result;
+}
+
+// We use this in conjunction with autocomplete because autocomplete
+// fails when there are multiple results with the same class name
+function selectResource(value, data) {
+  jQuery('body').data("resource_results", value.data);
+  jumpToValueResource();
+}
+
+// Sets a hidden form value that records the virtual id when a concept is chosen in the jump to
+// This is a workaround because the default autocomplete search method cannot distinguish between two
+// ontologies that have the same preferred name but different ids.
+function selectFindOntology(value, data){
+  jQuery("#find_ontology_id").val(value.data[0]);
+  jQuery("#find_ontology").focus();
+  jumpToValueOntology();
+}
+
+var ontologies_array = [];
+var findOntologyInput = document.getElementById("find_ontology");
+if (findOntologyInput) {
+  ontologies_array = JSON.parse(findOntologyInput.dataset.ontologynames);
+}
+
+jQuery(document).ready(function() {
+  jQuery("#find_ontology").autocomplete({
+    selectFirst: true,
+    data: ontologies_array,
+    minChars: 1,
+    matchSubset: 1,
+    maxItemsToShow: 20,
+    delay: 1,
+    showResult: formatResultOntologySearch,
+    onItemSelect: selectFindOntology
+  });
+
+  jQuery("#find_resource").autocomplete({
+    selectFirst: true,
+    url: "/search/json_search/",
+    extraParams: { separator: "\n" },
+    cacheLength: 1,
+    maxCacheLength: 1,
+    matchSubset: 0,
+    minChars: 3,
+    maxItemsToShow: 20,
+    showResult: formatItemResource,
+    onItemSelect: selectResource
+  });
+
+  jQuery('ul.sf-menu').superfish({
+    animation: {height:'show'},   // slide-down effect without fade-in
+    delay:     1200               // 1.2 second delay on mouseout);
+  });
+
+  var visitsChartDiv = document.getElementById("ontology-visits-chart");
+
+  if (visitsChartDiv) {
+    var ontNamesObject = JSON.parse(visitsChartDiv.dataset.ontnames);
+    var ontNames = Object.keys(ontNamesObject);
+    var ontNumbers = JSON.parse(visitsChartDiv.dataset.ontnumbers);
+    var onts = JSON.parse(visitsChartDiv.dataset.ontnames);
+    var ctx = document.getElementById("myChart");
+
+    var myChart = new Chart(ctx, {
+      type: 'horizontalBar',
+      data: {
+        labels: ontNames,
+        datasets: [{
+          label: "Ontology Visits",
+          data: ontNumbers,
+          backgroundColor: "rgba(151,187,205,0.2)",
+          borderColor: "rgba(151,187,205,1)",
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        legend: {
+          display: false
+        },
+        scales: {
+          xAxes: [{
+            ticks: {
+              beginAtZero: true,
+              stepSize: 5000,
+              // Return an empty string to draw the tick line but hide the tick label
+              // Return `null` or `undefined` to hide the tick line entirely
+              userCallback: function(value, index, values) {
+                return numberWithCommas(value);
+              }
+            }
+          }],
+          yAxes: [{
+            ticks: {}
+          }]
+        },
+        tooltips: {
+          enabled: true,
+          callbacks: {
+            title: function(tooltipItems, data) {
+              lbl = onts[tooltipItems[0].yLabel];
+
+              if (lbl.length > 45) {
+                lbl = lbl.substring(0, 37) + "...";
+              }
+              return lbl + " (" + tooltipItems[0].yLabel + ")";
+            },
+            label: function(tooltipItem, data) {
+              return data.datasets[0].label + ": " + numberWithCommas(tooltipItem.xLabel);
+            }
+          }
+        },
+        hover: {
+          onHover: function(e) {
+            jQuery("#myChart").css("cursor", e[0] ? "pointer" : "default");
+          }
+        }
+      }
+    });
+
+    ctx.onclick = function(evt) {
+      var activePoints = myChart.getElementsAtEvent(evt);
+
+      if (activePoints.length > 0) {
+        // get the internal index of slice in pie chart
+        var clickedElementIndex = activePoints[0]["_index"];
+        // get specific label by index
+        var label = myChart.data.labels[clickedElementIndex];
+        // get value by index
+        // var value = myChart.data.datasets[0].data[clickedElementIndex];
+        window.location.href = "/ontologies/" + label;
+      }
+    }
+  }
+});
\ No newline at end of file
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index a38d769d1f..974644da37 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -27,6 +27,16 @@ def index
     @direct_annotations = @ri_stats[:total][:direct]
     @direct_expanded_annotations = @ri_stats[:total][:ancestors]
     @analytics = LinkedData::Client::Analytics.last_month
+
+    @ontology_names = @ontologies.map{ |ont| ["#{ont.name} (#{ont.acronym})", ont.acronym] }
+
+    @anal_ont_names = {}
+    @anal_ont_numbers = []
+    @analytics.onts[0..4].each do |visits|
+      ont = @ontologies_hash[visits[:ont].to_s]
+      @anal_ont_names[ont.acronym] = ont.name
+      @anal_ont_numbers << visits[:views]
+    end
   end
 
   def render_layout_partial
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 5a201bafaa..9e7fb1119c 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -4,6 +4,7 @@
   .greyed{
     color:#CFCFCF;
   }
+
 - unless $FRONT_NOTICE.nil? || $FRONT_NOTICE.empty? || cookies[:front_page_notice_closed].eql?("true")
   :javascript
     function close_message(){
@@ -51,7 +52,7 @@
         %div{class: "panel-body"}
           %input#find_ontology_id{:type => "hidden"}
           %div{class: "input-group"}
-            = text_field_tag("ontology", nil, id: "find_ontology", class: "form-control", placeholder: t(".find_ontology_placeholder"))
+            = text_field_tag("ontology", nil, id: "find_ontology", class: "form-control", data: {ontologynames: @ontology_names}, placeholder: t(".find_ontology_placeholder"))
             %span{class: "input-group-btn"}
               = button_tag(class: "btn btn-primary", onclick: "jumpToValueOntology()", aria: {label: "Find an ontology"}) do
                 %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}
@@ -72,7 +73,7 @@
       %div{class: "panel panel-default", style: "min-height:350px;"}
         %div{class: "panel-heading"}
           %h3{class: "panel-title"} Ontology Visits #{"in full #{$SITE} " if at_slice?} (#{@analytics.date.strftime("%B %Y")})
-        %div{class: "panel-body"}
+        = content_tag(:div, nil, id: "ontology-visits-chart", class: "panel-body", data: {ontnames: @anal_ont_names, ontnumbers: @anal_ont_numbers}) do
           %canvas#myChart
           = link_to("More", visits_path())
 
@@ -103,212 +104,3 @@
                 %tr
                   %td Direct Plus Expanded Annotations
                   %td= number_with_delimiter(@direct_expanded_annotations, :delimiter => ",")
-
-- ont_names = @ontologies.map{|ont| "[\"#{ont.name} (#{ont.acronym})\",\"#{ont.acronym}\"]"}
-- anal_ont_names = {}
-- anal_ont_numbers = []
-- @analytics.onts[0..4].each do |visits|
-  - ont = @ontologies_hash[visits[:ont].to_s]
-  - anal_ont_names[ont.acronym] = ont.name
-  - anal_ont_numbers << visits[:views]
-
-:javascript
-  function numberWithCommas(x) {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  }
-
-  function jumpToValueOntology() {
-    var ontology = jQuery("#find_ontology")[0].value;
-    var ontology_id = jQuery("#find_ontology_id").val();
-
-    if (ontology_id == null || ontology_id == "") {
-      // didnt pick an ont
-      alert("The ontology does not exist. You must pick an ontology from the list.")
-
-      return false;
-    }
-
-    if (!!ontology_id) {
-      var sValue = jQuery("#find_ontology_id").val();
-      if (sValue == null || sValue == "") {
-        sValue = data;
-      }
-      document.location="/ontologies/"+sValue;
-      jQuery.blockUI({ message: '<h1>#{image_tag("jquery.simple.tree/spinner.gif")} Loading Ontology...</h1>' });
-      return;
-    }
-  }
-
-  function formatResultOntologySearch(value, data) {
-    jQuery("#find_ontology_id").val("");
-    var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
-    var keywords = jQuery("#find_ontology").val().replace(specials, "\\$&").split(' ').join('|');
-    var regex = new RegExp( '(' + keywords + ')', 'gi' );
-    return value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
-  }
-
-  function jumpToValueResource(){
-    var cls = jQuery("#find_resource")[0].value;
-    var data = jQuery('body').data("resource_results");
-
-    if (data == null) {
-      // Im doing a search
-
-      var search = confirm("Press OK to Search for resources using the concept, or Cancel to select a concept")
-      if (search) {
-        query = jQuery("#find_resource").val();
-        document.location="/resource_index";
-        return;
-      }
-    }
-
-    if (!!data) {
-      var concept_id = data[0];
-      var ontology_version_id = data[2];
-      var ontology_id = data[7];
-      var full_ontology_id = jQuery(document).data().bp.config.rest_url + "/ontologies/" + ontology_id;
-      window.location = "/resource_index/resources?classes[" + encodeURIComponent(full_ontology_id) + "]=" + encodeURIComponent(concept_id);
-      return;
-    }
-  }
-
-  function formatItemResource(value, data) {
-    jQuery('body').data("resource_results", null);
-    var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
-    var keywords = jQuery("#find_resource").val().replace(specials, "\\$&").split(' ').join('|');
-    var regex = new RegExp( '(' + keywords + ')', 'gi' );
-
-    // data[7] is the ontology_id, only included when searching multiple ontologies
-    if (data[6] == undefined) {
-      var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>";
-    } else {
-      var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>" + "<span style='color:grey;font-size:7pt;'> from: " + data[6] + "</span>";
-    }
-
-    return result;
-  }
-
-  // We use this in conjunction with autocomplete because autocomplete
-  // fails when there are multiple results with the same class name
-  function selectResource(value, data) {
-    jQuery('body').data("resource_results", value.data);
-    jumpToValueResource();
-  }
-
-  // Sets a hidden form value that records the virtual id when a concept is chosen in the jump to
-  // This is a workaround because the default autocomplete search method cannot distinguish between two
-  // ontologies that have the same preferred name but different ids.
-  function selectFindOntology(value, data){
-    jQuery("#find_ontology_id").val(value.data[0]);
-    jQuery("#find_ontology").focus();
-    jumpToValueOntology();
-  }
-
-  var ontologies_array=[#{ont_names.join(",")}];
-
-  jQuery(document).ready(function() {
-    jQuery("#find_ontology").autocomplete({
-      selectFirst: true,
-      data: ontologies_array,
-      minChars: 1,
-      matchSubset: 1,
-      maxItemsToShow: 20,
-      delay: 1,
-      showResult: formatResultOntologySearch,
-      onItemSelect: selectFindOntology
-    });
-
-    jQuery("#find_resource").autocomplete({
-      selectFirst: true,
-      url: "/search/json_search/",
-      extraParams: { separator: "\n" },
-      cacheLength: 1,
-      maxCacheLength: 1,
-      matchSubset: 0,
-      minChars: 3,
-      maxItemsToShow: 20,
-      showResult: formatItemResource,
-      onItemSelect: selectResource
-    });
-
-    jQuery('ul.sf-menu').superfish({
-      animation: {height:'show'},   // slide-down effect without fade-in
-      delay:     1200               // 1.2 second delay on mouseout);
-    });
-
-    var ontNames = #{anal_ont_names.keys.to_json.html_safe};
-    var ontNumbers = #{anal_ont_numbers.to_json.html_safe};
-    var onts = #{anal_ont_names.to_json.html_safe};
-    var ctx = document.getElementById("myChart");
-
-    var myChart = new Chart(ctx, {
-      type: 'horizontalBar',
-      data: {
-        labels: ontNames,
-        datasets: [{
-          label: "Ontology Visits",
-          data: ontNumbers,
-          backgroundColor: "rgba(151,187,205,0.2)",
-          borderColor: "rgba(151,187,205,1)",
-          borderWidth: 1
-        }]
-      },
-      options: {
-        responsive: true,
-        legend: {
-          display: false
-        },
-        scales: {
-          xAxes: [{
-            ticks: {
-              beginAtZero: true,
-              stepSize: 5000,
-              // Return an empty string to draw the tick line but hide the tick label
-              // Return `null` or `undefined` to hide the tick line entirely
-              userCallback: function(value, index, values) {
-                return numberWithCommas(value);
-              }
-            }
-          }],
-          yAxes: [{
-            ticks: {}
-          }]
-        },
-        tooltips: {
-          enabled: true,
-          callbacks: {
-            title: function(tooltipItems, data) {
-              lbl = onts[tooltipItems[0].yLabel];
-
-              if (lbl.length > 45) {
-                lbl = lbl.substring(0, 37) + "...";
-              }
-              return lbl + " (" + tooltipItems[0].yLabel + ")";
-            },
-            label: function(tooltipItem, data) {
-              return data.datasets[0].label + ": " + numberWithCommas(tooltipItem.xLabel);
-            }
-          }
-        },
-        hover: {
-          onHover: function(e) {
-            jQuery("#myChart").css("cursor", e[0] ? "pointer" : "default");
-          }
-        }
-      }
-    });
-
-    ctx.onclick = function(evt) {
-      var activePoints = myChart.getElementsAtEvent(evt);
-
-      if (activePoints.length > 0) {
-        //get the internal index of slice in pie chart
-        var clickedElementIndex = activePoints[0]["_index"];
-        //get specific label by index
-        var label = myChart.data.labels[clickedElementIndex];
-        //get value by index
-        // var value = myChart.data.datasets[0].data[clickedElementIndex];
-        window.location.href = "#{ontologies_path()}/" + label;
-      }
-    }
-  });

From 40d95f2422d0fe00a4d05370b15518d5cdb4b125 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 25 Apr 2018 11:37:52 -0700
Subject: [PATCH 13/95] Remove unused CSS

---
 app/views/home/index.html.haml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 9e7fb1119c..3eec584931 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -1,10 +1,5 @@
 - @title = t('.title')
 
-:css
-  .greyed{
-    color:#CFCFCF;
-  }
-
 - unless $FRONT_NOTICE.nil? || $FRONT_NOTICE.empty? || cookies[:front_page_notice_closed].eql?("true")
   :javascript
     function close_message(){

From 88d21d1e106850d8b89451a10a2ecac63035a40e Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 25 Apr 2018 11:42:44 -0700
Subject: [PATCH 14/95] Remove unused JS code

---
 app/assets/javascripts/home.js | 60 ----------------------------------
 1 file changed, 60 deletions(-)

diff --git a/app/assets/javascripts/home.js b/app/assets/javascripts/home.js
index f244116035..58a604c109 100644
--- a/app/assets/javascripts/home.js
+++ b/app/assets/javascripts/home.js
@@ -32,53 +32,6 @@ function formatResultOntologySearch(value, data) {
   return value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
 }
 
-function jumpToValueResource(){
-  var cls = jQuery("#find_resource")[0].value;
-  var data = jQuery('body').data("resource_results");
-
-  if (data == null) {
-    // I'm doing a search
-    var search = confirm("Press OK to Search for resources using the concept, or Cancel to select a concept")
-    if (search) {
-      query = jQuery("#find_resource").val();
-      document.location="/resource_index";
-      return;
-    }
-  }
-
-  if (!!data) {
-    var concept_id = data[0];
-    var ontology_version_id = data[2];
-    var ontology_id = data[7];
-    var full_ontology_id = jQuery(document).data().bp.config.rest_url + "/ontologies/" + ontology_id;
-    window.location = "/resource_index/resources?classes[" + encodeURIComponent(full_ontology_id) + "]=" + encodeURIComponent(concept_id);
-    return;
-  }
-}
-
-function formatItemResource(value, data) {
-  jQuery('body').data("resource_results", null);
-  var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
-  var keywords = jQuery("#find_resource").val().replace(specials, "\\$&").split(' ').join('|');
-  var regex = new RegExp( '(' + keywords + ')', 'gi' );
-
-  // data[7] is the ontology_id, only included when searching multiple ontologies
-  if (data[6] == undefined) {
-    var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>";
-  } else {
-    var result = value.replace(regex, "<b><span style='color:#006600;'>$1</span></b>") + " <span style='font-size:9px;color:blue;'>(" + data[1] + ")</span>" + "<span style='color:grey;font-size:7pt;'> from: " + data[6] + "</span>";
-  }
-
-  return result;
-}
-
-// We use this in conjunction with autocomplete because autocomplete
-// fails when there are multiple results with the same class name
-function selectResource(value, data) {
-  jQuery('body').data("resource_results", value.data);
-  jumpToValueResource();
-}
-
 // Sets a hidden form value that records the virtual id when a concept is chosen in the jump to
 // This is a workaround because the default autocomplete search method cannot distinguish between two
 // ontologies that have the same preferred name but different ids.
@@ -106,19 +59,6 @@ jQuery(document).ready(function() {
     onItemSelect: selectFindOntology
   });
 
-  jQuery("#find_resource").autocomplete({
-    selectFirst: true,
-    url: "/search/json_search/",
-    extraParams: { separator: "\n" },
-    cacheLength: 1,
-    maxCacheLength: 1,
-    matchSubset: 0,
-    minChars: 3,
-    maxItemsToShow: 20,
-    showResult: formatItemResource,
-    onItemSelect: selectResource
-  });
-
   jQuery('ul.sf-menu').superfish({
     animation: {height:'show'},   // slide-down effect without fade-in
     delay:     1200               // 1.2 second delay on mouseout);

From 4bb11e4520f542a4cd4f2ce8591b7ce57d7942a1 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 26 Apr 2018 16:04:05 -0700
Subject: [PATCH 15/95] Convert welcome text and tagline to Bootstrap 4 styles

---
 app/views/home/index.html.haml | 16 ++++++++--------
 config/locales/en.rb           |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 3eec584931..2cdf292d98 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -14,14 +14,14 @@
     %a{:href => "#", :onclick => "close_message(); return false;", :style => "font-size: small; color: darkGray;"} [close]
 
 %div{class: "container", style: "padding-top: 15px; padding-bottom: 25px"}
-
-  %div{class: "row"}
-    %div{class: "col-md-12"}
-      %div{class: "page-header text-center"}
-        %h1
-          = t(".welcome").html_safe
-          %small
-            = t(".tagline").html_safe
+  
+  %div.row
+    %div.col
+      %div.px-3.py-3.pt-md-5.pb-mb-4.text-center
+        %h2
+          = t(".welcome")
+          %small.text-muted
+            = t(".tagline")
 
   %div.search{class: "row"}
     -# Search for a class across ontologies
diff --git a/config/locales/en.rb b/config/locales/en.rb
index f9343154b0..463fba5bcb 100644
--- a/config/locales/en.rb
+++ b/config/locales/en.rb
@@ -13,7 +13,7 @@
       index: {
         find_ontology_placeholder: 'Start entering ontology name, e.g. Cancer, then choose from list',
         query_placeholder: 'Enter a class, e.g. Melanoma',
-        tagline: 'the world&rsquo;s most comprehensive repository of biomedical ontologies',
+        tagline: "the world's most comprehensive repository of biomedical ontologies",
         title: 'Welcome to the ' + $ORG_SITE,
         welcome: 'Welcome to ' + $SITE + ','
       }

From fcef97ce5a7a71988ef812aa418cf28b2e9a1b97 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 26 Apr 2018 17:59:32 -0700
Subject: [PATCH 16/95] Convert panels to Bootstrap 4 card decks

---
 app/views/home/index.html.haml | 134 ++++++++++++++++-----------------
 config/locales/en.rb           |   2 +-
 2 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 2cdf292d98..05665bf7f0 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -13,45 +13,39 @@
     \&nbsp;&nbsp;
     %a{:href => "#", :onclick => "close_message(); return false;", :style => "font-size: small; color: darkGray;"} [close]
 
-%div{class: "container", style: "padding-top: 15px; padding-bottom: 25px"}
-  
+%div.container
   %div.row
     %div.col
-      %div.px-3.py-3.pt-md-5.pb-mb-4.text-center
+      %div.px-3.py-3.pt-md-5.pb-md-4.text-center
         %h2
           = t(".welcome")
           %small.text-muted
             = t(".tagline")
-
-  %div.search{class: "row"}
-    -# Search for a class across ontologies
-    %div{class: "col-md-6"}
-      %div{class: "panel panel-default", style: "min-height:134px;"}
-        %div{class: "panel-heading"}
-          %h3{class: "panel-title"} Search for a class
-        %div{class: "panel-body"}
-          = form_tag("/search", method: "get") do
-            %div{class: "input-group"}
-              = text_field_tag("query", nil, class: "form-control", placeholder: t(".query_placeholder"))
-              %span{class: "input-group-btn"}
-                = button_tag(type: "submit", class: "btn btn-primary", aria: {label: "Search for a class"}) do
-                  %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}
-            %div{style: "padding-top: 9px;"}
+  %div.row.search
+    %div.col
+      %div.card-deck
+        -# Search for a class across ontologies
+        %div.card
+          %div.card-header Search for a class
+          %div.card-body
+            = form_tag("/search", method: "get") do
+              %div.input-group.mb-3
+                - placeholder = t(".query_placeholder")
+                = text_field_tag("query", nil, class: "form-control", placeholder: placeholder)
+                %div.input-group-append
+                  = button_tag(type: "submit", class: "btn btn-primary", aria: {label: "Search for a class"}) do
+                    %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}              
               %a{:href => "/search?opt=advanced"} Advanced Search
-
-    -# Search for an ontology
-    %div{class: "col-md-6"}
-      %div{class: "panel panel-default", style: "min-height:134px;"}
-        %div{class: "panel-heading"}
-          %h3{class: "panel-title"} Find an ontology
-        %div{class: "panel-body"}
-          %input#find_ontology_id{:type => "hidden"}
-          %div{class: "input-group"}
-            = text_field_tag("ontology", nil, id: "find_ontology", class: "form-control", data: {ontologynames: @ontology_names}, placeholder: t(".find_ontology_placeholder"))
-            %span{class: "input-group-btn"}
-              = button_tag(class: "btn btn-primary", onclick: "jumpToValueOntology()", aria: {label: "Find an ontology"}) do
-                %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}
-          %div{style: "padding-top: 9px"}
+        -# Search for an ontology
+        %div.card
+          %div.card-header Find an ontology
+          %div.card-body
+            %input#find_ontology_id{:type => "hidden"}
+            %div.input-group.mb-3
+              = text_field_tag("ontology", nil, id: "find_ontology", class: "form-control", data: {ontologynames: @ontology_names}, placeholder: t(".find_ontology_placeholder"))
+              %div.input-group-append
+                = button_tag(class: "btn btn-primary", onclick: "jumpToValueOntology()", aria: {label: "Find an ontology"}) do
+                  %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}
             %ul.sf-menu.sf-vertical
               %li
                 = link_to("Browse Ontologies", "#", style: "white-space: nowrap; padding: 0px; background: #fff; border: 1px solid #fff;")
@@ -61,41 +55,41 @@
                   - @groups.each do |group|
                     %li
                       = link_to(group[:name], ontologies_path(filter: "#{CGI.escape(group[:acronym])}"))
-
-  %div.statistics{class: "row"}
-    -# Ontology visits
-    %div{class: "col-md-6"}
-      %div{class: "panel panel-default", style: "min-height:350px;"}
-        %div{class: "panel-heading"}
-          %h3{class: "panel-title"} Ontology Visits #{"in full #{$SITE} " if at_slice?} (#{@analytics.date.strftime("%B %Y")})
-        = content_tag(:div, nil, id: "ontology-visits-chart", class: "panel-body", data: {ontnames: @anal_ont_names, ontnumbers: @anal_ont_numbers}) do
-          %canvas#myChart
-          = link_to("More", visits_path())
-
-    -# Ontology statistics
-    %div{class: "col-md-6"}
-      %div{class: "panel panel-default", style: "min-height:350px;"}
-        %div{class: "panel-heading"}
-          %h3{class: "panel-title"} #{$SITE} Statistics #{"in full #{$SITE}" if at_slice?}
-        %div{class: "panel-body"}
-          %table.minimal.align-right{width: "100%", style: "margin-bottom: 25px;"}
-            %tbody
-              %tr
-                %td Ontologies
-                %td= @ont_count
-              %tr
-                %td Classes
-                %td= number_with_delimiter(@cls_count, :delimiter => ",")
-              -unless Rails.env.appliance?
-                %tr
-                  %td Resources Indexed
-                  %td= number_with_delimiter(@ri_resources, :delimiter => ",")
-                %tr
-                  %td Indexed Records
-                  %td= number_with_delimiter(@ri_record_count, :delimiter => ",")
-                %tr
-                  %td Direct Annotations
-                  %td= number_with_delimiter(@direct_annotations, :delimiter => ",")
-                %tr
-                  %td Direct Plus Expanded Annotations
-                  %td= number_with_delimiter(@direct_expanded_annotations, :delimiter => ",")
+  %div.row.pt-3.statistics
+    %div.col
+      %div.card-deck
+        -# Ontology visits
+        %div.card
+          %div.card-header Ontology Visits #{"in full #{$SITE} " if at_slice?} (#{@analytics.date.strftime("%B %Y")})
+          = content_tag(:div, nil, id: "ontology-visits-chart", class: "card-body", data: {ontnames: @anal_ont_names, ontnumbers: @anal_ont_numbers}) do
+            %canvas#myChart
+            = link_to("More", visits_path())
+        -# Ontology statistics
+        %div.card
+          %div.card-header #{$SITE} Statistics #{"in full #{$SITE}" if at_slice?}
+          %ul.list-group.list-group-flush
+            %li.list-group-item 
+              %div.d-flex.justify-content-between.align-items-center
+                %span Ontologies
+                %span= @ont_count
+            %li.list-group-item
+              %div.d-flex.justify-content-between.align-items-center
+                %span Classes
+                %span= number_with_delimiter(@cls_count, :delimiter => ",")
+            -unless Rails.env.appliance?
+              %li.list-group-item
+                %div.d-flex.justify-content-between.align-items-center
+                  %span Resources Indexed
+                  %span= number_with_delimiter(@ri_resources, :delimiter => ",")
+              %li.list-group-item
+                %div.d-flex.justify-content-between.align-items-center
+                  %span Indexed Records
+                  %span= number_with_delimiter(@ri_record_count, :delimiter => ",")
+              %li.list-group-item
+                %div.d-flex.justify-content-between.align-items-center
+                  %span Direct Annotations
+                  %span= number_with_delimiter(@direct_annotations, :delimiter => ",")
+              %li.list-group-item
+                %div.d-flex.justify-content-between.align-items-center
+                  %span Direct Plus Expanded Annotations
+                  %span= number_with_delimiter(@direct_expanded_annotations, :delimiter => ",")
diff --git a/config/locales/en.rb b/config/locales/en.rb
index 463fba5bcb..62b46bf071 100644
--- a/config/locales/en.rb
+++ b/config/locales/en.rb
@@ -11,7 +11,7 @@
 
     home: {
       index: {
-        find_ontology_placeholder: 'Start entering ontology name, e.g. Cancer, then choose from list',
+        find_ontology_placeholder: 'Start typing ontology name, then choose from list',
         query_placeholder: 'Enter a class, e.g. Melanoma',
         tagline: "the world's most comprehensive repository of biomedical ontologies",
         title: 'Welcome to the ' + $ORG_SITE,

From 03c23febff683ca4bd3f1760a308cc2ab26e61af Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 3 May 2018 16:39:50 -0700
Subject: [PATCH 17/95] Use HAML extension for footer

---
 app/views/layouts/{_footer.html.erb => _footer.html.haml} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/views/layouts/{_footer.html.erb => _footer.html.haml} (100%)

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.haml
similarity index 100%
rename from app/views/layouts/_footer.html.erb
rename to app/views/layouts/_footer.html.haml

From 6b5f3e026a5633338c01a8295d58e90008a38915 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 3 May 2018 16:41:37 -0700
Subject: [PATCH 18/95] Convert footer content to HAML syntax

---
 app/views/layouts/_footer.html.haml | 130 +++++++++++-----------------
 1 file changed, 51 insertions(+), 79 deletions(-)

diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
index aa1638a639..8928536bc0 100644
--- a/app/views/layouts/_footer.html.haml
+++ b/app/views/layouts/_footer.html.haml
@@ -1,79 +1,51 @@
-  </div>
-  </div>
-
-  <footer class='footer'>
-    <div class='container'>       
-      <div class='row'>
-
-        <div class='col-sm-10 col-sm-offset-1'>
-          <div class='row'>
-            <div class='col-sm-3'>
-              <h4>PRODUCTS</h4>
-              <ul class='list-unstyled'>
-                <li><%= link_to 'BioPortal', '#' %></li>
-                <li><%= link_to 'BioPortal REST API', 'http://data.bioontology.org/documentation', target: '_blank' %></li>
-                <li><%= link_to 'BioPortal Virtual Appliance', 'https://www.bioontology.org/wiki/index.php/Category:NCBO_Virtual_Appliance', target: '_blank' %></li>
-                <li><%= link_to 'NCBO Web Widgets', 'http://www.bioontology.org/wiki/index.php/NCBO_Widgets', target: '_blank' %></li>
-              </ul>
-            </div>
-
-            <div class='col-sm-3 footer-support'>
-              <h4>SUPPORT</h4>
-              <ul class='list-unstyled'>
-                <li><%= link_to 'Contact Us', feedback_path(location: encode_param(request.url)), class: 'pop_window' %></li>
-                <li><%= link_to 'Documentation', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help', target: '_blank' %></li>
-                <li><%= link_to 'NCBO Wiki', 'https://www.bioontology.org/wiki/', target: '_blank' %></li>
-              </ul>
-            </div>
-
-            <div class='col-sm-3'>
-              <h4>ABOUT</h4>
-              <ul class='list-unstyled'>
-                <li><%= link_to 'About Us', 'https://www.bioontology.org/about-ncbo', target: '_blank' %></li>
-                <li><%= link_to raw('Mission &amp; Vision'), 'https://www.bioontology.org/mission', target: '_blank' %></li>
-                <li><%= link_to 'Team', 'https://www.bioontology.org/project-team', target: '_blank' %></li>
-                <li><%= link_to 'Projects', projects_path %></li>
-              </ul>
-            </div>
-
-            <div class='col-sm-3'>
-              <h4>CONNECT</h4>
-              <ul class='list-inline social-icons'>
-                <li><%= link_to raw(icon('facebook', class: 'fa-3x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank' %></li>
-                <li><%= link_to raw(icon('twitter', class: 'fa-3x')), 'http://twitter.com/bioontology', target: '_blank' %></li>
-                <li><%= link_to raw(icon('github', class: 'fa-3x')), 'http://github.com/ncbo', target: '_blank' %></li>
-              </ul>
-            </div>
-
-          </div>
-        
-          <div class='row col-sm-12' style='padding-top: 30px;'>
-            <p>The <strong>National Center for Biomedical Ontology</strong> was founded as one of the National Centers for Biomedical Computing, 
-            supported by the NHGRI, the NHLBI, and the NIH Common Fund under grant U54-HG004028.</p>
-          </div>
-
-          <div class='row col-sm-12'>
-            <p>Copyright &copy; 2005‑2018, The Board of Trustees of Leland Stanford Junior University. All rights reserved.</p>
-          </div>
-
-          <div class='row col-sm-12'>
-            <ul class='list-inline'>
-              <li><%= link_to 'CITE US', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal', target: '_blank' %></li>
-              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-              <li><%= link_to 'PRIVACY POLICY', 'http://www.bioontology.org/privacy.html',  target: '_blank' %></li>
-              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-              <li><%= link_to 'TERMS', 'http://www.bioontology.org/terms.html', target: '_blank' %></li>
-            </ul>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </footer>
-
-  <%=javascript_include_tag "application"%>
-  
-  <%= render partial: "ga_tracking" %>
-
-</body>
-</html>
+</div>
+</div>
+
+%footer.footer
+  .container
+    .row
+      .col-sm-10.col-sm-offset-1
+        .row
+          .col-sm-3
+            %h4 PRODUCTS
+            %ul.list-unstyled
+              %li= link_to 'BioPortal', '#'
+              %li= link_to 'BioPortal REST API', 'http://data.bioontology.org/documentation', target: '_blank'
+              %li= link_to 'BioPortal Virtual Appliance', 'https://www.bioontology.org/wiki/index.php/Category:NCBO_Virtual_Appliance', target: '_blank'
+              %li= link_to 'NCBO Web Widgets', 'http://www.bioontology.org/wiki/index.php/NCBO_Widgets', target: '_blank'
+          .col-sm-3.footer-support
+            %h4 SUPPORT
+            %ul.list-unstyled
+              %li= link_to 'Contact Us', feedback_path(location: encode_param(request.url)), class: 'pop_window'
+              %li= link_to 'Documentation', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help', target: '_blank'
+              %li= link_to 'NCBO Wiki', 'https://www.bioontology.org/wiki/', target: '_blank'
+          .col-sm-3
+            %h4 ABOUT
+            %ul.list-unstyled
+              %li= link_to 'About Us', 'https://www.bioontology.org/about-ncbo', target: '_blank'
+              %li= link_to raw('Mission & Vision'), 'https://www.bioontology.org/mission', target: '_blank'
+              %li= link_to 'Team', 'https://www.bioontology.org/project-team', target: '_blank'
+              %li= link_to 'Projects', projects_path
+          .col-sm-3
+            %h4 CONNECT
+            %ul.list-inline.social-icons
+              %li= link_to raw(icon('facebook', class: 'fa-3x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank'
+              %li= link_to raw(icon('twitter', class: 'fa-3x')), 'http://twitter.com/bioontology', target: '_blank'
+              %li= link_to raw(icon('github', class: 'fa-3x')), 'http://github.com/ncbo', target: '_blank'
+        .row.col-sm-12{:style => "padding-top: 30px;"}
+          %p
+            The
+            %strong National Center for Biomedical Ontology
+            was founded as one of the National Centers for Biomedical Computing,
+            supported by the NHGRI, the NHLBI, and the NIH Common Fund under grant U54-HG004028.
+        .row.col-sm-12
+          %p Copyright © 2005‑2018, The Board of Trustees of Leland Stanford Junior University. All rights reserved.
+        .row.col-sm-12
+          %ul.list-inline
+            %li= link_to 'CITE US', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal', target: '_blank'
+            %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
+            %li= link_to 'PRIVACY POLICY', 'http://www.bioontology.org/privacy.html',  target: '_blank'
+            %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
+            %li= link_to 'TERMS', 'http://www.bioontology.org/terms.html', target: '_blank'
+= javascript_include_tag "application"
+= render partial: "ga_tracking"

From ae11812ab63fd437781292a58cdd0617d9f1fbc7 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 7 May 2018 16:12:59 -0700
Subject: [PATCH 19/95] Upgrade footer to Bootstrap 4

---
 Gemfile.lock                                  | 12 +--
 app/assets/stylesheets/application.css.scss   |  2 +-
 .../stylesheets/bootstrap_overrides.scss      | 37 +++++---
 app/views/layouts/_footer.html.haml           | 92 ++++++++++---------
 config/initializers/sass.rb                   |  2 +-
 5 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index d635ff99fc..12d78a8649 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -62,9 +62,9 @@ GEM
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (8.3.0)
+    autoprefixer-rails (8.4.1)
       execjs
-    bootstrap (4.1.0)
+    bootstrap (4.1.1)
       autoprefixer-rails (>= 6.0.3)
       popper_js (>= 1.12.9, < 2)
       sass (>= 3.5.2)
@@ -102,7 +102,7 @@ GEM
     domain_name (0.5.20180417)
       unf (>= 0.0.5, < 1.0.0)
     erubis (2.7.0)
-    eventmachine (1.2.5)
+    eventmachine (1.2.6)
     excon (0.62.0)
     execjs (2.7.0)
     faraday (0.15.0)
@@ -155,10 +155,10 @@ GEM
       net-ssh (>= 2.6.5)
     net-ssh (4.2.0)
     netrc (0.11.0)
-    newrelic_rpm (5.0.0.342)
+    newrelic_rpm (5.1.0.344)
     nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
-    oj (3.5.1)
+    oj (3.6.0)
     open_uri_redirections (0.2.1)
     popper_js (1.12.9)
     pry (0.11.3)
@@ -199,7 +199,7 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
-    rdoc (6.0.3)
+    rdoc (6.0.4)
     recaptcha (0.4.0)
     rest-client (1.8.0)
       http-cookie (>= 1.0.2, < 2.0)
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index f22e983a49..263928645d 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -27,7 +27,6 @@
 @import "admin";
 @import "annotator";
 @import "bioportal";
-@import "bootstrap_overrides";
 @import "home";
 @import "mappings";
 @import "recommender";
@@ -38,5 +37,6 @@
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
+@import "bootstrap_overrides";
 @import "font-awesome-sprockets";
 @import "font-awesome";
diff --git a/app/assets/stylesheets/bootstrap_overrides.scss b/app/assets/stylesheets/bootstrap_overrides.scss
index 1038da898c..4281c826f5 100644
--- a/app/assets/stylesheets/bootstrap_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_overrides.scss
@@ -1,54 +1,63 @@
 /* Sticky footer styles from Bootstrap: 
-   http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
+   https://getbootstrap.com/docs/4.1/examples/sticky-footer/sticky-footer.css
 -------------------------------------------------- */
 html {
   position: relative;
   min-height: 100%;
 }
 body {
-  /* Margin bottom by footer height */
-  margin-bottom: body_margin_bottom();
+  margin-bottom: body_margin_bottom(); /* Margin bottom by footer height */
 }
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
-  /* Set the fixed height of the footer here */
-  height: 320px;
+  height: 300px; /* Set the fixed height of the footer here */
   color: #757575;
   background-color: #ccc;
-  padding: 30px 0;
 }
 
 /* Footer 
 -------------------------------------------------- */
-.social-icons li {
-  margin-right: 10px;
-  margin-top: 5px;
+footer.footer h6 {
+  font-weight: bold;
+}
+
+footer.footer .list-inline-item:not(:last-child) {
+  margin-right: 1rem;
 }
 
 @media only screen and (max-width: 992px) {
   body {
-    margin-bottom: 375px; 
+    margin-bottom: 350px; 
   }  
   .footer {
-    height: 375px;
+    height: 350px;
   }
 }
 
 @media only screen and (max-width: 768px) {
   body {
-    margin-bottom: 650px;
+    margin-bottom: 560px;
+  }
+  .footer {
+    height: 560px;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  body {
+    margin-bottom: 625px;
   }
   .footer {
-    height: 650px;
+    height: 625px;
   }
 }
 
 /* Customized styles for appliance mode
 -------------------------------------------------- */
 .footer-appliance {
-  height: 60px;
+  height: 60px; /* Set the fixed height of the footer here */
   background-color: #f5f5f5;
   padding: 20px 0;
 }
diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
index 8928536bc0..3f5f7d64d3 100644
--- a/app/views/layouts/_footer.html.haml
+++ b/app/views/layouts/_footer.html.haml
@@ -1,51 +1,55 @@
 </div>
 </div>
 
-%footer.footer
-  .container
-    .row
-      .col-sm-10.col-sm-offset-1
-        .row
-          .col-sm-3
-            %h4 PRODUCTS
-            %ul.list-unstyled
-              %li= link_to 'BioPortal', '#'
-              %li= link_to 'BioPortal REST API', 'http://data.bioontology.org/documentation', target: '_blank'
-              %li= link_to 'BioPortal Virtual Appliance', 'https://www.bioontology.org/wiki/index.php/Category:NCBO_Virtual_Appliance', target: '_blank'
-              %li= link_to 'NCBO Web Widgets', 'http://www.bioontology.org/wiki/index.php/NCBO_Widgets', target: '_blank'
-          .col-sm-3.footer-support
-            %h4 SUPPORT
-            %ul.list-unstyled
-              %li= link_to 'Contact Us', feedback_path(location: encode_param(request.url)), class: 'pop_window'
-              %li= link_to 'Documentation', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help', target: '_blank'
-              %li= link_to 'NCBO Wiki', 'https://www.bioontology.org/wiki/', target: '_blank'
-          .col-sm-3
-            %h4 ABOUT
-            %ul.list-unstyled
-              %li= link_to 'About Us', 'https://www.bioontology.org/about-ncbo', target: '_blank'
-              %li= link_to raw('Mission & Vision'), 'https://www.bioontology.org/mission', target: '_blank'
-              %li= link_to 'Team', 'https://www.bioontology.org/project-team', target: '_blank'
-              %li= link_to 'Projects', projects_path
-          .col-sm-3
-            %h4 CONNECT
-            %ul.list-inline.social-icons
-              %li= link_to raw(icon('facebook', class: 'fa-3x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank'
-              %li= link_to raw(icon('twitter', class: 'fa-3x')), 'http://twitter.com/bioontology', target: '_blank'
-              %li= link_to raw(icon('github', class: 'fa-3x')), 'http://github.com/ncbo', target: '_blank'
-        .row.col-sm-12{:style => "padding-top: 30px;"}
-          %p
-            The
-            %strong National Center for Biomedical Ontology
-            was founded as one of the National Centers for Biomedical Computing,
-            supported by the NHGRI, the NHLBI, and the NIH Common Fund under grant U54-HG004028.
-        .row.col-sm-12
-          %p Copyright © 2005‑2018, The Board of Trustees of Leland Stanford Junior University. All rights reserved.
-        .row.col-sm-12
-          %ul.list-inline
-            %li= link_to 'CITE US', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal', target: '_blank'
+%footer.footer.pt-4.mt-5
+  %div.container
+    %div.row
+      %div.col-6.col-md
+        %h6 PRODUCTS
+        %ul.list-unstyled
+          %li= link_to('BioPortal', root_path())
+          %li= link_to('BioPortal REST API', 'http://data.bioontology.org/documentation', target: '_blank')
+          %li= link_to('BioPortal Virtual Appliance', 'https://www.bioontology.org/wiki/index.php/Category:NCBO_Virtual_Appliance', target: '_blank')
+          %li= link_to('NCBO Web Widgets', 'http://www.bioontology.org/wiki/index.php/NCBO_Widgets', target: '_blank')      
+      %div.col-6.col-md
+        %h6 SUPPORT
+        %ul.list-unstyled
+          %li= link_to('Contact Us', feedback_path(location: encode_param(request.url)), class: 'pop_window')
+          %li= link_to('Documentation', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help', target: '_blank')
+          %li= link_to('NCBO Wiki', 'https://www.bioontology.org/wiki/', target: '_blank')
+      %div.col-6.col-md
+        %h6 ABOUT
+        %ul.list-unstyled
+          %li= link_to('About Us', 'https://www.bioontology.org/about-ncbo', target: '_blank')
+          %li= link_to(raw('Mission & Vision'), 'https://www.bioontology.org/mission', target: '_blank')
+          %li= link_to('Team', 'https://www.bioontology.org/project-team', target: '_blank')
+          %li= link_to('Projects', projects_path())
+      %div.col-12.col-md
+        %h6 CONNECT
+        %ul.list-inline
+          %li.list-inline-item= link_to(raw(icon('facebook', class: 'fa-2x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank')
+          %li.list-inline-item= link_to(raw(icon('twitter', class: 'fa-2x')), 'http://twitter.com/bioontology', target: '_blank')
+          %li.list-inline-item= link_to(raw(icon('github', class: 'fa-2x')), 'http://github.com/ncbo', target: '_blank')
+    %div.row{style: "font-size: 0.9rem;"}
+      %div.col
+        The 
+        %strong National Center for Biomedical Ontology 
+        was founded as one of the National Centers for Biomedical Computing, supported by the NHGRI, the NHLBI, and the NIH Common Fund under grant U54-HG004028.
+    %div.row.pt-2{style: "font-size: 0.9rem;"}
+      %div.col Copyright © 2005‑2018, The Board of Trustees of Leland Stanford Junior University. All rights reserved.
+    %div.row.pt-2
+      %div.col
+        %ul.list-inline
+          %li.list-inline-item
+            = link_to('CITE US', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal', target: '_blank')
+          %li.list-inline-item
             %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
-            %li= link_to 'PRIVACY POLICY', 'http://www.bioontology.org/privacy.html',  target: '_blank'
+          %li.list-inline-item
+            = link_to('PRIVACY POLICY', 'http://www.bioontology.org/privacy.html',  target: '_blank')
+          %li.list-inline-item
             %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
-            %li= link_to 'TERMS', 'http://www.bioontology.org/terms.html', target: '_blank'
+          %li.list-inline-item
+            = link_to('TERMS', 'http://www.bioontology.org/terms.html', target: '_blank')
+
 = javascript_include_tag "application"
 = render partial: "ga_tracking"
diff --git a/config/initializers/sass.rb b/config/initializers/sass.rb
index b7634588da..25ac095140 100644
--- a/config/initializers/sass.rb
+++ b/config/initializers/sass.rb
@@ -1,7 +1,7 @@
 module Sass::Script::Functions
 
   def body_margin_bottom
-    margin = Rails.env.appliance? ? "60px" : "320px"
+    margin = Rails.env.appliance? ? "60px" : "300px"
     Sass::Script::String.new(margin)
   end
 

From 02de844ac9227c038507fc8af500d5ab8136b3b9 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 8 May 2018 11:07:25 -0700
Subject: [PATCH 20/95] Adjust paddings and add border underneath tagline

---
 app/views/home/index.html.haml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 05665bf7f0..ac2c2eed4d 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -13,15 +13,15 @@
     \&nbsp;&nbsp;
     %a{:href => "#", :onclick => "close_message(); return false;", :style => "font-size: small; color: darkGray;"} [close]
 
-%div.container
+%div.container.pb-4.pb-md-5
   %div.row
     %div.col
-      %div.px-3.py-3.pt-md-5.pb-md-4.text-center
+      %div.px-2.py-2.pt-md-5.border-bottom.text-center
         %h2
           = t(".welcome")
           %small.text-muted
             = t(".tagline")
-  %div.row.search
+  %div.row.search.pt-4
     %div.col
       %div.card-deck
         -# Search for a class across ontologies

From 700d69de0b0bb154a81692556138e71776af99a5 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 14 May 2018 13:51:20 -0700
Subject: [PATCH 21/95] Refactor Recommender page to use Bootstrap 4

---
 app/assets/javascripts/bp_recommender.js |   9 +-
 app/assets/stylesheets/recommender.scss  |   1 +
 app/views/recommender/index.html.haml    | 204 +++++++++++------------
 3 files changed, 102 insertions(+), 112 deletions(-)

diff --git a/app/assets/javascripts/bp_recommender.js b/app/assets/javascripts/bp_recommender.js
index 17c53013ef..902b4bf969 100644
--- a/app/assets/javascripts/bp_recommender.js
+++ b/app/assets/javascripts/bp_recommender.js
@@ -277,10 +277,9 @@ rec.getRecommendations = function() {
                                     }
                                     // Terms covered
                                     var terms = rec.getHighlightedTerms(data, $rowNumber);
-                                    $("#inputTextHighlighted").empty();
-                                    $("#inputTextHighlighted").append(terms);
+                                    $("#inputTextHighlighted div.card-body").empty();
+                                    $("#inputTextHighlighted div.card-body").append(terms);
                                     $("#inputTextHighlighted").show();
-                                    $(this).parents(".row:first").css("background-color", "#e2ebf0");
                                 }
                                 // Avoids to uncheck the selected row
                                 else {
@@ -328,8 +327,8 @@ rec.checkFirst = function(data) {
     var terms = rec.getHighlightedTerms(data, 0);
     $("#chk0").prop("checked", true);
     $("#inputText").hide();
-    $("#inputTextHighlighted").empty();
-    $("#inputTextHighlighted").append(terms);
+    $("#inputTextHighlighted div.card-body").empty();
+    $("#inputTextHighlighted div.card-body").append(terms);
     $("#inputTextHighlighted").show();
     $("#chk0").parents(".row:first").css("background-color", "#e2ebf0");
 }
diff --git a/app/assets/stylesheets/recommender.scss b/app/assets/stylesheets/recommender.scss
index 648b113ce0..894ee2b7e2 100644
--- a/app/assets/stylesheets/recommender.scss
+++ b/app/assets/stylesheets/recommender.scss
@@ -4,6 +4,7 @@
 
 #inputTextHighlighted {
   display:none;
+  background-color: #e2ebf0;
 }
 
 .generalError, .invalidMaxOntError, .invalidWeightsError, .notTextError, .sumWeightsError, .rangeWeightsError, .maxOntologiesError, .inputSizeError {
diff --git a/app/views/recommender/index.html.haml b/app/views/recommender/index.html.haml
index 3006d17528..a485da9946 100644
--- a/app/views/recommender/index.html.haml
+++ b/app/views/recommender/index.html.haml
@@ -1,115 +1,105 @@
 - @title = "Recommender"
 
-%div.container-fluid
+%h2.mt-5 Ontology Recommender
+%p
+  = t('recommender.intro').html_safe
+  = link_to(help_path(anchor: "Recommender_Tab"), id: "recommender-help", target: "_blank") do
+    %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
 
-  %div.row
-    %div.col-xs-12
-      %h1 Ontology Recommender
-      %p
-        = t('recommender.intro').html_safe
-        = link_to(help_path(anchor: "Recommender_Tab"), id: "recommender-help", target: "_blank") do
-          %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
-
-  %div.row
-    %div.col-xs-12
-      %form
+%form
+  -# Specify input format
+  %h5 Input
+  %div.form-check.form-check-inline
+    %input#radioItText.form-check-input{name: "input_type", type: "radio", value: "1", checked: "checked"}
+    %label.form-check-label{for: "radioItText"} Text
+  %div.form-check.form-check-inline
+    %input#radioItKeywords.form-check-input{name: "input_type", type: "radio", value: "2"} 
+    %label.form-check-label{for: "radioItKeywords"} Keywords (separated by commas)
+  
+  -# Specify output format
+  %h5.pt-3 Output
+  %div.form-check.form-check-inline
+    %input#radioOtSingle.form-check-input{name: "output_type", type: "radio", value: "1", checked: "checked"} 
+    %label.form-check-label{for: "radioOtSingle"} Ontologies
+  %div.form-check.form-check-inline
+    %input#radioOtSets.form-check-input{name: "output_type", type: "radio", value: "2"} 
+    %label.form-check-label{for: "radioOtSets"} Ontology sets
+  
+  -# Input text or keywords
+  %div.form-group.mt-4
+    = text_area_tag("inputText", nil, rows: 10, class: "form-control default", placeholder: "Paste a paragraph of text or some keywords to use in calculating ontology recommendations", aria: {describedby: "inputTextHelpBlock"})
+    %div.card#inputTextHighlighted
+      %div.card-body
+    %small#inputTextHelpBlock.form-text
+      %a#insertInputLink{href: "javascript:void(0);"} insert sample input
 
-        %h4 Input
-        %label.radio-inline
-          %input#radioItText{name: "input_type", type: "radio", value: "1", checked: "checked"} Text
-        %label.radio-inline
-          %input#radioItKeywords{name: "input_type", type: "radio", value: "2"} Keywords (separated by commas)
+  %a#advancedOptionsLink{:href => "javascript:void(0);"} Show advanced options >>
 
-        %h4{style: "margin-top: 25px"} Output
-        %label.radio-inline
-          %input#radioOtSingle{name: "output_type", type: "radio", value: "1", checked: "checked"} Ontologies
-        %label.radio-inline
-          %input#radioOtSets{name: "output_type", type: "radio", value: "2"} Ontology sets
+  -# Advanced options
+  %div#advancedOptions.optionsBox
+    -# Specify weights
+    %h6 Weights configuration
+    %div.form-row
+      %div.form-group.col-md-2
+        %label{for: "input_wc"} Coverage
+        = number_field_tag("input_wc", "0.55", min: "0", step: "1", class: "form-control")
+      %div.form-group.col-md-2
+        %label{for: "input_wa"} Acceptance
+        = number_field_tag("input_wa", "0.15", min: "0", step: "1", class: "form-control")
+      %div.form-group.col-md-2
+        %label{for: "input_wd"} Knowledge detail
+        = number_field_tag("input_wd", "0.15", min: "0", step: "1", class: "form-control")
+      %div.form-group.col-md-2
+        %label{for: "input_ws"} Specialization
+        = number_field_tag("input_ws", "0.15", min: "0", step: "1", class: "form-control")
+    -# Specify ontology set size
+    %h6 Maximum ontologies per set
+    %div.form-row
+      %div.form-group.col-md-2
+        = number_field_tag("input_max_ontologies", "3", in: 2...5, class: "form-control")
+    -# Specify ontologies
+    %div#ontologyPicker
+      = render(partial: "shared/ontology_picker")
 
-        %div.form-group{style: "margin-top: 25px"}
-          = text_area_tag("inputText", nil, rows: 10, class: "form-control default", placeholder: "Paste a paragraph of text or some keywords to use in calculating ontology recommendations")
-          %div#inputTextHighlighted.well
-          %p.help-block
-            %a#insertInputLink{href: "javascript:void(0);"} insert sample input
+  %div.my-4
+    = submit_tag("Get Recommendations", id: "recommenderButton", type: "button", class: "btn btn-primary")
+    = submit_tag("Edit Input", id: "editButton", type: "button", style: "display: none;", class: "btn btn-primary")
+    = content_tag(:span, class: "recommenderSpinner") do
+      = image_tag("spinners/spinner_000000_16px.gif", style: "vertical-align: middle;")
 
-        %a#advancedOptionsLink{:href => "javascript:void(0);"} Show advanced options >>
-          
-        / Advanced options
-        %div#advancedOptions.optionsBox
-          / Weights
-          %label Weights configuration
-          %div.row
-            %div.form-group
-              %div.col-xs-9.col-lg-3
-                %div.input-group
-                  %span#coverage-addon.input-group-addon Coverage:
-                  = number_field_tag("input_wc", "0.55", min: "0", step: "1", class: "form-control", aria: {describedby: "coverage-addon"})
-              %div.col-xs-9.col-lg-3
-                %div.input-group
-                  %span#acceptance-addon.input-group-addon Acceptance:
-                  = number_field_tag("input_wa", "0.15", min: "0", step: "1", class: "form-control", aria: {describedby: "acceptance-addon"})              
-              %div.col-xs-9.col-lg-3
-                %div.input-group
-                  %span#knowledge-addon.input-group-addon Knowledge detail:
-                  = number_field_tag("input_wd", "0.15", min: "0", step: "1", class: "form-control", aria: {describedby: "knowledge-addon"})              
-              %div.col-xs-9.col-lg-3
-                %div.input-group
-                  %span#specialization-addon.input-group-addon Specialization:
-                  = number_field_tag("input_ws", "0.15", min: "0", step: "1", class: "form-control", aria: {describedby: "specialization-addon"})
-          / Ontology sets
-          %div.optionsBox
-            %label Ontology sets    
-            %div.row
-              %div.form-group
-                %div.col-xs-9.col-lg-3
-                  %div.input-group
-                    %span#sets-addon.input-group-addon Maximum ontologies per set:
-                    = number_field_tag("input_max_ontologies", "3", in: 2...5, class: "form-control", aria: {describedby: "sets-addon"})
-          /Ontology picker
-          %div#ontologyPicker.optionsBox
-            = render(partial: "shared/ontology_picker")
-  
-        %div{style: "margin-top: 25px;"}
-          = submit_tag("Get Recommendations", id: "recommenderButton", type: "button", class: "btn btn-primary")
-          = submit_tag("Edit Input", id: "editButton", type: "button", style: "display: none;", class: "btn btn-primary")
-          = content_tag(:span, class: "recommenderSpinner") do
-            = image_tag("spinners/spinner_000000_16px.gif", style: "vertical-align: middle;")
-  
-  %div.row
-    %div.col-xs-12
-      %br
-      %br
-      %span.notTextError
-        Please paste a paragraph of text or some keywords to use in calculating ontology recommendations.
-        %br/
-      %span.sumWeightsError
-        The sum of the weights must be greater than zero.
-        %br/
-      %span.rangeWeightsError
-        All the weights must be greater or equal to zero.
-        %br/
-      %span.invalidWeightsError
-        All the weights must be valid numeric values.
-        %br/
-      %span.invalidMaxOntError
-        The maximum ontologies per set must be a valid integer value.
-        %br/
-      %span.maxOntologiesError
-        The maximum ontologies per set must be a number between 2 and 4.
-        %br/
-      %span.generalError
-        Problem getting recommendations, please try again.
-        %br/
-      %span#noResults{:style => "margin-left: 3px; display:none"}
-        No recommendations found.
-        %br/
-      %span#noResultsSets{:style => "margin-left: 3px; display:none"}
-        There are no ontology sets recommended for the input provided. Please try the "Ontologies" output.
-        %br/
-      %span.inputSizeError
-        Please use less than 500 words. If you need to annotate larger pieces of text you can use the Recommender Web Service
+%div.row#recommenderErrorsDisplay.mb-4
+  %div.col
+    %span.notTextError
+      Please paste a paragraph of text or some keywords to use in calculating ontology recommendations.
+      %br/
+    %span.sumWeightsError
+      The sum of the weights must be greater than zero.
+      %br/
+    %span.rangeWeightsError
+      All the weights must be greater or equal to zero.
+      %br/
+    %span.invalidWeightsError
+      All the weights must be valid numeric values.
+      %br/
+    %span.invalidMaxOntError
+      The maximum ontologies per set must be a valid integer value.
+      %br/
+    %span.maxOntologiesError
+      The maximum ontologies per set must be a number between 2 and 4.
+      %br/
+    %span.generalError
+      Problem getting recommendations, please try again.
+      %br/
+    %span#noResults
+      No recommendations found.
+      %br/
+    %span#noResultsSets
+      There are no ontology sets recommended for the input provided. Please try the "Ontologies" output.
+      %br/
+    %span.inputSizeError
+      Please use less than 500 words. If you need to annotate larger pieces of text you can use the Recommender Web Service
 
-  %div.row#resultsDisplay
-    %div.col-xs-12
-      %h2#resultsHeader
-      #recommender-results
+%div.row#resultsDisplay
+  %div.col
+    %h5#resultsHeader
+    %div#recommender-results.mb-5

From 34b4e6ac46ec65f6264a4280e94d6bb76c111618 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 14 May 2018 16:49:21 -0700
Subject: [PATCH 22/95] Refactor Annotator page to use Bootstrap 4

---
 app/views/annotator/index.html.haml | 222 ++++++++++++++--------------
 1 file changed, 108 insertions(+), 114 deletions(-)

diff --git a/app/views/annotator/index.html.haml b/app/views/annotator/index.html.haml
index b626c625f0..018acd0a76 100644
--- a/app/views/annotator/index.html.haml
+++ b/app/views/annotator/index.html.haml
@@ -1,123 +1,117 @@
 - @title = "Annotator"
 
-%div.container-fluid
-  
-  %div.row
-    %div.col-xs-12
-      %h1 Annotator
-      %p
-        = t('annotator.intro').html_safe
-        = link_to(help_path(anchor: "Annotator_Tab"), id: "annotator-help", target: "_blank") do
-          %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
+%h2.mt-5 Annotator
+%p
+  = t('annotator.intro').html_safe
+  = link_to(help_path(anchor: "Annotator_Tab"), id: "annotator-help", target: "_blank") do
+    %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
 
-  %div.row
-    %div.col-xs-12
-      %form{style: "margin-bottom: 25px"}
-        %div.form-group
-          = text_area_tag("annotation_text", nil, rows: 15, class: "form-control", placeholder: "Enter or paste text to be annotated")
-          %p.help-block
-            %a#insert_text_link{href: "javascript:void(0);"} insert sample text
+%form{style: "margin-bottom: 25px"}
+  %div.form-group
+    = text_area_tag("annotation_text", nil, rows: 15, class: "form-control", placeholder: "Enter or paste text to be annotated", aria: {describedby: "inputTextHelpBlock"})
+    %small#inputTextHelpBlock.form-text
+      %a#insert_text_link{href: "javascript:void(0);"} insert sample text
 
-        = label_tag("longest_only", nil, class: "checkbox-inline") do
-          = check_box_tag("longest_only", "all", false)
-          Match longest only
-        = label_tag("whole_word_only", nil, class: "checkbox-inline") do
-          = check_box_tag("whole_word_only", "all", false)
-          Match partial words
-        = label_tag("mappings_all", nil, class: "checkbox-inline") do
-          = check_box_tag("mappings", "all", false, id: "mappings_all")
-          Include mappings
-        = label_tag("exclude_numbers", nil, class: "checkbox-inline") do
-          = check_box_tag("exclude_numbers", "all", false)
-          Exclude numbers
-        = label_tag("exclude_synonyms", nil, class: "checkbox-inline") do
-          = check_box_tag("exclude_synonyms", "all", false)
-          Exclude synonyms
+  %div.form-check.form-check-inline
+    = check_box_tag("longest_only", "all", false, class: "form-check-input")
+    %label.form-check-label{for: "longest_only"} Match longest only
+  %div.form-check.form-check-inline
+    = check_box_tag("whole_word_only", "all", false, class: "form-check-input")
+    %label.form-check-label{for: "whole_word_only"} Match partial words
+  %div.form-check.form-check-inline
+    = check_box_tag("mappings", "all", false, id: "mappings_all", class: "form-check-input")
+    %label.form-check-label{for: "mappings_all"} Include mappings
+  %div.form-check.form-check-inline
+    = check_box_tag("exclude_numbers", "all", false, class: "form-check-input")
+    %label.form-check-label{for: "exclude_numbers"} Exclude numbers
+  %div.form-check.form-check-inline
+    = check_box_tag("exclude_synonyms", "all", false, class: "form-check-input")
+    %label.form-check-label{for: "exclude_synonyms"} Exclude synonyms
 
-        %div.form-group
-          = render partial: "shared/ontology_picker", locals: { :custom_ontologies => @annotator_ontologies }
-        
-        - if @sem_type_ont
-          %div.form-group
-            %label{for: "semantic_types"} Select UMLS semantic types
-            = select_tag("semantic_types", options_for_select(@semantic_types_for_select), multiple: "true", data: {placeholder: "Start typing to select UMLS semantic types"}, class: "form-control", style: "width: 432px")
+  %div.form-group.pt-4
+    = render partial: "shared/ontology_picker", locals: { :custom_ontologies => @annotator_ontologies }
+  
+  - if @sem_type_ont
+    %div.form-group
+      %label{for: "semantic_types"} Select UMLS semantic types
+      = select_tag("semantic_types", options_for_select(@semantic_types_for_select), multiple: "true", data: {placeholder: "Start typing to select UMLS semantic types"}, class: "form-control", style: "width: 432px")
 
-        %div.form-group
-          %label{for: "class_hierarchy_max_level"} Include ancestors up to level:
-          - options = [["none", 0], *(1..10).map {|i| [i, i]}, ["all", 999]]
-          = select_tag("class_hierarchy_max_level", options_for_select(options, 0))
+  %div.form-group
+    %label{for: "class_hierarchy_max_level"} Include ancestors up to level
+    - options = [["none", 0], *(1..10).map {|i| [i, i]}, ["all", 999]]
+    = select_tag("class_hierarchy_max_level", options_for_select(options, 0), class: "form-control", style: "width: 432px")
 
-        - if @recognizers.length > 1
-          %div.form-group
-            %label{for: "recognizer"} Entity recognizer:
-            - default_recognizer = @recognizers.include?("mgrep") ? "mgrep" : @recognizers.first
-            = select_tag("recognizer", options_for_select(@recognizers.map {|r| [r,r]}, default_recognizer))
+  - if @recognizers.length > 1
+    %div.form-group
+      %label{for: "recognizer"} Entity recognizer
+      - default_recognizer = @recognizers.include?("mgrep") ? "mgrep" : @recognizers.first
+      = select_tag("recognizer", options_for_select(@recognizers.map {|r| [r,r]}, default_recognizer), class: "form-control", style: "width: 432px")
 
-        / annotator_button calls 'get_annotations' in bp_annotator.js
-        %input#annotator_button{type: "button", value: "Get Annotations", class: "btn btn-primary"}/
-        %span.annotator_spinner{style: "display: none;"}
-          %img{src: asset_path('spinners/spinner_000000_16px.gif'), style: "vertical-align: middle;"}/
-        %span#annotator_error.annotator_error{style: "color: red; vertical-align: middle; margin-left: 3px;"}
+  / annotator_button calls 'get_annotations' in bp_annotator.js
+  %input#annotator_button{type: "button", value: "Get Annotations", class: "btn btn-primary"}/
+  %span.annotator_spinner{style: "display: none;"}
+    %img{src: asset_path('spinners/spinner_000000_16px.gif'), style: "vertical-align: middle;"}/
+  %span#annotator_error.annotator_error{style: "color: red; vertical-align: middle; margin-left: 3px;"}
 
-  %div.row
-    %div.col-xs-12
-      #annotations_container
-        #result_counts
-        %h2{:style => "margin-bottom: 0;"}
-          Annotations
-        #filter_list{:style => "font-size: 9pt; color: gray; display: none; clear: both; margin: -15px 0 5px"}
-          %span#filter_title> Results are filtered by:
-          \&nbsp;
-          %span#filter_names
-        #results_error{:style => "color: red; margin-bottom: 7px;"}
-        %table#annotations.zebra{:style => "min-width: 700px; width: 100%;"}
-          %thead
-            %tr
-              %th
-                Class
-                %span.popup_container
-                  %span.bp_popup_link_container
-                    %a#filter_classes.bp_popup_link{:href => "javascript:void(0);"} filter
-                  %div#classes_filter_list.bp_popup_list
-              %th
-                Ontology
-                %span.popup_container
-                  %span.bp_popup_link_container
-                    %a#filter_ontologies.bp_popup_link{:href => "javascript:void(0);"} filter
-                  %div#ontology_filter_list.bp_popup_list
-              %th{class: "match_type"}
-                Type
-                %span.popup_container
-                  %span.bp_popup_link_container
-                    %a#filter_match_type.bp_popup_link{:href => "javascript:void(0);"} filter
-                  %div#match_type_filter_list.bp_popup_list
-              %th UMLS Sem Type
-              %th{class: "match_context"} Context
-              %th
-                Matched Class
-                %span.popup_container
-                  %span.bp_popup_link_container
-                    %a#filter_matched_classes.bp_popup_link{:href => "javascript:void(0);"} filter
-                  %div#matched_classes_filter_list.bp_popup_list
-              %th
-                Matched Ontology
-                %span.popup_container
-                  %span.bp_popup_link_container
-                    %a#filter_matched_ontologies.bp_popup_link{:href => "javascript:void(0);"} filter
-                  %div#matched_ontology_filter_list.bp_popup_list
-          %tbody
-        #download_links{:style => "margin-top: 1.5em;"}
-          %p
-            %span{:style => "padding: 0 3px 0 0;"}>
-              %b Format results as:
-              %span#download_links_tabdelimited.link_button.ui_button
-              %span#download_links_json.link_button.ui_button
-              %span#download_links_text.link_button.ui_button
-            %span#download_links_xml.link_button.ui_button
-          %span{:style => "font-size: 8pt;"}
-            To reproduce these results:
-            %br/
-            %span#annotator_parameters
-            %br/
-            Additional parameters are documented at
-            \#{link_to 'Annotator Web Service', "#{$REST_URL}/documentation#nav_annotator", :target => "_blank"}
+%div.row
+  %div.col
+    #annotations_container
+      #result_counts
+      %h2{:style => "margin-bottom: 0;"}
+        Annotations
+      #filter_list{:style => "font-size: 9pt; color: gray; display: none; clear: both; margin: -15px 0 5px"}
+        %span#filter_title> Results are filtered by:
+        \&nbsp;
+        %span#filter_names
+      #results_error{:style => "color: red; margin-bottom: 7px;"}
+      %table#annotations.zebra{:style => "min-width: 700px; width: 100%;"}
+        %thead
+          %tr
+            %th
+              Class
+              %span.popup_container
+                %span.bp_popup_link_container
+                  %a#filter_classes.bp_popup_link{:href => "javascript:void(0);"} filter
+                %div#classes_filter_list.bp_popup_list
+            %th
+              Ontology
+              %span.popup_container
+                %span.bp_popup_link_container
+                  %a#filter_ontologies.bp_popup_link{:href => "javascript:void(0);"} filter
+                %div#ontology_filter_list.bp_popup_list
+            %th{class: "match_type"}
+              Type
+              %span.popup_container
+                %span.bp_popup_link_container
+                  %a#filter_match_type.bp_popup_link{:href => "javascript:void(0);"} filter
+                %div#match_type_filter_list.bp_popup_list
+            %th UMLS Sem Type
+            %th{class: "match_context"} Context
+            %th
+              Matched Class
+              %span.popup_container
+                %span.bp_popup_link_container
+                  %a#filter_matched_classes.bp_popup_link{:href => "javascript:void(0);"} filter
+                %div#matched_classes_filter_list.bp_popup_list
+            %th
+              Matched Ontology
+              %span.popup_container
+                %span.bp_popup_link_container
+                  %a#filter_matched_ontologies.bp_popup_link{:href => "javascript:void(0);"} filter
+                %div#matched_ontology_filter_list.bp_popup_list
+        %tbody
+      #download_links{:style => "margin-top: 1.5em;"}
+        %p
+          %span{:style => "padding: 0 3px 0 0;"}>
+            %b Format results as:
+            %span#download_links_tabdelimited.link_button.ui_button
+            %span#download_links_json.link_button.ui_button
+            %span#download_links_text.link_button.ui_button
+          %span#download_links_xml.link_button.ui_button
+        %span{:style => "font-size: smaller;"}
+          To reproduce these results:
+          %br/
+          %span#annotator_parameters
+          %br/
+          Additional parameters are documented at
+          \#{link_to 'Annotator Web Service', "#{$REST_URL}/documentation#nav_annotator", :target => "_blank"}

From 0f91932afa92d5c4e0c3765dec6b59fc1cc90962 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 17 May 2018 14:51:48 -0700
Subject: [PATCH 23/95] Refactor search page to use Bootstrap 4

---
 app/assets/javascripts/bp_search.js.erb    | 39 +++++----
 app/assets/stylesheets/bioportal.scss      | 31 +++----
 app/assets/stylesheets/resource_index.scss |  2 +-
 app/views/search/index.html.haml           | 99 +++++++++++-----------
 config/locales/en.rb                       |  6 +-
 5 files changed, 87 insertions(+), 90 deletions(-)

diff --git a/app/assets/javascripts/bp_search.js.erb b/app/assets/javascripts/bp_search.js.erb
index 5ef72376b4..df60f482fb 100644
--- a/app/assets/javascripts/bp_search.js.erb
+++ b/app/assets/javascripts/bp_search.js.erb
@@ -127,7 +127,8 @@ function findOntologyOwnerOfClass(clsID, ontAcronyms) {
 jQuery(document).ready(function() {
     // Wire advanced search categories
     jQuery("#search_categories").chosen({
-        search_contains: true
+        search_contains: true,
+        width: "432px"
     });
     jQuery("#search_button").button({
         search_contains: true
@@ -139,14 +140,11 @@ jQuery(document).ready(function() {
         ajax_process_halt();
     });
 
+    jQuery("#search_spinner").hide();
+
     // Put cursor in search box by default
     jQuery("#search_keywords").focus();
 
-    // Show/hide on refresh
-    if (advancedOptionsSelected()) {
-        jQuery("#search_options").removeClass("not_visible");
-    }
-
     jQuery("#search_select_ontologies").change(function() {
         if (jQuery(this).is(":checked")) {
             jQuery("#ontology_picker_options").removeClass("not_visible");
@@ -160,11 +158,7 @@ jQuery(document).ready(function() {
     jQuery("#search_results a.additional_ont_results_link").live("click", showAdditionalOntResults);
     jQuery("#search_results a.additional_cls_results_link").live("click", showAdditionalClsResults);
 
-    // Show advanced options
-    jQuery("#advanced_options").click(function(event) {
-        jQuery("#search_options").toggleClass("not_visible");
-        jQuery("#hide_advanced_options").toggleClass("not_visible");
-    });
+    jQuery("#advanced_options").on('click', toggleAdvancedSearchOptions);
 
     // Events to run whenever search results are updated (mainly counts)
     jQuery(document).live("search_results_updated", function() {
@@ -279,11 +273,6 @@ function autoSearch() {
 
       performSearch();
     }
-
-    // Show/hide on refresh
-    if (advancedOptionsSelected()) {
-      jQuery("#search_options").removeClass("not_visible");
-    }
 }
 
 
@@ -1030,4 +1019,20 @@ function definitionDiv(res, defClass) {
 
 function determineHTTPS(url) {
     return url.replace("http:", ('https:' == document.location.protocol ? 'https:' : 'http:'));
-}
\ No newline at end of file
+}
+
+function toggleAdvancedSearchOptions() {
+    var elem = jQuery("#advanced_options");
+    var searchOptions = jQuery("#search_options");
+    
+    if (elem.text() == elem.data("text-swap")) {
+        elem.text(elem.data("text-original"));
+        searchOptions.hide();
+    } else {
+        elem.data("text-original", elem.text());
+        elem.text(elem.data("text-swap"));
+        searchOptions.show();
+    }
+}
+
+
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index f900926f58..17032945e1 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1772,16 +1772,8 @@ div.additional_results_link {
   text-decoration: none;
 }
 
-#result_stats {
-  padding-bottom: 15px;
-  width: 800px;
-  color: gray;
-  text-align: right;
-}
-
 #search_results {
   display: none;
-  width: 800px;
 }
 
 #search_results_container {
@@ -1806,15 +1798,6 @@ div#search_categories_chzn .chzn-drop {
   color: gray;
   padding-bottom: 7px;
 }
-.search_options {
-  padding-left: 20px;
-}
-#advanced_options_container {
-  font-size: 85%;
-  clear: both;
-  text-align: right;
-  width: 432px;
-}
 #result_stats a {
   color: gray;
 }
@@ -1837,16 +1820,22 @@ div#search_categories_chzn .chzn-drop {
 }
 .definition {
   cursor: help;
-  border-bottom: thin dotted green;
-}
-#search_options label {
-  line-height: 1.5em;
 }
 .concept_uri {
   font-size: 9pt;
   color: gray;
 }
 
+#search_categories_chosen .chosen-container .chosen-container-multi {
+  width: 432px;
+}
+
+/* Prevents placeholder text in search input from being truncated.
+/* https://github.com/harvesthq/chosen/issues/2029#issuecomment-187442769 */
+#search_options #ontology_ontologyId_chosen .search-field:only-child,
+#search_options #ontology_ontologyId_chosen .search-field:only-child input {
+  width: 100% !important;
+}
 
 /************************************
  * Standardized BP Popups
diff --git a/app/assets/stylesheets/resource_index.scss b/app/assets/stylesheets/resource_index.scss
index 9204b4921e..c3a6a35445 100644
--- a/app/assets/stylesheets/resource_index.scss
+++ b/app/assets/stylesheets/resource_index.scss
@@ -109,7 +109,7 @@ div#resource_results div.resource_results h2 {
 .highlighting {
   font-style: oblique;
 }
-#search_button, #resource_index_search_button {
+#resource_index_search_button {
   float: right;
   margin-left: 445px;
   position: absolute;
diff --git a/app/views/search/index.html.haml b/app/views/search/index.html.haml
index f5fa9719f3..c61ae47687 100644
--- a/app/views/search/index.html.haml
+++ b/app/views/search/index.html.haml
@@ -1,58 +1,57 @@
 - @title = "Search"
 
-%div#search_input
-  %h1 Class Search
-  %p 
-    = t(".intro").html_safe 
-    = link_to(help_path(anchor: "Search_Tab"), id: "search-help", aria: {label: "View search help"}) do
-      %i.fa.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .5em"}
+%div.container.mt-5
+  %h1.display-4 
+    Class Search
 
   = form_tag("/search", method: "post") do
-    = field_set_tag do
-      = text_field_tag("search_keywords", nil, placeholder: t(".search_keywords_placeholder"), style: "width: 426px; height: 20px; float: left; margin-right: 1em;")
-      = button_tag("Search", id: "search_button", style: "font-size: 10pt !important; margin: -1.5px 0 0;")
+    %div.form-group
+      = text_field_tag("search_keywords", nil, class: "form-control", aria: {describedby: "classSearchHelpBlock"})
+      %small#classSearchHelpBlock.form-text.text-muted
+        = t(".search_keywords_placeholder")
+        = link_to("help", help_path(anchor: "Search_Tab"), id: "search-help", aria: {label: "View search documentation"}, class: "float-right")
+    %div.form-group
+      = link_to("Show advanced options", "javascript:void(0)", id: "advanced_options", data: {text_swap: "Hide advanced options"}, class: "form-text")
 
-  %span
-    %span#search_spinner{:style => "position: relative; left: 85px; display: none; padding: 4px;"}
-      \&nbsp;
-      %img{:src => asset_path('spinners/spinner_000000_16px.gif'), :style => "vertical-align: inherit;"}/
-  #advanced_options_container
-    %a#advanced_options{:href => "javascript:void(0);"}
-      %span#hide_advanced_options.not_visible> hide&nbsp;
-      advanced options
-  #search_options.not_visible{:style => "padding-top: .6em; clear: both; margin-bottom: 40px;"}
-    %h2{:style => "margin-bottom: 3px; font-size: 12pt; !important;"} Include in your search...
-    #include_options.search_options
-      = check_box :search, :include_properties
-      = label :search, :include_properties, "<span class='definition' title='Named association between two entities. Examples are &quot;definition&quot; (a relation between a class and some text) and &quot;part-of&quot; (a relation between two classes).'>Property</span> values</span>".html_safe
-      %br/
-      = check_box :search, :include_obsolete
-      = label :search, :include_obsolete, "<span class='definition' title='A class that the authors of the ontology have flagged as being obsolete and which they recommend that people not use. These classes are often left in ontologies (rather than removing them entirely) so that existing systems that depend on them will continue to function.'>Obsolete classes</span>".html_safe
-      %br/
-      /
-        Disable until we support non-production filtering on rest
-        = check_box :search, :include_non_production
-        = label :search, :include_non_production, "Non-production ontologies"
-        %br/
-      = check_box :search, :include_views
-      = label :search, :include_views, "Ontology views</a>".html_safe
-    %h2{:style => "margin: 10px 0 3px; font-size: 12pt; !important;"} Narrow your search to...
-    #remove_options.search_options
-      = check_box :search, :exact_match
-      = label :search, :exact_match, "Exact matches"
-      %br/
-      = check_box :search, :require_definition
-      = label :search, :require_definition, "Classes with definitions"
-      %br/
-      %br/
-      %h2{:style => "font-size: 10pt; !important; margin-bottom: 3px;"} Categories
-      = select :search, :categories, options_for_select(categories_for_select), { }, :style => "width: 432px", :multiple => 'true', "data-placeholder".to_sym => "Type here to select categories or leave blank to use all"
-      #ontology_picker_options{:style => "margin-top: 1em; position: relative; left: 2px;"}
-        = render :partial => "shared/ontology_picker", :locals => { :sel_text => "Ontologies" }
-%div#search_results_container
-  #result_stats
-  #search_messages
-  #search_results
+    -# Advanced search options
+    %div#search_options{style: "display: none;"}
+      %div.form-group.row
+        %div.col-sm-2 Include in search:
+        %div.col-sm-10
+          %div.form-check
+            = check_box(:search, :include_properties, class: "form-check-input")
+            = label(:search, :include_properties, "Property values", class: "form-check-label definition", title: t(".property_definition"))
+          %div.form-check
+            = check_box(:search, :include_obsolete, class: "form-check-input")
+            = label(:search, :include_obsolete, "Obsolete classes", class: "form-check-label definition", title: t(".obsolete_definition"))
+          %div.form-check
+            = check_box(:search, :include_views, class: "form-check-input")
+            = label(:search, :include_views, "Ontology views", class: "form-check-label")
+      %div.form-group.row
+        %div.col-sm-2 Narrow search to:
+        %div.col-sm-10
+          %div.form-check
+            = check_box(:search, :exact_match, class: "form-check-input")
+            = label(:search, :exact_match, "Exact matches", class: "form-check-label")
+          %div.form-check
+            = check_box(:search, :require_definition, class: "form-check-input")
+            = label(:search, :require_definition, "Classes with definitions", class: "form-check-label")
+      %div.form-group
+        %h6{style: "font-size: 10pt !important"} Categories
+        = select(:search, :categories, options_for_select(categories_for_select), {}, style: "width: 432px", multiple: "true", data: {placeholder: t(".categories_placeholder")})
+      %div.form-group.mb-5
+        = render :partial => "shared/ontology_picker", locals: {sel_text: "Ontologies"}
+
+    = button_tag("Search", id: "search_button", class: "btn btn-primary")
+    = content_tag(:span, id: "search_spinner") do
+      %img{src: asset_path('spinners/spinner_000000_16px.gif'), style: "vertical-align: middle;"}
+
+  -# Search results
+  %div.row.mt-4#search_results_container
+    %div.col
+      #result_stats
+      #search_messages
+      #search_results
 
 %div#biomixer{style: "display: none;"}
 
diff --git a/config/locales/en.rb b/config/locales/en.rb
index 62b46bf071..9dbc45d394 100644
--- a/config/locales/en.rb
+++ b/config/locales/en.rb
@@ -30,7 +30,11 @@
     search: {
       index: {
         intro: 'Search for a class in multiple ontologies',
-        search_keywords_placeholder: 'Enter a class, e.g. Melanoma'
+        search_keywords_placeholder: 'Enter a class, e.g. Melanoma',
+        categories_placeholder: 'Start typing to select categories or leave blank to use all',
+        property_definition: 'Named association between two entities. Examples are "definition" (a relation between a class and some text) and "part-of" (a relation between two classes).',
+        obsolete_definition: 'A class that the authors of the ontology have flagged as being obsolete and which they recommend that people not use.' +
+          ' These classes are often left in ontologies (rather than removing them entirely) so that existing systems that depend on them will continue to function.'
       }
     },
 

From 14b54093a812282bdb6b89ff68986f6b1ba2b7b5 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 17 May 2018 15:16:11 -0700
Subject: [PATCH 24/95] Extract CSS for search page into separate file

---
 app/assets/stylesheets/application.css.scss |   1 +
 app/assets/stylesheets/bioportal.scss       | 178 --------------------
 app/assets/stylesheets/search.scss          | 172 +++++++++++++++++++
 3 files changed, 173 insertions(+), 178 deletions(-)
 create mode 100644 app/assets/stylesheets/search.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 263928645d..9196eb6b52 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -31,6 +31,7 @@
 @import "mappings";
 @import "recommender";
 @import "resource_index";
+@import "search";
 @import "submissions";
 @import "tree";
 @import "visits";
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 17032945e1..37d998a5e5 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1659,184 +1659,6 @@ button.fg-button-menu, button.fg-button {
   font-style: oblique;
 }
 
-
-/************************************
- * Search
- ************************************/
-
-form.button-to {
-  float: left;
-}
-
-#ontology_picker_head {
-  font-size: 10pt !important;
-}
-
-.not_visible {
-  position: fixed !important;
-  top: -999999px !important;
-}
-
-#search_results_container #search_results_info {
-  display: none !important;
-}
-
-#search_results_filter {
-  display: none;
-}
-
-#search_spinner {
-  display: inline-block;
-  padding: 8px 4px;
-}
-
-#search_options #ontology_ontologyId {
-  display: none;
-}
-
-.class_details_pop {
-  overflow: auto;
-  width: 750px !important;
-  display: block !important;
-}
-
-table#search_results td {
-  vertical-align: top;
-  padding: 12px 8px 12px 12px;
-}
-
-div.search_result {
-  margin-bottom: 1.5em;
-}
-
-div.class_link a {
-  font-size: 18px;
-}
-
-span.class_def {
-  display: block;
-  margin: 3px 0 2px;
-  font-size: 12px;
-}
-
-.additional_ont_results {
-  padding: 2em;
-  margin: 2em;
-  background-color: rgb(230,230,230);
-}
-.additional_cls_results {
-  padding: 2em;
-  margin: 2em;
-  background-color: rgb(230,230,230);
-}
-
-.subordinate_ont_results {
-  padding: 1em;
-  padding-left: 2em;
-  padding-top: 2em;
-  margin: 1em;
-  margin-left: 2em;
-  margin-top: 2em;
-  background-color: rgb(240,240,240);
-}
-.subordinate_ont_results_title {
-  color: rgb(100,100,100);
-  background: rgb(200,200,200);
-  padding: 0.5em;
-}
-
-div.search_result_additional {
-  padding-left: 30px;
-  margin: 1em 0 1.2em;
-}
-
-div.search_result_additional .class_link a {
-  font-size: 15px !important;
-}
-
-div.additional_results_link {
-  margin-top: 5px;
-}
-
-.search_result_links a {
-  font-size: 11px !important;
-  color: green;
-}
-
-.hide_link {
-  text-decoration: underline;
-  padding-left: 7px;
-}
-
-.not_underlined {
-  text-decoration: none;
-}
-
-#search_results {
-  display: none;
-}
-
-#search_results_container {
-  margin-top: .5em;
-  clear: both;
-}
-
-div#search_categories_chzn {
-  width: 432px !important;
-}
-div#search_categories_chzn .chzn-choices input {
-  font-style: oblique;
-}
-div#search_categories_chzn.chzn-container-active input {
-  font-style: normal !important;
-}
-div#search_categories_chzn .chzn-drop {
-  width: 432px !important;
-}
-#search_messages {
-  font-style: oblique;
-  color: gray;
-  padding-bottom: 7px;
-}
-#result_stats a {
-  color: gray;
-}
-#ontology_counts {
-  display: none;
-}
-.popup_counts {
-  float: right;
-  display: none;
-}
-.ontology_counts_tooltip {
-  background-color: #EEEEEE;
-  border: 1px solid black;
-  color: black;
-  font-size: 12px;
-  padding: 10px 15px;
-  text-align: left;
-  z-index: 999;
-  box-shadow: 3px 3px 7px gray;
-}
-.definition {
-  cursor: help;
-}
-.concept_uri {
-  font-size: 9pt;
-  color: gray;
-}
-
-#search_categories_chosen .chosen-container .chosen-container-multi {
-  width: 432px;
-}
-
-/* Prevents placeholder text in search input from being truncated.
-/* https://github.com/harvesthq/chosen/issues/2029#issuecomment-187442769 */
-#search_options #ontology_ontologyId_chosen .search-field:only-child,
-#search_options #ontology_ontologyId_chosen .search-field:only-child input {
-  width: 100% !important;
-}
-
 /************************************
  * Standardized BP Popups
  ************************************/
diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
new file mode 100644
index 0000000000..fdfd76229f
--- /dev/null
+++ b/app/assets/stylesheets/search.scss
@@ -0,0 +1,172 @@
+form.button-to {
+  float: left;
+}
+
+#ontology_picker_head {
+  font-size: 10pt !important;
+}
+
+.not_visible {
+  position: fixed !important;
+  top: -999999px !important;
+}
+
+#search_results_container #search_results_info {
+  display: none !important;
+}
+
+#search_results_filter {
+  display: none;
+}
+
+#search_spinner {
+  display: inline-block;
+  padding: 8px 4px;
+}
+
+#search_options #ontology_ontologyId {
+  display: none;
+}
+
+.class_details_pop {
+  overflow: auto;
+  width: 750px !important;
+  display: block !important;
+}
+
+table#search_results td {
+  vertical-align: top;
+  padding: 12px 8px 12px 12px;
+}
+
+div.search_result {
+  margin-bottom: 1.5em;
+}
+
+div.class_link a {
+  font-size: 18px;
+}
+
+span.class_def {
+  display: block;
+  margin: 3px 0 2px;
+  font-size: 12px;
+}
+
+.additional_ont_results {
+  padding: 2em;
+  margin: 2em;
+  background-color: rgb(230,230,230);
+}
+.additional_cls_results {
+  padding: 2em;
+  margin: 2em;
+  background-color: rgb(230,230,230);
+}
+
+.subordinate_ont_results {
+  padding: 1em;
+  padding-left: 2em;
+  padding-top: 2em;
+  margin: 1em;
+  margin-left: 2em;
+  margin-top: 2em;
+  background-color: rgb(240,240,240);
+}
+.subordinate_ont_results_title {
+  color: rgb(100,100,100);
+  background: rgb(200,200,200);
+  padding: 0.5em;
+}
+
+div.search_result_additional {
+  padding-left: 30px;
+  margin: 1em 0 1.2em;
+}
+
+div.search_result_additional .class_link a {
+  font-size: 15px !important;
+}
+
+div.additional_results_link {
+  margin-top: 5px;
+}
+
+.search_result_links a {
+  font-size: 11px !important;
+  color: green;
+}
+
+.hide_link {
+  text-decoration: underline;
+  padding-left: 7px;
+}
+
+.not_underlined {
+  text-decoration: none;
+}
+
+#search_results {
+  display: none;
+}
+
+#search_results_container {
+  margin-top: .5em;
+  clear: both;
+}
+
+div#search_categories_chzn {
+  width: 432px !important;
+}
+div#search_categories_chzn .chzn-choices input {
+  font-style: oblique;
+}
+div#search_categories_chzn.chzn-container-active input {
+  font-style: normal !important;
+}
+div#search_categories_chzn .chzn-drop {
+  width: 432px !important;
+}
+#search_messages {
+  font-style: oblique;
+  color: gray;
+  padding-bottom: 7px;
+}
+#result_stats a {
+  color: gray;
+}
+#ontology_counts {
+  display: none;
+}
+.popup_counts {
+  float: right;
+  display: none;
+}
+.ontology_counts_tooltip {
+  background-color: #EEEEEE;
+  border: 1px solid black;
+  color: black;
+  font-size: 12px;
+  padding: 10px 15px;
+  text-align: left;
+  z-index: 999;
+  box-shadow: 3px 3px 7px gray;
+}
+.definition {
+  cursor: help;
+}
+.concept_uri {
+  font-size: 9pt;
+  color: gray;
+}
+
+#search_categories_chosen .chosen-container .chosen-container-multi {
+  width: 432px;
+}
+
+/* Prevents placeholder text in search input from being truncated.
+/* https://github.com/harvesthq/chosen/issues/2029#issuecomment-187442769 */
+#search_options #ontology_ontologyId_chosen .search-field:only-child,
+#search_options #ontology_ontologyId_chosen .search-field:only-child input {
+  width: 100% !important;
+}

From c1c7c36c0e84ff5f768c118bc0dd9365881a42d2 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 17 May 2018 15:18:36 -0700
Subject: [PATCH 25/95] Minor code reformatting

---
 app/assets/stylesheets/search.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/assets/stylesheets/search.scss b/app/assets/stylesheets/search.scss
index fdfd76229f..40dc92dbe0 100644
--- a/app/assets/stylesheets/search.scss
+++ b/app/assets/stylesheets/search.scss
@@ -58,6 +58,7 @@ span.class_def {
   margin: 2em;
   background-color: rgb(230,230,230);
 }
+
 .additional_cls_results {
   padding: 2em;
   margin: 2em;
@@ -73,6 +74,7 @@ span.class_def {
   margin-top: 2em;
   background-color: rgb(240,240,240);
 }
+
 .subordinate_ont_results_title {
   color: rgb(100,100,100);
   background: rgb(200,200,200);
@@ -118,30 +120,38 @@ div.additional_results_link {
 div#search_categories_chzn {
   width: 432px !important;
 }
+
 div#search_categories_chzn .chzn-choices input {
   font-style: oblique;
 }
+
 div#search_categories_chzn.chzn-container-active input {
   font-style: normal !important;
 }
+
 div#search_categories_chzn .chzn-drop {
   width: 432px !important;
 }
+
 #search_messages {
   font-style: oblique;
   color: gray;
   padding-bottom: 7px;
 }
+
 #result_stats a {
   color: gray;
 }
+
 #ontology_counts {
   display: none;
 }
+
 .popup_counts {
   float: right;
   display: none;
 }
+
 .ontology_counts_tooltip {
   background-color: #EEEEEE;
   border: 1px solid black;
@@ -152,9 +162,11 @@ div#search_categories_chzn .chzn-drop {
   z-index: 999;
   box-shadow: 3px 3px 7px gray;
 }
+
 .definition {
   cursor: help;
 }
+
 .concept_uri {
   font-size: 9pt;
   color: gray;

From 54bcf23d6b910ea796f48e5b1278850923214b03 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 22 May 2018 15:24:54 -0700
Subject: [PATCH 26/95] Refactor add/edit submission page to use Bootstrap 4

---
 app/assets/javascripts/submissions.js.erb |   9 +-
 app/assets/stylesheets/submissions.scss   |  20 +-
 app/views/submissions/_form.html.haml     | 277 +++++++++++-----------
 app/views/submissions/edit.html.haml      |   9 +-
 app/views/submissions/new.html.haml       |   9 +-
 5 files changed, 156 insertions(+), 168 deletions(-)

diff --git a/app/assets/javascripts/submissions.js.erb b/app/assets/javascripts/submissions.js.erb
index 18c1cf26dc..1f54aaca3c 100644
--- a/app/assets/javascripts/submissions.js.erb
+++ b/app/assets/javascripts/submissions.js.erb
@@ -67,13 +67,14 @@ function addContact(event) {
 
   var contacts = document.querySelectorAll("div.contact");
   var newContact = contacts[0].cloneNode(true);
-  newContact.querySelector("div").classList.add("col-sm-offset-2");
+  newContact.classList.add("offset-sm-2");
 
   var removeButton = newContact.querySelector("button").cloneNode(true);
   removeButton.classList.replace("btn-success", "btn-danger");
   removeButton.classList.replace("add-contact", "remove-contact");
+  removeButton.classList.add("ml-1")
   removeButton.querySelector("i").classList.replace("fa-plus", "fa-minus");
-  newContact.querySelector(".form-inline").appendChild(removeButton);
+  newContact.appendChild(removeButton);
   
   var index = contacts.length;
   var inputs = newContact.getElementsByTagName("input");
@@ -100,9 +101,9 @@ function removeContact(event) {
   var target = event.target;
   var contact;
   if (target.matches("button.remove-contact")) {
-    contact = target.parentNode.parentNode.parentNode;
+    contact = target.parentNode;
   } else if (target.matches("i.fa-minus")) {
-    contact = target.parentNode.parentNode.parentNode.parentNode;
+    contact = target.parentNode.parentNode;
   }
 
   document.querySelector("#contacts").removeChild(contact);
diff --git a/app/assets/stylesheets/submissions.scss b/app/assets/stylesheets/submissions.scss
index 0d3e84df9f..41e12ec325 100644
--- a/app/assets/stylesheets/submissions.scss
+++ b/app/assets/stylesheets/submissions.scss
@@ -1,19 +1,11 @@
-h2.text-center + p.lead.text-center {
-  margin-bottom: 40px;
-}
-
-div.col-sm-offset-2 > a#collapseOWLOptions {
-  margin-top: 5px;
-}
-
-div#contacts  div.contact div.col-sm-offset-2.col-sm-10 {
+div#contacts  div.contact.col-sm-10.offset-sm-2 {
 	margin-top: 5px;
 }
 
-div#contacts #add_contact_button {
-  margin-top: 7px;
+#contacts .contact label {
+	margin-bottom: 0;
 }
 
-div#remote input#submission_pullLocation {
-  margin-bottom: 10px;
-}
+#submissionLocation small.form-text {
+  margin-bottom: 0.5em;
+}
\ No newline at end of file
diff --git a/app/views/submissions/_form.html.haml b/app/views/submissions/_form.html.haml
index a1a5d5f438..ab5806e533 100644
--- a/app/views/submissions/_form.html.haml
+++ b/app/views/submissions/_form.html.haml
@@ -1,6 +1,6 @@
 - unless @errors.nil?
-  %div.form-group.form-group-lg
-    %div.col-sm-offset-2.col-sm-10.enable-lists{style: "color:red;"}
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2.enable-lists{style: "color:red;"}
       %strong Errors On Form
       %ul
         - for error in @errors
@@ -10,16 +10,16 @@
 = hidden_field :submission, :ontology, value: @ontology.id
 
 -# Description
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_description"} 
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_description"} 
     Description
     %span.asterik *
   %div.col-sm-10
     = text_area :submission, :description, rows: 5, value: @submission.description, required: true, class: "form-control"
 
 -# Format
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_hasOntologyLanguage"} 
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_hasOntologyLanguage"} 
     Format
     %span.asterik *
   %div.col-sm-10
@@ -27,91 +27,88 @@
     - selected = @submission.hasOntologyLanguage ? @submission.hasOntologyLanguage : "OWL"
     -# TODO: Add/remove aria-describedby attribute for SKOS help text display
     = select "submission", "hasOntologyLanguage", options_for_select(ont_formats, selected), {required: true}, {class: "form-control"}
-  %div.col-sm-offset-2.col-sm-10
-    %a#collapseOWLOptions{href: "#owl-options", role: "button", data: {toggle: "collapse"}, aria: {expanded: "false", controls: "owl-options"}, |
-    class: "btn btn-default btn-sm"} Show advanced OWL options |
-  %div.col-sm-offset-2.col-sm-10
-    %span#helpSkosFormat.help-block
+    %small.form-text.text-muted#helpSkosFormat
       SKOS vocabularies submitted to BioPortal must contain a minimum of one concept scheme and top concept assertion. |
       Please refer to the NCBO wiki for a more <a href="https://www.bioontology.org/wiki/index.php/SKOSSupport", target="_blank">detailed explanation</a> |
       with examples. |
 
+%div.form-group.row
+  %div.col-sm-10.offset-sm-2
+    %a#collapseOWLOptions{href: "#owl-options", role: "button", data: {toggle: "collapse"}, aria: {expanded: "false", controls: "owl-options"}, |
+    class: "btn btn-outline-secondary btn-sm"} Show advanced OWL options |
+
 -# Optional property overrides for OWL ontologies
 %div#owl-options.collapse
-  %div.form-group.form-group-sm
-    %div.col-sm-offset-2.col-sm-10
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
       %label Customize default property settings
 
-    -# Preferred name
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_prefLabelProperty"} Preferred name
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :prefLabelProperty, value: @submission.prefLabelProperty, class: "form-control", aria: {describedBy: "helpPreferredName"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#helpPreferredName.help-block 
-        Enter a property ID, or leave blank to use the default setting: |
+  -# Preferred name
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_prefLabelProperty"} Preferred name
+      = text_field :submission, :prefLabelProperty, value: @submission.prefLabelProperty, class: "form-control form-control-sm", aria: {describedBy: "preferredNameHelpBlock"}
+      %small.form-text.text-muted#preferredNameHelpBlock 
+        Enter a property ID, or use the default setting: |
         <a href="http://www.w3.org/2004/02/skos/core#prefLabel", target="_blank">http://www.w3.org/2004/02/skos/core#prefLabel</a>. |
     
-    -# Synonym
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_synonymProperty"} Synonym
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :synonymProperty, value: @submission.synonymProperty, class: "form-control", aria: {describedBy: "helpSynonym"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#helpSynonym.help-block
+  -# Synonym
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_synonymProperty"} Synonym
+      = text_field :submission, :synonymProperty, value: @submission.synonymProperty, class: "form-control form-control-sm", aria: {describedBy: "synonymHelpBlock"}
+      %small.form-text.text-muted#synonymHelpBlock
         Enter a property ID, or leave blank to use the default setting: |
         <a href="http://www.w3.org/2004/02/skos/core#altLabel", target="_blank">http://www.w3.org/2004/02/skos/core#altLabel</a>. |
     
-    -# Definition
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_definitionProperty"} Definition
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :definitionProperty, value: @submission.definitionProperty, class: "form-control", aria: {describedBy: "helpDefinition"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#helpDefinition.help-block
+  -# Definition
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_definitionProperty"} Definition
+      = text_field :submission, :definitionProperty, value: @submission.definitionProperty, class: "form-control form-control-sm", aria: {describedBy: "definitionHelpBlock"}
+      %small.form-text.text-muted#definitionHelpBlock
         Enter a property ID, or leave blank to use the default setting: |
         <a href="http://www.w3.org/2004/02/skos/core#definition", target: "_blank">http://www.w3.org/2004/02/skos/core#definition</a>. |
 
-    -# Author
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_authorProperty"} Author
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :authorProperty, value: @submission.authorProperty, class: "form-control", aria: {describedBy: "authorDefinition"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#authorDefinition.help-block
+  -# Author
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_authorProperty"} Author
+      = text_field :submission, :authorProperty, value: @submission.authorProperty, class: "form-control form-control-sm", aria: {describedBy: "authorHelpBlock"}
+      %small.form-text.text-muted#authorHelpBlock
         Enter a property ID, or leave blank to use the default setting: |
         <a href="http://purl.org/dc/elements/1.1/creator", target: "_blank">http://purl.org/dc/elements/1.1/creator</a>. |
 
   -# Obsolete classes
-  %div.form-group.form-group-sm
-    %div.col-sm-offset-2.col-sm-10
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
       %label Identify obsolete classes
 
-    -# Obsolete
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_obsoleteProperty"} Obsolete property
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :obsoleteProperty, value: @submission.obsoleteProperty, class: "form-control", aria: {describedBy: "obsoleteDefinition"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#obsoleteDefinition.help-block Optionally enter a property ID that indicates obsolete status for ontology classes |
+  %div.form-group.row 
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_obsoleteProperty"} Obsolete property
+      = text_field :submission, :obsoleteProperty, value: @submission.obsoleteProperty, class: "form-control form-control-sm", aria: {describedBy: "obsoleteHelpBlock"}
+      %small.form-text.text-muted#obsoleteHelpBlock 
+        Optionally enter a property ID that indicates obsolete status for ontology classes |
         (the property value must be set to "true"). Note that by default, BioPortal checks for existence of the owl:deprecated property. |
-    %div.col-sm-offset-2.col-sm-10
-      %label.control-label{for: "submission_obsoleteParent"} Obsolete branch root
-    %div.col-sm-offset-2.col-sm-10
-      = text_field :submission, :obsoleteParent, value: @submission.obsoleteParent, class: "form-control", aria: {describedBy: "obsoleteParentDefinition"}
-    %div.col-sm-offset-2.col-sm-10
-      %span#obsoleteParentDefinition.help-block Optionally enter a class ID for the root of an obsolete branch. All classes in the branch will be marked as |
+
+  %div.form-group.row
+    %div.col-sm-10.offset-sm-2
+      %label{for: "submission_obsoleteParent"} Obsolete branch root
+      = text_field :submission, :obsoleteParent, value: @submission.obsoleteParent, class: "form-control form-control-sm", aria: {describedBy: "obsoleteRootHelpBlock"}
+      %small.form-text.text-muted#obsoleteRootHelpBlock 
+        Optionally enter a class ID for the root of an obsolete branch. All classes in the branch will be marked as |
         obsolete, with the exception of the root class. |
 
 -# Version
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_version"} Version
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_version"} Version
   %div.col-sm-10
     = text_field :submission, :version, value: @submission.version, class: "form-control"
 
 -# Status
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_status"} 
+%div.form-group.row
+  %label.col-sm-2.col-form-lable{for: "submission_status"} 
     Status
     %span.asterik *
   %div.col-sm-10
@@ -120,47 +117,49 @@
     = select :submission, :status, status_options, {selected: selected_status, required: true}, class: "form-control"
 
 -# Release date
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "datepicker"} 
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "datepicker"} 
     Release date
     %span.asterik *
   %div.col-sm-10
-    %div.input-group.input-group-lg
+    %div.input-group
       - release_date = @submission.released ? Date.parse(@submission.released) : Date.today
       = text_field(:submission, :released, id: "datepicker", value: "#{l(release_date, format: :month_day_year)}", required: true, class: "form-control", readonly: "readonly")
-      %span.input-group-addon
-        %i{class: "fa fa-calendar fa-lg", aria: {hidden: "true"}}
+      %div.input-group-append
+        %span.input-group-text
+          %i{class: "fa fa-calendar fa-lg", aria: {hidden: "true"}}
 
 -# Location
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label
+%div#submissionLocation.form-group.row
+  %label.col-sm-2.col-form-label.pt-0
     Location
     %span.asterik *
   %div.col-sm-10
     - if !@masterFileOptions
-      - checked = @ontology.summaryOnly
-      = radio_button :submission, :isRemote, 3, :onclick=>"$('.hidden_field').hide();", checked: checked, aria: {describedBy: "metadataHelp"}
-      %label{for: "submission_isRemote_3"}
-        Metadata only
-      %span#metadataHelp.help-block Allow users to view and search your ontology metadata, but not its classes and properties.
-
-      - checked = !( @submission.pullLocation.nil? || @submission.pullLocation.empty? )
-      = radio_button :submission, :isRemote, 1, :onclick=>"location_toggle('remote');", checked: checked, aria: {describedBy: "loadFromURLHelp"}
-      %label{for: "submission_isRemote_1"}
-        Load from URL
-      %span#loadFromURLHelp.help-block New versions loaded on a nightly basis.
-      - display = (checked and "" or "display:none;")
-      %div.hidden_field#remote{style: display}
-        = text_field :submission, :pullLocation, value: @submission.pullLocation, class: "form-control"
-        %p.help-block Enter a URL, including the name of your ontology source file, e.g., http://www.example.com/my_ontology.owl.
-
-      - checked = (!@ontology.summaryOnly) && @submission.pullLocation.nil?
-      = radio_button :submission, :isRemote, 0, :onclick=>"location_toggle('upload');", checked: checked
-      %label{for: "submission_isRemote_0"}
-        Upload local file
-      - display = (checked and "" or "display:none;")
-      %div.hidden_field#upload{style: display}
-        = f.file_field :filePath
+      %div.form-check
+        - checked = @ontology.summaryOnly
+        = radio_button(:submission, :isRemote, 3, :onclick=>"$('.hidden_field').hide();", checked: checked, aria: {describedBy: "metadataHelpBlock"}, class: "form-check-input")
+        %label.form-check-label{for: "submission_isRemote_3"} 
+          Metadata only
+        %small.form-text.text-muted#metadataHelpBlock Allow users to view and search your ontology metadata, but not its classes and properties.
+      %div.form-check
+        - checked = !(@submission.pullLocation.nil? || @submission.pullLocation.empty?)
+        = radio_button(:submission, :isRemote, 1, :onclick=>"location_toggle('remote');", checked: checked, aria: {describedBy: "loadFromURLHelpBlock"}, class: "form-check-input")
+        %label.form-check-label{for: "submission_isRemote_1"} 
+          Load from URL
+        %small.form-text.text-muted#loadFromURLHelpBlock New versions loaded on a nightly basis.
+        - display = (checked and "" or "display:none;")
+        %div.hidden_field#remote{style: display}
+          = text_field(:submission, :pullLocation, value: @submission.pullLocation, aria: {describedBy: "enterURLHelpBlock"}, class: "form-control")
+          %small.form-text.text-muted#enterURLHelpBlock Enter a URL, including the name of your ontology source file, e.g., http://www.example.com/my_ontology.owl.
+      %div.form-check
+        - checked = (!@ontology.summaryOnly) && @submission.pullLocation.nil?
+        = radio_button(:submission, :isRemote, 0, :onclick=>"location_toggle('upload');", checked: checked, class: "form-check-input")
+        %label.form-check-label{for: "submission_isRemote_0"} 
+          Upload local file
+        - display = (checked and "" or "display:none;")
+        %div.hidden_field#upload{style: display}
+          = f.file_field(:filePath, class: "mt-2")
     - else
       -# TODO: Has this section of code actually been tested?
       = radio_button :submission, :isRemote, 0, :onclick=>"location_toggle('upload');", checked: true
@@ -173,72 +172,70 @@
         = f.select("masterFileName", @masterFileOptions, { include_blank: "Select primary file from zip contents", required: true}, {style: "border-color: red;"})
 
 -# Contact(s)
-%div#contacts.form-group.form-group-lg
-  %label.col-sm-2.control-label
+%div#contacts.form-group.row
+  %label.col-sm-2.col-form-label
     Contact
     %span.asterik *
   - if @submission.contact && @submission.contact.size > 0
     - @submission.contact.each_with_index do |contact, i|
       - if i == 0
-        %div.contact
-          %div.col-sm-10
-            %div.form-inline
-              %label Name
-              = text_field :submission, :"contact[#{i}][name]", value: contact["name"], class: "form-control"
-              %label Email
-              = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control"
-              %button.btn.btn-success.form-control.add-contact
-                %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
+        -# Contact div
+        %div.col-sm-10.d-flex.align-items-center.contact
+          %label Name
+          = text_field :submission, :"contact[#{i}][name]", value: contact["name"], class: "form-control flex-grow-1 mx-2"
+          %label Email
+          = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control flex-grow-1 mx-2"
+          %button.btn.btn-success.add-contact
+            %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
       - else
+        -# TODO
         -# Secondary contacts need to be offset by 2 columns, and have a delete button.
-        %div.contact
-          %div.col-sm-offset-2.col-sm-10
-            %div.form-inline
-              %label Name
-              = text_field :submission, :"contact[#{i}][name]", value: contact["name"], class: "form-control"
-              %label Email
-              = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control"
-              %button.btn.btn-success.form-control.add-contact
-                %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
-              %button.btn.btn-danger.form-control.remove-contact
-                %i{class: "fa fa-minus fa-lg", aria: {hidden: "true"}}
+        %div.col-sm-10.d-flex.align-items-center.offset-sm-2.contact
+          %label Name
+          = text_field :submission, :"contact[#{i}][name]", value: contact["name"], class: "form-control flex-grow-1 mx-2"
+          %label Email
+          = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control flex-grow-1 mx-2"
+          %button.btn.btn-success.add-contact
+            %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
+          %button.btn.btn-danger.ml-1.remove-contact
+            %i{class: "fa fa-minus fa-lg", aria: {hidden: "true"}}
   - else
-    %div.contact
-      %div.col-sm-10
-        %div.form-inline
-          %label Name:
-          = text_field :submission, :"contact[0][name]", class: "form-control"
-          %label Email:
-          = text_field :submission, :"contact[0][email]", class: "form-control"
-          %button.btn.btn-success.form-control.add-contact
-            %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}      
+    -# TODO
+    %div.col-sm-10.d-flex.align-items-center.contact
+      %label Name:
+      = text_field :submission, :"contact[0][name]", class: "form-control flex-grow-1 mx-2"
+      %label Email:
+      = text_field :submission, :"contact[0][email]", class: "form-control flex-grow-1 mx-2"
+      %button.btn.btn-success.add-contact
+        %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}      
 
 -# Home page
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_homepage"} Homepage
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_homepage"} Homepage
   %div.col-sm-10
-    = text_field :submission, :homepage, value: @submission.homepage, class: "form-control", aria: {describedBy: "homepageDefinition"}
-  %div.col-sm-offset-2.col-sm-10
-    %span#homepageDefinition.help-block Enter a URL for the main page of your ontology.
+    = text_field :submission, :homepage, value: @submission.homepage, class: "form-control", aria: {describedBy: "homepageHelpBlock"}
+    %small.form-text.text-muted#homepageHelpBlock Enter a URL for the main page of your ontology.
 
 -# Documentation page
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_documentation"} Documentation
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_documentation"} Documentation
   %div.col-sm-10
-    = text_field :submission, :documentation, value: @submission.documentation, class: "form-control", aria: {describedBy: "docsDefinition"}
-  %div.col-sm-offset-2.col-sm-10
-    %span#docsDefinition.help-block Enter a URL for a page that provides ontology documentation.
+    = text_field :submission, :documentation, value: @submission.documentation, class: "form-control", aria: {describedBy: "docsHelpBlock"}
+    %small.form-text.text-muted#docsHelpBlock Enter a URL for a page that provides ontology documentation.
 
 -# Publications page
-%div.form-group.form-group-lg
-  %label.col-sm-2.control-label{for: "submission_publication"} Publications
+%div.form-group.row
+  %label.col-sm-2.col-form-label{for: "submission_publication"} Publications
   %div.col-sm-10
-    = text_field :submission, :publication, value: @submission.publication, class: "form-control", aria: {describedBy: "pubsDefinition"}        
-  %div.col-sm-offset-2.col-sm-10
-    %span#pubsDefinition.help-block Enter a URL for a page that lists publications about your ontology.
+    = text_field :submission, :publication, value: @submission.publication, class: "form-control", aria: {describedBy: "pubsHelpBlock"}        
+    %small.form-text.text-muted#pubsHelpBlock Enter a URL for a page that lists publications about your ontology.
+
+%div.form-group.row
+  %div.col-sm-10.offset-sm-2
+    %label.col-form-label.font-italic * Fields marked with an asterisk are required.  
 
-%div.form-group.form-group-lg
-  %div.col-sm-offset-2.col-sm-10
+%div.form-group.row
+  %div.col-sm-10.offset-sm-2
     %div.form-inline
-      = submit_tag button_text, class: "btn btn-primary"
+      = submit_tag button_text, class: "btn btn-primary mr-sm-2"
       = link_to "Cancel", :back, class: "btn btn-primary"
diff --git a/app/views/submissions/edit.html.haml b/app/views/submissions/edit.html.haml
index 0cb207ca41..de905e94cc 100644
--- a/app/views/submissions/edit.html.haml
+++ b/app/views/submissions/edit.html.haml
@@ -1,9 +1,8 @@
 - @title = "Edit ontology submission"
 
-%div.container
-  %h2.text-center
+%div.container.py-4.py-md-5
+  %h3.text-center.mb-4
     Edit submission information
-    %small for #{@submission.ontology.acronym}
-  %p.lead.text-center * fields are required
-  = form_for :submission, url: ontology_submission_path(@ontology.acronym, @submission.submissionId), html: { method: :put, multipart: true, class: "form-horizontal" } do |f|
+    %small.text-muted for #{@submission.ontology.acronym}
+  = form_for :submission, url: ontology_submission_path(@ontology.acronym, @submission.submissionId), html: { method: :put, multipart: true } do |f|
     = render partial: "form", locals: {f: f, button_text: "Save submission"}
diff --git a/app/views/submissions/new.html.haml b/app/views/submissions/new.html.haml
index 25bda244ce..21d83e6695 100644
--- a/app/views/submissions/new.html.haml
+++ b/app/views/submissions/new.html.haml
@@ -1,10 +1,9 @@
 - @title = "Add new ontology submission"
 
-%div.container
-  %h2.text-center
+%div.container.py-4.py-md-5
+  %h3.text-center.mb-4
     Add new submission
     - if !(@submission.ontology.nil? || (@submission.ontology.is_a? String))
-      %small for #{@submission.ontology.acronym}
-  %p.lead.text-center * fields are required
-  = form_for :submission, url: {action: "create"}, html: {id: "ontology_submission_form", multipart: true, class: "form-horizontal"} do |f|
+      %small.text-muted for #{@submission.ontology.acronym}
+  = form_for :submission, url: {action: "create"}, html: {id: "ontology_submission_form", multipart: true} do |f|
     = render partial: "form", locals: {f: f, button_text: "Add submission"}

From c112d6536f0074dba8308a4281474ec5de5ee11d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 22 May 2018 16:05:28 -0700
Subject: [PATCH 27/95] Refactor ontology visits page to use Bootstrap 4

---
 app/views/visits/index.html.haml | 56 +++++++++++++++-----------------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/app/views/visits/index.html.haml b/app/views/visits/index.html.haml
index 1747419a5d..f15d31eb1b 100644
--- a/app/views/visits/index.html.haml
+++ b/app/views/visits/index.html.haml
@@ -1,30 +1,26 @@
-%div.container
-  
-  %div.row
-    %div.col-xs-10.col-xs-offset-1
-      %h1{style: "margin-bottom: 25px;"}
-        Ontology Visits
-        %small (#{@analytics.date.strftime("%B %Y")})
-      
-  %div.row
-    %div.col-xs-10.col-xs-offset-1
-      %div.table-responsive
-        %table.table.table-hover
-          %thead
-            %tr 
-              %th #
-              %th name
-              %th # visits
-          %tbody
-            - count = 0
-            - @analytics.onts.each do |visits|
-              - ont = @ontologies_hash[visits[:ont].to_s]
-              - next if ont.nil?
-              - count += 1
-              %tr
-                %td
-                  #{count}
-                %td
-                  = link_to("#{ont.name} (#{ont.acronym})", ontology_path(ont.acronym))
-                %td
-                  = number_with_delimiter(visits[:views])            
+%div.px-3.py-3.pt-md-5.pb-md-4.text-center
+  %h1.display-4 
+    Ontology Visits
+  %p.lead (#{@analytics.date.strftime("%B %Y")})
+
+%div.container.pb-3.pb-md-4
+  %div.table-responsive
+    %table.table.table-hover
+      %thead.thead-light
+        %tr 
+          %th #
+          %th name
+          %th # visits
+      %tbody
+        - count = 0
+        - @analytics.onts.each do |visits|
+          - ont = @ontologies_hash[visits[:ont].to_s]
+          - next if ont.nil?
+          - count += 1
+          %tr
+            %td
+              #{count}
+            %td
+              = link_to("#{ont.name} (#{ont.acronym})", ontology_path(ont.acronym))
+            %td
+              = number_with_delimiter(visits[:views])

From 7592a8ee40f2165defc2ffea884ed80c4e6c8d1f Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 22 May 2018 16:28:51 -0700
Subject: [PATCH 28/95] Remove unused CSS

---
 app/assets/stylesheets/application.css.scss | 1 -
 app/assets/stylesheets/visits.scss          | 7 -------
 2 files changed, 8 deletions(-)
 delete mode 100644 app/assets/stylesheets/visits.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 9196eb6b52..addae6e400 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -34,7 +34,6 @@
 @import "search";
 @import "submissions";
 @import "tree";
-@import "visits";
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
diff --git a/app/assets/stylesheets/visits.scss b/app/assets/stylesheets/visits.scss
deleted file mode 100644
index ee05ed6cc1..0000000000
--- a/app/assets/stylesheets/visits.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
-* Recommended by Bootstrap 3 documentation: http://getbootstrap.com/css/#tables-responsive
-*/
-@-moz-document url-prefix() {
-  fieldset { display: table-cell; }
-}
-

From a7506329acd8fecb3a006874cb0f800828007955 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 22 May 2018 17:28:23 -0700
Subject: [PATCH 29/95] Minor font size adjustments for ontology details page

---
 app/views/ontologies/_projects.html.haml | 4 ++--
 app/views/ontologies/_reviews.html.haml  | 4 ++--
 app/views/ontologies/_views.html.haml    | 6 +++---
 app/views/ontologies/_visits.html.haml   | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/views/ontologies/_projects.html.haml b/app/views/ontologies/_projects.html.haml
index 1a4eb78a66..ed5e86d82d 100644
--- a/app/views/ontologies/_projects.html.haml
+++ b/app/views/ontologies/_projects.html.haml
@@ -17,9 +17,9 @@
   %h2{:style => "margin: 2em 0 0"}
     %span{:style => "font-size: x-large; margin-right: 1.5em;"} Projects Using This Ontology
     - if session[:user].nil?
-      %a{:href => "/login?redirect=#{URI.escape("/projects/new", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}"} Create new project
+      %a{:href => "/login?redirect=#{URI.escape("/projects/new", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", style: "font-size: large;"} Create new project
     - else
-      %a{:href => "/projects/new"} Create new project
+      %a{:href => "/projects/new", style: "font-size: large;"} Create new project
   - if @projects.length == 0
     No projects available.
   - else
diff --git a/app/views/ontologies/_reviews.html.haml b/app/views/ontologies/_reviews.html.haml
index 92a8597869..ef3315970f 100644
--- a/app/views/ontologies/_reviews.html.haml
+++ b/app/views/ontologies/_reviews.html.haml
@@ -3,9 +3,9 @@
   %h2{:style => "margin-bottom: .5em;"}
     %span{:style => "font-size: x-large; margin-right: 1.5em;"} Reviews
     - if session[:user].nil?
-      %a{:href => "/login?redirect=/ontologies/#{@ontology.acronym}"} Add your review
+      %a{:href => "/login?redirect=/ontologies/#{@ontology.acronym}", style: "font-size: large"} Add your review
     - else
-      %a.create_review{:href => "/reviews/new?ontology=#{CGI.escape(@ontology.id)}", :title => "Review for #{@ontology.name}"} Add your review
+      %a.create_review{:href => "/reviews/new?ontology=#{CGI.escape(@ontology.id)}", :title => "Review for #{@ontology.name}", style: "font-size: large"} Add your review
   #reviews_container
     - if @reviews.nil? || @reviews.empty?
       %h1{:style => "padding-bottom: .8em;"} No reviews available.
diff --git a/app/views/ontologies/_views.html.haml b/app/views/ontologies/_views.html.haml
index 33627eeac4..14494ba7a1 100644
--- a/app/views/ontologies/_views.html.haml
+++ b/app/views/ontologies/_views.html.haml
@@ -34,9 +34,9 @@
     %span{:style => "font-size: x-large; margin-right: 1.5em;"} Views
     - ont_id_esc = CGI.escape(@ontology.id)
     - if session[:user].nil?
-      %a{:href => "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}"} Create new view
+      %a{:href => "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", style: "font-size: large;"} Create new view
     - else
-      %a{:href => "/ontologies/new?ontology[viewOf]=#{ont_id_esc}"} Create new view
+      %a{:href => "/ontologies/new?ontology[viewOf]=#{ont_id_esc}", style: "font-size: large;"} Create new view
 
   %div{:style => "float:left;"}
     - if @views.empty? || @views.length < 1
@@ -54,7 +54,7 @@
             text-decoration: underline;
         }
 
-      %h4{:style => "margin-top: .5em;"}
+      %h6{:style => "margin-top: .5em;"}
         %a#expand_views{:href => "javascript:void(0);"} Expand All
         |
         %a#collapse_views{:href => "javascript:void(0);"} Collapse All
diff --git a/app/views/ontologies/_visits.html.haml b/app/views/ontologies/_visits.html.haml
index 9bddfd85e6..d9390f253c 100644
--- a/app/views/ontologies/_visits.html.haml
+++ b/app/views/ontologies/_visits.html.haml
@@ -7,7 +7,7 @@
       -# = help_icon("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", { :title => "View individual metrics definitions", :style => "margin-top: -7px;" })
       &nbsp;&nbsp;
       - if visits_data
-        %a{href: @ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", style: "font-size: smaller;", target: "_blank"} Download as CSV
+        %a{href: @ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", style: "font-size: large;", target: "_blank"} Download as CSV
     - if visits_data
       %div#visits_chart_container
         %canvas#visits_chart{style: "width: 100% !important; max-width: 600px; height: 300 !important;"}

From b707526a1349a1633902fbb05c0a7281d63c1204 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 25 May 2018 15:30:13 -0700
Subject: [PATCH 30/95] Remove a top level div element

---
 app/views/layouts/_ontology_viewer.html.haml | 179 +++++++++----------
 1 file changed, 89 insertions(+), 90 deletions(-)

diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 79ab87a1a3..97bf9fec6e 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -66,99 +66,98 @@
         = submit_tag("Create Mapping", class: "btn btn-default", id: "create_mapping_button")
         %button{type: "button", class: "btn btn-default", "data-dismiss": "modal"} Close
 
-%div{:style => "padding: 1em 2em 0; background: #234979;"}
-  %div
-    %span{:style => "color: white; font-size: xx-large;"}
-      %a#ont_sum_link{:href => "/ontologies/#{@ontology.acronym}"}= @ontology.name
+%div
+  %span{:style => "color: white; font-size: xx-large;"}
+    %a#ont_sum_link{:href => "/ontologies/#{@ontology.acronym}"}= @ontology.name
 
-    :css
-      #nav_ontology {
-        padding-left: 2em;
-        font-family: 'Droid Sans', sans-serif;
-      }
-      #nav_ontology a {
-        color: white;
-        text-decoration: none;
-      }
-      #nav_ontology a:hover {
-        text-decoration: underline;
-      }
-      #nav_ontology li {
-        display: table-cell;
-        padding-right: 1em;
-      }
-      .ont_sum_link {
-        font-family: 'Droid Sans', sans-serif;
-      }
-    %div#nav_ontology
-      %ul
-        %li#summary_link.summary_link.nav_link
-          %a{"data-bp_ont_page" => "summary", :href => "/ontologies/#{@ontology.acronym}?p=summary"} Summary
-        - unless @ontology.summaryOnly
-          %li#classes_link.classes_link.nav_link
-            %a{"data-bp_ont_page" => "classes", :href => "/ontologies/#{@ontology.acronym}?p=classes"} Classes
-          %li#properties_link.properties_link.nav_link
-            %a{"data-bp_ont_page" => "properties", :href => "/ontologies/#{@ontology.acronym}?p=properties"} Properties
-        %li#notes_link.notes_link.nav_link
-          %a{"data-bp_ont_page" => "notes", :href => "/ontologies/#{@ontology.acronym}?p=notes"} Notes
-        - unless @ontology.summaryOnly
-          %li#mappings_link.mappings_link.nav_link
-            %a{"data-bp_ont_page" => "mappings", :href => "/ontologies/#{@ontology.acronym}?p=mappings"} Mappings
-          %li#widgets_link.widgets_link.nav_link
-            %a{"data-bp_ont_page" => "widgets", :href => "/ontologies/#{@ontology.acronym}?p=widgets"} Widgets
-        - if @ontology.admin?(session[:user])
+  :css
+    #nav_ontology {
+      padding-left: 2em;
+      font-family: 'Droid Sans', sans-serif;
+    }
+    #nav_ontology a {
+      color: white;
+      text-decoration: none;
+    }
+    #nav_ontology a:hover {
+      text-decoration: underline;
+    }
+    #nav_ontology li {
+      display: table-cell;
+      padding-right: 1em;
+    }
+    .ont_sum_link {
+      font-family: 'Droid Sans', sans-serif;
+    }
+  %div#nav_ontology
+    %ul
+      %li#summary_link.summary_link.nav_link
+        %a{"data-bp_ont_page" => "summary", :href => "/ontologies/#{@ontology.acronym}?p=summary"} Summary
+      - unless @ontology.summaryOnly
+        %li#classes_link.classes_link.nav_link
+          %a{"data-bp_ont_page" => "classes", :href => "/ontologies/#{@ontology.acronym}?p=classes"} Classes
+        %li#properties_link.properties_link.nav_link
+          %a{"data-bp_ont_page" => "properties", :href => "/ontologies/#{@ontology.acronym}?p=properties"} Properties
+      %li#notes_link.notes_link.nav_link
+        %a{"data-bp_ont_page" => "notes", :href => "/ontologies/#{@ontology.acronym}?p=notes"} Notes
+      - unless @ontology.summaryOnly
+        %li#mappings_link.mappings_link.nav_link
+          %a{"data-bp_ont_page" => "mappings", :href => "/ontologies/#{@ontology.acronym}?p=mappings"} Mappings
+        %li#widgets_link.widgets_link.nav_link
+          %a{"data-bp_ont_page" => "widgets", :href => "/ontologies/#{@ontology.acronym}?p=widgets"} Widgets
+      - if @ontology.admin?(session[:user])
+        %li
+          = link_to "Edit ontology information",  "/ontologies/#{@ontology.acronym}/edit"
+        %li
+          = link_to "Add submission", "/ontologies/#{@ontology.acronym}/submissions/new"
+        - unless @submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404)
           %li
-            = link_to "Edit ontology information",  "/ontologies/#{@ontology.acronym}/edit"
-          %li
-            = link_to "Add submission", "/ontologies/#{@ontology.acronym}/submissions/new"
-          - unless @submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404)
-            %li
-              = link_to "Edit submission information (#{@submission_latest.version})", "/ontologies/#{@ontology.acronym}/submissions/#{@submission_latest.submissionId}/edit"
+            = link_to "Edit submission information (#{@submission_latest.version})", "/ontologies/#{@ontology.acronym}/submissions/#{@submission_latest.submissionId}/edit"
 
-  %div{:style => "clear: both; margin-bottom: 1em;"}
-  #ontology_content{:style => "background: white;"}
-    #ont_classes_content.ontology_viewer_content.hidden
-      - if content_section.eql?("classes")
-        :javascript
-          jQuery("#ont_classes_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
-    #ont_properties_content.ontology_viewer_content.hidden
-      - if content_section.eql?("properties")
-        :javascript
-          jQuery("#ont_properties_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
-    #ont_summary_content.ontology_viewer_content.hidden
-      - if content_section.eql?("summary")
-        :javascript
-          jQuery("#ont_summary_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
-    #ont_mappings_content.ontology_viewer_content.hidden
-      - if content_section.eql?("mappings")
-        :javascript
-          jQuery("#ont_mappings_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
-    #ont_notes_content.ontology_viewer_content.hidden
-      - if content_section.eql?("notes")
-        :javascript
-          jQuery("#ont_notes_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
-    #ont_widgets_content.ontology_viewer_content.hidden
-      - if content_section.eql?("widgets")
-        :javascript
-          jQuery("#ont_widgets_content").removeClass("hidden");
-        = yield
-      - else
-        = loading_spinner(true)
+%div{:style => "clear: both; margin-bottom: 1em;"}
+#ontology_content{:style => "background: white;"}
+  #ont_classes_content.ontology_viewer_content.hidden
+    - if content_section.eql?("classes")
+      :javascript
+        jQuery("#ont_classes_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
+  #ont_properties_content.ontology_viewer_content.hidden
+    - if content_section.eql?("properties")
+      :javascript
+        jQuery("#ont_properties_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
+  #ont_summary_content.ontology_viewer_content.hidden
+    - if content_section.eql?("summary")
+      :javascript
+        jQuery("#ont_summary_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
+  #ont_mappings_content.ontology_viewer_content.hidden
+    - if content_section.eql?("mappings")
+      :javascript
+        jQuery("#ont_mappings_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
+  #ont_notes_content.ontology_viewer_content.hidden
+    - if content_section.eql?("notes")
+      :javascript
+        jQuery("#ont_notes_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
+  #ont_widgets_content.ontology_viewer_content.hidden
+    - if content_section.eql?("widgets")
+      :javascript
+        jQuery("#ont_widgets_content").removeClass("hidden");
+      = yield
+    - else
+      = loading_spinner(true)
 - if Rails.env.appliance?
   = render partial: "footer_appliance"
   = javascript_include_tag "application"

From deddce7f95caf68f69635478bb81f7a3f325a5b7 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 31 May 2018 16:42:09 -0700
Subject: [PATCH 31/95] Remove reviews widget from ontology summary page

---
 app/views/ontologies/_metadata.html.haml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index 867623108c..a6b890473b 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -5,7 +5,6 @@
       = render :partial => 'visits'
   %div{style: "width: 60%;"}
     = render :partial => 'details'
-    = render :partial => 'reviews'
     = render :partial => 'submissions'
     = render :partial => 'views'
     %div{:style => "clear: both;"}

From 9ed897e0c9de9d34ea2250716d53766e3e4fb90b Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 31 May 2018 18:13:24 -0700
Subject: [PATCH 32/95] Refactor ontology viewer layout to use Bootstrap 4

---
 .../javascripts/bp_ontology_viewer.js.erb     |   9 +-
 app/views/layouts/_ontology_viewer.html.haml  | 199 ++++++++----------
 2 files changed, 89 insertions(+), 119 deletions(-)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index f801e8a738..e36a58eb04 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -194,18 +194,15 @@ function getConceptLinkEl(concept_id) {
 
 function showOntologyContent(content_section) {
   jQuery.bioportal.ont_pages[content_section].publish();
-  jQuery(".ontology_viewer_content").addClass("hidden");
-  jQuery("#ont_" + content_section + "_content").removeClass("hidden");
 }
 
 // Prevent the default behavior of clicking the ontology page links
 // Instead, fire some history events
 var nav_ont = function(link) {
-  var page = jQuery(link).attr("data-bp_ont_page");
+  var page = jQuery(link).attr("data-bp-ont-page");
   History.pushState({p:page}, jQuery.bioportal.ont_pages[page].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site, "?p=" + page);
 }
 
-
 jQuery(document).ready(function() {
   if (!pageUsesTreeView()) {
     return;
@@ -221,8 +218,8 @@ jQuery(document).ready(function() {
     : content_section_obj.page_name + " | " + org_site;
   document.title = title;
 
-  // Naviation buttons
-  jQuery(".nav_link a").live("click", function(e){
+  // Navigation buttons
+  jQuery("#navbar-ontology a").on("click", function(e){
     e.preventDefault();
     nav_ont(this);
   });
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 97bf9fec6e..7f8a1c7e24 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -1,32 +1,15 @@
 - content_section = (params[:p]) ? params[:p] : "summary"
 - concept_title = @concept.nil? ? "" : " - #{@concept.prefLabel} - Classes"
 - @title = "#{@ontology.name}#{concept_title}"
-= render :partial =>'layouts/header'
-/[if gt IE 7]
-  <style>
-  \#admin_ontology .ui-icon-triangle-1-s {
-  margin-top: -16px;
-  }
-  </style>
-/[if IE 7]
-  <style>
-  \#admin_ontology .ui-icon-triangle-1-s {
-  margin-top: -16px;
-  }
 
-  \#nav_ontology {
-  position: absolute;
-  padding-top: .5em;
-  vertical-align: top !important;
-  }
-  </style>
+- sub = @submission_latest
+- details_available = true
+- if sub.nil? || (sub.respond_to?(:status) && sub.status == 404)
+  - details_available = false
 
-:javascript
-  // Set the background color for this page only
-  jQuery("html").css("background", "#234979");
-  jQuery(document.body).css("background", "#234979");
-  jQuery("#bd").css("background", "#234979");
+= render :partial =>'layouts/header'
 
+:javascript
   // Javascript History HTML5 API
   if ( typeof JSON === 'undefined' ) {
     var
@@ -66,98 +49,88 @@
         = submit_tag("Create Mapping", class: "btn btn-default", id: "create_mapping_button")
         %button{type: "button", class: "btn btn-default", "data-dismiss": "modal"} Close
 
-%div
-  %span{:style => "color: white; font-size: xx-large;"}
-    %a#ont_sum_link{:href => "/ontologies/#{@ontology.acronym}"}= @ontology.name
-
-  :css
-    #nav_ontology {
-      padding-left: 2em;
-      font-family: 'Droid Sans', sans-serif;
-    }
-    #nav_ontology a {
-      color: white;
-      text-decoration: none;
-    }
-    #nav_ontology a:hover {
-      text-decoration: underline;
-    }
-    #nav_ontology li {
-      display: table-cell;
-      padding-right: 1em;
-    }
-    .ont_sum_link {
-      font-family: 'Droid Sans', sans-serif;
-    }
-  %div#nav_ontology
-    %ul
-      %li#summary_link.summary_link.nav_link
-        %a{"data-bp_ont_page" => "summary", :href => "/ontologies/#{@ontology.acronym}?p=summary"} Summary
-      - unless @ontology.summaryOnly
-        %li#classes_link.classes_link.nav_link
-          %a{"data-bp_ont_page" => "classes", :href => "/ontologies/#{@ontology.acronym}?p=classes"} Classes
-        %li#properties_link.properties_link.nav_link
-          %a{"data-bp_ont_page" => "properties", :href => "/ontologies/#{@ontology.acronym}?p=properties"} Properties
-      %li#notes_link.notes_link.nav_link
-        %a{"data-bp_ont_page" => "notes", :href => "/ontologies/#{@ontology.acronym}?p=notes"} Notes
-      - unless @ontology.summaryOnly
-        %li#mappings_link.mappings_link.nav_link
-          %a{"data-bp_ont_page" => "mappings", :href => "/ontologies/#{@ontology.acronym}?p=mappings"} Mappings
-        %li#widgets_link.widgets_link.nav_link
-          %a{"data-bp_ont_page" => "widgets", :href => "/ontologies/#{@ontology.acronym}?p=widgets"} Widgets
+-# A header of sorts to display ontology name and subset of details.
+%div.row.pt-md-4.pb-2
+  %div.col
+    %div.card
+      %h3.card-header
+        = @ontology.name
+      %div.card-body
+        - if details_available
+          %p.card-text
+            = sanitize(sub.description)
+        - if !$PURL_ENABLED.nil? && $PURL_ENABLED && !@ontology.summaryOnly
+          = link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
+        - if details_available
+          - unless sub.homepage.nil?
+            = link_to("Ontology homepage", sub.homepage, class: "card-link", target: "_blank")
+          - unless sub.documentation.nil?
+            = link_to("Documentation", sub.documentation, class: "card-link", target: "_blank")
+          - unless sub.publication.nil?
+            = link_to("Publications", sub.publication, class: "card-link", target: "_blank")
       - if @ontology.admin?(session[:user])
-        %li
-          = link_to "Edit ontology information",  "/ontologies/#{@ontology.acronym}/edit"
-        %li
-          = link_to "Add submission", "/ontologies/#{@ontology.acronym}/submissions/new"
-        - unless @submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404)
-          %li
-            = link_to "Edit submission information (#{@submission_latest.version})", "/ontologies/#{@ontology.acronym}/submissions/#{@submission_latest.submissionId}/edit"
+        %div.card-body
+          = link_to("Edit ontology details", edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm")
+          = link_to("Add submission", new_ontology_submission_path(@ontology.acronym), class: "btn btn-secondary btn-sm")
+          - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
+            = link_to("Edit latest submission (#{@submission_latest.version})", edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), class: "btn btn-secondary btn-sm")
+      - if (details_available && !sub.released.nil?)
+        %div.card-footer.text-muted
+          Last uploaded:
+          = xmldatetime_to_date(sub.creationDate)
+
+%div.row.pb-2
+  %div.col
+    %div.card
+      %div.card-header
+        -# Tabbed navigation bar for ontology content sections
+        %ul.nav.nav-pills.card-header-pills{id: "navbar-ontology", role: "tablist"}
+          %li.nav-item 
+            = link_to("Summary", ontology_path(@ontology.acronym, p: "summary"), |
+                id: "ont-summary-tab", class: "nav-link active", role: "tab", data: {bp_ont_page: "summary", toggle: "tab", target: "#ont_summary_content"}, |
+                aria: {controls: "ont_summary_content", selected: "true"}) |
+          %li.nav-item 
+            = link_to("Classes", ontology_path(@ontology.acronym, p: "classes"), |
+                id: "ont-classes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "classes", toggle: "tab", target: "#ont_classes_content"}, |
+                aria: {controls: "ont_classes_content", selected: "false"}) |
+          %li.nav-item 
+            = link_to("Properties", ontology_path(@ontology.acronym, p: "properties"), |
+                id: "ont-properties-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "properties", toggle: "tab", target: "#ont_properties_content"}, |
+                aria: {controls: "ont_properties_content", selected: "false"}) |
+          %li.nav-item 
+            = link_to("Notes", ontology_path(@ontology.acronym, p: "notes"), |
+                id: "ont-notes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "notes", toggle: "tab", target: "#ont_notes_content"}, |
+                aria: {controls: "ont_notes_content", selected: "false"}) |
+          %li.nav-item
+            = link_to("Mappings", ontology_path(@ontology.acronym, p: "mappings"), |
+                id: "ont-mappings-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "mappings", toggle: "tab", target: "#ont_mappings_content"}, |
+                aria: {controls: "ont_mappings_content", selected: "false"}) |
+          %li.nav-item 
+            = link_to("Widgets", ontology_path(@ontology.acronym, p: "widgets"), |
+                id: "ont-widgets-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "widgets", toggle: "tab", target: "#ont_widgets_content"}, |
+                aria: {controls: "ont_widgets_content", selected: "false"}) |
+      %div.card-body
+        -# Tab panes for displaying ontology content sections
+        %div.tab-content{id: "ontology_content"}
+          %div.tab-pane.active{id: "ont_summary_content", role: "tabpanel", aria: {labelledby: "ont-summary-tab"}}
+            - if content_section.eql?("summary")
+              = yield
+          %div.tab-pane{id: "ont_classes_content", role: "tabpanel", aria: {labelledby: "ont-classes-tab"}}
+            - if content_section.eql?("classes")
+              = yield
+          %div.tab-pane{id: "ont_properties_content", role: "tabpanel", aria: {labelledby: "ont-properties-tab"}}
+            - if content_section.eql?("properties")
+              = yield
+          %div.tab-pane{id: "ont_notes_content", role: "tabpanel", aria: {labelledby: "ont-notes-tab"}}
+            - if content_section.eql?("notes")
+              = yield
+          %div.tab-pane{id: "ont_mappings_content", role: "tabpanel", aria: {labelledby: "ont-mappings-tab"}}
+            - if content_section.eql?("mappings")
+              = yield
+          %div.tab-pane{id: "ont_widgets_content", role: "tabpanel", aria: {labelledby: "ont-widgets-tab"}}
+            - if content_section.eql?("widgets")
+              = yield
 
-%div{:style => "clear: both; margin-bottom: 1em;"}
-#ontology_content{:style => "background: white;"}
-  #ont_classes_content.ontology_viewer_content.hidden
-    - if content_section.eql?("classes")
-      :javascript
-        jQuery("#ont_classes_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
-  #ont_properties_content.ontology_viewer_content.hidden
-    - if content_section.eql?("properties")
-      :javascript
-        jQuery("#ont_properties_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
-  #ont_summary_content.ontology_viewer_content.hidden
-    - if content_section.eql?("summary")
-      :javascript
-        jQuery("#ont_summary_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
-  #ont_mappings_content.ontology_viewer_content.hidden
-    - if content_section.eql?("mappings")
-      :javascript
-        jQuery("#ont_mappings_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
-  #ont_notes_content.ontology_viewer_content.hidden
-    - if content_section.eql?("notes")
-      :javascript
-        jQuery("#ont_notes_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
-  #ont_widgets_content.ontology_viewer_content.hidden
-    - if content_section.eql?("widgets")
-      :javascript
-        jQuery("#ont_widgets_content").removeClass("hidden");
-      = yield
-    - else
-      = loading_spinner(true)
 - if Rails.env.appliance?
   = render partial: "footer_appliance"
   = javascript_include_tag "application"

From f5b83fa0d8350d44ea28549ec19423dd1fe27e3e Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 4 Jun 2018 10:48:16 -0700
Subject: [PATCH 33/95] Minor code / comment reformatting

---
 app/controllers/ontologies_controller.rb | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/controllers/ontologies_controller.rb b/app/controllers/ontologies_controller.rb
index 719cd4f044..019449c730 100644
--- a/app/controllers/ontologies_controller.rb
+++ b/app/controllers/ontologies_controller.rb
@@ -362,23 +362,28 @@ def summary
     # Note: find_by_acronym includes ontology views
     @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:id]).first
     not_found if @ontology.nil?
-    # Check to see if user is requesting RDF+XML, return the file from REST service if so
+    
+    # Check to see if user is requesting RDF+XML. If so, return the file from the REST service.
     if request.accept.to_s.eql?("application/ld+json") || request.accept.to_s.eql?("application/json")
       headers['Content-Type'] = request.accept.to_s
       render text: @ontology.to_jsonld
       return
     end
+    
     # Explore the ontology links
     @metrics = @ontology.explore.metrics rescue []
     @reviews = @ontology.explore.reviews.sort {|a,b| b.created <=> a.created} || []
     @projects = @ontology.explore.projects.sort {|a,b| a.name.downcase <=> b.name.downcase } || []
     @analytics = LinkedData::Client::HTTP.get(@ontology.links["analytics"])
-    # retrieve submissions in descending submissionId order, should be reverse chronological order.
+    @views = @ontology.explore.views.sort {|a,b| a.acronym.downcase <=> b.acronym.downcase } || []
+    
+    # Retrieve submissions in descending submissionId order (should be reverse chronological order)
     @submissions = @ontology.explore.submissions.sort {|a,b| b.submissionId.to_i <=> a.submissionId.to_i } || []
     LOG.add :error, "No submissions for ontology: #{@ontology.id}" if @submissions.empty?
-    # Get the latest submission, not necessarily the latest 'ready' submission
+    
+    # Get the latest submission (not necessarily the latest 'ready' submission)
     @submission_latest = @ontology.explore.latest_submission rescue @ontology.explore.latest_submission(include: "")
-    @views = @ontology.explore.views.sort {|a,b| a.acronym.downcase <=> b.acronym.downcase } || []
+    
     if request.xhr?
       render :partial => 'metadata', :layout => false
     else

From 74fc03dc6cc7a8d1e2ee56d7406f1ded12844cbc Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 4 Jun 2018 15:22:11 -0700
Subject: [PATCH 34/95] Code refactor to remove duplicate code

Also reduces the number of calls to the REST endpoint to retrieve the
ontology object from five to one.
---
 app/controllers/ontologies_controller.rb | 32 ++++++------------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/app/controllers/ontologies_controller.rb b/app/controllers/ontologies_controller.rb
index 019449c730..dd908613a0 100644
--- a/app/controllers/ontologies_controller.rb
+++ b/app/controllers/ontologies_controller.rb
@@ -133,12 +133,6 @@ def index
 
   # GET /visualize/:ontology
   def classes
-    # Hack to make ontologyid and conceptid work in addition to id and ontology params
-    params[:id] = params[:id].nil? ? params[:ontologyid] : params[:id]
-    params[:ontology] = params[:ontology].nil? ? params[:id] : params[:ontology]
-    # Set the ontology we are viewing
-    # Note: find_by_acronym includes ontology views
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology]).first
     # Get the latest 'ready' submission, or fallback to any latest submission
     @submission = get_ontology_submission_ready(@ontology)  # application_controller
 
@@ -150,7 +144,7 @@ def classes
       return
     end
 
-    # set the current PURL for this class
+    # Set the current PURL for this class
     @current_purl = @concept.purl if $PURL_ENABLED
 
     begin
@@ -190,10 +184,6 @@ def classes
   end
 
   def properties
-    # Hack to make ontologyid and conceptid work in addition to id and ontology params
-    params[:id] = params[:id].nil? ? params[:ontologyid] : params[:id]
-    params[:ontology] = params[:ontology].nil? ? params[:id] : params[:ontology]
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology]).first
     if request.xhr?
       return render 'properties', :layout => false
     else
@@ -238,8 +228,6 @@ def edit
   end
 
   def mappings
-    # Note: find_by_acronym includes ontology views
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:id]).first
     counts = LinkedData::Client::HTTP.get("#{LinkedData::Client.settings.rest_url}/mappings/statistics/ontologies/#{params[:id]}")
     @ontologies_mapping_count = []
     unless counts.nil?
@@ -275,8 +263,6 @@ def new
   end
 
   def notes
-    # Note: find_by_acronym includes ontology views
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:id]).first
     # Get the latest 'ready' submission, or fallback to any latest submission
     @submission = get_ontology_submission_ready(@ontology)  # application_controller
     @notes = @ontology.explore.notes
@@ -318,6 +304,13 @@ def show
       end
     end
 
+    # Note: find_by_acronym includes ontology views
+    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology]).first
+    not_found if @ontology.nil?
+
+    # Get the latest submission (not necessarily the latest 'ready' submission)
+    @submission_latest = @ontology.explore.latest_submission rescue @ontology.explore.latest_submission(include: "")
+
     # Fix parameters to only use known pages
     params[:p] = nil unless KNOWN_PAGES.include?(params[:p])
 
@@ -359,10 +352,6 @@ def submit_success
   end
 
   def summary
-    # Note: find_by_acronym includes ontology views
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:id]).first
-    not_found if @ontology.nil?
-    
     # Check to see if user is requesting RDF+XML. If so, return the file from the REST service.
     if request.accept.to_s.eql?("application/ld+json") || request.accept.to_s.eql?("application/json")
       headers['Content-Type'] = request.accept.to_s
@@ -381,9 +370,6 @@ def summary
     @submissions = @ontology.explore.submissions.sort {|a,b| b.submissionId.to_i <=> a.submissionId.to_i } || []
     LOG.add :error, "No submissions for ontology: #{@ontology.id}" if @submissions.empty?
     
-    # Get the latest submission (not necessarily the latest 'ready' submission)
-    @submission_latest = @ontology.explore.latest_submission rescue @ontology.explore.latest_submission(include: "")
-    
     if request.xhr?
       render :partial => 'metadata', :layout => false
     else
@@ -425,8 +411,6 @@ def visualize
   end
 
   def widgets
-    # Note: find_by_acronym includes ontology views
-    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:id]).first
     if request.xhr?
       render :partial => 'widgets', :layout => false
     else

From eca966e71b5145fa5bc82321484b9ac023eb6416 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 5 Jun 2018 11:20:17 -0700
Subject: [PATCH 35/95] Display proper content pane on page load / reload

---
 app/assets/javascripts/bp_ontology_viewer.js.erb | 1 +
 app/views/layouts/_ontology_viewer.html.haml     | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index e36a58eb04..62e14632ec 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -230,6 +230,7 @@ jQuery(document).ready(function() {
   if (typeof jQuery.bioportal.ont_pages[content_section].init === 'function') {
     jQuery.bioportal.ont_pages[content_section].init(jQuery.bioportal.ont_pages[content_section]);
   }
+  jQuery("#ont-" + content_section + "-tab").tab("show");
 
   // Retrieve AJAX content if not already displayed
   if ($.QueryString["skip_ajax_tabs"] != 'true') {
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 7f8a1c7e24..6b38c04e02 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -87,8 +87,8 @@
         %ul.nav.nav-pills.card-header-pills{id: "navbar-ontology", role: "tablist"}
           %li.nav-item 
             = link_to("Summary", ontology_path(@ontology.acronym, p: "summary"), |
-                id: "ont-summary-tab", class: "nav-link active", role: "tab", data: {bp_ont_page: "summary", toggle: "tab", target: "#ont_summary_content"}, |
-                aria: {controls: "ont_summary_content", selected: "true"}) |
+                id: "ont-summary-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "summary", toggle: "tab", target: "#ont_summary_content"}, |
+                aria: {controls: "ont_summary_content", selected: "false"}) |
           %li.nav-item 
             = link_to("Classes", ontology_path(@ontology.acronym, p: "classes"), |
                 id: "ont-classes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "classes", toggle: "tab", target: "#ont_classes_content"}, |

From 88027c4704e93661601fdb00e3cf39a910864153 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 5 Jun 2018 11:53:41 -0700
Subject: [PATCH 36/95] Fix regression in backward navigation through content
 tabs

---
 app/assets/javascripts/bp_ontology_viewer.js.erb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index 62e14632ec..31f0258426 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -194,6 +194,7 @@ function getConceptLinkEl(concept_id) {
 
 function showOntologyContent(content_section) {
   jQuery.bioportal.ont_pages[content_section].publish();
+  jQuery("#ont-" + content_section + "-tab").tab("show");
 }
 
 // Prevent the default behavior of clicking the ontology page links

From b3467547b28feb9857d91b067093f255080aae6c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 5 Jun 2018 12:21:00 -0700
Subject: [PATCH 37/95] Restore link to Admin page in top navigation bar

---
 app/views/layouts/_topnav.html.haml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/views/layouts/_topnav.html.haml b/app/views/layouts/_topnav.html.haml
index 452cf6dc3f..55581457ab 100644
--- a/app/views/layouts/_topnav.html.haml
+++ b/app/views/layouts/_topnav.html.haml
@@ -18,6 +18,9 @@
       - unless Rails.env.appliance?
         %li.nav-item
           = link_to("Resource Index", resource_index_index_path(), class: "nav-link")
+      -if (!session[:user].nil? && session[:user].admin?)
+        %li.nav-item
+          = link_to("Admin", admin_index_path(), class: "nav-link")
     %ul.navbar-nav
       - if session[:user].nil?
         %li.nav-item

From abdf6e947e81db2cad2737356162b7a52c08e055 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 5 Jun 2018 17:13:29 -0700
Subject: [PATCH 38/95] Fix uncaught reference error

---
 app/assets/javascripts/bp_ontology_viewer.js.erb | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index 31f0258426..e0b3adeb29 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -54,8 +54,9 @@
         // We need to get everything using AJAX
         content_section = null;
       } else {
-        showOntologyContent(content_section);
-        document.title = jQuery.bioportal.ont_pages[content_section].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site;
+        var pane = jQuery(document).data().bp.ont_viewer.content_section;
+        showOntologyContent(pane);
+        document.title = jQuery.bioportal.ont_pages[pane].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site;
       }
     }
   });

From 7bb3eed7eee31dd07e417d84e357f8386fb7f706 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 6 Jun 2018 16:24:46 -0700
Subject: [PATCH 39/95] Remove minimum width from body

---
 app/assets/stylesheets/bioportal.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 37d998a5e5..ad7ee476a6 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -70,7 +70,6 @@ body {
   font:13px/1.231 arial,helvetica,clean,sans-serif;
   font-size:small;
   font:x-small;
-  min-width: 1200px;
 }
 table {
   font-size:inherit;

From 280b9b1de3da6b09ad540bbdf6c2aca0fd56ef17 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 14:25:56 -0700
Subject: [PATCH 40/95] Refactor ontology summary UI to use CSS Grid Layout

---
 Gemfile                                       |   2 +-
 app/assets/javascripts/bp_ont_chart.js        |  14 +-
 .../javascripts/bp_ontology_viewer.js.erb     |  27 ++-
 app/assets/stylesheets/application.css.scss   |   1 +
 app/assets/stylesheets/ontologies.scss        |  80 +++++++++
 app/controllers/ontologies_controller.rb      |  13 +-
 app/helpers/ontologies_helper.rb              |   6 +-
 app/views/layouts/_ontology_viewer.html.haml  |  31 ++--
 app/views/ontologies/_details.html.haml       |  96 ----------
 app/views/ontologies/_metadata.html.haml      | 165 ++++++++++++++++--
 app/views/ontologies/_metrics.html.haml       |  54 ------
 app/views/ontologies/_projects.html.haml      |  49 ------
 app/views/ontologies/_reviews.html.haml       |  22 ---
 app/views/ontologies/_submissions.html.haml   |  47 +----
 app/views/ontologies/_views.html.haml         | 147 ----------------
 app/views/ontologies/_visits.html.haml        |  19 +-
 16 files changed, 306 insertions(+), 467 deletions(-)
 create mode 100644 app/assets/stylesheets/ontologies.scss
 delete mode 100644 app/views/ontologies/_details.html.haml
 delete mode 100644 app/views/ontologies/_metrics.html.haml
 delete mode 100644 app/views/ontologies/_projects.html.haml
 delete mode 100644 app/views/ontologies/_reviews.html.haml
 delete mode 100644 app/views/ontologies/_views.html.haml

diff --git a/Gemfile b/Gemfile
index 82822e8412..c6f3791862 100644
--- a/Gemfile
+++ b/Gemfile
@@ -70,5 +70,5 @@ group :development do
     # passenger reload
     gem 'capistrano-passenger', require: false
     gem 'html2haml'
-    gem 'i18n-debug'
+    # gem 'i18n-debug'
 end
diff --git a/app/assets/javascripts/bp_ont_chart.js b/app/assets/javascripts/bp_ont_chart.js
index 1dd67e34bf..1b51403c76 100644
--- a/app/assets/javascripts/bp_ont_chart.js
+++ b/app/assets/javascripts/bp_ont_chart.js
@@ -18,11 +18,13 @@ jQuery(document).data().bp.ontChart.init = function() {
   };
 
   var visits_chart = document.getElementById("visits_chart");
-  var ctx = visits_chart.getContext("2d");
+  if (visits_chart) {
+    var ctx = visits_chart.getContext("2d");
 
-  var myLineChart = new Chart(ctx, {
-    type: 'line',
-    data: data,
-    options: { responsive: true }
-  });
+    var myLineChart = new Chart(ctx, {
+      type: 'line',
+      data: data,
+      options: { responsive: true }
+    });
+  }
 };
\ No newline at end of file
diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index e0b3adeb29..17b362fab2 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -206,15 +206,17 @@ var nav_ont = function(link) {
 }
 
 jQuery(document).ready(function() {
+  var metadata_only = jQuery(document).data().bp.ont_viewer.metadata_only;
   if (!pageUsesTreeView()) {
-    return;
+    if (metadata_only === undefined || metadata_only === 'false') {
+      return;
+    }
   }
 
   // Set appropriate title
   var content_section = jQuery(document).data().bp.ont_viewer.content_section || "";
   var ontology_name = jQuery(document).data().bp.ont_viewer.ontology_name;
   var org_site = jQuery(document).data().bp.ont_viewer.org_site;
-  var metadata_only = jQuery(document).data().bp.ont_viewer.metadata_only;
   var content_section_obj = jQuery.bioportal.ont_pages[content_section] || {};
   var title = (content_section == null) ? ontology_name + " | " + org_site
     : content_section_obj.page_name + " | " + org_site;
@@ -226,6 +228,27 @@ jQuery(document).ready(function() {
     nav_ont(this);
   });
 
+  jQuery(".click_versions_collapse").click(function(){
+    var collapse = "#" + jQuery(this).parent().attr("id") + "_collapsible";
+    var icon = "#" + jQuery(this).parent().attr("id") + "_icon";
+    jQuery(icon).toggleClass("ui-icon-triangle-1-e");
+    jQuery(icon).toggleClass("ui-icon-triangle-1-s");
+    jQuery(collapse).toggle();
+  });
+
+  jQuery("#version_toggle").click(function(event){
+    event.preventDefault();
+    jQuery("#ontology_versions tr.hidden_select").toggleClass("hidden_ont");
+  });
+
+  jQuery("#version_toggle").toggle(
+    function() {
+      jQuery(this).text("less...");
+    },
+    function() {
+      jQuery(this).text("more...");
+  });
+
   // Set up the JS version of the active content section
   jQuery.bioportal.ont_pages[content_section].manuelRetrieve(jQuery("#ont_" + content_section + "_content").html());
   jQuery.bioportal.ont_pages[content_section].published = true;
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index addae6e400..10221ea065 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -29,6 +29,7 @@
 @import "bioportal";
 @import "home";
 @import "mappings";
+@import "ontologies";
 @import "recommender";
 @import "resource_index";
 @import "search";
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
new file mode 100644
index 0000000000..058b5459a8
--- /dev/null
+++ b/app/assets/stylesheets/ontologies.scss
@@ -0,0 +1,80 @@
+$ont-metadata-bg-color: #e2ebf0; 
+
+@media screen and (max-width: 992px) {
+  .ont-metadata-card {
+    margin-bottom: 15px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .ont-metadata {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 15px;
+  }
+}
+
+.ont-metadata-card {
+  header {
+    background-color: $ont-metadata-bg-color;
+    padding: 15px 36px;
+  }
+
+  dt {
+    color: #737373;
+  }
+
+  dd {
+    font-size: .9em;
+    padding-left: 10px;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  thead tr th {
+    border-top: none;
+  }
+}
+
+.ont-details-card {
+  grid-column: 1 / span 2;
+}
+
+.ont-metrics-card {
+  grid-column: 3 / span 2;
+}
+
+.ont-subs-card {
+  grid-column: 1 / span 4;
+  grid-row: 2;
+}
+
+.ont-analytics-card {
+  grid-column: 1 / span 4;
+  grid-row: 4;
+}
+
+.ont-views-card {
+  grid-column: 3 / span 2;
+  grid-row: 3;
+}
+
+.ont-projects-card {
+  grid-column: 1 / span 2;
+  grid-row: 3;
+
+  ul li {
+    list-style-type: circle;
+    list-style-position: inside;
+  }
+}
+
+.ontologies.show div.card-body a.btn.btn-secondary.btn-sm i.fa.fa-lg {
+  margin-left: .5em;
+}
diff --git a/app/controllers/ontologies_controller.rb b/app/controllers/ontologies_controller.rb
index dd908613a0..f098639121 100644
--- a/app/controllers/ontologies_controller.rb
+++ b/app/controllers/ontologies_controller.rb
@@ -308,9 +308,17 @@ def show
     @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology]).first
     not_found if @ontology.nil?
 
+    # Retrieve submissions in descending submissionId order (should be reverse chronological order)
+    @submissions = @ontology.explore.submissions.sort {|a,b| b.submissionId.to_i <=> a.submissionId.to_i } || []
+    LOG.add :error, "No submissions for ontology: #{@ontology.id}" if @submissions.empty?
+
     # Get the latest submission (not necessarily the latest 'ready' submission)
     @submission_latest = @ontology.explore.latest_submission rescue @ontology.explore.latest_submission(include: "")
 
+    # Is the ontology downloadable?
+    restrict_downloads = $NOT_DOWNLOADABLE
+    @ont_restricted = restrict_downloads.include? @ontology.acronym
+
     # Fix parameters to only use known pages
     params[:p] = nil unless KNOWN_PAGES.include?(params[:p])
 
@@ -361,15 +369,10 @@ def summary
     
     # Explore the ontology links
     @metrics = @ontology.explore.metrics rescue []
-    @reviews = @ontology.explore.reviews.sort {|a,b| b.created <=> a.created} || []
     @projects = @ontology.explore.projects.sort {|a,b| a.name.downcase <=> b.name.downcase } || []
     @analytics = LinkedData::Client::HTTP.get(@ontology.links["analytics"])
     @views = @ontology.explore.views.sort {|a,b| a.acronym.downcase <=> b.acronym.downcase } || []
     
-    # Retrieve submissions in descending submissionId order (should be reverse chronological order)
-    @submissions = @ontology.explore.submissions.sort {|a,b| b.submissionId.to_i <=> a.submissionId.to_i } || []
-    LOG.add :error, "No submissions for ontology: #{@ontology.id}" if @submissions.empty?
-    
     if request.xhr?
       render :partial => 'metadata', :layout => false
     else
diff --git a/app/helpers/ontologies_helper.rb b/app/helpers/ontologies_helper.rb
index 085a950824..79cdffc2aa 100644
--- a/app/helpers/ontologies_helper.rb
+++ b/app/helpers/ontologies_helper.rb
@@ -5,10 +5,8 @@ def additional_details
     details = $ADDITIONAL_ONTOLOGY_DETAILS[@ontology.acronym]
     html = []
     details.each do |title, value|
-      html << content_tag(:tr) do
-        concat(content_tag(:th, title))
-        concat(content_tag(:td, raw(value)))
-      end
+      html << content_tag(:dt, title)
+      html << content_tag(:dd, raw(value))
     end
     html.join("")
   end
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 6b38c04e02..fe5b6c270e 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -59,21 +59,22 @@
         - if details_available
           %p.card-text
             = sanitize(sub.description)
-        - if !$PURL_ENABLED.nil? && $PURL_ENABLED && !@ontology.summaryOnly
-          = link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
-        - if details_available
-          - unless sub.homepage.nil?
-            = link_to("Ontology homepage", sub.homepage, class: "card-link", target: "_blank")
-          - unless sub.documentation.nil?
-            = link_to("Documentation", sub.documentation, class: "card-link", target: "_blank")
-          - unless sub.publication.nil?
-            = link_to("Publications", sub.publication, class: "card-link", target: "_blank")
-      - if @ontology.admin?(session[:user])
-        %div.card-body
-          = link_to("Edit ontology details", edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm")
-          = link_to("Add submission", new_ontology_submission_path(@ontology.acronym), class: "btn btn-secondary btn-sm")
+      %div.card-body
+        - unless (@ontology.summaryOnly || @ont_restricted || @submissions.empty?)
+          = link_to(@submissions.first.id + "/download?apikey=#{get_apikey}", class: "btn btn-secondary btn-sm") do
+            Download latest version
+            %i.fa.fa-lg.fa-arrow-circle-down
+        - if @ontology.admin?(session[:user])
+          = link_to(edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
+            Edit ontology details
+            %i.fa.fa-lg.fa-pencil-square
+          = link_to(new_ontology_submission_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
+            Add submission
+            %i.fa.fa-lg.fa-plus-circle
           - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
-            = link_to("Edit latest submission (#{@submission_latest.version})", edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), class: "btn btn-secondary btn-sm")
+            = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), class: "btn btn-secondary btn-sm") do
+              = "Edit latest submission (#{@submission_latest.version})"
+              %i.fa.fa-lg.fa-pencil-square
       - if (details_available && !sub.released.nil?)
         %div.card-footer.text-muted
           Last uploaded:
@@ -112,7 +113,7 @@
       %div.card-body
         -# Tab panes for displaying ontology content sections
         %div.tab-content{id: "ontology_content"}
-          %div.tab-pane.active{id: "ont_summary_content", role: "tabpanel", aria: {labelledby: "ont-summary-tab"}}
+          %div.tab-pane{id: "ont_summary_content", role: "tabpanel", aria: {labelledby: "ont-summary-tab"}}
             - if content_section.eql?("summary")
               = yield
           %div.tab-pane{id: "ont_classes_content", role: "tabpanel", aria: {labelledby: "ont-classes-tab"}}
diff --git a/app/views/ontologies/_details.html.haml b/app/views/ontologies/_details.html.haml
deleted file mode 100644
index e880e5640b..0000000000
--- a/app/views/ontologies/_details.html.haml
+++ /dev/null
@@ -1,96 +0,0 @@
-- require 'cgi'
-- require 'rails_autolink'
-%h2{:style => "font-size: x-large;"}
-  Details
-#metadata_content
-  %div{:style => "overflow: hidden; min-width: 550px"}
-    %table.form{:width => "100%"}
-      %tr
-        %th Acronym
-        %td.top= @ontology.acronym
-      %tr
-        %th Visibility
-        %td= strip_links(visibility_link(@ontology))
-
-      - if !$PURL_ENABLED.nil? && $PURL_ENABLED && !@ontology.summaryOnly
-        %tr
-          %th
-            = "#{$SITE} PURL".strip
-          %td
-            = auto_link(@ontology.purl, :all, :target => "_blank")
-
-      - if @ontology.viewing_restricted?
-        %tr
-          %th
-            Viewing Restriction
-          %td
-            = @ontology.viewingRestriction.capitalize
-
-      - if @ontology.respond_to?('viewOf')
-        - unless @ontology.viewOf.nil?
-          %tr
-            %th
-              View of Ontology
-            %td
-              - ont_parent_acronym = @ontology.viewOf.split('/').last
-              - if !$PURL_ENABLED.nil? && $PURL_ENABLED
-                - ont_url = @ontology.purl.sub(@ontology.acronym, ont_parent_acronym)
-              - else
-                - ont_url = @ontology.links['ui'].sub(@ontology.acronym, ont_parent_acronym)
-              = auto_link(ont_url, :all, :target => "_blank")
-
-      -# Get the latest submission (not necessarily the latest ready submission).
-      - sub = @submission_latest
-      - unless sub.nil? || (sub.respond_to?(:status) && sub.status == 404)
-        %tr
-          %th
-            Description
-          %td
-            = sanitize(sub.description)
-        %tr
-          %th
-            Status
-          %td
-            = sub.status.capitalize unless sub.status.nil?
-        %tr
-          %th
-            Format
-          %td
-            = sub.hasOntologyLanguage
-        %tr
-          %th
-            Contact
-          %td
-            = raw sub.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
-        %tr
-          %th
-            Home Page
-          %td
-            %a{:href => sub.homepage, :target => "_blank"}= sub.homepage
-        %tr
-          %th
-            Publications Page
-          %td
-            %a{:href => sub.publication, :target => "_blank"}= sub.publication
-        %tr
-          %th
-            Documentation Page
-          %td
-            %a{:href => sub.documentation, :target => "_blank"}= sub.documentation
-
-      %tr
-        %th
-          Categories
-        %td
-          - categories_hash = LinkedData::Client::Models::Category.all_to_hash
-          - categories = @ontology.hasDomain
-          = categories.map {|c| categories_hash[c].name}.sort.join(", ")
-      %tr
-        %th
-          Groups
-        %td
-          - groups_hash = LinkedData::Client::Models::Group.all_to_hash
-          - groups = @ontology.group
-          = groups.map {|g| groups_hash[g].name}.sort.join(", ")
-
-      = raw additional_details
diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index a6b890473b..adae49e4f1 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -1,12 +1,153 @@
-%div{:style => "padding: 1em;"}
-  %div{:style => "float: right; width: 40%"}
-    %div{style: "padding-left: 1em;"}
-      = render :partial => 'metrics'
-      = render :partial => 'visits'
-  %div{style: "width: 60%;"}
-    = render :partial => 'details'
-    = render :partial => 'submissions'
-    = render :partial => 'views'
-    %div{:style => "clear: both;"}
-    = render :partial => 'projects'
-    %div{:style => "clear: both;"}
+%div.ont-metadata
+
+  -# Details pane
+  %section.border.rounded.ont-metadata-card.ont-details-card
+    %header.font-weight-bold Details
+    %div{style: "padding: 24px 36px;"}
+      %dl
+        %dt Acronym
+        %dd= @ontology.acronym
+
+        %dt Visibility
+        %dd= strip_links(visibility_link(@ontology))
+       
+        %dt Links
+        - if $PURL_ENABLED && !@ontology.summaryOnly
+          %dd
+            %ul
+              %li= link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
+              - unless @submission_latest.nil?
+                %li= link_to("Homepage", @submission_latest.homepage, target: "_blank") unless @submission_latest.homepage.nil?
+                %li= link_to("Documentation", @submission_latest.documentation, target: "_blank") unless @submission_latest.documentation.nil?
+                %li= link_to("Publications", @submission_latest.publication, target: "_blank") unless @submission_latest.publication.nil?
+
+        - if @ontology.viewing_restricted?
+          %dt Viewing restriction
+          %dd= @ontology.viewingRestriction.capitalize
+
+        - unless @ontology.viewOf.nil?
+          %dt View of ontology
+          %dd
+            - ont_parent_acronym = @ontology.viewOf.split('/').last
+            - if $PURL_ENABLED
+              - ont_url = @ontology.purl.sub(@ontology.acronym, ont_parent_acronym)
+            - else
+              - ont_url = @ontology.links['ui'].sub(@ontology.acronym, ont_parent_acronym)
+            = link_to(ont_parent_acronym, ont_url)
+
+        - unless @submission_latest.nil?
+          %dt Status
+          %dd= @submission_latest.status.capitalize unless @submission_latest.status.nil?
+          %dt Format
+          %dd= @submission_latest.hasOntologyLanguage
+          %dt Contact
+          %dd= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
+          - categories_hash = LinkedData::Client::Models::Category.all_to_hash
+          - categories = @ontology.hasDomain
+          - unless categories.empty?
+            %dt Categories
+            %dd= categories.map {|c| categories_hash[c].name}.sort.join(", ")
+          - groups_hash = LinkedData::Client::Models::Group.all_to_hash
+          - groups = @ontology.group
+          - unless groups.empty?
+            %dt Groups
+            %dd= groups.map {|g| groups_hash[g].name}.sort.join(", ")
+          = raw additional_details
+
+  -# Metrics pane
+  %section.border.rounded.ont-metadata-card.ont-metrics-card
+    %header.font-weight-bold 
+      Metrics
+      = link_to("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", target: "_blank", aria: {label: "View individual metrics definitions"}, title: "View individual metrics definitions") do
+        %i.fa.fa-lg.fa-question-circle{aria: {hidden: "true"}, style: "margin-left: .25em"}
+    %div{style: "padding: 24px 36px;"}
+      - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
+        %p.font-italic= "We have not yet calculated metrics for #{@ontology.acronym}"
+      - else
+        %table.table.table-sm.table-hover
+          %tr
+            %td{style: "border-top: none;"} Classes
+            %td{style: "border-top: none;"}= @metrics.classes
+          %tr
+            %td Individuals
+            %td= @metrics.individuals
+          %tr
+            %td Properties
+            %td= @metrics.properties
+          %tr
+            %td Maximum depth
+            %td= @metrics.maxDepth
+          %tr
+            %td Maximum number of children
+            %td= @metrics.maxChildCount
+          %tr
+            %td Average number of children
+            %td= @metrics.averageChildCount
+          %tr
+            %td Classes with a single child
+            %td= @metrics.classesWithOneChild
+          %tr
+            %td Classes with more than 25 children
+            %td= @metrics.classesWithMoreThan25Children
+          %tr
+            %td Classes with no definition
+            %td= @metrics.classesWithNoDefinition
+
+  -# Submissions pane
+  - unless @submissions.empty?
+    %section.border.rounded.ont-metadata-card.ont-subs-card
+      %header.font-weight-bold Submissions
+      = render partial: "submissions"
+
+  -# Analytics pane
+  %section.border.rounded.ont-metadata-card.ont-analytics-card
+    %header.font-weight-bold
+      Analytics
+      - if visits_data
+        = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", aria: {label: "Download as CSV"}, title: "Download as CSV") do
+          %i.fa.fa-lg.fa-download{aria: {hidden: "true"}, style: "margin-left: .5em"}
+    %div{style: "padding: 15px 15px;"}
+      = render partial: "visits"
+
+  -# Views pane (don't show if the ontology is a view - we don't allow views of views).
+  - unless @ontology.view?
+    %section.border.rounded.ont-metadata-card.ont-views-card
+      %header.font-weight-bold= "Views of #{@ontology.acronym}"
+      %div{style: "padding: 24px 36px;"}
+        - if @views.empty?
+          %p.font-italic= "No views of #{@ontology.acronym} available"
+        - else
+          %dl
+            - for view in @views
+              - next unless view.access?(session[:user])
+              %dt= link_to(view.name, ontology_path(view.acronym))
+              -# TODO: Can we put this code in the controller?
+              - view_submissions = view.explore.submissions.sort {|a,b| b.released <=> a.released } || [] rescue []
+              - view_sub_latest = view.explore.latest_submission({:include_status => 'ready'}) rescue view.explore.latest_submission({:include_status => 'ready', include: ""})
+              - view_sub_latest ||= view_submissions.first
+              - begin
+                - view_description = view_sub_latest.description
+              - rescue
+                - view_description = nil
+              - unless view_description.nil?
+                %dd
+                  %div= view_description
+        
+        - ont_id_esc = CGI.escape(@ontology.id)
+        -# TODO: I don't think we should have brackets in the URL parameters.
+        - if session[:user].nil?
+          %a{href: "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", role: "button", class: "btn btn-outline-secondary mt-4"} Create new view
+        - else
+          %a{href: "/ontologies/new?ontology[viewOf]=#{ont_id_esc}", role: "button", class: "btn btn-outline-secondary mt-4"} Create new view      
+
+  -# Projects pane
+  %section.border.rounded.ont-metadata-card.ont-projects-card
+    %header.font-weight-bold= "Projects using #{@ontology.acronym}"
+    %div{style: "padding: 24px 36px;"}
+      - if @projects.empty?
+        %p.font-italic= "No projects using #{@ontology.acronym}"
+      - else
+        %ul
+          - for project in @projects
+            %li= link_to(project.name, project_path(project.acronym))
+      = link_to("Create new project", new_project_path(), role: "button", class: "btn btn-outline-secondary mt-4")
diff --git a/app/views/ontologies/_metrics.html.haml b/app/views/ontologies/_metrics.html.haml
deleted file mode 100644
index 84d5344f51..0000000000
--- a/app/views/ontologies/_metrics.html.haml
+++ /dev/null
@@ -1,54 +0,0 @@
-- return "" if  @ontology.summaryOnly || (@submission.respond_to?(:status) && @submission.status == 404)
-#metrics_content{:style => "margin-left: 1em;"}
-  %div{:style => "clear:both;"}
-  %div{:style => "width: 400px;"}
-    %h2
-      %span{:style => "font-size: x-large;"} Metrics
-      = help_icon("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", { :title => "View individual metrics definitions", :style => "margin-top: -7px;" }).html_safe
-  /
-    <p style="border: 1px solid rgb(239, 239, 239); margin: 10px; padding: 10px;">
-    <haml:loud>t('ontologies.metrics.intro').html_safe</haml:loud>
-    </p>
-  - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
-    %h2{:style => "padding-left: 1em;"} We have not yet calculated metrics for this ontology.
-  - else
-    - if @old_metrics
-      %h3
-        Metrics are not available for the most recent version of this ontology. The metrics displayed below are for the
-        %a{:href => "/visualize/#{@old_metrics.id}"}= @old_ontology.displayLabel + " " + @old_ontology.versionNumber.to_s
-        version.
-    :css
-      .metrics_table td {
-        text-align: right;
-      }
-    %table.form.metrics_table{:style => "width: 400px;"}
-      %tr
-        %th Number of classes:
-        %td.top= @metrics.classes
-      %tr
-        %th Number of individuals:
-        %td= @metrics.individuals
-      %tr
-        %th Number of properties:
-        %td= @metrics.properties
-      %tr
-        %th Maximum depth:
-        %td= @metrics.maxDepth
-      %tr
-        %th Maximum number of children:
-        %td= @metrics.maxChildCount
-      %tr
-        %th Average number of children:
-        %td= @metrics.averageChildCount
-      %tr
-        %th{:style => "vertical-align: top;"} Classes with a single child:
-        %td
-          = @metrics.classesWithOneChild
-      %tr
-        %th{:style => "vertical-align: top;"} Classes with more than 25 children:
-        %td
-          = @metrics.classesWithMoreThan25Children
-      %tr
-        %th{:style => "vertical-align: top;"} Classes with no definition:
-        %td
-          = @metrics.classesWithNoDefinition
diff --git a/app/views/ontologies/_projects.html.haml b/app/views/ontologies/_projects.html.haml
deleted file mode 100644
index ed5e86d82d..0000000000
--- a/app/views/ontologies/_projects.html.haml
+++ /dev/null
@@ -1,49 +0,0 @@
-- begin
-  - if @projects.nil?
-    - @projects = @ontology.explore.projects.sort {|a,b| a.name.downcase <=> b.name.downcase }
-- rescue
-  - @projects = []
-
-:javascript
-  jQuery(document).ready(function(){
-    jQuery(".untruncate").click(function(event){
-      event.preventDefault();
-      var text = jQuery(this).parent().parent().children(".untruncated_text").html();
-      jQuery(this).parent().parent().children(".original_text").html(text);
-    });
-  });
-
-#projects_content
-  %h2{:style => "margin: 2em 0 0"}
-    %span{:style => "font-size: x-large; margin-right: 1.5em;"} Projects Using This Ontology
-    - if session[:user].nil?
-      %a{:href => "/login?redirect=#{URI.escape("/projects/new", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", style: "font-size: large;"} Create new project
-    - else
-      %a{:href => "/projects/new", style: "font-size: large;"} Create new project
-  - if @projects.length == 0
-    No projects available.
-  - else
-    %table.zebra{:cellpadding => "0", :cellspacing => "0", :style => "border:0px;float:left;"}
-      %thead
-        %th Project
-        %th Description
-        %th People
-        %th Institution
-      %tbody
-        - for project in @projects
-          %tr
-            %td
-              = link_to project.name, project.homePage
-              %br{:style => "margin-bottom: 5px;"}
-              - if false #TODO_REV: Enable project editing isOwner?(project.creator)
-                %span{:style => "font-size: x-small;"}
-                  (#{link_to "edit", edit_project_path(project)} |
-                  \#{link_to 'delete', project, :confirm => 'Are you sure?', :method => :delete})
-            %td{:style => "width: 200px;"}
-              .original_text= raw(truncate(project.description, length: 100, separator: " ", omission: "<a class='untruncate' href=''>...</a>", escape: false))
-              .untruncated_text{:style => "display: none;"}= raw project.description
-            %td
-              .original_text= raw(truncate(project.contacts, length: 100, separator: " ", omission: "<a class='untruncate' href=''>...</a>", escape: false))
-              .untruncated_text{:style => "display: none;"}= raw project.contacts
-            %td
-              = raw project.institution
diff --git a/app/views/ontologies/_reviews.html.haml b/app/views/ontologies/_reviews.html.haml
deleted file mode 100644
index ef3315970f..0000000000
--- a/app/views/ontologies/_reviews.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-- require 'date'
-#reviews_content{:style => "margin-top: 2em;"}
-  %h2{:style => "margin-bottom: .5em;"}
-    %span{:style => "font-size: x-large; margin-right: 1.5em;"} Reviews
-    - if session[:user].nil?
-      %a{:href => "/login?redirect=/ontologies/#{@ontology.acronym}", style: "font-size: large"} Add your review
-    - else
-      %a.create_review{:href => "/reviews/new?ontology=#{CGI.escape(@ontology.id)}", :title => "Review for #{@ontology.name}", style: "font-size: large"} Add your review
-  #reviews_container
-    - if @reviews.nil? || @reviews.empty?
-      %h1{:style => "padding-bottom: .8em;"} No reviews available.
-    - else
-      - @reviews.each_with_index do |review, review_count|
-        - @review = review
-        = render partial: "reviews/review"
-:javascript
-  // Do this after the HTML above loads
-  jQuery(document).ready(function() {
-    jQuery('input.star').rating();
-    setupReviewFacebox();
-    setupReviewFaceboxSizing();
-  });
diff --git a/app/views/ontologies/_submissions.html.haml b/app/views/ontologies/_submissions.html.haml
index 853909df45..59bae23667 100644
--- a/app/views/ontologies/_submissions.html.haml
+++ b/app/views/ontologies/_submissions.html.haml
@@ -1,47 +1,16 @@
 - return "" if @ontology.metadata_only?
-- begin
-  - if @submissions.nil?
-    - submissions = @ontology.explore.submissions
-    - @submissions = submissions.sort {|a,b| b.submissionId <=> a.submissionId }
-- rescue
-  - @submissions = []
-:javascript
-  jQuery(document).ready(function(){
-    jQuery(".click_versions_collapse").click(function(){
-      var collapse = "#" + jQuery(this).parent().attr("id") + "_collapsible";
-      var icon = "#" + jQuery(this).parent().attr("id") + "_icon";
-      jQuery(icon).toggleClass("ui-icon-triangle-1-e");
-      jQuery(icon).toggleClass("ui-icon-triangle-1-s");
-      jQuery(collapse).toggle();
-    });
 
-    jQuery("#version_toggle").click(function(event){
-      event.preventDefault();
-      jQuery("#ontology_versions tr.hidden_select").toggleClass("hidden_ont");
-    });
-
-    jQuery("#version_toggle").toggle(
-      function() {
-        jQuery(this).text("less...");
-      },
-      function() {
-        jQuery(this).text("more...");
-    });
-
-  });
-- restrict_downloads = $NOT_DOWNLOADABLE
-- ont_restricted = restrict_downloads.include? @ontology.acronym
 - more_colspan = 4
-- more_colspan = 3 if ont_restricted
-#versions_content.click_versions_collapse{:style => "padding-top: 1em;"}
-  %h2{:style => "font-size: x-large;"} Submissions
-  %table#ontology_versions.zebra{:cellpadding => "0", :cellspacing => "0", width: "100%"}
+- more_colspan = 3 if @ont_restricted
+
+#versions_content.click_versions_collapse{style: "padding: 24px 36px;"}
+  %table#ontology_versions.table.table-striped
     %thead
       %tr
-        %th Submission
+        %th Version
         %th Release Date
         %th Upload Date
-        - unless ont_restricted
+        - unless @ont_restricted
           %th Downloads
     - begin
       - submission_ready = @ontology.explore.latest_submission({:include_status => 'ready'})
@@ -57,10 +26,10 @@
         = xmldatetime_to_date(sub.released) unless sub.released.nil?
       %td
         = xmldatetime_to_date(sub.creationDate)
-      - unless ont_restricted
+      - unless @ont_restricted
         %td
           = raw download_link(sub)
     - if @submissions.length >= 5
       %tr
-        %td{:colspan => more_colspan, :style => "text-align: right;"}
+        %td{colspan: more_colspan, style: "text-align: right; background-color: white;"}
           %a#version_toggle{:href => ""} more...
diff --git a/app/views/ontologies/_views.html.haml b/app/views/ontologies/_views.html.haml
deleted file mode 100644
index 14494ba7a1..0000000000
--- a/app/views/ontologies/_views.html.haml
+++ /dev/null
@@ -1,147 +0,0 @@
-- begin
-  - if @views.nil?
-    - @views = @ontology.explore.views.sort {|a,b| a.acronym.downcase <=> b.acronym.downcase }
-- rescue
-  - @views = []
-
-:javascript
-  jQuery(document).ready(function(){
-    jQuery(".click_view_collapse").click(function(){
-      var collapse = "#" + jQuery(this).parent().attr("id") + "_collapsible";
-      var icon = "#" + jQuery(this).parent().attr("id") + "_icon";
-      jQuery(icon).toggleClass("ui-icon-triangle-1-e");
-      jQuery(icon).toggleClass("ui-icon-triangle-1-s");
-      jQuery(collapse).toggle();
-    });
-
-    jQuery("#expand_views").click(function(){
-      jQuery(".view_collapsible").show();
-      jQuery(".click_view_collapse_icon").removeClass("ui-icon-triangle-1-e");
-      jQuery(".click_view_collapse_icon").addClass("ui-icon-triangle-1-s");
-    });
-
-    jQuery("#collapse_views").click(function(){
-      jQuery(".view_collapsible").hide();
-      jQuery(".click_view_collapse_icon").removeClass("ui-icon-triangle-1-s");
-      jQuery(".click_view_collapse_icon").addClass("ui-icon-triangle-1-e");
-    });
-  });
-
-
-%div{:style => "clear: both;"}
-#views_content
-  %h2{:style => "margin: 2em 0 0"}
-    %span{:style => "font-size: x-large; margin-right: 1.5em;"} Views
-    - ont_id_esc = CGI.escape(@ontology.id)
-    - if session[:user].nil?
-      %a{:href => "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", style: "font-size: large;"} Create new view
-    - else
-      %a{:href => "/ontologies/new?ontology[viewOf]=#{ont_id_esc}", style: "font-size: large;"} Create new view
-
-  %div{:style => "float:left;"}
-    - if @views.empty? || @views.length < 1
-      %h1 No views available.
-    - else
-      :css
-        #view_head .lead {
-            color: #708090;
-            font-weight: bold;
-        }
-        .view_collapsible {
-            margin: 0 1em;
-        }
-        .click_view_collapse:hover {
-            text-decoration: underline;
-        }
-
-      %h6{:style => "margin-top: .5em;"}
-        %a#expand_views{:href => "javascript:void(0);"} Expand All
-        |
-        %a#collapse_views{:href => "javascript:void(0);"} Collapse All
-
-      - @views.each_with_index do |view, index|
-        - next unless view.access?(session[:user])
-        - viewN = "view_#{index}"
-        - viewName = view.name
-        - viewAdmin = view.admin?(session[:user])
-        - view_submissions = view.explore.submissions.sort {|a,b| b.released <=> a.released } || [] rescue []
-        - view_sub_latest = view.explore.latest_submission({:include_status => 'ready'}) rescue view.explore.latest_submission({:include_status => 'ready', include: ""})
-        - view_sub_latest ||= view_submissions.first # fallback, if any
-        - begin
-          - view_description = view_sub_latest.description
-        - rescue
-          - view_description = nil
-        - begin
-          - view_definition = view_sub_latest.definition
-        - rescue
-          - view_definition = nil
-        - begin
-          - view_contacts = view_sub_latest.contact.map {|c| "#{c.name}, #{c.email}" }.join('; ')
-        - rescue
-          - view_contacts = nil
-
-        .view_title{:id => viewN, :style => "margin: 1em 0 .5em; cursor: pointer;"}
-          %span.ui-icon.ui-icon-triangle-1-e.click_view_collapse.click_view_collapse_icon{:id => "#{viewN}_icon", :style => "float: left;"}
-          %span.click_view_collapse{:style => "font-size: 120%; font-weight: bold;"}
-            = viewName
-        .view_collapsible{:id => "#{viewN}_collapsible", :style => "margin: 0 1em .5em; display: none;"}
-          / Display basic view metadata
-          #view_head.enable-lists{:style => "margin: 0 0 .5em;"}
-            %ul
-              - if viewAdmin
-                - viewSubmitURL = "/ontologies/#{view.acronym}/submissions/new" # submit new view
-                %li
-                  %span.lead Administrator:
-                  %a{:href => viewSubmitURL} create new view submission
-              - unless view_description.nil?
-                %li
-                  %span.lead Description:
-                  = view_description
-              - unless view_definition.nil?
-                %li
-                  %span.lead Definition:
-                  = view_definition
-              -# unless view_language.nil?
-                %li
-                  %span.lead Definition Language:
-                  = view_language
-              - unless view_contacts.nil?
-                %li
-                  %span.lead Created By:
-                  = view_contacts
-          / Display view submissions data (if any)
-          - unless view_submissions.empty?
-            / view_head
-            %table.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
-              %thead
-                %tr
-                  %th Submission
-                  %th Release Date
-                  %th Upload Date
-                  %th Downloads
-                  - if viewAdmin
-                    %th Admin Links
-
-              - view_sub_latestId = -1
-              - view_sub_latestId = view_sub_latest.submissionId unless view_sub_latest.nil?
-              - view_submissions.each_with_index do |view_sub, view_index|
-                %tr
-                  %td
-                    = raw status_link(view_sub, view_sub.submissionId==view_sub_latestId)
-                  %td
-                    = xmldatetime_to_date(view_sub.released)
-                  %td
-                    = xmldatetime_to_date(view_sub.creationDate)
-                  %td
-                    = raw download_link(view_sub, view)
-                  - if (view_index == 0) && viewAdmin
-                    %td
-                      - viewEditURL = "/ontologies/#{view.acronym}/submissions/#{view_sub.submissionId}/edit"
-                      #{link_to "Edit", viewEditURL}
-            / view submission table
-        / collapsible div
-        / title div
-      / @views.each
-    / if views ...
-  / float left
-/ views_content
diff --git a/app/views/ontologies/_visits.html.haml b/app/views/ontologies/_visits.html.haml
index d9390f253c..99477fa47e 100644
--- a/app/views/ontologies/_visits.html.haml
+++ b/app/views/ontologies/_visits.html.haml
@@ -1,20 +1,9 @@
 - months_to_show = 18
-#visits_content{:style => "margin: 2em 1em 0;"}
-  %div{:style => "clear:both;"}
-  %div{:style => "width: 100%;"}
-    %h2
-      %span{:style => "font-size: x-large;"} Visits
-      -# = help_icon("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", { :title => "View individual metrics definitions", :style => "margin-top: -7px;" })
-      &nbsp;&nbsp;
-      - if visits_data
-        %a{href: @ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", style: "font-size: large;", target: "_blank"} Download as CSV
-    - if visits_data
-      %div#visits_chart_container
-        %canvas#visits_chart{style: "width: 100% !important; max-width: 600px; height: 300 !important;"}
-    - else
-      %h2{:style => "padding-left: 1em;"}
-        We are still collecting data for this ontology
 
+- if visits_data
+  %canvas#visits_chart
+- else
+  %p.font-italic We are still collecting data for this ontology.
 
 - if visits_data
   :javascript

From 62615d0929b6349a99f9209a20c0b1f3adce6f86 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 14:55:09 -0700
Subject: [PATCH 41/95] Hide some navigation items for summary only ontologies

---
 app/views/layouts/_ontology_viewer.html.haml | 34 +++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index fe5b6c270e..329432eab2 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -90,26 +90,28 @@
             = link_to("Summary", ontology_path(@ontology.acronym, p: "summary"), |
                 id: "ont-summary-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "summary", toggle: "tab", target: "#ont_summary_content"}, |
                 aria: {controls: "ont_summary_content", selected: "false"}) |
-          %li.nav-item 
-            = link_to("Classes", ontology_path(@ontology.acronym, p: "classes"), |
-                id: "ont-classes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "classes", toggle: "tab", target: "#ont_classes_content"}, |
-                aria: {controls: "ont_classes_content", selected: "false"}) |
-          %li.nav-item 
-            = link_to("Properties", ontology_path(@ontology.acronym, p: "properties"), |
-                id: "ont-properties-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "properties", toggle: "tab", target: "#ont_properties_content"}, |
-                aria: {controls: "ont_properties_content", selected: "false"}) |
+          - unless @ontology.summaryOnly
+            %li.nav-item 
+              = link_to("Classes", ontology_path(@ontology.acronym, p: "classes"), |
+                  id: "ont-classes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "classes", toggle: "tab", target: "#ont_classes_content"}, |
+                  aria: {controls: "ont_classes_content", selected: "false"}) |
+            %li.nav-item 
+              = link_to("Properties", ontology_path(@ontology.acronym, p: "properties"), |
+                  id: "ont-properties-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "properties", toggle: "tab", target: "#ont_properties_content"}, |
+                  aria: {controls: "ont_properties_content", selected: "false"}) |
           %li.nav-item 
             = link_to("Notes", ontology_path(@ontology.acronym, p: "notes"), |
                 id: "ont-notes-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "notes", toggle: "tab", target: "#ont_notes_content"}, |
                 aria: {controls: "ont_notes_content", selected: "false"}) |
-          %li.nav-item
-            = link_to("Mappings", ontology_path(@ontology.acronym, p: "mappings"), |
-                id: "ont-mappings-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "mappings", toggle: "tab", target: "#ont_mappings_content"}, |
-                aria: {controls: "ont_mappings_content", selected: "false"}) |
-          %li.nav-item 
-            = link_to("Widgets", ontology_path(@ontology.acronym, p: "widgets"), |
-                id: "ont-widgets-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "widgets", toggle: "tab", target: "#ont_widgets_content"}, |
-                aria: {controls: "ont_widgets_content", selected: "false"}) |
+          - unless @ontology.summaryOnly
+            %li.nav-item
+              = link_to("Mappings", ontology_path(@ontology.acronym, p: "mappings"), |
+                  id: "ont-mappings-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "mappings", toggle: "tab", target: "#ont_mappings_content"}, |
+                  aria: {controls: "ont_mappings_content", selected: "false"}) |
+            %li.nav-item 
+              = link_to("Widgets", ontology_path(@ontology.acronym, p: "widgets"), |
+                  id: "ont-widgets-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "widgets", toggle: "tab", target: "#ont_widgets_content"}, |
+                  aria: {controls: "ont_widgets_content", selected: "false"}) |
       %div.card-body
         -# Tab panes for displaying ontology content sections
         %div.tab-content{id: "ontology_content"}

From 9737c1642182fc4a1d308ccbfb4fadccb41e1201 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 14:57:42 -0700
Subject: [PATCH 42/95] Don't show links section for summary only ontologies

---
 app/views/ontologies/_metadata.html.haml | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index adae49e4f1..b93e4e2858 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -11,15 +11,16 @@
         %dt Visibility
         %dd= strip_links(visibility_link(@ontology))
        
-        %dt Links
-        - if $PURL_ENABLED && !@ontology.summaryOnly
-          %dd
-            %ul
-              %li= link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
-              - unless @submission_latest.nil?
-                %li= link_to("Homepage", @submission_latest.homepage, target: "_blank") unless @submission_latest.homepage.nil?
-                %li= link_to("Documentation", @submission_latest.documentation, target: "_blank") unless @submission_latest.documentation.nil?
-                %li= link_to("Publications", @submission_latest.publication, target: "_blank") unless @submission_latest.publication.nil?
+        - unless @ontology.summaryOnly
+          %dt Links
+          - if $PURL_ENABLED
+            %dd
+              %ul
+                %li= link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
+                - unless @submission_latest.nil?
+                  %li= link_to("Homepage", @submission_latest.homepage, target: "_blank") unless @submission_latest.homepage.nil?
+                  %li= link_to("Documentation", @submission_latest.documentation, target: "_blank") unless @submission_latest.documentation.nil?
+                  %li= link_to("Publications", @submission_latest.publication, target: "_blank") unless @submission_latest.publication.nil?
 
         - if @ontology.viewing_restricted?
           %dt Viewing restriction

From 3a6c5443d5c2221ca607460543a18b20371ab1ed Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 15:02:22 -0700
Subject: [PATCH 43/95] Fix regression in display of groups and categories

---
 app/views/ontologies/_metadata.html.haml | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index b93e4e2858..5dbe18eab5 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -43,17 +43,18 @@
           %dd= @submission_latest.hasOntologyLanguage
           %dt Contact
           %dd= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
-          - categories_hash = LinkedData::Client::Models::Category.all_to_hash
-          - categories = @ontology.hasDomain
-          - unless categories.empty?
-            %dt Categories
-            %dd= categories.map {|c| categories_hash[c].name}.sort.join(", ")
-          - groups_hash = LinkedData::Client::Models::Group.all_to_hash
-          - groups = @ontology.group
-          - unless groups.empty?
-            %dt Groups
-            %dd= groups.map {|g| groups_hash[g].name}.sort.join(", ")
-          = raw additional_details
+        
+        - categories_hash = LinkedData::Client::Models::Category.all_to_hash
+        - categories = @ontology.hasDomain
+        - unless categories.empty?
+          %dt Categories
+          %dd= categories.map {|c| categories_hash[c].name}.sort.join(", ")
+        - groups_hash = LinkedData::Client::Models::Group.all_to_hash
+        - groups = @ontology.group
+        - unless groups.empty?
+          %dt Groups
+          %dd= groups.map {|g| groups_hash[g].name}.sort.join(", ")
+        = raw additional_details
 
   -# Metrics pane
   %section.border.rounded.ont-metadata-card.ont-metrics-card

From fa457130b067c36f203337654142c368500efeac Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 15:38:47 -0700
Subject: [PATCH 44/95] Fix 500 errors from retrieval of nonexistent data

---
 app/assets/javascripts/bp_ontology_viewer.js.erb | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index 17b362fab2..34fd57e5e3 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -259,11 +259,13 @@ jQuery(document).ready(function() {
 
   // Retrieve AJAX content if not already displayed
   if ($.QueryString["skip_ajax_tabs"] != 'true') {
-    if (content_section !== "classes" && metadata_only != true) {
+    var metadataOnly = metadata_only.toLowerCase().trim();
+
+    if (content_section !== "classes" && metadataOnly !== "true") {
       jQuery.bioportal.ont_pages["classes"].retrieve();
     }
 
-    if (content_section !== "properties" && metadata_only !== true) {
+    if (content_section !== "properties" && metadataOnly !== "true") {
       jQuery.bioportal.ont_pages["properties"].retrieve();
     }
 
@@ -279,7 +281,7 @@ jQuery(document).ready(function() {
       jQuery.bioportal.ont_pages["notes"].retrieve();
     }
 
-    if (content_section !== "widgets" && metadata_only !== true) {
+    if (content_section !== "widgets" && metadataOnly !== "true") {
       jQuery.bioportal.ont_pages["widgets"].retrieve();
     }
   }

From 2220a547edd80632c6e26bdc19d0fce55ae11e8c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 15:41:05 -0700
Subject: [PATCH 45/95] Don't retrieve mappings for summary only ontologies

---
 app/assets/javascripts/bp_ontology_viewer.js.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index 34fd57e5e3..153a246589 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -273,7 +273,7 @@ jQuery(document).ready(function() {
       jQuery.bioportal.ont_pages["summary"].retrieve();
     }
 
-    if (content_section !== "mappings") {
+    if (content_section !== "mappings" && metadataOnly !== "true") {
       jQuery.bioportal.ont_pages["mappings"].retrieve();
     }
 

From 036084b47849ab9de1827d63a41b46008650562e Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 21 Jun 2018 16:12:44 -0700
Subject: [PATCH 46/95] Change date format for last uploaded date

---
 app/views/layouts/_ontology_viewer.html.haml | 2 +-
 config/locales/en.rb                         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 329432eab2..566baf5f0d 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -78,7 +78,7 @@
       - if (details_available && !sub.released.nil?)
         %div.card-footer.text-muted
           Last uploaded:
-          = xmldatetime_to_date(sub.creationDate)
+          = l(Date.parse(sub.creationDate), format: :monthfull_day_year)
 
 %div.row.pb-2
   %div.col
diff --git a/config/locales/en.rb b/config/locales/en.rb
index 9dbc45d394..9fe86060de 100644
--- a/config/locales/en.rb
+++ b/config/locales/en.rb
@@ -5,7 +5,8 @@
     date: {
       formats: {
         year_month_day_concise: '%Y-%m-%d', # 2017-03-01
-        month_day_year: '%b %-d, %Y' # Mar 1, 2017
+        month_day_year: '%b %-d, %Y', # Mar 1, 2017
+        monthfull_day_year: '%B %-d, %Y' # March 1, 2017
       } 
     },
 

From c1a20b25f1ed93d4d8ec55e30abb9b71956ed50c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 22 Jun 2018 11:45:20 -0700
Subject: [PATCH 47/95] Move CSS out of view file

---
 app/assets/stylesheets/ontologies.scss    | 13 +++++++++++++
 app/views/ontologies/properties.html.haml | 10 ----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 058b5459a8..9b5d8cc0b2 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -1,5 +1,7 @@
 $ont-metadata-bg-color: #e2ebf0; 
 
+/* Summary pane */
+
 @media screen and (max-width: 992px) {
   .ont-metadata-card {
     margin-bottom: 15px;
@@ -78,3 +80,14 @@ $ont-metadata-bg-color: #e2ebf0;
 .ontologies.show div.card-body a.btn.btn-secondary.btn-sm i.fa.fa-lg {
   margin-left: .5em;
 }
+
+/* Properties pane */
+
+#propTree a {
+  font-family: "Myriad Pro","Myriad Web Pro","Myriad Web","Myriad","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
+  font: small/1.231 arial,helvetica,clean,sans-serif;
+}
+
+#ont_properties .container {
+  background: none !important;
+}
diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index ff2430b549..cb36db26c5 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -1,13 +1,3 @@
-:css
-  #propTree a {
-    font-family: "Myriad Pro","Myriad Web Pro","Myriad Web","Myriad","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
-    font: small/1.231 arial,helvetica,clean,sans-serif;
-  }
-
-  #ont_properties .container {
-    background: none !important;
-  }
-
 #ont_properties.bd_content.explore
   .sidebar
     #prop_tree_content

From d4d7c9e0b12d5bc583b9d644de1eaa8fba4c8363 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 22 Jun 2018 11:57:51 -0700
Subject: [PATCH 48/95] Remove unnecessary div

---
 app/views/ontologies/properties.html.haml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index cb36db26c5..19b9bc0ec4 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -1,7 +1,6 @@
 #ont_properties.bd_content.explore
   .sidebar
-    #prop_tree_content
-      %div#propTree
+    %div#propTree
 
     %div{style: "clear:both;"}
 

From 7d58e21194ff457664d999e009caa2b4591c67a6 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 22 Jun 2018 11:58:43 -0700
Subject: [PATCH 49/95] Remove property details header

---
 app/views/ontologies/properties.html.haml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index 19b9bc0ec4..a0e33b7d66 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -13,7 +13,6 @@
 :plain
   <script id="property-details" type="text/x-handlebars-template">
     <div style="padding: 1%; width: 98%;">
-      <h2 style="font-size: 150%; margin: 0 10px 15px;">Property Details</h2>
       <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="100%">
         {{#if label}}
           <tr>

From a358c7debf06098c91e97182970dd37b2effd246 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 25 Jun 2018 15:21:51 -0700
Subject: [PATCH 50/95] Refactor ontology properties pane to use CSS Grid
 Layout

Fixes #77
---
 app/assets/stylesheets/ontologies.scss    |  17 +++-
 app/views/ontologies/properties.html.haml | 101 +++++++++-------------
 2 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 9b5d8cc0b2..8f7dd86f6b 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -88,6 +88,19 @@ $ont-metadata-bg-color: #e2ebf0;
   font: small/1.231 arial,helvetica,clean,sans-serif;
 }
 
-#ont_properties .container {
-  background: none !important;
+.ont-properties {
+  display: grid;
+  grid-template-columns: 30% 70%;
+  grid-column-gap: 15px;
+}
+
+#propTree {
+  grid-column: 1;
+  overflow-x: auto;
+  white-space: nowrap;
+  border-right: 1px solid #ccc;
+}
+
+#prop_contents {
+  grid-column: 2;
 }
diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index a0e33b7d66..23fbed6d92 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -1,83 +1,66 @@
-#ont_properties.bd_content.explore
-  .sidebar
-    %div#propTree
-
-    %div{style: "clear:both;"}
-
-  .container
-    #prop_contents
-    %div{style: "clear:both;"}
-
-%div{style: "clear: both;"}
+%div.ont-properties
+  %div#propTree
+  %div#prop_contents
 
 :plain
   <script id="property-details" type="text/x-handlebars-template">
-    <div style="padding: 1%; width: 98%;">
-      <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="100%">
-        {{#if label}}
-          <tr>
-            <td class="label">
-              Labels
-            </td>
-            <td>
-              <p>
-                {{label}}&nbsp;
-              </p>
-            </td>
-          </tr>
-        {{/if}}
-        {{#if definition}}
-          <tr>
-            <td class="label">
-              Definitions
-            </td>
-            <td>
-              <p>
-                {{definition}}&nbsp;
-              </p>
-            </td>
-          </tr>
-        {{/if}}
+    <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="98%">
+      {{#if label}}
+        <tr>
+          <td class="label">
+            Labels
+          </td>
+          <td>
+            <p>
+              {{label}}&nbsp;
+            </p>
+          </td>
+        </tr>
+      {{/if}}
+      {{#if definition}}
         <tr>
-          <td class="label">ID</td>
+          <td class="label">
+            Definitions
+          </td>
+          <td>
+            <p>
+              {{definition}}&nbsp;
+            </p>
+          </td>
+        </tr>
+      {{/if}}
+      <tr>
+        <td class="label">ID</td>
+        <td>
+          <p>
+            {{id}}&nbsp;
+          </p>
+        </td>
+      </tr>
+      {{#if parents}}
+        <tr>
+          <td class="label">Parent</td>
           <td>
             <p>
-              {{id}}&nbsp;
+              {{parents}}&nbsp;
             </p>
           </td>
         </tr>
-        {{#if parents}}
-          <tr>
-            <td class="label">Parent</td>
-            <td>
-              <p>
-                {{parents}}&nbsp;
-              </p>
-            </td>
-          </tr>
-        {{/if}}
-      </table>
-    </div>
+      {{/if}}
+    </table>
   </script>
 
 :javascript
   jQuery(document).data().bp.ontPropertiesTab = {};
 
   jQuery(document).data().bp.ontPropertiesTab.init = function() {
-    jQuery("#ont_properties").splitter({
-      sizeLeft: 400,
-      resizeToWidth: true
-    });
-
-    var content_width = jQuery("#ontology_content").width();
-    jQuery("#ont_properties").width(content_width);
-
     var source = jQuery("#property-details").html();
     var propDetailsTemp = Handlebars.compile(source);
 
     $("#propTree").NCBOPropertyTree({
       ontology: "#{@ontology.acronym}",
       ncboUIURL: jQuery(document).data().bp.config.ui_url,
+      width: "100%",
       onInit: function() {
         var ontPropTree = $("#propTree").data().NCBOPropertyTree;
         var data = $("#propTree").find("a:first").data();

From 222e7f0d62bb883050140cf8bfc0e3d38eceba8c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 29 Jun 2018 13:05:44 -0700
Subject: [PATCH 51/95] Rename CSS style that conflicted with Bootstrap

---
 app/assets/javascripts/bp_visualize.js.erb |  6 +++---
 app/assets/stylesheets/bioportal.scss      | 14 +++++++-------
 app/views/concepts/_biomixer.html.erb      | 22 +++++++++++-----------
 app/views/ontologies/visualize.html.haml   |  4 ++--
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
index 4fa379e199..c591572313 100644
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ b/app/assets/javascripts/bp_visualize.js.erb
@@ -87,9 +87,9 @@
     jQuery("#bd_content").width(bd_content_width);
 
     // Size the content window
-    var iframeHeight = jQuery(window).height() - jQuery("#bd_content .container").offset().top - 110;
-    jQuery("#bd_content .container").css("width", "100%").css("height", iframeHeight);
-    jQuery("#bd .bd_content .container #contents").css("max-height", iframeHeight);
+    var iframeHeight = jQuery(window).height() - jQuery("#bd_content .cls-info-container").offset().top - 110;
+    jQuery("#bd_content .cls-info-container").css("width", "100%").css("height", iframeHeight);
+    jQuery("#bd .bd_content .cls-info-container #contents").css("max-height", iframeHeight);
     jQuery("#bd .sd_max_height").css("max-height", iframeHeight);
 
     // Split bar
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index ad7ee476a6..b9d88717ad 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -323,31 +323,31 @@ h1 a:hover, h2 a:hover {
 .sidebar #sd_ft p {
   padding:5px 0 0 25px;
 }
-#bd .bd_content .container {
+#bd .bd_content .cls-info-container {
   position:relative;
   background: image-url('layout/subnav_bg.png') repeat-x;
   width: 75%;
   min-width: 400px;
   float: left;
 }
-#bd .bd_content .container .tabs {
+#bd .bd_content .cls-info-container .tabs {
   height:24px;
   float:left;
 }
-#bd .bd_content .container .tabs ul {
+#bd .bd_content .cls-info-container .tabs ul {
   margin:0;
   float:left;
 }
-#bd .bd_content .container .tabs li {
+#bd .bd_content .cls-info-container .tabs li {
   margin:0;
 }
-#bd .bd_content .container .tabs li.first {
+#bd .bd_content .cls-info-container .tabs li.first {
   padding-left:0;
 }
-#bd .bd_content .container .tabs a {
+#bd .bd_content .cls-info-container .tabs a {
   padding:5px 15px 0 15px;
 }
-#bd .bd_content .container #contents {
+#bd .bd_content .cls-info-container #contents {
   float:left;
   /* padding:10px; */
   width:100%;
diff --git a/app/views/concepts/_biomixer.html.erb b/app/views/concepts/_biomixer.html.erb
index d8dba5575a..dfab031b4a 100644
--- a/app/views/concepts/_biomixer.html.erb
+++ b/app/views/concepts/_biomixer.html.erb
@@ -7,10 +7,10 @@
 <script>
 jQuery(document).data().bp.biomixer_fullscreen = {};
 jQuery(document).data().bp.biomixer_fullscreen.enabled = false;
-jQuery(document).data().bp.biomixer_fullscreen.bd_container_h = jQuery("#bd_content .container").css("height");
-jQuery(document).data().bp.biomixer_fullscreen.bd_contents_h = jQuery("#bd .bd_content .container #contents").css("max-height");
+jQuery(document).data().bp.biomixer_fullscreen.bd_container_h = jQuery("#bd_content .cls-info-container").css("height");
+jQuery(document).data().bp.biomixer_fullscreen.bd_contents_h = jQuery("#bd .bd_content .cls-info-container #contents").css("max-height");
 jQuery(document).data().bp.biomixer_fullscreen.bio_container_h = jQuery("#biomixer_container").css("height");
-jQuery(document).data().bp.biomixer_fullscreen.bd_container_w = jQuery("#bd_content .container").css("width");
+jQuery(document).data().bp.biomixer_fullscreen.bd_container_w = jQuery("#bd_content .cls-info-container").css("width");
 jQuery(document).data().bp.biomixer_fullscreen.bio_container_w = jQuery("#biomixer_container").css("width");
 
 jQuery(document).data().bp.biomixer_fullscreen = {
@@ -23,29 +23,29 @@ jQuery(document).data().bp.biomixer_fullscreen.toggle = function(toggle) {
   jQuery("#nav_ontology")[toggle]();
   jQuery("#bd_content .sidebar")[toggle]();
   jQuery("#bd_content .vsplitbar")[toggle]();
-  jQuery("#bd_content .container .tabs")[toggle]();
+  jQuery("#bd_content .cls-info-container .tabs")[toggle]();
   jQuery(document).data().bp.biomixer_fullscreen.heights(toggle === 'show');
 }
 
  jQuery(document).data().bp.biomixer_fullscreen.heights = function(original) {
   var height;
   if (original) {
-    jQuery("#bd_content .container").css("height", jQuery(document).data().bp.biomixer_fullscreen.bd_container_h);
-    jQuery("#bd .bd_content .container #contents").css("max-height", jQuery(document).data().bp.biomixer_fullscreen.bd_contents_h);
+    jQuery("#bd_content .cls-info-container").css("height", jQuery(document).data().bp.biomixer_fullscreen.bd_container_h);
+    jQuery("#bd .bd_content .cls-info-container #contents").css("max-height", jQuery(document).data().bp.biomixer_fullscreen.bd_contents_h);
     jQuery("#biomixer_container").css("height", jQuery(document).data().bp.biomixer_fullscreen.bio_container_h);
-    jQuery("#bd_content .container").css("width", jQuery(document).data().bp.biomixer_fullscreen.bd_container_w);
+    jQuery("#bd_content .cls-info-container").css("width", jQuery(document).data().bp.biomixer_fullscreen.bd_container_w);
     jQuery("#biomixer_container").css("padding", 0).css("width", jQuery(document).data().bp.biomixer_fullscreen.bio_container_w);
     jQuery("#bd_content").trigger('resize');
   } else {
-    height = jQuery(window).height() - jQuery("#bd_content .container").offset().top - 50;
-    jQuery("#bd_content .container").css("width", "100%").css("height", height);
-    jQuery("#bd .bd_content .container #contents").css("max-height", height);
+    height = jQuery(window).height() - jQuery("#bd_content .cls-info-container").offset().top - 50;
+    jQuery("#bd_content .cls-info-container").css("width", "100%").css("height", height);
+    jQuery("#bd .bd_content .cls-info-container #contents").css("max-height", height);
     jQuery("#biomixer_container").css("padding", 0).css("width", "100%").css("height", height);
   }
 }
 
 window.onmessage = function(e) {
-  var iframeHeight = jQuery(window).height() - jQuery("#bd_content .container").offset().top - 50;
+  var iframeHeight = jQuery(window).height() - jQuery("#bd_content .cls-info-container").offset().top - 50;
   if (e.data === "biomixer_full_screen_request") {
     if (jQuery(document).data().bp.biomixer_fullscreen.enabled) {
       // make small
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index a7f1a70edc..842b3b85b4 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -18,7 +18,7 @@
 
     - if @concept.id.eql?("bp_fake_root")
       / When we have an ontology with a flat hierarchy, we initially disable the tabs because we don't have a class to display
-      .container
+      .cls-info-container
         #fake_tabs.tabs
           %ul
             %li#details_top.selected.first{:onclick => "return false;"}
@@ -75,7 +75,7 @@
           #mappings_content.tab_container.not_visible
           #resource_index_content.tab_container.not_visible.resource_index_embed
     - else
-      .container
+      .cls-info-container
         .tabs
           %ul
             %li#details_top.selected.tab.first

From cdf9707ed8e68ecff285a0d323ff908e827eed9d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 29 Jun 2018 13:55:24 -0700
Subject: [PATCH 52/95] Convert mappings partial to Haml

---
 app/views/ontologies/_mappings.html.erb  | 4 ----
 app/views/ontologies/_mappings.html.haml | 3 +++
 2 files changed, 3 insertions(+), 4 deletions(-)
 delete mode 100644 app/views/ontologies/_mappings.html.erb
 create mode 100644 app/views/ontologies/_mappings.html.haml

diff --git a/app/views/ontologies/_mappings.html.erb b/app/views/ontologies/_mappings.html.erb
deleted file mode 100644
index 6737ba8ae2..0000000000
--- a/app/views/ontologies/_mappings.html.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="mappings_content" style="margin: 1em 0; padding: 0 1em;">
-  <h2 style="margin-bottom: -.5em; font-size: x-large; padding: 0.5em 0 0;">Mappings</h2>
-  <%= render :partial => 'mappings/count' %>
-</div>
diff --git a/app/views/ontologies/_mappings.html.haml b/app/views/ontologies/_mappings.html.haml
new file mode 100644
index 0000000000..d32e5a9d9f
--- /dev/null
+++ b/app/views/ontologies/_mappings.html.haml
@@ -0,0 +1,3 @@
+#mappings_content{:style => "margin: 1em 0; padding: 0 1em;"}
+  %h2{:style => "margin-bottom: -.5em; font-size: x-large; padding: 0.5em 0 0;"} Mappings
+  = render :partial => 'mappings/count'

From bb2923b90eb69d138818727533345e6ba651eab7 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 29 Jun 2018 14:01:04 -0700
Subject: [PATCH 53/95] Remove unnecessary h2 tag

---
 app/views/ontologies/_mappings.html.haml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/views/ontologies/_mappings.html.haml b/app/views/ontologies/_mappings.html.haml
index d32e5a9d9f..f3a5a6a714 100644
--- a/app/views/ontologies/_mappings.html.haml
+++ b/app/views/ontologies/_mappings.html.haml
@@ -1,3 +1,2 @@
-#mappings_content{:style => "margin: 1em 0; padding: 0 1em;"}
-  %h2{:style => "margin-bottom: -.5em; font-size: x-large; padding: 0.5em 0 0;"} Mappings
+#mappings_content
   = render :partial => 'mappings/count'

From eeb5f3895d7ced4df75ef5b7c78882ec1174010f Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 29 Jun 2018 15:10:15 -0700
Subject: [PATCH 54/95] Minor style tweaks for the mappings table

---
 app/views/mappings/_count.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/mappings/_count.html.haml b/app/views/mappings/_count.html.haml
index e9a6fe37ae..c32c212261 100644
--- a/app/views/mappings/_count.html.haml
+++ b/app/views/mappings/_count.html.haml
@@ -1,5 +1,5 @@
 %div{style: "width: 50%"}
-  %table#mapping_count_table.zebra{:cellpadding => "0", :cellspacing => "0", :style => "margin: 20px 0;", :width => "90%"}
+  %table#mapping_count_table.zebra{cellpadding: "0", cellspacing: "0", width: "100%"}
     %thead
       %tr
         %th Ontology

From 32175861db0d2fe9fa6b31b90e6d62dafe2854ba Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 29 Jun 2018 16:54:27 -0700
Subject: [PATCH 55/95] Use Split.js for resizable views in properties pane

#78
---
 app/assets/stylesheets/ontologies.scss    |  24 +++++++++++++---------
 app/views/layouts/_appliance.html.haml    |   1 +
 app/views/layouts/_header.html.erb        |   1 +
 app/views/layouts/angular.html.erb        |   1 +
 app/views/layouts/popup.html.erb          |   1 +
 app/views/ontologies/properties.html.haml |  21 +++++++++++++++++--
 vendor/assets/images/split/horizontal.png | Bin 0 -> 104 bytes
 vendor/assets/images/split/vertical.png   | Bin 0 -> 91 bytes
 8 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100755 vendor/assets/images/split/horizontal.png
 create mode 100755 vendor/assets/images/split/vertical.png

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 8f7dd86f6b..832203c1c1 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -1,4 +1,15 @@
-$ont-metadata-bg-color: #e2ebf0; 
+$ont-metadata-bg-color: #e2ebf0;
+
+.ontologies.show .gutter {
+  background-color: rgba(0, 0, 0, 0.03);
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &.gutter-horizontal {
+    cursor: col-resize;
+    background-image: image-url('split/vertical.png');
+  }
+}
 
 /* Summary pane */
 
@@ -89,18 +100,11 @@ $ont-metadata-bg-color: #e2ebf0;
 }
 
 .ont-properties {
-  display: grid;
-  grid-template-columns: 30% 70%;
-  grid-column-gap: 15px;
+  display: flex;
+  flex-direction: row;
 }
 
 #propTree {
-  grid-column: 1;
   overflow-x: auto;
   white-space: nowrap;
-  border-right: 1px solid #ccc;
-}
-
-#prop_contents {
-  grid-column: 2;
 }
diff --git a/app/views/layouts/_appliance.html.haml b/app/views/layouts/_appliance.html.haml
index 3b15404f7e..b152066513 100644
--- a/app/views/layouts/_appliance.html.haml
+++ b/app/views/layouts/_appliance.html.haml
@@ -16,6 +16,7 @@
     = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"
     = javascript_include_tag "//www.google.com/recaptcha/api/js/recaptcha_ajax.js"
     = javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"
+    = javascript_include_tag "//unpkg.com/split.js/split.min.js"
 
     %script
       jQuery(document).data({bp: {config: #{bp_config_json.html_safe}, user: #{(session[:user] || {}).to_hash.to_json.html_safe}}});
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 678792a384..05c90594b3 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -28,6 +28,7 @@
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" %>
   <%= javascript_include_tag "//www.google.com/recaptcha/api/js/recaptcha_ajax.js" %>
   <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
+  <%= javascript_include_tag "//unpkg.com/split.js/split.min.js" %>
 
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
diff --git a/app/views/layouts/angular.html.erb b/app/views/layouts/angular.html.erb
index c5a65d969e..94de6e5920 100644
--- a/app/views/layouts/angular.html.erb
+++ b/app/views/layouts/angular.html.erb
@@ -36,6 +36,7 @@
   <%=javascript_include_tag "//www.google.com/recaptcha/api/js/recaptcha_ajax.js"%>
   <%=javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"%>
   <%=javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"%>
+  <%=javascript_include_tag "//unpkg.com/split.js/split.min.js"%>
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};
diff --git a/app/views/layouts/popup.html.erb b/app/views/layouts/popup.html.erb
index 5d8be7ead5..d1fb5c3036 100644
--- a/app/views/layouts/popup.html.erb
+++ b/app/views/layouts/popup.html.erb
@@ -13,6 +13,7 @@
   <%= javascript_include_tag "//www.google.com/recaptcha/api/js/recaptcha_ajax.js" %>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js" %>
   <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
+  <%= javascript_include_tag "//unpkg.com/split.js/split.min.js" %>
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};
diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index 23fbed6d92..ccb7066bf5 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -1,10 +1,10 @@
 %div.ont-properties
   %div#propTree
-  %div#prop_contents
+  %div#prop_contents.pl-3
 
 :plain
   <script id="property-details" type="text/x-handlebars-template">
-    <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="98%">
+    <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="100%">
       {{#if label}}
         <tr>
           <td class="label">
@@ -75,4 +75,21 @@
       data.id = decodeURIComponent(data.id);
       jQuery("#prop_contents").html(propDetailsTemp(data));
     });
+
+    Split(['#propTree', '#prop_contents'], {
+      elementStyle: function (dimension, size, gutterSize) {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+      gutterStyle: function (dimension, gutterSize) {
+        return {
+          'flex-basis':  gutterSize + 'px'
+        }
+      },
+      gutterSize: 10,
+      direction: "horizontal",
+      sizes: [25, 75],
+      cursor: "col-resize"
+    })  
   }
diff --git a/vendor/assets/images/split/horizontal.png b/vendor/assets/images/split/horizontal.png
new file mode 100755
index 0000000000000000000000000000000000000000..cbe7da77ddab697a99d363f39ed93184ef505ccc
GIT binary patch
literal 104
zcmeAS@N?(olHy`uVBq!ia0vp^azM<=$P6Si-k;kEq}T#{LR{Soe9oLX^NH#28lVVc
zNswPKgTu2MX+VyEr;B4qMO?B4Gm8Kdi$Dy+{7RmK2db14fN~6;u6{1-oD!M<_c0o-

literal 0
HcmV?d00001

diff --git a/vendor/assets/images/split/vertical.png b/vendor/assets/images/split/vertical.png
new file mode 100755
index 0000000000000000000000000000000000000000..0ac8fa1e03fd46c25f1b22ad9eac95b825edbf91
GIT binary patch
literal 91
zcmeAS@N?(olHy`uVBq!ia0vp^tUxTs!3HFs)Lq#Nq?9~e978mMlP!v$ov9aKV`7t-
p&A3{jqq%P*ci$|_EVVde#<~+X&uyMGX&+EEgQu&X%Q~loCIHDl8R-B3

literal 0
HcmV?d00001


From 8d9637a9ad31e66cef557714d0b5aa65dac6ec0c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 09:32:53 -0700
Subject: [PATCH 56/95] Don't use HTML list for display of single project

---
 app/views/ontologies/_metadata.html.haml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index 5dbe18eab5..42ca57fdb6 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -148,6 +148,8 @@
     %div{style: "padding: 24px 36px;"}
       - if @projects.empty?
         %p.font-italic= "No projects using #{@ontology.acronym}"
+      - elsif @projects.size == 1
+        %p= link_to(@projects.first.name, project_path(@projects.first.acronym))
       - else
         %ul
           - for project in @projects

From 5c973018ce45451f3d97ea689ea61af0f7663cc1 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 10:00:57 -0700
Subject: [PATCH 57/95] Remove unused CSS

---
 app/assets/stylesheets/bioportal.scss | 31 ---------------------------
 1 file changed, 31 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index b9d88717ad..741ce5d048 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -222,27 +222,6 @@ h1 a:hover, h2 a:hover {
 #bd {
   background: #fff;
 }
-#bd #bd_hd {
-  width:100%;
-  float:left;
-  white-space:nowrap;
-  overflow:hidden;
-  margin:15px 25px 15px 25px;
-}
-#bd #bd_hd h1 {
-  font-size:120%;
-  float:left;
-  width:auto;
-  display:inline;
-  margin-right:10px;
-}
-#bd #bd_hd h3 {
-  font-size:100%;
-  float:left;
-  display:inline;
-  margin-right:10px;
-  margin-top:2px;
-}
 #bd hr {
   border:0;
   height:1px;
@@ -250,16 +229,6 @@ h1 a:hover, h2 a:hover {
   background:#e9eaeb;
   margin:10px 0;
 }
-#ontologies_bd_container {
-  width: 100%;
-}
-#ontologies_bd_container table#ontologies {
-  margin: 1em 0;
-}
-#ontologies_padding_container {
-  padding: 0 1em 1em;
-}
-
 #bd .bd_content {
   display:block;
   float:left;

From 2b1cc92764fe92bc8fa5457ea5607040fd8c9fe9 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 10:04:53 -0700
Subject: [PATCH 58/95] Remove unused CSS

---
 app/assets/stylesheets/bioportal.scss | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 741ce5d048..001c4e70e6 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -239,6 +239,7 @@ h1 a:hover, h2 a:hover {
   border-top:1px solid #e9eaeb;
   padding-left:0;
 }
+
 .sidebar {
   float:left;
   width:25%;
@@ -248,18 +249,7 @@ h1 a:hover, h2 a:hover {
   height:600px;
   min-width:250px;
 }
-.sidebar #sd_hd {
-  background:#dadde0;
-  height:24px;
-  border-bottom:1px solid #bcc6d0;
-  display:block;
-  float:left;
-  width:100%;
-}
-.sidebar #sd_hd h2 {
-  padding:5px 0 0 25px;
-  font-weight:normal;
-}
+
 .sidebar #sd_content {
   display:block;
   overflow:auto;

From 1c36bdd3e3555d6da97d38014826c5fb3669d406 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 10:06:28 -0700
Subject: [PATCH 59/95] Remove old TODO comment

---
 app/views/ontologies/visualize.html.haml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 842b3b85b4..482ab5b0f7 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -8,10 +8,6 @@
         Jump To:
         %input#search_box{:size => "30", :type => "textbox"}/
         %input#jump_to_concept_id{:type => "hidden"}/
-        / TODO_REV: Flat ontology support
-        -# if @ontology.flat?
-        /  #flat_help{:style => "padding: 5px; background-color: #DADDE0; color: black;"}
-        /    This ontology cannot be displayed as a tree. You can use the "Jump To" field to search for and display classes.
       #sd_content.sd_max_height
         = loading_spinner(true)
       %div{:style => "clear:both;"}

From b83bf328aa2299148c56018a0ed52eadb8c04a34 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 10:09:53 -0700
Subject: [PATCH 60/95] Remove unnecessary div elements

---
 app/views/ontologies/visualize.html.haml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 482ab5b0f7..2cfdc21fd4 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -10,7 +10,6 @@
         %input#jump_to_concept_id{:type => "hidden"}/
       #sd_content.sd_max_height
         = loading_spinner(true)
-      %div{:style => "clear:both;"}
 
     - if @concept.id.eql?("bp_fake_root")
       / When we have an ontology with a flat hierarchy, we initially disable the tabs because we don't have a class to display
@@ -118,7 +117,6 @@
     %input{:name => "search[ontologies][]", :type => "hidden", :value => @ontology.acronym}/
     = hidden_field :search, :search_type, :value=>"contains"
     = hidden_field :search, :keyword, :value=>"",:id=>"search_keyword"
-  %div{:style => "clear: both;"}
   / Create mapping UI
   #create_mapping{:style => "left: -99999px; position: absolute;"}
     =# TODO_REV: Mappings support (create mapping) render :partial => '/mappings/new_form', :locals => { :ontology_from => @ontology.id, :concept_from => @concept.fullId }

From bd5373447cc88034d6fbad84755374d0c1f526ce Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 10:16:38 -0700
Subject: [PATCH 61/95] Remove old TODO comment and unused div

---
 app/views/ontologies/visualize.html.haml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 2cfdc21fd4..27170f5fcd 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -117,9 +117,6 @@
     %input{:name => "search[ontologies][]", :type => "hidden", :value => @ontology.acronym}/
     = hidden_field :search, :search_type, :value=>"contains"
     = hidden_field :search, :keyword, :value=>"",:id=>"search_keyword"
-  / Create mapping UI
-  #create_mapping{:style => "left: -99999px; position: absolute;"}
-    =# TODO_REV: Mappings support (create mapping) render :partial => '/mappings/new_form', :locals => { :ontology_from => @ontology.id, :concept_from => @concept.fullId }
 - else # found an error
   = "<div id=\"error\"><h2>#{@error}</h2></div>"
 

From 0dee0effadf01b546a171ff7a02ceda346bed6e8 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 2 Jul 2018 17:34:03 -0700
Subject: [PATCH 62/95] Use flexbox layout and new splitter for classes pane

Resolves #16 and #78
---
 app/assets/javascripts/bp_visualize.js.erb |  35 ++-
 app/assets/javascripts/vendor.js           |   1 -
 app/assets/stylesheets/bioportal.scss      |  68 +----
 app/assets/stylesheets/ontologies.scss     |  12 +
 app/views/concepts/_biomixer.html.erb      |   3 +-
 app/views/ontologies/visualize.html.haml   |   2 +-
 vendor/assets/javascripts/splitter.js      | 305 ---------------------
 7 files changed, 33 insertions(+), 393 deletions(-)
 delete mode 100644 vendor/assets/javascripts/splitter.js

diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
index c591572313..6fb4af2bc5 100644
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ b/app/assets/javascripts/bp_visualize.js.erb
@@ -81,25 +81,22 @@
   }
 
   jQuery(document).data().bp.classesTab.classes_init = function(){
-    // Override the side of the bd_content div to avoid problems with
-    // the window resizing, which can sometimes cause the right-hand content div to drop down
-    var bd_content_width = jQuery("#ontology_content").width();
-    jQuery("#bd_content").width(bd_content_width);
-
-    // Size the content window
-    var iframeHeight = jQuery(window).height() - jQuery("#bd_content .cls-info-container").offset().top - 110;
-    jQuery("#bd_content .cls-info-container").css("width", "100%").css("height", iframeHeight);
-    jQuery("#bd .bd_content .cls-info-container #contents").css("max-height", iframeHeight);
-    jQuery("#bd .sd_max_height").css("max-height", iframeHeight);
-
-    // Split bar
-    if (jQuery("#bd_content").find(".vsplitbar").length == 0) {
-      jQuery("#bd_content").splitter({
-        sizeLeft: 400,
-        resizeToWidth: true,
-        cookie: "vsplitbar_position"
-      });
-    }
+    Split(['div#bd_content .sidebar', 'div#bd_content .cls-info-container'], {
+      elementStyle: function (dimension, size, gutterSize) {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+      gutterStyle: function (dimension, gutterSize) {
+        return {
+          'flex-basis':  gutterSize + 'px'
+        }
+      },
+      gutterSize: 10,
+      direction: "horizontal",
+      sizes: [25, 75],
+      cursor: "col-resize"
+    })
   }
 
   // The tab system
diff --git a/app/assets/javascripts/vendor.js b/app/assets/javascripts/vendor.js
index fb3c8691b2..58a5ac855f 100644
--- a/app/assets/javascripts/vendor.js
+++ b/app/assets/javascripts/vendor.js
@@ -25,7 +25,6 @@
 //= require ajax-chosen
 //= require superfish
 //= require jquery.cookie
-//= require splitter
 //= require autocomplete
 //= require jquery.hoverIntent
 //= require jquery.simple.tree
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 001c4e70e6..af1a8982e6 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -229,39 +229,6 @@ h1 a:hover, h2 a:hover {
   background:#e9eaeb;
   margin:10px 0;
 }
-#bd .bd_content {
-  display:block;
-  float:left;
-  padding-left:25px;
-}
-#bd .bd_content.explore {
-  width:95%;
-  border-top:1px solid #e9eaeb;
-  padding-left:0;
-}
-
-.sidebar {
-  float:left;
-  width:25%;
-  font-size:90%;
-  position:relative;
-  min-height:450px;
-  height:600px;
-  min-width:250px;
-}
-
-.sidebar #sd_content {
-  display:block;
-  overflow:auto;
-  float:left;
-  width:100%;
-  height:100%;
-  min-height:350px;
-}
-
-.sidebar .sd_max_height {
-  max-height:600px;
-}
 
 #grab-point {
   background: image-url('layout/bar-ext.gif') repeat-y;
@@ -274,21 +241,7 @@ h1 a:hover, h2 a:hover {
   border-right:1px solid #ccc;
   border-left:1px solid #ccc;
 }
-.sidebar #sd_ft {
-  float:left;
-  width:300px;
-  color:#7f7f7f;
-}
-.sidebar #sd_ft p {
-  padding:5px 0 0 25px;
-}
-#bd .bd_content .cls-info-container {
-  position:relative;
-  background: image-url('layout/subnav_bg.png') repeat-x;
-  width: 75%;
-  min-width: 400px;
-  float: left;
-}
+
 #bd .bd_content .cls-info-container .tabs {
   height:24px;
   float:left;
@@ -308,9 +261,7 @@ h1 a:hover, h2 a:hover {
 }
 #bd .bd_content .cls-info-container #contents {
   float:left;
-  /* padding:10px; */
   width:100%;
-  max-height:600px; /* match .sidebar.sd_max_height */
   overflow: auto;
 }
 
@@ -318,7 +269,6 @@ h1 a:hover, h2 a:hover {
   color: #F5FAFA;
 }
 
-
 /* Tables */
 
 .minimal {
@@ -683,9 +633,8 @@ tr.mainresource td {
 }
 
 #qsearch{
-    padding:3px;
-    border-bottom:1px solid #C1DAD7;
-    border-left:1px solid #C1DAD7;
+  padding:3px;
+  border-bottom:1px solid #C1DAD7;
 }
 
 .home_button{
@@ -1383,17 +1332,6 @@ div.tooltip {
   display: none;
 }
 
-/* used for vertical split bar */
-.vsplitbar {
-  width: 5px;
-  background: #DADDE0 image-url('splitter/vgrabber.gif') no-repeat scroll center center;
-}
-
-.vsplitbar:hover {
-  cursor: ew-resize !important;
-}
-
-
 /************************************
  * Ontology Viewing
  ************************************/
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 832203c1c1..9fbd7f2945 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -92,6 +92,18 @@ $ont-metadata-bg-color: #e2ebf0;
   margin-left: .5em;
 }
 
+/* Classes pane */
+
+div#bd_content {
+  display: flex;
+  flex-direction: row;
+}
+
+div#bd_content .sidebar {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 /* Properties pane */
 
 #propTree a {
diff --git a/app/views/concepts/_biomixer.html.erb b/app/views/concepts/_biomixer.html.erb
index dfab031b4a..f0871eb5f4 100644
--- a/app/views/concepts/_biomixer.html.erb
+++ b/app/views/concepts/_biomixer.html.erb
@@ -20,9 +20,8 @@ jQuery(document).data().bp.biomixer_fullscreen = {
 
 
 jQuery(document).data().bp.biomixer_fullscreen.toggle = function(toggle) {
-  jQuery("#nav_ontology")[toggle]();
   jQuery("#bd_content .sidebar")[toggle]();
-  jQuery("#bd_content .vsplitbar")[toggle]();
+  jQuery("#bd_content .gutter")[toggle]();
   jQuery("#bd_content .cls-info-container .tabs")[toggle]();
   jQuery(document).data().bp.biomixer_fullscreen.heights(toggle === 'show');
 }
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 27170f5fcd..8908691e6f 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -8,7 +8,7 @@
         Jump To:
         %input#search_box{:size => "30", :type => "textbox"}/
         %input#jump_to_concept_id{:type => "hidden"}/
-      #sd_content.sd_max_height
+      #sd_content
         = loading_spinner(true)
 
     - if @concept.id.eql?("bp_fake_root")
diff --git a/vendor/assets/javascripts/splitter.js b/vendor/assets/javascripts/splitter.js
deleted file mode 100644
index 7c9df7904c..0000000000
--- a/vendor/assets/javascripts/splitter.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/*
- * jQuery.splitter.js - two-pane splitter window plugin
- *
- * version 1.51 (2009/01/09)
- *
- * Dual licensed under the MIT and GPL licenses:
- *   http://www.opensource.org/licenses/mit-license.php
- *   http://www.gnu.org/licenses/gpl.html
- */
-
-/**
- * The splitter() plugin implements a two-pane resizable splitter window.
- * The selected elements in the jQuery object are converted to a splitter;
- * each selected element should have two child elements, used for the panes
- * of the splitter. The plugin adds a third child element for the splitbar.
- *
- * For more details see: http://methvin.com/splitter/
- *
- *
- * @example $('#MySplitter').splitter();
- * @desc Create a vertical splitter with default settings
- *
- * @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'});
- * @desc Create a horizontal splitter resizable via Alt+Shift+M
- *
- * @name splitter
- * @type jQuery
- * @param Object options Options for the splitter (not required)
- * @cat Plugins/Splitter
- * @return jQuery
- * @author Dave Methvin (dave.methvin@gmail.com)
- */
- ;(function($){
-
- $.fn.splitter = function(args){
-  args = args || {};
-  return this.each(function() {
-    var element = $(this);
-    var zombie;   // left-behind splitbar for outline resizes
-    function startSplitMouse(evt) {
-      if ( opts.outline )
-        zombie = zombie || bar.clone(false).insertAfter(A);
-      panes.css("-webkit-user-select", "none"); // Safari selects A/B text on a move
-      bar.addClass(opts.activeClass);
-      A._posSplit = A[0][opts.pxSplit] - evt[opts.eventPos];
-      $(document)
-        .bind("mousemove", doSplitMouse)
-        .bind("mouseup", endSplitMouse);
-    }
-    function doSplitMouse(evt) {
-      var newPos = A._posSplit+evt[opts.eventPos];
-      if ( opts.outline ) {
-        newPos = Math.max(0, Math.min(newPos, splitter._DA - bar._DA));
-        bar.css(opts.origin, newPos);
-      } else
-        resplit(newPos);
-    }
-    function endSplitMouse(evt) {
-      bar.removeClass(opts.activeClass);
-      var newPos = A._posSplit+evt[opts.eventPos];
-      if ( opts.outline ) {
-        zombie.remove(); zombie = null;
-        resplit(newPos);
-      }
-      panes.css("-webkit-user-select", "text"); // let Safari select text again
-      $(document)
-        .unbind("mousemove", doSplitMouse)
-        .unbind("mouseup", endSplitMouse);
-    }
-    function resplit(newPos) {
-      // Constrain new splitbar position to fit pane size limits
-      newPos = Math.max(A._min, splitter._DA - B._max,
-          Math.min(newPos, A._max, splitter._DA - bar._DA - B._min));
-      // Resize/position the two panes
-      bar._DA = bar[0][opts.pxSplit];   // bar size may change during dock
-      bar.css(opts.origin, newPos).css(opts.fixed, "100%");
-      A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed, "100%");
-      B.css(opts.split, splitter._DA-newPos).css(opts.fixed, "100%");
-      /* Use this code to avoid fixed height (the commented out is original)
-      bar.css(opts.origin, newPos).css(opts.fixed, splitter._DF);
-      A.css(opts.origin, 0).css(opts.split, newPos).css(opts.fixed,  splitter._DF);
-      B.css(opts.split, splitter._DA-bar._DA-newPos).css(opts.fixed,  splitter._DF); */
-      // IE fires resize for us; all others pay cash
-      if ( !$.browser.msie )
-        panes.trigger("splitter-resize");
-    }
-    function dimSum(jq, dims) {
-      // Opera returns -1 for missing min/max width, turn into 0
-      var sum = 0;
-      for ( var i=1; i < arguments.length; i++ )
-        sum += Math.max(parseInt(jq.css(arguments[i])) || 0, 0);
-      return sum;
-    }
-
-    // Determine settings based on incoming opts, element classes, and defaults
-    var vh = (args.splitHorizontal? 'h' : args.splitVertical? 'v' : args.type) || 'v';
-    var opts = $.extend({
-      activeClass: 'active',  // class name for active splitter
-      pxPerKey: 8,      // splitter px moved per keypress
-      tabIndex: 0,      // tab order indicator
-      accessKey: ''     // accessKey for splitbar
-    },{
-      v: {          // Vertical splitters:
-        keyLeft: 39, keyRight: 37, cursor: "e-resize",
-        splitbarClass: "vsplitbar", outlineClass: "voutline",
-        type: 'v', eventPos: "pageX", origin: "left",
-        split: "width",  pxSplit: "offsetWidth",  side1: "Left", side2: "Right",
-        fixed: "height", pxFixed: "offsetHeight", side3: "Top",  side4: "Bottom"
-      },
-      h: {          // Horizontal splitters:
-        keyTop: 40, keyBottom: 38,  cursor: "n-resize",
-        splitbarClass: "hsplitbar", outlineClass: "houtline",
-        type: 'h', eventPos: "pageY", origin: "top",
-        //split: "height", pxSplit: "offsetHeight", side1: "Top",  side2: "Bottom",
-        fixed: "width",  pxFixed: "offsetWidth",  side3: "Left", side4: "Right"
-      }
-    }[vh], args);
-
-    // Create jQuery object closures for splitter and both panes
-    var splitter = $(this).css({position: "relative"});
-    var panes = $(">*", splitter[0]).css({
-      // Commented out to avoid using absolute positioning
-      //position: "absolute",       // positioned inside splitter container
-      "z-index": "1",         // splitbar is positioned above
-      "-moz-outline-style": "none"  // don't show dotted outline
-    });
-    var A = $(panes[0]);    // left  or top
-    var B = $(panes[1]);    // right or bottom
-
-    // Focuser element, provides keyboard support; title is shown by Opera accessKeys
-    var focuser = $('<a href="javascript:void(0)"></a>')
-      .attr({accessKey: opts.accessKey, tabIndex: opts.tabIndex, title: opts.splitbarClass})
-      .bind($.browser.opera?"click":"focus", function(){ this.focus(); bar.addClass(opts.activeClass) })
-      .bind("keydown", function(e){
-        var key = e.which || e.keyCode;
-        var dir = key==opts["key"+opts.side1]? 1 : key==opts["key"+opts.side2]? -1 : 0;
-        if ( dir )
-          resplit(A[0][opts.pxSplit]+dir*opts.pxPerKey, false);
-      })
-      .bind("blur", function(){ bar.removeClass(opts.activeClass) });
-
-    // Splitbar element, can be already in the doc or we create one
-    var bar = $(panes[2] || '<div></div>')
-      .insertAfter(A).css("z-index", "100").append(focuser)
-      .attr({"class": opts.splitbarClass, unselectable: "on"})
-      .css({position: "absolute", "user-select": "none", "-webkit-user-select": "none",
-        "-khtml-user-select": "none", "-moz-user-select": "none"})
-      .bind("mousedown", startSplitMouse);
-    // Use our cursor unless the style specifies a non-default cursor
-    if ( /^(auto|default|)$/.test(bar.css("cursor")) )
-      bar.css("cursor", opts.cursor);
-
-    // Cache several dimensions for speed, rather than re-querying constantly
-    bar._DA = bar[0][opts.pxSplit];
-    splitter._PBF = $.boxModel? dimSum(splitter, "border"+opts.side3+"Width", "border"+opts.side4+"Width") : 0;
-    splitter._PBA = $.boxModel? dimSum(splitter, "border"+opts.side1+"Width", "border"+opts.side2+"Width") : 0;
-    A._pane = opts.side1;
-    B._pane = opts.side2;
-    $.each([A,B], function(){
-      this._min = opts["min"+this._pane] || dimSum(this, "min-"+opts.split);
-      this._max = opts["max"+this._pane] || dimSum(this, "max-"+opts.split) || 9999;
-      this._init = opts["size"+this._pane]===true ?
-        parseInt($.curCSS(this[0],opts.split)) : opts["size"+this._pane];
-    });
-
-    // Determine initial position, get from cookie if specified
-    var initPos = A._init;
-    if ( !isNaN(B._init) )  // recalc initial B size as an offset from the top or left side
-      initPos = splitter[0][opts.pxSplit] - splitter._PBA - B._init - bar._DA;
-    if ( opts.cookie ) {
-      if ( !$.cookie )
-        alert('jQuery.splitter(): jQuery cookie plugin required');
-      var ckpos = parseInt($.cookie(opts.cookie));
-      if ( !isNaN(ckpos) )
-        initPos = ckpos;
-      $(window).bind("unload", function(){
-        var state = String(bar.css(opts.origin)); // current location of splitbar
-        $.cookie(opts.cookie, state, {expires: opts.cookieExpires || 365,
-          path: opts.cookiePath || document.location.pathname});
-      });
-    }
-    if ( isNaN(initPos) ) // King Solomon's algorithm
-      initPos = Math.round((splitter[0][opts.pxSplit] - splitter._PBA - bar._DA)/2);
-
-    // Resize event propagation and splitter sizing
-    if ( opts.anchorToWindow ) {
-      // Account for margin or border on the splitter container and enforce min height
-      splitter._hadjust = dimSum(splitter, "borderTopWidth", "borderBottomWidth", "marginBottom");
-      splitter._hmin = Math.max(dimSum(splitter, "minHeight"), 20);
-      $(window).bind("resize", function(){
-        var top = splitter.offset().top;
-        var wh = $(window).height();
-        //splitter.css("height", Math.max(wh-top-splitter._hadjust, splitter._hmin)+"px");
-        if ( !$.browser.msie ) splitter.trigger("splitter-resize");
-      }).trigger("splitter-resize");
-    }
-    else if ( opts.resizeToWidth && !$.browser.msie ) {
-      // We're going to watch both the window and body for resize events
-      $(window).bind("resize", function(){
-        element.width(jQuery(jQuery("#ontology_content")).width());
-        splitter.trigger("splitter-resize");
-      });
-      // Add a resize event binding on the body for when a scrollbar appears
-      $(document.body).watch("width", function(){
-        splitter.trigger("splitter-resize");
-      });
-    }
-
-    // Resize event handler; triggered immediately to set initial position
-    splitter.bind("splitter-resize", function(e, size){
-      // Custom events bubble in jQuery 1.3; don't Yo Dawg
-      if ( e.target != this ) return;
-      // Determine new width/height of splitter container
-      splitter._DF = splitter[0][opts.pxFixed] - splitter._PBF;
-      splitter._DA = splitter[0][opts.pxSplit] - splitter._PBA;
-      // Bail if splitter isn't visible or content isn't there yet
-      if ( splitter._DF <= 0 || splitter._DA <= 0 ) return;
-      // Re-divvy the adjustable dimension; maintain size of the preferred pane
-      resplit(!isNaN(size)? size : (!(opts.sizeRight||opts.sizeBottom)? A[0][opts.pxSplit] :
-        splitter._DA-B[0][opts.pxSplit]-bar._DA));
-    }).trigger("splitter-resize" , [initPos]);
-  });
-};
-})(jQuery);
-
-// A 'watch' function that monitors CSS attributes for changes
-(function($){
-  $.fn.watch = function(prop, func, interval, id) {
-      /// <summary>
-      /// Allows you to monitor changes in a specific
-      /// CSS property of an element by polling the value.
-      /// when the value changes a function is called.
-      /// The function called is called in the context
-      /// of the selected element (ie. this)
-      /// </summary>
-      /// <param name="prop" type="String">CSS Property to watch. If not specified (null) code is called on interval</param>
-      /// <param name="func" type="Function">
-      /// Function called when the value has changed.
-      /// </param>
-      /// <param name="func" type="Function">
-      /// optional id that identifies this watch instance. Use if
-      /// if you have multiple properties you're watching.
-      /// </param>
-      /// <returns type="jQuery" />
-      if (!interval)
-          interval = 200;
-      if (!id)
-          id = "_watcher";
-
-      this.each(function() {
-          var _t = this;
-          var el = $(this);
-          var fnc = function() {__watcher.call(_t, id) };
-          var itId = null;
-
-          var z = el.get(0);
-          if (typeof(z.onpropertychange) == "object")
-             el.bind("propertychange", fnc);
-          else if ($.browser.mozilla)
-              el.bind("DOMAttrModified", fnc);
-          else
-              itId = setInterval(fnc, interval);
-
-          el.data(id, { id: itId,
-              prop: prop,
-              func: func,
-              val: prop ? el.css(prop) : null
-          });
-      });
-      return this;
-  }
-
-  $.fn.unwatch = function(id) {
-      this.each(function() {
-          var w = $(this).data(id);
-          $(this).removeData();
-
-          if (typeof (z.onpropertychange) == "object")
-              el.unbind("propertychange", fnc);
-          else if ($.browser.mozilla)
-              el.unbind("DOMAttrModified", fnc);
-          else
-              clearInterval(w.id);
-      });
-      return this;
-  }
-
-  function __watcher(id) {
-      var el = $(this);
-      var w = el.data(id);
-
-      if (w.prop) {
-          var newVal = el.css(w.prop);
-          if (w.val != newVal)
-              w.val = newVal;
-          else
-              return;
-      }
-      if (w.func) {
-          var _t = this;
-          w.func.call(_t)
-      }
-  }
-
-})(jQuery);

From f46e2c4f7f097661fd8ba422fabf541ff89df39c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 3 Jul 2018 12:21:38 -0700
Subject: [PATCH 63/95] Minor code refactor to remove method

---
 app/assets/javascripts/bp_class_tree.js.erb   | 18 ++++++++++++++++++
 .../javascripts/bp_ontology_viewer.js.erb     |  1 -
 app/assets/javascripts/bp_visualize.js.erb    | 19 -------------------
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/bp_class_tree.js.erb b/app/assets/javascripts/bp_class_tree.js.erb
index a828056f3f..fdb840a55a 100644
--- a/app/assets/javascripts/bp_class_tree.js.erb
+++ b/app/assets/javascripts/bp_class_tree.js.erb
@@ -155,12 +155,30 @@ function nodeClicked(node_id) {
 }
 
 // Keep trying to put the tree view content in place (looks for #sd_content)
+var classesPaneSplitter;
 function placeTreeView(treeHTML) {
   if (jQuery("#sd_content").length == 0) {
     setTimeout(function(){placeTreeView(treeHTML)}, 500);
   } else {
     document.getElementById("sd_content").innerHTML = treeHTML;
     initClassTree();
+
+    classesPaneSplitter = Split(['div#bd_content .sidebar', 'div#bd_content .cls-info-container'], {
+      elementStyle: function (dimension, size, gutterSize) {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+      gutterStyle: function (dimension, gutterSize) {
+        return {
+          'flex-basis':  gutterSize + 'px'
+        }
+      },
+      gutterSize: 10,
+      direction: "horizontal",
+      sizes: [25, 75],
+      cursor: "col-resize"
+    })
   }
 }
 
diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
index 153a246589..0d116d30b4 100644
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ b/app/assets/javascripts/bp_ontology_viewer.js.erb
@@ -380,7 +380,6 @@ jQuery.bioportal.OntologyPage = function(id, location_path, error_string, page_n
   jQuery.bioportal.ont_pages = [];
 
   jQuery.bioportal.ont_pages["classes"] = new jQuery.bioportal.OntologyPage("classes", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=classes&ajax=true" + jQuery(document).data().bp.ont_viewer.concept_param, "Problem retrieving classes", jQuery(document).data().bp.ont_viewer.ontology_name + jQuery(document).data().bp.ont_viewer.concept_name_title + " - Classes", "Classes", function() {
-    jQuery(document).data().bp.classesTab.classes_init();
     jQuery(document).data().bp.classesTab.search_box_init();
     setupNotesFacebox();
   });
diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
index 6fb4af2bc5..2b4d595573 100644
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ b/app/assets/javascripts/bp_visualize.js.erb
@@ -80,25 +80,6 @@
     return obsolete_prefix + row0_markup + matchType + obsolete_suffix;
   }
 
-  jQuery(document).data().bp.classesTab.classes_init = function(){
-    Split(['div#bd_content .sidebar', 'div#bd_content .cls-info-container'], {
-      elementStyle: function (dimension, size, gutterSize) {
-        return {
-          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
-        }
-      },
-      gutterStyle: function (dimension, gutterSize) {
-        return {
-          'flex-basis':  gutterSize + 'px'
-        }
-      },
-      gutterSize: 10,
-      direction: "horizontal",
-      sizes: [25, 75],
-      cursor: "col-resize"
-    })
-  }
-
   // The tab system
   jQuery(".tab").live("click", function(){
     var tabId = jQuery(this).children("a:first").attr("href").replace("#", "");

From f7122be3d364a26309ce18b888e65d09aa09b66d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 3 Jul 2018 16:49:21 -0700
Subject: [PATCH 64/95] Improve appearance of sidebar components

---
 app/assets/javascripts/bp_class_tree.js.erb |  2 +-
 app/assets/javascripts/bp_visualize.js.erb  |  1 -
 app/assets/stylesheets/bioportal.scss       |  5 -----
 app/assets/stylesheets/ontologies.scss      |  7 +++++++
 app/views/ontologies/visualize.html.haml    | 19 +++++++++++--------
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/bp_class_tree.js.erb b/app/assets/javascripts/bp_class_tree.js.erb
index fdb840a55a..f0a8c38663 100644
--- a/app/assets/javascripts/bp_class_tree.js.erb
+++ b/app/assets/javascripts/bp_class_tree.js.erb
@@ -176,7 +176,7 @@ function placeTreeView(treeHTML) {
       },
       gutterSize: 10,
       direction: "horizontal",
-      sizes: [25, 75],
+      sizes: [30, 70],
       cursor: "col-resize"
     })
   }
diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
index 2b4d595573..be662af388 100644
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ b/app/assets/javascripts/bp_visualize.js.erb
@@ -131,7 +131,6 @@
     if (jQuery("#search_box").bioportal_autocomplete) {
       jQuery("#search_box").bioportal_autocomplete("/search/json_search/"+jQuery(document).data().bp.ontology.acronym, {
         extraParams: { objecttypes: "class" },
-        width: "400px",
         selectFirst: true,
         lineSeparator: "~!~",
         matchSubset: 0,
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index af1a8982e6..bd8bb8da85 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -632,11 +632,6 @@ tr.mainresource td {
   background: #e2ebf0;
 }
 
-#qsearch{
-  padding:3px;
-  border-bottom:1px solid #C1DAD7;
-}
-
 .home_button{
     background-image: image-url('layout/home_button.png');
     height:37px;
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 9fbd7f2945..96ba2971e5 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -104,6 +104,13 @@ div#bd_content .sidebar {
   white-space: nowrap;
 }
 
+input#search_box:focus {
+  border-color: #ced4da;
+  box-shadow: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+}
+
 /* Properties pane */
 
 #propTree a {
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 8908691e6f..cdac7f3bc3 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -1,14 +1,17 @@
 - unless @error
   - @title = "#{@ontology.name} - #{@concept.prefLabel}"
 
-  .tooltip
-  #bd_content.bd_content.explore
-    .sidebar
-      #qsearch
-        Jump To:
-        %input#search_box{:size => "30", :type => "textbox"}/
-        %input#jump_to_concept_id{:type => "hidden"}/
-      #sd_content
+  %div.tooltip
+  %div#bd_content.bd_content.explore
+    %div.sidebar.d-flex.flex-column.pr-2
+      -# Search box for class tree
+      %div#qsearch.input-group.pb-2
+        %div.input-group-prepend
+          %span.input-group-text Jump to:
+        = text_field_tag("search_box", nil, class: "form-control", aria: {label: "Jump to:"})
+        = hidden_field_tag("jump_to_concept_id")
+      -# Class tree
+      %div#sd_content
         = loading_spinner(true)
 
     - if @concept.id.eql?("bp_fake_root")

From 565af317bc404032145d57205bffceabc75de7af Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 9 Jul 2018 11:51:35 -0700
Subject: [PATCH 65/95] Use rounded corners on right of search box

---
 app/views/ontologies/visualize.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index cdac7f3bc3..0c78e5b5f3 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -8,7 +8,7 @@
       %div#qsearch.input-group.pb-2
         %div.input-group-prepend
           %span.input-group-text Jump to:
-        = text_field_tag("search_box", nil, class: "form-control", aria: {label: "Jump to:"})
+        = text_field_tag("search_box", nil, class: "form-control rounded-right", aria: {label: "Jump to:"})
         = hidden_field_tag("jump_to_concept_id")
       -# Class tree
       %div#sd_content

From c16e57b3d2da8fe2520f075454f43a1a37f8fd46 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 9 Jul 2018 12:07:21 -0700
Subject: [PATCH 66/95] Move CSS specific to classes display to ontologies.scss

---
 app/assets/stylesheets/bioportal.scss  | 23 -----------------
 app/assets/stylesheets/ontologies.scss | 34 +++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index bd8bb8da85..a3e92d3748 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -242,29 +242,6 @@ h1 a:hover, h2 a:hover {
   border-left:1px solid #ccc;
 }
 
-#bd .bd_content .cls-info-container .tabs {
-  height:24px;
-  float:left;
-}
-#bd .bd_content .cls-info-container .tabs ul {
-  margin:0;
-  float:left;
-}
-#bd .bd_content .cls-info-container .tabs li {
-  margin:0;
-}
-#bd .bd_content .cls-info-container .tabs li.first {
-  padding-left:0;
-}
-#bd .bd_content .cls-info-container .tabs a {
-  padding:5px 15px 0 15px;
-}
-#bd .bd_content .cls-info-container #contents {
-  float:left;
-  width:100%;
-  overflow: auto;
-}
-
 #footer_wrapper a {
   color: #F5FAFA;
 }
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 96ba2971e5..34ed0d00b2 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -94,23 +94,51 @@ $ont-metadata-bg-color: #e2ebf0;
 
 /* Classes pane */
 
-div#bd_content {
+#bd_content {
   display: flex;
   flex-direction: row;
 }
 
-div#bd_content .sidebar {
+#bd_content .sidebar {
   overflow-x: auto;
   white-space: nowrap;
 }
 
-input#search_box:focus {
+#search_box:focus {
   border-color: #ced4da;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
 }
 
+#bd .bd_content .cls-info-container .tabs {
+  height: 24px;
+  float: left;
+}
+
+#bd .bd_content .cls-info-container .tabs ul {
+  margin: 0;
+  float: left;
+}
+
+#bd .bd_content .cls-info-container .tabs li {
+  margin: 0;
+}
+
+#bd .bd_content .cls-info-container .tabs li.first {
+  padding-left: 0;
+}
+
+#bd .bd_content .cls-info-container .tabs a {
+  padding:5px 15px 0 15px;
+}
+
+#bd .bd_content .cls-info-container #contents {
+  float: left;
+  width: 100%;
+  overflow: auto;
+}
+
 /* Properties pane */
 
 #propTree a {

From eab14252dd62a1bc52cac69da04903b583117b4b Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 9 Jul 2018 12:31:53 -0700
Subject: [PATCH 67/95] Middle vertical alignment for tab links

---
 app/assets/stylesheets/ontologies.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 34ed0d00b2..5da72e1582 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -130,7 +130,7 @@ $ont-metadata-bg-color: #e2ebf0;
 }
 
 #bd .bd_content .cls-info-container .tabs a {
-  padding:5px 15px 0 15px;
+  padding: 0 15px 0 15px;
 }
 
 #bd .bd_content .cls-info-container #contents {

From ba8f9a98af437e7a8e944d0dc4d20d291ea36107 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 9 Jul 2018 14:09:58 -0700
Subject: [PATCH 68/95] Adjust padding around class details

---
 app/views/concepts/_details.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/concepts/_details.html.haml b/app/views/concepts/_details.html.haml
index 9ffbed3dd6..3be9f6bfff 100644
--- a/app/views/concepts/_details.html.haml
+++ b/app/views/concepts/_details.html.haml
@@ -1,5 +1,6 @@
 - require 'cgi'
-%div{:style => "padding: 1%"}
+
+%div.py-3.pl-3
   %table.minimal.concept_details{cellpadding: "0", cellspacing: "0", width: "100%"}
     %tr
       %td{nowrap: ""} Preferred Name

From 8dc8696920a9968fc1e43d600a6befeea35d2234 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 9 Jul 2018 14:40:56 -0700
Subject: [PATCH 69/95] Move notes CSS to separate file

---
 app/assets/stylesheets/application.css.scss |   1 +
 app/assets/stylesheets/bioportal.scss       | 368 ------------------
 app/assets/stylesheets/notes.scss           | 398 ++++++++++++++++++++
 3 files changed, 399 insertions(+), 368 deletions(-)
 create mode 100644 app/assets/stylesheets/notes.scss

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 10221ea065..dbd19ca8df 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -29,6 +29,7 @@
 @import "bioportal";
 @import "home";
 @import "mappings";
+@import "notes";
 @import "ontologies";
 @import "recommender";
 @import "resource_index";
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index a3e92d3748..fc299bc325 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -728,374 +728,6 @@ li.ac_over > .obsolete_class {
   font-style: italic;
 }
 
-
-/**
- *
- *
- *  NOTES
- *
- *
-**/
-
-/* Create new note */
-.create_note_container {
-  padding: .5em;
-  width: 750px;
-}
-.create_note_buttons {
-  padding: .5em;
-  margin-bottom: -1px;
-}
-.create_note_submit {
-  cursor: pointer;
-  color: #234979;
-  background: white;
-  border: 1px solid #C1DAD7;
-  margin: 5px 5px 5px 0;
-  padding: 5px 7px;
-  text-align: center;
-  width: 75px;
-  text-decoration: none;
-}
-.create_note_submit:hover {
-  background: #234979;
-  color: white;
-}
-.submit_container {
-  float: left;
-}
-.note_buttons {
-  background: #E2EBF0;
-  color: #234979;
-  border-top: 1px solid #C1DAD7;
-  border-left: 1px solid #C1DAD7;
-  border-right: 1px solid #C1DAD7;
-  padding: .5em;
-}
-.note_buttons:hover {
-  background: none;
-  cursor: pointer;
-}
-.create_note_options {
-  background: #E2EBF0;
-  padding: .5em;
-  border: 1px solid #C1DAD7;
-}
-.create_note_selected {
-  background: white;
-}
-.note_options {
-  display: none;
-}
-.create_note_inputs {
-  width: 350px;
-  margin-bottom: .5em;
-}
-textarea.create_note_inputs {
-  height: 225px;
-}
-.note_options_float {
-  float: right;
-  padding: 0 1em 0
-  .5em;
-}
-.new_note {
-  background: #F5FAFA;
-}
-.error_message {
-  color: red;
-  font-weight: bold;
-}
-.error_input {
-  color: red;
-  font-style: italic;
-}
-.required {
-  color: red;
-}
-.add_note_legend {
-  color: red;
-  margin: -5px 0 5px;
-}
-.add_reply_button {
-  cursor: pointer;
-  color: #234979;
-  background: white;
-  border: 1px solid #C1DAD7;
-  margin: 5px 5px 5px 0;
-  padding: 5px 7px;
-  text-align: center;
-  width: 125px;
-  text-decoration: none;
-}
-.add_reply_button:hover {
-  background: #234979;
-  color: white;
-}
-.add_reply_button_busy {
-  background-color: gray;
-  color: darkGray;
-  border: 1px solid darkGray;
-}
-
-.note_title {
-  font-size: 16pt;
-}
-.note_status {
-  padding: 0 0 1em;
-}
-.status, .note_author {
-  font-weight: bold;
-  color: #646464;
-}
-.note_body {
-  font-size: 12pt;
-}
-.discussion h3 {
-  font-size: 18px;
-}
-.discussion .reply {
-  padding: 1em 0 .5em;
-}
-.discussion .reply .reply {
-  padding-left: 3.5em;
-}
-.reply_author {
-  color: #234979;
-}
-.reply_body {
-  font-size: 12pt;
-}
-textarea.reply_body {
-  padding: 3px;
-}
-.reply:first-child {
-  padding-top: 0 !important;
-}
-.comment_subject {
-  margin: 5px 0;
-  padding: 1px;
-}
-.proposal_container {
-  padding: 12px 0;
-}
-.proposal_container input {
-  padding: 3px;
-  margin: 6px;
-  width: 170px;
-}
-
-
-/* Extra information (proposals) */
-.proposal_info {
-  border-bottom: 1px solid #A9A9A9;
-  border-left: 1px solid #A9A9A9;
-  border-right: 1px solid #A9A9A9;
-  margin: 0 1em;
-  padding: .7em 1em 0.5em;
-}
-
-.proposal {
-  width: 90%;
-  padding-top: .5em;
-  font-size: 12pt;
-}
-
-.proposal th, .proposal td, .proposal tr {
-  border: none !important;
-  background-color: inherit !important;
-}
-
-.proposal th, .proposal td, .proposal tr {
-  padding: .2em .5em;
-  vertical-align: top;
-}
-
-.proposal th {
-  color: #A9A9A9 !important;
-  font-weight: bold;
-  text-align: left !important;
-  width: 25%;
-}
-
-.proposal_root {
-  background-color: #F2F8FF;
-  margin: -0.7em 0 0.5em;
-  padding: 0.5em;
-}
-
-/* Reply box */
-.spacer {
-  padding: .8em 0 0 0;
-  margin-left: .8em;
-}
-.response_spacer {
-  padding: .8em 0 0 0;
-  margin-left: .8em;
-  border-left: dotted thin #D3D3D3;
-}
-.create_reply {
-  padding: 0.5em 0.5em 1em 0.8em;
-}
-.reply_compose {
-  width: 770px;
-  padding: 1em;
-  display: none;
-}
-
-/* Responses */
-.collapsible {
-  border-left: dotted thin #D3D3D3;
-  margin-left: .8em;
-}
-.note_corner {
-  border-bottom: dotted thin #D3D3D3;
-  bottom: .8em;
-  float: left;
-  margin-bottom: -3em;
-  position: relative;
-  right: 2.3em;
-  width: 2.3em;
-}
-.response_container {
-  margin-left: .8em;
-  padding-left: 1.5em;
-}
-.response {
-  /*padding: .8em 0 0 0;*/
-}
-.response_children .response {
-}
-.response_head {
-  border-top: dotted thin #D3D3D3;
-  border-right: dotted thin #D3D3D3;
-  border-left: dotted thin #D3D3D3;
-  box-shadow: -1px 2px 5px grey;
-  -moz-box-shadow: -1px 2px 5px grey;
-  -webkit-box-shadow: -1px 2px 5px grey;
-  background: #eeeeee;
-  padding: .4em .5em;
-  font-size: 9pt;
-  color: #646464;
-  cursor: pointer;
-}
-.response_count {
-  float: right;
-  font-style: italic;
-}
-.response .collapsed {
-  border-bottom: dotted thin #D3D3D3;
-}
-.response_collapse {
-}
-.response_head a {
-  color: #646464;
-}
-.response_head a:hover {
-  color: #000000;
-  background: #a9a9a9;
-}
-.response_title {
-  font-weight: bold;
-  font-size: 12pt;
-}
-.response_author {
-}
-.response_date {
-}
-.response_body {
-  padding: 1em 1em 0;
-  font-size: 10pt;
-}
-.responses_head {
-  margin-bottom: 1em;
-}
-.create_reply_container {
-  padding: .5em .3em;
-}
-.reply_form_container {
-  background-color: #F5FAFA;
-  padding: 10px 0 10px 10px;
-  width: 770px;
-  margin-right: 1em;
-}
-.cancel_reply {
-  float: right;
-  margin: 0.5em -.3em 0 0;
-}
-
-.section_head {
-  font-size: 160%;
-  margin-bottom: 1em;
-}
-
-#top_level_reply {
-  margin-top: 1em;
-}
-
-.notes_list_container {
-  width: 90%;
-  padding: 1em;
-}
-
-/* Datatables */
-.notes_list_table {
-  clear: both;
-}
-.notes_list_container .dataTables_length {
-  float: left;
-  padding: 1em 0;
-}
-.notes_list_container .dataTables_filter {
-  float: right;
-  padding: 1em 0;
-}
-.notes_list_container .dataTables_filter input {
-  width: 200px;
-}
-.notes_list_container .dataTables_info {
-  text-align: center;
-  padding: .5em;
-}
-.notes_list_container .dataTables_paginate {
-  text-align: center;
-}
-.notes_list_container .dataTables_paginate .paginate_button {
-  text-decoration: underline;
-  cursor: pointer;
-  padding: 0 .5em;
-}
-.notes_list_container .dataTables_paginate .paginate_button:hover {
-  text-decoration: none;
-}
-.notes_list_container .first, .notes_list_container .previous, .notes_list_container .next, .notes_list_container .last {
-  padding: 0 .5em;
-}
-.paginate_active {
-  font-weight: bold;
-}
-
-.highlighted_row {
-  background-color: #234979;
-  border-top: medium solid #234979 !important;
-  border-right: medium solid #234979 !important;
-  border-left: medium solid #234979 !important;
-  border-bottom: none !important;
-  font-weight: bold;
-  color: white !important;
-}
-.highlighted_row a {
-  color: white !important;
-}
-.highlighted_border {
-  border-right: medium solid #234979 !important;
-  border-bottom: medium solid #234979 !important;
-  border-left: medium solid #234979 !important;
-}
-.notes_delete {
-  display: none;
-}
-
 /********************
 ## TREE VIEW
 *********************/
diff --git a/app/assets/stylesheets/notes.scss b/app/assets/stylesheets/notes.scss
new file mode 100644
index 0000000000..cc4b842063
--- /dev/null
+++ b/app/assets/stylesheets/notes.scss
@@ -0,0 +1,398 @@
+.create_note_container {
+  padding: .5em;
+  width: 750px;
+}
+
+.create_note_buttons {
+  padding: .5em;
+  margin-bottom: -1px;
+}
+
+.create_note_submit {
+  cursor: pointer;
+  color: #234979;
+  background: white;
+  border: 1px solid #C1DAD7;
+  margin: 5px 5px 5px 0;
+  padding: 5px 7px;
+  text-align: center;
+  width: 75px;
+  text-decoration: none;
+}
+
+.create_note_submit:hover {
+  background: #234979;
+  color: white;
+}
+
+.submit_container {
+  float: left;
+}
+
+.note_buttons {
+  background: #E2EBF0;
+  color: #234979;
+  border-top: 1px solid #C1DAD7;
+  border-left: 1px solid #C1DAD7;
+  border-right: 1px solid #C1DAD7;
+  padding: .5em;
+}
+
+.note_buttons:hover {
+  background: none;
+  cursor: pointer;
+}
+
+.create_note_options {
+  background: #E2EBF0;
+  padding: .5em;
+  border: 1px solid #C1DAD7;
+}
+
+.create_note_selected {
+  background: white;
+}
+
+.note_options {
+  display: none;
+}
+
+.create_note_inputs {
+  width: 350px;
+  margin-bottom: .5em;
+}
+
+textarea.create_note_inputs {
+  height: 225px;
+}
+
+.note_options_float {
+  float: right;
+  padding: 0 1em 0
+  .5em;
+}
+
+.new_note {
+  background: #F5FAFA;
+}
+
+.error_message {
+  color: red;
+  font-weight: bold;
+}
+
+.error_input {
+  color: red;
+  font-style: italic;
+}
+
+.required {
+  color: red;
+}
+
+.add_note_legend {
+  color: red;
+  margin: -5px 0 5px;
+}
+
+.add_reply_button {
+  cursor: pointer;
+  color: #234979;
+  background: white;
+  border: 1px solid #C1DAD7;
+  margin: 5px 5px 5px 0;
+  padding: 5px 7px;
+  text-align: center;
+  width: 125px;
+  text-decoration: none;
+}
+
+.add_reply_button:hover {
+  background: #234979;
+  color: white;
+}
+
+.add_reply_button_busy {
+  background-color: gray;
+  color: darkGray;
+  border: 1px solid darkGray;
+}
+
+.note_title {
+  font-size: 16pt;
+}
+
+.note_status {
+  padding: 0 0 1em;
+}
+
+.status, .note_author {
+  font-weight: bold;
+  color: #646464;
+}
+
+.note_body {
+  font-size: 12pt;
+}
+
+.discussion h3 {
+  font-size: 18px;
+}
+
+.discussion .reply {
+  padding: 1em 0 .5em;
+}
+
+.discussion .reply .reply {
+  padding-left: 3.5em;
+}
+
+.reply_author {
+  color: #234979;
+}
+
+.reply_body {
+  font-size: 12pt;
+}
+
+textarea.reply_body {
+  padding: 3px;
+}
+
+.reply:first-child {
+  padding-top: 0 !important;
+}
+
+.comment_subject {
+  margin: 5px 0;
+  padding: 1px;
+}
+
+.proposal_container {
+  padding: 12px 0;
+}
+
+.proposal_container input {
+  padding: 3px;
+  margin: 6px;
+  width: 170px;
+}
+
+/* Extra information (proposals) */
+.proposal_info {
+  border-bottom: 1px solid #A9A9A9;
+  border-left: 1px solid #A9A9A9;
+  border-right: 1px solid #A9A9A9;
+  margin: 0 1em;
+  padding: .7em 1em 0.5em;
+}
+
+.proposal {
+  width: 90%;
+  padding-top: .5em;
+  font-size: 12pt;
+}
+
+.proposal th, .proposal td, .proposal tr {
+  border: none !important;
+  background-color: inherit !important;
+}
+
+.proposal th, .proposal td, .proposal tr {
+  padding: .2em .5em;
+  vertical-align: top;
+}
+
+.proposal th {
+  color: #A9A9A9 !important;
+  font-weight: bold;
+  text-align: left !important;
+  width: 25%;
+}
+
+.proposal_root {
+  background-color: #F2F8FF;
+  margin: -0.7em 0 0.5em;
+  padding: 0.5em;
+}
+
+/* Reply box */
+.spacer {
+  padding: .8em 0 0 0;
+  margin-left: .8em;
+}
+
+.response_spacer {
+  padding: .8em 0 0 0;
+  margin-left: .8em;
+  border-left: dotted thin #D3D3D3;
+}
+
+.create_reply {
+  padding: 0.5em 0.5em 1em 0.8em;
+}
+
+.reply_compose {
+  width: 770px;
+  padding: 1em;
+  display: none;
+}
+
+/* Responses */
+.collapsible {
+  border-left: dotted thin #D3D3D3;
+  margin-left: .8em;
+}
+
+.note_corner {
+  border-bottom: dotted thin #D3D3D3;
+  bottom: .8em;
+  float: left;
+  margin-bottom: -3em;
+  position: relative;
+  right: 2.3em;
+  width: 2.3em;
+}
+
+.response_container {
+  margin-left: .8em;
+  padding-left: 1.5em;
+}
+
+.response {
+  /*padding: .8em 0 0 0;*/
+}
+
+.response_children .response {
+}
+
+.response_head {
+  border-top: dotted thin #D3D3D3;
+  border-right: dotted thin #D3D3D3;
+  border-left: dotted thin #D3D3D3;
+  box-shadow: -1px 2px 5px grey;
+  -moz-box-shadow: -1px 2px 5px grey;
+  -webkit-box-shadow: -1px 2px 5px grey;
+  background: #eeeeee;
+  padding: .4em .5em;
+  font-size: 9pt;
+  color: #646464;
+  cursor: pointer;
+}
+
+.response_count {
+  float: right;
+  font-style: italic;
+}
+
+.response .collapsed {
+  border-bottom: dotted thin #D3D3D3;
+}
+
+.response_collapse {
+}
+
+.response_head a {
+  color: #646464;
+}
+
+.response_head a:hover {
+  color: #000000;
+  background: #a9a9a9;
+}
+
+.response_title {
+  font-weight: bold;
+  font-size: 12pt;
+}
+
+.response_author {
+}
+
+.response_date {
+}
+
+.response_body {
+  padding: 1em 1em 0;
+  font-size: 10pt;
+}
+
+.responses_head {
+  margin-bottom: 1em;
+}
+
+.create_reply_container {
+  padding: .5em .3em;
+}
+
+.reply_form_container {
+  background-color: #F5FAFA;
+  padding: 10px 0 10px 10px;
+  width: 770px;
+  margin-right: 1em;
+}
+
+.cancel_reply {
+  float: right;
+  margin: 0.5em -.3em 0 0;
+}
+
+.section_head {
+  font-size: 160%;
+  margin-bottom: 1em;
+}
+
+#top_level_reply {
+  margin-top: 1em;
+}
+
+.notes_list_container {
+  width: 90%;
+  padding: 1em;
+}
+
+/* Datatables */
+.notes_list_table {
+  clear: both;
+}
+
+.notes_list_container .dataTables_length {
+  float: left;
+  padding: 1em 0;
+}
+
+.notes_list_container .dataTables_filter {
+  float: right;
+  padding: 1em 0;
+}
+
+.notes_list_container .dataTables_filter input {
+  width: 200px;
+}
+
+.notes_list_container .dataTables_info {
+  text-align: center;
+  padding: .5em;
+}
+
+.notes_list_container .dataTables_paginate {
+  text-align: center;
+}
+
+.notes_list_container .dataTables_paginate .paginate_button {
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0 .5em;
+}
+
+.notes_list_container .dataTables_paginate .paginate_button:hover {
+  text-decoration: none;
+}
+
+.notes_list_container .first, .notes_list_container .previous, .notes_list_container .next, .notes_list_container .last {
+  padding: 0 .5em;
+}
+
+.notes_delete {
+  display: none;
+}

From a0dc929aed55dc41b8eac72f7ab5395c23edda7a Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 10 Jul 2018 15:59:41 -0700
Subject: [PATCH 70/95] Clean up appearance of widgets pane

---
 app/assets/stylesheets/ontologies.scss  |  23 ++
 app/views/ontologies/_widgets.html.haml | 427 +++++++++++-------------
 2 files changed, 225 insertions(+), 225 deletions(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 5da72e1582..2e1b1f5b5e 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -1,4 +1,5 @@
 $ont-metadata-bg-color: #e2ebf0;
+$widget-table-border-color: #EFEFEF;
 
 .ontologies.show .gutter {
   background-color: rgba(0, 0, 0, 0.03);
@@ -155,3 +156,25 @@ $ont-metadata-bg-color: #e2ebf0;
   overflow-x: auto;
   white-space: nowrap;
 }
+
+/* Widgets pane */
+
+#widget_table {
+  td {
+    border: 1px solid $widget-table-border-color;
+    padding: 10px;
+    vertical-align: top;
+  }
+
+  th {
+    border: 1px solid $widget-table-border-color;
+    font-size: 15px;
+    font-weight: bold;
+    background-color: #f5fafa;
+    padding: 5px;
+  }
+}
+
+#widgets_content .card {
+  border: none;
+}
diff --git a/app/views/ontologies/_widgets.html.haml b/app/views/ontologies/_widgets.html.haml
index df2b12dcf5..6e47b3e677 100644
--- a/app/views/ontologies/_widgets.html.haml
+++ b/app/views/ontologies/_widgets.html.haml
@@ -7,248 +7,225 @@
     %p
       Widgets are only available for ontologies stored in #{$SITE}.
 - else
-  :css
-    #widget_table td {
-      border: 1px solid #EFEFEF;
-      padding: 10px;
-    }
-    #widget_table th {
-      font-size: 15px;
-      font-weight: bold;
-      background-color: #f5fafa;
-      padding: 5px;
-    }
-    .getcode {
-      font-weight: bold;
-      font-size: 15px;
-      background-color: #f5fafa;
-      border: 1px solid #AAAAAA;
-      padding: 3px 10px 3px 10px;
-      text-decoration: none;
-    }
-  #widgets_content{:style => "padding: 1em;"}
-    %div
-      %h1 Adding #{$ORG} Widgets for #{@ontology.name} to Your Site
-      %h2 Step 1: Select a widget
-      %hr/
-      %div{:style => "margin: auto;"}
-        %table#widget_table{:width => "80%"}
-          %tr
-            %th
-              Widget
-            %th{:style => "border-left:1px solid #EFEFEF;"}
-              Widget Demonstration
-          %tr
-            %td
-              %h2 Jump To
-              %h4
-                Type a class in #{@ontology.name} and jump to it in #{$SITE}
-              %br/
-              %a.thickbox.getcode{:href => "#{get_code_prefix}&inlineId=jump".html_safe} Get Code
-            %td
-              #bp_quick_jump
-              :javascript
-                var BP_SEARCH_SERVER = "#{$UI_URL}";
-                var BP_SITE = "#{$SITE}";
-                var BP_ORG = "#{$ORG}";
-                var BP_ontology_id = "#{@ontology.acronym}";
-              = javascript_include_tag "/javascripts/widgets/quick_jump.js"
-              #jump{:style => "display:none;"}
-                %h2 Step 2: Follow the Instructions
-                %hr/
-                .enable-lists
+  #widgets_content
+    %h5.pb-3 Add #{$ORG} Web Widgets to your site for #{@ontology.acronym}
+    %table#widget_table{width: "100%"}
+      %tr
+        %th
+          Widget type
+        %th
+          Widget demonstration
+      %tr
+        %td
+          %div.card
+            %div.card-body
+              %h5.card-title Jump To
+              %p.card-text Type a class name from #{@ontology.acronym} and jump to it in #{$SITE}
+              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=jump".html_safe} Get code
+        %td
+          #bp_quick_jump
+          :javascript
+            var BP_SEARCH_SERVER = "#{$UI_URL}";
+            var BP_SITE = "#{$SITE}";
+            var BP_ORG = "#{$ORG}";
+            var BP_ontology_id = "#{@ontology.acronym}";
+          = javascript_include_tag "/javascripts/widgets/quick_jump.js"
+          #jump{:style => "display:none;"}
+            %h2 Step 2: Follow the Instructions
+            %hr/
+            .enable-lists
+              %ul
+                %li
+                  Download the
+                  %a.external.free{:href => "/javascripts/widgets/quick_jump.js", :rel => "nofollow", :title => "/javascripts/widgets/quick_jump.js"}
+                    %b quick_jump.js file
+                  and put it on your server
+                %li
+                  Copy the code below and paste it to your HTML page
+                %li
+                  %b Note:
+                  If you would like to use Quick Jump across multiple ontologies:
                   %ul
                     %li
-                      Download the
-                      %a.external.free{:href => "/javascripts/widgets/quick_jump.js", :rel => "nofollow", :title => "/javascripts/widgets/quick_jump.js"}
-                        %b quick_jump.js file
-                      and put it on your server
+                      You can enter a comma-separated list of ontology ids:
+                      %br/
+                      var BP_ontology_id = "NCIt,SNOMEDCT";
                     %li
-                      Copy the code below and paste it to your HTML page
+                      You can set the variable to 'all' to search all ontologies in #{$SITE}:
+                      %br/
+                      var BP_ontology_id = "all";
+                %li
+                  To include definitions in the Jump To drop-down, add the following variable in Javascript:
+                  %br/
+                  %pre var BP_include_definitions = true;
+                %li
+                  In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file)
+                  %ul
+                    %li
+                      For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use:
+                      %pre
+                        = preserve do
+                          :escaped
+                            <div id="bp_quick_jump"></div>
+                            <script type="text/javascript">
+                                var BP_ontology_id = "#{@ontology.acronym}";</script>
+                            <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
+            %p
+              For more help visit
+              %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+      %tr
+        %td
+          %div.card
+            %div.card-body
+              %h5.card-title Form Autocomplete
+              %p.card-text Fill your form fields with classes from #{@ontology.acronym}
+              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=form".html_safe} Get code
+        %td
+          = javascript_include_tag "/javascripts/widgets/form_complete.js"
+          Example 1 (start typing the class name to get its full URI)
+          %br/
+          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-uri", :name => "a", :size => "100", :type => "text"}/
+          %br/
+          Example 2 (get the ID for a class)
+          %br/
+          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-shortid", :name => "b", :size => "100", :type => "text"}/
+          %br/
+          Example 3 (get the preferred name for a class)
+          %br/
+          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-name", :name => "c", :size => "100", :type => "text"}/
+          #form{:style => "display:none;"}
+            .enable-lists
+              %h2 Step 2: Follow the Instructions
+              %hr/
+              %ul
+                %li
+                  Download the
+                  %a.external.free{:href => "/javascripts/widgets/form_complete.js", :rel => "nofollow", :title => "/javascripts/widgets/form_complete.js"}
+                    %b form_complete.js file
+                  and put it on your server.
+                %li
+                  In the header for the page where you want the form field, include the
+                  %b form_complete.js
+                  file.
+                %li
+                  On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format:
+                  %code bp_form_complete-{ontology_id_list}-{value}
+                  %ul
                     %li
-                      %b Note:
-                      If you would like to use Quick Jump across multiple ontologies:
+                      For example,
+                      %code bp_form_complete-NCIT-uri
+                      will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
                       %ul
                         %li
-                          You can enter a comma-separated list of ontology ids:
+                          %b Note:
+                          In addition to single ontology ids, you can use a list:
                           %br/
-                          var BP_ontology_id = "NCIt,SNOMEDCT";
+                          %code bp_form_complete-NCIT,NCBITAXON-uri
                         %li
-                          You can set the variable to 'all' to search all ontologies in #{$SITE}:
+                          %b OR
+                          use 'all' to search across all #{$SITE} ontologies:
                           %br/
-                          var BP_ontology_id = "all";
+                          %code bp_form_complete-all-uri
+                        %li The autocomplete widget accesses ontology content from the latest version of the ontology.
                     %li
-                      To include definitions in the Jump To drop-down, add the following variable in Javascript:
-                      %br/
-                      %pre var BP_include_definitions = true;
-                    %li
-                      In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file)
+                      You can use the following parameters to select which value will be placed into the user-visible input field:
                       %ul
                         %li
-                          For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use:
-                          %pre
-                            = preserve do
-                              :escaped
-                                <div id="bp_quick_jump"></div>
-                                <script type="text/javascript">
-                                    var BP_ontology_id = "#{@ontology.acronym}";</script>
-                                <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
-                %p
-                  For more help visit
-                  %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-          %tr
-            %td
-              %h2 Form Autocomplete
-              %h4
-                Fill in a field in your form with a class from #{@ontology.name}
-              %br/
-              %a.thickbox.getcode{:href => "#{get_code_prefix}&inlineId=form".html_safe} Get Code
-            %td
-              = javascript_include_tag "/javascripts/widgets/form_complete.js"
-              Example 1 (start typing the class name to get its full URI)
-              %br/
-              %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-uri", :name => "a", :size => "100", :type => "text"}/
-              %br/
-              Example 2 (get the ID for a class)
-              %br/
-              %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-shortid", :name => "b", :size => "100", :type => "text"}/
-              %br/
-              Example 3 (get the preferred name for a class)
-              %br/
-              %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-name", :name => "c", :size => "100", :type => "text"}/
-              #form{:style => "display:none;"}
-                .enable-lists
-                  %h2 Step 2: Follow the Instructions
-                  %hr/
-                  %ul
-                    %li
-                      Download the
-                      %a.external.free{:href => "/javascripts/widgets/form_complete.js", :rel => "nofollow", :title => "/javascripts/widgets/form_complete.js"}
-                        %b form_complete.js file
-                      and put it on your server.
-                    %li
-                      In the header for the page where you want the form field, include the
-                      %b form_complete.js
-                      file.
-                    %li
-                      On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format:
-                      %code bp_form_complete-{ontology_id_list}-{value}
-                      %ul
+                          %code uri
+                          put the complete URI of the class (e.g.,
+                          = succeed ")" do
+                            %a.external.free{:href => @ontology.explore.classes["collection"].first.id, :rel => "nofollow", :title => "/visualize/39478/Common_Neoplasm"}
+                              = @ontology.explore.classes["collection"].first.id
                         %li
-                          For example,
-                          %code bp_form_complete-NCIT-uri
-                          will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
-                          %ul
-                            %li
-                              %b Note:
-                              In addition to single ontology ids, you can use a list:
-                              %br/
-                              %code bp_form_complete-NCIT,NCBITAXON-uri
-                            %li
-                              %b OR
-                              use 'all' to search across all #{$SITE} ontologies:
-                              %br/
-                              %code bp_form_complete-all-uri
-                            %li The autocomplete widget accesses ontology content from the latest version of the ontology.
+                          %code shortid
+                          put the short id of the class, as used in #{$SITE} (e.g., "Common_Neoplasm");
                         %li
-                          You can use the following parameters to select which value will be placed into the user-visible input field:
-                          %ul
-                            %li
-                              %code uri
-                              put the complete URI of the class (e.g.,
-                              = succeed ")" do
-                                %a.external.free{:href => @ontology.explore.classes["collection"].first.id, :rel => "nofollow", :title => "/visualize/39478/Common_Neoplasm"}
-                                  = @ontology.explore.classes["collection"].first.id
-                            %li
-                              %code shortid
-                              put the short id of the class, as used in #{$SITE} (e.g., "Common_Neoplasm");
-                            %li
-                              %code name
-                              put the preferred name of the class (e.g., "Common Neoplasm");
-                    %li
-                      In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a class from the list. For example, if you create a field with this code:
-                      %ul
-                      %pre= h '<input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>'
-                  The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute):
+                          %code name
+                          put the preferred name of the class (e.g., "Common Neoplasm");
+                %li
+                  In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a class from the list. For example, if you create a field with this code:
                   %ul
-                    %li
-                      %pre= h '<input type="hidden" id="a_bioportal_preferred_name">'
-                    %li
-                      %pre= h '<input type="hidden" id="a_bioportal_concept_id">'
-                    %li
-                      %pre= h '<input type="hidden" id="a_bioportal_ontology_id">'
-                    %li
-                      %pre= h '<input type="hidden" id="a_bioportal_full_id">'
-                    %li
-                      Additional parameters are documented on the
-                      %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-                  %p
-                    For more help visit
-                    %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-          %tr
-            %td
-              %h2 Visualization
-              %h4
-                Display a visualization for a given class in #{@ontology.name}
-              %br/
-              %a.thickbox.getcode{:href => "#{get_code_prefix}&inlineId=vis".html_safe} Get Code
-            %td
-              #bp_vis_container
-                <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=#{$APIKEY}" width="100%" height="350"></iframe>
-              #vis{:style => "display:none;"}
-                %h2 Step 2: Follow the Instructions
-                %hr/
-                %b Copy the code below and paste it to your HTML page
-                %br/
-                %br/
-                %pre
-                  = preserve do
-                    :escaped
-                      <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=YOUR_API_KEY"></iframe>
-                %p
-                  For more help visit
+                  %pre= h '<input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>'
+              The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute):
+              %ul
+                %li
+                  %pre= h '<input type="hidden" id="a_bioportal_preferred_name">'
+                %li
+                  %pre= h '<input type="hidden" id="a_bioportal_concept_id">'
+                %li
+                  %pre= h '<input type="hidden" id="a_bioportal_ontology_id">'
+                %li
+                  %pre= h '<input type="hidden" id="a_bioportal_full_id">'
+                %li
+                  Additional parameters are documented on the
                   %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+              %p
+                For more help visit
+                %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+      %tr
+        %td
+          %div.card
+            %div.card-body
+              %h5.card-title Visualization
+              %p.card-text Display a visualization for a given class in #{@ontology.acronym}
+              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=vis".html_safe} Get code
+        %td
+          #bp_vis_container
+            <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=#{$APIKEY}" width="100%" height="350"></iframe>
+          #vis{:style => "display:none;"}
+            %h2 Step 2: Follow the Instructions
+            %hr/
+            %b Copy the code below and paste it to your HTML page
+            %br/
+            %br/
+            %pre
+              = preserve do
+                :escaped
+                  <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=YOUR_API_KEY"></iframe>
+            %p
+              For more help visit
+              %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
 
-          - unless @ontology.flat?
-            %tr
-              %td
-                %h2 NCBO Tree Widget
-                %h4
-                  Display a tree for classes in #{@ontology.name} with a search field
-                %br/
-                %a.thickbox.getcode{:href => "#{get_code_prefix}&inlineId=widget_tree_popup".html_safe} Get Code
-              %td
-                #bp_widget_tree_container
-                  <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
-                  <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
-                  <div id="widget_tree"></div>
-                  :javascript
+      - unless @ontology.flat?
+        %tr
+          %td
+            %div.card
+              %div.card-body
+                %h5.card-title Tree Widget
+                %p.card-text Display a class tree with a search field for #{@ontology.acronym}
+                %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=widget_tree_popup".html_safe} Get code
+          %td
+            #bp_widget_tree_container
+              <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
+              <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
+              <div id="widget_tree"></div>
+              :javascript
+                var widget_tree = $("#widget_tree").NCBOTree({
+                  apikey: "#{$API_KEY}",
+                  ontology: "#{@ontology.acronym}",
+                  ncboUIURL: "#{$UI_URL}",
+                  ncboAPIURL: "#{$REST_URL}"
+                });
+            #widget_tree_popup{:style => "display:none;"}
+              %h2 Step 2: Follow the Instructions
+              %hr/
+              %b Copy the code below and paste it to your HTML page
+              %br/
+              %br/
+              %pre
+                = preserve do
+                  :escaped
+                    <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
+                    <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
+                    <div id="widget_tree"></div>
                     var widget_tree = $("#widget_tree").NCBOTree({
-                      apikey: "#{$API_KEY}",
-                      ontology: "#{@ontology.acronym}",
-                      ncboUIURL: "#{$UI_URL}",
-                      ncboAPIURL: "#{$REST_URL}"
+                      apikey: "YOUR_API_KEY",
+                      ontology: "#{@ontology.acronym}"
                     });
-                #widget_tree_popup{:style => "display:none;"}
-                  %h2 Step 2: Follow the Instructions
-                  %hr/
-                  %b Copy the code below and paste it to your HTML page
-                  %br/
-                  %br/
-                  %pre
-                    = preserve do
-                      :escaped
-                        <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
-                        <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
-                        <div id="widget_tree"></div>
-                        var widget_tree = $("#widget_tree").NCBOTree({
-                          apikey: "YOUR_API_KEY",
-                          ontology: "#{@ontology.acronym}"
-                        });
 
-                  %p
-                    You can also view a
-                    %a{href: "/widgets/ncbo_tree.html"} detailed demonstration
-                  %p
-                    For more help visit
-                    %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+              %p
+                You can also view a
+                %a{href: "/widgets/ncbo_tree.html"} detailed demonstration
+              %p
+                For more help visit
+                %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki

From 09986bb5698fb3548b008d304a284d33794a7a81 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 10 Jul 2018 16:56:38 -0700
Subject: [PATCH 71/95] Fix display of icon for getting class permalink

---
 app/views/ontologies/visualize.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 0c78e5b5f3..e11fbbb49b 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -101,8 +101,8 @@
             /      %a{:href => "", :onclick => "return false;", :style => "color: gray;"} Resource Index
             - if $PURL_ENABLED
               %span{:style => "float: right;"}
-                %a#class_permalink{:href => @current_purl, :style => "padding: 0;", :title => "Get a permanent link to this class"}
-                  %img{:src => asset_path("link_icon.png"), :style => "height: 14px; padding: 5px;"}/
+                = link_to(@current_purl, id: "class_permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}) do
+                  %i{class: "fa fa-link", aria: {hidden: "true"}}
         #contents
           #details_content.tab_container= render :partial =>'/concepts/details'
           #visualization_content.tab_container.not_visible= render :partial =>'/concepts/biomixer'

From 38d856b44e85b89fa6603a75cfeb065b5d6e3e69 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 24 Jul 2018 13:12:13 -0700
Subject: [PATCH 72/95] Minor tweaks for display of class permalink icon

---
 app/assets/stylesheets/ontologies.scss   | 4 ++++
 app/views/ontologies/visualize.html.haml | 5 ++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 2e1b1f5b5e..a5cbb595c2 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -140,6 +140,10 @@ $widget-table-border-color: #EFEFEF;
   overflow: auto;
 }
 
+#mappings_top.tab {
+  border-right: 1px solid #bcc6d0;
+}
+
 /* Properties pane */
 
 #propTree a {
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index e11fbbb49b..160bd7a8a7 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -100,9 +100,8 @@
             /    %li#resource_index_top{:onclick => "return false;"}
             /      %a{:href => "", :onclick => "return false;", :style => "color: gray;"} Resource Index
             - if $PURL_ENABLED
-              %span{:style => "float: right;"}
-                = link_to(@current_purl, id: "class_permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}) do
-                  %i{class: "fa fa-link", aria: {hidden: "true"}}
+              = link_to(@current_purl, id: "class_permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}) do
+                %i{class: "fa fa-link", aria: {hidden: "true"}}
         #contents
           #details_content.tab_container= render :partial =>'/concepts/details'
           #visualization_content.tab_container.not_visible= render :partial =>'/concepts/biomixer'

From 69c3ae5c40e34176eed663f5d2097f3f130699ea Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 25 Jul 2018 11:11:20 -0700
Subject: [PATCH 73/95] Use Bootstrap modal for class permalinks

---
 app/assets/javascripts/bp_class_tree.js.erb  |  3 +--
 app/assets/javascripts/bp_visualize.js.erb   | 17 ++++++-----------
 app/views/layouts/_ontology_viewer.html.haml | 13 +++++++++++++
 app/views/ontologies/visualize.html.haml     |  8 +-------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/bp_class_tree.js.erb b/app/assets/javascripts/bp_class_tree.js.erb
index f0a8c38663..efe54f486e 100644
--- a/app/assets/javascripts/bp_class_tree.js.erb
+++ b/app/assets/javascripts/bp_class_tree.js.erb
@@ -101,11 +101,10 @@ function nodeClicked(node_id) {
   setConcept(node_id);
 
   // Deal with permalink
-  jQuery("#purl_link_container").hide();
   var concept_uri = (node_id.indexOf("http://") == 0 || node_id.indexOf(encodeURIComponent("http://")) == 0 );
   var purl_anchor = concept_uri ? "?conceptid="+node_id : "/"+node_id;
   var selectedTab = jQuery("#bd_content div.tabs li.selected a").attr("href").slice(1);
-  jQuery("#purl_input").val(jQuery(document).data().bp.ont_viewer.purl_prefix + purl_anchor);
+  jQuery("a.class-permalink").data("current-purl", jQuery(document).data().bp.ont_viewer.purl_prefix + purl_anchor);
 
   if (getCache(node_id) != null) {
     var tabData = getCache(node_id);
diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
index be662af388..772b5456f4 100644
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ b/app/assets/javascripts/bp_visualize.js.erb
@@ -165,18 +165,13 @@
       }
     }
 
-    // Javascript for the permalink box
-    jQuery("#close_permalink").live("click", function(){
-      jQuery("#purl_link_container").hide();
-    });
-
-    jQuery("#class_permalink").live("click", function(e){
-      e.preventDefault();
-      jQuery("#purl_link_container").show();
-    });
+    jQuery("#classPermalinkModal").on("shown.bs.modal", function (e) {
+      var currentPurl = jQuery("a.class-permalink").data("current-purl");
+      jQuery("#purl_input").val(currentPurl);
+    })
 
-    jQuery("#purl_input").live("focus", function(){
-      this.select();
+    jQuery("#purl_input").on("click", function () {
+      jQuery(this).select();
     });
   });
 })(window);
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 566baf5f0d..3e18e0085f 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -49,6 +49,19 @@
         = submit_tag("Create Mapping", class: "btn btn-default", id: "create_mapping_button")
         %button{type: "button", class: "btn btn-default", "data-dismiss": "modal"} Close
 
+-# Modal dialog for getting a permanent link to a class (must reside in a top-level position in the document to display properly).
+%div#classPermalinkModal{class: "modal fade", tabindex: "-1", role: "dialog", aria: {labelledby: "classPermalinkLabel", hidden: "true"}}
+  %div.modal-dialog.modal-dialog-centered.modal-lg{role: "document"}
+    %div.modal-content
+      %div.modal-header
+        %h5#classPermalinkLabel.modal-title Permanent link to this class
+        %button.close{type: "button", "data-dismiss": "modal", "aria-label": "Close"}
+          %span{"aria-hidden": "true"} &times;
+      %div.modal-body
+        = text_field_tag("purl_input", nil, class: "form-control")
+      %div.modal-footer
+        %button.btn.btn-secondary{"data-dismiss": "modal"} Close
+
 -# A header of sorts to display ontology name and subset of details.
 %div.row.pt-md-4.pb-2
   %div.col
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 160bd7a8a7..2c60e6d77c 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -100,7 +100,7 @@
             /    %li#resource_index_top{:onclick => "return false;"}
             /      %a{:href => "", :onclick => "return false;", :style => "color: gray;"} Resource Index
             - if $PURL_ENABLED
-              = link_to(@current_purl, id: "class_permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}) do
+              = link_to("#classPermalinkModal", class: "class-permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}, data: {toggle: "modal", current_purl: "#{@current_purl}"}) do
                 %i{class: "fa fa-link", aria: {hidden: "true"}}
         #contents
           #details_content.tab_container= render :partial =>'/concepts/details'
@@ -109,12 +109,6 @@
           #mappings_content.tab_container.not_visible= render :partial => '/mappings/concept_mappings'
           - unless !$RESOURCE_INDEX_DISABLED.nil? && $RESOURCE_INDEX_DISABLED
             #resource_index_content.tab_container.not_visible.resource_index_embed
-          - if $PURL_ENABLED
-            #purl_link_container.class_permalink{:style => "display: none;"}
-              %h2 Permanent link to this class
-              %a#close_permalink.ui-dialog-titlebar-close.ui-corner-all{:href => "javascript:void(0);", :role => "button", :style => "-moz-user-select: none; position: absolute; right: 5px; top: 5px;", :unselectable => "on"}
-                %span.ui-icon.ui-icon-closethick{:style => "-moz-user-select: none;", :unselectable => "on"} close
-              %input#purl_input{:style => "width: 380px;", :type => "textfield", :value => @current_purl}/
   - form_for(:search, :url => {:controller =>'search',:action=>'fetch_results'},:html=>{:id=>'search_form'}) do |f|
     %input{:name => "search[ontologies][]", :type => "hidden", :value => @ontology.acronym}/
     = hidden_field :search, :search_type, :value=>"contains"

From 56895b0a8c596b8333a2646f1426cf3091317661 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Wed, 25 Jul 2018 15:43:50 -0700
Subject: [PATCH 74/95] Make login link more prominent

---
 app/assets/stylesheets/bioportal.scss | 8 +++++++-
 app/views/layouts/_topnav.html.haml   | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index fc299bc325..245ac0d8dc 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1090,8 +1090,14 @@ button.fg-button-menu, button.fg-button {
 /************************************
  * Top navigation bar
  ************************************/
-#topNavLoginLink {
+.btn-bp-login {
   color: #C58612;
+  border-color: #C58612 !important;
+
+  &:hover {
+    color: #234979;
+    background-color: #C58612;
+  }
 }
 
 .navbar-custom {
diff --git a/app/views/layouts/_topnav.html.haml b/app/views/layouts/_topnav.html.haml
index 55581457ab..308ca2a728 100644
--- a/app/views/layouts/_topnav.html.haml
+++ b/app/views/layouts/_topnav.html.haml
@@ -24,7 +24,7 @@
     %ul.navbar-nav
       - if session[:user].nil?
         %li.nav-item
-          = link_to("Login", login_index_path(redirect: request.original_url), id: "topNavLoginLink", class: "nav-link")
+          = link_to("Login", login_index_path(redirect: request.original_url), class: "btn btn-bp-login mr-md-2")
       - else
         -# Account menu
         %li.nav-item.dropdown

From cdfefd20c5a6108a4bb0272a9d2fce6e6a9890d7 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 27 Jul 2018 16:03:10 -0700
Subject: [PATCH 75/95] Gemfile.lock update

---
 Gemfile.lock | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 12d78a8649..c6db66f538 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -62,9 +62,9 @@ GEM
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (8.4.1)
+    autoprefixer-rails (9.0.0)
       execjs
-    bootstrap (4.1.1)
+    bootstrap (4.1.3)
       autoprefixer-rails (>= 6.0.3)
       popper_js (>= 1.12.9, < 2)
       sass (>= 3.5.2)
@@ -84,7 +84,7 @@ GEM
     capistrano-rails (1.1.8)
       capistrano (~> 3.1)
       capistrano-bundler (~> 1.1)
-    chart-js-rails (0.1.4)
+    chart-js-rails (0.1.6)
       railties (> 3.1)
     coderay (1.1.2)
     coffee-rails (4.1.1)
@@ -102,12 +102,12 @@ GEM
     domain_name (0.5.20180417)
       unf (>= 0.0.5, < 1.0.0)
     erubis (2.7.0)
-    eventmachine (1.2.6)
+    eventmachine (1.2.7)
     excon (0.62.0)
     execjs (2.7.0)
-    faraday (0.15.0)
+    faraday (0.15.2)
       multipart-post (>= 1.2, < 3)
-    ffi (1.9.23)
+    ffi (1.9.25)
     flamegraph (0.9.5)
     font-awesome-sass (4.7.0)
       sass (>= 3.2)
@@ -124,8 +124,6 @@ GEM
       domain_name (~> 0.5)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    i18n-debug (1.1.1)
-      i18n (< 2)
     iconv (1.0.5)
     jquery-rails (4.3.3)
       rails-dom-testing (>= 1, < 3)
@@ -153,14 +151,14 @@ GEM
     mysql (2.9.1)
     net-scp (1.2.1)
       net-ssh (>= 2.6.5)
-    net-ssh (4.2.0)
+    net-ssh (5.0.2)
     netrc (0.11.0)
-    newrelic_rpm (5.1.0.344)
-    nokogiri (1.8.2)
+    newrelic_rpm (5.2.0.345)
+    nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
-    oj (3.6.0)
+    oj (3.6.5)
     open_uri_redirections (0.2.1)
-    popper_js (1.12.9)
+    popper_js (1.14.3)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -207,7 +205,7 @@ GEM
       netrc (~> 0.7)
     ruby_parser (3.11.0)
       sexp_processor (~> 4.9)
-    sass (3.5.6)
+    sass (3.5.7)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -222,17 +220,17 @@ GEM
       thor (~> 0.14)
     sexp_processor (4.11.0)
     spawnling (2.1.6)
-    sprockets (3.7.1)
+    sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     sprockets-rails (3.2.1)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    sshkit (1.16.0)
+    sshkit (1.17.0)
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
-    stackprof (0.2.11)
+    stackprof (0.2.12)
     thin (1.7.2)
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
@@ -242,7 +240,7 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.10)
+    uglifier (4.1.16)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
@@ -269,7 +267,6 @@ DEPENDENCIES
   haml (~> 4.0.0)
   html2haml
   i18n (~> 0)
-  i18n-debug
   iconv
   jquery-rails
   jquery-ui-rails

From 2b7863d826eb8f0e0d2469e89d68191fbdb7e155 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 30 Jul 2018 15:27:55 -0700
Subject: [PATCH 76/95] Gemfile.lock update

---
 Gemfile.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index c6db66f538..5a74164d6b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -62,7 +62,7 @@ GEM
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (9.0.0)
+    autoprefixer-rails (9.0.2)
       execjs
     bootstrap (4.1.3)
       autoprefixer-rails (>= 6.0.3)
@@ -240,7 +240,7 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.16)
+    uglifier (4.1.17)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext

From 673a9e01e147e456359431c46209122e0fd7294d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 30 Jul 2018 15:55:54 -0700
Subject: [PATCH 77/95] Add ERB extension to home.js

---
 app/assets/javascripts/{home.js => home.js.erb} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename app/assets/javascripts/{home.js => home.js.erb} (100%)

diff --git a/app/assets/javascripts/home.js b/app/assets/javascripts/home.js.erb
similarity index 100%
rename from app/assets/javascripts/home.js
rename to app/assets/javascripts/home.js.erb

From 6b2ff95c06a773ed9a246b90741b07c4a29f181c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 30 Jul 2018 16:09:54 -0700
Subject: [PATCH 78/95] Fix display of spinner icon

---
 app/assets/javascripts/home.js.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/home.js.erb b/app/assets/javascripts/home.js.erb
index 58a604c109..97f0b40137 100644
--- a/app/assets/javascripts/home.js.erb
+++ b/app/assets/javascripts/home.js.erb
@@ -19,7 +19,7 @@ function jumpToValueOntology() {
       sValue = data;
     }
     document.location="/ontologies/"+sValue;
-    jQuery.blockUI({ message: '<h1>#{image_tag("jquery.simple.tree/spinner.gif")} Loading Ontology...</h1>' });
+    jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Ontology...</h1>' });
     return;
   }
 }

From c193622d26eae7cf80bc5ea96a9b02ad1b080173 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 31 Jul 2018 10:32:05 -0700
Subject: [PATCH 79/95] Remove unused CSS

---
 app/assets/stylesheets/bioportal.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 245ac0d8dc..61fb69d3ce 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -242,10 +242,6 @@ h1 a:hover, h2 a:hover {
   border-left:1px solid #ccc;
 }
 
-#footer_wrapper a {
-  color: #F5FAFA;
-}
-
 /* Tables */
 
 .minimal {
@@ -1248,8 +1244,6 @@ p.tab_description {
   margin-bottom: 10px;
 }
 
-
-
 input.link_button, a.link_button {
   font-size: 10pt;
   padding: 0.25em 0.5em !important;
@@ -1288,14 +1282,6 @@ a.link_button > span.ui-button-text {
   width: 400px;
 }
 
-/************************************
- * Footnotes
- ************************************/
-div#footnotes_debug {
-  background-color: white;
-  padding: 1em 0;
-}
-
 /************************************
  * Truncate more/less
  ************************************/
@@ -1319,7 +1305,6 @@ a.truncated_less, a.truncated_more {
   background-color: white;
 }
 
-
 .chzn-container ul li input {
   font-style: oblique;
 }

From f8a9dfafa9ab581d621d990f6f89a0632e7ec72d Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 31 Jul 2018 11:11:41 -0700
Subject: [PATCH 80/95] Remove old YUI CSS library

---
 app/assets/stylesheets/bioportal.scss | 137 --------------------------
 1 file changed, 137 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 61fb69d3ce..42a4b53d5c 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1,140 +1,3 @@
-/* TODO: We are moving to Bootstrap, and away from YUI.  YUI styles should be stripped out. */
-
-/* Initialize */
-/* Adapted from YUI Library: http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css */
-/*
-html {
-  color:#000;
-  background:#234979;
-}
-*/
-div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, input, textarea, p, blockquote, th, td {
-  margin:0;
-  padding:0;
-}
-table {
-  border-collapse:collapse;
-  border-spacing:0;
-}
-img {
-  border:0;
-}
-legend {
-  margin:10px;
-  padding:5px;
-}
-fieldset {
-  margin:10px;
-  padding:0px 10px 10px 10px;
-}
-address, caption, cite, code, dfn, em, strong, var {
-  font-style:normal;
-  font-weight:normal;
-}
-ul li {
-  list-style:none;
-}
-caption, th {
-  text-align:left;
-}
-h1, h2, h3, h4, h5, h6 {
-  font-size:100%;
-  font-weight:normal;
-}
-q:before, q:after {
-  content:'';
-}
-abbr, acronym {
-  border:0;
-  font-variant:normal;
-}
-sup {
-  vertical-align:text-top;
-}
-/*sub { vertical-align:text-bottom; }*/
-sub.beta {
-  color:blue;
-}
-input, textarea, select {
-  font-family:inherit;
-  font-size:inherit;
-  font-weight:inherit;
-}
-input, textarea, select { *
-  font-size:100%;
-}
-legend {
-  color:#000;
-}
-body {
-  font:13px/1.231 arial,helvetica,clean,sans-serif;
-  font-size:small;
-  font:x-small;
-}
-table {
-  font-size:inherit;
-  font:100%;
-}
-pre, code, kbd, samp, tt {
-  font-family:monospace;
-  *
-  font-size:108%;
-  line-height:100%;
-}
-/*body {
-  text-align:center;
-}*/
-#ft {
-  clear:both;
-}
-.clearing {
-  clear: both;
-}
-/* end YUI font grid reset */
-
-body {
-  background: #fff;
-  font-family: "Myriad Pro", "Myriad Web Pro", "Myriad Web", "Myriad", "Trebuchet MS","Tahoma","Helvetica", "Arial",sans-serif;
-}
-h1 {
-  font-size:160%;
-}
-h2 {
-  font-size:140%;
-  margin-bottom:15px;
-}
-h3 {
-  font-size:110%;
-  margin-bottom:5px;
-  font-weight:bold;
-}
-h4 {
-  font-size:100%;
-}
-h5 {
-  font-size:100%;
-}
-p {
-  margin-bottom:15px;
-}
-a {
-  color:#234979;
-}
-a:hover {
-  text-decoration:none;
-}
-small {
-  font-size:60%;
-}
-strong {
-  font-weight:bold;
-}
-h1 a, h2 a {
-  text-decoration:none;
-}
-h1 a:hover, h2 a:hover {
-  text-decoration:underline;
-}
 .alignright {
   float:right;
 }

From c3e43f16cf6914cfcf87b4dab563c0ec0fe75cd2 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 31 Jul 2018 16:17:26 -0700
Subject: [PATCH 81/95] Fix display of top banner in feedback dialog

---
 app/assets/stylesheets/bioportal.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 42a4b53d5c..928af83610 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -506,7 +506,6 @@ tr.mainresource td {
 }
 
 .feedback {
-  margin-top: -1em;
   margin-bottom: 1em;
 }
 

From b32923fdbd18f73dae1f5edfc6f1a3fd095f12e7 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 6 Aug 2018 16:06:07 -0700
Subject: [PATCH 82/95] Upgrade to Font Awesome 5.2.0

Resolves #81
---
 Gemfile                                           |  2 +-
 Gemfile.lock                                      | 13 ++++++++-----
 app/assets/javascripts/submissions.js.erb         |  2 +-
 app/assets/stylesheets/ontologies.scss            |  6 ++++--
 app/views/annotator/index.html.haml               |  2 +-
 app/views/application/_footer_appliance.html.haml |  4 ++--
 app/views/home/index.html.haml                    |  4 ++--
 app/views/layouts/_footer.html.haml               | 10 +++++-----
 app/views/layouts/_ontology_viewer.html.haml      |  8 ++++----
 app/views/mappings/index.html.haml                |  2 +-
 app/views/ontologies/_metadata.html.haml          |  4 ++--
 app/views/ontologies/visualize.html.haml          |  2 +-
 app/views/projects/index.html.haml                |  2 +-
 app/views/recommender/index.html.haml             |  2 +-
 app/views/resource_index/index.html.haml          |  2 +-
 app/views/submissions/_form.html.haml             | 10 +++++-----
 16 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/Gemfile b/Gemfile
index c6f3791862..0287fe5181 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,7 +13,7 @@ gem 'uglifier', '>= 1.0.3'
 gem 'jquery-ui-rails'
 gem 'jquery-rails'
 gem 'bootstrap', '~> 4.1.0'
-gem 'font-awesome-sass', '~> 4.7.0'
+gem 'font-awesome-sass', '~> 5.2.0'
 gem 'chart-js-rails'
 gem 'select2-rails'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 5a74164d6b..f28a8ab089 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -62,7 +62,7 @@ GEM
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (9.0.2)
+    autoprefixer-rails (9.1.0)
       execjs
     bootstrap (4.1.3)
       autoprefixer-rails (>= 6.0.3)
@@ -109,8 +109,8 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
     flamegraph (0.9.5)
-    font-awesome-sass (4.7.0)
-      sass (>= 3.2)
+    font-awesome-sass (5.2.0)
+      sassc (>= 1.11)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     haml (4.0.7)
@@ -153,7 +153,7 @@ GEM
       net-ssh (>= 2.6.5)
     net-ssh (5.0.2)
     netrc (0.11.0)
-    newrelic_rpm (5.2.0.345)
+    newrelic_rpm (5.3.0.346)
     nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
     oj (3.6.5)
@@ -216,6 +216,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (1.12.1)
+      ffi (~> 1.9.6)
+      sass (>= 3.3.0)
     select2-rails (4.0.3)
       thor (~> 0.14)
     sexp_processor (4.11.0)
@@ -263,7 +266,7 @@ DEPENDENCIES
   cube-ruby
   dalli
   flamegraph
-  font-awesome-sass (~> 4.7.0)
+  font-awesome-sass (~> 5.2.0)
   haml (~> 4.0.0)
   html2haml
   i18n (~> 0)
diff --git a/app/assets/javascripts/submissions.js.erb b/app/assets/javascripts/submissions.js.erb
index 1f54aaca3c..d6b4dca397 100644
--- a/app/assets/javascripts/submissions.js.erb
+++ b/app/assets/javascripts/submissions.js.erb
@@ -12,7 +12,7 @@ jQuery(document).ready(function(){
   });
   jQuery("#ui-datepicker-div").css("display", "none");
 
-  jQuery('.fa-calendar').on('click', function() {
+  jQuery('.fa-calendar-alt').on('click', function() {
     jQuery('#datepicker').datepicker('show');
   });
 
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index a5cbb595c2..530a47acfe 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -89,8 +89,10 @@ $widget-table-border-color: #EFEFEF;
   }
 }
 
-.ontologies.show div.card-body a.btn.btn-secondary.btn-sm i.fa.fa-lg {
-  margin-left: .5em;
+.ontologies.show {
+  i.fas.fa-lg, i.far.fa-lg {
+    margin-left: .5em;
+  }
 }
 
 /* Classes pane */
diff --git a/app/views/annotator/index.html.haml b/app/views/annotator/index.html.haml
index 018acd0a76..b0e763ec0f 100644
--- a/app/views/annotator/index.html.haml
+++ b/app/views/annotator/index.html.haml
@@ -4,7 +4,7 @@
 %p
   = t('annotator.intro').html_safe
   = link_to(help_path(anchor: "Annotator_Tab"), id: "annotator-help", target: "_blank") do
-    %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
+    %i.fas.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .25em"}
 
 %form{style: "margin-bottom: 25px"}
   %div.form-group
diff --git a/app/views/application/_footer_appliance.html.haml b/app/views/application/_footer_appliance.html.haml
index 8fdfd3cdb6..104760183b 100644
--- a/app/views/application/_footer_appliance.html.haml
+++ b/app/views/application/_footer_appliance.html.haml
@@ -9,9 +9,9 @@
       %div.col-xs-12
         %ul.list-inline.text-center
           %li #{$RELEASE_VERSION}
-          %i.fa.fa-ellipsis-v{aria: {hidden: true}}
+          %i.fas.fa-ellipsis-v{aria: {hidden: true}}
           %li= link_to("Powered by NCBO BioPortal", "https://bioportal.bioontology.org/", target: "_blank")
-          %i.fa.fa-ellipsis-v{aria: {hidden: true}}
+          %i.fas.fa-ellipsis-v{aria: {hidden: true}}
           %li= link_to("Projects", projects_path())
 
 
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index ac2c2eed4d..c242f51901 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -34,7 +34,7 @@
                 = text_field_tag("query", nil, class: "form-control", placeholder: placeholder)
                 %div.input-group-append
                   = button_tag(type: "submit", class: "btn btn-primary", aria: {label: "Search for a class"}) do
-                    %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}              
+                    %i{class: "fas fa-search fa-lg", aria: {hidden: "true"}}              
               %a{:href => "/search?opt=advanced"} Advanced Search
         -# Search for an ontology
         %div.card
@@ -45,7 +45,7 @@
               = text_field_tag("ontology", nil, id: "find_ontology", class: "form-control", data: {ontologynames: @ontology_names}, placeholder: t(".find_ontology_placeholder"))
               %div.input-group-append
                 = button_tag(class: "btn btn-primary", onclick: "jumpToValueOntology()", aria: {label: "Find an ontology"}) do
-                  %i{class: "fa fa-search fa-lg", aria: {hidden: "true"}}
+                  %i{class: "fas fa-search fa-lg", aria: {hidden: "true"}}
             %ul.sf-menu.sf-vertical
               %li
                 = link_to("Browse Ontologies", "#", style: "white-space: nowrap; padding: 0px; background: #fff; border: 1px solid #fff;")
diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
index 3f5f7d64d3..8e562a7d8f 100644
--- a/app/views/layouts/_footer.html.haml
+++ b/app/views/layouts/_footer.html.haml
@@ -27,9 +27,9 @@
       %div.col-12.col-md
         %h6 CONNECT
         %ul.list-inline
-          %li.list-inline-item= link_to(raw(icon('facebook', class: 'fa-2x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank')
-          %li.list-inline-item= link_to(raw(icon('twitter', class: 'fa-2x')), 'http://twitter.com/bioontology', target: '_blank')
-          %li.list-inline-item= link_to(raw(icon('github', class: 'fa-2x')), 'http://github.com/ncbo', target: '_blank')
+          %li.list-inline-item= link_to(raw(icon('fab', 'facebook-f', class: 'fa-2x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank')
+          %li.list-inline-item= link_to(raw(icon('fab', 'twitter', class: 'fa-2x')), 'http://twitter.com/bioontology', target: '_blank')
+          %li.list-inline-item= link_to(raw(icon('fab', 'github', class: 'fa-2x')), 'http://github.com/ncbo', target: '_blank')
     %div.row{style: "font-size: 0.9rem;"}
       %div.col
         The 
@@ -43,11 +43,11 @@
           %li.list-inline-item
             = link_to('CITE US', 'https://www.bioontology.org/wiki/index.php/BioPortal_Help#How_to_cite_NCBO_and_BioPortal', target: '_blank')
           %li.list-inline-item
-            %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
+            %i.fas.fa-ellipsis-v{"aria-hidden" => "true"}
           %li.list-inline-item
             = link_to('PRIVACY POLICY', 'http://www.bioontology.org/privacy.html',  target: '_blank')
           %li.list-inline-item
-            %i.fa.fa-ellipsis-v{"aria-hidden" => "true"}
+            %i.fas.fa-ellipsis-v{"aria-hidden" => "true"}
           %li.list-inline-item
             = link_to('TERMS', 'http://www.bioontology.org/terms.html', target: '_blank')
 
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 3e18e0085f..bd1e224228 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -76,18 +76,18 @@
         - unless (@ontology.summaryOnly || @ont_restricted || @submissions.empty?)
           = link_to(@submissions.first.id + "/download?apikey=#{get_apikey}", class: "btn btn-secondary btn-sm") do
             Download latest version
-            %i.fa.fa-lg.fa-arrow-circle-down
+            %i.fas.fa-lg.fa-file-download
         - if @ontology.admin?(session[:user])
           = link_to(edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
             Edit ontology details
-            %i.fa.fa-lg.fa-pencil-square
+            %i.far.fa-lg.fa-edit
           = link_to(new_ontology_submission_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
             Add submission
-            %i.fa.fa-lg.fa-plus-circle
+            %i.fas.fa-lg.fa-plus-circle
           - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
             = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), class: "btn btn-secondary btn-sm") do
               = "Edit latest submission (#{@submission_latest.version})"
-              %i.fa.fa-lg.fa-pencil-square
+              %i.far.fa-lg.fa-edit
       - if (details_available && !sub.released.nil?)
         %div.card-footer.text-muted
           Last uploaded:
diff --git a/app/views/mappings/index.html.haml b/app/views/mappings/index.html.haml
index 531e378bd3..bfa5cef9d7 100644
--- a/app/views/mappings/index.html.haml
+++ b/app/views/mappings/index.html.haml
@@ -4,7 +4,7 @@
 %p.tab_description
   = t('mappings.intro').html_safe
   = link_to(help_path(anchor: "Mappings_Tab"), id: "mappings-help", aria: {label: "View mappings help"}) do
-    %i.fa.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .5em"}
+    %i.fas.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .25em"}
 %p#mappings_select{:style => "font-size:15px;font-weight:bold;padding:10px;margin-bottom:0;"}
   - if @options.empty?
     No mappings available
diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index 42ca57fdb6..605fc4c494 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -61,7 +61,7 @@
     %header.font-weight-bold 
       Metrics
       = link_to("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", target: "_blank", aria: {label: "View individual metrics definitions"}, title: "View individual metrics definitions") do
-        %i.fa.fa-lg.fa-question-circle{aria: {hidden: "true"}, style: "margin-left: .25em"}
+        %i.fas.fa-lg.fa-question-circle{aria: {hidden: "true"}, style: "margin-left: .25em"}
     %div{style: "padding: 24px 36px;"}
       - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
         %p.font-italic= "We have not yet calculated metrics for #{@ontology.acronym}"
@@ -107,7 +107,7 @@
       Analytics
       - if visits_data
         = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", aria: {label: "Download as CSV"}, title: "Download as CSV") do
-          %i.fa.fa-lg.fa-download{aria: {hidden: "true"}, style: "margin-left: .5em"}
+          %i.fas.fa-lg.fa-download{aria: {hidden: "true"}, style: "margin-left: .25em"}
     %div{style: "padding: 15px 15px;"}
       = render partial: "visits"
 
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index 2c60e6d77c..f880f1e2a2 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -101,7 +101,7 @@
             /      %a{:href => "", :onclick => "return false;", :style => "color: gray;"} Resource Index
             - if $PURL_ENABLED
               = link_to("#classPermalinkModal", class: "class-permalink", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}, data: {toggle: "modal", current_purl: "#{@current_purl}"}) do
-                %i{class: "fa fa-link", aria: {hidden: "true"}}
+                %i{class: "fas fa-link", aria: {hidden: "true"}}
         #contents
           #details_content.tab_container= render :partial =>'/concepts/details'
           #visualization_content.tab_container.not_visible= render :partial =>'/concepts/biomixer'
diff --git a/app/views/projects/index.html.haml b/app/views/projects/index.html.haml
index b5386b0872..f4ab804fd8 100644
--- a/app/views/projects/index.html.haml
+++ b/app/views/projects/index.html.haml
@@ -6,7 +6,7 @@
 %p.tab_description
   = t('projects.intro').html_safe
   = link_to(help_path(anchor: "Projects_Tab"), id: "projects-help", aria: {label: "View projects help"}) do
-    %i.fa.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .5em"}
+    %i.fas.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .25em"}
 
 %div{:style => "padding:10px;"}
   %span
diff --git a/app/views/recommender/index.html.haml b/app/views/recommender/index.html.haml
index a485da9946..11a2de3f87 100644
--- a/app/views/recommender/index.html.haml
+++ b/app/views/recommender/index.html.haml
@@ -4,7 +4,7 @@
 %p
   = t('recommender.intro').html_safe
   = link_to(help_path(anchor: "Recommender_Tab"), id: "recommender-help", target: "_blank") do
-    %i.fa.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .5em"}
+    %i.fas.fa-question-circle.fa-lg{aria: {hidden: true}, style: "margin-left: .25em"}
 
 %form
   -# Specify input format
diff --git a/app/views/resource_index/index.html.haml b/app/views/resource_index/index.html.haml
index a717163b2f..95cee5a2b5 100644
--- a/app/views/resource_index/index.html.haml
+++ b/app/views/resource_index/index.html.haml
@@ -5,7 +5,7 @@
   %p
     = t('resource_index.intro').html_safe
     = link_to(help_path(anchor: "Resource_Index_Tab"), id: "resource-index-help", aria: {label: "View resource index help"}) do
-      %i.fa.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .5em"}
+      %i.fas.fa-question-circle.fa-lg{aria: {hidden: "true"}, style: "margin-left: .25em"}
 
   %div{:style => "padding-bottom: 1em;"}
     %div{:style => "width: 432px;"}
diff --git a/app/views/submissions/_form.html.haml b/app/views/submissions/_form.html.haml
index ab5806e533..ae8f3e9b4f 100644
--- a/app/views/submissions/_form.html.haml
+++ b/app/views/submissions/_form.html.haml
@@ -127,7 +127,7 @@
       = text_field(:submission, :released, id: "datepicker", value: "#{l(release_date, format: :month_day_year)}", required: true, class: "form-control", readonly: "readonly")
       %div.input-group-append
         %span.input-group-text
-          %i{class: "fa fa-calendar fa-lg", aria: {hidden: "true"}}
+          %i{class: "fas fa-calendar-alt fa-lg", aria: {hidden: "true"}}
 
 -# Location
 %div#submissionLocation.form-group.row
@@ -186,7 +186,7 @@
           %label Email
           = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control flex-grow-1 mx-2"
           %button.btn.btn-success.add-contact
-            %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
+            %i{class: "fas fa-plus fa-lg", aria: {hidden: "true"}}
       - else
         -# TODO
         -# Secondary contacts need to be offset by 2 columns, and have a delete button.
@@ -196,9 +196,9 @@
           %label Email
           = text_field :submission, :"contact[#{i}][email]", value: contact["email"], class: "form-control flex-grow-1 mx-2"
           %button.btn.btn-success.add-contact
-            %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}
+            %i{class: "fas fa-plus fa-lg", aria: {hidden: "true"}}
           %button.btn.btn-danger.ml-1.remove-contact
-            %i{class: "fa fa-minus fa-lg", aria: {hidden: "true"}}
+            %i{class: "fas fa-minus fa-lg", aria: {hidden: "true"}}
   - else
     -# TODO
     %div.col-sm-10.d-flex.align-items-center.contact
@@ -207,7 +207,7 @@
       %label Email:
       = text_field :submission, :"contact[0][email]", class: "form-control flex-grow-1 mx-2"
       %button.btn.btn-success.add-contact
-        %i{class: "fa fa-plus fa-lg", aria: {hidden: "true"}}      
+        %i{class: "fas fa-plus fa-lg", aria: {hidden: "true"}}      
 
 -# Home page
 %div.form-group.row

From 75b4186246efae026e40ba373ed0fae5133f7e4c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Mon, 6 Aug 2018 16:48:06 -0700
Subject: [PATCH 83/95] Downgrade font-awesome-sass gem to 5.0.13

Newer versions fail to deploy on CentOS 6+. See
https://github.com/FortAwesome/font-awesome-sass/issues/157.
---
 Gemfile                                      | 2 +-
 Gemfile.lock                                 | 9 +++------
 app/views/layouts/_ontology_viewer.html.haml | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/Gemfile b/Gemfile
index 0287fe5181..854ff47f41 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,7 +13,7 @@ gem 'uglifier', '>= 1.0.3'
 gem 'jquery-ui-rails'
 gem 'jquery-rails'
 gem 'bootstrap', '~> 4.1.0'
-gem 'font-awesome-sass', '~> 5.2.0'
+gem 'font-awesome-sass', '< 5.0.13'
 gem 'chart-js-rails'
 gem 'select2-rails'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index f28a8ab089..5f50d61e49 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -109,8 +109,8 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
     flamegraph (0.9.5)
-    font-awesome-sass (5.2.0)
-      sassc (>= 1.11)
+    font-awesome-sass (5.0.9)
+      sass (>= 3.2)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     haml (4.0.7)
@@ -216,9 +216,6 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sassc (1.12.1)
-      ffi (~> 1.9.6)
-      sass (>= 3.3.0)
     select2-rails (4.0.3)
       thor (~> 0.14)
     sexp_processor (4.11.0)
@@ -266,7 +263,7 @@ DEPENDENCIES
   cube-ruby
   dalli
   flamegraph
-  font-awesome-sass (~> 5.2.0)
+  font-awesome-sass (< 5.0.13)
   haml (~> 4.0.0)
   html2haml
   i18n (~> 0)
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index bd1e224228..508b371b72 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -76,7 +76,7 @@
         - unless (@ontology.summaryOnly || @ont_restricted || @submissions.empty?)
           = link_to(@submissions.first.id + "/download?apikey=#{get_apikey}", class: "btn btn-secondary btn-sm") do
             Download latest version
-            %i.fas.fa-lg.fa-file-download
+            %i.fas.fa-lg.fa-download
         - if @ontology.admin?(session[:user])
           = link_to(edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
             Edit ontology details

From 66ae13bf804765b4120f953825e3e45320640c29 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 7 Aug 2018 14:58:49 -0700
Subject: [PATCH 84/95] Use tabs instead of pills for card navigation

---
 app/views/layouts/_ontology_viewer.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 508b371b72..004e918838 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -98,7 +98,7 @@
     %div.card
       %div.card-header
         -# Tabbed navigation bar for ontology content sections
-        %ul.nav.nav-pills.card-header-pills{id: "navbar-ontology", role: "tablist"}
+        %ul.nav.nav-tabs.card-header-tabs{id: "navbar-ontology", role: "tablist"}
           %li.nav-item 
             = link_to("Summary", ontology_path(@ontology.acronym, p: "summary"), |
                 id: "ont-summary-tab", class: "nav-link", role: "tab", data: {bp_ont_page: "summary", toggle: "tab", target: "#ont_summary_content"}, |

From e19747255cc8ea2e29ed02c24084d7e16e28fdf6 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 7 Aug 2018 15:32:16 -0700
Subject: [PATCH 85/95] Change background color for ontology viewing

---
 app/assets/stylesheets/ontologies.scss       | 21 ++++++++++++++------
 app/views/layouts/_ontology_viewer.html.haml |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 530a47acfe..353695a34c 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -1,5 +1,6 @@
 $ont-metadata-bg-color: #e2ebf0;
 $widget-table-border-color: #EFEFEF;
+$ont-show-bg-color: #e9ecef;
 
 .ontologies.show .gutter {
   background-color: rgba(0, 0, 0, 0.03);
@@ -12,6 +13,20 @@ $widget-table-border-color: #EFEFEF;
   }
 }
 
+.ontologies.show {
+  i.fas.fa-lg, i.far.fa-lg {
+    margin-left: .5em;
+  }
+
+  #bd {
+    background-color: $ont-show-bg-color;
+  }
+}
+
+body.ontologies.show {
+  background-color: $ont-show-bg-color;
+}
+
 /* Summary pane */
 
 @media screen and (max-width: 992px) {
@@ -89,12 +104,6 @@ $widget-table-border-color: #EFEFEF;
   }
 }
 
-.ontologies.show {
-  i.fas.fa-lg, i.far.fa-lg {
-    margin-left: .5em;
-  }
-}
-
 /* Classes pane */
 
 #bd_content {
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 004e918838..9bb0c8bc7a 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -93,7 +93,7 @@
           Last uploaded:
           = l(Date.parse(sub.creationDate), format: :monthfull_day_year)
 
-%div.row.pb-2
+%div.row.pb-4
   %div.col
     %div.card
       %div.card-header

From 6375e5b7171f5b5afc787f98540aee9eac3b00ed Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 9 Aug 2018 17:24:07 -0700
Subject: [PATCH 86/95] Switch to Font Awesome's CDN

---
 Gemfile                                     |  1 -
 Gemfile.lock                                |  5 +----
 app/assets/stylesheets/application.css.scss |  2 --
 app/views/layouts/_appliance.html.haml      |  1 +
 app/views/layouts/_footer.html.haml         | 12 +++++++++---
 app/views/layouts/_header.html.erb          |  3 ++-
 app/views/layouts/angular.html.erb          |  1 +
 app/views/layouts/minimal.html.erb          |  1 +
 app/views/layouts/partial.html.erb          |  1 +
 app/views/layouts/popup.html.erb            |  1 +
 10 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/Gemfile b/Gemfile
index 854ff47f41..2cc5fc04e9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,7 +13,6 @@ gem 'uglifier', '>= 1.0.3'
 gem 'jquery-ui-rails'
 gem 'jquery-rails'
 gem 'bootstrap', '~> 4.1.0'
-gem 'font-awesome-sass', '< 5.0.13'
 gem 'chart-js-rails'
 gem 'select2-rails'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 5f50d61e49..903e085801 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -109,8 +109,6 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
     flamegraph (0.9.5)
-    font-awesome-sass (5.0.9)
-      sass (>= 3.2)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     haml (4.0.7)
@@ -240,7 +238,7 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.17)
+    uglifier (4.1.18)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext
@@ -263,7 +261,6 @@ DEPENDENCIES
   cube-ruby
   dalli
   flamegraph
-  font-awesome-sass (< 5.0.13)
   haml (~> 4.0.0)
   html2haml
   i18n (~> 0)
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index dbd19ca8df..a7b2e32f5b 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -40,5 +40,3 @@
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";
-@import "font-awesome-sprockets";
-@import "font-awesome";
diff --git a/app/views/layouts/_appliance.html.haml b/app/views/layouts/_appliance.html.haml
index b152066513..70bb391ad9 100644
--- a/app/views/layouts/_appliance.html.haml
+++ b/app/views/layouts/_appliance.html.haml
@@ -10,6 +10,7 @@
     <link rel="shortcut icon" href="/fav.ico" type="image/x-icon" />
     
     = stylesheet_link_tag "//fonts.googleapis.com/css?family=Droid+Sans:400", media: "all"
+    = stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous"
     = stylesheet_link_tag "application", media: "all"
 
     = javascript_include_tag "vendor"
diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml
index 8e562a7d8f..7d139fbc01 100644
--- a/app/views/layouts/_footer.html.haml
+++ b/app/views/layouts/_footer.html.haml
@@ -27,9 +27,15 @@
       %div.col-12.col-md
         %h6 CONNECT
         %ul.list-inline
-          %li.list-inline-item= link_to(raw(icon('fab', 'facebook-f', class: 'fa-2x')), 'https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank')
-          %li.list-inline-item= link_to(raw(icon('fab', 'twitter', class: 'fa-2x')), 'http://twitter.com/bioontology', target: '_blank')
-          %li.list-inline-item= link_to(raw(icon('fab', 'github', class: 'fa-2x')), 'http://github.com/ncbo', target: '_blank')
+          %li.list-inline-item
+            = link_to('https://www.facebook.com/National-Center-for-Biomedical-Ontology-127444774011153/', target: '_blank') do 
+              %i.fab.fa-2x.fa-facebook-f
+          %li.list-inline-item
+            = link_to('http://twitter.com/bioontology', target: '_blank') do
+              %i.fab.fa-2x.fa-twitter
+          %li.list-inline-item
+            = link_to('http://github.com/ncbo', target: '_blank') do
+              %i.fab.fa-2x.fa-github
     %div.row{style: "font-size: 0.9rem;"}
       %div.col
         The 
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 05c90594b3..901299b4a4 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -21,7 +21,8 @@
 	<link href='//fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'>
 
 	<!-- CSS -->
-	<%= stylesheet_link_tag "application" %>
+  <%= stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous" %>
+  <%= stylesheet_link_tag "application" %>
 
   <!-- JavaScript -->
   <%= javascript_include_tag "vendor" %>
diff --git a/app/views/layouts/angular.html.erb b/app/views/layouts/angular.html.erb
index 94de6e5920..4007134b88 100644
--- a/app/views/layouts/angular.html.erb
+++ b/app/views/layouts/angular.html.erb
@@ -28,6 +28,7 @@
   <title><%if @title.nil?%><%=$ORG_SITE%><%else%><%="#{@title} | #{$ORG_SITE}"%><%end%></title>
   <link rel="shortcut icon" href="/fav.ico" type="image/x-icon" />
   <link href='//fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'>
+  <%= stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous" %>
   <%= stylesheet_link_tag "application" %>
 </head>
 <body class="<%= controller_name %> <%= action_name %>">
diff --git a/app/views/layouts/minimal.html.erb b/app/views/layouts/minimal.html.erb
index 889c080799..7f7e72c33f 100644
--- a/app/views/layouts/minimal.html.erb
+++ b/app/views/layouts/minimal.html.erb
@@ -8,6 +8,7 @@
   <title><%if @title.nil?%><%=$ORG_SITE%><%else%><%="#{@title} | #{$ORG_SITE}"%><%end%></title>
   <link rel="shortcut icon" href="/fav.ico" type="image/x-icon" />
   <link href='//fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'>
+  <%= stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous" %>
   <%= stylesheet_link_tag "application" %>
   <%=render partial: 'layouts/js_data'%>
   <%=render partial: 'layouts/head_js'%>
diff --git a/app/views/layouts/partial.html.erb b/app/views/layouts/partial.html.erb
index d6d1ed5a26..e276a83bbe 100644
--- a/app/views/layouts/partial.html.erb
+++ b/app/views/layouts/partial.html.erb
@@ -5,6 +5,7 @@
 <title><%if @title.nil?%><%=$ORG_SITE%><%else%><%="#{@title} | #{$ORG_SITE}"%><%end%></title>
 <link rel="shortcut icon" href="/fav.ico" type="image/x-icon" />
 <link href='//fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'>
+<%= stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous" %>
 <%= stylesheet_link_tag "application" %>
 
 <%=render partial: 'layouts/js_data'%>
diff --git a/app/views/layouts/popup.html.erb b/app/views/layouts/popup.html.erb
index d1fb5c3036..2b4edc3d44 100644
--- a/app/views/layouts/popup.html.erb
+++ b/app/views/layouts/popup.html.erb
@@ -7,6 +7,7 @@
   <title><%if @title.nil?%><%=$ORG_SITE%><%else%><%="#{@title} | #{$ORG_SITE}"%><%end%></title>
   <link rel="shortcut icon" href="/fav.ico" type="image/x-icon" />
   <link href='//fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'>
+  <%= stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous" %>
   <%= stylesheet_link_tag "application" %>  
   <%= javascript_include_tag "vendor" %>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" %>

From c17c38662e9132355792842eb6cd563a36e0f1a4 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 10 Aug 2018 17:11:08 -0700
Subject: [PATCH 87/95] Upgrade to mysql2 gem

---
 Gemfile      | 2 +-
 Gemfile.lock | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Gemfile b/Gemfile
index 2cc5fc04e9..1951b53dc0 100644
--- a/Gemfile
+++ b/Gemfile
@@ -29,7 +29,7 @@ gem "pry"
 gem "iconv"
 gem "recaptcha", "= 0.4.0"
 gem "rest-client", "~> 1.8.0"
-gem "mysql", "~> 2.9.1"
+gem "mysql2", "~> 0.4.0"
 gem "i18n", "~> 0"
 gem "haml", "~> 4.0.0"
 gem "will_paginate", "~> 3.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index 903e085801..0c6d18d00f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -146,7 +146,7 @@ GEM
     minitest (5.11.3)
     multi_json (1.13.1)
     multipart-post (2.0.0)
-    mysql (2.9.1)
+    mysql2 (0.4.10)
     net-scp (1.2.1)
       net-ssh (>= 2.6.5)
     net-ssh (5.0.2)
@@ -269,7 +269,7 @@ DEPENDENCIES
   jquery-ui-rails
   logstash-logger
   multi_json
-  mysql (~> 2.9.1)
+  mysql2 (~> 0.4.0)
   newrelic_rpm
   nokogiri
   oj

From 503d6e7b0d458385a1c5d4ad8ff05ffc91f9fd3c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Tue, 14 Aug 2018 15:12:01 -0700
Subject: [PATCH 88/95] Upgrade to Rails 4.2.10

---
 Gemfile      |  2 +-
 Gemfile.lock | 71 ++++++++++++++++++++++++++--------------------------
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/Gemfile b/Gemfile
index 1951b53dc0..f9e42605e9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
-gem 'rails', '4.2.6'
+gem 'rails', '4.2.10'
 
 gem 'sass-rails', '~> 5.0'
 gem 'coffee-rails', '~> 4.1.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 0c6d18d00f..6dbe1e5075 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -24,45 +24,44 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (4.2.6)
-      actionpack (= 4.2.6)
-      actionview (= 4.2.6)
-      activejob (= 4.2.6)
+    actionmailer (4.2.10)
+      actionpack (= 4.2.10)
+      actionview (= 4.2.10)
+      activejob (= 4.2.10)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 1.0, >= 1.0.5)
-    actionpack (4.2.6)
-      actionview (= 4.2.6)
-      activesupport (= 4.2.6)
+    actionpack (4.2.10)
+      actionview (= 4.2.10)
+      activesupport (= 4.2.10)
       rack (~> 1.6)
       rack-test (~> 0.6.2)
       rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (4.2.6)
-      activesupport (= 4.2.6)
+    actionview (4.2.10)
+      activesupport (= 4.2.10)
       builder (~> 3.1)
       erubis (~> 2.7.0)
       rails-dom-testing (~> 1.0, >= 1.0.5)
-      rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    activejob (4.2.6)
-      activesupport (= 4.2.6)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (4.2.10)
+      activesupport (= 4.2.10)
       globalid (>= 0.3.0)
-    activemodel (4.2.6)
-      activesupport (= 4.2.6)
+    activemodel (4.2.10)
+      activesupport (= 4.2.10)
       builder (~> 3.1)
-    activerecord (4.2.6)
-      activemodel (= 4.2.6)
-      activesupport (= 4.2.6)
+    activerecord (4.2.10)
+      activemodel (= 4.2.10)
+      activesupport (= 4.2.10)
       arel (~> 6.0)
-    activesupport (4.2.6)
+    activesupport (4.2.10)
       i18n (~> 0.7)
-      json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (9.1.0)
+    autoprefixer-rails (9.1.1)
       execjs
     bootstrap (4.1.3)
       autoprefixer-rails (>= 6.0.3)
@@ -129,7 +128,6 @@ GEM
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (6.0.1)
       railties (>= 3.2.16)
-    json (1.8.6)
     logstash-event (1.1.5)
     logstash-logger (0.3.0)
       logstash-event
@@ -141,7 +139,7 @@ GEM
       mini_mime (>= 0.1.1)
     method_source (0.9.0)
     mime-types (2.99.3)
-    mini_mime (1.0.0)
+    mini_mime (1.0.1)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
     multi_json (1.13.1)
@@ -165,16 +163,16 @@ GEM
       rack (>= 1.2.0)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (4.2.6)
-      actionmailer (= 4.2.6)
-      actionpack (= 4.2.6)
-      actionview (= 4.2.6)
-      activejob (= 4.2.6)
-      activemodel (= 4.2.6)
-      activerecord (= 4.2.6)
-      activesupport (= 4.2.6)
+    rails (4.2.10)
+      actionmailer (= 4.2.10)
+      actionpack (= 4.2.10)
+      actionview (= 4.2.10)
+      activejob (= 4.2.10)
+      activemodel (= 4.2.10)
+      activerecord (= 4.2.10)
+      activesupport (= 4.2.10)
       bundler (>= 1.3.0, < 2.0)
-      railties (= 4.2.6)
+      railties (= 4.2.10)
       sprockets-rails
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
@@ -186,9 +184,9 @@ GEM
       loofah (~> 2.2, >= 2.2.2)
     rails_autolink (1.1.6)
       rails (> 3.1)
-    railties (4.2.6)
-      actionpack (= 4.2.6)
-      activesupport (= 4.2.6)
+    railties (4.2.10)
+      actionpack (= 4.2.10)
+      activesupport (= 4.2.10)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (12.3.1)
@@ -248,6 +246,7 @@ GEM
 PLATFORMS
   ruby
   x86_64-darwin-16
+  x86_64-darwin-17
 
 DEPENDENCIES
   bootstrap (~> 4.1.0)
@@ -278,7 +277,7 @@ DEPENDENCIES
   pry
   rack-mini-profiler
   rackstash!
-  rails (= 4.2.6)
+  rails (= 4.2.10)
   rails_autolink
   rdoc
   recaptcha (= 0.4.0)
@@ -291,4 +290,4 @@ DEPENDENCIES
   will_paginate (~> 3.0)
 
 BUNDLED WITH
-   1.16.0
+   1.16.3

From eb9db5e04bcbd1c45a0b00dd59e58cfd2ce4029c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 17 Aug 2018 15:55:49 -0700
Subject: [PATCH 89/95] Summary page design modifications

Based on feedback given during BioPortal meeting
---
 app/assets/javascripts/bp_ont_chart.js       |   7 +-
 app/assets/stylesheets/ontologies.scss       | 143 +++++++----
 app/helpers/ontologies_helper.rb             |   6 +-
 app/views/layouts/_ontology_viewer.html.haml |  55 ++---
 app/views/ontologies/_metadata.html.haml     | 241 ++++++++++---------
 app/views/ontologies/_submissions.html.haml  |   8 +-
 app/views/ontologies/_visits.html.haml       |   2 +-
 7 files changed, 264 insertions(+), 198 deletions(-)

diff --git a/app/assets/javascripts/bp_ont_chart.js b/app/assets/javascripts/bp_ont_chart.js
index 1b51403c76..63b8907536 100644
--- a/app/assets/javascripts/bp_ont_chart.js
+++ b/app/assets/javascripts/bp_ont_chart.js
@@ -24,7 +24,12 @@ jQuery(document).data().bp.ontChart.init = function() {
     var myLineChart = new Chart(ctx, {
       type: 'line',
       data: data,
-      options: { responsive: true }
+      options: { 
+        responsive: true,
+        legend: {
+          display: false
+        } 
+      }
     });
   }
 };
\ No newline at end of file
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 353695a34c..2efa4fe31d 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -2,6 +2,14 @@ $ont-metadata-bg-color: #e2ebf0;
 $widget-table-border-color: #EFEFEF;
 $ont-show-bg-color: #e9ecef;
 
+.ontologies.show {
+  background-color: $ont-show-bg-color;
+
+  #bd {
+    background-color: $ont-show-bg-color;
+  }
+}
+
 .ontologies.show .gutter {
   background-color: rgba(0, 0, 0, 0.03);
   background-repeat: no-repeat;
@@ -13,21 +21,49 @@ $ont-show-bg-color: #e9ecef;
   }
 }
 
-.ontologies.show {
-  i.fas.fa-lg, i.far.fa-lg {
-    margin-left: .5em;
+.ont-info-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  
+  background-color: white;
+  padding: 0.75rem 1.25rem;
+
+  h4 {
+    margin-bottom: 0;
+    margin-right: 2rem;
+
+    a {
+      color: #343a40;
+    }
   }
 
-  #bd {
-    background-color: $ont-show-bg-color;
+  a {
+    color: #6c757d;
+ 
+    &:hover {
+      color: #0056b3;
+      text-decoration: none;
+    }
   }
 }
 
-body.ontologies.show {
-  background-color: $ont-show-bg-color;
+.ont-info-links {
+  a + a {
+    margin-left: 1rem;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .ont-info-links {
+    margin-top: 1rem;
+  }
 }
 
-/* Summary pane */
+/************************************
+ * Summary pane
+ ************************************/
 
 @media screen and (max-width: 992px) {
   .ont-metadata-card {
@@ -38,15 +74,38 @@ body.ontologies.show {
 @media screen and (min-width: 992px) {
   .ont-metadata {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-gap: 15px;
+    grid-row-gap: 16px;
+    grid-template-columns: 60% 40%;
   }
+
+  .ont-details-card, .ont-subs-card, .ont-views-card {
+    margin-right: 16px;
+  }
+
+  .ont-metrics-card, .ont-analytics-card {
+    margin-bottom: 32px;
+  }
+}
+
+.right-hand-content {
+  grid-column: 2;
+  grid-row: 1 / span 4;
+}
+
+.ont-section-toolbar {
+  display: flex;
+  align-items: baseline;
 }
 
 .ont-metadata-card {
+  font-size: 14px;
+
   header {
-    background-color: $ont-metadata-bg-color;
-    padding: 15px 36px;
+    font-size: 16px;
+  }
+
+  dl {
+    margin-top: 0.5rem;
   }
 
   dt {
@@ -57,54 +116,52 @@ body.ontologies.show {
     font-size: .9em;
     padding-left: 10px;
   }
-
-  ul {
-    margin-bottom: 0;
-  }
-
-  li {
-    list-style: none;
-  }
-
-  thead tr th {
-    border-top: none;
-  }
 }
 
 .ont-details-card {
-  grid-column: 1 / span 2;
+  grid-column: 1;
+  grid-row: 1;
+
+  td:nth-child(1) {
+    background-color: #e2ebf0;
+    white-space: nowrap;
+  }
 }
 
 .ont-metrics-card {
-  grid-column: 3 / span 2;
+  td:nth-child(1) {
+    background-color: #e2ebf0;
+  }
+
+  td:nth-child(2n) {
+    text-align: right;
+  }
 }
 
 .ont-subs-card {
-  grid-column: 1 / span 4;
+  grid-column: 1;
   grid-row: 2;
-}
 
-.ont-analytics-card {
-  grid-column: 1 / span 4;
-  grid-row: 4;
+  th {
+    color: #737373;
+  }
 }
 
 .ont-views-card {
-  grid-column: 3 / span 2;
+  grid-column: 1;
   grid-row: 3;
 }
 
 .ont-projects-card {
-  grid-column: 1 / span 2;
-  grid-row: 3;
-
-  ul li {
-    list-style-type: circle;
-    list-style-position: inside;
+  p {
+    margin-bottom: 0;
+    margin-top: 0.5rem;
   }
 }
 
-/* Classes pane */
+/************************************
+/* Classes pane
+************************************/
 
 #bd_content {
   display: flex;
@@ -155,7 +212,9 @@ body.ontologies.show {
   border-right: 1px solid #bcc6d0;
 }
 
-/* Properties pane */
+/************************************
+/* Properties pane
+************************************/
 
 #propTree a {
   font-family: "Myriad Pro","Myriad Web Pro","Myriad Web","Myriad","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
@@ -172,7 +231,9 @@ body.ontologies.show {
   white-space: nowrap;
 }
 
-/* Widgets pane */
+/************************************
+/* Widgets pane
+************************************/
 
 #widget_table {
   td {
diff --git a/app/helpers/ontologies_helper.rb b/app/helpers/ontologies_helper.rb
index 79cdffc2aa..96cd9f14a4 100644
--- a/app/helpers/ontologies_helper.rb
+++ b/app/helpers/ontologies_helper.rb
@@ -5,8 +5,10 @@ def additional_details
     details = $ADDITIONAL_ONTOLOGY_DETAILS[@ontology.acronym]
     html = []
     details.each do |title, value|
-      html << content_tag(:dt, title)
-      html << content_tag(:dd, raw(value))
+      html << content_tag(:tr) do
+        html << content_tag(:td, title)
+        html << content_tag(:td, raw(value))
+      end
     end
     html.join("")
   end
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 9bb0c8bc7a..185401085c 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -63,35 +63,34 @@
         %button.btn.btn-secondary{"data-dismiss": "modal"} Close
 
 -# A header of sorts to display ontology name and subset of details.
-%div.row.pt-md-4.pb-2
+%div.row.pt-md-3.pb-md-2
   %div.col
-    %div.card
-      %h3.card-header
-        = @ontology.name
-      %div.card-body
-        - if details_available
-          %p.card-text
-            = sanitize(sub.description)
-      %div.card-body
+    %div.ont-info-bar.rounded
+      %div
+        %h4
+          = link_to(@ontology.name, ontology_path(@ontology.acronym))
+        %div
+          - if (details_available && !sub.released.nil?)
+            %span.text-muted
+              Last uploaded:
+              = l(Date.parse(sub.creationDate), format: :monthfull_day_year)
+      %div.ont-info-links
         - unless (@ontology.summaryOnly || @ont_restricted || @submissions.empty?)
-          = link_to(@submissions.first.id + "/download?apikey=#{get_apikey}", class: "btn btn-secondary btn-sm") do
-            Download latest version
-            %i.fas.fa-lg.fa-download
+          = link_to(@submissions.first.id + "/download?apikey=#{get_apikey}", "aria-label": "Download latest version", title: "Download latest version") do
+            %i.fas.fa-lg.fa-download{"aria-hidden": true}
+        - if details_available
+          - if $PURL_ENABLED
+            = link_to(@ontology.purl, "aria-label": "BioPortal PURL", title: "BioPortal PURL", target: "_blank") do
+              %i.fas.fa-lg.fa-link{"aria-hidden": true}
+          = link_to(sub.homepage, "aria-label": "Ontology home page", title: "Ontology home page", target: "_blank") do
+            %i.fas.fa-lg.fa-home{"aria-hidden": true}
+          = link_to(sub.documentation, "aria-label": "Ontology documentation", title: "Ontology documentation", target: "_blank") do
+            %i.fas.fa-lg.fa-book-reader{"aria-hidden": true}
+          = link_to(sub.publication, "aria-label": "Ontology publications", title: "Ontology publications", target: "_blank") do
+            %i.fas.fa-lg.fa-book{"aria-hidden": true}
         - if @ontology.admin?(session[:user])
-          = link_to(edit_ontology_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
-            Edit ontology details
-            %i.far.fa-lg.fa-edit
-          = link_to(new_ontology_submission_path(@ontology.acronym), class: "btn btn-secondary btn-sm") do
-            Add submission
-            %i.fas.fa-lg.fa-plus-circle
-          - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
-            = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), class: "btn btn-secondary btn-sm") do
-              = "Edit latest submission (#{@submission_latest.version})"
-              %i.far.fa-lg.fa-edit
-      - if (details_available && !sub.released.nil?)
-        %div.card-footer.text-muted
-          Last uploaded:
-          = l(Date.parse(sub.creationDate), format: :monthfull_day_year)
+          = link_to(edit_ontology_path(@ontology.acronym), "aria-label": "Edit ontology details", title: "Edit ontology details") do
+            %i.fas.fa-lg.fa-user-edit
 
 %div.row.pb-4
   %div.col
@@ -153,7 +152,3 @@
   = render partial: "ga_tracking"
 - else
   = render partial: "layouts/footer"
-
-
-
-
diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index 605fc4c494..dba3800fb7 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -1,157 +1,160 @@
 %div.ont-metadata
 
   -# Details pane
-  %section.border.rounded.ont-metadata-card.ont-details-card
-    %header.font-weight-bold Details
-    %div{style: "padding: 24px 36px;"}
-      %dl
-        %dt Acronym
-        %dd= @ontology.acronym
-
-        %dt Visibility
-        %dd= strip_links(visibility_link(@ontology))
-       
-        - unless @ontology.summaryOnly
-          %dt Links
-          - if $PURL_ENABLED
-            %dd
-              %ul
-                %li= link_to("#{$SITE} PURL".strip, @ontology.purl, class: "card-link")
-                - unless @submission_latest.nil?
-                  %li= link_to("Homepage", @submission_latest.homepage, target: "_blank") unless @submission_latest.homepage.nil?
-                  %li= link_to("Documentation", @submission_latest.documentation, target: "_blank") unless @submission_latest.documentation.nil?
-                  %li= link_to("Publications", @submission_latest.publication, target: "_blank") unless @submission_latest.publication.nil?
-
-        - if @ontology.viewing_restricted?
-          %dt Viewing restriction
-          %dd= @ontology.viewingRestriction.capitalize
-
-        - unless @ontology.viewOf.nil?
-          %dt View of ontology
-          %dd
+  %section.ont-metadata-card.ont-details-card
+    %header.pb-2.font-weight-bold Details
+    %table.table.table-sm
+      %tr
+        %td Acronym
+        %td= @ontology.acronym
+      %tr
+        %td Visibility
+        %td= strip_links(visibility_link(@ontology))
+      - if @ontology.viewing_restricted?
+        %tr
+          %td Viewing restriction
+          %td= @ontology.viewingRestriction.capitalize
+      - unless @ontology.viewOf.nil?
+        %tr
+          %td View of ontology
+          %td
             - ont_parent_acronym = @ontology.viewOf.split('/').last
             - if $PURL_ENABLED
               - ont_url = @ontology.purl.sub(@ontology.acronym, ont_parent_acronym)
             - else
               - ont_url = @ontology.links['ui'].sub(@ontology.acronym, ont_parent_acronym)
             = link_to(ont_parent_acronym, ont_url)
+      - unless @submission_latest.nil?
+        %tr
+          %td Description
+          %td= sanitize(@submission_latest.description)
+        %tr
+          %td Status
+          %td= @submission_latest.status.capitalize unless @submission_latest.status.nil?
+        %tr
+          %td Format
+          %td= @submission_latest.hasOntologyLanguage
+        %tr
+          %td Contact
+          %td= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
+      - categories_hash = LinkedData::Client::Models::Category.all_to_hash
+      - categories = @ontology.hasDomain
+      - unless categories.empty?
+        %tr
+          %td Categories
+          %td= categories.map {|c| categories_hash[c].name}.sort.join(", ")
+      - groups_hash = LinkedData::Client::Models::Group.all_to_hash
+      - groups = @ontology.group
+      - unless groups.empty?
+        %tr
+          %td Groups
+          %td= groups.map {|g| groups_hash[g].name}.sort.join(", ")
+      = raw additional_details
 
-        - unless @submission_latest.nil?
-          %dt Status
-          %dd= @submission_latest.status.capitalize unless @submission_latest.status.nil?
-          %dt Format
-          %dd= @submission_latest.hasOntologyLanguage
-          %dt Contact
-          %dd= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
-        
-        - categories_hash = LinkedData::Client::Models::Category.all_to_hash
-        - categories = @ontology.hasDomain
-        - unless categories.empty?
-          %dt Categories
-          %dd= categories.map {|c| categories_hash[c].name}.sort.join(", ")
-        - groups_hash = LinkedData::Client::Models::Group.all_to_hash
-        - groups = @ontology.group
-        - unless groups.empty?
-          %dt Groups
-          %dd= groups.map {|g| groups_hash[g].name}.sort.join(", ")
-        = raw additional_details
+  -# Submissions pane
+  - unless @submissions.empty?
+    %section.ont-metadata-card.ont-subs-card
+      %div.ont-section-toolbar
+        %header.pb-2.font-weight-bold Submissions
+        = link_to(new_ontology_submission_path(@ontology.acronym), "aria-label": "Add submission", title: "Add submission") do
+          %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.75rem;"}
+        - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
+          = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), "aria-label": "Edit latest submission", title: "Edit latest submission") do
+            %i.fas.fa-user-edit{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
+      = render partial: "submissions"
 
-  -# Metrics pane
-  %section.border.rounded.ont-metadata-card.ont-metrics-card
-    %header.font-weight-bold 
-      Metrics
-      = link_to("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", target: "_blank", aria: {label: "View individual metrics definitions"}, title: "View individual metrics definitions") do
-        %i.fas.fa-lg.fa-question-circle{aria: {hidden: "true"}, style: "margin-left: .25em"}
-    %div{style: "padding: 24px 36px;"}
+  -# Views pane (don't show if the ontology is a view - we don't allow views of views).
+  - unless @ontology.view?
+    %section.ont-metadata-card.ont-views-card
+      %div.ont-section-toolbar
+        %header.pb-2.font-weight-bold= "Views of #{@ontology.acronym}"
+        - ont_id_esc = CGI.escape(@ontology.id)
+        -# TODO: I don't think we should have brackets in the URL parameters.
+        - if session[:user].nil?
+          %a{href: "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", "aria-label": "Create new view", title: "Create new view"}
+            %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
+        - else
+          %a{href: "/ontologies/new?ontology[viewOf]=#{ont_id_esc}"}
+            %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
+      - if @views.empty?
+        %p.font-italic= "No views of #{@ontology.acronym} available"
+      - else
+        %div.border-top
+          %dl
+            - for view in @views
+              - next unless view.access?(session[:user])
+              %dt= link_to(view.name, ontology_path(view.acronym))
+              -# TODO: Can we put this code in the controller?
+              - view_submissions = view.explore.submissions.sort {|a,b| b.released <=> a.released } || [] rescue []
+              - view_sub_latest = view.explore.latest_submission({:include_status => 'ready'}) rescue view.explore.latest_submission({:include_status => 'ready', include: ""})
+              - view_sub_latest ||= view_submissions.first
+              - begin
+                - view_description = view_sub_latest.description
+              - rescue
+                - view_description = nil
+              - unless view_description.nil?
+                %dd
+                  %div= view_description
+      
+  %div.right-hand-content
+    
+    -# Metrics pane
+    %section.ont-metadata-card.ont-metrics-card
+      %div.ont-section-toolbar
+        %header.pb-2.font-weight-bold Metrics
+        = link_to("http://www.bioontology.org/wiki/index.php/Ontology_Metrics", target: "_blank", "aria-label": "View individual metrics definitions", title: "View individual metrics definitions") do
+          %i.fas.fa-lg.fa-question-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
       - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
         %p.font-italic= "We have not yet calculated metrics for #{@ontology.acronym}"
       - else
-        %table.table.table-sm.table-hover
+        %table.table.table-sm
           %tr
-            %td{style: "border-top: none;"} Classes
-            %td{style: "border-top: none;"}= @metrics.classes
+            %td Classes
+            %td{style: "text-align: right"}= number_with_delimiter(@metrics.classes)
           %tr
             %td Individuals
-            %td= @metrics.individuals
+            %td= number_with_delimiter(@metrics.individuals)
           %tr
             %td Properties
-            %td= @metrics.properties
+            %td= number_with_delimiter(@metrics.properties)
           %tr
             %td Maximum depth
-            %td= @metrics.maxDepth
+            %td= number_with_delimiter(@metrics.maxDepth)
           %tr
             %td Maximum number of children
-            %td= @metrics.maxChildCount
+            %td= number_with_delimiter(@metrics.maxChildCount)
           %tr
             %td Average number of children
-            %td= @metrics.averageChildCount
+            %td= number_with_delimiter(@metrics.averageChildCount)
           %tr
             %td Classes with a single child
-            %td= @metrics.classesWithOneChild
+            %td= number_with_delimiter(@metrics.classesWithOneChild)
           %tr
             %td Classes with more than 25 children
-            %td= @metrics.classesWithMoreThan25Children
+            %td= number_with_delimiter(@metrics.classesWithMoreThan25Children)
           %tr
             %td Classes with no definition
-            %td= @metrics.classesWithNoDefinition
+            %td= number_with_delimiter(@metrics.classesWithNoDefinition)
 
-  -# Submissions pane
-  - unless @submissions.empty?
-    %section.border.rounded.ont-metadata-card.ont-subs-card
-      %header.font-weight-bold Submissions
-      = render partial: "submissions"
-
-  -# Analytics pane
-  %section.border.rounded.ont-metadata-card.ont-analytics-card
-    %header.font-weight-bold
-      Analytics
-      - if visits_data
-        = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", aria: {label: "Download as CSV"}, title: "Download as CSV") do
-          %i.fas.fa-lg.fa-download{aria: {hidden: "true"}, style: "margin-left: .25em"}
-    %div{style: "padding: 15px 15px;"}
+    -# Visits pane
+    %section.ont-metadata-card.ont-analytics-card
+      %div.ont-section-toolbar
+        %header.pb-2.font-weight-bold Visits
+        - if visits_data
+          = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", "aria-label": "Download as CSV", title: "Download as CSV") do
+            %i.fas.fa-lg.fa-download{"aria-hidden": "true", style: "margin-left: 0.5rem"}
       = render partial: "visits"
 
-  -# Views pane (don't show if the ontology is a view - we don't allow views of views).
-  - unless @ontology.view?
-    %section.border.rounded.ont-metadata-card.ont-views-card
-      %header.font-weight-bold= "Views of #{@ontology.acronym}"
-      %div{style: "padding: 24px 36px;"}
-        - if @views.empty?
-          %p.font-italic= "No views of #{@ontology.acronym} available"
-        - else
-          %dl
-            - for view in @views
-              - next unless view.access?(session[:user])
-              %dt= link_to(view.name, ontology_path(view.acronym))
-              -# TODO: Can we put this code in the controller?
-              - view_submissions = view.explore.submissions.sort {|a,b| b.released <=> a.released } || [] rescue []
-              - view_sub_latest = view.explore.latest_submission({:include_status => 'ready'}) rescue view.explore.latest_submission({:include_status => 'ready', include: ""})
-              - view_sub_latest ||= view_submissions.first
-              - begin
-                - view_description = view_sub_latest.description
-              - rescue
-                - view_description = nil
-              - unless view_description.nil?
-                %dd
-                  %div= view_description
-        
-        - ont_id_esc = CGI.escape(@ontology.id)
-        -# TODO: I don't think we should have brackets in the URL parameters.
-        - if session[:user].nil?
-          %a{href: "/login?redirect=#{URI.escape("/ontologies/new?ontology[viewOf]=#{ont_id_esc}", Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))}", role: "button", class: "btn btn-outline-secondary mt-4"} Create new view
-        - else
-          %a{href: "/ontologies/new?ontology[viewOf]=#{ont_id_esc}", role: "button", class: "btn btn-outline-secondary mt-4"} Create new view      
-
-  -# Projects pane
-  %section.border.rounded.ont-metadata-card.ont-projects-card
-    %header.font-weight-bold= "Projects using #{@ontology.acronym}"
-    %div{style: "padding: 24px 36px;"}
+    -# Projects pane
+    %section.ont-metadata-card.ont-projects-card
+      %div.ont-section-toolbar
+        %header.pb-2.font-weight-bold= "Projects using #{@ontology.acronym}"
+        = link_to(new_project_path(), "aria-label": "Create new project", title: "Create new project") do
+          %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
       - if @projects.empty?
         %p.font-italic= "No projects using #{@ontology.acronym}"
-      - elsif @projects.size == 1
-        %p= link_to(@projects.first.name, project_path(@projects.first.acronym))
       - else
-        %ul
+        %div.border-top
           - for project in @projects
-            %li= link_to(project.name, project_path(project.acronym))
-      = link_to("Create new project", new_project_path(), role: "button", class: "btn btn-outline-secondary mt-4")
+            %p= link_to(project.name, project_path(project.acronym))
+
diff --git a/app/views/ontologies/_submissions.html.haml b/app/views/ontologies/_submissions.html.haml
index 59bae23667..574e985619 100644
--- a/app/views/ontologies/_submissions.html.haml
+++ b/app/views/ontologies/_submissions.html.haml
@@ -3,13 +3,13 @@
 - more_colspan = 4
 - more_colspan = 3 if @ont_restricted
 
-#versions_content.click_versions_collapse{style: "padding: 24px 36px;"}
-  %table#ontology_versions.table.table-striped
+%div.click_versions_collapse
+  %table#ontology_versions.table.table-sm.table-striped
     %thead
       %tr
         %th Version
-        %th Release Date
-        %th Upload Date
+        %th Released
+        %th Uploaded
         - unless @ont_restricted
           %th Downloads
     - begin
diff --git a/app/views/ontologies/_visits.html.haml b/app/views/ontologies/_visits.html.haml
index 99477fa47e..038eeae784 100644
--- a/app/views/ontologies/_visits.html.haml
+++ b/app/views/ontologies/_visits.html.haml
@@ -1,4 +1,4 @@
-- months_to_show = 18
+- months_to_show = 12
 
 - if visits_data
   %canvas#visits_chart

From 1ba1535caaf0beb414a112333beac288b0b26477 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Fri, 17 Aug 2018 15:59:42 -0700
Subject: [PATCH 90/95] Gemfile.lock update

---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 6dbe1e5075..a5e0e748cc 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -152,7 +152,7 @@ GEM
     newrelic_rpm (5.3.0.346)
     nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
-    oj (3.6.5)
+    oj (3.6.6)
     open_uri_redirections (0.2.1)
     popper_js (1.14.3)
     pry (0.11.3)

From c6f1a9a03659c7991acdc48269235ed74a79af84 Mon Sep 17 00:00:00 2001
From: Alex Skrenchuk <alexskr@stanford.edu>
Date: Mon, 20 Aug 2018 12:09:21 -0700
Subject: [PATCH 91/95] Robots.txt for environments

---
 app/controllers/robots_controller.rb | 7 +++++++
 config/robots/appliance.txt          | 0
 config/robots/development.txt        | 2 ++
 config/robots/production.txt         | 4 ++++
 config/robots/staging.txt            | 2 ++
 config/routes.rb                     | 3 +++
 6 files changed, 18 insertions(+)
 create mode 100644 app/controllers/robots_controller.rb
 create mode 100644 config/robots/appliance.txt
 create mode 100644 config/robots/development.txt
 create mode 100644 config/robots/production.txt
 create mode 100644 config/robots/staging.txt

diff --git a/app/controllers/robots_controller.rb b/app/controllers/robots_controller.rb
new file mode 100644
index 0000000000..29baa614b6
--- /dev/null
+++ b/app/controllers/robots_controller.rb
@@ -0,0 +1,7 @@
+class RobotsController < ApplicationController
+  def index
+    robots = File.read(Rails.root + "config/robots/#{Rails.env}.txt")
+
+    render text: robots, layout: false, content_type: 'text/plain'
+  end
+end
diff --git a/config/robots/appliance.txt b/config/robots/appliance.txt
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/config/robots/development.txt b/config/robots/development.txt
new file mode 100644
index 0000000000..c6742d8a8c
--- /dev/null
+++ b/config/robots/development.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: /
diff --git a/config/robots/production.txt b/config/robots/production.txt
new file mode 100644
index 0000000000..91793d91b3
--- /dev/null
+++ b/config/robots/production.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Disallow: /mappings
+Disallow: /*mappings
+Disallow: /projects/
diff --git a/config/robots/staging.txt b/config/robots/staging.txt
new file mode 100644
index 0000000000..c6742d8a8c
--- /dev/null
+++ b/config/robots/staging.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: /
diff --git a/config/routes.rb b/config/routes.rb
index e0dcd13a96..dc9bf566f1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -52,6 +52,9 @@
   # Analytics endpoint
   get '/analytics' => 'analytics#track'
 
+  # Robots.txt
+  get '/robots.txt' => 'robots#index'
+
   # Ontologies
   get '/ontologies/view/edit/:id' => 'ontologies#edit_view', :constraints => { :id => /[^\/?]+/ }
   get '/ontologies/view/new/:id' => 'ontologies#new_view'

From e8a7dbe974ac41406edc332559ed1fda28685d72 Mon Sep 17 00:00:00 2001
From: Alex Skrenchuk <alexskr@stanford.edu>
Date: Mon, 20 Aug 2018 12:50:38 -0700
Subject: [PATCH 92/95] move robots.txt to config/robots

---
 public/robots.txt | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 public/robots.txt

diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index 03a1d62423..0000000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-# See http://www.robotstxt.org/wc/norobots.html for documentation on how to use the robots.txt file
-#
-# To ban all spiders from the entire site uncomment the next two lines:
-# User-Agent: *
-# Disallow: /
-
-User-Agent: *
-Disallow: /projects/

From 27dc4121bf5bfaf3a72e7af7d3542d3da330f775 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 6 Sep 2018 15:50:58 -0700
Subject: [PATCH 93/95] Don't show add/edit buttons for non-admins

---
 app/views/ontologies/_metadata.html.haml | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index dba3800fb7..80883e280d 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -56,11 +56,12 @@
     %section.ont-metadata-card.ont-subs-card
       %div.ont-section-toolbar
         %header.pb-2.font-weight-bold Submissions
-        = link_to(new_ontology_submission_path(@ontology.acronym), "aria-label": "Add submission", title: "Add submission") do
-          %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.75rem;"}
-        - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
-          = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), "aria-label": "Edit latest submission", title: "Edit latest submission") do
-            %i.fas.fa-user-edit{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
+        - if @ontology.admin?(session[:user])
+          = link_to(new_ontology_submission_path(@ontology.acronym), "aria-label": "Add submission", title: "Add submission") do
+            %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.75rem;"}
+          - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
+            = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), "aria-label": "Edit latest submission", title: "Edit latest submission") do
+              %i.fas.fa-user-edit{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
       = render partial: "submissions"
 
   -# Views pane (don't show if the ontology is a view - we don't allow views of views).

From fac86185f96c4007e69257f2b999b2eed2e16fc3 Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 6 Sep 2018 16:08:02 -0700
Subject: [PATCH 94/95] Don't show icons for nonexistent links

---
 app/views/layouts/_ontology_viewer.html.haml | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 185401085c..989d6d3a24 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -84,10 +84,12 @@
               %i.fas.fa-lg.fa-link{"aria-hidden": true}
           = link_to(sub.homepage, "aria-label": "Ontology home page", title: "Ontology home page", target: "_blank") do
             %i.fas.fa-lg.fa-home{"aria-hidden": true}
-          = link_to(sub.documentation, "aria-label": "Ontology documentation", title: "Ontology documentation", target: "_blank") do
-            %i.fas.fa-lg.fa-book-reader{"aria-hidden": true}
-          = link_to(sub.publication, "aria-label": "Ontology publications", title: "Ontology publications", target: "_blank") do
-            %i.fas.fa-lg.fa-book{"aria-hidden": true}
+          - unless sub.documentation.nil?
+            = link_to(sub.documentation, "aria-label": "Ontology documentation", title: "Ontology documentation", target: "_blank") do
+              %i.fas.fa-lg.fa-book-reader{"aria-hidden": true}
+          - unless sub.publication.nil?
+            = link_to(sub.publication, "aria-label": "Ontology publications", title: "Ontology publications", target: "_blank") do
+              %i.fas.fa-lg.fa-book{"aria-hidden": true}
         - if @ontology.admin?(session[:user])
           = link_to(edit_ontology_path(@ontology.acronym), "aria-label": "Edit ontology details", title: "Edit ontology details") do
             %i.fas.fa-lg.fa-user-edit

From 5c5a2300ca127757e13dfba893eca5e9af84108c Mon Sep 17 00:00:00 2001
From: Jennifer Vendetti <vendetti@stanford.edu>
Date: Thu, 13 Sep 2018 13:05:52 -0700
Subject: [PATCH 95/95] Gemfile.lock update

---
 Gemfile.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index a5e0e748cc..64a8537016 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -61,7 +61,7 @@ GEM
     airbrussh (1.3.0)
       sshkit (>= 1.6.1, != 1.7.0)
     arel (6.0.4)
-    autoprefixer-rails (9.1.1)
+    autoprefixer-rails (9.1.4)
       execjs
     bootstrap (4.1.3)
       autoprefixer-rails (>= 6.0.3)
@@ -149,10 +149,10 @@ GEM
       net-ssh (>= 2.6.5)
     net-ssh (5.0.2)
     netrc (0.11.0)
-    newrelic_rpm (5.3.0.346)
+    newrelic_rpm (5.4.0.347)
     nokogiri (1.8.4)
       mini_portile2 (~> 2.3.0)
-    oj (3.6.6)
+    oj (3.6.10)
     open_uri_redirections (0.2.1)
     popper_js (1.14.3)
     pry (0.11.3)
@@ -236,7 +236,7 @@ GEM
     tilt (2.0.8)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
-    uglifier (4.1.18)
+    uglifier (4.1.19)
       execjs (>= 0.3.0, < 3)
     unf (0.1.4)
       unf_ext