G.V() - Graph Database Client Documentation

Appearance

Stylesheet Management ​

Introduction ​

Stylesheet Management allows you to modify the appearance of your graph results based on the label of the element (vertex, edge). Each element label found on your graph database will automatically be assigned a default style from the default stylesheet that will differentiate it from other elements. This is also applicable when new elements are introduced to the graph, as the data model for your database is automatically updated. For reference, see Data Model Management.

To modify the stylesheet, click on in the graph sidebar. Alternatively, when focusing on an element, you will be given an option to edit the element's stylesheet. You can also find this option from the Connection List sidebar by drilling into the Data Model.

Changes to the stylesheet are automatically applied to any opened graph results visualization.

Stylesheet Options ​

When editing the Stylesheet, you will be presented with the following window:

Stylesheet

The following options are available for the stylesheet itself:

  • Active Stylesheet: The stylesheet to be used / edited
  • Create New Stylesheet: Create a new stylesheet
  • Duplicate Stylesheet: Create a new stylesheet with the same settings
  • Import Stylesheet: Import a saved stylesheet
  • Export Stylesheet: Save the stylesheet as a JSON file
  • Delete Stylesheet: Delete the stylesheet (the original Generated Stylesheet cannot be deleted)
  • Name: Edit the name of the stylesheet
  • Description (Optional): Add a description or notes to the stylesheet
  • Viewport Background Color: The background color for the graph
  • Set As Default Stylesheet: Make the active stylesheet the default
  • Show Displayed Elements Only: Filter out elements that are not currently showing on the graph

Vertices and Edges Options ​

Underneath, you will be able to edit the settings for each individual label.

Vertices Stylesheet

Edges Stylesheet

  • Color: The color of the node circle
  • Background Image: The background image to be used for the node circle (Vertices Only)
  • Label Color: The color of the label text
  • Label Background Color: The background color of the label
  • Label Text Value: Select any of the label's properties to display
  • Label Position: Where the label sits in relation to the node circle (Vertices Only)

Click on to open the advanced settings.

Click on to save and apply your changes.

Advanced Vertex Stylesheet Options ​

When editing a Vertex's advanced settings, you will be presented with the following screen:

Advanced Vertex Stylesheet

The following options are available:

  • Vertex Style:
    • Vertex Background Image: Allows specifying a background image for the node's body
    • Vertex Background Color: The color of the node’s body
    • Vertex Background Color Opacity: Allows specifying the opacity of the node's background color. It is recommended to set to 0 if Vertex Background Image is also specified unless you would like the background color and image to be used in conjunction.
    • Vertex Border Color: The color of the node’s border
    • Vertex Border Width: The size of the node’s border
  • Vertex Label Text Styles:
    • Label Text Value: The text as derived from the node's properties to be displayed on the graph
    • Label Text Color: The color of the element’s label
    • Label Vertical Alignment: The vertical alignment of a node’s label; may be top, center, or bottom
    • Label Horizontal Alignment: The vertical alignment of a node’s label; may be left, center, or right
    • Label Text Transformation: A transformation to apply to the label text; may be none, uppercase, or lowercase
    • Label Font Size: The size of the label text
  • Vertex Label Border Styles:
    • Text Border Width: The width of the border around the label
    • Text Border Style: The style of the border around the label; may be solid, dotted, dashed, or double
    • Text Border Opacity: The width of the border around the label; the border is disabled for 0
    • Label Text Border Color: The color of the border around the label
  • Vertex Label Background Styles:
    • Label Background Color: A color to apply on the text background
    • Text Background Opacity: The opacity of the label background; the background is disabled for 0

Advanced Edge Stylesheet Options ​

When editing an Edge's advanced settings, you will be presented with the following screen:

Advanced Edge Stylesheet

The following options are available:

  • Edge Line Style:
    • Target Arrow Color: The color of the edge’s target arrow
    • Line Color: The color of the edge’s line
    • Edge Color: The color of the edge
    • Line Width: The width of an edge’s line
  • Edge Label Text Styles:
    • Label Text Value: The text as derived from the edge's properties to be displayed on the graph
    • Label Text Color: The color of the element’s label
    • Label Vertical Alignment: The vertical alignment of an edge's label; may be above edge, across edge, or below edge
    • Label Text Transformation: A transformation to apply to the label text; may be none, uppercase, or lowercase
    • Label Font Size: The size of the label text
  • Edge Label Border Styles:
    • Text Border Width: The width of the border around the label
    • Text Border Style: The style of the border around the label; may be solid, dotted, dashed, or double
    • Text Border Opacity: The width of the border around the label; the border is disabled for 0 (default value)
    • Label Text Border Color: The color of the border around the label
  • Edge Label Background Styles:
    • Label Background Color: A color to apply on the text background
    • Text Background Opacity: The opacity of the label background; the background is disabled for 0