BBOP JS: The Demo

Overview

These demos are a new work in progress, please be patient as we get them up and apply fixes. More demos will go up as we approach beta...

API documentation for the code below can be found here. Sorry that we don't have the crosslinks done yet.

These demos use the public GOlr server beta for data and a GOlr schema blob (from AmiGO 2).

So, the inclusion for all of these demos is: 1 jQuery file (necessary since we're going to use the manager in a web browser environment), 2 jQuery UI files (not necessary for all of the demos, just the ones that use widgets), the single BBOP JS file, and the schema blob (which we happen to get using a file, but could be done manually).

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://cdn.berkeleybop.org/jsapi/bbop.js"></script>
  <script type="text/javascript" src="golr.js"></script>

A more in-depth explanation of the schema blob can be found here. Remember that in the demos, amigo.data.golr is just a variable that defines the schema that we're using--there is nothing super special about it.

Demo 01: A Small Calculation

This is a small demonstration on how to use the asynchronous jQuery manager engine (bbop.golr.manager.jquery) to perform a "simple" count of the ontology terms in the data store.

While this type of calculation is much more straightforward to do in, say, a Rhino environment (bbop.golr.manager.rhino) due to the fact that the web browser environment is asynchronous, it forms the basis of how widgets (and AmiGO 2) are created. To see the easier command line versions of calculations like these, take a look at the Rhino (as opposed to NodeJS) scripts in the bin/ directory of the BBOP JS source tree.

There are currently ??? terms.
jQuery(document).ready(function(){

  // Create the basic environment defining variables.
  var gserv = 'http://golr.berkeleybop.org/';
  var gconf = new bbop.golr.conf(amigo.data.golr);

  // Create the manager, set it's personality, then
  // restrict it to one "document_category".
  var go = new bbop.golr.manager.jquery(gserv, gconf);
  go.set_personality('ontology');
  go.add_query_filter('document_category', 'ontology_class');

  // Create the callback function to change the text
  // in the document, then register it with the
  // manager and start the (search) callback.
  function go_callback(resp){
    jQuery("#o01").empty();
    jQuery("#o01").append(resp.total_documents());
  }
  go.register('search', 'foo', go_callback);
  go.search();
});

Demo 02: Trivial Autocomplete (Widget)

This is a minimal widget demonstration for autocomplete. If you want a spinner on the search, you'll have to add your own CSS style for the class "ui-autocomplete-loading".

jQuery(document).ready(function(){
  var gserv = 'http://golr.berkeleybop.org/';
  var gconf = new bbop.golr.conf(amigo.data.golr);
  var auto = new bbop.widget.search_box(gserv, gconf, 'd02');
  auto.set_personality('ontology');
});

Demo 03: Templated Autocomplete Plus Action (Widget)

This is a more complete example of how the bbop.widget.search_box code can work. In addition to the necessary values, we've added an argument hash the defines templates for the dropdown and return value as well as a separate function to call when an item is selected.

jQuery(document).ready(function(){
  var gserv = 'http://golr.berkeleybop.org/';
  var gconf = new bbop.golr.conf(amigo.data.golr);
  var a03 = {
    'label_template': '{{annotation_class_label}} ({{annotation_class}})',
    'value_template': '{{annotation_class}}',
    'list_select_callback': function(doc){ alert(doc['id']); }
  };
  var auto = new bbop.widget.search_box(gserv, gconf, 'd03', a03);
  auto.set_personality('ontology');
});