VisualStyleBypass

This object represents a Visual Style Bypass type, but it is actually just an untyped object.

A visual style bypass may have two attributes:

nodes
edges

Each one is an object that redefines a set of visual properties. They are dictionaries that have edges and nodes id values as keys, and objects that contain the visual styles as values.

Notice that you cannot bypass global properties, and it is not possible to set visual mappings either.

You can bypass any of the nodes or edges visual properties. Just use the same names listed at VisualStyle.

Examples

var bypass = {
        nodes: {
            "1": { color: "#ff0000", opacity: 0.5, size: 32 },
            "3": { color: "#ffff00", opacity: 0.9 },
            "7": { color: "#ffff00", opacity: 0.2 }
        },
        edges: {
            "22": { width: 4, opacity: 0.2 },
            "23": { width: 4, opacity: 0.2 }
         }
};

VisualStyle

This object represents a Visual Style type, but it is actually just an untyped object.

A visual style may have three attributes:

global
nodes
edges

Each one is an object that defines a set of visual properties.

For each visual property, you can specify a default value or define a dynamic visual mapping. Cytoscape Web currently supports four different types of visual mappers:

continuousMapper
discreteMapper
passthroughMapper
customMapper

In order to create a visual style, just create an object with the expected fields.

Never do:

var style = new org.cytoscapeweb.VisualStyle(); // Wrong!!!

Fields

edges {Object} : An object that defines visual styles for edges.

The possible edge properties are:

color {String}: Color of edges. The default value is "#999999".
width {Number}: Line width of edges. The default value is 1 pixel.
opacity {Number}: The edge opacity (0 to 1). The default value is 0.8.
style {String}: The edge line style. One of: "SOLID", "DOT", "LONG_DASH", "EQUAL_DASH". The default value is "SOLID".
mergeStyle {String}: The line style for merged edges. One of: "SOLID", "DOT", "LONG_DASH", "EQUAL_DASH". The default value is "SOLID".
mergeColor {String}: Line color for merged edges. The default value is "#666666".
mergeWidth {Number}: Line width for merged edges. The default value is 1 pixel.
mergeOpacity {Number}: Opacity of merged edges (0 to 1). The default value is 0.8.
selectionColor {String}: The fill color of selected edges. The default value is the same one set to color (or mergeColor, when edges are merged).
selectionOpacity {Number}: The opacity of selected edges (0 to 1). The default value is the same one set to opacity.
selectionGlowColor {String}: The glow color of selected edges.The default value is "#ffff33".
selectionGlowOpacity {Number}: The glow transparency of selected edges. Valid values are 0 to 1. The default value is 0.6 (60% opaque).
selectionGlowBlur {Number}: The amount of blur for the selection glow. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly.
selectionGlowStrength {Number}: The strength of the glow color imprint or spread when the edge is selected. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 10.
hoverOpacity {Number}: The opacity of the edge when the mouse is over it (0 to 1). The default value is the same one set to opacity.
curvature {Number}: The curvature amount of curved edges. The default value is 18.
sourceArrowShape {ArrowShape}: Shape name of source arrows. The default value is "NONE".
targetArrowShape {ArrowShape}: Shape name of target arrows. For directed edges, the default value is "DELTA". For undirected ones, the default value is "NONE".
sourceArrowColor {String}: Color code of source arrows. The default value is the same one set to the edge color property.
targetArrowColor {String}: Color code of target arrows. The default value is the same one set to the edge color property.
label {String}: The text to be displayed as edge label. There is no default value or mapper for edge labels.
labelFontName {String}: Font name of edge labels. The default is "Arial".
labelFontSize {Number}: The point size of edge labels. The default size is 11.
labelFontColor {String}: Font color of edge labels. The default value "#000000".
labelFontWeight {String}: normal or bold. The default is "normal".
labelFontStyle {String}: normal or italic. The default is "normal".
labelGlowColor {String}: The color of the label glow. The default value is "#ffffff".
labelGlowOpacity {Number}: The alpha transparency of the label glow. Valid values are 0 to 1. The default value is 0 (totally transparent).
labelGlowBlur {Number}: The amount of blur for the label glow. Valid values are 0 to 255 (floating point). The default value is 2. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly.
labelGlowStrength {Number}: The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 20.
tooltipText {String}: Static text or a text formatter for regular edge tool tips. A list with all the edge data attributes is displayed by default.
mergeTooltipText {String}: Static text or a text formatter for merged edge tool tips. A list with all the merged edge data attributes is displayed by default.
tooltipFont {String}: Font name of edge tool tips. The default font is "Arial".
tooltipFontSize {Number}: The point size of edge tool tips. The default value is 11.
tooltipFontColor {String}: Font color of edge tool tips. The default value is "#000000".
tooltipBackgroundColor {String}: Background color of edge tool tips. The default value is "#f5f5cc".
tooltipBorderColor {String}: Border color of edge tool tips. The default value is "#000000".

