CytoPanel_Tutorial

About this Page

This page describes what Cyto Panels are, how to use them, and how to programmatically access them.

What are Cyto Panels?

Cyto Panels are floatable / dockable panels, which will be available in Cytoscape 2.2. We built the Cyto Panel API to cut down on the number of pop-up windows within Cytoscape, and create a more unified user experience. For example, in Cytoscape 2.1, the cPath Plugin enables users to click on a node and immediately view node details in a pop-up window. Using the Cyto Panel API, we can now show these node details in an embedded Cyto Panel, and present a more integrated experience to the user. For example, the image below shows a screenshot of the latest BioPax Plugin. When you click on a node, the node details appear directly in the left Cyto Panel.

http://cbio.mskcc.org/~cerami/biopax/bp_plugin1.png

The user can then chose to resize, hide or float the left Cyto Panel. For example, in the screenshot below, the user has chosen to float it:

http://cbio.mskcc.org/~cerami/biopax/bp_plugin2.png

Basic Usage

Cytoscape 2.2 now includes three Cyto Panels: Cyto Panel 1 (appears on the left), Cyto Panel 2 (appears on the right), and Cyto Panel 3 (appears on the bottom). By default, only Cyto Panel 1 will appear, and it will automatically contain the network list and bird's eye view component. The other panels will be hidden by default.

The end-user (or a plugin writer, for that matter) can show any panel via the new Cyto Panel menu, or via the keyboard accelerator short-cuts.

Working with the Cyto Panel API

The Cyto Panel API is straightforward and fully documented. If you are a core Cytoscape coder or a Plugin writer, here are a few tips to get started.

Step 1: Obtain a Cyto Panel

As noted above, the Cytoscape Desktop contains three default Cyto Panels. To obtain one, use the CytoscapeDesktop.getCytoPanel() method. This method takes a SwingConstants integer value, indicating a compass direction (this enables us to add additional Cyto Panels in the future, if we decide that's necessary.) Here is sample code for accessing the left Cyto Panel:

   1    CytoscapeDesktop desktop = Cytoscape.getDesktop();
   2    CytoPanel cytoPanel = desktop.getCytoPanel (SwingConstants.WEST);
   3 

Step 2: Add your component

You can place any Swing Component object in a Cyto Panel, and it will automatically get its own tab. For example, in the code below, I create a BioPax component, and add it the left Cyto Panel. The code also adds an icon and a tooltip:

   1    BioPaxContainer bpContainer = BioPaxContainer.getInstance();
   2    CytoscapeDesktop desktop = Cytoscape.getDesktop();
   3    CytoPanel cytoPanel = desktop.getCytoPanel (SwingConstants.WEST);
   4    URL url = BioPaxDetailsPanel.class.getResource("resources/read_obj.gif");
   5    Icon icon = new ImageIcon(url);
   6    cytoPanel.add("BioPax PlugIn", icon, bpContainer, "BioPax PlugIn");
   7 

Step 3: Set the Cyto Panel State

You can also (optionally) set the Cyto Panel state. Each Cyto Panel exists in one of three states:

• CytoPanelState.HIDE: The panel is hidden from the user's view.

• CytoPanelState.FLOAT: The panel is floating in a separate, external window frame.

• CytoPanelState.DOCK: The panel is docked in the main Cytoscape window, and visible to the user.

Here is sample code for setting the current state:

   1    cytoPanel.setState(CytoPanelState.DOCK);
   2