GraphView icon indicating copy to clipboard operation
GraphView copied to clipboard

Nodes overlap on each other

Open alisoleimani-android opened this issue 5 years ago • 14 comments

Hi, thanks for this useful library. Actually i'm experiencing an issue about overlapping nodes on each other. The images shown below. How can i solve this issue? i referred to the issue #2 but didn't find any solution. This is my configuration for BaseGraphAdapter's algorithm:

val configuration = BuchheimWalkerConfiguration.Builder() .setSiblingSeparation(100) .setLevelSeparation(300) .setSubtreeSeparation(300) .setOrientation(BuchheimWalkerConfiguration.ORIENTATION_LEFT_RIGHT) .build()

algorithm = BuchheimWalkerAlgorithm(configuration)

Screenshot_1576325551 Screenshot_1576325524

I've tried landscape mode or change values inside the configuration but none of them solved the issue. Thanks

alisoleimani-android avatar Dec 14 '19 12:12 alisoleimani-android

I've seen the problem in the sample app of this repository too. it can be used to reproduce the problem.

SaeedZhiany avatar Dec 14 '19 13:12 SaeedZhiany

Thank you for bringing this to our attention. I tried to replicate your tree, but so far I couldn't find the problem. Can you or @SaeedZhiany post some code or the changes I should do in our sample app where the issue can be seen.

DennisBlock avatar Dec 15 '19 09:12 DennisBlock

@DennisBlock I tested the sample app a few weeks ago, so the scenario might be a little different. I remember in the sample App I opened all nodes in the tree, then tried to close and reopen one of the nodes in level 3 (or 4) then I saw that its sibling node overlapped a piece of the mentioned node.

SaeedZhiany avatar Dec 15 '19 10:12 SaeedZhiany

From @asr1994's images, it seems the problem is occurring in level 3 of the tree too, so it might the same problem I mentioned. please try it in the sample app, if you couldn't reproduce it, let me know, then I'll try to make a gif as soon as I can to show how the issue happens.

SaeedZhiany avatar Dec 15 '19 10:12 SaeedZhiany

I added, removed and re-added nodes, but still no issue. If you could make a gif, it would be a great help!

DennisBlock avatar Dec 15 '19 13:12 DennisBlock

Unfortunately, I couldn't reproduce it after many tests too. this is so weird to me. I'm pretty sure that I saw the problem in the sample app but I can't remember what is the scenario. sorry about that. as soon as I can reproduce it I'll inform you. meanwhile, @asr1994 can you create a simple repo that recreates your tree? no need to have the details, just the overall structure of your nodes, like width and height of the node container view.

SaeedZhiany avatar Dec 16 '19 06:12 SaeedZhiany

It seems to be some weird corner issue. But nonetheless thanks for your help.

@asr1994 Just like @SaeedZhiany said, it would be great if you could create a sample with the issue.

DennisBlock avatar Dec 16 '19 09:12 DennisBlock

It seems to be some weird corner issue. But nonetheless thanks for your help.

@asr1994 Just like @SaeedZhiany said, it would be great if you could create a sample with the issue.

@DennisBlock

Here is my creation method for the graph:

`private fun Graph.drawNode(parent: NodeModel?, node: NodeModel) {

if (parent == null) {

    mGraph.addNode(Node(node))

} else {

    mGraph.addEdge(Node(parent), Node(node))

}

if (node.hasChildren) {

    for (child in node.children!!) {

        if (child.hasChildren) {

            drawNode(node, child)

        } else {

            mGraph.addEdge(Node(node), Node(child))

        }

    }

}

} private fun Graph.drawNode(parent: NodeModel?, node: NodeModel) {

if (parent == null) {

    mGraph.addNode(Node(node))

} else {

    mGraph.addEdge(Node(parent), Node(node))

}

if (node.hasChildren) {

    for (child in node.children!!) {

        if (child.hasChildren) {

            drawNode(node, child)

        } else {

            mGraph.addEdge(Node(node), Node(child))

        }

    }

}

}` and this is my xml layout for each node of graph (using in custom adapter) :

`

<androidx.cardview.widget.CardView android:layout_width="@dimen/_120sdp" android:layout_height="wrap_content" app:cardCornerRadius="5dp" app:contentPadding="@dimen/spacing_small" app:cardBackgroundColor="@android:color/white">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal">

        <co.tinab.farazindsp.components.tools.UserImageView
            android:layout_width="@dimen/_35sdp"
            android:layout_height="@dimen/_35sdp"
            userProfileImage="@{node.user}"/>

        <co.tinab.farazindsp.components.tools.TextViewNormal
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{node.user.name}"
            android:textColor="@android:color/black"
            android:textSize="@dimen/_12ssp"
            android:gravity="center_horizontal"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="@dimen/spacing_small" />

    </LinearLayout>

    <co.tinab.farazindsp.components.tools.TextViewNormal
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@{node.label}"
        android:textColor="@android:color/black"
        android:textSize="@dimen/_10ssp"
        android:gravity="center"
        android:layout_marginTop="@dimen/spacing_small" />

</LinearLayout>

</androidx.cardview.widget.CardView> `

i hope it could help understand my issue better. Thanks

alisoleimani-android avatar Dec 21 '19 10:12 alisoleimani-android

Unfortunately your code does not help that much, as I cant't run it myself and I don't see anything fundamentaly wrong with it. I would need a runnable sample to debug.

One question though: Do you build you graph before or after adding it to the adapter? I ask because adding new nodes/edges starts the algorithm and there could be some values left from previous iterations which maybe produce these issues.

DennisBlock avatar Jan 07 '20 14:01 DennisBlock

I'm facing the same issue, in my case I'm building the graph before sending it to the adapter. Let me know if you need some more info.

RamiKhawaly avatar Jan 19 '20 17:01 RamiKhawaly

@RamiKhawaly If you could create a small sample project which demonstrates the issue, it would be a great help.

DennisBlock avatar Jan 19 '20 20:01 DennisBlock

I can confirm this may happen sometimes, and will always appear with the same graph (but I lost the graphs). Although in my case it is not that severe -- the two nodes just slightly overlap with each other. But this is still not expected, as the nodes (in the same level) are not evenly spread. In my case the nodes are top-down, and I'm using SugiyamaAlgorithm.

(I may update with the graph layout if I happen to see the problem again.)

renyuneyun avatar Feb 08 '20 17:02 renyuneyun

Any updates on this issue? I have a similar issue with the SugiyamaAlgorithm .

JulianBissekkou avatar Jan 10 '22 13:01 JulianBissekkou

Hi @JulianBissekkou, unfortunately we currently don't have the time to work on this. But contributions are always welcome.

DennisBlock avatar Jan 11 '22 14:01 DennisBlock