Named edges and nodes in a Roassal graph

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|

Named edges and nodes in a Roassal graph

Offray
Hi all.

We're now in a small workshop about data narratives and I'm showing some
people Roassal.

I would like to have named nodes and edges in a graph. I have created a
small understable graph from the object profile gallery here:
http://ws.stfx.eu/8QMELFJ4V370

Anyone knows how to add names to edges and nodes in this graph?

If I could have a quick answer on this one would be awesome. By the way
I'm now 5:50 pm (GMT-5) in the pharo irc channel is someone pops up.

Thanks,

Offray

Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Offray
By the way, I have found exampleLabelledGraph but I don't understand
where you add individual labels to nodes or edges.

Thanks,

Offray

El 22/11/14 a las #4, Offray Vladimir Luna Cárdenas escribió:

> Hi all.
>
> We're now in a small workshop about data narratives and I'm showing some
> people Roassal.
>
> I would like to have named nodes and edges in a graph. I have created a
> small understable graph from the object profile gallery here:
> http://ws.stfx.eu/8QMELFJ4V370
>
> Anyone knows how to add names to edges and nodes in this graph?
>
> If I could have a quick answer on this one would be awesome. By the way
> I'm now 5:50 pm (GMT-5) in the pharo irc channel is someone pops up.
>
> Thanks,
>
> Offray
>
>


Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Peter Uhnak
Check out RTRoassalExample>>exampleArrowedAndLabelledLine , it should demonstrate the functionality for both elements and edges. You can also use TRConstraint, but that is a tad bit more advanced.

Peter
Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Offray
Hi,

El 22/11/14 a las #4, Peter Uhnák escribió:
> Check out RTRoassalExample>>exampleArrowedAndLabelledLine , it should
> demonstrate the functionality for both elements and edges. You can also use
> TRConstraint, but that is a tad bit more advanced.
>
> Peter
>

Thanks, I have seen it, but the demo is broken. When I move nodes the
names and the text are moved, but the edge is not redrawn.

People in the workshop were interested in Roasal/Pharo but there where
some important lessons:

- There is a lack of information on the basic issues (like this one).
Agile Visualization is a good start as the Object Profile gallery, but
we need more of that. This test case scenarios are useful in detecting
the pending issues.
- Would be nice to have tools for all Roassal visualizations like export
as svg. Some demos have them, some other don't, so other casual issues
has a bigger learning curve to adopt what they are seeing and use it in
another context.

I would like to post the working example on the meetup page, so if any
can tell me why the example is broken or how to solve it, would be nice.

Cheers,

Offray

Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Peter Uhnak
It seems there is an issue with the arrow head, I'll try to investigate it

for now try running it without it

===========================
v := RTView new.

e1 := (RTEllipse new size: 20) elementOn: 'hello'.
e2 := (RTEllipse new size: 20) elementOn: 'world'.

e1 @ RTDraggable.
e2 @ RTDraggable.

l := RTEdge from: e1 to: e2.
l + (RTLine new color: Color red).
"l + (RTSimpleArrowHead new color: Color red)."

e2 translateBy: 60 @ 80.
v addAll: (Array with: e1 with: e2 with: l ).

e1 @ RTLabelled.
e2 @ RTLabelled.

"Note that the RTLabelled interaction has to be set after having added the element in the view"
l @ (RTLabelled new text: 'lining up!').

v open
=========================

As far as documentation goes, it is still heavily work in progress, so right now Agile Visualization is probably the best source (and of course mailing list).

Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Offray
Hi Peter,

Thanks. Working now. I will try to solve the issue and post in the meet
up and here on the list. Nice to help catching up the bug.

Offray

Ps: :

When I said

Would be nice to have tools for all Roassal visualizations like export
as svg. Some demos have them, some other don't, so other casual issues
has a bigger learning curve to adopt what they are seeing and use it in
another context.

I mean:

Would be nice to have tools for all Roassal visualizations like export
as svg. Some demos have them, some other don't, so other casual
**users** has a bigger learning curve to adopt what they are seeing and
use it in another context.



El 22/11/14 a las #4, Peter Uhnák escribió:

