Detail__* fields are not working with node graph panel

Grafana Time Series Panel
1

Hey, I am working on a datasource plugin to feed into the new(ish) node graph plugin. In the documentation (Node graph panel | Grafana Labs) I read you can create a context menu (shown after clicking the edge) by using detail__ prefix for fields. However if I do this, nothing happens when I click on the edge:

const nodes = new MutableDataFrame({
      name: 'Nodes',
      fields: [
        { name: 'id', type: FieldType.string },
        { name: 'title', type: FieldType.string },
        { name: 'mainStat', type: FieldType.string },
        {
          name: 'arc__failed',
          type: FieldType.number,
          config: { color: { fixedColor: 'red', mode: FieldColorModeId.Fixed } },
        },
        {
          name: 'arc__passed',
          type: FieldType.number,
          config: { color: { fixedColor: 'green', mode: FieldColorModeId.Fixed } },
        },
        {
          name: 'arc__running',
          type: FieldType.number,
          config: { color: { fixedColor: 'blue', mode: FieldColorModeId.Fixed } },
        },
        {
          name: 'arc__other',
          type: FieldType.number,
          config: { color: { fixedColor: 'gray', mode: FieldColorModeId.Fixed } },
        },
      ],
      meta: {
        preferredVisualisationType: 'nodeGraph',
      },
    });
    const edges = new MutableDataFrame({
      name: 'Edges',
      fields: [
        { name: 'id', type: FieldType.string },
        { name: 'source', type: FieldType.string },
        { name: 'target', type: FieldType.string },
        // { name: 'mainStat', type: FieldType.string },
        { name: 'detail__A', type: FieldType.string, config: { displayName: 'AAA' } },
        { name: 'detail__D', type: FieldType.string, config: { displayName: 'DDD' } },
      ],
      meta: {
        preferredVisualisationType: 'nodeGraph',
      },
    });
...
nodes.appendRow(['1', 'A', 'AAA', 1, 1, 0]);
nodes.appendRow(['2', 'B', 'BBB', 1, 1, 0]);
nodes.appendRow(['3', 'C', 'CCC', 1, 1, 0]);
nodes.appendRow(['4', 'D', 'DDD', 1, 1, 0]);
nodes.appendRow(['5', 'E', 'EEE', 1, 1, 0]);
edges.appendRow(['AB', '1', '2', 'A 123', '']);
edges.appendRow(['DB', '4', '2', '', 'D 12']);
edges.appendRow(['BC', '2', '3', 'A 123', 'D 12']);
edges.appendRow(['CE', '3', '5', 'A 123', 'D 12']);

Did I misunderstand something, or this feature is missing? I tried to search in the X-Ray datasource plugin, the only plugin I know of using the node graph plugin, but there is no usage of detail__.

Thanks for your help,
Cheers

2

After some digging in the code it does not look like it is implemented at all, is it in the roadmap? Can the document be updated?

Cheers

3

How did you return from the query both the nodes and edges const to make them appear in the node graph visualization? I am having trouble figuring out the format that data frames need to be returned in for them to appear.

4

Hey, if I understood your question right, you cannot simply use this plugin with any backend (what is responsible for the query) if you want to use it, you need to develop your own backend plugin which returns with the required DataFrame (see my question) based on a query or whatever input your backend needs

5

Yes I am making my own backend plugin, but I don’t know how to return two data frames (edges and nodes) from one function which it appears the node graph documentation calls for

6

its just something like:

return { data: [nodes, edges] } as DataQueryResponse;
1 Like
8

Share the plugin! :slight_smile:

9

its not working, so not much to share :slight_smile:

10

I made with two tables in database. But I can’t put colors and more details, like trace.

1 Like