Documentation updated

README.md

 
 # Enhance your website with data from Genesys
 
-This package allows for embedding Genesys into your website.
+This package allows for embedding [Genesys](https://www.genesys-pgr.org) into your website.
 
 The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays data from
 `COL003` and `BEL084` in a single website.
 
-## Genesys on your website
+## Quickstart
 
-1. Add a few Javascripts to your page:
+Add Javascript dependencies to your page:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
@@ -18,26 +18,42 @@ The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays dat
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
 ```
 
-2. Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>` below:
+Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`:
 
 ```html
   <div class="container-fluid mb-5" id="genesys-container"></div>
 
   <script type="text/javascript">
-    const APIURL = 'https://api.sandbox.genesys-pgr.org';
-    const CLIENTID = 'clientid@genesys';
-    const CLIENTKEY = 'changeme';
-    const FILTER = { institute: { code: ['ETH013'] } };
-
-    genesys.showGenesysUI(document.getElementById('genesys-container'), {
-        clientId: CLIENTID,
-        clientKey: CLIENTKEY,
-        apiUrl: APIURL,
-        filter: FILTER,
-      },
-      queryLang,
-    );
+    // Embedded Genesys configuration
+    const genesysConfig = {
+      apiUrl: 'https://api.sandbox.genesys-pgr.org',
+      clientId: 'clientid@genesys',
+      clientKey: 'changeme',
+      filter: { institute: { code: ['ETH013'] } },
+    };
+
+    // Detect language from query string
+    const queryLang = document.location.search && document.location.search.substr(1) || undefined;
+
+    // Show UI
+    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
+
+    // Or, to display ONLY "Collection Overview" use:
+    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
   </script>
 ```
 
 **Note:** Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.
+
+## Configuration options
+
+The `genesysConfig` argument to `showGenesysUI()` is a simple map of various settings you can pass 
+to *@geneesys-pgr/ui-embedded*:
+
+
+|Property|Default|Description|
+|---|---|---|
+|`apiUrl`       | *http://localhost:8080* | Production Genesys API is at https://api.genesys-pgr.org<br />Sandbox API is at https://api.sandbox.genesys-pgr.org |
+|`clientId`     | **Required** | Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.<br />The API keys are limited to your website and will not work on a different domain. |
+|`clientSecret` | **Required** | Ditto. |
+|`filter`       |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |

index.html

@@ -19,9 +19,11 @@
   <div class="container">
     <div class="jumbotron small">
       <h1 class="display-6">Embedded Genesys</h1>
-      <p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code> in a
-        3rd-party website. The current release of
-        the Javascript library is available on <a
+      <p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code> 
+        from <a href="https://www.genesys-pgr.org" target="_blank">Genesys</a> in a 3rd-party website.<br />
+        <b>Note:</b> The example here is using data from our 
+        <a href="https://sandbox.genesys-pgr.org" target="_blank">test environment</a>.<br />
+        The current release of the Javascript library is available on <a
           href="https://www.npmjs.com/package/@genesys-pgr/ui-embedded">npmjs.com</a>.</p>
     </div>
     <ul class="nav">
@@ -56,21 +58,22 @@
   <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha6/dist/genesys-deps.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha6/dist/genesys-ui.js"></script>
   <script type="text/javascript">
-    const APIURL = 'https://api.sandbox.genesys-pgr.org';
-    const CLIENTID = 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org';
-    const CLIENTKEY = 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0';
-    const FILTER = { institute: { code: ['COL003', 'BEL084'] } };
+    // Embedded Genesys configuration
+    const genesysConfig = {
+      apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
+      clientId: 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org', // Client ID
+      clientKey: 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0', // Client key
+      filter: { institute: { code: ['COL003', 'BEL084'] } }, // Genesys data filter
+    };
 
+    // Detect language from query string
     const queryLang = document.location.search && document.location.search.substr(1) || undefined;
 
-    genesys.showGenesysUI(document.getElementById('genesys-container'), {
-        clientId: CLIENTID,
-        clientKey: CLIENTKEY,
-        apiUrl: APIURL,
-        filter: FILTER,
-      },
-      queryLang,
-    );
+    // Show UI
+    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig, queryLang);
+
+    // Or, to display ONLY "Collection Overview" use:
+    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig, queryLang);
   </script>
 </body>