❤
npm
Sign UpSign In

@genesys-pgr/ui-embedded

1.6.0 • Public • Published

Enhance your website with data from Genesys

Genesys is an openly accessible database on plant genetic resources maintained in genebanks around the world. This package allows for embedding data from Genesys into your website.

Instead of hosting and maintaining a separate database, web server and domain name, use Embedded Genesys to integrate your genebank collection data directly into the institutional 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.5.0/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.5.0/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.5.0/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
    language: 'en', // See "Configuration options" section below
    filter: { 
      institute: {  code: [ 'ETH013' ] }, // Genesys data filter
    },
    accession: {
      pdci: true, // Show PDCI
      subsets: true, // Show list of subsets
      datasets: true, // Show list of datasets
      // accessionNumberSort: 'accessionNumber', // Uncomment this to sort by accession number instead of the 'seqNo' -- the sequential number detected by Genesys
      filters: {
        'images': false,
      },
      overviews: {
        'aegis': false, // Don't display the AEGIS Overview
      }
    },
    shoppingCart: {
      enabled: true, // Enable shopping cart
    },
    captchaSiteKey: '<public key for your site>', // Your hCaptcha site key from https://dashboard.hcaptcha.com
    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
      },
    },
    i18n: {
      'en': {
        translations: {
          // No customizations
        }
      },
      'es': {
        translations: {
          // No customizations
        }
      },
      'zh-tw': {
        translations: {
          // No customizations
        }
      },
    }
  };

  // Show Embedded Genesys
  if (genesys !== undefined && typeof genesys.showGenesysUI === 'function') {
    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);

    // Or, to display ONLY the "Map of accessions" on this page:
    // genesys.showGenesysMap(document.getElementById('genesys-container'), genesysConfig);

    // Or, to display ONLY "Collection Overview" on this page:
    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);

  } else {
    document.getElementById('genesys-container').innerHTML='<div class="error alert alert-danger"><strong>Embedded UI</strong> is not loaded.</div>';
  }

</script>

Note: Please see available configuration options in the Configuration options section below.

Note: Any website that uses the Genesys API must be registered. 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.org
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.
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: English 'en', French 'fr', Chinese (Taiwanese) 'zh-tw'.
Partially supported: Spanish 'es'.
For other languages provide custom i18, see Customizing translations.
i18n { ... } See Customizing translations
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
traitData true Display trait observations on accession details page
pdci true Display passport data completeness index (PDCI) information on accession details page
filters {...} Allows for disabling individual filters on the Accession list page
overviews { ... } Allows for disabling individual sections in the display of Overviews

Disabling individual Accession filters

By default all available filters are enabled. This option allows you to disable the filters you do not want to display when users search for accessions by setting that filter to false in the configuration.

Filter Enabled Description
fullText true Full text search
countryOfOrigin true Provenance of material
genus true Genus
species true Specific epithet
sampStat true Biological status of accession
accessionNumbers true Filter by list of accession numbers
historic true Include historical material
available true Only material I can request
images true Accessions with images

To disable the Image and Country of Provenance filters you would use

const genesysConfig = {
    ..., // other configuration options
    accession: {
      ... // other accession options
      filters: {
        'images': false, // Don't display the image filter
        'countryOfOrigin': false, // Don't display the Country of Provenance filter
        // all other filters remain enabled
      },
    },
    ... // other configuration
}

Disabling individual Overview sections

The Overviews sections display the number of accessions by different categories. The following categories are available and enabled by default:

Overview Enabled Description
institute.code false Number of accessions by FAO Institute Code of the holding genebank
institute.country.code3 false Number of accessions by the country of the holding genebank
cropName true Crop name as submitted to Genesys
crop.shortName true Genesys crop
sampStat true Biological status of accession
taxonomy.genus true Genus name
taxonomy.genusSpecies true Species name
taxonomy.grinTaxonomySpecies.name true Species name according to GRIN-Taxonomy (auto-detected by Genesys)
taxonomy.currentTaxonomySpecies.name true The current species name according to GRIN-Taxonomy
countryOfOrigin.code3 true Country of origin
donorCode true FAO WIEWS Institute code of the accession donor institute
mlsStatus true Accession status in the Multi-lateral System of the ITPGRFA
available true Accession availability
duplSite true FAO WIEWS Institute code where accessions are safety-duplicated
storage true Type of germplasm storage
breederCode true FAO WIEWS Insitute code of the institute that bred the material
aegis false Status of accession in European AEGIS network
sgsv true Accessions safety-backed up in Svalbard Global Seed Vault

