Web Components

Web Components are self contained objects that produce html output for standard application components that can be used in the context of a Web Application.

Overview

Here you will find a comprehensive list of the currently available Web Components and their parameters. To include a Web Component in your application, follow the instructions on the Web Application page.

Component List

Table

In its simplest form, this merely displays a table. The component also offers the functionality for column sorting, column filtering, browsing, highlighting, onclick-events for cells, popup menus for cells and an export function.

Example

File:Example table.png

This table was created using the following code

$self->application->register_component('Table', 'testtable');

my $table_component = $self->application->component('testtable');
$table_component->data([ ['A','B','C'], ['D','E','F'], ['G','H','I'] ]);
$table_component->columns( [ { 'name' => 'Col A', 'filter' => 1 },
                             { 'name' => 'Col B' },
                             { 'name' => 'Col C', 'filter' => 1, 'operators' => [ 'like', 'unlike' ] } ] );
$table_component->show_top_browse(1);
$table_component->show_bottom_browse(1);
$table_component->items_per_page(2);
$table_component->show_select_items_per_page(1);
print $table_component->output();

Parameters

data (arrayref of arrayrefs of strings)

The table data must be a list of rows, each of which is a list of cells. For each cell you have two options.

pass a string - this string will then become the content of the cell
pass a hash - the hash allows you to pass additional options:

data - the data of the cell
highlight - an integer defining the highlight color of the cell:

The integers represent different highlighting colors

0: no highlighting
1: green
2: blue
3: red
4: yellow

menu - a menu as used in the Hover component described below. This must be a hash with the keys 'titles' and 'links', each pointing to array references with the according entries for the titles and the links of the menu
tooltip - html to be displayed in the tooltip of this cell.
onclick - the url the onclick event of the cell should take the page to

columns (arrayref of (hashrefs or strings))

If you do not pass hashrefs, the strings will be used as the column header

name: the text in the column header
sortable: a boolean indicating whether clicking the column header will sort this column. The sort function will determine the kind of data given the first cell of the column. Recognized data types are:

date: /^\d\d[\/-]\d\d[\/-]\d\d\d\d$/ or /^\d\d[\/-]\d\d[\/-]\d\d$/
numerical: /^\d+\.{0,1}\d*$/
e-value: /^\d+\.{1}\d+e[+-]{1}\d+$/
alphabetical: everything unrecognized by the above

filter: a boolean indicating whether this column should have a filter box
operator: the operator the filter will use by default. May be either one of: like, unlike, equal, unequal, less, more. You can also set the operator to combobox which will create a combobox as a filter, filled with every distinct value of that column.
operators: the selection of operators the user may choose from when filtering. This must be an array of the above.

Each element in the columns array represents one column. These elements may have several properties, only 'name being mandatory.

width: the width of the column in pixels.
visible: a boolean indicating whether this column is to be displayed. Invisible columns will be added to the control panel.
show_control: a boolean indicating whether to display this column in a control panel above the table. The column headers of those columns will appear in the control panel, allowing to sort/filter the columns, without the need of displaying them.

Options

items_per_page (int)

Determines the number of rows that will be displayed at a time. If you specify this, you should choose at least one of the browse options, so the user can browse through the data.

show_export_button (boolean or hash)

If this is a boolean, then a value of true will display a button to export the table above the table. If this is a hash, you have multiple options for the export button:

title: the title of the button
strip_html: The export will strip any html tags from cells before exporting
unfiltered: Instead of the normal behavior, where only the cells that passed the current filter will be exported, all cells are exported
hide_invisible_columns: All cells in columns currently marked as invisible will not be exported

show_select_items_per_page (boolean)

If true will allow the user to select how many rows should be displayed at a time.

show_top_browse (boolean)

If true will display browsing functions above the table.

show_bottom_browse (boolean)

If true will display browsing functions below the table.

offset (int)

The number of rows that will initially not be show from the beginning of the dataset.

width (int)

The width of the table in pixels.

Additional Functions

The table module supports a set of javascript functions for manipulation.

show_column (table_id, colum_index)

This will make a column in the table visible.

hide_column (table_id, column_index)

This will render a column invisible.

Coding Example

Assuming you have a table component that is already filled with data, you could create buttons that would show hide a certain column like this:

my $table = $self->application->component('myTable');
print "<input type='button' value='Hide Column 2' onclick='hide_column(\"" . $table->id() . "\", \"2\");'>";
print "<input type='button' value='Show Column 2' onclick='show_column(\"" . $table->id() . "\", \"2\");'>";

