Re: changing basic node/edge attributes in displayed graphs

[Antoine Dutot <antoine.dutot AT gmail.com>]

Hi Luc,

2011/6/27 Luc Hogie <luc.hogie AT i3s.unice.fr>

Hi all,

My first post on GS mailing-list... Hope it won't hurt. :)

We've been using GS pre-1.0 for a while in the network simulator we're developing at INRIA/UNSA. I now switching to GS 1.0.
Basically we are dealing with large graphs whose the displayed properties change very frequently. In practice, the simulation process alters the basic properties of nodes/edges: their color, shape and size.

I didn't find a simple and intuitive way to change the value of such properties in the new version of GS. I'm merely willing to do something
like:

       getNode(foo).setColor(Color.red);

To do this, it seems that I now need to produce a CSS which declares a class for every node in the graph (but what if the number of nodes changes?), with the adequate values... This would be difficult to write and would be inefficient.

 

The question is: are the colors of each node different ?

If you have few classes of colors/nodes, indeed, using CSS is a good idea, since you only change the "ui.class" attribute of a node, and all the graphics attributes are switched at once (not only colors, but size, shapes, and any other possible attribute), there are no CSS parser involved when switching CSS classes, graphic classes are stored once in a display optimized form.

Changing the class of a node is only the matter of storing a "ui.class" attribute with a list of classes (only one is often needed).

If you have lots of different colors, you can create only one class of the following form:

node.manyColors {

    fill-color: red, green, blue, #123, rgb(4,5,6), #234594, ..., pink;  // examples of colors understood by GS.

    fill-mode: dyn-plain;

}

Then to dynamically change the color of a node, you merely store a "ui.color" attribute on the node with a real number between 0 and 1, the value being interpolated between the colors described by fill-color. If you have two colors, 0.5 is a mix of the two colors, 0 is the first color and 1 the second color. If you have  3 colors, increments of 0.5 (0, 0.5, 1) give you each exact color and values in between give you a mix of the two closest colors... etc.

http://graphstream-project.org/doc/Tutorials/GraphStream-CSS-Reference_1.0/#general-properties

If you have a very large set of colors for each of your nodes, the best way is to describe a "chromatic circle"  (fill-color: red, green, blue; for example) and interpolate in between. With this system you can describe any color at a given intensity, with only one CSS property parsed only once at start. Then changing the color is only the matter of changing one numeric attribute (ui.color), which does not trigger a CSS parser of any sort.

To change dynamically the size of an object, you can use the "size-mode" CSS property:

node.changingSize {

    size-mode: dyn-size;

}

Then to change its size you can use the "ui.size" attribute, giving it values in pixels (by default). Once again, doing this way, the CSS parser is invoked only at start, you only have to put your nodes in the correct class (or maybe all the nodes are concerned ? in which case you only change the top-level "node" CSS rule).

To dynamically change the shape ... you guessed : use CSS classes.

http://graphstream-project.org/doc/Tutorials/Graph-Visualisation_1.0/#dynamically-changing-colors-and-size

What about an access to lower level graphics primitives of GS? Anyhow the CSS parser should perform a call to some setColor(Color) method on some object... Is there a way to bypass CSS, hence directly invoke the setColor() (and others) method?

Indeed, in GS, CSS is the only way now to change the appearance of the graph, convinced we are that the principles of separation of the structure from the form are important.

 

Moreover, each of the changes of color you do using the system given above can eventually be a graph event, and therefore can be stored in a DGS file and replayed. Having access to the low-level guts of GS would not permit this (and we do not want to expose them :-)).

Just wanna do simple things... No need (want) of CSS. :)

Cheers, and long-life to GraphStream!
Luc.

Hope this helps, please feel free to repost if you have more questions,

Cheers,

Antoine