Diff for "CytoPanel_Tutorial"

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 the left Cyto Panel:

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 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