Adding nodes?

[jersonal-com]

Thanks a lot for providing an awesome package.

I was wondering if you have some sample code for adding nodes while the graph is displayed.

If I read the code right, then there is an update function in the graph component that would accept new data. How would I access that method?

Thanks a lot in advance!

[CorvusYe]

Maybe you can try adding nodes directly to the graph, then do refresh.

But there is currently no example code for this method, so I'm not sure if it works in practice either.

https://github.com/graph-cn/flutter_graph_view/blob/main/lib/widgets/vertex_component.dart#L176-L176

[jersonal-com]

The code below will add a node to the graph. The graph will then refresh automatically and repaint.

I was wondering if there would be a way to sneak a new node into the graph without triggering the repaint. Especially if one has just arranged the graph in a way that all the nodes are visible it would be great if adding a node would preserve the state.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_graph_view/core/algorithm/force_directed.dart';
import 'package:flutter_graph_view/core/convertor/map_convertor.dart';
import 'package:flutter_graph_view/core/options.dart';
import 'package:flutter_graph_view/core/options/style/graph_style.dart';
import 'package:flutter_graph_view/flutter_graph_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late var data;

  @override
  void initState() {
    var vertexes = <Map>{};
    var r = Random();
    for (var i = 0; i < 50; i++) {
      vertexes.add(
        {
          'id': 'node$i',
          'tag': 'tag${r.nextInt(9)}',
          'tags': [
            'tag${r.nextInt(9)}',
            if (r.nextBool()) 'tag${r.nextInt(4)}',
            if (r.nextBool()) 'tag${r.nextInt(8)}'
          ],
        },
      );
    }
    var edges = <Map>{};

    for (var i = 0; i < 50; i++) {
      edges.add({
        'srcId': 'node${i % 4}',
        'dstId': 'node$i',
        'edgeName': 'edge${r.nextInt(3)}',
        'ranking': r.nextInt(DateTime.now().millisecond),
      });
    }

    for (var i = 0; i < 50; i++) {
      edges.add({
        'srcId': 'node1',
        'dstId': 'node2',
        'edgeName': 'edge${r.nextInt(3)}',
        'ranking': r.nextInt(DateTime.now().millisecond),
      });
    }

    data = {
      'vertexes': vertexes,
      'edges': edges,
    };
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FlutterGraphWidget(
        data: data,
        algorithm: ForceDirected(),
        convertor: MapConvertor(),
        options: Options()
          ..enableHit = false
          ..onVertexTapUp = ((vertex, event) {
            // new data render to graph
            return data;
          })
          ..panelDelay = const Duration(milliseconds: 500)
          ..graphStyle = (GraphStyle()
          // tagColor is prior to tagColorByIndex. use vertex.tags to get color
            ..tagColor = {'tag8': Colors.orangeAccent.shade200}
            ..tagColorByIndex = [
              Colors.red.shade200,
              Colors.orange.shade200,
              Colors.yellow.shade200,
              Colors.green.shade200,
              Colors.blue.shade200,
              Colors.blueAccent.shade200,
              Colors.purple.shade200,
              Colors.pink.shade200,
              Colors.blueGrey.shade200,
              Colors.deepOrange.shade200,
            ])
          ..useLegend = true // default true
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addData,
        tooltip: 'Add node',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void _addData() {
    int number = DateTime.now().millisecond;
    data['vertexes'].add( {
      'id': 'node_ADDED_$number',
      'tag': 'tag1',
      'tags': [ 'tag1' ],
    },);
    setState(() {
      data['edges'].add({
        'srcId': 'node1',
        'dstId': 'node_ADDED_$number',
        'edgeName': 'New edge',
        'ranking': 2,
      });
    });
  }
}

[CorvusYe]

It's really a good idea.

If this effect can really be achieved, the user experience will be greatly improved.

I will find a time to confirm whether the automatic refresh of the current version of the engine has this effect,
or add an interface that can silently add nodes

[jersonal-com]

Thank you so much.

In the meantime I tried a quick hack to better understand the refresh method of the GraphComponent. I extracted the graphCpn variable from the FlutterGraphWidget and then accessed the refreshData function directly. This is unfortunately also triggering a refresh.

A workaround I might want to try next week if one could maybe implement a 'Persistence Decorator'. One could use the interface from your Decorators and onLoad load the last positions from cache and in compute save the current Vector2 of the node to the disk.

This way a reload would not matter as the last position would be restored. Might be worth a try.

[CorvusYe]

Using the persistent decorator sounds pretty good. It's worth a try.

RefreshData methods are mostly reusable convertors.
If you can use convertor when adding, and execute

graph.vertexes.add(yourData);
var vertexCpn = VertexComponent(
   // ...
);
world.add(vertex);

Making this node like it was added at the beginning may also be a way of thinking.

https://github.com/graph-cn/flutter_graph_view/blob/main/lib/widgets/graph_component.dart#L69-L69

[jersonal-com]

Thanks for the hint. I took the refreshData function as a starting point to addData like in the code below.

When I use this function to add data to an existing graph I get an exception here:

flutter_graph_view/lib/widgets/edge_component.dart

Line 70 in 7f42860

position = edge.start.cpn!.position;

I will have to look into this in more detail in the coming days.

Thanks a lot for you help so far!

import 'package:flutter_graph_view/core/options.dart';
import 'package:flutter_graph_view/widgets/edge_component.dart';
import 'package:flutter_graph_view/widgets/graph_component.dart';
import 'package:flutter_graph_view/widgets/vertex_component.dart';

class GraphComponent2 extends GraphComponent {
  GraphComponent2(
      {required super.data,
      required super.algorithm,
      required super.context,
      required super.convertor,
      Options? options});

  void addData(data, newData) {
    // ignore: invalid_use_of_internal_member
    graph = convertor.convertGraph(data);
    graph.vertexes = graph.vertexes.toSet().toList()
      ..sort((key1, key2) => key1.degree - key2.degree > 0 ? -1 : 1);
    setDefaultVertexColor();
    algorithm.onGraphLoad(graph);

    for (var vertexData in newData['vertexes']) {
      var vertex = convertor.convertVertex(vertexData, graph);
      var vc = VertexComponent(
        vertex,
        graph,
        context,
        algorithm,
        options: options,
        graphComponent: this,
      )..scaleNotifier = scale;
      vertex.cpn = vc;
      world.add(vc);

      for (var edgeData in newData['edges']) {
        var edge = convertor.convertEdge(edgeData, graph);
        var ec = EdgeComponent(edge, graph, context)..scaleNotifier = scale;
        edge.cpn = ec;
        world.add(ec);
      }
    }
  }
}

[CorvusYe]

You're welcome.
I'll also try to add an interface in the near future if that's not very time consuming.
If it doesn't happen in a short time, it may have to wait until two weeks, because I'm currently working on a product launch.
Of course, I am looking forward to seeing you on a new path in the near future. Looking forward to your experience sharing.

[jersonal-com]

I just send you a PR with the PersistenceDecorator implementation. It would be cool if one could earmark manually adjusted positions and then let the other nodes continue to float. But for the purpose of adding nodes this could be a first step.

Over the next days I will take a look if I find a possibility to add nodes... 😃

[CorvusYe]

I've looked at the PR and it's nice.
Thanks for your excellent work.

But there are some network issues with my computer today,
and I will confirm the merger as soon as possible.

[jersonal-com]

Thanks. Hope your network issues get resolved soon.

In my fork I added a branch that uses a very hacky approach in adding a node. I basically pulled the GraphComponent out of the widget and restore the camera viewfinder after adding the data point.

With this approach I can add nodes to a "frozen"/persistent graph. Unfortunately there is still a flicker/repaint when adding a node.

I have never worked with flame (BTW a very smart and elegant solution to build the visualization on top of a game engine 👍) - do I have to cache the world to avoid a repaint?

[CorvusYe]

I have just completed some transactions in the past few days.
Today, I will try to add nodes directly to the world.

[jersonal-com]

I just submitted a fix the PR so that the cache gets updated.

I used the decorator to pull out the position information, store them in JSON and thereby be able to save different configurations of the graph - quite a nice feature / side effect.

[CorvusYe]

@jersonal-com
I just submitted the feature to add nodes. You can preview the effect here.

Three interfaces, addVertex, addEdge, and mergeGraph, have been added to GraphComponent.
You can try to solve your needs.

[jersonal-com]

Thank you so much. I will give it a try next week. Wish you a great weekend!

[CorvusYe]

Looking forward to your feedback. Good luck!

[jersonal-com]

Really nice - especially that is works without reloading and while animation is active is really cool ...

[CorvusYe]

I'm glad this can also meet your needs. Have fun ~