GView Style Sheet - phac-nml/gview-wiki GitHub Wiki
The GView Style Sheet (GSS) format is a simple format for saving style information (font color, representative shape, etc) of different genome attributes. GSS is based on Cascading Style Sheets (CSS) already in widespread use to define styles for web pages. This allows GSS to be a flexible, simple format for defining how a genome will be displayed by GView.
GSS Format
The GSS file format is divided into selectors and declarations, which operate similar to selectors and declarations in CSS. The basic syntax is:
[selector]
{
[declaration]
}
Declarations are split up into properties and values following the syntax:
[property] : [value];
The full syntaxc for defining a selector with a declaration is:
[selector]
{
[property] : [value];
}
Selectors
A selector will select an element on the map to apply a style to. For example, the selector ruler selects the ruler displayed along the sequence, and the selector backbone selects the backbone element. The scope of the selector is defined by braces ”{” and ”}”. Declarations made within the scope of a selector apply only within the scope. These declarations define the particular elements of the style to change.
For example:
background
{
color : color("white");
}
In this case, the selector background is used to state that the following declarations are to apply to the background. The declaration for color given within the braces defines the color of the background (in this case, the color white).
A full description of the selectors available and the properties that apply to a particular selector is listed in the GSS Documentation Selectors section.
GSS Property Values
GSS property values are set differently depending on the type of the variable the property uses. The following sections describe how to set values for the different types of property variables.
Overview
| Variable | Examples |
|---|---|
| color | color("red"); color(128, 127, 126, 125); |
| colors | colors(color("red"),color("blue")); |
| font | font("SansSerif", "plain", 14); |
| real or integer | 5.0; -3; |
| legend alignment | upper-left; |
| shape | shape("clockwise-arrow"); |
| shape-effect | shape-effect("outline"); |
| text-extractor | text-extractor(annotation("product")); |
| boolean | show-labels : "true"; |
| feature-filter | set1 : feature-filter("all"); |
| plot-file | plot-file("range", "range.csv"); |
| plot-calculator | plot-calculator("gcContent"); |
| continuous-map | continuous-map(score(90,100), opacity); |
| discrete-map | discrete-map(cog('A','B'), colors(color("red"),color("blue")); |
Color
Color is used to define a particular color. It can take on the value of predefined constant colors, or by providing the amount of red, green, blue and the opacity of the color. The amount of each color (red, green, blue, alpha) is set by providing each value a number from 0 to 255.
Constants: black, silver, grey, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, orange, navy, blue, teal, aqua.
Examples:
color("red");
color(128, 0, 0, 255); /* red, green, blue, alpha */
Colors
Colors is used to define an array of colors. It can take on as parameters any element of type color.
Examples:
colors(color(“red”));
colors(color(128, 0, 0, 255), color("blue"));
Font
The font property value is used to define a font for text displayed in GView. This property value can be used to control the type of font, the style, or the point size. This information is stored in a triplet (name, style, point size).
Name defines the font name and can take on values: Default, Dialog, DialogInput, Monospaced, Serif, SansSerif. Style defines the font style and can take on values: plain, bold, italic, bold-italic.
Size defines the font point size, and can take the value of any integer larger than zero.
Example:
font("SansSerif", "plain", 12); /* name, style, point size */
Real or Integer
These property values define a real number or integer number. Unless otherwise stated, integers must be within the range of [-2,147,483,648 to 2,147,483,647], and real numbers must be within the range [4.94e-324, 1.80e308]. Most property values have restrictions on the numbers, such as must be >= 0, or must be between 0 and 1.
Legend Alignment
This property value only applies when defining legends. It controls where the legend text box should be displayed. The possible values are upper-left, upper-center, upper-right, middle-left, middle-center, middle-right, lower-left, lower-center, and lower-right. Example:
alignment : upper-left; /** specifies that the legend text box should be displayed in the upper left corner **/
Shape
The shape property value is used to define the shape of an item drawn on the GView map. This property is often used to draw different types of arrow heads on features. The shape property value can take on one of a limited number of constants.
Constants: clockwise-arrow, counterclockwise-arrow, clockwise-arrow2, counterclockwise-arrow2, block.
Example:
shape("clockwise-arrow");
Shape-Effect
Shape-effect is used to define a particular effect to apply to a shape drawn on the GView map. This can be used to show features with shading, or as an outline instead of a filled shape. Shape-effect takes on a number of constant values defining the particular effect.
Constants: basic, outline, shaded, standard
Example:
shape-effect(“basic”);
Text-Extractor
Text-extractor is used to define how to extract text from features. This is a convenient way to define the information that is to be shown in the labels or the tool tips of the genome. Some text-extractors take an additional parameter, allowing more control over the text to be extracted.
The values for text-extractor are:
| Extractor Type | Description | Parameters |
|---|---|---|
| location | Extracts the location of a feature. | |
| symbols | Extracts the symbols of a feature, if any. | |
| annotation("key") | Extracts a value for the passed annotation key associated with a feature. | key: the annotation key to pull text from. Annotation keys are found in the Genbank genome file. |
| stringbuilder(format, ...) | Formats text from other text extractors and combines them into one string. | format: A string defining the format to display the text, use %s to indicate the location of strings from other text extractors. ... : A list of other text extractors to pull text from. |
Example:
text-extractor(“location”); /* extracts the location of a particular feature */
text-extractor(annotation(“product”)); /* extracts any text associated with the “product” annotation of a feature */
/* Uses the passed format string to format any text pulled out from the two passed text-extractors. */
/* The %s character defines the location to insert the passed text (similar to c-style printf). */
/* The \A character specifies a newline. */
/* This formats the text to use for tooltips or labels as follows:
Product : "the product"
Location : "the location"
*/
text-extractor(stringbuilder(" Product: %s\A Location: %s",annotation("product"),"location"));
Boolean
The boolean property value specifies a boolean value, one of true or false.
Example:
“true”;
“false”;
Feature Filter
The feature-filter property value defines a specific method of matching features on a sequence. This is used within the FeatureFilter selector to define sets of features to display on the genomic map. The syntax of feature-filteris:
feature-filter(filter definition);
The filter definition defines the method of filtering out valid features to include in this set. These can consist of a number of different filter functions. A list of valid filter functions can be found below.
| Filter Function | Description | Parameters | Example |
|---|---|---|---|
| "all" | Filters out all features. | "all" | |
| sequenceName(name) | Filters out features from a particular sequence with the given name. | name: The name of the sequence to filter out. | sequenceName("seq_name") |
| strand(strandValue) | Filters out features on a particular strand. | strandValue: positive, negative, unknown. | strand("positive") |
| type(typeValue) | Filters out features by a particular type. | typeValue: any valid type value associated with a Feature | type("CDS") |
| hasAnnotation(annotationType) | Filters out features which have a particular annotation set. | annotationType: the particular type of annotation a feature must have | hasAnnotation("product") |
| annotationValueEquals(annotation, value) | Filters out features whose given annotation has the given value. | annotation: The annotation to examine. | annotationValueEquals("locus_tag" ,"locus_tag_value") |
| value: The value this annotation must contain. | |||
| annotationValueContains(annotation, value) | Filters out features whose annotation contains part of of the passed value. | annotation: The annotation to examine. | annotationValueContains("product", "hypothetical") |
| value: The value which must be contained in the given annotation for a given feature to match. | |||
| overlaps(start,stop) | Filters out features which overlap the given location. | (start,stop): Defines the start/stop base pair for a location to check. | overlaps(0,1000) |
| not(filter) | Filters out all features which do not match the given filter. | filter: The filter to use, can be any valid filter function. | not(strand("positive")) |
| and(...) | Filters out all features which match every one of the passed filter. | ...: A list of any valid filter functions. | and(strand("positive"), annotationValueEquals("COG", "A")) |
| or(...) | Filters out all features which match at least one of the passed filters. | ..: A list of any valid filter functions. | or(strand("negative"), overlaps(0,1000)) |
Example:
/* Defines a set of features, in this case all CDS features on the positive strand */
feature-filter(and(type("CDS"), strand("positive")));
/* Defines a set of features, in this case all negative stranded features */
feature-filter(strand("negative"));
Plot File
The plot-file property value is used within the plot selector to define a file to read data from. It takes on two parameters: file type and file path.
File Type
This parameter describes the type of the file to read. The following are valid file types:
| File Type | Description | Format | Example |
|---|---|---|---|
| "point" | A file mapping base-pairs to a data point value. | A Comma Separated Values (CSV) file containing two fields: base pair, data value | 50000,0.45 100000,0.45 150000,0.88 |
| "range" | A file mapping a range of base-pairs to a data point. | A CSV file containing three fields: base start, base end, data value | 0,5000,50.8 5000,10000,56.9 10000,15000,89.12 |
File Path
This defines the path of the file to read, relative to the location of the GSS file being processed.
Note: If defining a path on Windows (for example C:\path\to\data.csv) then you must have two '' characters in the path (for example C:\path\to\data.csv)
Example:
example.gss:
/** The plot file "plot-range.csv" is used, and is to be interpreted as a "range" formatted csv file **/
plot-file("range", "plot-range.csv");
plot-range.csv
0,5000,50.8
5000,10000,56.9
10000,15000,89.12
Plot Calculator
The plot-calculator property value is used within the plot selector to define an internally calculated type of data to plot. It takes on one parameter, the type of calculation to perform.
Calculation Type
This parameter defines the type of internal calculation to perform to generate the data to plot. There are two defined types:
| Type | Description | Example |
|---|---|---|
| gcContent | This type will generate the data to plot by calculating the average gc content within the sequence. | plot-calculator(“gcContent”) |
| gcSkew | This type will generate the data to plot by calculating the average gc skew within the sequence. | plot-calculator(“gcSkew”) |
Example:
example.gss
plot-calculator("gcContent");
Continuous Map
The continuous-map property value is used within the Slot or FeatureSet selectors to define a mapping between a range of properties, and a range of style values. It takes on two parameters: continuous property mapper, and continuous style mapper and maps between the appropriate properties to the appropriate styles.
Continuous Property Mapper**
This parameter defines the first stage of the mapping. It defines how to map properties of features on the map into a range of real values from [0,1].The below are a list of valid types:
| Continuous Property Mapper | Description | Example |
|---|---|---|
| Score Property Mapper | Maps the score of each individual feature to a range of values in [0,1]. This mapper takes on two sub-parameters. | |
| Min Score: A real in the range [0,1] defining the minimum score to map to. Any scores below Min Score will be mapped to 0, and any score above Min Score will be mapped to an appropriate value between [0,1]. | score(80,100) | |
| Max Score: A real in the range [Min Score, 1] defining the maximum score to map to. Any scores above Max Score will be mapped to 1, and any score below Max Score will be mapped to an appropriate value between [0,1]. | score(20,30) |
Continuous Style Mapper
This parameter defines the second stage of the mapping.It defines how to map values in the range [0,1] to style properties of individual features.The below are a list of valid types:
| Continuous Style Mapper | Description | Example |
|---|---|---|
| Opacity Mapper | Maps a value from [0,1] to an opacity of the feature, with 0 being completely transparent and 1 being completely opaque. | opacity |
Example example.gss
/* This would map any "score" property for each feature in the range [90,100] to a specific opacity value. */
/* The score 90 would map to opacity 0, the score 95 would map to opacity 0.5, and the score 100 would map to opacity value 1. */
continuous-map(score(90,100), opacity);
Discrete Map
The discrete-map property value is used within the Slot or FeatureSet selectors to define a mapping between a discrete set of properties, and a set of style values. It takes on two parameters: discrete property mapper, and discrete style mapper and maps between the appropriate properties to the appropriate styles.
Discrete Property Mapper
This parameter defines the first stage of the mapping. It defines how to map properties of features on the map into a specific index used to lookup the style property to use. The below are a list of valid types:
| Discrete Property Mapper | Description | Example |
|---|---|---|
| Cog Mapper | Maps a specific COG category to an index used to lookup the style information to use. Takes as parameters the list of applicable COG categories. | cog('A', 'B', 'C', 'D') |
Discrete Style Mapper
This parameter defines the second stage of the mapping. It maps an index value from the first mapper to a specific style category. The below are a list of valid types:
| Discrete Style Mapper | Description | Example |
|---|---|---|
| Colors mapper | Maps to one of the defined list of colors. Colors are defined using the gss#colors? property type. | colors(color("red"), color(0,0,0,255), color("blue") |
Example
example.gss
/* This will map the given list of cog categories to the given list of colors. */
property-mapper : discrete-map(
cog('A','B','C','D','E','F','G','H','I','J','K','L','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'
),
colors(color(255,0,0,255), color(255,98,71,255),
color(0,255,255,255), color(240,230,140,255),
color(70,130,180,255), color(0,191,255,255),
color(0,206,209,255), color(0,0,255,255),
color(105,90,205,255), color(240,128,128,255),
color(255,136,0,255), color(255,20,147,255),
color(108,142,35,255), color(33,139,33,255),
color(189,182,107,255), color(154,205,50,255),
color(0,0,128,255), color(190,190,190,255),
color(105,105,105,255), color(50,205,50,255),
color(175,255,47,255), color(0,250,150,255),
color(143,188,143,255), color(255,0,0,255),
color(59,179,111,255), color(255,255,0,255)
)
);
Link
A link is responsible for connecting a feature holder style with a legend item. Consequently, this parameter is applicable to only feature holder styles and legend items. If a feature holder style is linked with a legend, then the style editor will ensure that all colour changes between one item that is linked will propagate to all linked items. Their implementation involves using unique string tags to specify links:
Example
link : "1";
Full GSS Example
The following is an example of the GSS format:
/* This is a commment */
/* Defines the set of FeatureFilters used to filter out features on the geneome this style is applied to. */
FeatureFilter
{
/* Defines a set of features, in this case all negative stranded features */
set0 : feature-filter(strand("negative"));
}
/* Information on the style for the background */
background
{
/* Defines the background color. */
color : color("white");
}
/* Global style information for slots */
slot
{
spacing : 10.0;
}
/* Style information for slot number 1 (one above the backbone) */
slot#1
{
color : color("red");
thickness : 20.0; /* Thickness of the slot */
feature-shape : shape("block");
feature-effect : shape-effect("standard");
}
/* Style information for labels within slot 1 */
slot#1 labels
{
text-color : color("red");
background-color : color(255,255,255,200);
font : font("SansSerif","plain",14);
label-extractor : text-extractor(annotation("product")); /* Defines how to extract text for the labels from the features (in this case, extract the "product" annotation). */
show-labels : "true";
}
/* Style information for all features belonging to set 0 within slot 1 */
slot#1 FeatureSet#set0
{
color : color("red");
thickness-proportion : 1.0; /* thickness as a proportion of slot thickness (from 0 to 1) */
feature-effect : shape-effect("standard");
feature-shape : shape("counterclockwise-arrow");
tooltip-text : text-extractor(annotation("product"));
}
/* Information specific to the tooltip item that is displayed */
tooltip
{
text-color : color("black");
outline-color : color(0,0,0,128);
background-color : color(134,134,255,255);
font : font("SansSerif","plain",12);
}
/* Style information for the ruler on the map */
ruler
{
major-tick-color : color("black");
minor-tick-color : color("black");
label-color : color("black");
major-tick-length : 8.0;
minor-tick-length : 3.0;
tick-density : 1.0;
tick-thickness : 2.0;
tick-padding : 10.0;
label-font : font("SansSerif","plain",12);
}
/* Style information for the backbone (the center circular/linear arc) for the map */
backbone
{
color : color("gray");
thickness : 5.0;
backbone-effect : shape-effect("standard");
}
legend#title /* Defines default style information for a legend text box with id=title */
{
background-color : color("white");
text-color : color("black");
text-font : font("SansSerif", "bold", 14);
alignment : upper-center;
}
legend#title legenditem#0 /* Defines style information for text item with id=0 under legend with id=title */
{
text-color : color("black");
text-font : font("SansSerif", "bold", 24);
legend-text : "NC_007622";
}
legend#1 /* Default style information for a legend text box with id=1 */
{
background-color : color("white");
text-font : font("SansSerif", "plain", 12);
alignment : upper-right;
}
legend#1 legenditem#0 /* Defines style information for text item with id=0 under legend with id=1 */
{
text-color : color("black");
text-font : font("SansSerif", "bold", 14);
legend-text : "Features";
}
legend#1 legenditem#1 /* Defines style information for text item with id=1 under legend with id=1 */
{
text-color : color("black");
show-swatch : "true";
swatch-color : color("red");
legend-text : "Negative stranded";
}
Which produces the output:
| Circular | Linear | |
|---|---|---|
| Image | ||
| Genome Data | nc_007622.gbk.zip | |
| GSS Style | gssexample.gss | |
| GView Command | java -jar gview.jar -i nc_007622.gbk -s gssexample.gss \ -l circular -f png -o image.png -W 1100 -H 800 | java -jar gview.jar -i nc_007622.gbk -s gssexample.gss \ -l linear -f png -o image.png -W 1200 -H 500 |