> It seems there is an issue with the arrow head, I'll try to investigate it
>
> for now try running it without it
>
> ===========================
> v := RTView new.
>
> e1 := (RTEllipse new size: 20) elementOn: 'hello'.
> e2 := (RTEllipse new size: 20) elementOn: 'world'.
>
> e1 @ RTDraggable.
> e2 @ RTDraggable.
>
> l := RTEdge from: e1 to: e2.
> l + (RTLine new color: Color red).
> "l + (RTSimpleArrowHead new color: Color red)."
>
> e2 translateBy: 60 @ 80.
> v addAll: (Array with: e1 with: e2 with: l ).
>
> e1 @ RTLabelled.
> e2 @ RTLabelled.
>
> "Note that the RTLabelled interaction has to be set after having added the
> element in the view"
> l @ (RTLabelled new text: 'lining up!').
>
> v open
> =========================
>
> As far as documentation goes, it is still heavily work in progress, so right now
> Agile Visualization is probably the best source (and of course mailing list).
>


Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Peter Uhnak
In reply to this post by Peter Uhnak
Hmm, maybe that's the reason why there is separate class for ArrowedLine.

Essentially both RTElement and RTEdge has method 'model:' (RTShapedObject>>model:) where you can put a string which is then used by RTLabelled. (You can actually pass any object, but then you will have to modify it to send it the proper message).

anyway, I modified your example:
====
| vista e1 e2 e3 e4 line edge1 edge2 |

"Se crea un objeto tipo vista"
vista := RTView new.

"Definimo los elementos, que denominamos simplemente e1, e2, etc, con
su color y su tamaño"
e1 := (RTEllipse new color: (Color blue alpha: 0.4); size: 20) elementOn: 'first'.
e2 := (RTEllipse new color: (Color red alpha: 0.4); size: 20) elementOn: 'second'.
e3 := (RTEllipse new color: (Color yellow alpha: 0.4); size: 20) elementOn: 'third'.
e4 := (RTEllipse new color: (Color green alpha: 0.4); size: 20) elementOn: 'fourth'.

"Decimos que los elementos antes definidos se podrán arrastrar"
vista add: e1; add: e2; add: e3; add: e4.

vista elements do: [ :each | each @ RTDraggable @ RTLabelled ].


"Adicionamos los elementos a la vista"

"Decimos qué propiedades va a tener la línea que los conecta los elementos"
line := RTArrowedLine  new color: Color red.
line withOffsetIfMultiple.

"Decimos de dónde a dónde van las líneas que unen los elementos en la vista"

edge1 := (line edgeFrom: e1 to: e2). 
edge2 := (line edgeFrom: e3 to: e4) model: 'second label'.

vista add: edge1.
vista add: (line edgeFrom: e2 to: e1).
vista add: (line edgeFrom: e1 to: e2).
vista  add: (line edgeFrom: e2 to: e2).
vista  add: edge2.

edge1 @ (RTLabelled new text: 'edge label').
edge2 @ RTLabelled. "this uses the model of edge2"


"Decimos que dispocisión van a tener los elementos en la vista. 
En este caso se van a disponer de manera circular"
RTCircleLayout on: { e1 . e2 . e3 . e4 }.

"Abrimos la vista"
vista open
====

On Sun, Nov 23, 2014 at 1:43 AM, Peter Uhnák <[hidden email]> wrote:
It seems there is an issue with the arrow head, I'll try to investigate it

for now try running it without it

===========================
v := RTView new.

e1 := (RTEllipse new size: 20) elementOn: 'hello'.
e2 := (RTEllipse new size: 20) elementOn: 'world'.

e1 @ RTDraggable.
e2 @ RTDraggable.

l := RTEdge from: e1 to: e2.
l + (RTLine new color: Color red).
"l + (RTSimpleArrowHead new color: Color red)."

e2 translateBy: 60 @ 80.
v addAll: (Array with: e1 with: e2 with: l ).

e1 @ RTLabelled.
e2 @ RTLabelled.

"Note that the RTLabelled interaction has to be set after having added the element in the view"
l @ (RTLabelled new text: 'lining up!').

v open
=========================

