@genesys-pgr/ui-embedded NPM

Enhance your website with data from Genesys

This package allows for embedding Genesys into your website.

Explore the demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/

Quickstart

Add Javascript dependencies to your page:

<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0-alpha3/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0-alpha3/dist/genesys-ui.js"></script>

<!-- Recommended: Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<!-- Genesys UI CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.1.0-alpha3/dist/genesys-deps.css" />

Add a container <div> to your HTML page and initialize the Genesys UI with the <script>:

<div class="container-fluid mb-5" id="genesys-container"></div>

<script type="text/javascript">
  // Embedded Genesys configuration
  const genesysConfig = {
    apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
    clientId: 'clientid@genesys', // Client ID
    clientKey: 'changeme', // Client key
    title: 'Genesys:', // HTML title prefix
    filter: { 
      institute: {  code: [ 'ETH013' ] }, // Genesys data filter
    },
    accession: {
      pdci: true, // Show PDCI
      subsets: true, // Show list of subsets
      datasets: true, // Show list of datasets
    },
    shoppingCart: {
      enabled: true, // Enable shopping cart
    },
    captchaSiteKey: '<public key for your site>', // Your hCaptcha site key
    map: {
      enabled: true, // Enable map
      baseMap: {
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/', // tile server url for the base layer
        attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ' // attribution data
      },
    }
  };

  // Show UI
  genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);

  // Or, to display ONLY "Collection Overview" use:
  // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
</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`	https://api.sandbox.genesys-pgr.org	Production Genesys API is at https://api.genesys-pgr.orgSandbox 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.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. 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.
`language`	en	Specify the language of the user interface.Fully supported: `en`Partially supported: `es`
`title`	Genesys:	HTML page title prefix
`accession`	`{ ... }`	See Accession configuration options
`shoppingCart`	`{ ... }`	See Shopping cart configuration options
`map`	`{ ... }`	See Map configuration

Additional configuration options are described below.

Accession options

Features can be toggled by setting corresponding property on (set to true) or off (false):

Property	Default	Description
`subsets`	`true`	Display the list of subsets on accession details page
`datasets`	`true`	Display the list of C&E datasets on accession details page
`pdci`	`true`	Display passport data completeness index (PDCI) information on accession details page

Shopping cart options

The shopping cart is disabled by default. To allow users to add accessions to the cart, access the cart and submit requests for material you must explicity enable it in your configuration:

const genesysConfig = {
  // Shopping cart enabled
  shoppingCart: {
    enabled: true,
  },
};

Note: The form to request for material includes a reCaptcha check. Valid public and private reCaptcha keys must be registered with Genesys.

Property	Default	Description
`enabled`	`false`	Toggle Shopping cart functionality

Map configuration

The map is disabled by default. To allow users to see map of accession collecting site on accession details page and access the map page you must explicity enable it in your configuration and provide a tile server URL and an attribution data for the base map layer:

Property	Default	Description
`enabled`	`false`	Toggle map functionality
`height`	`'400px'`	Height of the map of accessions (use a CSS expression)
`baseMap`	`{ url: ..., attribution: ... }`	See `url` and `attribution` below.
`baseMap.url`	World_Light_Gray_Base	Tile server url for the map base layer.
`baseMap.attribution`	Tiles © ...	Base layer attribution.