Displaying big json take too long time

[bubnenkoff]

Not critical, but when I am trying to display big graph (40KB json). But displaying take too long time. For example graph visjs.github.io/vis-network doing it much faster. data.txt

copy-paste example:

import 'dart:html';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:graph_page/service/service.dart'; // only it need be added to get it work
import 'package:graphview/GraphView.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: LayeredGraphViewPage(),
      );
}

class LayeredGraphViewPage extends StatefulWidget {
  @override
  _LayeredGraphViewPageState createState() => _LayeredGraphViewPageState();
}

class _LayeredGraphViewPageState extends State<LayeredGraphViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.amber[100],
      margin: const EdgeInsets.all(10.0),
      child: Row(
        children: [
           Container(
             width: 150,
            color: Colors.blue[100],
            child: Column(children: [
              ElevatedButton(onPressed: () { 

                    var data = TenderData.getGraphData(); // need to add this to get it work
                    // print(data['edges']);
                    data['edges']!.forEach((element) {
                        var fromNodeId = element['from'];
                        var toNodeId = element['to'];
                        graph.addEdge(Node.Id(fromNodeId), Node.Id(toNodeId));
                      });
                    setState(() {});

               }, child: Text("get data"),),
              Text("some text"),

            ],)

          ), 
          Expanded(child: Container(
            color: Colors.yellow[100],
             child: InteractiveViewer(
               constrained: false,
               boundaryMargin: EdgeInsets.all(100),
               minScale: 0.01,
               maxScale: 5.6,
               child: GraphView(
                 graph: graph,
                algorithm: SugiyamaAlgorithm(builder),
                 paint: Paint()
                   ..color = Colors.green
                   ..strokeWidth = 1
                   ..style = PaintingStyle.stroke,
                 builder: (Node node) {
                   // I can decide what widget should be shown here based on the id
                   var a = node.key!.value as int;
                   return rectangleWidget(node);
                 },
               )),

          ))
        ],
      ),
    ));
  }

  Random r = Random();

  Widget rectangleWidget(Node a) {
    return InkWell(
      onTap: () {
        print('clicked');
      },
      child: Container(
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),

          border: Border.all(
          color: Colors.black,
          width: 5,
        ),

          ),
          child: Text('Node ${a}')),
    );
  }

 final Graph graph = Graph();

 SugiyamaConfiguration builder = SugiyamaConfiguration();

  @override
  void initState() {
    final node1 = Node.Id(1);
    final node2 = Node.Id(2);
    graph.addEdge(node1, node2);

    builder
      ..nodeSeparation = (15)
      ..levelSeparation = (15)
      ..orientation = SugiyamaConfiguration.ORIENTATION_LEFT_RIGHT;    

  }
}

[nabil6391]

It will always be a bit slow as we are loading everyone the first time . But still I made some improvements in 1.0.0

[stefanschaller]

@nabil6391 In my example is a big tree with the SugiyamaAlgorithm and it took 7 seconds to show the tree. The UI is stuck for the whole 7 seconds!

[nabil6391]

Guys I suggest you to upgrate to 1.1.0. There are some major improvements to Sugiyama Algorithms. Do have a look

[nabil6391]

Keeping #56 and #55 open for further tracking. Closing this.