# Directive properties
Graph Style Script currently has these directives:
* [`@NodeStyle` directive](#nodestyle-directive) - for defining the visual style of graph nodes.
* [`@EdgeStyle` directive](#edgestyle-directive) - for defining the visual style of graph relationships.
* [`@ViewStyle` directive](#viewstyle-directive) - for defining the general graph style properties.
* [`@ViewStyle.Map` directive](#viewstylemap-directive) - for defining the graph style properties when map
is in the background. (**DEPRECATED in Lab 3.4**)
Each directive includes a set of configurable properties, along with their
expected data types.
## `@NodeStyle` directive
Here is the list of all properties that can be defined in the `@NodeStyle`
directive, along with their expected types.
### `border-color`: `Color`
Sets a border color.
Examples:
- `border-color: #FF0000` sets the border color to red.
- `border-color: limegreen` sets the border color to lime green.
### `border-color-hover`: `Color`
Sets a border color that is applied on mouse hover event.
Examples:
- `border-color-hover: #FF0000` sets the border color to red on mouse hover
event.
- `border-color-hover: limegreen` sets the border color to lime green on mouse
hover event.
### `border-color-selected`: `Color`
Sets a border color that is applied on mouse select event.
Examples:
- `border-color-selected: #FF0000` sets the border color to red on mouse select
event.
- `border-color-selected: limegreen` sets the border color to lime green on
mouse select event.
### `border-width`: `Number`
Sets the border width.
Example:
- `border-width: 2` sets the border width to 2 pixels.
### `border-width-selected`: `Number`
Sets the border width that is applied on mouse select event.
Example:
- `border-width-selected: 10` sets the border width to 10 pixels on mouse select
event.
### `color`: `Color`
Sets the background color of an element.
Examples:
- `color: #FF0000` sets the background color of the element to red.
- `color: limegreen` sets the background color of the element to lime green.
### `color-hover`: `Color`
Sets the background color of an element on mouse hover event.
Examples:
- `color-hover: #FF0000` sets the background color of the element to red on
mouse hover event.
- `color-hover: limegreen` sets the background color of the element to lime
green on mouse hover event.
### `color-selected`: `Color`
Sets the background color of an element on mouse select event.
Examples:
- `color-selected: #FF0000` sets the background color of the element to red on
mouse select event.
- `color-selected:limegreen` sets the background color of the element to lime
green on mouse select event.
### `font-background-color`: `Color`
Sets the background color of the element's label (text). Text can be defined
with property `label`.
Examples:
- `font-background-color: #FF0000` sets the text background color to red.
- `font-background-color: limegreen` sets the text background color to lime
green.
### `font-color`: `Color`
Sets the color of the element's label (text). Text can be defined with property
`label`.
Examples:
- `font-color: #FF0000` sets the text color to red.
- `font-color: limegreen` sets the text color to lime green.
### `font-family`: `String`
Sets a font family for the element's label (text). Text can be defined with
property `label`.
Examples:
- `font-family: "sans-serif"` sets the text family font to sans-serif.
- `font-family: "cursive"` sets the text family font to cursive.
### `font-size`: `Number`
Sets the size of the element's text. Text can be defined with property `label`.
Example:
- `font-size: 10` sets the size of the font to 10 pixels.
### `image-url`: `String`
Sets the element's background to be an image from the image URL. Supported
format are `png`, `jpeg`, `gif` (static, not dynamic), `webp` or base 64 encoded
image using inline `data:image/png;base64`.
It will
override the value defined with the property `color`.
Examples:
- `image-url: "https://download.memgraph.com/asset/images/memgraph-logo.png"`
sets the element's background to be an image of the Memgraph logo.
- `image-url: Property(node, "profile_image")` sets the element's background to
be an image from the URL that is fetched from the `node` property
`"profile_image"`.
### `image-url-selected`: `String`
Sets the element's background to be an image from the image URL on mouse select
event. Supported format are `png`, `jpeg`, `gif` (static, not dynamic), `webp`
or base 64 encoded image using inline `data:image/png;base64`. It will override
the value defined with the property `color-selected`.
Example:
- `image-url-selected:
"https://download.memgraph.com/asset/images/memgraph-logo-5f60e83d.jpeg"` sets
the element's background to be an image of the Memgraph logo.
Check property `image-url` for more details and examples.
### `label`: `String`
Sets the element's text label. The text is shown below the element (node or
relationship).
Examples:
- `label: "Text"` sets the text "Text" as a label for every single element.
- `label: Property(node, "name")` sets the text for the element's label
dynamically by using the `node` property `"name"`.
### `shadow-color`: `Color`
Sets the color for the element's shadow.
Examples:
- `shadow-color: #FF0000` sets the shadow color to red.
- `shadow-color: limegreen` sets the shadow color to lime green.
### `shadow-size`: `Number`
Sets the blur size of the element's shadow. If the value is 0, the shadow will
be a solid color defined by the property `shadow-color`.
Example:
- `shadow-size: 5` indicates that the shadow will be diffused across 5 pixels.
### `shadow-offset-x`: `Number`
Sets the horizontal offset of the element's shadow. A positive value puts the
shadow on the right side of the element, a negative value puts the shadow on the
left side of the element.
Examples:
- `shadow-offset-x: 0` indicates that the shadow is exactly behind the element.
- `shadow-offset-x: 20` indicates that the shadow starts 20 pixels to the right.
### `shadow-offset-y`: `Number`
Sets the vertical offset of the element's shadow. A positive value puts the
shadow below the element, a negative value puts the shadow above the element.
Examples:
- `shadow-offset-y: 0` indicates that the shadow is exactly behind the element.
- `shadow-offset-y: 20` indicates that the shadow starts 20 pixels below the
element position.
### `shape`: `String`
Sets the shape of the element. The default shape for the node is `"dot"`.
Possible values are: `"dot"`, `"square"`, `"diamond"`, `"triangle"`,
`"triangleDown"`, `"star"`
Examples:
- `shape: "square"` indicates that the shape of the element will be a square.
### `size`: `Number`
Sets the size of the element.
Example:
- `size: 10` indicates that the radius of the element will be 10 pixels.
### `z-index: number`
Sets the stack order of an element, similar to the CSS `z-index`. The element with the
highest `z-index` will be rendered on top of every other element.
Example:
- `z-index: 100` sets the element's z-index.
## `@EdgeStyle` directive
Here is the list of all properties that can be defined in the `@EdgeStyle`
directive, along with their expected types.
### `arrow-size`: `Number`
Sets the size of the arrow on the relationship line end.
Examples:
- `arrow-size: 10` sets the arrow size to be 10 pixels.
### `color`: `Color`
Sets the background color of an element.
Examples:
- `color: #FF0000` sets the background color of the element to red.
- `color: limegreen` sets the background color of the element to lime green.
### `color-hover`: `Color`
Sets the background color of an element on mouse hover event.
Examples:
- `color-hover: #FF0000` sets the background color of the shape to red on mouse
hover event.
- `color-hover: limegreen` sets the background color of the shape to lime green
on mouse hover event.
### `color-selected`: `Color`
Sets the background color of an element on mouse select event.
Examples:
- `color-selected: #FF0000` sets the background color of the shape to red on
mouse select event.
- `color-selected: limegreen` sets the background color of the shape to lime
green on mouse select event.
### `font-background-color`: `Color`
Sets the background color of an element's label (text). Text can be defined with
property `label`.
Examples:
- `font-background-color: #FF0000` sets the text background color to red.
- `font-background-color: limegreen` sets the text background color to lime
green.
### `font-color`: `Color`
Sets the color of the element's label (text). Text can be defined with property
`label`.
Examples:
- `font-color: #FF0000` sets the text color to red.
- `font-color: limegreen` sets the text color to lime green.
### `font-family`: `String`
Sets a font family for the element's text. Text can be defined with property
`label`.
Examples:
- `font-family: "sans-serif"` sets the text family font to sans-serif.
- `font-family: "cursive"` sets the text family font to cursive.
### `font-size`: `Number`
Sets the size of the element's text. Text can be defined with property `label`.
Example:
- `font-size: 10` sets the size of the font to 10 pixels.
### `label`: `String`
Sets the element's text label. The text is shown below the element (node or
relationship).
Examples:
- `label: "Text"` sets the text "Text" as a label for every single element.
- `label: Property(edge, "quantity")` sets the text for the element's label
dynamically by using the `edge` property `"quantity"`.
### `shadow-color`: `Color`
Sets the color of the element's shadow.
Examples:
- `shadow-color: #FF0000` sets the shadow color to red.
- `shadow-color: limegreen` sets the shadow color to lime green.
### `shadow-size`: `Number`
Sets the blur size of the element's shadow. If the value is 0, the shadow will
be a solid color defined by the property `shadow-color`.
Examples:
- `shadow-size: 5` indicates that the shadow will be diffused across 5 pixels.
### `shadow-offset-x`: `Number`
Sets the horizontal offset of the element's shadow. A positive value puts the
shadow on the right side of the shape, a negative value puts the shadow on the
left side of the shape.
Examples:
- `shadow-offset-x: 0` indicates that the shadow is exactly behind the shape.
- `shadow-offset-x: 20` indicates that the shadow starts 20 pixels to the right.
### `shadow-offset-y`: `Number`
Sets the vertical offset of the element's shadow. A positive value puts the
shadow below the shape, a negative value puts the shadow above the shape.
Examples:
- `shadow-offset-y: 0` indicates that the shadow is exactly behind the shape.
- `shadow-offset-y: 20` indicates that the shadow starts 20 pixels below the
shape position.
### `width`: `Number`
Sets the width of the relationship line.
Example:
- `width: 2` indicates that the width of the relationship line will be 2 pixels
wide.
### `width-hover`: `Number`
Sets the width of the relationship line on mouse hover event.
Example:
- `width-hover: 2` indicates that the width of the relationship will be 2 pixels
wide on mouse hover event.
### `width-selected`: `Number`
Sets the width of the relationship line on mouse select event.
Examples:
- `width-selected: 2` indicates that the width of the relationship will be 2
pixels wide on mouse select event.
### `z-index: number`
Sets the stack order of an element, similar to the CSS `z-index`. The element with the
highest `z-index` will be rendered on top of every other element.
Example:
- `z-index: 100` sets the element's z-index.
## `@ViewStyle` directive
`@ViewStyle` directive is used for defining style properties of a general
graph view: view type, link distance, view, physics, repel force, etc. It is also
possible to use a predicate expression which acts as a filter to apply
the defined properties to the final directive output.
Here is the list of all properties that can be defined in the `@ViewStyle` directive,
along with their expected types.
### `force-collision-radius: number`
Sets the margin radius for each node from its centre. If node `size` is `10` and
`force-collision-radius` is set to `20`, it means there will be `10` spaces left around each
node. No other node can be in that space.
The default `force-collision-radius` is `15`.
Example:
- `force-collision-radius: 15` sets the margin radius for each node from its centre to `15`.
### `force-repel-force: number`
Sets the strength of repel force between all nodes. If positive, it adds a force that
moves nodes away from each other, if negative, it moves nodes towards each other.
The default `force-repel-force` is `-100`.
Example:
- `force-repel-force: -100` sets the repel force between all nodes to `-100`.
### `force-link-distance: number`
Sets the minimum required distance between two connected nodes from their centres.
The default `force-link-distance` is `30`. If node sizes are `20` and link distance is `30`,
nodes might overlap because the minimum distance from one node centre to another is
`20 + 20 = 40`.
Example:
- `force-link-distance: 30` sets the minimum required distance to `30`.
### `force-physics-enabled: boolean`
Enables or disables physics which is a real-time simulation for graph node positions.
When physics is enabled, the graph is not static anymore.
Examples:
- `force-physics-enabled: True` enables the physics.
- `force-physics-enabled: Greater(NodeCount(graph), 100)` enables the physics for graphs with more than 100 nodes.
### `tree-orientation: "horizontal" | "vertical"`
Determines the direction in which the `"tree"` layout is rendered.
- `"vertical"` (default): Renders the tree from top to bottom, with parent nodes above their children.
- `"horizontal"`: Renders the tree from left to right, with parent nodes to the left of their children.
Example:
- `tree-orientation: "horizontal"` lays out the tree from left to right.
### `tree-node-gap: number`
Specifies the spacing between sibling nodes within the same depth
level in the `"tree"` layout.
This affects the horizontal or vertical distance between nodes,
depending on the tree orientation.
Example:
- `tree-node-gap: 50` increases the spacing between nodes on the same level.
### `tree-level-gap: number`
Sets the spacing between different depth levels in the `"tree"` layout.
This controls the vertical or horizontal distance between parent and
child nodes based on the tree orientation.
Example:
- `tree-level-gap: 100` increases the space between levels in the tree.
### `map-tile-layer: "detailed" | "light" | "dark" | "basic" | "satellite"`
Sets the map tile for the map background. The default map tile is `"detailed"`.
Custom colored map tiles - light, dark, basic,
and satellite - are part of Memgraph Lab Enterprise. These
options will be enabled when using an enterprise license.
Examples:
- `map-tile-layer: "detailed"` sets the map tile to be type `"detailed"`.
### `background-color: Color`
Sets the background color of the canvas.
Examples:
- `background-color: #DDDDDD` sets the background color of the canvas to light gray.
- `background-color: black` sets the background color of the canvas to black.
### `view: string: "default" | "map" | "force" | "tree"`
Sets the current graph view.
- `"default"` automatically selects between `"force"` and `"map"` views based on the available graph data.
- `"map"` displays the graph over a geographical map. Each node must include `latitude` and `longitude` to be positioned correctly.
- `"force"` renders a force-directed layout, placing nodes on a canvas with repelling forces between them.
- `"tree"` arranges the nodes in a hierarchical layout, displaying the structure from root to leaf nodes.
The default value of `view` is `"default"`.
Examples:
- `view: "default"` uses automatic view selection.
- `view: "map"` sets the view to a map layout, which will only render if at least one node includes both `latitude` and `longitude`.
### `collision-radius: number`
> **Warning**
>
> **DEPRECATED in Lab 3.4**: Use `force-collision-radius` instead.
Sets the margin radius for each node from its centre. If node `size` is `10` and
`collision-radius` is set to `20`, it means there will be `10` spaces left around each
node. No other node can be in that space.
The default `collision-radius` is `15`.
Example:
- `collision-radius: 15` sets the margin radius for each node from its centre to `15`.
### `repel-force: number`
> **Warning**
>
> **DEPRECATED in Lab 3.4**: Use `force-repel-force` instead.
Sets the strength of repel force between all nodes. If positive, it adds a force that
moves nodes away from each other, if negative, it moves nodes towards each other.
The default `repel-force` is `-100`.
Example:
- `repel-force: -100` sets the repel force between all nodes to `-100`.
### `link-distance: number`
> **Warning**
>
> **DEPRECATED in Lab 3.4**: Use `force-link-distance` instead.
Sets the minimum required distance between two connected nodes from their centres.
The default `link-distance` is `30`. If node sizes are `20` and link distance is `30`,
nodes might overlap because the minimum distance from one node centre to another is
`20 + 20 = 40`.
Example:
- `link-distance: 30` sets the minimum required distance to `30`.
### `physics-enabled: boolean`
> **Warning**
>
> **DEPRECATED in Lab 3.4**: Use `force-physics-enabled` instead.
Enables or disables physics which is a real-time simulation for graph node positions.
When physics is enabled, the graph is not static anymore.
Examples:
- `physics-enabled: True` enables the physics.
- `physics-enabled: Greater(NodeCount(graph), 100)` enables the physics for graphs with more than 100 nodes.
## `@ViewStyle.Map` directive
> **Warning**
>
> `@ViewStyle.Map` is deprecated in Lab 3.4. Check updated directive `@ViewStyle` to
> set up map view and map tile layer.
`@ViewStyle.Map` directive is a subset of `@ViewStyle` because it defines
additional style properties for a graph view when there is a map background.
Style properties of the `@ViewStyle.Map` directive are used to style the
background map.
Here is the list of all properties that can be defined in the `@ViewStyle.Map`
directive, along with their expected types.
### `tile-layer: string: "detailed" | "light" | "dark" | "basic" | "satellite"`
> **Warning**
>
> **DEPRECATED in Lab 3.4**: Use `@ViewStyle { map-tile-layer }` instead.
Sets the map tile for the map background. The default map tile is `"detailed"`.
Examples:
- `tile-layer: "detailed"` sets the map tile to be type `"detailed"`.