Feature: Adding the instances views

Gemfile

@@ -9,7 +9,7 @@ gem 'uglifier', '>= 1.0.3'
 # gem 'therubyracer', platforms: :ruby
 # gem 'duktape'
 
-gem 'bootstrap', '~> 4.1.0'
+gem 'bootstrap', '~> 4.2.0'
 gem 'chart-js-rails'
 gem 'jquery-rails'
 gem 'jquery-ui-rails'

Gemfile.lock

@@ -6,7 +6,7 @@ GIT
     ontologies_api_client (2.0.2)
       activesupport (~> 5.2.6)
       excon
-      faraday
+      faraday (= 1.4.3)
       lz4-ruby
       multi_json
       oj
@@ -62,13 +62,13 @@ GEM
       sshkit (>= 1.6.1, != 1.7.0)
     arel (9.0.0)
     ast (2.4.2)
-    autoprefixer-rails (10.3.3.0)
+    autoprefixer-rails (10.4.2.0)
       execjs (~> 2)
-    bootstrap (4.1.3)
-      autoprefixer-rails (>= 6.0.3)
-      popper_js (>= 1.12.9, < 2)
-      sass (>= 3.5.2)
-    brakeman (5.1.1)
+    bootstrap (4.2.1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
+    brakeman (5.2.1)
     builder (3.2.4)
     capistrano (3.16.0)
       airbrussh (>= 1.0.0)
@@ -86,8 +86,9 @@ GEM
       capistrano-bundler (>= 1.1, < 3)
     capistrano-yarn (2.0.2)
       capistrano (~> 3.0)
-    capybara (3.35.3)
+    capybara (3.36.0)
       addressable
+      matrix
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.8)
       rack (>= 1.6.0)
@@ -101,35 +102,29 @@ GEM
     crass (1.0.6)
     cube-ruby (0.0.3)
     daemons (1.4.1)
-    dalli (2.7.11)
-    diff-lcs (1.4.4)
+    dalli (3.2.0)
+    diff-lcs (1.5.0)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
     erubi (1.10.0)
     erubis (2.7.0)
     eventmachine (1.2.7)
-    excon (0.85.0)
+    excon (0.91.0)
     execjs (2.8.1)
-    faraday (1.8.0)
+    faraday (1.4.3)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
-      faraday-httpclient (~> 1.0.1)
       faraday-net_http (~> 1.0)
       faraday-net_http_persistent (~> 1.1)
-      faraday-patron (~> 1.0)
-      faraday-rack (~> 1.0)
       multipart-post (>= 1.2, < 3)
       ruby2_keywords (>= 0.0.4)
     faraday-em_http (1.0.0)
     faraday-em_synchrony (1.0.0)
     faraday-excon (1.1.0)
-    faraday-httpclient (1.0.1)
     faraday-net_http (1.0.1)
     faraday-net_http_persistent (1.2.0)
-    faraday-patron (1.0.0)
-    faraday-rack (1.0.0)
-    ffi (1.15.4)
+    ffi (1.15.5)
     flamegraph (0.9.5)
     globalid (0.5.2)
       activesupport (>= 5.0)
@@ -144,7 +139,7 @@ GEM
     http-accept (1.7.0)
     http-cookie (1.0.4)
       domain_name (~> 0.5)
-    i18n (1.8.10)
+    i18n (1.9.1)
       concurrent-ruby (~> 1.0)
     iconv (1.0.8)
     jquery-rails (4.4.0)
@@ -153,8 +148,8 @@ GEM
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (6.0.1)
       railties (>= 3.2.16)
-    json (2.5.1)
-    listen (3.7.0)
+    json (2.6.1)
+    listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     loofah (2.12.0)
@@ -164,24 +159,23 @@ GEM
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (1.0.2)
+    matrix (0.4.2)
     method_source (1.0.0)
     mime-types (3.3.1)
       mime-types-data (~> 3.2015)
