Step 9 of 10: Web Links


One of the main goals of PhyloWidget is to be as web-aware as possible. This is primarily done through being deployed as an applet that lives within a web browser. The other component to PhyloWidget's web presence is its ability to create links between phylogenetic trees and external sites.

In the default user interface (which should be loaded into the left panel right now), there is an item in the context menu called "Web links". This item provides the user with a powerful convenience: with the click of a button, the name of the current node is used to link to one of a variety of phylogenetic or web search engines. It's a simple way to find out more information about an unfamiliar taxon!

An extensible user interface

Throughout this series of vignettes, we have presented PhyloWidget in a variety of different styles, dressed in a different set of UI components, depending on the task at hand. For example, here are a few of the GUI "masks" that we have used so far:

So far, we have done all the work of configuring the UI components behind the scenes, to let the user (i.e. you) focus on the points being made in each vignette. As we get into PhyloWidget's more advanced features, however, we will need to introduce a little bit of the underlying "guts" of the program.

The next vignette focuses almost entirely on the details of how to get PhyloWidget running on your own server. Here, however, we will focus just on one small piece of the picture: customizing PhyloWidget's user interface.

A couple of working examples

In order to provide you an idea of where this vignette is going, here are a few "pre-cooked" examples of using tree annotations to create custom web links:

  • Movie Tree

    In this example, we created a simple tree of popular movies. Most of the movies are also annotated with a unique identifier from the IMDB, and the context menu is set up to use that annotation to create a custom link to the IMDB. However, one of the menus does not have the IMDB annotation, and the context menu consequently disables the link. Can you find it?

  • Animal Tree

    This example is a bit closer to home: we have annotated a simple animal tree with a custom URL for each animal.

An in-depth example: TreeFam links

Let's look in a little more detail at a "real-world" scenario of using annotation to create custom links. In this example, we will connect an annotated gene tree with links to the Treefam database.

The two steps in the process are:

  1. Annotate a tree with gene IDs
  2. Create a custom context menu to generate links from those annotations

For the first step, we have collected an example tree from TreeFam which includes annotations of the Ensembl gene ID for each node.

If you edit the annotation on any of the leaf nodes, you'll notice that there are two annotations in the tree: 'g' for the gene ID, and 'o' for the ID of an orthologous gene. We will be using the 'g' annotation for creating our links.

The next step is to create the definition file for the context menu that we want to create. Here is what we will be using:

The second to last line is the important one; that line of text defines the TreeFam link behavior. As you can see, the URL attribute contains the base URL for TreeFam's gene pages, and the %s string indicates where the annotation should be pasted into the URL. Now, let's load up this GUI and try it out:

Now, if you click on one of the leaf nodes, a menu should come up with the "TreeFam Link" option. Click it, and you will be redirected to a TreeFam page about your selected gene. That's it!

Tinkering around...

At this point, you may want to work on creating your own GUI by changing the parameters in the textbox above. To apply the changes to the GUI, just click the "Load it up!" link again.

For some more examples, you can also find all of PhyloWidget's default GUI components in the source code repository. Have fun!

Created with Processing.