As far as documentation goes, it is still heavily work in progress, so right now Agile Visualization is probably the best source (and of course mailing list).


Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Peter Uhnak
In reply to this post by Offray
Would be nice to have tools for all Roassal visualizations like export as svg. Some demos have them, some other don't, so other casual **users** has a bigger learning curve to adopt what they are seeing and use it in another context.
Roassal supports PNG, SVG and HTML export. What do you mean some demos have them and some don't?
Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Offray
Hi,

El 22/11/14 a las #4, Peter Uhnák escribió:
>      Would be nice to have tools for all Roassal visualizations like export as
>      svg. Some demos have them, some other don't, so other casual **users** has a
>      bigger learning curve to adopt what they are seeing and use it in another
>      context.
>
> Roassal supports PNG, SVG and HTML export. What do you mean some demos have them
> and some don't?
>

I remember to see a demo with a button which make explicit the
exportation. It was something as "Export SVG" or something like that.
Exporting a visualization is such a common task that it should be part
of each visualization window, may be as an option in the border menu
(the one that emerges when clicking on the pointing down triangle).

Cheers,

Offray

Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Peter Uhnak
I think I know what you mean... but wasn't that just a demonstration of Roassal-based menu?

Also there is always PNG export available (at least in the Moose image, in Pharo the whole browser is not working properly but I think someone is fixing that) .

On Sun, Nov 23, 2014 at 7:31 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:
Hi,

El 22/11/14 a las #4, Peter Uhnák escribió:
     Would be nice to have tools for all Roassal visualizations like export as

     svg. Some demos have them, some other don't, so other casual **users** has a
     bigger learning curve to adopt what they are seeing and use it in another
     context.

Roassal supports PNG, SVG and HTML export. What do you mean some demos have them
and some don't?


I remember to see a demo with a button which make explicit the exportation. It was something as "Export SVG" or something like that. Exporting a visualization is such a common task that it should be part of each visualization window, may be as an option in the border menu (the one that emerges when clicking on the pointing down triangle).

Cheers,

Offray