-    mime-types-data (3.2021.0901)
-    mini_mime (1.1.1)
-    mini_portile2 (2.6.1)
-    minitest (5.14.4)
+    mime-types-data (3.2022.0105)
+    mini_mime (1.1.2)
+    minitest (5.15.0)
     multi_json (1.15.0)
     multipart-post (2.1.1)
     mysql2 (0.5.2)
     net-scp (3.0.0)
       net-ssh (>= 2.6.5, < 7.0.0)
     net-ssh (6.1.0)
     netrc (0.11.0)
-    newrelic_rpm (8.0.0)
+    newrelic_rpm (8.4.0)
     nio4r (2.5.8)
-    nokogiri (1.12.5)
-      mini_portile2 (~> 2.6.1)
+    nokogiri (1.13.1-x86_64-darwin)
       racc (~> 1.4)
     oj (3.13.8)
     open_uri_redirections (0.2.1)
@@ -192,6 +186,8 @@ GEM
     pry (0.14.1)
       coderay (~> 1.1)
       method_source (~> 1.0)
+    psych (4.0.3)
+      stringio
     public_suffix (4.0.6)
     racc (1.5.2)
     rack (2.2.3)
@@ -225,12 +221,13 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.19.0, < 2.0)
-    rainbow (3.0.0)
+    rainbow (3.1.1)
     rake (13.0.6)
-    rb-fsevent (0.11.0)
+    rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rdoc (6.3.2)
+    rdoc (6.4.0)
+      psych (>= 4.0.0)
     recaptcha (5.8.1)
       json
     regexp_parser (2.1.1)
@@ -240,33 +237,33 @@ GEM
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
     rexml (3.2.5)