To disable the AEGIS and Institute code sections in the Overviews, the update your config to include:

const genesysConfig = {
    ..., // other configuration options
    accession: {
      ... // other accession options
      overviews: {
        'aegis': false, // Don't display the AEGIS Overview
        'institute.code': false, // Exclude summary by FAO Institude Code
      },
    },
    ... // other configuration
}

Shopping cart and captcha 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 the shopping cart and specify the captcha site key in your configuration:

const genesysConfig = {
  captchaSiteKey: '<public key for your site>', // Your hCaptcha site key from https://dashboard.hcaptcha.com
  shoppingCart: {
    enabled: true, // Enable shopping cart
  },
};
Property Default Description
enabled false Toggle Shopping cart functionality

Note: The request for material form includes an hCaptcha check. Valid public and private keys for your hCaptcha account must be registered with Genesys. Please contact helpdesk@genesys-pgr.org for support.

When captchaSiteKey is missing, the Shopping cart functionality is automatically disabled.

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 template URL for the base map layer.
baseMap.attribution Tiles © ... Map base layer attribution

Translating Embedded Genesys

Embedded Genesys is developed in English. The en/translations.json lists all labels currently in use by the library. The library is translated by friends in our community members to other languages, listed in src/locales.

Help us make Embedded Genesys available in your language or improve the current translations at https://www.transifex.com/crop-trust/embedded-genesys/content/

We welcome your contributions!

Customizing translations

It is possible that the translations bundled with the library do not match your needs, or that you wish to use a language that is not bundled with the library.

You can customize translations by listing them in the i18n property of the genesysConfig:

const genesysConfig = {
  i18n: {
    'es': { // customizations for Spanish labels
      translations: { // 'translations' is mandatory
        "pagetitle": {
          "accessionList": "Accesiones" // customize the translation of 'pagetitle.accessionList'
        }
      }
    },
    'zh-tw': { // customizations for Chinese Taiwanese
      translations: { // 'translations' is mandatory
        "pagetitle": {
          "accessionList": "..." // customize the translation of 'pagetitle.accessionList'
        }
      }
    },
}

Note: the complete list of labels is available in en/translations.json.

Customizing crop names

The Genesys API does not provide translations of crop names, they are generally provided only in English language.

You should provide translations for crop names from English to your language. This can be achieved with adding crop name translations to the i18n section:

const genesysConfig = {
  i18n: {
    'en': { // English
      translations: {
        crop: {
          'lemon': 'Lemon', // Use capitalized "Lemon"
          'limon': 'Lemon' // Use "Lemon" for "limon"
        }
      }
    },
    'es': { // Spanish
      translations: {
        crop: {
          'lemon': 'Limón', // The lemon
          'cassava': 'Yuca',
          'beans': 'Frijol',
          'forages': 'Forrajes',
          'banana': 'Plátano',
        }
      }
    },
    'zh-tw': {
      translations: {
        crop: {
          'mungbean': '綠豆'
        }
      }
    },
  }
}

Debugging

Use the Developer Tools > Console to spot syntax errors or issues with the connection to Genesys PGR.

Add debug: true to your genesysConfig to enable debug-level logging.

License and Disclaimer

This software is licensed under the Apache License, Version 2.0 (the "License").

You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Readme

Keywords

Package Sidebar

Install

npm i @genesys-pgr/ui-embedded

Repository

gitlab.croptrust.org/genesys-pgr/ui-embedded.git

Homepage

.

Weekly Downloads

2

Version

1.6.0

License

Apache-2.0

Unpacked Size

2.09 MB

Total Files

89

Last publish

Collaborators

  • genesys-helpdesk
Try on RunKit
Report malware