Node graph Support

[yesoreyeram]

Node Graph

You can generate Node graph panel data with CSV, JSON or XML feature of Infinity data source.

From v0.8.0, we have out of the box support for node graph. Prior to v0.8.0, you can use "Table" format to create node graph with limited options.

Irrespective of the version, you need two queries to form a Node graph visualisation.

1. First query which lists the nodes. Should have mandatory id and title field. This also can have additional arc__* fields to specify the arcs value for the node.
2. Second query which list the edges (relations). Should have three mandatory fields namely id, source and target

Read more about the node graph data structure here

Node Graph format

From v0.8.0, infinity plugin have dedicated support for node graphs. You need to create two different queries with the format of nodes and edges for each query.

Nodes

Nodes query should have following fields.

• id*
• title
• subTitle
• arc__*
• detail__*

If you have any arc__* field, corresponding value (number) will be used as the nodes arc value. Note : Total value of row item should sum to 1. If you need to specify a color for the arc__* field, add a new field called arc__*_color.

Edges

Edges query should have following fields.

• id*
• source*
• target*
• detail__*

works same as Nodes. But doesn't support arc__* fields.

Example

Below is an example of nodes query

Below is an example of edges query

Corresponding Node Graph is given below

Corresponding CSV data is given below

Nodes :

id,title,sub-title,cpu,memory,c_disk_size,d,c_disk_size color,d color,detail__hello
A,Server A,Application Server,12,10,0.1,0.9,blue,red,world
B,Server B,DB Server,90,87,0.1,0.9,blue,red,hello
C,Server C,Application Server,20,23,0.20,0.80,blue,red,hello
D,Server D,Middleware Server,47,98,0.90,0.10,blue,red,world

Edges :

id,source,target,mainStat,secondaryStat,detail__one
1,A,B,30,mb/s,abc
2,A,C,20,mb/s,def
3,B,D,24.2,mb/s,ghi

Some of the fields of the CSV doesn't match the node graph format. So we used column alias to match the exact field. Also for CSV format, number formats needs to set explicity. Otherwise, they will be rendered as string.

[yosiasz]

Great stuff! But not working out for me with the colors. Here is my sample data

{
      "nodes" : [
        {
          "id": 1,
          "title": "nginx",
          "mainStat": 21233,
          "arc__passed": 0.283,
          "passed_color": "green",
          "arc__failed": 0.717,
          "failed_color": "red",
        },
        {
          "id": 2,
          "title": "serviceA",
          "mainStat": 12000,
          "arc__passed": 0.167,
          "passed_color": "green",
          "arc__failed": 0.833,
          "failed_color": "red"
        },
        {
          "id": 3,
          "title": "serviceB",
          "mainStat": 8233,
          "arc__passed": 0.486,
          "passed_color": "green",
          "arc__failed": 0.514,
          "failed_color": "red"
        }
      ],
      "edges" : {
        "id": "a",
        "source": 1,
        "target": 2
      }
    }

[yosiasz]

sorry I mean to say reading any of the columns. So if I have following columns
name,age,address
and I use inline csv
but for the Add Columns part I use
address--->string
name--->string
age-->float
Will that work? :)

Thanks!
Waiting patiently to see Infinity work with a database query even a simple one? I can do a simple POC Feature PR if you want me to.

[yesoreyeram]

Yes. That will work.
I am not sure how the infinity can help in database world. Supporting different database may require different drivers. Also there is already sqlyze plugin which aims to do something similar in that world.
I am also fine with refining the idea. But still thinking the feasibility

[yosiasz]

I agree. there are other plugins that fill this space. Thanks!

[yosiasz]

I need to understand this part to translate it to the use of mysql as a data source

if (matching_color_field) {
              field.config = {
                displayName: field.name.replace('arc__', ''),
                color: {
                  mode: FieldColorMode?.Fixed || 'fixed',
                  fixedColor: matching_color_field.values.get(0) || '',
                },
              };

I assume it has something to do with nodeGraph node parameters.
Any field prefixed with arc__ will be used to create the color circle around the node. All values in these fields should add up to 1. You can specify color using config.color.fixedColor

Could you please point me to some documentation (other than the above) what this config does?

[yesoreyeram]

For the color, it seems every datasource needs to handle it explicitly. In the data frame fields returned by the datasource, it need to set a field config. This was exclusively handled by infinity. Though there is no way to handle config from the UI. For infinity, color config is a workaround.

https://grafana.com/docs/grafana/latest/visualizations/node-graph/

[yosiasz]

if infinity has the following feature, it would be game over for all other grafana plugins.

Ability to point the plugin to another mysql,mssql, anydb query. Game over 😉

[mshiladityam]

hey can you please help me render the context menu in NodeGraph? When I click on nodes/edges, nothing happens :(((

[mshiladityam]

Hey, this is great work. I built a really cool nodeGraph using this plugin. I only have one small problem.

Where does the detail__* data go? When I click on nodes and edges, nothing happens. Is it not supposed to show in the context menu? No context menu appears for me when I click on nodes or edges.

Is this a bug?

[mshiladityam]

please help me!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I am stuck and my project is near production!!

[mshiladityam]

See if this example helps to understand https://grafana-infinity-datasource.herokuapp.com/d/node-graph/node-graph?orgId=1

Hey,
I think I got what your bug is.
It always prints, the value of the first detail, as the value of the header of the detail.
Also, the details for edges are never rendered, as they are only available on grid mode.

Also, I want support for printing multiple lines in a detail. Currently it doesn t support newline characters.

[mshiladityam]

hey please reply, I am stuck and really need your help :"((

[yesoreyeram]

Sorry buddy. Busy for couple of weeks. Try grafana community.

[mshiladityam]

If instead of mainStat or secondaryStat, I want a more human-readable label, what should I do? Is it possible?