Skip to content

An example module released during PAG 2017 hackathon, that displays a D3JS tree from the phylonode table.

Notifications You must be signed in to change notification settings

tripal/tripal_dt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tripal Demo Tree module
-----------------------
This module has been developped during the Tripal Hackathon at PAG 2017 in San
Diego. It is a simple example that displays a tree from Chado table phylonode
using D3JS. It renders the tree that has the phylotree_id "1" (value hardcoded
into theme/tripal_dt.theme.inc) at the URL "<www.yoursite.org>/tripal_dt/".
An example dataset is provided and can be loaded into Chado:
% INSERT INTO phylotree VALUES
    (1,  1, 'Banana testing tree', 1, NULL, 'A tree for testing.');
% INSERT INTO phylonode VALUES
    (1, 1, NULL, 1, 14, 1, NULL, 'Musaceae', NULL),
    (2, 1, 1, 2, 9, 1, NULL, 'Musa', NULL),
    (3, 1, 1, 10, 13, 1, NULL, 'Ensete', NULL),
    (4, 1, 2, 3, 8, 1, NULL, 'Eumusa', NULL),
    (5, 1, 4, 4, 5, 1, NULL, 'acuminata', NULL),
    (6, 1, 4, 6, 7, 1, NULL, 'balbisiana', NULL),
    (7, 1, 3, 11, 12, 1, NULL, 'lasiocarpa', NULL);

Here is how this tree looks like (with left and right indices arround labels):

       1#Musaceae#14
        /       `°°°°°°°°°°°\
    2#Musa#9             10#Ensete#13
       |                     |
    3#Eumusa#8           11#lasiocarpa#12
       |   `°°°°°°°°°\
    4#acuminata#5  6#balbisiana#7

We used the tripal_example module as a skeleton that we modify. We only kept a
couple of files we needed and dropped the rest.

First we copied the example module where modules are installed:
$ cd <drupal_sites_directory>/all/modules/
or
$ cd <drupal_sites_directory>/<your_sub_site_directory>/modules/
then 
$ cp -r tripal/tripal_example tripal_dt
$ cd tripal_dt

Then, in order to have Drupal detecting our module, we needed to rename the
files we used:
$ mv tripal_example.info tripal_dt.info
$ mv tripal_example.install tripal_dt.install
$ mv tripal_example.module tripal_dt.module
$ mv theme/tripal_example.theme.inc theme/tripal_dt.theme.inc
$ mv theme/templates/tripal_example_base.tpl.php  theme/templates/tripal_dt_tree_page.tpl.php
$ mv theme/css/tripal_example.css theme/css/tripal_dt.css
And we added 2 javascript files:
- theme/js/d3.min.js: 
- theme/js/d3.dndtree.js

Then we modified the content of the files.

How this module works?
When you access the URL "/tripal_dt/", Drupal will know, through our
implementation of the "hook_menu", that we handle this URL. Drupal will call
the "theme()" function and give it the parameter "tripal_dt_tree". We could
have used our own custom function rather than the "theme()" one but it would
have been less interesting for this example and we would also prevent other
module to interact with our module at the same time. When we use the "theme()"
function, Drupal can call other hooks that enables other module to interact with
our module and maybe enrich the content.

The "theme()" function uses data generated by the implemntations of hook_theme,
like our "tripal_dt_theme()" implementation. This data is cached so each time
you modify your hook implementation, you may need to clear the theme cache.
So, the "theme()" function will have a look into our key 'tripal_dt_tree' and
see that it should use the template file "tripal_dt_tree_page" + ".tpl.php" in
the directory "$path/theme/templates" where $path will be replaced by the
tripal_dt module path.

But before processing that template file, it will prepare the data that will be
used by that template by calling any implementation of the hook
"hook_preprocess_tripal_dt_tree" (where "tripal_dt_tree" comes from the key
of the theme hash). Since we implemented that hook through
"tripal_dt_preprocess_tripal_dt_tree" in "theme/tripal_dt.theme.inc", it will be
called. In that function, we compute the required stuff and we store the
results into the $variables hash. Each key of that hash will become a PHP
variable that we will be able to use inside the template file. So
"$variables['tree']" in this function will become "$tree" in the template
"theme/templates/tripal_dt_tree_page.tpl.php".

Finally, the template "theme/templates/tripal_dt_tree_page.tpl.php" is processed
and the resulting HTML code generated will be returned by the "theme()" function
to Drupal that will display the result on the corresponding site page.

The client web browser will display the page and execute the
javascript/jQuery/D3JS code to render the tree.

About

An example module released during PAG 2017 hackathon, that displays a D3JS tree from the phylonode table.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published