global {Object} : An object that defines global visual properties.

Remember that global properties do not accept visual mappers, because they cannot be associated with nodes/edges data attributes. If you try to set a mapper to a global property, the mapper is simply ignored.

The possible global properties are:

backgroundColor {String}: Background color of the network view (hexadecimal code). The default value is "#ffffff".
tooltipDelay {Number}: Number of milliseconds to delay before displaying the tooltip, when the cursor is over a node or edge. The default value is 800 milliseconds.
selectionFillColor {String}: Fill color of the drag-selection rectangle. The default value is "#8888ff".
selectionLineColor {String}: Line color of the drag-selection border. The default value is "#8888ff".
selectionFillOpacity {Number}: Fill opacity of the drag-selection rectangle (0 to 1). The default value is 0.1.
selectionLineOpacity {Number}: Line opacity of the drag-selection border (0 to 1). The default value is 0.8.
selectionLineWidth {Number}: Line width of the drag-selection border. The default value is 1.

nodes {Object} : An object that defines visual styles for nodes.

The possible node properties are as follows. Each property can be prefixed by "compound" and the first letter of the term is correspondingly capitalized (e.g. "color" becomes "compoundColor") for compound nodes.

shape {NodeShape}: Node shape name. The default value for regular nodes is "ELLIPSE". The compoundShape property accepts only "RECTANGLE" (default), "ROUNDRECT" or "ELLIPSE".
size {Number}: Node size, in pixels. It has the same effect of setting the same value (or mapper) to both width and height. The default value is 24. You can also set "auto" if you want to let Cytoscape Web calculate the size of the node automatically so it encloses its label.
compoundSize {String}: The size of compound nodes is always automatically calculated, so the actual size cannot be set. This property accepts two values:
- auto (default): compound nodes are sized to fit their child labels inside.
- ignoreLabels: child labels are ignored when calculating the compound node size.
width {Number}: Node width, in pixels. It is not set by default. If set, it overrides the value returned by size. Because the size of compound nodes is automatically calculated, setting compoundWidth has no effect.
height {Number}: Node height, in pixels. It is not set by default. If set, it overrides the value returned by size. Because the size of compound nodes is automatically calculated, setting compoundHeight has no effect.
color {String}: Fill color code of nodes. The default value is "#f5f5f5".
image {String}: The URL of the image to be used as the node background. No image is used by default. If you specify a cross-domain address, then the image might not be loaded by Flash, unless the host provides a cross-domain XML file that allows you to do so. We recommend you use a server-side proxy on your web host machine if you have this issue. See an example in PHP to understand the process of writing your own proxy.
borderColor {String}: Border color of nodes. The default value is "#666666".
borderWidth {Number}: Border width of nodes. The default value is 1.
opacity {Number}: The node opacity (0 to 1). The default value is 0.8.
selectionColor {String}: The fill color of selected nodes. The default value is the same one set to color.
selectionBorderColor {String}: The border color of selected nodes. The default value is the same one set to borderColor.
selectionOpacity {Number}: The opacity of selected nodes (0 to 1). The default value is the same one set to opacity.
selectionBorderWidth {Number}: The border width of selected nodes (0 to 1). The default value is the same one set to borderWidth.
selectionGlowColor {String}: The glow color of selected nodes.The default value is "#ffff33".
selectionGlowOpacity {Number}: The glow transparency of selected nodes. Valid values are 0 to 1. The default value is 0.6 (60% opaque).
selectionGlowBlur {Number}: The amount of blur for the selection glow. Valid values are 0 to 255 (floating point). The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly.
selectionGlowStrength {Number}: The strength of the glow color imprint or spread when the node is selected. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 6.
hoverOpacity {Number}: The opacity of the node when the mouse is over it (0 to 1). The default value is the same one set to opacity.
hoverBorderColor {String}: The border color when the mouse is over a node. The default value is the same one set to borderColor.
hoverBorderWidth {Number}: The node border width on mouse over. The default value is the same one set to borderWidth.
hoverGlowColor {String}: The node glow color on mouse over. The default value is "#aae6ff".
hoverGlowOpacity {Number}: The node glow opacity on mouse over (0 to 1). The default value is 0, which means that there is no visible glow on mouse over.
hoverGlowBlur {Number}: The amount of blur for the mouse over glow. Valid values are 0 to 255 (floating point). The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly.
hoverGlowStrength {Number}: The strength of the glow color imprint or spread on mouse over. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 6.
label {String}: The text to be displayed as node label. A Passthrough Mapper is created by default, and it displays the node data.label attribute value.
labelFontName {String}: Font name of node labels. The default is "Arial".
labelFontSize {Number}: The point size of node labels. The default size is 11.
labelFontColor {String}: Font color of node labels. The default value "#000000".
labelFontWeight {String}: normal or bold. The default is "normal".
labelFontStyle {String}: normal or italic. The default is "normal".
labelHorizontalAnchor {String}: The horizontal label anchor: left, center or right
labelVerticalAnchor {String}: The vertical label anchor: top, middle or bottom
labelXOffset {Number}: Horizontal distance of the label from the node border. If labelHorizontalAnchor is "right", the distance is measured from the left side of the node, and a negative offset displaces the label towards left.
labelYOffset {Number}: Vertical distance of the label from the node border. If labelVerticalAnchor is "bottom", the distance is measured from the top side of the node, and a negative offset moves the label upper.
labelGlowColor {String}: The color of the label glow. The default value is "#ffffff".
labelGlowOpacity {Number}: The alpha transparency of the label glow. Valid values are 0 to 1. The default value is 0 (totally transparent).
labelGlowBlur {Number}: The amount of blur for the label glow. Valid values are 0 to 255 (floating point). The default value is 8. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly.
labelGlowStrength {Number}: The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the glow and the background. Valid values are 0 to 255. The default is 20.
tooltipText {String}: Static text or a text formatter for node tool tips. A list with all the node data attributes is displayed by default.
tooltipFont {String}: Font name of node tool tips. The default font is "Arial".
tooltipFontSize {Number}: The point size of node tool tips. The default value is 11.
tooltipFontColor {String}: Font color of node tool tips. The default value is "#000000".
tooltipBackgroundColor {String}: Background color of node tool tips. The default value is "#f5f5cc".
tooltipBorderColor {String}: Border color of node tool tips. The default value is "#000000".

Examples

var style = {
        global: {
            backgroundColor: "#ffffff",
            tooltipDelay: 1000
        },
        nodes: {
            shape: "ELLIPSE",
            color: "#333333",
            opacity: 1,
            size: { defaultValue: 12, 
                    continuousMapper: { attrName: "weight", 
                                        minValue: 12, 
                                        maxValue: 36 } },
            borderColor: "#000000",
            tooltipText: "<b>${label}</b>: ${weight}"
        },
        edges: {
            color: "#999999",
            width: 2,
            mergeWidth: 2,
            opacity: 1,
            label: { passthroughMapper: { attrName: "id" } },
            labelFontSize: 10,
            labelFontWeight: "bold"
         }
};