Merge pull request #30 from Archaeology-ABM/tuning-module-page

Tuning module page
Archaeology-ABM · Aug 23, 2024 · 495fb7b · 495fb7b
2 parents ca5cde7 + d98e795
commit 495fb7b
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 43 deletions.
diff --git a/website_generator/DESCRIPTION b/website_generator/DESCRIPTION
@@ -15,4 +15,5 @@ Imports:
     magrittr (>= 2.0.3),
     purrr (>= 0.3.4),
     rmarkdown (>= 2.14),
-    yaml (>= 2.3.5)
+    yaml (>= 2.3.5),
+    stringr (>= 1.5.1)
diff --git a/website_generator/generate_source.R b/website_generator/generate_source.R
@@ -2,6 +2,7 @@ library(magrittr)
 #library(kableExtra)
 library(DT)
 library(git2r)
+library(stringr)
 
 repo_path <- ".."
 
@@ -47,7 +48,7 @@ nassa_table <- purrr::map_dfr(
                        badge_series(nassa_yml$modellingKeywords, type = 'badgeModelling'),
                        badge_series(nassa_yml$programmingKeywords, type = 'badgeProgramming'),
                        collapse = '&nbsp;'),
-      `View` = paste0("<a href=\"", path, ".html\"><i class='fa fa-external-link'></i></a>"),
+      `View` = paste0("<a href=\"", path, ".html\"><i class='fa fa-right-to-bracket'></i></a>"),
     )
   }
 )

diff --git a/website_generator/website_source/_site.yml b/website_generator/website_source/_site.yml
@@ -2,19 +2,22 @@ name: "nassa-modules"
 navbar:
 #  title: "NASSA Library Web User Interface"
   left:
-    - text: "Module list"
+    - text: "Main"
       icon: fa-list
       href: index.html
     - text: "About"
       icon: fa-book
       href: https://archaeology-abm.github.io/NASSA-hub/library
-    - text: "NASSA Hub"
-      icon: fa-home
-      href: https://archaeology-abm.github.io/NASSA-hub
-  right:
+    - text: "Guide for submissions"
+      icon: fa-map
+      href: https://archaeology-abm.github.io/NASSA-hub/guide
     - text: "Repository"
       icon: fa-github
       href: https://github.com/Archaeology-ABM/NASSA-modules
+  right:
+    - text: "NASSA Hub"
+      icon: fa-home
+      href: https://archaeology-abm.github.io/NASSA-hub
 output:
   html_document:
     theme: spacelab

diff --git a/website_generator/website_source/css/styles.css b/website_generator/website_source/css/styles.css
@@ -1,14 +1,19 @@
 body .main-container {
-  max-width: 1000px;
+  max-width: 1100px;
+  min-width: 850px;
+}
+
+#header {
+    display: none;
 }
 
 #nassa_table_container {
-  width: 90%;
+  width: 87%;
   float: left;
   z-index: -10;
 }
 #customsidebar {
-  width: 9%;
+  width: 12%;
   float: right;
   z-index: -10;
   padding: 0px;
@@ -107,4 +112,4 @@ a {
 
 button {
   min-height: 30px;
-}
+}
diff --git a/website_generator/website_source/index.Rmd b/website_generator/website_source/index.Rmd
@@ -1,5 +1,5 @@
 ---
-#title: NASSA modules
+title: NASSA Library
 ---
 
 <table class='pageHeader'>
@@ -16,16 +16,17 @@
 
 <div id="nassa_table_container">
 ```{r, echo=FALSE}
-nassa_table_print <- nassa_table[, c('title', 'contributors', 'moduleVersion', 'lastUpdateDate', 
-                                     'Keywords', 
-                                     'View')]
-colDisplayNames <-                 c('Title', 'Contributors', 'Version', 'Last update', 
-                                     'Keywords', 
-                                     '')
+nassa_table_print <- nassa_table[, c('View',
+                                     'title', 'contributors', 'moduleVersion', 'lastUpdateDate', 
+                                     'Keywords')]
+colDisplayNames <-                 c('',
+                                     'Title', 'Contributors', 'Version', 'Last update', 
+                                     'Keywords')
 
 options(DT.options = list(
   pageLength = 25, 
   language = list(search = 'Search by Last update, Contributors, Title or keyword:'), 
+  search = list(regex = TRUE),
   initComplete = DT::JS(
     "function(settings, json) {",
     "$(this.api().table().header()).css({'background-color': '#03989e'});",
@@ -54,18 +55,59 @@ DT::datatable(nassa_table_print,
 ```
 </div>
 
