Diff for "Cytoscape_User_Manual/Navigation_Layout"

Differences between revisions 16 and 28 (spanning 12 versions)

Basic Network Navigation

Cytoscape uses a [http://en.wikipedia.org/wiki/Zooming_User_Interface Zoomable User Interface] for navigating and viewing networks. ZUIs use two mechanisms for navigation: zooming and panning. Zooming increases or decreases the magnification of a view based on how much or how little a user wants to see. Panning allows users to move the focus of a screen to different parts of a view.

Zoom

Cytoscape provides two mechanisms for zooming: either using mouse gestures or buttons on the toolbar. Use the zooming buttons located on the toolbar to zoom in and out of the interaction network shown in the current network display. Zoom icons are detailed below:

attachment:image049.jpg

From Left to Right:

Zoom Out
Zoom In
Zoom Selected Region
Zoom Out to Display all of Current Network

You can also zoom in/out by holding down the right mouse button and moving the mouse to the right (zoom in) or left (zoom out).

Pan

You can pan the network image by holding down the middle mouse button and moving the mouse. You can also pan the image by holding down the left mouse button over the blue box in the Network Overview panel in the lower left hand of the Cytoscape desktop.

Other Mouse Behaviors

Select

Click the left mouse button on a node or edge to select that object. You can hold down the Shift key to select more than one node/edge or you can hold down the left mouse button and drag the mouse to select groups of nodes/edges.

Context

Click the right mouse button on a node/edge to launch a context-sensitive menu with additional information about the node/edge.

Automatic Layout Algorithms

The Layout menu has an array of features for organizing the network visually according to one of several algorithms, aligning and rotating groups of nodes, and adjusting the size of the network. Most of these features are available from plugins that are packaged with Cytoscape 2.3 and above. Cytoscape layouts have three different sources, which are reflected in the Layout menu.

yFiles Layouts

yFiles layouts are a set of commercial layouts which are provided courtesy of [http://www.yworks.com yWorks]. Due to license restrictions, the detailed parameters for these layouts are not available (there are no yFiles entries in the Settings... dialog). The main layout algorithms provided by yFiles are:

yFiles Circular Layout

This algorithm produces layouts that emphasize group and tree structures within a network. It partitions the network by analyzing its connectivity structure, and arranges the partitions as separate circles. The circles themselves are arranged in a radial tree layout fashion. This algorithm is available by selecting Layout → yFiles → Circular.

attachment:image053.png

yFiles Hierarchical Layout

The hierarchical layout algorithm is good for representing main direction or "flow" within a network. Nodes are placed in hierarchically arranged layers and the ordering of the nodes within each layer is chosen in such a way that minimizes the number of edge crossings. This algorithm is available by selecting Layout → yFiles → Hierarchical.

attachment:image055.png

yFiles Organic Layout

The organic layout algorithm is a kind of spring-embedded algorithm that combines elements of the other algorithms to show the clustered structure of a graph. This algorithm is available by selecting Layout → yFiles → Organic.

attachment:image057.png

Cytoscape Layouts

Cytoscape Layouts are those layouts that have been written or integrated by Cytoscape developers. These layouts are fully integrated with Cytoscape. All Cytoscape Layouts have the option to operate on only the selected nodes, and all provide a Settings... panel to change the parameters of the algorithm. Most of the Cytoscape layouts also partition the graph before performing the layout. In addition, many of these layouts include the option to take either node or edge attributes into account. Some of these layouts are:

Grid Layout

The grid layout is a simple layout the arranges all of the nodes in a square grid. This is the default layout and is always available as part of the Cytoscape core. It is available by selecting Layout → Cytoscape Layouts → Grid Layout. A sample screen shot is shown below:

attachment:grid_layout.png

Force Directed Layout

The force-directed layout is a new layout based on the "force-directed" paradigm. This layout is based on the algorithm implemented as part of the excellent [http://www.prefuse.org/ prefuse toolkit] provided by Jeff Heer. The algorithm is very fast and with the right parameters can provide a very pleasing layout. The Force Directed Layout will also accept a numeric edge attribute to use as a weight for the length of the spring, although this will often require more use of the Settings... dialog to achieve the best layout. This algorithm is available by selecting Layout → Cytoscape Layouts → Force-Directed Layout → (unweighted) or the edge attribute you want to use as a weight. A sample screen shot showing a portion of the galFiltered network provided in sample data is provided below:

attachment:force-directed_layout.png

Spring-Embedded Layout

The spring-embedded layout is based on a “force-directed” paradigm as implemented by Kamada and Kawai (1988). Network nodes are treated like physical objects that repel each other, such as electrons. The connections between nodes are treated like metal springs attached to the pair of nodes. These springs repel or attract their end points according to a force function. The layout algorithm sets the positions of the nodes in a way that minimizes the sum of forces in the network. This algorithm can be applied to the entire network or a portion of it by selecting the appropriate options from Layout → Cytoscape Layouts → Spring Embedded. A sample screen shot is provided below:

attachment:image051.png

Attribute Circle Layout

attachment:attribute_circle_layout.png

Group Attribute Layout

attachment:group_by_attributes_layout.png

JGraph Layouts

Several other alignment algorithms, including a selection from the JGraph project (http://jgraph.sourceforge.net), are also available under the Layout menu.

Layout Parameters

Many layouts have adjustable parameters that are exposed through the Layouts → Settings... menu option. This will pop up the following dialog, which allows you to choose which layout algorithm settings to adjust. The settings presented vary by algorithm and only those algorithms that allow access to their parameters will appear in the drop-down menu at the top of the dialog. Once you've modified a parameter, clicking the "Execute Layout" button will apply the layout. This be repeated until a useful layout is achieved. Settings can be saved using the "Save Settings" button.

attachment:layout_settings_dialog.png

Manual Layout

The simplest method to manually organize a network is to click on a node and drag it. If you select multiple nodes, all of the selected nodes will be moved together.

Rotate

attachment:rotate_dialog.png

Selecting the Layout → Rotate option will open the Rotate window in CytoPanel 5. This function will either rotate the entire network or a selected portion of the network. The image below shows a network with selected nodes rotated.

Before

attachment:rotate_networkA.png

After

attachment:rotate_networkB.png

Scale

attachment:scale_dialog.png

Selecting the Layout → Scale option will open the Scale window in CytoPanel 5. This function will scale the position of the entire network or of the selected portion of the network. Note that only the position of the nodes will be scaled, not the node sizes. Node size can be adjusted using the VizMapper. The image below shows selected nodes scaled.

Before

attachment:scale_networkA.png

After

attachment:scale_networkB.png

Align/Distribute/Stack

attachment:align_distribute_dialog.png

Selecting the Layout → Align/Distribute option will open the Align/Distribute/Stack window in CytoPanel 5. The Align buttons provide different options for either vertically or horizontally aligning selected nodes against a line. The differences are in what part of the node gets aligned, e.g. the center of the node, the top of the node, the left side of the node. The Distribute buttons evenly distribute selected nodes between the two most distant nodes along either the vertical or horizontal axis. The differences are again a function what part of the node is used as a reference point for the distribution. And the Stack buttons vertically or horizontally stack selected nodes with the full complement of alignment options. The table below provides a decription of what each button does.

Button	Before	After	Description of Align Options
attachment:V_ALIGN_TOP.gif	attachment:small.align_begin.png	attachment:small.align_vertical_top.png	Vertical Align Top - The tops of the selected nodes are aligned with the top-most node.
attachment:V_ALIGN_CENTER.gif	attachment:small.align_begin.png	attachment:small.align_vertical_center.png	Vertical Align Center - The centers of the selected nodes are aligned along a line defined by the midpoint between the top and bottom-most nodes.
attachment:V_ALIGN_BOTTOM.gif	attachment:small.align_begin.png	attachment:small.align_vertical_bottom.png	Vertical Align Bottom - The bottoms of the selected nodes are aligned with the bottom-most node.
attachment:H_ALIGN_LEFT.gif	attachment:small.align_begin.png	attachment:small.align_horizontal_left.png	Horizontal Align Left - The left hand sides of the selected nodes are aligned with the left-most node.
attachment:H_ALIGN_CENTER.gif	attachment:small.align_begin.png	attachment:small.align_horizontal_center.png	Horizontal Align Center - The centers of the selected nodes are aligned along a line defined by the midpoint between the left and right-most nodes.
attachment:H_ALIGN_RIGHT.gif	attachment:small.align_begin.png	attachment:small.align_horizontal_right.png	Horizontal Align Right - The right hand sides of the selected nodes are aligned with the right-most node.

Button	Before	After	Description of Distribute Options
attachment:V_DIST_TOP.gif	attachment:small.distribute_begin_vertical.png	attachment:small.distribute_vertical_top.png	Vertical Distribute Top - The tops of the selected nodes are distributed evenly between the top-most and bottom-most nodes, which should stay stationary.
attachment:V_DIST_CENTER.gif	attachment:small.distribute_begin_vertical.png	attachment:small.distribute_vertical_center.png	Vertical Distribute Center - The centers of the selected nodes are distributed evenly between the top-most and bottom-most nodes, which should stay stationary.
attachment:V_DIST_BOTTOM.gif	attachment:small.distribute_begin_vertical.png	attachment:small.distribute_vertical_bottom.png	Vertical Distribute Bottom - The bottoms of the selected nodes are distributed evenly between the top-most and bottom-most nodes, which should stay stationary.
attachment:H_DIST_LEFT.gif	attachment:small.distribute_begin_horizontal.png	attachment:small.distribute_horizontal_left.png	Horizontal Distribute Left - The left hand sides of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary.
attachment:H_DIST_CENTER.gif	attachment:small.distribute_begin_horizontal.png	attachment:small.distribute_horizontal_center.png	Horizontal Distribute Center - The centers of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary.
attachment:H_DIST_RIGHT.gif	attachment:small.distribute_begin_horizontal.png	attachment:small.distribute_horizontal_right.png	Horizontal Distribute Right - The right hand sides of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary.

Button	Before	After	Description of Stack Options
attachment:V_STACK_LEFT.gif	attachment:small.stack_vertical_begin.png	attachment:small.stack_vertical_left.png	Vertical Stack Left - Vertically stacked below top-most node with the left-hand sides of the selected nodes aligned.
attachment:V_STACK_CENTER.gif	attachment:small.stack_vertical_begin.png	attachment:small.stack_vertical_center.png	Vertical Stack Center - Vertically stacked below top-most node with the centers of selected nodes aligned.
attachment:V_STACK_RIGHT.gif	attachment:small.stack_vertical_begin.png	attachment:small.stack_vertical_right.png	Vertical Stack Right - Vertically stacked below top-most node with the right-hand sides of the selected nodes aligned.
attachment:H_STACK_TOP.gif	attachment:small.stack_horizontal_begin.png	attachment:small.stack_horizontal_top.png	Horizontal Stack Top - Horizontally stacked to the right of the left-most node with the tops of the selected nodes aligned.
attachment:H_STACK_CENTER.gif	attachment:small.stack_horizontal_begin.png	attachment:small.stack_horizontal_center.png	Horizontal Stack Center - Horizontally stacked to the right of the left-most node with the centers of selected nodes aligned.
attachment:H_STACK_BOTTOM.gif	attachment:small.stack_horizontal_begin.png	attachment:small.stack_horizontal_bottom.png	Horizontal Stack Bottom - Horizontal Stack Center - Horizontally stacked to the right of the left-most node with the bottoms of the selected nodes aligned.

Edge Handles

This is a little-known feature! If you select an edge and then Ctrl-left-click on the edge, an edge "handle" will appear. This handle can be used to change the shape of the line. To remove a handle, simply Ctrl-left-click on the handle again.

Straight Edge	Smooth Edge
attachment:edge_handles1.png	attachment:edge_handles2.png

Two other options under Select → Edges provide further control: "Smooth Selected Edges" turns an edge consisting of line segments into a smoothed bezier curve, and "Straighten Selected Edges" turns a curved edge back into line segments.

attachment:menu_select_edges.png

Node Movement and Placement

In addition to the ability to click on a node and drag it to a new position, Cytoscape now has the ability to move nodes using the arrow keys on the keyboard. By selecting one or more nodes using the mouse and clicking one of the arrow keys (←, →, ↑, ↓) the selected nodes will move one pixel in the chosen direction. If an arrow key is pressed while holding the Shift key down, the selected nodes will 10 pixels in the chosen direction.

Mouse movement has also been enhanced. If the Shift key is held down while dragging a node, the node will only move horizontally, vertically, or along a 45 degree diagonal.

Cytoscape_User_Manual/Navigation_Layout (last edited 2010-01-29 21:19:45 by barbera)

-  ← Revision 16 as of 2007-01-12 20:36:10 →
  Size: 11481
  Editor: bluezrcout
  Comment:
+  ← Revision 28 as of 2008-03-29 22:30:08 →
  Size: 15476
  Editor: ScooterMorris
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 4:
-Use the zooming buttons located on the toolbar to zoom in / out of the interaction network shown in the current network display. Zoom icons are detailed below:
+Cytoscape uses a [http://en.wikipedia.org/wiki/Zooming_User_Interface Zoomable User Interface] for navigating and viewing networks.  ZUIs use two mechanisms for navigation: zooming and panning.  Zooming increases or decreases the magnification of a view based on how much or how little a user wants to see.  Panning allows users to move the focus of a screen to different parts of a view. 



==== Zoom ====

Cytoscape provides two mechanisms for zooming: either using mouse gestures or buttons on the toolbar. Use the zooming buttons located on the toolbar to zoom in and out of the interaction network shown in the current network display. Zoom icons are detailed below:
-Line 13:
+Line 16:
- * Zoom out to Display all of Current Network

'''Zoom'''  You can also zoom in/out by holding down the right mouse button and moving the mouse to the right (zoom in) or left (zoom out).
+ * Zoom Out to Display all of Current Network
-Line 16:
+Line 18:
-'''Pan'''  You can pan the network image by holding down the middle mouse button and moving the mouse.  You can also pan the image by holding down the left mouse button over the blue box in the Network Overview panel in the lower left hand of the Cytoscape desktop.
+You can also zoom in/out by holding down the right mouse button and moving the mouse to the right (zoom in) or left (zoom out).
-Line 18:
+Line 20:
-'''Select'''  Click the left mouse button on a node or edge to select that object. You can hold down the Shift key to select more than one node/edge or you can hold down the left mouse button and drag the mouse to select groups of nodes/edges.
+==== Pan ====

You can pan the network image by holding down the middle mouse button and moving the mouse.  You can also pan the image by holding down the left mouse button over the blue box in the Network Overview panel in the lower left hand of the Cytoscape desktop.
-Line 20:
+Line 23:
-'''Context'''  Click the right mouse button on a node/edge to launch a context sensitive menu with additional information about the node/edge.
+=== Other Mouse Behaviors ===

==== Select ====

Click the left mouse button on a node or edge to select that object. You can hold down the Shift key to select more than one node/edge or you can hold down the left mouse button and drag the mouse to select groups of nodes/edges.
-Line 22:
+Line 27:
-== Finding and Filtering Nodes and Edges via Quick Find ==
+==== Context ====

Click the right mouse button on a node/edge to launch a context-sensitive menu with additional information about the node/edge.
-Line 24:
+Line 30:
-Cytoscape now includes a new Quick Find feature, which enables you to quickly find nodes and edges.  



attachment:quick_find2.png



Using Quick Find is very simple.  Here is how it works:



 * Import up a network.  For example, load up sampleData/galFiltered.sif

 * Start typing in the text box.  For example, enter "yd".  The search box will automatically display a list of all matching nodes.



attachment:quick_find3.png



 * Select a matching node by hitting [Enter].  Cytoscape will automatically zoom in on the selected node.



attachment:quick_find4.png



'''Configuring Quick Find'''



Quick Find works by creating an internal index of all nodes within the network.  By default, Cytoscape indexes all nodes by the node identifier.  However, you can configure Quick Find to index nodes or edges, and you can choose to index on any attribute.



For example, if you load up a BioPAX file (sampleData/Apoptosis_BioPAX.xml), your network will be automatically annotated with numerous attributes.  To index the network based on, e.g. cellular location, click the Quick Find configuration button, and select "biopax_cellular" location from the drop-down menu.



attachment:quick_find5.png



You can then quickly find all proteins located in the "plasma membrane" by just typing "p".



attachment:quick_find6.png



'''Tip:'''  If you don't know what to search for, just leave the search box empty, and click on the down arrow directly next to the search box.  Cytoscape will provide you with an initial list of matches.  In the case below, we get a list of all distinct cellular locations in the network.



attachment:quick_find7.png



'''Dynamic Filtering via Quick Find'''



If you choose to index on a numerical attribute, the Cytoscape search box changes to a dynamic slider for quick filtering.



For example:



 * Import a network:  sampleData/galFiltered.sif.  '''File &rarr; Import &rarr;  Network'''.

 * Import an expression data file:  sampleData/galExpData.pvals.  '''File &rarr; Import &rarr;  Attribute / Expression Matrix'''

 * Index Quick Find on the gal1RGExp attribute



attachment:quick_find8.png



 * Use the slider widget to automatically filter the entire network



attachment:quick_find9.png
-Line 72:
+Line 32:
-The __Layout__ menu has an array of features for organizing the network visually according to one of several algorithms, aligning and rotating groups of nodes, and adjusting the size of the network. Most of these features are available from plugins that are packaged with Cytoscape 2.3. Some of the layout algorithms provided with Cytoscape 2.3 are:
+The Layout menu has an array of features for organizing the network visually according to one of several algorithms, aligning and rotating groups of nodes, and adjusting the size of the network. Most of these features are available from plugins that are packaged with Cytoscape 2.3 and above. Cytoscape layouts have three different sources, which are reflected in the Layout menu.
-Line 74:
+Line 34:
-'''Cytoscape Spring-embedded Layout '''
+=== yFiles Layouts ===

'''yFiles''' layouts are a set of commercial layouts which are provided courtesy of [http://www.yworks.com yWorks].  Due to license restrictions, the detailed parameters for these layouts are not available (there are no '''yFiles''' entries in the '''Settings...''' dialog).  The main layout algorithms provided by yFiles are:
-Line 76:
+Line 37:
-Spring-embedded layout is based on a “force-directed” paradigm. Network nodes are treated like physical objects that repel each other, such as electrons. The connections between nodes are treated like metal springs attached to the pair of nodes. These springs repel or attract their end points according to a force function. The layout algorithm sets the positions of the nodes in a way that minimizes the sum of forces in the network. This algorithm is available from the __Layout → Cytoscape Layouts → Spring Embedded__ menu item. A sample screen shot is provided below:
+==== yFiles Circular Layout ====

This algorithm produces layouts that emphasize group and tree structures within a network. It partitions the network by analyzing its connectivity structure, and arranges the partitions as separate circles. The circles themselves are arranged in a radial tree layout fashion. This algorithm is available by selecting '''Layout &rarr; yFiles &rarr; Circular'''.

 attachment:image053.png
-Line 78:
+Line 41:
-attachment:image051.png

'''yFiles Circular Layout '''
+==== yFiles Hierarchical Layout ====

The hierarchical layout algorithm is good for representing main direction or "flow" within a network. Nodes are placed in hierarchically arranged layers and the ordering of the nodes within each layer is chosen in such a way that minimizes the number of edge crossings. This algorithm is available by selecting '''Layout &rarr; yFiles &rarr; Hierarchical'''.

 attachment:image055.png
-Line 81:
+Line 45:
-This algorithm produces layouts that emphasize group and tree structures within a network. It partitions the network by analyzing its connectivity structure, and arranges the partitions as separate circles. The circles themselves are arranged in a radial tree layout fashion. This algorithm is available from the __Layout → yFiles → Circular__ menu item.
+==== yFiles Organic Layout ====

The organic layout algorithm is a kind of spring-embedded algorithm that combines elements of the other algorithms to show the clustered structure of a graph. This algorithm is available by selecting '''Layout &rarr; yFiles &rarr; Organic'''.

 attachment:image057.png
-Line 83:
+Line 49:
-attachment:image053.png

'''yFiles Hierarchical Layout '''
+=== Cytoscape Layouts ===
-Line 86:
+Line 51:
-The hierarchical layout algorithm is good for representing main direction or ''flow'' within a network. Nodes are placed in hierarchically arranged layers and the ordering of the nodes within each layer is chosen in such a way that minimizes the number of edge crossings. This algorithm is available from the __Layout → yFiles → Heirarchical__ menu item.
+'''Cytoscape Layouts''' are those layouts that have been written or integrated by Cytoscape developers.  These layouts are fully integrated with Cytoscape.  All Cytoscape Layouts have the option to operate on only the selected nodes, and all provide a '''Settings...''' panel to change the parameters of the algorithm.  Most of the Cytoscape layouts also partition the graph before performing the layout.  In addition, many of these layouts include the option to take either node or edge attributes into account.  Some of these layouts are:
-Line 88:
+Line 53:
-attachment:image055.png

'''yFiles Organic Layout '''
+==== Grid Layout ====

The grid layout is a simple layout the arranges all of the nodes in a square grid.  This is the default layout and is always available as part of the Cytoscape core.  It is available by selecting '''Layout &rarr; Cytoscape Layouts &rarr; Grid Layout'''. A sample screen shot is shown below:

 attachment:grid_layout.png
-Line 91:
+Line 57:
-The organic layout algorithm is a kind of spring-embedded algorithm that combines elements of the other algorithms to show the clustered structure of a graph. This algorithm is available from the __Layout → yFiles → Organic__ menu item.
+==== Force Directed Layout ====
-Line 93:
+Line 59:
-attachment:image057.png
+The force-directed layout is a new layout based on the "force-directed" paradigm.  This layout is based on the algorithm implemented as part of the excellent [http://www.prefuse.org/ prefuse toolkit] provided by Jeff Heer.  The algorithm is very fast and with the right parameters can provide a very pleasing layout.  The '''Force Directed Layout''' will also accept a numeric edge attribute to use as a weight for the length of the spring, although this will often require more use of the '''Settings...''' dialog to achieve the best layout.  This algorithm is available by selecting '''Layout &rarr; Cytoscape Layouts &rarr; Force-Directed Layout &rarr; (unweighted)''' or the edge attribute you want to use as a weight. A sample screen shot showing a portion of the galFiltered network provided in sample data is provided below:

 attachment:force-directed_layout.png



==== Spring-Embedded Layout ====



The spring-embedded layout is based on a “force-directed” paradigm as implemented by Kamada and Kawai (1988). Network nodes are treated like physical objects that repel each other, such as electrons. The connections between nodes are treated like metal springs attached to the pair of nodes. These springs repel or attract their end points according to a force function. The layout algorithm sets the positions of the nodes in a way that minimizes the sum of forces in the network. This algorithm can be applied to the entire network or a portion of it by selecting the appropriate options from '''Layout &rarr; Cytoscape Layouts &rarr; Spring Embedded'''. A sample screen shot is provided below:

 attachment:image051.png



==== Attribute Circle Layout ====



 attachment:attribute_circle_layout.png



==== Group Attribute Layout ====



 attachment:group_by_attributes_layout.png



=== JGraph Layouts ===
-Line 97:
+Line 79:
+=== Layout Parameters ===



Many layouts have adjustable parameters that are exposed through the Layouts &rarr; Settings... menu option.  This will pop up the following dialog, which allows you to choose which layout algorithm settings to adjust.  The settings presented vary by algorithm and only those algorithms that allow access to their parameters will appear in the drop-down menu at the top of the dialog.  Once you've modified a parameter, clicking the "Execute Layout" button will apply the layout.  This be repeated until a useful layout is achieved.  Settings can be saved using the "Save Settings" button.



attachment:layout_settings_dialog.png
-Line 98:
+Line 88:
-The simplest method to manually layout a network is to click on a node and drag the node.  If you select multiple nodes, all of the selected nodes will be moved together.
+The simplest method to manually organize a network is to click on a node and drag it.  If you select multiple nodes, all of the selected nodes will be moved together.
-Line 100:
+Line 90:
-'''Edge Handles'''
+==== Rotate ====

 attachment:rotate_dialog.png

Selecting the Layout &rarr; Rotate option will open the Rotate window in !CytoPanel 5. This function will either rotate the entire network or a selected portion of the network.  The image below shows a network with selected nodes rotated.
-Line 102:
+Line 94:
-''A little known feature!''  If you select an edge and then Ctrl-left-click on the edge, an edge "handle" will appear.  This handle can be used to change the shape of the line. To remove a handle, simply Ctrl-left-click on the handle again.
+Before
-Line 104:
+Line 96:
-attachment:edge_handles.png
+ attachment:rotate_networkA.png
-Line 106:
+Line 98:
-The __Select → Edges__ menu has two menu items that provide further control: "Smooth Selected Edges" turns an edge consisting of line segments into a smoothed bezier curve, and "Straighen Selected Edges" turns a curved edge back into line segments.
+After
-Line 108:
+Line 100:
-attachment:menu_select_edges.png
+ attachment:rotate_networkB.png
-Line 110:
+Line 102:
-'''Rotate'''
+==== Scale ====

 attachment:scale_dialog.png

Selecting the Layout &rarr; Scale option will open the Scale window in !CytoPanel 5. This function will scale the position of the entire network or of the selected portion of the network. Note that only the position of the nodes will be scaled, not the node sizes.  Node size can be adjusted using the !VizMapper. The image below shows selected nodes scaled.
-Line 112:
+Line 106:
-attachment:rotate_dialog.png
+Before
-Line 114:
+Line 108:
-The __Layout → Rotate__ menu opens the Rotate dialog.  Rotate will either rotate the entire network or a selected portion of the network.  The image below shows a network with selected nodes rotated.
+ attachment:scale_networkA.png
-Line 116:
+Line 110:
-BEFORE [[BR]] 

attachment:rotate_networkA.png
+After
-Line 119:
+Line 112:
-AFTER [[BR]] 

attachment:rotate_networkB.png||
+ attachment:scale_networkB.png
-Line 122:
+Line 114:
-'''Scale'''



attachment:scale_dialog.png



The __Layout → Scale__ menu opens the Scale dialog.  Scale will scale the position of the entire network or of the selected portion of the network. Note that only the position of the nodes scale, not the node sizes.  Node size can be adjusted using the VizMapper. The image below shows selected nodes scaled.



BEFORE [[BR]] 

attachment:scale_networkA.png



AFTER [[BR]] 

attachment:scale_networkB.png



'''Align/Distribute'''



attachment:align_distribute_dialog.png



The __Layout → Align/Distribute__ menu opens the Align/Distribute dialog.  The Align buttons of the dialog provides different options for either vertically or horizontally aligning selected nodes against a line.  The differences are in what part of the node gets aligned, e.g. the center of the node, the top of the node, the left side of the node.  The Distribute buttons evenly distribute  selected nodes between the two most distant nodes along either the vertical or horizontal axis. The differences are again a function what part of the node is used as a reference point for the distribution.  The table below provides a mapping from button to name to result.
+==== Align/Distribute/Stack ====

 attachment:align_distribute_dialog.png

Selecting the Layout &rarr; Align/Distribute option will open the Align/Distribute/Stack window in !CytoPanel 5. The Align buttons provide different options for either vertically or horizontally aligning selected nodes against a line.  The differences are in what part of the node gets aligned, e.g. the center of the node, the top of the node, the left side of the node.  The Distribute buttons evenly distribute  selected nodes between the two most distant nodes along either the vertical or horizontal axis. The differences are again a function what part of the node is used as a reference point for the distribution.  And the Stack buttons vertically or horizontally stack selected nodes with the full complement of alignment options. The table below provides a decription of what each button does.
-Line 142:
+Line 120:
-|| attachment:V_ALIGN_CENTER.gif ||attachment:small.align_begin.png||attachment:small.align_vertical_center.png||Vertical Align Center - The centers of selected nodes are aligned along a line defined by the midpoint between the top and bottom-most nodes. ||

|| attachment:V_ALIGN_BOTTOM.gif ||attachment:small.align_begin.png||attachment:small.align_vertical_bottom.png||Vertical Align Bottom - The bottoms of the nodes are aligned with the bottom-most node. ||
+|| attachment:V_ALIGN_CENTER.gif ||attachment:small.align_begin.png||attachment:small.align_vertical_center.png||Vertical Align Center - The centers of the selected nodes are aligned along a line defined by the midpoint between the top and bottom-most nodes. ||

|| attachment:V_ALIGN_BOTTOM.gif ||attachment:small.align_begin.png||attachment:small.align_vertical_bottom.png||Vertical Align Bottom - The bottoms of the selected nodes are aligned with the bottom-most node. ||
-Line 145:
+Line 123:
-|| attachment:H_ALIGN_CENTER.gif ||attachment:small.align_begin.png||attachment:small.align_horizontal_center.png||Horizontal Align Center - The centers of selected nodes are aligned along a line defined by the midpoint between the left and right-most nodes. ||
+|| attachment:H_ALIGN_CENTER.gif ||attachment:small.align_begin.png||attachment:small.align_horizontal_center.png||Horizontal Align Center - The centers of the selected nodes are aligned along a line defined by the midpoint between the left and right-most nodes. ||
-Line 153:
+Line 131:
-|| attachment:H_DIST_LEFT.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_left.png||Horizontal Distribute Left  - The left hand sides of the selected nodes are distributed evenly between the left-most and rigth-most nodes, which should stay stationary. ||

|| attachment:H_DIST_CENTER.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_center.png||Horizontal Distribute Center - The centers of the selected nodes are distributed evenly between the left-most and rigth-most nodes, which should stay stationary. ||

|| attachment:H_DIST_RIGHT.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_right.png||Horizontal Distribute Right - The right hand sides of the selected nodes are distributed evenly between the left-most and rigth-most nodes, which should stay stationary. ||
+|| attachment:H_DIST_LEFT.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_left.png||Horizontal Distribute Left  - The left hand sides of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary. ||

|| attachment:H_DIST_CENTER.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_center.png||Horizontal Distribute Center - The centers of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary. ||

|| attachment:H_DIST_RIGHT.gif ||attachment:small.distribute_begin_horizontal.png||attachment:small.distribute_horizontal_right.png||Horizontal Distribute Right - The right hand sides of the selected nodes are distributed evenly between the left-most and right-most nodes, which should stay stationary. ||





||'''Button'''||'''Before'''||'''After'''||'''Description of Stack Options''' ||

|| attachment:V_STACK_LEFT.gif ||attachment:small.stack_vertical_begin.png||attachment:small.stack_vertical_left.png||Vertical Stack Left - Vertically stacked below top-most node with the left-hand sides of the selected nodes aligned. ||

|| attachment:V_STACK_CENTER.gif ||attachment:small.stack_vertical_begin.png||attachment:small.stack_vertical_center.png||Vertical Stack Center - Vertically stacked below top-most node with the centers of selected nodes aligned. ||

|| attachment:V_STACK_RIGHT.gif ||attachment:small.stack_vertical_begin.png||attachment:small.stack_vertical_right.png||Vertical Stack Right  - Vertically stacked below top-most node with the right-hand sides of the selected nodes aligned. ||

|| attachment:H_STACK_TOP.gif ||attachment:small.stack_horizontal_begin.png||attachment:small.stack_horizontal_top.png||Horizontal Stack Top - Horizontally stacked to the right of the left-most node with the tops of the selected nodes aligned. ||

|| attachment:H_STACK_CENTER.gif ||attachment:small.stack_horizontal_begin.png||attachment:small.stack_horizontal_center.png||Horizontal Stack Center - Horizontally stacked to the right of the left-most node with the centers of selected nodes aligned. ||

|| attachment:H_STACK_BOTTOM.gif ||attachment:small.stack_horizontal_begin.png||attachment:small.stack_horizontal_bottom.png||Horizontal Stack Bottom - Horizontal Stack Center - Horizontally stacked to the right of the left-most node with the bottoms of the selected nodes aligned. ||





==== Edge Handles ====

This is a little-known feature! If you select an edge and then Ctrl-left-click on the edge, an edge "handle" will appear.  This handle can be used to change the shape of the line. To remove a handle, simply Ctrl-left-click on the handle again.



||Straight Edge ||Smooth Edge ||

||attachment:edge_handles1.png||attachment:edge_handles2.png||



Two other options under Select &rarr; Edges provide further control: "Smooth Selected Edges" turns an edge consisting of line segments into a smoothed bezier curve, and "Straighten Selected Edges" turns a curved edge back into line segments.

 attachment:menu_select_edges.png



=== Node Movement and Placement ===



In addition to the ability to click on a node and drag it to a new position, Cytoscape now has the ability to move nodes using the arrow keys on the keyboard.  By selecting one or more nodes using the mouse and clicking one of the arrow keys (&larr;, &rarr;, &uarr;, &darr;) the selected nodes will move one pixel in the chosen direction.  If an arrow key is pressed while holding the Shift key down, the selected nodes will 10 pixels in the chosen direction. 



Mouse movement has also been enhanced.  If the Shift key is held down while dragging a node, the node will only move horizontally, vertically, or along a 45 degree diagonal.