1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
|
<chapter id="interface"><title>Graphical User Interface</title>
<para>We suggest to run Tulip and experiment with the concepts explained while reading this Manual.
Here are the components of the main window:
<graphic fileref="images/i_interface.png"/>
</para>
<sect1 id="main-window"><title>Menus</title>
<para>
<graphic fileref="images/mainmenu.png"/>
<itemizedlist>
<listitem>
<para><code>File</code>: usual file operations
(<code>New</code>, <code>Open</code>, <code>Save</code>, <code>Save as</code>, <code>Close Tab</code>,
<code>Exit</code>)
<!-- Note: keyboard shortcuts are already visible in the menus.
A shorter text means a more attentive reader. -->
<!-- <itemizedlist>
<listitem>
<para><code>New</code> (<keycap>Ctrl+N</keycap>, <keycap>APPLE+N</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Open</code> (<keycap>Ctrl+O</keycap>, <keycap>APPLE+0</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Save</code> (<keycap>Ctrl+S</keycap>, <keycap>APPLE+S</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Save As</code> (<keycap>Ctrl+Shift+S</keycap>, <keycap>APPLE+Shift+S</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Print</code> (<keycap>Ctrl+P</keycap>, <keycap>APPLE+P</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Close Tab</code>,
</para>
</listitem>
<listitem>
<para><code>Exit</code>(<keycap>Ctrl+Q</keycap>, <keycap>APPLE+Q</keycap> on Mac).
</para>
</listitem>
</itemizedlist> -->
and
<itemizedlist>
<listitem>
<para><code>Import</code>: when import plugins are installed, they go into this menu.
<itemizedlist>
<listitem>
<para><code>File</code>: import graphs in various file formats, such as
Adjacency Matrix (see <ulink url="http://en.wikipedia.org/wiki/Adjacency_matrix">Wikipedia: Adjacency Matrix</ulink> for details),
GML (used by the <application>graphlet</application> system, a toolkit for graph editors and graph algorithms),
dot (graphviz),
or TLP (Tulip's own file format).
</para>
</listitem>
<listitem>
<para><code>Graph</code>: plugins to generate graphs (random or deterministic):
<itemizedlist>
<listitem><para>Complete General Graph: complete graph</para></listitem>
<listitem><para>Complete Tree</para></listitem>
<listitem><para>Grid: 2D grid</para></listitem>
<listitem><para>Grid approximation:
This algorithm creates the specified number of nodes and places them randomly in the 2D plane.
Then it adds an edge between all pairs of nodes that are at distance at most <emphasis>d</emphasis>.
<emphasis>d</emphasis> is adjusted so that the average degree is approximately the degree requested.
</para></listitem>
<listitem><para>Random General Graph</para></listitem>
<listitem><para>Random Simple Graph</para></listitem>
<listitem><para>Uniform Random Binary Tree</para></listitem>
</itemizedlist>
</para>
</listitem>
<listitem>
<para><code>Misc</code>:
plugins to capture the tree structure of a file system directory under a selected root,
or crawl the graph structure of a web site.
</para>
</listitem>
</itemizedlist>
</para>
</listitem>
<listitem>
<para><code>Export</code>. save a graph in GML or TLP formats. Plugins can be installed to support more file formats.
</para>
</listitem>
</itemizedlist>
</para>
</listitem>
<listitem>
<para><code>Edit</code>:
<itemizedlist>
<listitem>
<para><code>Cut</code> <!-- (<keycap>Ctrl+X</keycap>, <keycap>APPLE+X</keycap> on Mac), -->
</para>
</listitem>
<listitem>
<para><code>Copy</code> <!-- (<keycap>Ctrl+C</keycap>, <keycap>APPLE+C</keycap> on Mac), -->
</para>
</listitem>
<listitem>
<para><code>Paste</code>. <!-- (<keycap>Ctrl+V</keycap>, <keycap>APPLE+V</keycap> on Mac), -->
Note that a copied element is placed at the location of the original;
use right-click <code>View → Center View</code> or <keycap>Ctrl+Shift+C</keycap> if the pasted element is outside of the screen
</para>
</listitem>
as well as modify the selection:
<listitem>
<para><code>Find</code> <!-- (<keycap>Ctrl+F</keycap>, <keycap>APPLE+F</keycap> on Mac) -->. This tool has 4 options:
<itemizedlist>
<listitem><para>Replace: Replace the current selection (nodes or edges already selected).
</para></listitem>
<listitem><para>Add: Add the nodes (or edges) to be selected to the current selection.
</para></listitem>
<listitem><para>Remove: Remove nodes (or edges) from the current selection.
</para></listitem>
<listitem><para>Intersect: Select the intersection between the nodes (or edges) TO BE selected, and the ones from the current selection.
</para></listitem>
</itemizedlist>
</para>
</listitem>
<listitem>
<para><code>Select All</code> <!-- (<keycap>Ctrl+A</keycap>, <keycap>APPLE+A</keycap> on Mac) -->,
</para>
</listitem>
<listitem>
<para><code>Delete selection</code><!-- (<keycap>Del</keycap>) -->: delete selected nodes and edges,
</para>
</listitem>
<listitem>
<para><code>Deselect all</code> <!-- (<keycap>Ctrl+Shift+A</keycap>, <keycap>APPLE+Shift+A</keycap> on Mac) -->,
</para>
</listitem>
<listitem>
<para><code>Invert Selection</code> <!-- (<keycap>Ctrl+I</keycap>, <keycap>APPLE+I</keycap> on Mac) -->.
</para>
</listitem>
</itemizedlist>
This menu also contains
<code>Create group</code>,
<code>Create subgraph</code>,
<code>Undo</code>,
<code>Redo</code>.
<!-- <itemizedlist>
<listitem>
<para><code>Create group</code> (<keycap>Ctrl+G</keycap>, <keycap>APPLE+G</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Create subgraph</code> (<keycap>Ctrl+Shift+G</keycap>, <keycap>APPLE+Shift+G</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Undo</code> (<keycap>Ctrl+Z</keycap>, <keycap>APPLE+Z</keycap> on Mac),
</para>
</listitem>
<listitem>
<para><code>Redo</code> (<keycap>Ctrl+Y</keycap>, <keycap>APPLE+Y</keycap> on Mac).</para>
</listitem>
</itemizedlist>-->
</para>
</listitem>
<listitem>
<para><code>Algorithm</code>:
<itemizedlist>
<listitem>
<para><code>Selection</code>: select nodes and/or edges based on advanced criteria. (Selecting means assigning the 'viewSelection' property, see <xref linkend="graph-properties"/> for details). For example, the 'Loop Selection' algorithm detects all edges for which the starting and ending nodes are the same.</para>
</listitem>
<listitem>
<para><code>Color</code>: computes the color (the 'viewColor' property, see <xref linkend="graph-properties"/> for details) of the graph elements. A default one, 'Metric Mapping', is provided; it allows to color all graph elements according to a metric property.</para>
<!-- This plug-in allows you to choose any number of colors, and computes an interpolation to fill in the blanks if needed (or you can force colors to some values by using the enumerated mode). -->
</listitem>
<listitem>
<para><code>Measure</code>: compute and assign a value to the 'viewMetric' property of graph elements, see <xref linkend="graph-properties"/> for details. For example, when running the 'Degree' algorithm, the degree (the number of neighbors) is computed and stored, for each node, into its 'viewMetric' property.</para>
</listitem>
<listitem>
<para><code>Layout</code>: compute the position of each node.
For example, the 'Circular' algorithm places all nodes along a circle.
</para>
<para>
Before:
<graphic fileref="images/algorithms_circularbefor.png"/>
</para>
<para>
After:
<graphic fileref="images/algorithms_circularafter.png" />
</para>
</listitem>
<listitem>
<para><code>Size</code>: compute a size (the 'viewSize' property see <xref linkend="graph-properties"/> for details) of the graph elements.</para>
</listitem>
<listitem>
<para><code>General</code>: more general algorithms: subgraphs, quotient graphs, groups... For example the 'Equal Value' algorithm create subgraphs for which the elements have a chosen value for a chosen 'metric' property.</para>
</listitem>
</itemizedlist>
For more information, see <xref linkend="algo"/>.
</para>
</listitem>
<listitem>
<para><code>Graph </code>:
<itemizedlist>
<listitem><para><code>Tests</code>: test if the graph obey some constraints:
<itemizedlist>
<listitem><para><code>Simple </code>: Is the Graph Simple?
As opposed to a multigraph, a simple graph is an undirected graph
that has no loops and no more than one edge between any two different vertices.
For more information, please visit: <ulink url="http://en.wikipedia.org/wiki/Simple_graph#Simple_graph">Wikipedia: Simple graphs</ulink></para>
</listitem>
<listitem><para><code>Directed Tree </code>: A directed tree is a directed graph which would be a tree if the directions on the edges were ignored. Some authors restrict the term to the case where all edges are directed towards a particular vertex, or all away from a particular vertex. More information: <ulink url="http://en.wikipedia.org/wiki/Directed_tree">Wikipedia: Directed Tree</ulink></para>
</listitem>
<listitem><para><code>Free Tree</code>: A tree without any designated root is called a free tree. More information: <ulink url="http://en.wikipedia.org/wiki/Free_tree">Wikipedia: Free tree</ulink></para>
</listitem>
<listitem><para><code>Acyclic</code>: A graph is acyclic iff it contains no cycle. (A cycle is a path having the same start and and nodes.) More information: <ulink url="http://en.wikipedia.org/wiki/Acyclic_Graph">Wikipedia: Acyclic graphs</ulink></para>
</listitem>
<listitem><para><code>Connected</code>: A graph is connected iff there is path path from any node to any other node. More information: </para> <para><ulink url="http://en.wikipedia.org/wiki/Connected_graph">Wikipedia: Connectivity </ulink></para>
</listitem>
<listitem><para><code>Bi-connected </code>: A connected graph is biconnected if the removal of any single node (and its adjacent edges) does not disconnect the graph. More information:<ulink url="http://en.wikipedia.org/wiki/Biconnected_graph">Wikipedia: Biconnected Graphs </ulink></para>
</listitem>
<listitem><para><code>Tri-connected </code>: If it is always possible to establish a path from any node to an other one even after removing any 2 nodes, then the graph is said to be tri-connected. More information: <ulink url="http://en.wikipedia.org/wiki/K-connected_graph">Wikipedia: k-connected graphs </ulink></para>
</listitem>
<listitem><para><code>Planar </code>: A graph is said to be planar if it can be drawn on the (Euclidean) plane without any edges crossing. More information: <ulink url="http://en.wikipedia.org/wiki/Planar_graph">Wikipedia: Planar Graphs</ulink></para>
</listitem>
<listitem><para><code>Outer Planar </code>: A graph is said to be outer planar if it has an embedding in the plane such that its nodes lie on a fixed circle and its edges lie inside the disk without any crossing. More information: <ulink url="http://en.wikipedia.org/wiki/Planar_graph#Outerplanar_graphs">Wikipedia: Outerplanar Graphs</ulink></para>
</listitem>
</itemizedlist>
</para></listitem>
<listitem><para><code>Modify </code>: Modify the whole structure of a graph, to ensure the graph has one of the above properties:
<itemizedlist>
<listitem><para><code>Make Simple </code>:
Makes the graph simple (by removing self loops and parallel edges, if any).
see <ulink url="../../doxygen/tulip-lib/classtlp_1_1SimpleTest.html">Algorithm documentation</ulink></para>
</listitem>
<listitem><para><code>Make Acyclic</code>
Makes the graph acyclic (by replacing each loop with a triangle, then reversing some edges).
<!-- More information: <ulink url="http://en.wikipedia.org/wiki/Feedback_arc_set">Wikipedia: feedback arc set problem.</ulink> -->
</para>
</listitem>
<listitem><para><code>Make Connected</code>
If the graph is not connected, adds edges to make the graph connected.</para>
</listitem>
<listitem><para><code>Make Bi-connected </code>
If the graph is not biconnected, adds edges to make the graph biconnected.</para>
</listitem>
<listitem><para><code>Make directed </code>: If the graph is a free tree, make it directed. If only one node is selected, this one will be considered as the root node. If none is selected, Tulip will heuristically choose the center of the graph as the root node. More information: <ulink url="http://en.wikipedia.org/wiki/Directed_tree">Wikipedia: Directed Tree</ulink></para>
</listitem>
<listitem><para>Reverse selected edges: Exchange source and target of those edges.
</para></listitem>
</itemizedlist>
</para></listitem>
</itemizedlist>
</para>
</listitem>
<listitem>
<para><code>View</code>: click one and a new subwindow will be created in the view window. For instance, table view displays the list of nodes and the list of edges. See <xref linkend="Main-views" />.</para>
</listitem>
<listitem>
<para><code>Windows</code>: manages the subwindows of the view window.</para>
</listitem>
<listitem><para><code>Options</code>: enable/disable the display options, and show the Graph or View editor:
<itemizedlist>
<listitem><para>Display options:
<itemizedlist>
<listitem><para>Force ratio: Tries to keep a good Height/Width ratio for the graph layout.
</para></listitem>
<listitem><para>Map metric:
Whenever a measure algorithm is run, show its result by updating the graph colors (i.e. applies the Color / Metric Mapping algorithm)
</para></listitem>
<listitem><para>Morphing: when a new layout is applied, displays an animation morphing the old layout to the new one.
</para></listitem>
</itemizedlist>
</para></listitem>
<listitem><para>Show Graph/View editor: if you have closed the Graph or View editor tab (in the left dock widget),
you can show it again thanks to this menu</para></listitem>
</itemizedlist>
</para></listitem>
<listitem>
<para><code>Help</code>:
<code>Documentation</code> (the present one),
<code>Preferences</code>,
<code>Plugins</code> manager,
<code>About</code> this software, including version number.
</para>
</listitem>
</itemizedlist>
</para>
</sect1>
<sect1 id="main-window-toolsbar"><title>Toolbar</title>
<para>
<graphic fileref="images/tools_bar.png"/>
The toolbar contains 6 tools:
<itemizedlist>
<listitem>
<para><inlinegraphic fileref="images/i_open.png"/><code> Open file</code>: Open a new graph.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_save.png"/><code> Save file</code>: Save the current graph.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_print.png"/><code> Print</code>: Print the current graph.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_undo.png"/><code> Undo</code>: Undo the last operation on the graph.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_redo.png"/><code> Redo</code>: Redo the last undo operation.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_snapshot.png"/><code> Snapshot</code>: Record an image of the current view.
</para>
</listitem>
</itemizedlist>
</para>
</sect1>
<sect1 id="infoeditor"><title>Graph Editor</title>
<para>
This subwindow is divided into three tabs: Property, Element, Hierarchy.
</para>
<sect2 id="property"><title>Property</title>
<para>
This tab displays the properties of nodes and edges as a table.
(Properties will be covered in <xref linkend="graph-properties"/>.)
This tab can also be acessed by clicking the <inlinegraphic fileref="images/i_select.png"/> tool,
then clicking on a graph element (node or edge).
</para>
<para>
It is composed of two parts: click on the bottom one to choose which property to display in the top one.
Check <code>selected only</code> to restrict the table to the nodes selected in the node link diagram (i.e. the drawing).
<!-- The bottom part of the tab displays the lists of all the local and inherited properties of a graph. An inherited property is a property which is defined for an upper graph in the hierarchy of graphs (see <xref linkend="hierar"/>). -->
<graphic fileref="images/info-editor.png"/>
Right-click (<keycap>Ctrl</keycap>-click on Mac) on a table row to display this pop-up menu about the corresponding element:
<graphic fileref="images/info-contextmenu.png"/>
<itemizedlist>
<listitem><para><code>Add to/Remove from selection</code>: change the selection state of the element,</para>
</listitem>
<listitem><para><code>Select</code>: the current element replaces the whole selection,</para>
</listitem>
<listitem><para><code>Delete</code>: permanently remove the element from the current graph,</para>
</listitem>
<listitem><para><code>Properties</code>: show the element properties in the <quote>Element</quote> tab (which we now explain).</para>
</listitem>
</itemizedlist>
</para>
</sect2>
<sect2 id="element"><title>Element</title>
<para>
Click this button in the toolbar <inlinegraphic fileref="images/i_select.png"/>,
then click an element (node or edge). The element tab opens:
<graphic fileref="images/element.png"/>
Like before, double-click a cell (in the value column) to update it.
</para>
</sect2>
<sect2 id="hierar"><title>Hierarchy</title>
<para>
This tab shows the hierarchy, i.e. the inclusions between the subgraphs and groups of the current graph.
<!-- All of them could be created with the Tulip tools. -->
Hierarchies will be explained in <xref linkend="hierarchy"/>. A hierarchy is often the result of a clustering algorithm.
<graphic fileref="images/hierachy.png"/>
Right-click an element to remove, clone or rename it.
</para>
</sect2>
</sect1>
<sect1 id="configuration"><title>View Editor</title>
<para>
Click the "View editor" tab at the bottom left corner to access this subwindow.
Here one can configure the interactor (see picture below) and the view.
Thus, when the type of active view changes, this window also changes.
For example, when the view is the Node Link Diagram (i.e. a drawing), there is a tab with Rendering parameters (like on the picture below),
but when the view is the Table view, there is no need for a rotation interactor!
</para>
<graphic fileref="images/view_editor.png"/>
<para>
</para>
</sect1>
<sect1 id="Main-views"><title>Standard views</title>
<sect2 id="NodeLinkDiagramComponent"><title>Node Link Diagram view</title>
<para>This is the most intuitive view: it draws the graph.
</para>
<sect3 id="mouse"><title>Mouse Interaction Toolbar</title>
<para>
<graphic fileref="images/mouse-tool.png"/>
Buttons to act on the graph with the mouse.
<itemizedlist>
<listitem id="navigator3D" xreflabel="Node Link Diagram 3D Navigator">
<para><inlinegraphic fileref="images/i_navigation.png"/><code>3D Navigation</code>: move, rotate and zoom the view.
Zooming behavior: the point under the cursor is moved closer to the center.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_select.png"/><code>Get Information</code>:
click an element (node or edge) and Tulip displays all available properties of that element.
<!--, in the <code>Element</code> tab of the <code>Info Editor</code> sub-window (see <xref linkend="infoeditor"/>). -->
</para>
</listitem>
<listitem id="rectangleSelection" xreflabel="Node Link Diagram Rectangle Selection">
<para><inlinegraphic fileref="images/i_selection.png"/><code>Rectangle Selection</code>: select all elements intersecting the selection box (the previous selection is replaced, but can be recovered with <code>Undo</code>). With <keycap>Shift</keycap>, the newly selected elements are added to the current selection; with <keycap>Ctrl</keycap> (<keycap>Alt</keycap> on Mac), the selected elements are removed from the current selection.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_move.png"/><code>Selection edition</code>: modify the shape and position.
<keycap>Shift</keycap>-click modifies only coordinates.
<keycap>Ctrl</keycap>-click modifies only size.
Left-click outside the selection resets the selection.
</para>
<itemizedlist>
<listitem>
<para>
<inlinegraphic fileref="images/i_selection_click-inside.png"/> Click inside the selection to translate it.
</para>
</listitem>
<listitem>
<para>
<inlinegraphic fileref="images/mousebarselectcircle.png"/> The circle rotates the selection.
</para>
</listitem>
<listitem>
<para>
<inlinegraphic fileref="images/mousebarselecttriangle.png"/> The triangle streches (horizontally or vertically) the selection.
</para>
</listitem>
<listitem>
<para>
<inlinegraphic fileref="images/mousebarselectsquare.png"/> The square does the same as triangles, but in both directions.
</para>
</listitem>
<listitem>
<para>
<inlinegraphic fileref="images/mousebarselectalign.png"/> Align the selected nodes:
<itemizedlist>
<listitem>
<inlinegraphic fileref="images/i_align_vert_center.png"/> align vertically on center
</listitem>
<listitem>
<inlinegraphic fileref="images/i_align_horiz_center.png"/> align horizontally on center
</listitem>
<listitem>
<inlinegraphic fileref="images/i_align_vert_right.png"/> align vertically on the right side
</listitem>
<listitem>
<inlinegraphic fileref="images/i_align_vert_left.png"/> align vertically on the left side
</listitem>
<listitem>
<inlinegraphic fileref="images/i_align_horiz_bottom.png"/> align horizontally on the bottom side
</listitem>
<listitem>
<inlinegraphic fileref="images/i_align_horiz_top.png"/> align horizontally on the top side
</listitem>
</itemizedlist>
</para>
</listitem>
</itemizedlist>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_magic.png"/><code>Magic Selection</code>: selects all the nodes having the same metric and connected to the clicked node. Thus, it works like the magic selection in image editing software, but consider neighboring nodes instead of neighboring pixels.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_zoom.png"/><code>Zoom on Rectangle</code>: Zooms on a specified rectangle area. <keycap>mouse left</keycap> down indicates the first corner, <keycap>mouse left</keycap> up indicates the opposite corner.
</para>
</listitem>
<listitem id="zoomBox" xreflabel="Node Link Diagram Zoom Box">
<para><inlinegraphic fileref="images/i_del.png"/><code>Delete element</code>: click a node or edge to delete it.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_addnode.png"/><code>Add node</code>: click to add a node at the mouse position.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_addedge.png"/><code>Add edge</code>:
to add an edge, click the source node,
optionally click outside of nodes to add bends,
finally click the target node.
When not tracing a link, click outside of nodes to add a node.
</para>
</listitem>
<listitem>
<para><inlinegraphic fileref="images/i_bends.png"/><code>Edit edge bends</code>:
click on an edge to select it (with this tool),
then <keycap>Shift</keycap>-click to add a new bend,
click a bend to move it,
or <keycap>Ctrl</keycap>-click (<keycap>Alt</keycap> on Mac) to remove a bend.
</para>
</listitem>
</itemizedlist>
</para>
</sect3>
<sect3 id="view-window"><title>View window</title>
<para>
This is where the graph is drawn, in 2D or 3D.
Several 3D views can be displayed, each one in a subwindow.
Here is an example graph with 9 nodes:
<graphic fileref="images/3d-view.png"/>
<!-- If the user lets the mouse during few seconds on a node/edge, a tooltip window displays its id and label (use <quote>Options</quote> menu to enable tooltips). -->
</para>
<sect4 id="pop-up"><title>Context menu</title>
<para>
Right-click (<keycap>Ctrl</keycap>-click Mac) to display this menu:
<graphic fileref="images/view-contextmenu.png"/>
<itemizedlist>
<listitem>
<para><code>View</code>: <code>Redraw view</code>, <code>Center view</code>.</para>
</listitem>
<listitem>
<code>Dialog</code>:
<itemizedlist>
<listitem><para><code>3D Overview</code>: toggle top left overview</para></listitem>
<listitem><para><code>Augmented Display</code></para></listitem>
</itemizedlist>
</listitem>
<listitem>
<code>Options</code>:
<itemizedlist>
<listitem><para><code>Tooltips</code>: toggle the display of tooltips when hovering nodes or edges</para>
</listitem>
<listitem><para><code>Grid</code>: shows the grid configuration dialog.</para>
</listitem>
<listitem><para><code>Z Ordering</code>: Use this option when you have graph with transparent nodes or edges.</para>
</listitem>
<listitem><para><code>Antialiasing</code>: toggle antialiasing.</para>
</listitem>
<listitem><para><code>Textured meta node</code>: toggle meta node texture rendering.</para>
</listitem>
</itemizedlist>
</listitem>
<!-- <listitem><para><code>Save picture as → ...</code>: save the graph picture in different format.</para> -->
<!-- </listitem> -->
</itemizedlist>
</para>
Right-click a graph element to display this menu:
<graphic fileref="images/view-contextmenu-element.png"/>
If the element is a metanode, the following extra entries are available:
<para>
<itemizedlist>
<!-- <listitem><para><code>Add to/Remove from selection</code>: this allows to change the selection state of the element,</para> -->
<!-- </listitem> -->
<!-- <listitem><para><code>Select</code>: the current element replaces the whole selection,</para> -->
<!-- </listitem> -->
<!-- <listitem><para><code>Delete</code>: this permanently removes the element from the current graph,</para> -->
<!-- </listitem> -->
<listitem><para><code>Go inside</code>: shows the corresponding subgraph in the current view,</para>
</listitem>
<listitem><para><code>Ungroup</code>: removes the metanode (the nodes of its subgraph are kept in the current graph),</para>
</listitem>
<!-- <listitem><para><code>Properties</code>: this shows the element properties in the <quote>Element</quote> tab.</para> -->
<!-- </listitem> -->
</itemizedlist>
</para>
</sect4>
</sect3>
<sect3 id="renderingparams"><title>Rendering Parameters</title>
<para>
<graphic fileref="images/renderingparams.png"/>
Actions in this dialog are aplied only on the current view window.
<itemizedlist>
<listitem><para><code>Labels</code>:
<itemizedlist>
<listitem><para><code>metric ordering</code>: if checked, labels are displayed in decreasing order of the selected property (default is viewMetric).</para>
</listitem>
<listitem><para><code>Density</code>: move this slider to the left to have less labels displayed.</para>
</listitem>
<listitem><code>Scale labels to fit node size</code></listitem>
</itemizedlist></para>
</listitem>
<listitem><para><code>Edges</code>:
<itemizedlist>
<!-- <listitem><para><code>arrows</code>: enables/disables the display of arrows.</para> -->
<!-- </listitem> -->
<!-- <listitem><para><code>3D</code>: enables/disables the display of edges in 3D.</para> -->
<!-- </listitem> -->
<listitem><para><code>Color interpolation</code>: if checked, the edge color is a gradient from the color of its source node to the color of its target node.</para>
</listitem>
<listitem><para><code>Size interpolation</code>: like color interpolation, but for edge width.</para>
</listitem>
<listitem><para><code>Block max edge size to node size</code>: if checked, the edge size cannot be greater than the node size.</para>
</listitem>
</itemizedlist></para>
</listitem>
<listitem><para><code>Others</code>:
<itemizedlist>
<listitem><para><code>Orthogonal projection</code>: If not checked, the perspective projection is used instead of the orthogonal one.</para>
</listitem>
<!-- <listitem><para><code>Background color</code>: background color of a graph view.</para> -->
<!-- </listitem> -->
<listitem><para><code>Selection color</code>: how to show that a node is selected.
Click "Save at default" to apply this selection color to new views.</para>
</listitem>
</itemizedlist></para>
</listitem>
</itemizedlist>
</para>
</sect3>
<sect3 id="layermanager"><title>Layer Manager</title>
<para>
<graphic fileref="images/layermanager.png"/>
Actions in this dialog are aplied only on the current view window.
<itemizedlist>
<listitem><para><code>Visible</code>: should the element be displayed?
</para></listitem>
<listitem><para><code>Stencil</code>: priority to display the entity
</para></listitem>
</itemizedlist>
</para>
<para>If the visibility checkbox next to Hull is clicked, the convex hull of each subgraph is computed.</para>
<!-- <para>In a future version you could add/modify/remove entity</para> -->
</sect3>
</sect2>
<sect2 id="SpreadsheetComponent"><title>Table view</title>
<graphic fileref="images/spreadsheet_view.png"/>
<para> In this view you can visualize and edit the values of each graph elements (nodes or edges) using a table form. Each column represents a graph property and each row a node or an edge.</para>
<para> The picture <inlinegraphic fileref="images/spreadsheet_inherited_properties.png"/> beside a property mean that property is inherited.</para>
<para> Nodes and edges are drawn in different tables. To switch the current table click on the <code>Nodes</code> or the <code>Edges</code> tab at the top of the view.</para>
<graphic fileref="images/spreadsheet_tabs.png"/>
<para>To edit a value double click on the corresponding cell. Once the modification done press the <code>Enter</code> key to commit the modification or <code>Escape</code> to cancel it.</para>
<sect3><title>Sort elements</title>
<para>To sort elements click on the label of the property. To invert the sort order click again on the label of the property.</para>
</sect3>
<sect3><title>Contextual menu</title>
<para>There is three kinds of contextual menu : </para>
<itemizedlist>
<listitem><para>Property menu</para></listitem>
<listitem><para>Nodes menu</para></listitem>
<listitem><para>Edges menu</para></listitem>
</itemizedlist>
<sect4><title>Property menu</title>
<para>Right click on the label of a property to show it's contextual menu.</para>
<itemizedlist>
<listitem><para><code>Hide</code>: hide the property in the table. To show it again use the property management panel.</para></listitem>
<listitem><para><code>Create new property</code>: display the property creation dialog. Choose a property type and input a property name then click on Ok.</para></listitem>
<listitem><para><code>Copy to</code>: display the property copy dialog. In this dialog you can choose to copy the property in a new property or in an existing property.</para></listitem>
<listitem><para><code>Set all values</code>: set the value of each element of the table. If a filter is defined update only displayed elements.</para></listitem>
<listitem><para><code>Reset</code>: reset properties values to default value. Do not take in account filter.</para></listitem>
<listitem><para><code>Delete</code>: delete the property. You cannot delete inherited properties.</para></listitem>
</itemizedlist>
</sect4>
<sect4><title>Nodes menu</title>
<para>Right click on the label of a node or on a row in the table to show the contextual menu.</para>
<itemizedlist>
<listitem><para><code>Select</code>: replace the nodes selected in the graph by the nodes highlighted in the table.</para></listitem>
<listitem><para><code>Add to the graph selection</code>: add the nodes highlighted in the table to the graph selection. Do not clear the old selection.</para></listitem>
<listitem><para><code>Remove from the graph selection</code>: remove the nodes highlighted in the table from the graph selection.</para></listitem>
<listitem><para><code>Highlight selection</code>: highlight in the table the nodes selected in the graph. Clear previously highlighted nodes.</para></listitem>
<listitem><para><code>Clone</code>: duplicate highlighted nodes in the table. Also copy the properties values.</para></listitem>
<listitem><para><code>Group</code>: create a meta node with the highlighted nodes. This action is available if more than one node is highlighted</para></listitem>
<listitem><para><code>Ungroup</code>: extract all the nodes in the highlighted metanodes. Metanodes will be deleted. This action is available if all highlighted nodes are metanodes.</para></listitem>
<listitem><para><code>Delete</code>: remove highlighted nodes from the current graph.</para></listitem>
</itemizedlist>
</sect4>
<sect4><title>Edges menu</title>
<para>Right click on the label of an edge or on a row in the table to show the contextual menu.</para>
<itemizedlist>
<listitem><para><code>Select</code>: replace the edges selected in the graph by the edges highlighted in the table.</para></listitem>
<listitem><para><code>Add to the graph selection</code>: add the edges highlighted in the table to the graph selection. Do not clear the old selection.</para></listitem>
<listitem><para><code>Remove from the graph selection</code>: remove the edges highlighted in the table from the graph selection.</para></listitem>
<listitem><para><code>Highlight selection</code>: highlight in the table the edges selected in the graph. Clear previously highlighted edges.</para></listitem>
<listitem><para><code>Delete</code>: remove highlighted edges from the current graph.</para></listitem>
</itemizedlist>
</sect4>
</sect3>
<sect3><title>Properties management panel</title>
<para>To show the property management panel click on the <code>Properties</code> button at the top left corner of the view.</para>
<para>Each table has it's own property management panel, so displayed properties can be different in nodes table and in edges table.</para>
<graphic fileref="images/spreadsheet_property_management.png"/>
<sect4><title>Displayed properties widget</title>
<para>This widget allows the user to show and hide properties in the table. Check or uncheck the check-box beside a property to show or hide it.</para>
<para>A right click on the list display a contextual menu : </para>
<itemizedlist>
<listitem><para><code>Show</code>: show the highlighted properties. Do not hide previously displayed properties.</para></listitem>
<listitem><para><code>Show selected only</code>: show the highlighted properties and hide all the other.</para></listitem>
<listitem><para><code>Hide</code>: hide the highlighted properties.</para></listitem>
<listitem><para><code>Create new property</code>: display the property creation dialog. Choose a property type and input a property name then click on Ok.</para></listitem>
<listitem><para><code>Copy to</code>: display the property copy dialog. In this dialog you can choose to copy the property in a new property or in an existing property.</para></listitem>
<listitem><para><code>Delete</code>: delete the property. You cannot delete inherited properties.</para></listitem>
</itemizedlist>
</sect4>
<sect4><title>Filter displayed properties</title>
<para>This widget allow the user to select group of properties.</para>
<para>The <code>Visual properties</code> button selects all the properties that affect visual rendering.</para>
<para>The <code>Data properties</code> button selects all the properties containing user data i.e. properties created by the user, an algorithm or properties imported from a CSV file.</para>
<para>The <code>Custom filter</code> field allow the user to filter displayed properties using a regular expression. Each property with a name matching the pattern will be displayed.</para>
</sect4>
</sect3>
<sect3><title>Filter data</title>
<para>This widget allow the user to filter displayed elements in the current table.</para>
<graphic fileref="images/spreadsheet_filter.png"/>
<para>The <code>Show only selected elements</code> check-box hide all the elements that are not selected in the graph.</para>
<para>To filter elements using regular expression : input a pattern in the <code>Search</code> filed, choose to search in a specific property or in all the properties and click on the <code>Filter</code> button.</para>
</sect3>
</sect2>
</sect1>
</chapter>
<!-- LocalWords: GML TLP viewSelection viewColor viewMetric viewSize Tri nd
-->
<!-- LocalWords: subgraphs biconnected Outerplanar subgraph interactor th
-->
<!-- LocalWords: tooltip tooltips metanode viewLabelColor
-->
|