+```{r, echo=FALSE}
+keywords <- unlist(lapply(stringr::str_match_all(nassa_table$Keywords, "<span[^>]*>(.*?)</span>"), function(x) x[,1]))
+
+getTopKeywordBadgesPerID <- function(keywordList, htmlID, curtailThreshold)
+{
+  keywordsOfID <- keywords[stringr::str_detect(keywordList, htmlID)]
+  keywordNumberLevels <- length(unique(keywordsOfID))
+  keywordsOfIDFreq <- sort(table(keywordsOfID), decreasing = TRUE)[1:(min(curtailThreshold, keywordNumberLevels))]
+  names(keywordsOfIDFreq) <- mapply(function(html, insert) {
+    sub("</", paste0(" <i style='font-size: 50%'>(", insert, ")</i></"), html)
+  }, names(keywordsOfIDFreq), keywordsOfIDFreq)
+  return(keywordsOfIDFreq)
+}
+
+moduleTypeKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeModuleType", 5)
+languageKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeLanguage", 5)
+modellingKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeModelling", 5)
+programmingKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeProgramming", 5)
+regionsKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeRegions", 5)
+periodsKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgePeriods", 5)
+subjectsKeywordsFreq <- getTopKeywordBadgesPerID(keywords, "badgeSubjects", 5)
+```
+
 <div id="customsidebar">
   <button id="resetFilter">Clear</button>
   <br>
-  <h4>Keyword types</h4>
+  <h4>Module type</h4>
+  <p>
+    `r paste0(names(moduleTypeKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Language</h4>
+  <p>
+    `r paste0(names(languageKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Modelling</h4>
+  <p>
+    `r paste0(names(modellingKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Programming</h4>
+  <p>
+    `r paste0(names(programmingKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Regions</h4>
+  <p>
+    `r paste0(names(regionsKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Periods</h4>
+  <p>
+    `r paste0(names(periodsKeywordsFreq), collapse = "<br>" )`
+  </p>
+  <h4>Subjects</h4>
   <p>
-    <span class="badge" id="badgeModuleType">Module type</span>
-    <span class="badge" id="badgeLanguage">Programming language</span>
-    <span class="badge" id="badgeRegions">Regions</span>
-    <span class="badge" id="badgePeriods">Periods</span>
-    <span class="badge" id="badgeSubjects">Subjects</span>
-    <span class="badge" id="badgeModelling">Modelling</span>
-    <span class="badge" id="badgeProgramming">Programming</span>
+    `r paste0(names(subjectsKeywordsFreq), collapse = "<br>" )`
   </p>
 </div>
 

diff --git a/website_generator/website_source/js/selectKeyword.js b/website_generator/website_source/js/selectKeyword.js
@@ -13,7 +13,7 @@ $(document).ready(function() {
     //}
 
     const searchInput = document.querySelector('#nassa_table_container input[type="search"]');
-    const keywordColumnIndex = 6; // Assuming "Keywords" is the 7th column (0-indexed)
+    //const keywordColumnIndex = 6; // Assuming "Keywords" is the 7th column (0-indexed)
     const event = new Event('input', { bubbles: true });
 
     // Add click event listener to each badge
@@ -23,49 +23,45 @@ $(document).ready(function() {
 
       // Apply the search filter with the keyword
       if (keyword) {
-        //table.columns().search(keyword).draw(); 
         // Select the search input within the nassa_table_container
 
-
+        //table.column(keywordColumnIndex).search("^\\b" + keyword + "\\b$", true, false, true).draw();
+
         // Check if the search input exists
         if (searchInput) {
+          // Handle special case for single-character keywords like "R"
+          var searchValue;
+          if (keyword.length === 1) {
+            searchValue = '\\b' + keyword + '\\b'; // Word boundary regex for exact match
+          } else {
+            searchValue = keyword;
+          }
+
           // Set the value to your desired string
           if (searchInput.value.length > 0)
           {
-            searchInput.value = searchInput.value + ' ' + keyword;
+            searchInput.value = searchInput.value + ' ' + searchValue;
           }
           else
           {
-            searchInput.value = keyword;
+            searchInput.value = searchValue;
           }
 
-          // Apply a custom search to the "Keywords" column
-          table.column(keywordColumnIndex).search(function(data, type) {
-            // Check if the data in the "Keywords" column contains the exact keyword
-            const regex = new RegExp(`(^|,\\s*)${searchTerm}(,|$)`, 'i');
-            return regex.test(data);
-          });
-
           // Trigger the input event to apply the search filter immediately
           searchInput.dispatchEvent(event);
 
-          table.draw(); // Redraw the table to apply the custom filter
-
           //console.log('✔️ Search input value has been set successfully!');
         } else {
           //console.error('❗ Search input not found within the specified container.');
         }
       }
     });
 
-    // Optional: Add a button to reset the search filter
-    //$('.legend').append('<button id="resetFilter" style="margin-left: 20px;">Show All</button>');
     // Reset the search filter when 'Show All' is clicked
     $(document).on('click', '#resetFilter', function() {
       //console.log('Reset button clicked.'); // Debugging output
       searchInput.value = ''
       searchInput.dispatchEvent(event);
-      //table.search('').draw(); 
     });
   });