Size Issue with SugiyamaAlgorithm

[stefanschaller]

There seems to be a positioning / size issue with the SugiyamaAlgorithm.

The setup looks like:

final _graph = Graph()..isTree = true

GraphView(
                graph: _graph,
                algorithm: SugiyamaAlgorithm(SugiyamaConfiguration()
    ..nodeSeparation = 40
    ..levelSeparation = 50),
                builder: (node) {
                //_buildEdge returns a random value between 100 and 300 
                  return _buildEdge(payload!);
                },
              ),

Check out the screenshot.

Do you need any additional information from my side?

[nabil6391]

Can you share with me a working example?

[ahammer]

I've seen sizing issues as well.

You can see https://www.dart-board.io/ if you go into the playground and click the "usb icon" tab, it will show the dependency graph of the app. There is overlapping nodes.

The code to generate the graph is here https://github.com/ahammer/dart_board/blob/master/features/dart_board_debug/lib/debug_graph.dart

[stefanschaller]

@nabil6391 Sorry, I didn't recognize your answer.

@ahammer Thanks for more details about that issue.

[ahammer]

Sorry the link I gave is stale now. I rebuilt the graph a bit differently (bespoke and responsive).

If you'd like to get at the old version you'll need to grab an earlier revision.

I had to pull out the lib because pub doesn't like me publishing the pre-release with null safety in a published package.

[JulianBissekkou]

Any updates on this issue? @nabil6391 I have the same problem in my app

[stefanschaller]

@nabil6391 It's really urgent for me. Do you have any spare time to fix this or at least drop some information about your thoughts.

[nabil6391]

Sorry Guys, If one of guys can just give me a fully write example of th bug then it definitley makes it easy for me.

[stefanschaller]

@nabil6391 Here is a full example with the size issue. Do you need anything else?

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:graphview/GraphView.dart';

void main() {
  runApp(MaterialApp(
    home: DecisionTreeScreen(),
  ));
}

class DecisionTreeScreen extends StatefulWidget {
  @override
  _DecisionTreeScreenState createState() => _DecisionTreeScreenState();
}

class _DecisionTreeScreenState extends State<DecisionTreeScreen> {
  final _graph = Graph()..isTree = true;

  final _configuration = SugiyamaConfiguration()
    ..nodeSeparation = 40
    ..levelSeparation = 50;

  @override
  void initState() {
    super.initState();

    _graph.addEdge(Node.Id(1), Node.Id(2));
    _graph.addEdge(Node.Id(2), Node.Id(3));
    _graph.addEdge(Node.Id(3), Node.Id(4));
    _graph.addEdge(Node.Id(4), Node.Id(5));

    _graph.addEdge(Node.Id(1), Node.Id(6));
    _graph.addEdge(Node.Id(6), Node.Id(7));
    _graph.addEdge(Node.Id(7), Node.Id(3));

    _graph.addEdge(Node.Id(1), Node.Id(10));
    _graph.addEdge(Node.Id(10), Node.Id(11));
    _graph.addEdge(Node.Id(11), Node.Id(7));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InteractiveViewer(
        minScale: 0.1,
        constrained: false,
        boundaryMargin: const EdgeInsets.all(64),
        child: GraphView(
          graph: _graph,
          algorithm: SugiyamaAlgorithm(_configuration),
          builder: (node) {
            final id = node.key!.value as int;

            final text =
                List.generate(id == 1 ? 500 : 10, (index) => "X").join(" ");

            return Container(
              width: 180,
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(width: 2),
              ),
              padding: const EdgeInsets.all(16),
              child: Text(text),
            );
          },
        ),
      ),
    );
  }
}

[nabil6391]

Perfect, I will have a look asap

[mallle]

Thanks, @nabil6391. I have the same problem in my app.

[saibotma]

Having the same problem in my app, too. Any news?

[nabil6391]

Released 1.0.0. with the bugfix. Please have a look and let me know

[nabil6391]

Also improved the performance of Sugiyama Algorithm, let me how if it feels more performant

[stefanschaller]

Sick! Looks great! The size issue was fixed in my case.

To be honest, in my mind the performance always was not that bad, but our graph is not that big..

Thanks!

[stefanschaller]

The issue could be closed in my mind

[JulianBissekkou]

Looks good for me as well. Feel free to close the issue :) If you like, you can send me your PayPal and I will buy you a coffee 👍🏽

[nabil6391]

Thanks for sharing the working example.

And I appreciate you buying me a coffee. https://www.paypal.me/nabil6391

[JulianBissekkou]

I hope you received my coffee :) I wasn't sure how much coffee costs in your country so I send you a "german" coffee 🤣 Cheers mate! ☕

[nabil6391]

Yes I did thanks :D