Merge branch 'Autocomplete'

Author: twhiteaker

LICENSE

@@ -1,3 +1,8 @@
+NOTE: This license document covers all software within this project
+except auto-complete.css and auto-complete.min.js which originated
+from Pixabay (https://github.com/Pixabay/JavaScript-autoComplete) and
+are distributed under the MIT license.
+
 This is free and unencumbered software released into the public domain.
 
 Anyone is free to copy, modify, publish, use, compile, sell, or

README.md

@@ -5,16 +5,34 @@ Example HTML, CSS, and JavaScript for searching for items in a PASTA repository
 
 ## Motivation
 
-[LTER sites](https://lternet.edu/) which archive data at [EDI](https://environmentaldatainitiative.org/) may wish to use the [PASTA API](http://pastaplus-core.readthedocs.io/en/latest/doc_tree/pasta_api/data_package_manager_api.html) to create a searchable data catalog on their [static websites](https://en.wikipedia.org/wiki/Static_web_page).  Data catalogs must support searching by term as well as browsing by LTER core area. This project includes example code supporting such functionality, along with pagination since thousands of results could be returned.
+[LTER sites](https://lternet.edu/) which archive data at [EDI](https://environmentaldatainitiative.org/) may wish to use the [PASTA API](https://pastaplus-core.readthedocs.io/en/latest/doc_tree/pasta_api/data_package_manager_api.html#search-data-packages) to create a searchable data catalog on their website. This project includes example code supporting such functionality.
 
-## Usage
+## Usage for Your Site
 
-Open the HTML file in your browser and enter a search term like water. When you click Search, the application searches for datasets at EDI for the [NWT LTER site](http://niwot.colorado.edu/). Results are summarized on the page with external links to more details at the original data archive.
+Start with the demo in the `public` folder and adapt the code for your site.  See the `PASTA_CONFIG` variable in `pasta.js` for basic configuration options.  For example, you will change `PASTA_CONFIG["filter"]` to filter results for your site. The example assumes the site used the knb-lter-[three letter acronym] pattern in its dataset metadata. If your site follows a different pattern, than change the filter accordingly. See the [PASTA documentation](https://pastaplus-core.readthedocs.io/en/latest/doc_tree/pasta_api/data_package_manager_api.html#search-data-packages) for possible query options.
 
-You can click Search with no terms specified to show the entire catalog, which is the default behavior when you load the page. 
+You may want to adjust the layout and styles in the demo page to match your website.
 
-Note: We assume the LTER Core Area was included as a **keyword** in the metadata when the data publisher submitted the data to the archive. If your site follows different conventions, you will need to modify `pasta.js` to filter by core area.  
+### Pagination
 
-## Customization
+PASTA allows you to limit the number of results returned per page. If you do not wish to use pagination, set `PASTA_CONFIG["limit"]` to a number higher than the number of datasets available for your site.
 
-To change parameters such as how many search results to show at a time, see the `PASTA_CONFIG` variable in `pasta.js`.  There you can also set the group or user whose datasets you want to search.
+If you want pagination but do not need page links both above and below search results, simply replace the element ID in `PASTA_CONFIG["pagesBotElementId"]` (or `pagesTopElementId`) with an empty string, `""`. 
+
+### Hiding Other Items
+
+Similar to pagination, you can hide the search URL, the text summarizing the result count, and even the sorting options by replacing element IDs with empty strings in `PASTA_CONFIG`.
+
+### Autocomplete
+
+In the demo page, creator and taxonomy input fields support autocomplete.  Try typing a couple of characters into the creator box and see what happens.  
+
+We use [Pixabay's autocomplete](https://github.com/Pixabay/JavaScript-autoComplete) plugin. Thanks Pixabay!
+
+Autocomplete requires creating a list of possible choices, and activating autocomplete for a given input via code in `pasta.js`.  The list is imported as a script containing a `PASTA_LOOKUP` variable with arrays of choices for each desired autocomplete category. Once you create your choice arrays, don't forget to enable autocomplete for the appropriate inputs.  See how the `creator` input was handled in `pasta.js` for an example.
+
+One way to generate the choice arrays is to harvest metadata for all datasets for your site from PASTA.  The `harvester` folder contains a `pasta_harvester.js` script demonstrating one way of doing that. Note that sometimes metadata is messy, such as taxonomy information which may include freeform text.  The harvester requires `Node.js` with the `node-fetch` and `xml2js` packages installed.
+
+### Caveats
+
+The success of search queries depends upon the metadata that the LTER site provided when submitting data to the archive.  For example, we assume the LTER Core Area was included as a **keyword** in the metadata.  If your site follows different conventions, you will need to modify `pasta.js` to filter accordingly.  

public/auto-complete.css

@@ -0,0 +1,9 @@
+.autocomplete-suggestions {
+    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
+
+    /* core styles should not be changed */
+    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
+}
+.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
+.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
+.autocomplete-suggestion.selected { background: #f0f0f0; }

public/auto-complete.min.js

@@ -7,14 +7,19 @@
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
       crossorigin="anonymous">
    <link href="search.css" rel="stylesheet" type="text/css">
+   <link href="auto-complete.css" rel="stylesheet" type="text/css">
    <script src="cors.js"></script>
    <script src="pagination.js"></script>
+   <script src="auto-complete.min.js"></script>
+   <script src="pasta_lookup.js"></script>
    <script src="pasta.js"></script>
 </head>
 
 <body>
    <p>Enter a search term like "water", or click <strong>Advanced</strong> for more options.
-      Datasets from the NWT LTER site will be searched.</p>
+      Datasets from the NWT LTER site will be summarized on the page with external links to more details at the
+      original data archive. If you do not enter any search terms, all datasets for the given LTER site will be
+      returned, which is the default behavior when first loading the page.</p>
    <form id="dataSearchForm" name="dataSearchForm">
       <input type="hidden" id="sort" name="sort" value="score">
       <input class="search-input" name="q" placeholder="Enter search term" type="text">

public/demo.html

@@ -83,7 +83,8 @@ function escapeHtml(unsafe) {
 
 
 function showResultCount(query, total, limitPerPage, currentStartIndex, domElementId) {
-   if (total == 0) {
+   var element = document.getElementById(domElementId);
+   if (total == 0 || !element) {
       return;
    }
 
@@ -110,6 +111,5 @@ function showResultCount(query, total, limitPerPage, currentStartIndex, domEleme
       }
       var showing = (". Showing results " + fromCount + " to " + toCount + ".</p>");
    }
-   var element = document.getElementById(domElementId);
    element.innerHTML = found + forQuery + showing;
 }

public/pagination.js

@@ -33,10 +33,12 @@ function parsePastaResults(xmlDoc) {
    var docs = xmlDoc.getElementsByTagName("document");
    var html = [];
    var sortDiv = document.getElementById(PASTA_CONFIG["sortDiv"]);
-   if (docs.length)
-      sortDiv.style.display = "block";
-   else
-      sortDiv.style.display = "none";
+   if (sortDiv) {
+      if (docs.length)
+         sortDiv.style.display = "block";
+      else
+         sortDiv.style.display = "none";
+   }
    for (var i = 0; i < docs.length; i++) {
       var doc = docs[i];
       var authors = doc.getElementsByTagName("responsibleParties")[0].childNodes[0].nodeValue.trim();
@@ -128,8 +130,9 @@ function errorCallback() {
 
 // Writes CORS request URL to the page so user can see it
 function showUrl(url) {
-   var txt = '<a href="' + url + '" target="_blank">' + url + '</a>';
    var element = document.getElementById(PASTA_CONFIG["urlElementId"]);
+   if (!element) return;
+   var txt = '<a href="' + url + '" target="_blank">' + url + '</a>';
    element.innerHTML = txt;
 }
 
@@ -176,7 +179,7 @@ function searchPasta(userQuery, coreArea, creator, sYear, eYear, datayear, pubye
    var limit = "&rows=" + PASTA_CONFIG["limit"];
    var start = "&start=" + pageStart;
    var query = "&q=" + userQuery;
-   if (creator) query += "+AND+author:" + creator;
+   if (creator) query += '+AND+(author:"' + creator + '"+OR+organization:"' + creator + '")';
    if (pkgId) {
       pkgId = pkgId.replace(":", "%5C:");
       query += "+AND+(doi:" + pkgId + "+packageid:" + pkgId + "+id:" + pkgId + ")";
@@ -292,6 +295,23 @@ function isInteger(x) {
 }
 
 
+function makeAutocomplete(elementId, choices, minChars) {
+   if (!minChars) minChars = 2;
+   var autocomplete = new autoComplete({
+      selector: "#" + elementId,
+      minChars: minChars,
+      source: function (term, suggest) {
+         term = term.toLowerCase();
+         var suggestions = [];
+         for (var i = 0; i < choices.length; i++)
+            if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
+         suggest(suggestions);
+      }
+   });
+   return autocomplete;
+}
+
+
 // When the window loads, read query parameters and perform search
 window.onload = function () {
    var query = getParameterByName("q");
@@ -332,4 +352,7 @@ window.onload = function () {
    if (!query) query = "*";  // default for empty query
    searchPasta(query, coreArea, creator, sYear, eYear, datayear, pubyear,
       pkgId, taxon, geo, sortBy, pageStart);
+
+   makeAutocomplete("creator", PASTA_LOOKUP["responsibleParties"]);
+   makeAutocomplete("taxon", PASTA_LOOKUP["taxonomic"]);
 };