CX2 Visual Styles
Introduction
This document provides a comprehensive overview of CX2 Visual Styles.
Definitions:
-
CX2 Visual Style: A standardized set of visual properties defined in the CX 2.0 format, ensuring consistent visualization across different platforms and clients within the Cytoscape ecosystem.
-
Cytoscape DT: Cytoscape Desktop application.
-
Cytoscape.js: A JavaScript library for graph theory network visualization and analysis.
-
JSON Schema: A declarative format for defining the structure and validation rules of JSON data, specifying constraints such as data types, required fields, and value formats. See json-schema.org.
Table of Contents
- Introduction
- Style Properties
- 2.1. Network Properties
- 2.2. Node Properties
- 2.2.1. Node Shape
- 2.2.2. Node Background Color
- 2.2.3. Node Width and Height
- 2.2.4. Node Background Opacity
- 2.2.5. Node Visibility
- 2.2.6. Node Border Properties
- 2.2.7. Node Label Properties
- 2.2.7.1. Node Label Text
- 2.2.7.2. Node Label Background Color
- 2.2.7.3. Node Label Background Shape
- 2.2.7.4. Node Label Background Opacity
- 2.2.7.5. Node Label Color
- 2.2.7.6. Node Label Font Face
- 2.2.7.7. Node Label Font Size
- 2.2.7.8. Node Label Position
- 2.2.7.9. Node Label Rotation
- 2.2.7.10. Node Label Opacity
- 2.2.7.11. Node Label Max Width
- 2.2.8. Node Image
- 2.2.9. Node Pie Chart
- 2.2.10. Node Selected Properties
- 2.2.11. Node Position Properties
- 2.2.12. Compound Node Properties
- 2.3. Edge Properties
- 2.3.1. Edge Width
- 2.3.2. Edge Line Color and Opacity
- 2.3.3. Edge Curve
- 2.3.4. Edge Bezier and Segment Points
- 2.3.5. Edge Line Style
- 2.3.6. Edge Arrow Properties
- 2.3.7. Edge Visibility
- 2.3.8. Edge Label Properties
- 2.3.8.1. Edge Label Text
- 2.3.8.2. Edge Label Autorotate
- 2.3.8.3. Edge Label Background Color
- 2.3.8.4. Edge Label Background Shape
- 2.3.8.5. Edge Label Background Opacity
- 2.3.8.6. Edge Label Color
- 2.3.8.7. Edge Label Font Face
- 2.3.8.8. Edge Label Font Size
- 2.3.8.9. Edge Label Position
- 2.3.8.10. Edge Label Rotation
- 2.3.8.11. Edge Label Opacity
- 2.3.8.12. Edge Label Max Width
- 2.3.9. Edge Selected Properties
- 2.3.10. Edge Stacking Properties
- 2.3.11. Edge Z-Order
- 2.4. Setting Visual Properties
- 2.5. Editor Properties
Style Properties
This section provides detailed descriptions of CX2 Visual Style properties, including their JSON-schema representations and mappings to Cytoscape DT.
2.1. Network Properties
2.1.1. Network Background Color
- CX2 Visual Property Name:
NETWORK_BACKGROUND_COLOR - Description: Sets the background color of the network canvas.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NETWORK_BACKGROUND_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NETWORK_BACKGROUND_PAINT -
Example:
{ "network": { "NETWORK_BACKGROUND_COLOR": "#FFFFFF" } }
2.2. Node Properties
2.2.1. Node Shape
- CX2 Visual Property Name:
NODE_SHAPE - Description: Determines the shape of nodes.
- Data Type:
string -
Enum:
"ellipse""triangle""rectangle""round-rectangle""parallelogram""diamond""hexagon""octagon""vee"
-
JSON Schema:
{ "NODE_SHAPE": { "type": "string", "enum": ["ellipse", "triangle", "rectangle", "round-rectangle", "parallelogram", "diamond", "hexagon", "octagon", "vee"] } } - Cytoscape DT Name:
NODE_SHAPE -
Example:
{ "node": { "NODE_SHAPE": "round-rectangle" } }
2.2.2. Node Background Color
- CX2 Visual Property Name:
NODE_BACKGROUND_COLOR - Description: Sets the fill color of nodes.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NODE_BACKGROUND_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NODE_FILL_COLOR -
Example:
{ "node": { "NODE_BACKGROUND_COLOR": "#89D0F5" } }
2.2.3. Node Width and Height
- CX2 Visual Property Names:
NODE_WIDTHNODE_HEIGHT
- Description: Define the dimensions of nodes.
NODE_WIDTHdefines the width of the node, andNODE_HEIGHTdefines the height of the node. - Data Type:
number - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "NODE_WIDTH": { "type": "number", "exclusiveMinimum": 0 }, "NODE_HEIGHT": { "type": "number", "exclusiveMinimum": 0 } } - Cytoscape DT Names:
NODE_WIDTHNODE_HEIGHT
- Comment: Node height and width are generally independent from each other. However, in Cytoscape Web, node width and height can be locked so that changing one automatically changes the other.
-
Example:
{ "node": { "NODE_WIDTH": 75.0, "NODE_HEIGHT": 35.0 } }
2.2.4. Node Background Opacity
- CX2 Visual Property Name:
NODE_BACKGROUND_OPACITY - Description: Sets the opacity of node backgrounds. 0 means transparent.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "NODE_BACKGROUND_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
NODE_TRANSPARENCY(Note: In Cytoscape DT, the value ofNODE_TRANSPARENCYis an integer from 0 to 255 and 0 means transparent.) -
Example:
{ "node": { "NODE_BACKGROUND_OPACITY": 1.0 } }
2.2.5. Node Visibility
- CX2 Visual Property Name:
NODE_VISIBILITY - Description: Controls node rendering and space occupancy in layouts.
- Data Type:
string - Enum:
"none""element"
-
JSON Schema:
{ "NODE_VISIBILITY": { "type": "string", "enum": ["none", "element"] } } - Cytoscape DT Name:
NODE_VISIBLE(In Cytoscape DT, the value istrueorfalse.) -
Example:
{ "node": { "NODE_VISIBILITY": "element" } }
2.2.6. Node Border Properties
2.2.6.1. Node Border Color
- CX2 Visual Property Name:
NODE_BORDER_COLOR - Description: Sets the color of node borders.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NODE_BORDER_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NODE_BORDER_PAINT -
Example:
{ "node": { "NODE_BORDER_COLOR": "#005A32" } }
2.2.6.2. Node Border Style
- CX2 Visual Property Name:
NODE_BORDER_STYLE - Description: Defines the style of node borders.
- Data Type:
string - Enum:
"solid""dashed"("long_dash"in Cytoscape DT)"dotted"("dot"in Cytoscape DT)"double"
-
JSON Schema:
{ "NODE_BORDER_STYLE": { "type": "string", "enum": ["solid", "dashed", "dotted", "double"] } } - Cytoscape DT Name:
NODE_BORDER_LINE_TYPE - Note: The following values are only supported in Cytoscape DT and are not supported in Cytoscape Web:
"marquee_dash""backward_slash""vertical_slash""marquee_dash_dot""contiguous_arrow""zigzag""marquee_equal""dash_dot""separate_arrow""equal_dash""sinewave""forward_slash"
-
Example:
{ "node": { "NODE_BORDER_STYLE": "solid" } }
2.2.6.3. Node Border Width
- CX2 Visual Property Name:
NODE_BORDER_WIDTH - Description: Sets the width of node borders.
- Data Type:
number - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "NODE_BORDER_WIDTH": { "type": "number", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
NODE_BORDER_WIDTH -
Example:
{ "node": { "NODE_BORDER_WIDTH": 2.0 } }
2.2.6.4. Node Border Opacity
- CX2 Visual Property Name:
NODE_BORDER_OPACITY - Description: Sets the opacity of node borders.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "NODE_BORDER_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
NODE_BORDER_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "node": { "NODE_BORDER_OPACITY": 1.0 } }
2.2.7. Node Label Properties
2.2.7.1. Node Label Text
- CX2 Visual Property Name:
NODE_LABEL - Description: The text content of node labels.
- Data Type:
string -
JSON Schema:
{ "NODE_LABEL": { "type": "string" } } - Cytoscape DT Name:
NODE_LABEL - Example:
Setting a passthrough mapping from the node attribute ‘name’ to the Node Label.
{ "nodeMapping": { "NODE_LABEL": { "type": "PASSTHROUGH", "definition": { "attribute": "name", "type": "string" } } } }
2.2.7.2. Node Label Background Color
- CX2 Visual Property Name:
NODE_LABEL_BACKGROUND_COLOR - Description: Defines the background color for node labels.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NODE_LABEL_BACKGROUND_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NODE_LABEL_BACKGROUND_COLOR -
Example:
{ "node": { "NODE_LABEL_BACKGROUND_COLOR": "#B6B6B6" } }
2.2.7.3. Node Label Background Shape
- CX2 Visual Property Name:
NODE_LABEL_BACKGROUND_SHAPE - Description: Specifies the shape of the label’s background.
- Data Type:
string - Enum:
"none""rectangle""round-rectangle"
-
JSON Schema:
{ "NODE_LABEL_BACKGROUND_SHAPE": { "type": "string", "enum": ["none", "rectangle", "round-rectangle"] } } - Cytoscape DT Name:
NODE_LABEL_BACKGROUND_SHAPE -
Example:
{ "node": { "NODE_LABEL_BACKGROUND_SHAPE": "none" } }
2.2.7.4. Node Label Background Opacity
- CX2 Visual Property Name:
NODE_LABEL_BACKGROUND_OPACITY - Description: Specifies the opacity of the label’s background.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "NODE_LABEL_BACKGROUND_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
NODE_LABEL_BACKGROUND_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "node": { "NODE_LABEL_BACKGROUND_OPACITY": 1.0 } }
2.2.7.5. Node Label Color
- CX2 Visual Property Name:
NODE_LABEL_COLOR - Description: Sets the color of node labels.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NODE_LABEL_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NODE_LABEL_COLOR -
Example:
{ "node": { "NODE_LABEL_COLOR": "#333333" } }
2.2.7.6. Node Label Font Face
- CX2 Visual Property Name:
NODE_LABEL_FONT_FACE - Description: Specifies the font family, style, and weight for node labels.
- Data Type:
object - Properties:
FONT_FAMILY:string(Enum:"serif","sans-serif","monospace")FONT_STYLE:string(Enum:"normal","italic")FONT_WEIGHT:string(Enum:"normal","bold")
-
JSON Schema:
{ "NODE_LABEL_FONT_FACE": { "type": "object", "properties": { "FONT_FAMILY": { "type": "string", "enum": ["serif", "sans-serif", "monospace"] }, "FONT_STYLE": { "type": "string", "enum": ["normal", "italic"] }, "FONT_WEIGHT": { "type": "string", "enum": ["normal", "bold"] } } } } - Cytoscape DT Name:
NODE_LABEL_FONT_FACE(In Cytoscape DT, some fonts may not always be available, as Java relies on what the OS has installed. Cytoscape DT supports only the style combinations available in Java Fonts: PLAIN, BOLD, ITALIC, or BOLD+ITALIC.) -
Example:
{ "node": { "NODE_LABEL_FONT_FACE": { "FONT_FAMILY": "sans-serif", "FONT_STYLE": "normal", "FONT_WEIGHT": "normal" } } }
2.2.7.7. Node Label Font Size
- CX2 Visual Property Name:
NODE_LABEL_FONT_SIZE - Description: Defines the font size (in pixels) for node labels.
- Data Type:
integer - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "NODE_LABEL_FONT_SIZE": { "type": "integer", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
NODE_LABEL_FONT_SIZE -
Example:
{ "node": { "NODE_LABEL_FONT_SIZE": 12 } }
2.2.7.8. Node Label Position
- CX2 Visual Property Name:
NODE_LABEL_POSITION - Description: Determines the placement of node labels.
- Data Type:
object - Properties:
HORIZONTAL_ALIGN:string(Enum:"left","center","right")VERTICAL_ALIGN:string(Enum:"top","center","bottom")HORIZONTAL_ANCHOR:string(Enum:"left","center","right")VERTICAL_ANCHOR:string(Enum:"top","center","bottom")MARGIN_X:numberMARGIN_Y:numberJUSTIFICATION:string(Enum:"left","center","right")
-
JSON Schema:
{ "NODE_LABEL_POSITION": { "type": "object", "properties": { "HORIZONTAL_ALIGN": { "type": "string", "enum": ["left", "center", "right"] }, "VERTICAL_ALIGN": { "type": "string", "enum": ["top", "center", "bottom"] }, "HORIZONTAL_ANCHOR": { "type": "string", "enum": ["left", "center", "right"] }, "VERTICAL_ANCHOR": { "type": "string", "enum": ["top", "center", "bottom"] }, "MARGIN_X": { "type": "number" }, "MARGIN_Y": { "type": "number" }, "JUSTIFICATION": { "type": "string", "enum": ["left", "center", "right"] } } } } - Cytoscape DT Name:
NODE_LABEL_POSITION -
Example:
{ "node": { "NODE_LABEL_POSITION": { "HORIZONTAL_ALIGN": "center", "VERTICAL_ALIGN": "center", "HORIZONTAL_ANCHOR": "center", "VERTICAL_ANCHOR": "center", "MARGIN_X": 0.0, "MARGIN_Y": 0.0, "JUSTIFICATION": "center" } } }
2.2.7.9. Node Label Rotation
- CX2 Visual Property Name:
NODE_LABEL_ROTATION - Description: Specifies the rotation angle of node labels in degrees.
- Data Type:
number - Constraints:
- Minimum:
-360 - Maximum:
360
- Minimum:
-
JSON Schema:
{ "NODE_LABEL_ROTATION": { "type": "number", "minimum": -360, "maximum": 360 } } - Cytoscape DT Name:
NODE_LABEL_ROTATION -
Example:
{ "node": { "NODE_LABEL_ROTATION": 0.0 } }
2.2.7.10. Node Label Opacity
- CX2 Visual Property Name:
NODE_LABEL_OPACITY - Description: Specifies the opacity of node labels.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "NODE_LABEL_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
NODE_LABEL_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "node": { "NODE_LABEL_OPACITY": 1.0 } }
2.2.7.11. Node Label Max Width
- CX2 Visual Property Name:
NODE_LABEL_MAX_WIDTH - Description: Defines the maximum width of node labels before text wrapping occurs.
- Data Type:
number - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "NODE_LABEL_MAX_WIDTH": { "type": "number", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
NODE_LABEL_WIDTH -
Example:
{ "node": { "NODE_LABEL_MAX_WIDTH": 200.0 } }
2.2.8. Node Image
- CX2 Visual Property Names:
NODE_CUSTOMGRAPHICS_<i>(for images)NODE_CUSTOMGRAPHICS_POSITION_<i>NODE_CUSTOMGRAPHICS_SIZE_<i>
-
Description: Allows embedding custom images within nodes at specified positions and sizes.
<i>indicates index of image (1-9). Each node can have up to 9 images assigned. - Data Types:
NODE_CUSTOMGRAPHICS_<i>:objectNODE_CUSTOMGRAPHICS_POSITION_<i>:objectNODE_CUSTOMGRAPHICS_SIZE_<i>:number
-
JSON Schemas:
NODE_CUSTOMGRAPHICS_<i>{ "NODE_CUSTOMGRAPHICS_<i>": { "type": "object", "properties": { "type": { "type": "string", "enum": ["image"] }, "name": { "type": "string" }, "properties": { "type": "object", "properties": { "url": { "type": "string", "format": "uri" }, "tag": { "type": "string" }, "id": { "type": "integer" } }, "required": ["url"] } }, "required": ["type", "name", "properties"] } }NODE_CUSTOMGRAPHICS_POSITION_<i>{ "NODE_CUSTOMGRAPHICS_POSITION_<i>": { "type": "object", "properties": { "JUSTIFICATION": { "type": "string", "enum": ["center", "left", "right"] }, "MARGIN_X": { "type": "number" }, "MARGIN_Y": { "type": "number" }, "ENTITY_ANCHOR": { "type": "string", "enum": ["N", "S", "E", "W", "NE", "NW", "SE", "SW", "C"] }, "GRAPHICS_ANCHOR": { "type": "string", "enum": ["N", "S", "E", "W", "NE", "NW", "SE", "SW", "C"] } }, "required": ["JUSTIFICATION", "ENTITY_ANCHOR", "GRAPHICS_ANCHOR"] } }NODE_CUSTOMGRAPHICS_SIZE_<i>{ "NODE_CUSTOMGRAPHICS_SIZE_<i>": { "type": "number", "minimum": 0 } } - Cytoscape DT Names:
NODE_CUSTOMGRAPHICS_<i>NODE_CUSTOMGRAPHICS_POSITION_<i>NODE_CUSTOMGRAPHICS_SIZE_<i>
-
Example:
{ "node": { "NODE_CUSTOMGRAPHICS_8": { "type": "image", "name": "org.cytoscape.ding.customgraphics.bitmap.URLImageCustomGraphics", "properties": { "url": "file:/Users/user/CytoscapeConfiguration/images3/25.png", "tag": "bitmap image", "id": 2 } }, "NODE_CUSTOMGRAPHICS_POSITION_8": { "JUSTIFICATION": "center", "MARGIN_X": 0.0, "MARGIN_Y": 0.0, "ENTITY_ANCHOR": "SW", "GRAPHICS_ANCHOR": "NE" }, "NODE_CUSTOMGRAPHICS_SIZE_8": 50.0 } }
2.2.9. Node Pie Chart
- CX2 Visual Property Names:
NODE_CUSTOMGRAPHICS_<i>(for pie charts)NODE_CUSTOMGRAPHICS_POSITION_<i>NODE_CUSTOMGRAPHICS_SIZE_<i>
-
Description: Embeds pie charts within nodes.
<i>indicated index of pie chart (1-9). Each node can have up to 9 pie charts assigned. - Data Types:
NODE_CUSTOMGRAPHICS_<i>:objectNODE_CUSTOMGRAPHICS_POSITION_<i>:objectNODE_CUSTOMGRAPHICS_SIZE_<i>:number
-
JSON Schemas:
NODE_CUSTOMGRAPHICS_<i>{ "NODE_CUSTOMGRAPHICS_<i>": { "type": "object", "properties": { "type": { "type": "string", "enum": ["chart"] }, "name": { "type": "string", "enum": ["org.cytoscape.PieChart"] }, "properties": { "type": "object", "properties": { "cy_range": { "type": "array", "items": { "type": "number" }, "minItems": 2, "maxItems": 2 }, "cy_colorScheme": { "type": "string" }, "cy_colors": { "type": "array", "items": { "type": "string", "format": "rgbColor" } }, "cy_dataColumns": { "type": "array", "items": { "type": "string" } } }, "required": ["cy_dataColumns"] } }, "required": ["type", "name", "properties"] } }NODE_CUSTOMGRAPHICS_POSITION_<i>{ "NODE_CUSTOMGRAPHICS_POSITION_<i>": { "type": "object", "properties": { "JUSTIFICATION": { "type": "string", "enum": ["center", "left", "right"] }, "MARGIN_X": { "type": "number" }, "MARGIN_Y": { "type": "number" }, "ENTITY_ANCHOR": { "type": "string", "enum": ["N", "S", "E", "W", "NE", "NW", "SE", "SW", "C"] }, "GRAPHICS_ANCHOR": { "type": "string", "enum": ["N", "S", "E", "W", "NE", "NW", "SE", "SW", "C"] } }, "required": ["JUSTIFICATION", "ENTITY_ANCHOR", "GRAPHICS_ANCHOR"] } }NODE_CUSTOMGRAPHICS_SIZE_<i>{ "NODE_CUSTOMGRAPHICS_SIZE_<i>": { "type": "number", "minimum": 0 } } - Cytoscape DT Names:
NODE_CUSTOMGRAPHICS_<i>NODE_CUSTOMGRAPHICS_POSITION_<i>NODE_CUSTOMGRAPHICS_SIZE_<i>
-
Example:
{ "node": { "NODE_CUSTOMGRAPHICS_3": { "type": "chart", "name": "org.cytoscape.PieChart", "properties": { "cy_range": [1.0, 16.35887097], "cy_colorScheme": "Set3 colors", "cy_colors": ["#8DD3C7", "#BEBADA"], "cy_dataColumns": ["Radiality", "Degree"] } }, "NODE_CUSTOMGRAPHICS_POSITION_3": { "JUSTIFICATION": "center", "MARGIN_X": 0.0, "MARGIN_Y": 0.0, "ENTITY_ANCHOR": "W", "GRAPHICS_ANCHOR": "E" }, "NODE_CUSTOMGRAPHICS_SIZE_3": 50.0 } }
2.2.10. Node Selected Properties
2.2.10.1. Node Selected
- CX2 Visual Property Name:
NODE_SELECTED - Description: Indicates whether the node is selected.
- Data Type:
boolean -
JSON Schema:
{ "NODE_SELECTED": { "type": "boolean" } } -
Example:
{ "node": { "NODE_SELECTED": false } }
2.2.10.2. Node Selected Paint
- CX2 Visual Property Name:
NODE_SELECTED_PAINT - Description: Specifies the color of the node when selected.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "NODE_SELECTED_PAINT": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
NODE_SELECTED_PAINT -
Example:
{ "node": { "NODE_SELECTED_PAINT": "#FFFF00" } }
2.2.11. Node Position Properties
2.2.11.1. Node X Location
- CX2 Visual Property Name:
NODE_X_LOCATION - Description: Specifies the X-coordinate of the node’s position.
- Data Type:
number -
JSON Schema:
{ "NODE_X_LOCATION": { "type": "number" } } - Cytoscape DT Name:
NODE_X_LOCATION -
Example:
{ "node": { "NODE_X_LOCATION": 100.0 } }
2.2.11.2. Node Y Location
- CX2 Visual Property Name:
NODE_Y_LOCATION - Description: Specifies the Y-coordinate of the node’s position.
- Data Type:
number -
JSON Schema:
{ "NODE_Y_LOCATION": { "type": "number" } } - Cytoscape DT Name:
NODE_Y_LOCATION -
Example:
{ "node": { "NODE_Y_LOCATION": 200.0 } }
2.2.11.3. Node Z Location
- CX2 Visual Property Name:
NODE_Z_LOCATION - Description: Specifies the Z-order of the node (stacking order).
- Data Type:
number -
JSON Schema:
{ "NODE_Z_LOCATION": { "type": "number" } } - Cytoscape DT Name:
NODE_Z_ORDER -
Example:
{ "node": { "NODE_Z_LOCATION": 0.0 } }
2.2.12. Compound Node Properties
2.2.12.1. Compound Node Shape
- CX2 Visual Property Name:
COMPOUND_NODE_SHAPE - Description: Defines the shape of compound nodes.
- Data Type:
string - Enum:
"ellipse""triangle""rectangle""round-rectangle""parallelogram""diamond""hexagon""octagon""vee"
-
JSON Schema:
{ "COMPOUND_NODE_SHAPE": { "type": "string", "enum": ["rectangle", "round-rectangle"] } } - Cytoscape DT Name:
COMPOUND_NODE_SHAPE -
Example:
{ "node": { "COMPOUND_NODE_SHAPE": "round-rectangle" } }
2.2.12.2. Compound Node Padding
- CX2 Visual Property Name:
COMPOUND_NODE_PADDING - Description: Specifies the padding around compound nodes.
- Data Type:
number - Constraints:
- Minimum:
0
- Minimum:
-
JSON Schema:
{ "COMPOUND_NODE_PADDING": { "type": "number", "minimum": 0 } } - Cytoscape DT Name:
COMPOUND_NODE_PADDING -
Example:
{ "node": { "COMPOUND_NODE_PADDING": 10.0 } }
2.3. Edge Properties
2.3.1. Edge Width
- CX2 Visual Property Name:
EDGE_WIDTH - Description: Sets the thickness of edges.
- Data Type:
number - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "EDGE_WIDTH": { "type": "number", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
EDGE_WIDTH -
Example:
{ "edge": { "EDGE_WIDTH": 3.0 } }
2.3.2. Edge Line Color and Opacity
2.3.2.1. Edge Line Color
- CX2 Visual Property Name:
EDGE_LINE_COLOR - Description: Sets the color of edge lines.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_LINE_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_UNSELECTED_PAINT -
Example:
{ "edge": { "EDGE_LINE_COLOR": "#666666" } }
2.3.2.2. Edge Opacity
- CX2 Visual Property Name:
EDGE_OPACITY - Description: Defines the transparency of edges.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "EDGE_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
EDGE_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "edge": { "EDGE_OPACITY": 1.0 } }
2.3.3 Edge Curve
2.3.3.1 Edge Curved
- CX2 Visual Property Name:
EDGE_CURVED - Description: Specifies whether the edge is rendered as a curved line.
- Data Type:
boolean -
JSON Schema:
{ "EDGE_CURVED": { "type": "boolean" } } - Cytoscape DT Name:
EDGE_CURVED -
Example:
{ "edge": { "EDGE_CURVED": true } }
2.3.3.2 Edge Curve Style
- CX2 Visual Property Name:
EDGE_CURVE_STYLE - Description: Determines how edges curve or deviate from straight lines.
- Data Type:
string - Enum:
"straight""segments""bezier""unbundled-bezier"
-
JSON Schema:
{ "EDGE_CURVE_STYLE": { "type": "string", "enum": ["straight", "segments", "bezier", "unbundled-bezier"] } } - Cytoscape DT Name:
EDGE_BEND - Descriptions of Values:
straight: The edge is rendered as a single straight line.segments: The edge is rendered as a series of straight lines defined byEDGE_SEGMENT_DISTANCESandEDGE_SEGMENT_WEIGHTS.bezier: The edge is rendered as a single bezier curve; curvature is calculated automatically.unbundled-bezier: The edge is rendered as a bezier curve with control points specified.
-
Example:
{ "edge": { "EDGE_CURVE_STYLE": "bezier" } }
2.3.4. Edge Bezier and Segment Points
2.3.4.1. Edge Bezier Point Distances
- CX2 Visual Property Name:
EDGE_BEZIER_POINT_DISTANCES - Description: Distances that, with weights, define bezier curvature.
- Data Type:
array - Items:
number -
JSON Schema:
{ "EDGE_BEZIER_POINT_DISTANCES": { "type": "array", "items": { "type": "number" } } } - Cytoscape DT Name:
EDGE_BEND
2.3.4.2. Edge Bezier Point Weights
- CX2 Visual Property Name:
EDGE_BEZIER_POINT_WEIGHTS - Description: Weights that, with distances, define bezier curvature.
- Data Type:
array - Items:
number -
JSON Schema:
{ "EDGE_BEZIER_POINT_WEIGHTS": { "type": "array", "items": { "type": "number" } } } - Cytoscape DT Name:
EDGE_BEND
2.3.4.3. Edge Segment Distances
- CX2 Visual Property Name:
EDGE_SEGMENT_DISTANCES - Description: Distances that, with weights, define edge segments.
- Data Type:
array - Items:
number -
JSON Schema:
{ "EDGE_SEGMENT_DISTANCES": { "type": "array", "items": { "type": "number" } } } - Cytoscape DT Name:
EDGE_BEND
2.3.4.4. Edge Segment Weights
- CX2 Visual Property Name:
EDGE_SEGMENT_WEIGHTS - Description: Weights that, with distances, define edge segments.
- Data Type:
array - Items:
number -
JSON Schema:
{ "EDGE_SEGMENT_WEIGHTS": { "type": "array", "items": { "type": "number" } } } - Cytoscape DT Name:
EDGE_BEND
2.3.5. Edge Line Style
- CX2 Visual Property Name:
EDGE_LINE_STYLE - Description: Specifies the pattern with which the edge line is painted.
- Data Type:
string - Enum:
"solid""dotted""dashed"
-
JSON Schema:
{ "EDGE_LINE_STYLE": { "type": "string", "enum": ["solid", "dotted", "dashed"] } } - Cytoscape DT Name:
EDGE_LINE_TYPE - Note Only selected in Cytoscape DT:
- “marquee_dash”,
- “backward_slash”,
- “vertical_slash”,
- “marquee_dash_dot”,
- “contiguous_arrow”,
- “zigzag”,
- “marquee_equal”,
- “dash_dot”,
- “separate_arrow”,
- “equal_dash”,
- “sinewave”,
- “Forward_slash”,
- “parallel_lines”
-
Example:
{ "edge": { "EDGE_LINE_STYLE": "solid" } }
2.3.6. Edge Arrow Properties
2.3.6.1. Edge Source Arrow Shape
- CX2 Visual Property Name:
EDGE_SOURCE_ARROW_SHAPE - Description: Defines the shape of the arrow at the edge’s source.
- Data Type:
string - Enum:
"none""triangle"(In Cytoscape DT -"delta")"triangle-cross"(In Cytoscape DT -"cross-delta")"square""diamond""circle""arrow"(rendered as"triangle")"open_circle""cross_open_delta""open_diamond""open_square""open_delta""tee"
-
JSON Schema:
{ "EDGE_SOURCE_ARROW_SHAPE": { "type": "string", "enum": ["none", "triangle", "triangle-cross", "square", "diamond", "circle", "vee", "tee"] } } - Cytoscape DT Name:
EDGE_SOURCE_ARROW_SHAPE -
Example:
{ "edge": { "EDGE_SOURCE_ARROW_SHAPE": "none" } }
2.3.6.2. Edge Source Arrow Color
- CX2 Visual Property Name:
EDGE_SOURCE_ARROW_COLOR - Description: Sets the color of the arrow at the edge’s source.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_SOURCE_ARROW_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_SOURCE_ARROW_UNSELECTED_PAINT -
Example:
{ "edge": { "EDGE_SOURCE_ARROW_COLOR": "#000000" } }
2.3.6.3. Edge Source Arrow Size
- CX2 Visual Property Name:
EDGE_SOURCE_ARROW_SIZE - Description: Sets the size of the arrow at the edge’s source.
- Data Type:
number - Constraints:
- Minimum:
0
- Minimum:
-
JSON Schema:
{ "EDGE_SOURCE_ARROW_SIZE": { "type": "number", "minimum": 0 } } - Cytoscape DT Name:
EDGE_SOURCE_ARROW_SIZE -
Example:
{ "edge": { "EDGE_SOURCE_ARROW_SIZE": 6.0 } }
2.3.6.4. Edge Source Arrow Selected Paint
- CX2 Visual Property Name:
EDGE_SOURCE_ARROW_SELECTED_PAINT - Description: Specifies the color of the source arrow when the edge is selected.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_SOURCE_ARROW_SELECTED_PAINT": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_SOURCE_ARROW_SELECTED_PAINT -
Example:
{ "edge": { "EDGE_SOURCE_ARROW_SELECTED_PAINT": "#FFFF00" } }
2.3.6.5. Edge Target Arrow Shape
- CX2 Visual Property Name:
EDGE_TARGET_ARROW_SHAPE - Description: Defines the shape of the arrow at the edge’s target.
- Data Type:
string - Enum:
"none""triangle"(In Cytoscape DT -"delta")"triangle-cross"(In Cytoscape DT -"cross-delta")"square""diamond""circle""arrow"(rendered as"triangle")"open_circle""cross_open_delta""open_diamond""open_square""open_delta""tee"
-
JSON Schema:
{ "EDGE_TARGET_ARROW_SHAPE": { "type": "string", "enum": ["none", "triangle", "triangle-cross", "square", "diamond", "circle", "vee", "tee"] } } - Cytoscape DT Name:
EDGE_TARGET_ARROW_SHAPE -
Example:
{ "edge": { "EDGE_TARGET_ARROW_SHAPE": "none" } }
2.3.6.6. Edge Target Arrow Color
- CX2 Visual Property Name:
EDGE_TARGET_ARROW_COLOR - Description: Sets the color of the arrow at the edge’s target.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_TARGET_ARROW_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_TARGET_ARROW_UNSELECTED_PAINT -
Example:
{ "edge": { "EDGE_TARGET_ARROW_COLOR": "#000000" } }
2.3.6.7. Edge Target Arrow Size
- CX2 Visual Property Name:
EDGE_TARGET_ARROW_SIZE - Description: Sets the size of the arrow at the edge’s target.
- Data Type:
number - Constraints:
- Minimum:
0
- Minimum:
-
JSON Schema:
{ "EDGE_TARGET_ARROW_SIZE": { "type": "number", "minimum": 0 } } - Cytoscape DT Name:
EDGE_TARGET_ARROW_SIZE -
Example:
{ "edge": { "EDGE_TARGET_ARROW_SIZE": 6.0 } }
2.3.6.8. Edge Target Arrow Selected Paint
- CX2 Visual Property Name:
EDGE_TARGET_ARROW_SELECTED_PAINT - Description: Specifies the color of the target arrow when the edge is selected.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_TARGET_ARROW_SELECTED_PAINT": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_TARGET_ARROW_SELECTED_PAINT -
Example:
{ "edge": { "EDGE_TARGET_ARROW_SELECTED_PAINT": "#FFFF00" } }
2.3.7. Edge Visibility
- CX2 Visual Property Name:
EDGE_VISIBILITY - Description: Controls edge rendering.
- Data Type:
string - Enum:
"none""element"
-
JSON Schema:
{ "EDGE_VISIBILITY": { "type": "string", "enum": ["none", "element"] } } - Cytoscape DT Name:
EDGE_VISIBLE(Values:trueorfalse) -
Example:
{ "edge": { "EDGE_VISIBILITY": "element" } }
2.3.8. Edge Label Properties
2.3.8.1. Edge Label Text
- CX2 Visual Property Name:
EDGE_LABEL - Description: The text content of edge labels.
- Data Type:
string -
JSON Schema:
{ "EDGE_LABEL": { "type": "string" } } - Cytoscape DT Name:
EDGE_LABEL -
Example:
{ "edgeMapping": { "EDGE_LABEL": { "type": "PASSTHROUGH", "definition": { "attribute": "interaction", "type": "string" } } } }
2.3.8.2. Edge Label Autorotate
- CX2 Visual Property Name:
EDGE_LABEL_AUTOROTATE - Description: Determines whether the edge label should automatically rotate to align with the edge.
- Data Type:
boolean -
JSON Schema:
{ "EDGE_LABEL_AUTOROTATE": { "type": "boolean" } } - Cytoscape DT Name:
EDGE_LABEL_AUTOROTATE -
Example:
{ "edge": { "EDGE_LABEL_AUTOROTATE": true } }
2.3.8.3. Edge Label Background Color
- CX2 Visual Property Name:
EDGE_LABEL_BACKGROUND_COLOR - Description: Defines the background color for edge labels.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_LABEL_BACKGROUND_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_LABEL_BACKGROUND_COLOR -
Example:
{ "edge": { "EDGE_LABEL_BACKGROUND_COLOR": "#B6B6B6" } }
2.3.8.4. Edge Label Background Shape
- CX2 Visual Property Name:
EDGE_LABEL_BACKGROUND_SHAPE - Description: Specifies the shape of the label’s background.
- Data Type:
string - Enum:
"none""rectangle""round-rectangle"
-
JSON Schema:
{ "EDGE_LABEL_BACKGROUND_SHAPE": { "type": "string", "enum": ["none", "rectangle", "round-rectangle"] } } - Cytoscape DT Name:
EDGE_LABEL_BACKGROUND_SHAPE -
Example:
{ "edge": { "EDGE_LABEL_BACKGROUND_SHAPE": "none" } }
2.3.8.5. Edge Label Background Opacity
- CX2 Visual Property Name:
EDGE_LABEL_BACKGROUND_OPACITY - Description: Sets the opacity of the edge label background.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "EDGE_LABEL_BACKGROUND_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
EDGE_LABEL_BACKGROUND_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "edge": { "EDGE_LABEL_BACKGROUND_OPACITY": 1.0 } }
2.3.8.6. Edge Label Color
- CX2 Visual Property Name:
EDGE_LABEL_COLOR - Description: Sets the color of edge labels.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_LABEL_COLOR": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_LABEL_COLOR -
Example:
{ "edge": { "EDGE_LABEL_COLOR": "#000000" } }
2.3.8.7. Edge Label Font Face
- CX2 Visual Property Name:
EDGE_LABEL_FONT_FACE - Description: Specifies the font family, style, and weight for edge labels.
- Data Type:
object - Properties:
FONT_FAMILY:string(Enum:"serif","sans-serif","monospace")FONT_STYLE:string(Enum:"normal","italic")FONT_WEIGHT:string(Enum:"normal","bold")FONT_NAME:string(Optional; specifies the exact font name)
-
JSON Schema:
{ "EDGE_LABEL_FONT_FACE": { "type": "object", "properties": { "FONT_FAMILY": { "type": "string", "enum": ["serif", "sans-serif", "monospace"] }, "FONT_STYLE": { "type": "string", "enum": ["normal", "italic"] }, "FONT_WEIGHT": { "type": "string", "enum": ["normal", "bold"] }, "FONT_NAME": { "type": "string" } } } } - Cytoscape DT Name:
EDGE_LABEL_FONT_FACE -
Example:
{ "edge": { "EDGE_LABEL_FONT_FACE": { "FONT_FAMILY": "sans-serif", "FONT_STYLE": "normal", "FONT_WEIGHT": "normal", "FONT_NAME": "Dialog" } } }
2.3.8.8. Edge Label Font Size
- CX2 Visual Property Name:
EDGE_LABEL_FONT_SIZE - Description: Defines the font size (in pixels) for edge labels.
- Data Type:
integer - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "EDGE_LABEL_FONT_SIZE": { "type": "integer", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
EDGE_LABEL_FONT_SIZE -
Example:
{ "edge": { "EDGE_LABEL_FONT_SIZE": 10 } }
2.3.8.9. Edge Label Position
- CX2 Visual Property Name:
EDGE_LABEL_POSITION - Description: Determines the placement of edge labels.
- Data Type:
object - Properties:
JUSTIFICATION:string(Enum:"left","center","right")MARGIN_X:numberMARGIN_Y:numberEDGE_ANCHOR:string(Enum:"N"etc.)LABEL_ANCHOR:string(Enum:"S","C","E", etc.)
-
JSON Schema:
{ "EDGE_LABEL_POSITION": { "type": "object", "properties": { "JUSTIFICATION": { "type": "string", "enum": ["left", "center", "right"] }, "MARGIN_X": { "type": "number" }, "MARGIN_Y": { "type": "number" }, "EDGE_ANCHOR": { "type": "string" }, "LABEL_ANCHOR": { "type": "string" } } } } - Cytoscape DT Name:
EDGE_LABEL_POSITION -
Example:
{ "edge": { "EDGE_LABEL_POSITION": { "JUSTIFICATION": "center", "MARGIN_X": 0.0, "MARGIN_Y": 0.0, "EDGE_ANCHOR": "N", "LABEL_ANCHOR": "S" } } }
2.3.8.10. Edge Label Rotation
- CX2 Visual Property Name:
EDGE_LABEL_ROTATION - Description: Specifies the rotation angle of edge labels in degrees.
- Data Type:
number - Constraints:
- Minimum:
-360 - Maximum:
360
- Minimum:
-
JSON Schema:
{ "EDGE_LABEL_ROTATION": { "type": "number", "minimum": -360, "maximum": 360 } } - Cytoscape DT Name:
EDGE_LABEL_ROTATION -
Example:
{ "edge": { "EDGE_LABEL_ROTATION": 0.0 } }
2.3.8.11. Edge Label Opacity
- CX2 Visual Property Name:
EDGE_LABEL_OPACITY - Description: Specifies the opacity of edge labels.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "EDGE_LABEL_OPACITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
EDGE_LABEL_TRANSPARENCY(In Cytoscape DT, the value is from 0 to 255.) -
Example:
{ "edge": { "EDGE_LABEL_OPACITY": 1.0 } }
2.3.8.12. Edge Label Max Width
- CX2 Visual Property Name:
EDGE_LABEL_MAX_WIDTH - Description: Defines the maximum width of edge labels before text wrapping occurs.
- Data Type:
number - Constraints:
- Exclusive Minimum:
0
- Exclusive Minimum:
-
JSON Schema:
{ "EDGE_LABEL_MAX_WIDTH": { "type": "number", "exclusiveMinimum": 0 } } - Cytoscape DT Name:
EDGE_LABEL_WIDTH -
Example:
{ "edge": { "EDGE_LABEL_MAX_WIDTH": 200.0 } }
2.3.9. Edge Selected Properties
2.3.9.1. Edge Selected
- CX2 Visual Property Name:
EDGE_SELECTED - Description: Indicates whether the edge is selected.
- Data Type:
boolean -
JSON Schema:
{ "EDGE_SELECTED": { "type": "boolean" } } - Cytoscape DT Name:
EDGE_SELECTED -
Example:
{ "edge": { "EDGE_SELECTED": false } }
2.3.9.2. Edge Selected Paint
- CX2 Visual Property Name:
EDGE_SELECTED_PAINT - Description: Specifies the color of the edge when selected.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_SELECTED_PAINT": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_SELECTED_PAINT -
Example:
{ "edge": { "EDGE_SELECTED_PAINT": "#FF0000" } }
2.3.9.3. Edge Stroke Selected Paint
- CX2 Visual Property Name:
EDGE_STROKE_SELECTED_PAINT - Description: Specifies the color of the edge’s stroke when selected.
- Data Type:
string - Format:
rgbColor -
JSON Schema:
{ "EDGE_STROKE_SELECTED_PAINT": { "type": "string", "format": "rgbColor" } } - Cytoscape DT Name:
EDGE_STROKE_SELECTED_PAINT -
Example:
{ "edge": { "EDGE_STROKE_SELECTED_PAINT": "#FF0000" } }
2.3.10. Edge Stacking Properties
2.3.10.1. Edge Stacking
- CX2 Visual Property Name:
EDGE_STACKING - Description: Determines how overlapping edges are rendered.
- Data Type:
string - Enum:
"none""AUTO_BEND"
-
JSON Schema:
{ "EDGE_STACKING": { "type": "string", "enum": ["none", "AUTO_BEND"] } } - Cytoscape DT Name:
EDGE_STACKING -
Example:
{ "edge": { "EDGE_STACKING": "AUTO_BEND" } }
2.3.10.2. Edge Stacking Density
- CX2 Visual Property Name:
EDGE_STACKING_DENSITY - Description: Specifies the density of edge stacking.
- Data Type:
number - Constraints:
- Minimum:
0 - Maximum:
1
- Minimum:
-
JSON Schema:
{ "EDGE_STACKING_DENSITY": { "type": "number", "minimum": 0, "maximum": 1 } } - Cytoscape DT Name:
EDGE_STACKING_DENSITY -
Example:
{ "edge": { "EDGE_STACKING_DENSITY": 0.5 } }
2.3.11. Edge Z-Order
- CX2 Visual Property Name:
EDGE_Z_ORDER - Description: Specifies the Z-order of the edge (stacking order).
- Data Type:
number -
JSON Schema:
{ "EDGE_Z_ORDER": { "type": "number" } } - Cytoscape DT Name:
EDGE_Z_ORDER -
Example:
{ "edge": { "EDGE_Z_ORDER": 0.0 } }
2.4. Setting Visual Properties
Visual properties can be set on three levels:
2.4.1. Default Value
- The baseline value applied when no other settings are specified.
2.4.2. Mapping
- Associates visual properties with data attributes, allowing dynamic styling based on data values. This value overrides the default value.
2.4.3. Bypass
- Directly sets visual properties for individual nodes or edges, overriding mappings and defaults.
2.5. Editor Properties
- Purpose: Dictate editor behavior without altering visual styles directly.
- Examples:
nodeSizeLocked: Synchronizes node width and height.nodeImageFit: Adjusts images to fit within node boundaries in Cytoscape DT.
- Storage: Saved in the
visualEditorPropertiesaspect.