Note: The id you need to pass to the javascript function is not what you call your component with (the parameter you pass to $app->component), but rather the id ($myComponent->id() ).

TabView

Creates a tabular view.

Example

File:Example TabView.png

This Tabular View was created with the following code

$self->application->register_component('TabView', 'TestTabView');

my $tab_view_component = $self->application->component('TestTabView');
$tab_view_component->width(600);
$tab_view_component->height(180);
$tab_view_component->add_tab('Tabulator A', 'This is the content of tab a');
$tab_view_component->add_tab('Tabulator B', 'This is the content of tab b');
$tab_view_component->add_tab('Tabulator C', 'This is the content of tab c');
$tab_view_component->add_tab('Tabulator D', 'This is the content of tab d');
print $tab_view_component->output();

Parameters

add_tab (string, string)

The first string passed will become the title of the tab, the second string will become the content od the tab.

Options

width (int)

The width of the component in pixels.

height (int)

The height of the component in pixels. Note: The height of the tab header will be added to this number.

default (int)

The tab initially in front.

FilterSelect

Creates a select box whose content is filtered by infix search with the string typed into an input field. The current best match will be selected.

Example

File:Example FilterSelect.png

This filter select was created using the following code

$self->application->register_component('FilterSelect', 'TestFilterSelect');

my $filter_select_component = $self->application->component('TestFilterSelect');
$filter_select_component->labels( [ 'Monkey', 'Donkey', 'Sponkey', 'Tronkey', 'Plonkey', 'Veronkey' ] );
$filter_select_component->values( [ 'A', 'B', 'C', 'D', 'E', 'F' ] );
$filter_select_component->size(8);
$filter_select_component->width(250);
$filter_select_component->name('TestFilter');
print $filter_select_component->output();

Parameters

labels (array of strings)

These will become the labels of the selectable items.

values (array of strings)

These will become the values of the selectable items.

name (string)

The name of the select component.

Options

size (int)

The number of items appearing at a time.

width (int)

The width of the component in pixels.

Login

Creates a login form.

Example

File:Example Login.png

The login was created using the following code

$self->application->register_component('Login', 'TestLogin');

my $login_component = $application->component('Login');
$login_component->small_login(1);
print $login_component->output();

Parameters

none

Options

small_login (boolean)

Setting this to true will return a smaller version of the login component.

Register

Creates a form to register a user to an application.

Example

File:Example Register.png

This register component was created using the following code

$self->application->register_component('Register', 'TestRegister');

my $register_component = $self->application->component('TestRegister');
print $register_component->output();

Parameters

none

Options

none

GenomeDrawer

Draws genome related graphics.

Example

File:ExampleGenomeDrawer.png

This example was produced using the following code:

$self->application->register_component('GenomeDrawer', 'GD1');
my $gd = $application->component('GD1');
my $line_data = [ { 'start' => 0, 'end' => 100, 'type' => 'arrow', 'title' => 'A', 'color' => 2, 'zlayer' => 1,
                    'description' => [ { 'title' => 'title a', 'value' => 'value a' } ] },
                   { 'start' => 55, 'end' => 70, 'type' => 'smallbox', 'title' => 'subA', 'color' => 1, 'zlayer' => 2 },
                   { 'start' => 210, 'end' => 110, 'type' => 'arrow', 'title' => 'B', 'color' => 3, 'zlayer' => 2  },
                   { 'start' => 250, 'end' => 390, 'type' => 'smallbox', 'title' => 'C', 'color' => 4, 'zlayer' => 2  },
                   { 'start' => 450, 'end' => 600, 'type' => 'bigbox', 'title' => 'D', 'color' => 5, 'zlayer' => 2  },
                   { 'start' => 650, 'end' => 800, 'type' => 'box', 'title' => 'E', 'color' => 6, 'zlayer' => 2  },
                   { 'start' => 900, 'end' => 1190, 'type' => 'ellipse', 'title' => 'F', 'color' => 7, 'zlayer' => 2  } ];
my $line_config = { 'title' => 'Line 1 which has a really long title',
                    'short_title' => 'Line 1',
                    'title_link' => 'http://www.google.de',
                    'basepair_offset' => 0 };
$gd->width(600);
$gd->show_legend(1);
$gd->window_size(1200);
$gd->line_height(30);
$gd->display_titles(1);
$gd->add_line($line_data, $line_config);
print $gd->output;

Parameters

add_line (line_data, line_config)

The line_data structure is an array reference of hashreferences, each hash representing one item of the line. The items have the following attributes, some of which are optional:

