Render Settings

The render settings in the graph visualization library allow for customizing various aspects of graph rendering, including node appearance, edge appearance, label rendering, and event handling. Below are descriptions and examples for each setting, grouped by functionality.

//Sigma.NET and Sigma.NET.Interactive
# "nuget: C:/Users/lukas/Documents/GitHub/Project/Sigma.NET/pkg"
#r "nuget: Sigma.NET, 0.0.0-dev"
#r "nuget: Sigma.NET.Interactive, 0.0.0-dev"
//Additional Librarys
#r "nuget: DynamicObj, 2.0.0"
#r "nuget: Newtonsoft.Json"
#r "nuget: Giraffe.ViewEngine, 1.4.0"


open Sigma.NET
open Sigma.NET.Interactive

open System
open DynamicObj
open Newtonsoft.Json
open Giraffe.ViewEngine

In this example, the nodes [1; 2; 3; 4; 5] are created and labeled with their respective numbers. The edges connect specific node pairs, such as (1, 3) and (2, 4). The graph is then constructed by adding the nodes and edges to an empty graph.

let renderExampleGraph = 
    let nodes = [1;2;3;4;5] |> List.map (fun x -> Node.Init(string x,DisplayData.Init(Label = string x, Size= 15))) //Initiation Nodes
    let edges = [1,3;1,5;3,5;2,4] |> List.map (fun (x,y) -> Edge.Init(string x,string y, DisplayData=DisplayData.Init(Label = String.concat "-" [string x;string y]))) //Initiating Edges
    VisGraph.empty() //Creating a new instance of VisGraph
    |> VisGraph. withNodes(nodes) //adding Nodes to the empty Visgraph
    |> VisGraph.withEdges(edges) // Adding Edges to the Graph
renderExampleGraph

Nodes

These settings affect the rendering of nodes in the graph.

'DefaultNodeColor'

Sets the default color of nodes.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(DefaultNodeColor = "#FF5733"))

'DefaultNodeType'

Defines the default type of nodes (e.g., -Circle-)

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(DefaultNodeType = StyleParam.NodeType.Circle))

'NodeReducer'

Applies a custom node reducer function for advanced node rendering.

// Node reducer wollt ich noch ein issue auf github machen
renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(NodeReducer = "customNodeReducer"))

Edges

These settings control the rendering of edges between nodes.

'DefaultEdgeColor'

Sets the default color of edges.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(DefaultEdgeColor = "#33FF57"))

'DefaultEdgeType'

Specifies the default type of edges (e.g., Line, Arrow, etc.).

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(DefaultEdgeType = StyleParam.EdgeType.Arrow))

'EdgeReducer'

Applies a custom edge reducer function for advanced edge rendering.

//hier wahrscheinlich auch ein issue machen weil ka ob der reducer funktioniert
renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeReducer = "customEdgeReducer"))

Labels

These settings control the appearance and behavior of labels associated with nodes and edges.

'RenderLabels'

Determines whether node labels should be rendered.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(RenderLabels = true))

'RenderEdgeLabels'

Determines whether edge labels should be rendered.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(RenderEdgeLabels = true))

'LabelFont'

Specifies the font used for node labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelFont = "Arial"))

'LabelSize'

Sets the font size for node labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelSize = 30))

'LabelWeight'

Defines the font weight (e.g., Normal, Bold) for node labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelWeight = "Bold"))

'LabelColor'

Sets the color of node labels. You can use either a specific color or a reference.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelColor = Render.ColorOrReference.Init("#ffd700")))

'EdgeLabelFont'

Specifies the font used for edge labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeLabelFont = "Courier New"))

'EdgeLabelSize'

Sets the font size for edge labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeLabelSize = 30, RenderEdgeLabels = true))

'EdgeLabelWeight'

Defines the font weight for edge labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeLabelWeight = "Normal"))

'EdgeLabelColor'

Sets the color of edge labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeLabelColor = Render.ColorOrReference.Init("#008b8b"), RenderEdgeLabels = true))

'LabelDensity'

Controls the density of label rendering, impacting how many labels appear based on zoom and space.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelDensity = 80))

'LabelGridCellSize'

Sets the size of the grid cells used for label placement, which can help avoid label overlaps.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelGridCellSize = 10))

'LabelRenderedSizeThreshold'

Defines the minimum size threshold at which labels are rendered.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelRenderedSizeThreshold = 5))

Interactivity

These settings control the interactive behavior of the graph, including events triggered by user actions.

'EnableEdgeClickEvents'

Enables or disables click events on edges.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EnableEdgeClickEvents = true))

'EnableEdgeWheelEvents'

Enables or disables wheel events (e.g., scrolling) on edges.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EnableEdgeWheelEvents = true))

'EnableEdgeHoverEvents'

Enables or disables hover events on edges.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EnableEdgeHoverEvents = true))

Performance and Rendering

These settings affect the performance and overall rendering behavior of the graph.

'HideEdgesOnMove'

Temporarily hides edges when moving the graph for performance improvements.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(HideEdgesOnMove = true))

'HideLabelsOnMove'

Temporarily hides labels when moving the graph to improve performance.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(HideLabelsOnMove = true))

'ZIndex'

Enables or disables the usage of Z-index to control layering of nodes and edges

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(ZIndex = true))

'StagePadding'

Sets the padding around the rendering stage (i.e., the area where the graph is rendered).

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(StagePadding = 20))

Camera

These settings control the camera's behavior, including zoom limits.

'MinCameraRatio'

Defines the minimum zoom level for the camera.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(MinCameraRatio = 1))

'MaxCameraRatio'

Defines the maximum zoom level for the camera.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(MaxCameraRatio = 2))

Custom Renderers

These settings allow for the use of custom renderers for different graph components.

'LabelRenderer'

Specifies a custom renderer for node labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(LabelRenderer = "customLabelRenderer"))

'HoverRenderer'

Specifies a custom renderer for hover effects.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(HoverRenderer = "customHoverRenderer"))

'EdgeLabelRenderer'

Specifies a custom renderer for edge labels.

renderExampleGraph
|> VisGraph.withRenderer(Render.Settings.Init(EdgeLabelRenderer = "customEdgeLabelRenderer"))