Web Components

From TheSeed
Jump to: navigation, search

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.