Mandatory

start

The starting base of the item

end

The end base of the item

Optional

title

The title of the item, appearing in it's popup box or above the item, if the item is an arrow and the display_titles option is set.

type

The shape of the item. You can see examples of each shape in the graphic above.

Currently valid types are:

box
bigbox
smallbox
smallbox_noborder
ellipse
arrow

zlayer

The position of the item on the z-axis. Higher zlayers will appear over lower zlayers.

color

This can be either a scalar from 1 to 20, choosing the according color from the current color theme, or an array reference with three integers specifying RGB values.

description

This will produce a popup box, appearing upon hovering over the item. Description is an array reference of hashes. The hashes have two entries:

title
value

links_list

This will produce a context menu, appearing upon clicking the item. Links_list is an array reference of hashes. The hashes have two entries:

link
link_title

onclick

Any code passed to this will be executed upon the onclick event.

The line_config (optional) is a hashreference which represents the following attributes of a line:

title

The title of the line (e.g. name of the organism) to be displayed in the legend. If the title is too long to fit the legend space, the short title will be displayed instead and the title will be displayed in a popup box upon hover over.

short_title

The short title of the line to be displayed when the title is too long to fit into the designated legend space.

title_link

The link to be executed when the title of a line is clicked.

basepair_offset

the offset of basepairs the region. Default is 0.

no_middle_line

This option will prevent a middle line from being drawn for this line.

Options

width

The width of the graphic part of the Genome drawer in pixels. Default is 800.

show_legend

Boolean indicating whether to show line descriptions on the left border. Default is false.

legend_width

Width of the legend part of the Genome drawer in pixels. Default is 100.

display_titles

Boolean indicating whether to display gene titles over the genes (arrows). Default is false.

line_height

The height of each line in pixels. Default is 30.

window_size

the number of basepairs in the displayed region. Default is 50.000.

Hover

Creates a set of hover menus and hover tooltips. These menus and tooltips can be added to any HTML element and may be triggered by any HTML event. The example code shows you how to attach a created menu or tooltip to your element.

Example

$self->application->register_component('Hover', 'TestHover');

my $hover_component = $application->component('TestHover');
$hover_component->add_tooltip( 'hover_test_1', 'Hello World' );
$hover_component->add_menu( 'hover_test_2', [ 'Yahoo', 'Google' ], [ 'http://www.yahoo.de', 'http://www.google.de' ] );
print $hover_component->output();
print "<img src='./Html/info.png' id='hover_test_1' onmouseover='hover(event, \"hover_test_1\");'>";
print "<img src='./Html/info.png' id='hover_test_2' onmouseover='hover(event, \"hover_test_2\");'>";

Parameters

none

Options

add_tooltip (string, string, int, int)

Adds a new tooltip to the tooltip container. The first string passed must be the id of the html element the tooltip should refer to. The second string can be any type of HTML. This will become the content of the tooltip. The int arguments are width (in pixels) and timeout (in milliseconds) respectively, which are optional. Default width is 150px, default timeout 8000ms.

add_menu (string, arrayref, arrayref, int, int)

Adds a new hover menu to the menu container. The first string passed must be the id of the html element the menu should refer to. The second and third argument must be references to arrays. The first array must contain the strings to be displayed as the titles of the menu entries. The second array must contain the urls the menu entries should link to. The int arguments are width (in pixels) and timeout (in milliseconds) respectively, which are optional. Default width is 150px, default timeout 10000ms.

Info

Creates an information container which can be collapsed. The expanded and collapsed version can be seen in the example. The collapse/expand occurs upon clicking on the 'i'.

Example

File:Example Info 1.png File:Example Info 2.png

This example was created using the following code:

$self->application->register_component('Info', 'TestInfo');

my $info_component = $application->component('TestInfo');
$info_component->content( '...Text here...' );
print $info_component->output();

Parameters

content (string)

The content of the information container.

Options

title (string)

The title of the information container.

width (string)

The width of the information container as you would put as a css attribute (e.g. 200px or 15%).

default (boolean)

If true the information container will be initially expanded, if false it will be collapsed.

HelpLink

Creates a little questionmark with a hover information. Clicking the symbol links to the wiki.

Example

File:Example HelpLink.png

This example was created using the following code:

$self->application->register_component('HelpLink', 'test_help_component');

my $help_component = $application->component('test_help_component');
$help_component->page('myWikiPage');
$help_component->title('myTitle');
$help_component->text('Short informative text.');
print $help_component->output();

Parameters

text (string)

