Trait Ontology Widget

A HTML/JS widget for visualizing Breeding API observation variable ontologies in a tree.

Simple integration in existing web page:

<script type="text/javascript" src="cropOntologyWidget.min.js"></script>
<link rel="stylesheet" href="cropOntologyWidget.min.css"></link>

<div id="trait-ontology-widget"></div>

<script type="text/javascript">
// Create widget
var widget = new CropOntologyWidget("#trait-ontology-widget", {
  // Breeding API server
  "breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/"
});
</script>

The Breeding API used in this widget must implement the observation variable list call at minimum and can implement the observation variable ontology list call for added metadata on the ontology (like the version, copyright, authors, etc.)

Demo

In Ephesis ontology portal

The latest release of this widget is accessible on the 🔗 Ephesis ontology portal or on the 🔗 Ephesis search form.

From source code

1. Clone the repository or download a release archive
2. Install Node.js
3. Fetch dependencies:

$ npm install
# produces a node_modules/ folder

4. Build & run the demo:

$ ./run.sh
# build & run a static HTTP server

5. Open http://localhost:8888

Dependencies

• jQuery
• jsTree: a jQuery plugin that provides interactive trees

Development tools:

• browserify: used to bundle the widget source with its dependencies
• babel: used to compile from latest JavaScript syntax to compatible older JavaScript syntax
• uglifyjs: used to minify the JavasSript after bundling
• less: a CSS preprocessor used to bundle the widget styles with jstree's styles
• clean-css: used to minify the CSS after bundling
• http-server: used to launch a static HTTP server for the demo (used in run.sh)