Merge pull request #174 from brain-bican/issue_62

Taxonomy view navigation support

Dockerfile

@@ -78,8 +78,8 @@ RUN python3 -m pip install deepmerge==1.1.0
 RUN python3 -m pip install numpy==1.26.4
 RUN python3 -m pip install marshmallow==3.21.1
 RUN python3 -m pip install python-dateutil==2.9.0
-RUN python3 -m pip install --no-deps cas-tools==0.0.1.dev40
-RUN python3 -m pip install --no-deps tdta==0.1.0.dev6
+RUN python3 -m pip install --no-deps cas-tools==0.0.1.dev42
+RUN python3 -m pip install --no-deps tdta==0.1.0.dev12
 #RUN Rscript $WORKSPACE/dendR/install_packages.R
 
 

README.md

@@ -20,7 +20,7 @@ With TDT you can:
 - To use the latest version of TDT read the [Update](https://brain-bican.github.io/taxonomy-development-tools/Update/) documentation. 
 
 ### Quick Demo
-<video src="https://github.com/brain-bican/taxonomy-development-tools/assets/73784267/e6e45921-603e-41f2-a2fa-78d810a68f8f" width="700" />
+<video src="https://github.com/brain-bican/taxonomy-development-tools/assets/73784267/e6e45921-603e-41f2-a2fa-78d810a68f8f" width="700"></video>
 
 
 

docs/UserInterface.md

@@ -144,13 +144,14 @@ Annotation tables are equipped to display data in a hierarchical structure, offe
  
 
 <p align="center">
-    <img src="https://raw.githubusercontent.com/brain-bican/taxonomy-development-tools/main/docs/images/screenshots/tree_view.png" alt="Sort and Filter by Column" width="500"/>
+    <img src="https://raw.githubusercontent.com/brain-bican/taxonomy-development-tools/main/docs/images/screenshots/tree_view.png" alt="Sort and Filter by Column" width="1000"/>
 </p>
 &nbsp;
 &nbsp;
 
+While in the Taxonomy View, users can visually explore the taxonomy's structure in a read-only format, providing a clear overview of the hierarchical relationships. To switch back to a more detailed and interactive tabular format, click the `Table View` button. Alternatively, users can use `Browse in table` to jump to the node in the table view.
 
-While in the Taxonomy View, users can visually explore the taxonomy's structure in a read-only format, providing a clear overview of the hierarchical relationships. To switch back to a more detailed and interactive tabular format, click the `Table View` button.
+Search functionality is available in the Taxonomy View, allowing users to quickly locate specific nodes within the taxonomy. By entering a search term in the search bar, users can reveal the term in the taxonomy tree.
 
 ## Table Management
 

nanobot/src/assets/bstreeview.js

@@ -8,7 +8,7 @@
  * Project: https://github.com/jonmiles/bootstrap-treeview (bootstrap 3)
  *        : https://jonmiles.github.io/bootstrap-treeview/
  * Project: https://github.com/chniter/bstreeview (bootstrap 4)
- * Project: https://github.com/nhmvienna/bs5treeview (bootstrap 5)  (nanobot uses this version)
+ * Project: https://github.com/nhmvienna/bs5treeview (bootstrap 5)  (TDT uses this version)
  */
 ; (function ($, window, document, undefined) {
     "use strict";

nanobot/src/resources/review.html

@@ -17,12 +17,12 @@
 
     update_reviews_section();
   });
-  
+
   function update_reviews_section(records, accession_prefix) {
     comments_json_url = "http://127.0.0.1:5000/reviews?accession_id=" + $("*[name='cell_set_accession']").first()[0].value;
     $.getJSON(comments_json_url).done(function(review_data) {
       review_data.sort(function(a,b){
-        return new Date(a.time) - new Date(b.time);  // sort old to new
+        return new Date(a.datestamp) - new Date(b.datestamp);  // sort old to new
       });
       // console.log("Review data: ", review_data);
 
@@ -34,12 +34,12 @@
         review_style = "text-success";
         if (result.review == "Disagree") {
           review_style = "text-danger";
-        } 
+        }
         editable = "visible";
-        if (result.name != user_name) {
+        if (result.reviewer != user_name) {
           editable = "hidden";
         }
-        review_date = new Date(result.time);
+        review_date = new Date(result.datestamp);
         const content = `
         <div class="card mb-3" name="review-card">
             <div class="card-body">
@@ -49,16 +49,16 @@
                 <div class="w-100">
                   <div class="d-flex justify-content-between align-items-center mb-3">
                     <h6 class="text-primary fw-bold mb-0">
-                      <div name="reviewer" style="display: inline;">${result.name}</div>
+                      <div name="reviewer" style="display: inline;">${result.reviewer}</div>
                       <span class="text-dark ms-2 fw-normal" name="review-explanation">${result.explanation}</span>
                     </h6>
                     <p class="mb-0">${review_date.toLocaleString()}</p>
-                    <p class="mb-0" name="review-time" hidden>${result.time}</p>
+                    <p class="mb-0" name="review-time" hidden>${result.datestamp}</p>
                   </div>
                   <div class="d-flex justify-content-between align-items-center">
                     <p class="small mb-0" style="color: #aaa; visibility: ${editable}">
                       <a href="#!" class="link-grey" name="delete-comment">Remove</a> •
-                      <a href="#!" class="link-grey" name="edit-comment">Edit</a> 
+                      <a href="#!" class="link-grey" name="edit-comment">Edit</a>
                     </p>
                   </div>
                 </div>
@@ -78,50 +78,50 @@ <h6 class="text-primary fw-bold mb-0">
     $('#add-comment-submit').click(function(e){
       e.preventDefault();
       modal_data = {
-        "name": $("#modal-user-name").val(),
+        "reviewer": $("#modal-user-name").val(),
         "review": $("#modal-review").val(),
         "explanation": $("#modal-explanation").val(),
-        "time": new Date().toISOString(),
+        "datestamp": new Date().toISOString(),
         "target_node_accession": $("*[name='cell_set_accession']").first()[0].value
       };
       $.ajax({
           url: "http://127.0.0.1:5000/reviews",
           type: "POST",
           data: JSON.stringify(modal_data),
           dataType: 'json',
-          headers: { 
+          headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/json' 
+            'Content-Type': 'application/json'
           },
           success: function(data){
             console.log("Successfully submitted.")
             update_reviews_section();
             $('#addReviewModal').modal('toggle');
           }
       });
-    }); 
+    });
   });
 
   review_card_to_delete = null;
   // Delete review action
-  $(document).ready(function(){ 
+  $(document).ready(function(){
     $(document).on('click', 'a[name="delete-comment"]', function(e){
       e.preventDefault();
       review_card_to_delete = $(this).closest('div[name="review-card"]');
       $('#deleteReviewModal').modal('show'); // Show delete modal box.
-    }); 
+    });
   });
 
   // Delete review confirm action
-  $(document).ready(function(){ 
+  $(document).ready(function(){
     $('#delete-comment-submit').click(function(e){
       e.preventDefault();
       if (review_card_to_delete != null) {
         var review_time = review_card_to_delete.find('p[name="review-time"]').first().text();
         var reviewer = review_card_to_delete.find('div[name="reviewer"]').first().text();
         var review_data = {
-          "time": review_time,
-          "name": reviewer,
+          "datestamp": review_time,
+          "reviwer": reviewer,
           "target_node_accession": $("*[name='cell_set_accession']").first()[0].value,
         };
         console.log("Review data: ", review_data);
@@ -130,9 +130,9 @@ <h6 class="text-primary fw-bold mb-0">
             type: "DELETE",
             data: JSON.stringify(review_data),
             dataType: 'json',
-            headers: { 
+            headers: {
               'Accept': 'application/json',
-              'Content-Type': 'application/json' 
+              'Content-Type': 'application/json'
             },
             success: function(data){
               console.log("Successfully submitted.")
@@ -142,11 +142,11 @@ <h6 class="text-primary fw-bold mb-0">
             }
         });
       }
-    }); 
+    });
   });
 
   // Update review action
-  $(document).ready(function(){ 
+  $(document).ready(function(){
     $(document).on('click', 'a[name="edit-comment"]', function(e){
       e.preventDefault();
       review_card_to_update = $(this).closest('div[name="review-card"]');
@@ -155,43 +155,43 @@ <h6 class="text-primary fw-bold mb-0">
       var explanation = review_card_to_update.find('span[name="review-explanation"]').first().text();
       var review_type = review_card_to_update.find('p[name="review-review"]').first().text();
       console.log("Review data: ", review_time, reviewer, explanation, review_type);
-      
+
       var updateReviewModal = document.getElementById('updateReviewModal');
       updateReviewModal.querySelector('#update-modal-user-name').value=reviewer;
       updateReviewModal.querySelector('#update-modal-explanation').value=explanation;
       updateReviewModal.querySelector('#update-modal-time').value=review_time;
       updateReviewModal.querySelector('#update-modal-review').options[["Agree", "Disagree"].indexOf(review_type)].selected = true;
-      $('#updateReviewModal').modal('show'); 
-    }); 
+      $('#updateReviewModal').modal('show');
+    });
   });
 
     // Update review submit action
     $(document).ready(function(){
     $('#update-comment-submit').click(function(e){
       e.preventDefault();
       modal_data = {
-        "name": $("#update-modal-user-name").val(),
+        "reviewer": $("#update-modal-user-name").val(),
         "review": $("#update-modal-review").val(),
         "explanation": $("#update-modal-explanation").val(),
-        "time": $("#update-modal-time").val(),
+        "datestamp": $("#update-modal-time").val(),
         "target_node_accession": $("*[name='cell_set_accession']").first()[0].value
       };
       $.ajax({
           url: "http://127.0.0.1:5000/reviews",
           type: "PUT",
           data: JSON.stringify(modal_data),
           dataType: 'json',
-          headers: { 
+          headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/json' 
+            'Content-Type': 'application/json'
           },
           success: function(data){
             console.log("Successfully submitted.")
             update_reviews_section();
             $('#updateReviewModal').modal('toggle');
           }
       });
-    }); 
+    });
   });
 
 </script>
@@ -208,7 +208,7 @@ <h4 id="review-title" class="text-dark mb-0">Reviews (2)</h4>
             <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#addReviewModal">Add Review</button>
             </div>
         </div>
-        
+
         <div id="review-container">
             <!-- review cards will be appended here -->
         </div> <!-- review-container -->