The content of the help hover.

title (string)

The title of the help hover.

Options

page (string)

The wiki page the help link will link to. Default is the value of title.

wiki (string)

The base url of the wiki to link to. Default is 'http://www.theseed.org/wiki/'

hover_width (int)

The width of the hover info box in pixels. Default is 150px.

PieChart

Creates a pie chart.

Example

File:Example PieChart.png

This example was created using the following code:

$self->application->register_component('PieChart', 'test_pie');

my $pie = $application->component('test_pie');
$pie->data( [ 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10 ] );
print $pie->output();

Parameters

data (array of int)

The array of values to be displayed.

Options

size (int)

The size of the chart in pixels. Default is 400.

Ajax

Component for Ajax support. This will allow you to reload parts of your page, without having to reload the entire page. You can write any function in your WebPage module and call it via this mechanism. You will have access to the application object in that function. This means you have access to session information as well as any components which were registered in the original calling of your page.

Example

$self->application->register_component('Ajax', 'test_ajax');

print $application->component('test_ajax')->output();
print "<div id='ajax_target'></div>";
my $no_loading_image = 0;
print qq~<form id="ajax_source" action="javascript:execute_ajax('myFunction', 'ajax_target', 'ajax_source', 'loading_text', $no_loading_image);">~;
print "<input type='text' name='test_text' value='Hello World'><input type='submit'>";
print "</form>";

use URI::Escape;
my $text = uri_escape("Hello World");
print qq~<a href="javascript:execute_ajax('myFunction', 'ajax_target', 'test_text=~ . $text . qq~');">click me</a>~;

sub myFunction {
    my ($self) = @_;
    my $cgi = $self->application->cgi();
    return $cgi->param('test_text');
}

Parameters

The actual parameters are passed to the execute_ajax javascript.

function

The name of the function in MyPage.pm which will return the content to be displayed in the target div.

target

The id of the div the result of the called function should appear in

Options

The options are passed to the execute_ajax javascript.

source

This can be either the id of a form whose content will be passed to the called function in MyPage.pm or a uri-encoded string of key-value pairs as shown in the example.

loading_text

This text will be displayed next to the loading image, displayed until the perl function returns the content. Default is: 'Loading...'.

no_loading_text

If set to 1, no loading text will be displayed. Default is 0.

Tree

Component to create treeviews of various kinds. Right now, only a very simple version is supported, but it is currently being expanded.

Example

File:Example Tree.png

This example was created using the following code:

$self->application->register_component('Tree', 'Testtree');

my $tree = $application->component('Testtree');
my $lvl1 = ['Grandfather A','Grandfather B','Grandfather C','Grandfather D'];
foreach my $l1 (@$lvl1) {
   my $lvl2 = ['Father A','Father B'];
   my $node = $tree->add_node( { 'label' => $l1 } );
   foreach my $l2 (@$lvl2) {
     my $lvl3 = ['Child A', 'Child B', 'Child C'];
     my $child = $node->add_child( { 'label' => $l2 } );
     foreach my $l3 (@$lvl3) {
         $child->add_child( { 'label' => $l3 } );
     }
   }
}
print $tree->output();

Parameters

add_node ( { 'label' => $label,

                    'expanded' => $expanded } )

Adds a node to the tree with the given label. The optional 'expanded' attribute is a boolean indicating whether the node is initially expanded or not. Default is false.

Options

node->add_child ( { 'label' => $label,

                           'expanded' => $expanded } )

Adds a child to a node.

Supporting Components

WebGD

The WebGD Component is used to produce Internet Explorer safe images. Since we want to support IE and IE does not support inline images, you should use WebGD anytime you create a component that creates inline images. WebGD functions in the same way that GD::Image does. It has one additional method image_src which returns you the src-part of the html image tag to display your image.

Usage

use WebGD;
my $image = WebGD::new($width, $height);
$image->line($x1, $y1, $x2, $y2, $color);
... draw your image ...
print "<img src='" . $image->image_src() . "'>";

This will detect whether the client is IE or another browser. IE will cause it to create a temporary file and link it, all other browsers support inline images, so WebGD will use base64 encoding to produce an inline image.

Caution

Make sure that the variables

$temp_url

and

$temp

are set correctly in you FIG_Config.pm, as those paths will be used by WebGD.

Web Components

Contents

Overview

Component List

Table

TabView

FilterSelect

Login

Register

GenomeDrawer

Hover

Info

HelpLink

PieChart

Ajax

Tree

Supporting Components

WebGD

Navigation menu

Search