Part of  
Helix

SStructView 1.1 Tutorial Page

This page demonstrates the SStructView 1.1 Java applet, including JavaScript compatibility.

SStructView is designed to display RNA secondary structures. It reads coordinate information from a URL passed as an applet parameter, displays the secondary structure, and allows the user to browse through and select objects. This demo shows the 16s E. Coli secondary structure, with bases 2, 3 and 4 flagged, and bases 7-12 selected.

This is a Java applet displayed using the ARCHIVE tag. It requires Netscape Navigator to run.

Basic Functionality

ActionURLs: Linking SStructView to CGIs

In addition to displaying Secondary Structure graphics and selecting objects of interest, SStructView allows you to send those selected objects to a CGI that knows how to do something useful with that data. For example, you could select a range of bases and send that range to a sequence alignment program that compares it with similar sequences exist in a database.

To tell SStructView which CGI to use, The "action-URL" parameter tells SStructView which CGI to use; the "action-desc" parameter tells SStructView what to name the action button in the applet. The action-URL must include one or more SStructView link variables. The syntax of link variables in an actionURL is <--variablename&-->. The above example uses the following parameters:

<PARAM NAME="action-URL" VALUE="http://smi-web.stanford.edu/cgi-bin/generic.pl?selection=<--SELECTION-->">
<PARAM NAME="action-desc" VALUE="Generic CGI">

Link variables tell SStructView how to package the user's selection so the CGI can interpret it. For example, if the user selects the first 6 bases in the E. Coli example above, the SELECTION link variable would be "1,2,3,4,5,6" and the SUBSEQ-VAL link variable would be "AAAUUG". When the user clicks on the actionURL button, SStructView scans the actionURL for any link variables and replaces them with the current value. In our example, when the user clicked "Generic CGI", SStructView would process the action-URL to generate and call the following URL:

http://smi-web.stanford.edu/cgi-bin/generic.pl?selection=AAAUUG

The SStructView demo page points to several web pages demonstrating CGI Linking through ActionURLs.

SStructView JavaScript Support in 6 Easy Steps

You can control and manipulate SStructView data structures from within a web page using several accessor methods. These are demonstrated below; for full details see the SStructView 1.1 documentation.

1.
 Getting the current selection
 
 You can retrieve the current selection using SStructView's getSelection() and setSelection() methods. If you want several objects to be selected, separate them by commas (e.g. "3,5,8" selects three bases).

Selection:
 

Try changing the selection from JavaScript: type a new list of bases numbers separated by commas into the Set Selection box, then click "Set Selection to field contents".

Tech Note:For those unfamiliar with JavaScript, here's a summary of how the "Get Selection From Applet" button links the text field (called "textSelection") to the applet (called "SSApplet").The "Get Selection From Applet" has the following script associated with it: onClick="this.form.textSelection.value = document.SSApplet.getSelection() This means "When the user clicks on this button, find the field in this form called "textSelection" and assign its value to what is returned from the getSelection() method of the applet called "SSApplet" in this document. Note that SSApplet is an applet of type SStructView. This means you could have several SStructView applets running on the same page as long as they were given unique names.

To understand how the rest of these JavaScript demos work, examine the HTML source for this page.

2.
 Changing the selection type
 
 The selectionType determines what types of objects can be selected by the user. Example values are BASE, BASE-PAIR, or HELIX. You can set selectionType using SStructView's getSelectionType() and setSelectionType() methods. Note that changing the selectionType may cause the current selection to disappear.

Selection Type:   (or choose one )
 

For example, change the selection type to "HELIX" by selecting it from the popup menu (or typing "HELIX" into the field) and clicking the "Set the selectionType..." button. Now click on a base in the Secondary Structure that is part of a helix: all the bases in the helix are selected (if you click on a base that is not part of a helix, nothing happens).

After selecting a helix, go back to step 1. and click the "Get selection..." button to see the name of the helix you selected.

Try control-clicking to select several helices. Note that range selection (click-drag or shift-click) only works when the selectionType is BASE since bases are the only objects that are ordered in a sequence and for whom the concept of a range makes sense. Finally, the structure data file used in this example contains information on Bases, Base-Pairs and Helices, as well as some extra groups. Try setting the selection type to "LARGE" and clicking on base 1506. (type "LARGE" into the field and click the "Set SelectionType..." button).To see how to create custom new groups, you can examine the data file, available here (the sets of type LARGE are defined at the end of the file).

3.
 Changing the Flagged Bases
 
 Flagged bases are drawn as black circles with white text. You can manipulate the list of flagged bases using the getFlaggedBases() and setFlaggedBases() methods.

Flagged Bases:
 

4.
 Manipulating the Action URL
 
 The actionURL controls what happens when the user clicks on the action button in the applet. You can manipulate this URL using the setActionURL() and getActionURL() methods. The setActionURL() lets you specify a new actionURL for the applet to use. The getActionURL() retrieves the current actionURL with the CGI Link Variables interpreted. Thus, if the URL contains the string <--SELECTION-->, it will be replaced by whatever objects are currently selected (e.g. "102,103,104,105").

Current ActionURL:

New ActionURL:

Try changing the ActionURL to add new variables. For example, to pass both the selection and the selection type to the CGI, set the actionURL to

http://smi-web.stanford.edu/cgi-bin/generic.pl?selection=<--SELECTION-->&type=<--SELECTION-TYPE-->

using the "New ActionURL" field and the "Set New ActionURL" button. Then click the "Get ActionURL" button to see what URL would be retrieved (or click the "Generic CGI" button in the applet itself to try out the new URL).
5.
 Accessing CGI Link variables
 
 In addition to getting the current selection and selection type using the specialized getSelection() and getSelectionType() methods, you can access all of the CGI Link variables using the getVariable() method.

Variable Name:  
Variable Value:

Set the selection type back to "BASE" and select a range of bases by clicking and dragging. Once you've selected a range, look at some of the variable values. For example, select SUBSEQ-VAL value from the popup menu and click "Get Variable Value".

A neat feature is the ability to retrieve data related to the currrent selection. For example, set the selection type to "HELIX", and select several helices (by control clicking).

Now retrieve the variable SELECTION-AS-BASES (type "SELECTION-AS-BASES" into the Variable Name field and click "Get Variable Value"). SStructView can coerce selection data to a different data type if the two are related by set-subset relation. In this case, it will return the bases that are included in the selected helices. Cool!
6.
 Change Zoom Scale
 
 You can change the level of magnification in SStructView with the the getScale() and setScale() methods.

Scale: or select one:

v1.1 Beta Release : v1.1 Home | Tutorial | Docs | SStructView Paper | SStructView Home
Last modified by RMF at 11:22 on 08/16/1993.