GView Style Sheet

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 valuesfollowing the syntax:
[property] : [value];

The full syntax 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";
}

This produces the output:

  Circular Linear
Image example-gss-circular-small.png example-gss-linear-small.png
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
 
Contact: Aaron Petkau, Eric Marinier, Matthew Stuart-Edwards at gview@phac-aspc.gc.ca