Graph edges don't refresh inside flex app

[geraldo]

hi ppl,

I'm working on a social network visualization based on flare RadialTreeLayout example inside a flex project. Everything works fine using a small GraphML file (SocialNetwork2.xml, 30 nodes) but strange behaviour appears when visualizing more nodes (SocialNetwork.xml, >100 nodes). Edges of graph only refreshes when moving mouse over DataGrid component. I can't figure out how to refresh the graph edges from code. Any ideas?

Just run the socialnetwork.mxml to see the application. The project is for flex builder (linux version but should work fine on different OS).

greetings
Gerald

[joky]

Hi!

It's a flash problem, not flare.
Well.... Flare listen to the flash Event.RENDER to render all sprites.
When flash is overbooked, he dont dispatch this event and flare cant redraw sprites.

The solution is to call with a timer for instance the renderDirty method of flare.

Quick and dirty but it works....

[geraldo]

1000 thanks Joky!

Inserting a Timer at function updateRoot (SocialNetwork.as: line 159) calling flare.display.DirtySprite.renderDirty() every 100 ms fixed the problem.

Just found another error in my application unrelated to the redraw issue: Clicking the last element in the DataGrid causes flash plugin and browser to hang up. Also resorting first column (click header) and selecting last element results in a blocked browser window. The problem is at Datagrid findString method: When I comment calling this function (socialnetwork.mxml: line 158) everything works fine. What is wrong calling datagrid.findString(label)?

greetings
g.

[hoek]

I'm having the same problem with much smaller graphs (<10 nodes). can you please post the lines of code which fixed the problem? Is a timer really needed? can't we just cycle through the node or edge list and call .dirty() on each sprite? thanks, JH

[geraldo]

I solved it with a timer as proposed by joky. Download the Attached File from first posting in this thread, add startTimer(); in function updateRoot() and add the following two functions to SocialNetwork.as:

Code:

private function startTimer():void {
    var timer:Timer = new Timer(200,1);
    timer.addEventListener(TimerEvent.TIMER, timerHandler);
    timer.start();
}
        
public function timerHandler(event:TimerEvent):void {
    flare.display.DirtySprite.renderDirty();
}

As I use a Transitioner redrawing of edges is needed, I couldn't find a solution without a Timer.

[joky]

Nop, you cant "just" loop in edges and nodes because the dirty() method juste set the state dirty to this datasprite.

And the render method is called when sprite is dirty AND when flare listens to the RENDER event.

You have to call manually the renderDirty method.

[AtomBoy]

I had a similar problem, and finally found a fix in the sourceforge forum.

I have the following in my init() function in my mxml component that handles the graph:

Code:

    // fix for bug where the edges get forgotten
    // see: http://sourceforge.net/projects/prefuse/forums/forum/757572/topic/2190163
    this.visualization.addEventListener(VisualizationEvent.UPDATE, function ():void{DirtySprite.renderDirty(); });

[joky]

@AtomBoy : Yes it can work for fixing force directed layout bug...
But, when the bug occurs when we drag a node, it sont fix because event is not dispatched here.