NodeGraph - how to return 2 dataframes?

[bsosnader]

• What Grafana version and what operating system are you using?

Windows 10, Grafana 8.0.3

• What are you trying to achieve?

Making a simple POC of a datasource that provides data in the format required by NodeGraph

• How are you trying to achieve it?

Following tutorial on making datasource plugin

• What happened?
  Minimal code below following the tutorial

My confusion is where the documentation says

Data source needs to return two data frames, one for nodes and one for edges

How do I return two dataframes? I tried wrapping them in an object {} but grafana says this data format is unsupported. I also tried wrapping in array but the data gets returned like this which is clearly not what nodegraph expects:

  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {

    const data = options.targets.map(target => {
      // Your code goes here.
      const query = defaults(target, defaultQuery);
    
      const nodeFrame = new MutableDataFrame({
        name: 'Nodes',
        refId: query.refId,
        fields: [
          { name: 'id', type: FieldType.string },
          { name: 'title', type: FieldType.string},
        ],
      });
      //const jsonNodes = JSON.parse(jsonNodeData);
      nodeFrame.add({id: "1", title: "Name1"});
      nodeFrame.add({ id: "2", title: "Name2"});
      
      const edgeFrame = new MutableDataFrame({
        name: 'Edges',
        refId: query.refId,
        fields: [
          { name: 'id', type: FieldType.string },
          { name: 'source', type: FieldType.string},
          { name: 'target', type: FieldType.string}
        ],
      });

      edgeFrame.add({id: "Connector", source: "1", target: "2"});
      
      return [nodeFrame, edgeFrame];
    
    });

    return { data };
  }

What am I missing?

[hamedkarbasi93]

You’ve to use flatMap instead of map for targets method:

const data = options.targets.flatMap(target => {
      // Your code goes here.
      const query = defaults(target, defaultQuery);
// rest of the code