2014-11-23_19:32:56.png (122K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

abergel
In reply to this post by Offray
Hi Offray,

The chapter about Roassal contains several examples on how to name nodes:
https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/Roassal/0104-Roassal.html

To label the nodes, the simplest way is to use @ RTLabelled. (However, you need first to add the element in the view before doing @ RTLabelled). This works pretty well. Here is your code:

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
"Definimo los elementos, que denominamos simplemente e1, e2, etc, con
su color y su tamaño"
e1 := (RTEllipse new color: (Color blue alpha: 0.4); size: 20) elementOn: 'hello'.
e2 := (RTEllipse new color: (Color red alpha: 0.4); size: 20) elementOn: 'Bonjour'.
e3 := (RTEllipse new color: (Color yellow alpha: 0.4); size: 20) elementOn: 'Gutten Tag'.
e4 := (RTEllipse new color: (Color green alpha: 0.4); size: 20) elementOn: 'BuenGiorno'.

"Adicionamos los elementos a la vista"
vista add: e1; add: e2; add: e3; add: e4.

"Decimos que los elementos antes definidos se podrán arrastrar"
e1 @ RTDraggable @ RTLabelled.
e2 @ RTDraggable @ RTLabelled.
e3 @ RTDraggable @ RTLabelled.
e4 @ RTDraggable @ RTLabelled.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

You have something like that: 

For the edges, you can simply use @RTLabelled on an edge.

Consider:
-=-=-=-=-=-=-=-=-=-=-=-=
line1 := line edgeFrom: e1 to: e2.
line2 := line edgeFrom: e2 to: e1.
line3 := line edgeFrom: e1 to: e2.
line4 := line edgeFrom: e2 to: e2.
line5 := line edgeFrom: e3 to: e4.
vista add: line1.
vista add: line2.
vista add: line3.
vista add: line4.
vista add: line5.

line1 @ RTLabelled.
line2 @ RTLabelled.
line3 @ RTLabelled.
line4 @ RTLabelled.
line5 @ RTLabelled.
-=-=-=-=-=-=-=-=-=-=-=-=


You can particularize the edge label with something like: line1 @ (RTLabelled new text: 'my edge').

Cheers,
Alexandre

On Nov 22, 2014, at 6:33 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Hi all.

We're now in a small workshop about data narratives and I'm showing some people Roassal.

I would like to have named nodes and edges in a graph. I have created a small understable graph from the object profile gallery here: http://ws.stfx.eu/8QMELFJ4V370

Anyone knows how to add names to edges and nodes in this graph?

If I could have a quick answer on this one would be awesome. By the way I'm now 5:50 pm (GMT-5) in the pharo irc channel is someone pops up.

Thanks,

Offray


-- 
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.



Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

abergel
In reply to this post by Peter Uhnak
Yeah, this example had been broken for quite some time.
This is now fixed!

Cheers,
Alexandre

> On Nov 22, 2014, at 6:49 PM, Peter Uhnák <[hidden email]> wrote:
>
> Check out RTRoassalExample>>exampleArrowedAndLabelledLine , it should demonstrate the functionality for both elements and edges. You can also use TRConstraint, but that is a tad bit more advanced.
>
> Peter

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

abergel
In reply to this post by Offray
This is done in the Graph builder. If you are not using it, then do not worry. At the end, it simply use @RTLabelled

Alexandre


> On Nov 22, 2014, at 6:49 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:
>
> By the way, I have found exampleLabelledGraph but I don't understand where you add individual labels to nodes or edges.
>
> Thanks,
>
> Offray
>
> El 22/11/14 a las #4, Offray Vladimir Luna Cárdenas escribió:
>> Hi all.
>>
>> We're now in a small workshop about data narratives and I'm showing some
>> people Roassal.
>>
>> I would like to have named nodes and edges in a graph. I have created a
>> small understable graph from the object profile gallery here:
>> http://ws.stfx.eu/8QMELFJ4V370
>>
>> Anyone knows how to add names to edges and nodes in this graph?
>>
>> If I could have a quick answer on this one would be awesome. By the way
>> I'm now 5:50 pm (GMT-5) in the pharo irc channel is someone pops up.
>>
>> Thanks,
>>
>> Offray
>>
>>
>
>

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

abergel
In reply to this post by Offray
> People in the workshop were interested in Roasal/Pharo but there where some important lessons:

Yes, it takes time. Thanks for trying! This is very important!

> - There is a lack of information on the basic issues (like this one). Agile Visualization is a good start as the Object Profile gallery, but we need more of that. This test case scenarios are useful in detecting the pending issues.

Check the chapter about Roassal on Agile Visualization.
https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/Roassal/0104-Roassal.html

What is missing? I can add a new section, but it will repeat other part...

> - Would be nice to have tools for all Roassal visualizations like export as svg. Some demos have them, some other don't, so other casual issues has a bigger learning curve to adopt what they are seeing and use it in another context.

Yes, we will work on that.

> I would like to post the working example on the meetup page, so if any can tell me why the example is broken or how to solve it, would be nice.

How can we help?

Cheers,
Alexandre
--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

abergel
In reply to this post by Offray
Yes, you are right. This is an option that should be provided by GT I think. We are working on that.

Alexandre


> On Nov 22, 2014, at 9:00 PM, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:
>
> Hi Peter,
>
> Thanks. Working now. I will try to solve the issue and post in the meet up and here on the list. Nice to help catching up the bug.
>
> Offray
>
> Ps: :
>
> When I said
>
> Would be nice to have tools for all Roassal visualizations like export as svg. Some demos have them, some other don't, so other casual issues has a bigger learning curve to adopt what they are seeing and use it in another context.
>
> I mean:
>
> Would be nice to have tools for all Roassal visualizations like export as svg. Some demos have them, some other don't, so other casual **users** has a bigger learning curve to adopt what they are seeing and use it in another context.
>
>
>
> El 22/11/14 a las #4, Peter Uhnák escribió:
>> It seems there is an issue with the arrow head, I'll try to investigate it
>>
>> for now try running it without it
>>
>> ===========================
>> v := RTView new.
>>
>> e1 := (RTEllipse new size: 20) elementOn: 'hello'.
>> e2 := (RTEllipse new size: 20) elementOn: 'world'.
>>
>> e1 @ RTDraggable.
>> e2 @ RTDraggable.
>>
>> l := RTEdge from: e1 to: e2.
>> l + (RTLine new color: Color red).
>> "l + (RTSimpleArrowHead new color: Color red)."
>>
>> e2 translateBy: 60 @ 80.
>> v addAll: (Array with: e1 with: e2 with: l ).
>>
>> e1 @ RTLabelled.
>> e2 @ RTLabelled.
>>
>> "Note that the RTLabelled interaction has to be set after having added the
>> element in the view"
>> l @ (RTLabelled new text: 'lining up!').
>>
>> v open
>> =========================
>>
>> As far as documentation goes, it is still heavily work in progress, so right now
>> Agile Visualization is probably the best source (and of course mailing list).
>>
>
>

--
_,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:
Alexandre Bergel  http://www.bergel.eu
^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;.




Reply | Threaded
Open this post in threaded view
|

Re: Named edges and nodes in a Roassal graph

Offray
In reply to this post by abergel
Thanks Peter and Alexandre for your quick answers and interest,

First, there is now a blog post with your solution and the lessons
learned on our workshop about the dynamics of it and some improvements
to be done to agile visualizations here:

http://mutabit.com/offray/static/blog/output/posts/medios-en-colombia.html

Is in Spanish, because is directed towards the local community, but some
Spanish speaking devs at Pharo/Roassal could also take advantage of it
and comment the ideas feedback them to the development process.

Second, some inline comments below.

El 23/11/14 a las #4, Alexandre Bergel escribió:

>> People in the workshop were interested in Roasal/Pharo but there where some important lessons:
>
> Yes, it takes time. Thanks for trying! This is very important!
>
>> - There is a lack of information on the basic issues (like this one). Agile Visualization is a good start as the Object Profile gallery, but we need more of that. This test case scenarios are useful in detecting the pending issues.
>
> Check the chapter about Roassal on Agile Visualization.
> https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/Roassal/0104-Roassal.html
>
> What is missing? I can add a new section, but it will repeat other part...
>


There is a tendency towards agile visualization from newbies in my
workshops:

1. Awesome is easy to install and quick to use, and you get beautiful
images!

2. Where the data comes from? When I explain that most of it comes from
code inside pharo (relationships on the source code) or from things like

   buildEdgesFromObjects: (1 to: 20)
                from: [ :n | n // 3 ]

they hit the first wall.

So, what is needed is to preserve the awesomeness of complex beautiful
visualization while making a bridge that takes the newbies from where
they are towards that visualizations.

Take for example the graph chapter[a] and imagine that after all the
current, complex and beauty visuals that work as a panoramic view of
what can be done (in a small gallery, for example, with source code
linked to it), we start from the basics and away from the specifics
software analysis. Saying something like (linking your basics to the
graphs chapter):

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Graphs can represent a lot of relationships. The previous gallery is
made using the internal relationships in the agile visualization
platform software, but we can take other relationship. For example:

"Processing a small TSV table"
        tab := RTTabTable new input:
        'id origin relation destiny
        1 Orange is a Fruit
        2 Apple is a Fruit
        3 Apple has color Red
        4 Rice is a Cereal'.

and lets build a graph small graph of this data:

[...]

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-


[a]
https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/Graph/0204-Graph.html

Woud be nice to have an easy way to add tabular data, may be using GT
support for table like interfaces (as I suggested in the blog post) so
the recollection of data to make a visualization and the visualization
code can be linked together more fluidly.

In this way we can keep a balance between awesomeness and easiness.

>> - Would be nice to have tools for all Roassal visualizations like export as svg. Some demos have them, some other don't, so other casual issues has a bigger learning curve to adopt what they are seeing and use it in another context.
>
> Yes, we will work on that.

Thanks. The idea of putting it on GT seems the proper way to do it. The
current way of using external tools to take screenshots or the
mysterious way that uses the internal tool of Pharo or code messages are
not friendly. A explicit button/menu with explicit options to store the
images or a notification about where they are saved are the way to go
for newbies.

>> I would like to post the working example on the meetup page, so if any can tell me why the example is broken or how to solve it, would be nice.
>
> How can we help?

You have already done. Keeping this conversation on the list and/or on
the blog is a way to help and is nice to help back.

I will be in another hackaton this Friday related with GT (not with data
visualization) and another one on Dec. 6. I will keep you informed about
how they went and how can be made better.

Cheers,

Offray