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:
- Annotate a tree with gene IDs
- 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!
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.