Cytoscape Wiki|
← Revision 21 as of 2007-01-16 18:48:49
Size: 10372
Comment:
|
← Revision 22 as of 2007-06-28 19:11:34 →
Size: 10527
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 6: | Line 6: |
| '''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 / out of the interaction network shown in the current network display. Zoom icons are detailed below: |
==== 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 15: | Line 16: |
| * Zoom out to Display all of Current Network | * Zoom Out to Display all of Current Network |
| Line 19: | Line 20: |
| '''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. |
==== 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 22: | Line 24: |
| '''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. |
==== 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 24: | Line 27: |
| '''Context''' Click the right mouse button on a node/edge to launch a context sensitive menu with additional information about the node/edge. |
==== Context ==== Click the right mouse button on a node/edge to launch a context-sensitive menu with additional information about the node/edge. |
| Line 28: | 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. Some of the layout algorithms provided are: |
| Line 30: | Line 34: |
| '''Cytoscape Spring-embedded Layout ''' |
==== Cytoscape Spring-Embedded Layout ==== The 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 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 |
| Line 32: | Line 38: |
| 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 → yFiles → Circular. attachment:image053.png |
| Line 34: | Line 42: |
|
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 → yFiles → Hierarchical. attachment:image055.png |
| Line 37: | Line 46: |
|
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. 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 from the __Layout → yFiles → Heirarchical__ menu item. 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 from the __Layout → yFiles → Organic__ menu item. attachment:image057.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 |
| Line 54: | Line 53: |
| 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 56: | Line 55: |
|
'''Edge Handles''' ''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. attachment:edge_handles.png 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. attachment:menu_select_edges.png '''Rotate''' attachment:rotate_dialog.png 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. |
==== 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. |
| Line 74: | Line 61: |
| attachment:rotate_networkA.png | attachment:rotate_networkA.png |
| Line 78: | Line 65: |
| attachment:rotate_networkB.png | attachment:rotate_networkB.png |
| Line 80: | Line 67: |
|
'''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. |
==== 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. |
| Line 88: | Line 73: |
| attachment:scale_networkA.png | attachment:scale_networkA.png |
| Line 92: | Line 77: |
| attachment:scale_networkB.png | attachment:scale_networkB.png |
| Line 94: | Line 79: |
|
'''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 ==== attachment:align_distribute_dialog.png Selecting the Layout → Align/Distribute option will open the Align/Distribute 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. The table below provides a decription of what each button does. |
| Line 113: | Line 96: |
|
|| 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. || ==== 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. attachment:edge_handles.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 |
| Line 119: | Line 109: |
| In addition to the ability to click on a node and drag it to a new position, Cytoscape now has the ability 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. | 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. |
| Line 121: | Line 111: |
| 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. | 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. |
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. Some of the layout algorithms provided are:
Cytoscape Spring-Embedded Layout
The 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 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
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
Several other alignment algorithms, including a selection from the JGraph project (http://jgraph.sourceforge.net), are also available under the Layout menu.
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
- attachment:align_distribute_dialog.png
Selecting the Layout → Align/Distribute option will open the Align/Distribute 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. 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 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: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 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. |
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.
- attachment:edge_handles.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.