-    rspec-core (3.10.1)
-      rspec-support (~> 3.10.0)
-    rspec-expectations (3.10.1)
+    rspec-core (3.11.0)
+      rspec-support (~> 3.11.0)
+    rspec-expectations (3.11.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
-    rspec-mocks (3.10.2)
+      rspec-support (~> 3.11.0)
+    rspec-mocks (3.11.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
-    rspec-rails (5.0.2)
+      rspec-support (~> 3.11.0)
+    rspec-rails (5.1.0)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       railties (>= 5.2)
       rspec-core (~> 3.10)
       rspec-expectations (~> 3.10)
       rspec-mocks (~> 3.10)
       rspec-support (~> 3.10)
-    rspec-support (3.10.2)
-    rubocop (1.22.0)
+    rspec-support (3.11.0)
+    rubocop (1.25.1)
       parallel (~> 1.10)
-      parser (>= 3.0.0.0)
+      parser (>= 3.1.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml
-      rubocop-ast (>= 1.12.0, < 2.0)
+      rubocop-ast (>= 1.15.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.12.0)
+    rubocop-ast (1.15.1)
       parser (>= 3.0.1.1)
     ruby-progressbar (1.11.0)
     ruby2_keywords (0.0.5)
@@ -283,6 +280,14 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     select2-rails (4.0.13)
     sexp_processor (4.15.3)
     spawnling (2.1.5)
@@ -297,12 +302,13 @@ GEM
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
     stackprof (0.2.17)
+    stringio (3.0.1)
     temple (0.8.2)
     thin (1.8.1)
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
-    thor (1.1.0)
+    thor (1.2.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
     tzinfo (1.2.9)
@@ -321,10 +327,10 @@ GEM
       nokogiri (~> 1.8)
 
 PLATFORMS
-  ruby
+  x86_64-darwin-21
 
 DEPENDENCIES
-  bootstrap (~> 4.1.0)
+  bootstrap (~> 4.2.0)
   brakeman
   capistrano (~> 3.11)
   capistrano-bundler
@@ -364,8 +370,9 @@ DEPENDENCIES
   select2-rails
   stackprof
   thin
-  uglifier (>= 1.0.3)
+  turnout
+  uglifier (>= 4.2.0)
   will_paginate (~> 3.0)
 
 BUNDLED WITH
-   2.1.4
+   2.3.4

app/assets/javascripts/application.js

@@ -29,7 +29,11 @@
 //= require bp_recommender
 //= require bp_property_tree
 //= require home
+//= require_tree ./components
 //= require ontologies
 //= require projects
 //= require submissions
 
+customElements.define('data-table-loader', DataTableLoader );
+customElements.define('data-table', DataTable );
+customElements.define('instances-table', InstancesTable );

app/assets/javascripts/bioportal.js.erb

@@ -680,10 +680,11 @@ jQuery(document).ready(function(){
 function getAjaxContent() {
   // Look for anchors with a get_via_ajax class and replace the parent with the resulting ajax call
   $(".get_via_ajax").each(function(){
-    if (typeof $(this).attr("getting_content") === 'undefined') {
-      $(this).parent().load($(this).attr("href"));
-      $(this).attr("getting_content", true);
-    }
+      let elem = $(this)
+      let parent = elem.parent()
+      $.get(elem.attr("href"), (conceptLabel) => {
+          parent.html(conceptLabel)
+      })
   });
   setTimeout(getAjaxContent, 500);
 }

app/assets/javascripts/bp_class_tree.js.erb

@@ -59,7 +59,7 @@ function initClassTree() {
     }
   });
 
-  setConcept(jQuery(document).data().bp.ont_viewer.concept_id);
+  setConcept(getClassesConceptId());
   setOntology(jQuery(document).data().bp.ont_viewer.ontology_id);
   jQuery("#sd_content").scrollTo(jQuery('a.active'));
 
@@ -87,6 +87,7 @@ function initClassTree() {
 };
 
 function nodeClicked(node_id) {
+
   // Get current html and store data in cache (to account for changes since the cache was retrieved)
   setCacheCurrent();
 
@@ -130,7 +131,8 @@ function nodeClicked(node_id) {
     insertNotesTable(tabData["notes_table_data"]);
 
     wrapupTabChange(selectedTab);
-  } else {
+  }
+  else {
     jQuery.blockUI({ message: '<h1>' + '<%= image_tag src="jquery.simple.tree/spinner.gif" %>' + ' Loading Class...</h1>', showOverlay: false });
     jQuery.get('/ajax_concepts/'+jQuery(document).data().bp.ont_viewer.ontology_id+'/?conceptid='+node_id+'&callback=load',
       function(data){
@@ -150,6 +152,18 @@ function nodeClicked(node_id) {
       }
     );
   }
+
+  //TODO: think of if we can use the cache for instances
+  updateConceptInstances(getOntology() , node_id)
+
+}
+
+// Update instances table when a new concept in the tree view is clicked
+function updateConceptInstances(ontology_acronym,node_id){
+    $("#class-instances-data-table").ready(function() {
+        const instanceTable =  document.querySelector("#class-instances-data-table")
+        instanceTable.update(ontology_acronym, decodeURIComponent(node_id))
+    })
 }
 
 // Keep trying to put the tree view content in place (looks for #sd_content)
@@ -180,10 +194,20 @@ function placeTreeView(treeHTML) {
   }
 }
 
+
+/**
+ * Return the conceptid from
+ * the section url if the section is "classes"
+ * @returns {*|string}
+ */
+function getClassesConceptId(default_concept_id = "root"){
+    const ont_viewer_data =  jQuery(document).data().bp.ont_viewer
+    return ont_viewer_data.content_section === "classes" ? ont_viewer_data.concept_id : default_concept_id
+}
 // Retrieve the tree view using ajax
 function getTreeView() {
   jQuery.ajax({
-    url: "/ajax/classes/treeview?ontology="+jQuery(document).data().bp.ont_viewer.ontology_id+"&conceptid="+encodeURIComponent(jQuery(document).data().bp.ont_viewer.concept_id),
+    url: "/ajax/classes/treeview?ontology="+jQuery(document).data().bp.ont_viewer.ontology_id+"&conceptid="+encodeURIComponent(getClassesConceptId()),
     success: function(data) {
       placeTreeView(data);
     },