How it works
CellMaps web comprises four components (see image below). From the top to the bottom:
- Menu bar, which has the menus for the three main CellMaps functions.
- Tool bar, which includes the options for commonly used functions like editing and configuring the network layouts and its elements.
- Network viewer, the visualization window that displays the network.
- Visualization settings box (on the right), which allows to configure the default network visualization and to integrate attributes information.
The menu bar has three elements, which takes the three general function menus.
The File menu contains the basic functionality for file management like opening and saving CellMaps sessions as .json files and downloading a snapshot of the current network viewer window as an image.
The Attributes menu allows the users to add and edit additional information of the network and its elements. These attributes can be imported from an user file, an external database or can be created through the edition box (more information in the Loading Networks and Attributes section). The attributes assigned to the network elements can used to custom the network visual parameters.
The Plugins menu allows users to apply extra functionalities to CellMaps, like performing analysis on the network and its attributes (more information in the Plugins section).
Toolbar includes the commonly used functions for editing and configuring the network, nodes and edges. To see the description of each button, put the mouse pointer over and wait momentarily for a tooltip.
![toolbar] (../wiki/images/toolbar.png)
The following table describes each of the toolbar buttons.
| Icon | Name | Description |
|---|---|---|
 |
Select nodes/edges mode | Select any element (node /edge) |
 |
Select background image | Select and move the background images |
 |
Add mode | Add Nodes |
 |
Join mode | Join Nodes by an edge |
 |
Delete mode | Delete the selected node / edge |
 |
Layout | Render the whole graph using different algorithms. Default: force directed |
 |
Select | Select all nodes, all vertices or both |
 |
Background | Change the color of the background, select a predefined image or upload your own image |
 |
Zoom | Increase or decrease the network view |
 |
Node Name | Show and edit the name of the selected node |
 |
Edge Name | Show and edit the name of the selected edge |
 |
Node Shape | Change the shape of the selected node(s) |
 |
Edge Shape | Change the shape of the selected edge(s) |
 |
Size | Change the size of the selected node /edge |
 |
Stroke size | Change the border size of the selected node/edge(s) |
 |
Color | Change the color of the selected node/edge(s) |
|
Stroke color | Change the border color of the selected node(s) |
 |
Opacity | Changes the transparency of the selected node/edge(s) |
 |
Label size | Change the font size of the node/edge(s) labels |
#Visualization settings box
CellMaps allows the user to configure the visual properties of the network elements (either nodes and edges) by assigning a direct parameter value (default) or creating a visual style dependent on the attributes associated to the network elements (attribute dependent). You will find a full description of these functionalities in the Network and attributes visualization section.
The Network Viewer Pane displays all the nodes and edges of the network and it is used to arrange and navigate around the elements of the network. The bottom right rectangle indicates the section of the network displayed in the network viewer window.
