about summary refs log tree commit diff
path: root/web/webqtl/networkGraph/networkGraphPageBody.py
diff options
context:
space:
mode:
Diffstat (limited to 'web/webqtl/networkGraph/networkGraphPageBody.py')
-rw-r--r--web/webqtl/networkGraph/networkGraphPageBody.py697
1 files changed, 697 insertions, 0 deletions
diff --git a/web/webqtl/networkGraph/networkGraphPageBody.py b/web/webqtl/networkGraph/networkGraphPageBody.py
new file mode 100644
index 00000000..22b49ccd
--- /dev/null
+++ b/web/webqtl/networkGraph/networkGraphPageBody.py
@@ -0,0 +1,697 @@
+# Copyright (C) University of Tennessee Health Science Center, Memphis, TN.
+#
+# This program is free software: you can redistribute it and/or modify it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+# See the GNU Affero General Public License for more details.
+#
+# This program is available from Source Forge: at GeneNetwork Project
+# (sourceforge.net/projects/genenetwork/).
+#
+# Contact Drs. Robert W. Williams and Xiaodong Zhou (2010)
+# at rwilliams@uthsc.edu and xzhou15@uthsc.edu
+#
+#
+#
+# This module is used by GeneNetwork project (www.genenetwork.org)
+#
+# Created by GeneNetwork Core Team 2010/08/10
+#
+# Last updated by GeneNetwork Core Team 2010/10/20
+
+from base.templatePage import templatePage
+import networkGraphUtils
+from base import webqtlConfig
+         
+
+# our output representation is fairly complicated
+# because we use an iframe to represent the image and the image has
+# an associated image map, our output is actually three files
+# 1) a networkGraphPage instance -- the URL we pass to the user
+# 2) a GraphPage with the image map and the graph -- this page has to be
+#    there to pass the imagemap data to the browser
+# 3) a PNG graph file itself
+
+class networkGraphPageBody(templatePage):
+    """
+    Using the templatePage class, we build an HTML shell for the graph
+    that displays the parameters used to generate it and allows the
+    user to redraw the graph with different parameters.
+
+    The way templatePage works, we build the page in pieces in the __init__
+    method and later on use the inherited write method to render the page.
+    """
+
+    def __init__(self, fd, matrix, traits, imageHtmlName, imageName, pdfName, nodes,
+                 edges, rawEdges, totalTime, p, graphcode, graphName, optimalNode):
+
+        templatePage.__init__(self, fd)
+
+        if p["printIslands"] == 0:
+            island = "Only nodes with edges"
+        else:
+            island = "All nodes"
+
+        body = """ <td><P class='title'>Network Graph</P>
+        <Blockquote><p>The %s nodes in the
+        graph below show the selected traits. %s are displayed. The
+        %s edges between the nodes, filtered from the %s total edges and
+        drawn as %s, show <b>%s</b> correlation
+        coefficients greater than %s or less than -%s. The graph\'s
+        canvas is %s by %s cm, and the node
+        labels are drawn with a %s point font, and the edge 
+        labels are drawn with a %s point font. Right-click or control-click
+        on the graph to save it to disk for further manipulation. See
+        below for the trait key, and graph options.</p>
+        """ % (nodes, island, edges, rawEdges,
+               p["splineName"], p["correlationName"], 
+               p["kValue"],
+               p["kValue"], 
+               p["width"], 
+               p["height"], 
+               p["nfontsize"], 
+               p["cfontsize"])
+        
+        #Generate a list of symbols for the central node selection drop-down menu
+        
+        symbolList = networkGraphUtils.generateSymbolList(traits)
+        
+        #Some of these hidden variables (CellID, CellID2, ProbesetID2, etc) exist 
+        #to be used by the javascript functions called when a user clicks on an edge or node
+        
+        formParams = '''
+        
+        <form name="showDatabase" action="%s%s" METHOD="POST"  enctype="multipart/form-data">
+        
+        <input type="hidden" name="filename" value="%s" />
+        <input type="hidden" name="exportFilename" value="%s" />
+        <input type="hidden" name="progress" value="1" />
+        <input type="hidden" name="database" value="_" />
+        <input type="hidden" name="database2" value="_" />
+        <input type="hidden" name="ProbeSetID" value="_" />
+        <input type="hidden" name="ProbeSetID2" value="_" />
+        <input type="hidden" name="CellID" value="_" />
+        <input type="hidden" name="CellID2" value="_" />
+        <input type="hidden" name="tune" value="no" />
+        <input type="hidden" name="ShowLine" value="ON">
+        <input type="hidden" name="ShowStrains" value="ON">
+        <input type="hidden" name="FormID" value="showDatabase" />
+        <input type="hidden" name="RISet" value="%s" />
+        <input type="hidden" name="incparentsf1" value="ON" />
+        <input type="hidden" name="session" value="%s" />
+        <input type="hidden" name="searchResult" id="searchResult" value="%s" />
+        <input type="hidden" name="symbolList" id="symbolList" value="%s" />
+        <input type="hidden" name="optimalNode" id="optimalNode" value="%s" />
+        <input type="hidden" name="rankOrder" id="rankOrder" value="_" />
+        <input type="hidden" name="X_geneID" id="X_geneID" value="_" />
+        <input type="hidden" name="Y_geneID" id="Y_geneID" value="_" />
+        <input type="hidden" name="X_geneSymbol" id="X_geneSymbol" value="_" />
+        <input type="hidden" name="Y_geneSymbol" id="Y_geneSymbol" value="_" />
+        <input type="hidden" name="TissueProbeSetFreezeId" id="TissueProbeSetFreezeId" value="1" />
+        ''' % (webqtlConfig.CGIDIR,
+               webqtlConfig.SCRIPTFILE,
+               p["filename"],
+               graphName,
+               p["riset"],
+               p["session"],
+               p["searchResult"],
+               symbolList,
+               optimalNode)
+        
+        body += formParams
+        
+        #Adds the html generated by graphviz that displays the graph itself
+        body += graphcode
+
+        #Initializes all form values
+
+        selected = ["","","",""]
+        selected[p["whichValue"]] = "CHECKED"
+
+        selected3 = ["",""]
+        if p["splines"] == "yes":
+            selected3[0] = "CHECKED"
+        else:
+            selected3[1] = "CHECKED"
+
+        selected5 = ["",""]
+        if p["nodeshape"] == "yes":
+            selected5[0] = "CHECKED"
+        else:
+            selected5[1] = "CHECKED"
+            
+        selected7 = ["",""]
+        if p["nodelabel"] == "yes":
+            selected7[0] = "CHECKED"
+        else:
+            selected7[1] = "CHECKED"
+            
+        selected6 = ["",""]
+        if p["dispcorr"] == "yes":
+            selected6[0] = "CHECKED"
+        else:
+            selected6[1] = "CHECKED"
+
+        selected4 = ["", ""]
+        selected4[p["printIslands"]] = "CHECKED"
+       
+        selectedExportFormat = ["",""]
+        if p["exportFormat"] == "xgmml":
+            selectedExportFormat[0] = "selected='selected'"
+        elif p["exportFormat"] == "plain":
+            selectedExportFormat[1] = "selected='selected'"
+        
+        selectedTraitType = ["",""]
+        if p["traitType"] == "symbol":
+            selectedTraitType[0] = "selected='selected'"
+        elif p["traitType"] == "name":
+            selectedTraitType[1] = "selected='selected'"
+
+	selectedgType = ["","","","",""]
+	if p["gType"] == "none":
+	    selectedgType[0] = "selected='selected'"
+        elif p["gType"] == "neato":
+            selectedgType[1] = "selected='selected'"
+	elif p["gType"] == "fdp":
+	    selectedgType[2] = "selected='selected'"
+	elif p["gType"] == "circular":
+	    selectedgType[3] = "selected='selected'"
+	elif p["gType"] == "radial":
+	    selectedgType[4] = "selected='selected'"	
+ 
+ 
+        selectedLock = ["",""]
+        if p["lock"] == "no":
+            selectedLock[0] = "selected='selected'"
+        elif p["lock"] == "yes":
+            selectedLock[1] = "selected='selected'"
+ 
+        # line 1~6
+        
+        selectedL1style = ["","","","",""]
+        if p["L1style"] == "":
+            selectedL1style[0] = "selected='selected'"
+        elif p["L1style"] == "bold":
+            selectedL1style[1] = "selected='selected'"
+        elif p["L1style"] == "dotted":
+            selectedL1style[2] = "selected='selected'"
+        elif p["L1style"] == "dashed":
+            selectedL1style[3] = "selected='selected'"
+        else:
+            selectedL1style[4] = "selected='selected'"
+        
+        selectedL2style = ["","","","",""]
+        if p["L2style"] == "":
+            selectedL2style[0] = "selected='selected'"
+        elif p["L2style"] == "bold":
+            selectedL2style[1] = "selected='selected'"
+        elif p["L2style"] == "dotted":
+            selectedL2style[2] = "selected='selected'"
+        elif p["L2style"] == "dashed":
+            selectedL2style[3] = "selected='selected'"
+        else:
+            selectedL2style[4] = "selected='selected'"
+        
+        selectedL3style = ["","","","",""]
+        if p["L3style"] == "":
+            selectedL3style[0] = "selected='selected'"
+        elif p["L3style"] == "bold":
+            selectedL3style[1] = "selected='selected'"
+        elif p["L3style"] == "dotted":
+            selectedL3style[2] = "selected='selected'"
+        elif p["L3style"] == "dashed":
+            selectedL3style[3] = "selected='selected'"
+        else:
+            selectedL3style[4] = "selected='selected'"
+        
+        selectedL4style = ["","","","",""]
+        if p["L4style"] == "":
+            selectedL4style[0] = "selected='selected'"
+        elif p["L4style"] == "bold":
+            selectedL4style[1] = "selected='selected'"
+        elif p["L4style"] == "dotted":
+            selectedL4style[2] = "selected='selected'"
+        elif p["L4style"] == "dashed":
+            selectedL4style[3] = "selected='selected'"
+        else:
+            selectedL4style[4] = "selected='selected'"
+        
+        selectedL5style = ["","","","",""]
+        if p["L5style"] == "":
+            selectedL5style[0] = "selected='selected'"
+        elif p["L5style"] == "bold":
+            selectedL5style[1] = "selected='selected'"
+        elif p["L5style"] == "dotted":
+            selectedL5style[2] = "selected='selected'"
+        elif p["L5style"] == "dashed":
+            selectedL5style[3] = "selected='selected'"
+        else:
+            selectedL5style[4] = "selected='selected'"
+        
+        selectedL6style = ["","","","",""]
+        if p["L6style"] == "":
+            selectedL6style[0] = "selected='selected'"
+        elif p["L6style"] == "bold":
+            selectedL6style[1] = "selected='selected'"
+        elif p["L6style"] == "dotted":
+            selectedL6style[2] = "selected='selected'"
+        elif p["L6style"] == "dashed":
+            selectedL6style[3] = "selected='selected'"
+        else:
+            selectedL6style[4] = "selected='selected'"
+            
+        nfontSelected = ["", "", ""]
+        if p["nfont"] == "arial":
+            nfontSelected[0] = "selected='selected'"
+        elif p["nfont"] == "verdana":
+            nfontSelected[1] = "selected='selected'"
+        elif p["nfont"] == "times":
+            nfontSelected[2] = "selected='selected'"
+            
+        cfontSelected = ["", "", ""]
+        if p["cfont"] == "arial":
+            cfontSelected[0] = "selected='selected'"
+        elif p["cfont"] == "verdana":
+            cfontSelected[1] = "selected='selected'"
+        elif p["cfont"] == "times":
+            cfontSelected[2] = "selected='selected'"
+ 
+        #Writes the form part of the body
+ 
+        body += ''' <br><br>
+        <TABLE cellspacing=0 Cellpadding=0>
+        <TR>
+        <TD class="doubleBorder">
+       
+        <Table Cellpadding=3>
+        
+        <tr><td align="left">
+        <dd>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <input type="submit" name="mintmap" value="    Redraw    " class="button" onClick="return sortSearchResults(this.form);" />
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+        <input TYPE="Button" class="button" value="    Info    " onclick="javascript:window.open('/networkGraphInfo.html', '_blank');">
+        </dd>
+        </td></tr>
+        
+        <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+    <tr>
+		<tr align='left' valign='top'>
+		    <td align='left'>
+		    &nbsp;<select align='left' name='gType' id='gType' onchange='addTraitSelection();'>
+		    <option value='none' %s>Select Graph Method</option>
+			<option value='neato' %s>Spring Model Layout (energy reduction)</option>
+			<option value='fdp' %s>Spring Model Layout (force reduction)</option>
+			<option value='circular' %s>Circular Layout</option>
+			<option value='radial' %s>Radial Layout</option>
+		    </select>
+		    <div align="left" id='nodeSelect'> </div>
+		    </td>
+		</tr>
+	</tr>
+	
+	    <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+	    
+    <tr><td align='center' colspan='2'>
+
+        <table width='100%%'>
+
+        <tr align='left'>
+            <td>Lock Graph Structure</td>
+            <td align='left'><select name='lock' id='lock' onChange="changeThreshold();">
+            <option value='no' %s>No</option>
+            <option value='yes' %s>Yes</option>
+            </select></td>
+        </tr>
+        <tr><td align='left' colspan='2' nowrap='nowrap'>
+        Locking the graph structure allows the user to hold the position of<br>
+        all nodes and the length of all edges constant, letting him/her easily<br>
+        compare between different correlation types. Changing the value to "yes"<br> 
+        requires the line threshold to be set to 0 in order to lock the structure.<br>
+        </td></tr>
+        </td>
+    </tr>
+	
+	
+	<tr><td align='center' colspan='2'><hr size='1'></td></tr>        
+
+        <tr><td align='center' colspan='2'>
+            
+                <table width='100%%'>
+                
+                <tr align='center'>
+                    <td>Line Type 1:</td>
+                    <td>-1</td>
+                    <td>to</td>
+                    <td>-0.7</td>
+                    <td><Input type=radio name=colorS value="cL1" checked></TD>
+                    <td bgcolor="%s" ID="cL1" width=20></td>
+                    <td><select name='L1style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                <tr align='center'>
+                    <td>Line Type 2:</td>
+                    <td>-0.7</td>
+                    <td>to</td>
+                    <td>-0.5</td>
+                    <td><Input type=radio name=colorS value="cL2"></TD>
+                    <Td bgcolor="%s" ID="cL2" width=20></td>
+                    <td><select name='L2style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                <tr align='center'>
+                    <td>Line Type 3:</td>
+                    <td>-0.5</td>
+                    <td>to</td>
+                    <td>0</td>
+                    <td><Input type=radio name=colorS value="cL3"></TD>
+                    <Td bgcolor="%s" ID="cL3" width=20></td>
+                    <td><select name='L3style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                <tr align='center'>
+                    <td>Line Type 4:</td>
+                    <td>0</td>
+                    <td>to</td>
+                    <td>0.5</td>
+                    <td><Input type=radio name=colorS value="cL4"></TD>
+                    <Td bgcolor="%s" ID="cL4" width=20></td>
+                    <td><select name='L4style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                <tr align='center'>
+                    <td>Line Type 5:</td>
+                    <td>0.5</td>
+                    <td>to</td>
+                    <td>0.7</td>
+                    <td><Input type=radio name=colorS value="cL5"></TD>
+                    <Td bgcolor="%s" ID="cL5" width=20></td>
+                    <td><select name='L5style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                <tr align='center'>
+                    <td>Line Type 6:</td>
+                    <td>0.7</td>
+                    <td>to</td>
+                    <td>1</td>
+                    <td><Input type=radio name=colorS value="cL6"></TD>
+                    <Td bgcolor="%s" ID="cL6" width=20></td>
+                    <td><select name='L6style'>
+                        <option value='' %s>normal</option>
+                        <option value='bold' %s>bold</option>
+                        <option value='dotted' %s>dotted</option>
+                        <option value='dashed' %s>dashed</option>
+                        <option value='invis' %s>invisible</option>
+                    </select></td>
+                </tr>
+                
+                </table>
+            </td>
+        </tr>
+        
+        <tr><td align='center' colspan='2' nowrap='nowrap'>To change colors, select Line Type then select Color below.</td></tr>
+        
+        <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+        
+        <tr>
+            <TD align="right">Correlation Type:</TD>
+            <TD>
+                <table border='0' cellspacing='0' cellpadding='0' width='100%%'>
+                    <tr>
+                        <td><Input type="radio" name="whichValue" value="0" %s>Pearson</td>
+                        <td><Input type="radio" name="whichValue" value="1" %s>Spearman</td>
+                        <td rowspan=2 align="center"><input TYPE="Button" class="button" value="Info" onclick="javascript:window.open('/correlationAnnotation.html', '_blank');"></td>
+                    </tr>
+                    <tr>
+                        <td><Input type="radio" name="whichValue" value="2" %s>Literature</td>
+                        <td><Input type="radio" name="whichValue" value="3" %s>Tissue</td>
+                    </tr>
+                </table>
+            </TD>
+        </TR>
+        
+        <TR>
+            <TD align="right" NOWRAP>Line Threshold:</TD>
+            <TD NOWRAP>Absolute values greater than <input size="5" name="kValue" id="kValue" value="%s"></TD>
+        </TR>
+        
+        <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+        
+        <TR>
+            <TD align="right">Draw Nodes :</TD>
+            <TD NOWRAP>
+                <Input type="radio" name="printIslands" value="1" %s>all
+                <Input type="radio" name="printIslands" value="0" %s>connected only
+            </TD>
+        </TR>
+        
+        <TR>
+            <TD align="right">Node Shape:</TD>
+            <TD>
+                <Input type="radio" name="nodeshape" value="yes" %s>rectangle
+                <Input type="radio" name="nodeshape" value="no" %s>ellipse
+            </TD>
+        </TR>
+        
+        <TR>
+            <TD align="right">Node Label:</TD>
+            <TD>
+                <Input type="radio" name="nodelabel" value="yes" %s>trait name<br>
+                <Input type="radio" name="nodelabel" value="no" %s>gene symbol / marker name
+            </TD>
+        </TR>
+        
+        <tr>
+            <td align="right">Node Font:</td>
+            <TD>
+                <select name='nfont'>
+                    <option value='Arial' %s>Arial</option>
+                    <option value='Verdana' %s>Verdana</option>
+                    <option value='Times' %s>Times</option>
+                </select>
+            </TD>
+        </TR>
+        
+        <tr>
+            <td align="right">Node Font Size:</td>
+            <TD><input size="5" name="nfontsize" value="%s"> point</TD>
+        </TR>
+        
+        <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+        
+        <TR>
+            <TD align="right">Draw Lines:</TD>
+            <TD>
+                <Input type="radio" name="splines" value="yes" %s>curved
+                <Input type="radio" name="splines" value="no" %s>straight
+            </TD>
+        </TR>
+        
+        <TR>
+            <TD align="right">Display Correlations:</TD>
+            <TD>
+                <Input type="radio" name="dispcorr" value="no" %s>no
+                <Input type="radio" name="dispcorr" value="yes" %s>yes
+            </TD>
+        </tr>
+        
+        <tr>
+            <td align="right">Line Font:</td>
+            <TD>
+                <select name='cfont'>
+                    <option value='Arial' %s>Arial</option>
+                    <option value='Verdana' %s>Verdana</option>
+                    <option value='Times' %s>Times</option>
+                </select>
+            </TD>
+        </TR>
+        
+        <TR>
+            <TD align="right" nowrap="nowrap">Line Font Size:</TD>
+            <TD><input size="5" name="cfontsize" value="%s"> point</TD>
+        </TR>
+        
+        <tr><td align='center' colspan='2'><hr size='1'></td></tr>
+        
+        <TR><TD colspan = 2>
+        
+        <Input type=hidden name=cPubName value="%s">
+        <Input type=hidden name=cMicName value="%s">
+        <Input type=hidden name=cGenName value="%s">
+        
+        <Input type=hidden name=cPubColor value="%s">
+        <Input type=hidden name=cMicColor value="%s">
+        <Input type=hidden name=cGenColor value="%s">
+        
+        <Input type=hidden name=cL1Name value="%s">
+        <Input type=hidden name=cL2Name value="%s">
+        <Input type=hidden name=cL3Name value="%s">
+        <Input type=hidden name=cL4Name value="%s">
+        <Input type=hidden name=cL5Name value="%s">
+        <Input type=hidden name=cL6Name value="%s">
+        
+        <Input type=hidden name=cL1Color value="%s">
+        <Input type=hidden name=cL2Color value="%s">
+        <Input type=hidden name=cL3Color value="%s">
+        <Input type=hidden name=cL4Color value="%s">
+        <Input type=hidden name=cL5Color value="%s">
+        <Input type=hidden name=cL6Color value="%s">
+        
+        <Input type=hidden id=initThreshold value="0.5">
+        
+		<Table CellSpacing = 3>
+			<tr>
+			    <TD><Input type=radio name=colorS value="cPub"> Publish </TD>
+			    <Td bgcolor="%s" ID="cPub" width=20 height=10></td>
+			    <TD><Input type=radio name=colorS value="cMic"> Microarray </TD>
+			    <Td bgcolor="%s" ID="cMic" width=20 height=10></td>
+			    <TD><Input type=radio name=colorS value="cGen"> Genotype </TD>
+			    <Td bgcolor="%s" ID="cGen" width=20 height=10></td>
+			</tr>
+		</table>
+		
+		</td></tr>
+		
+		<tr><td align='center' colspan='2'><hr size='1'></td></tr>
+		
+		<tr>
+		    <td colspan='2' align='center'>
+		        <img NAME="colorPanel" src="/images/colorPanel.png" alt="colorPanel" onClick="clickHandler(event, this);">
+		    </TD>
+		</TR>
+		
+		<tr><td align='center' colspan='2'><hr size='1'></td></tr>
+		
+		<tr><td align='center' colspan='2'><input type="submit" name="mintmap" value="    Redraw Graph    " class="button" onClick="return sortSearchResults(this.form);"/></td></tr>
+        
+        </TABLE>
+        </form></TD>
+        <SCRIPT type="text/javascript" SRC="/javascript/networkGraph.js"></SCRIPT>
+        ''' % (selectedgType[0], selectedgType[1], selectedgType[2], selectedgType[3], selectedgType[4],
+                           selectedLock[0], selectedLock[1],
+                           p["cL1Color"],
+                           selectedL1style[0], selectedL1style[1], selectedL1style[2], selectedL1style[3], selectedL1style[4],
+                           p["cL2Color"],
+                           selectedL2style[0], selectedL2style[1], selectedL2style[2], selectedL2style[3], selectedL2style[4],
+                           p["cL3Color"],
+                           selectedL3style[0], selectedL3style[1], selectedL3style[2], selectedL3style[3], selectedL3style[4],
+                           p["cL4Color"],
+                           selectedL4style[0], selectedL4style[1], selectedL4style[2], selectedL4style[3], selectedL4style[4],
+                           p["cL5Color"],
+                           selectedL5style[0], selectedL5style[1], selectedL5style[2], selectedL5style[3], selectedL5style[4],
+                           p["cL6Color"],
+                           selectedL6style[0], selectedL6style[1], selectedL6style[2], selectedL6style[3], selectedL6style[4],
+                           selected[0], selected[1], selected[2], selected[3],
+                           p["kValue"], 
+                           selected4[1], selected4[0], 
+                           selected5[0], selected5[1], 
+                           selected7[0], selected7[1],
+                           nfontSelected[0], nfontSelected[1], nfontSelected[2],
+                           p["nfontsize"],
+                           selected3[0], selected3[1], 
+                           selected6[1], selected6[0],
+                           cfontSelected[0], cfontSelected[1], cfontSelected[2],
+                           p["cfontsize"],
+                           p["cPubName"], p["cMicName"], p["cGenName"],
+                           p["cPubColor"], p["cMicColor"], p["cGenColor"],
+                           p["cL1Name"], p["cL2Name"], p["cL3Name"], p["cL4Name"], p["cL5Name"], p["cL6Name"],
+                           p["cL1Color"], p["cL2Color"], p["cL3Color"], p["cL4Color"], p["cL5Color"], p["cL6Color"],
+                           p["cPubColor"], p["cMicColor"], p["cGenColor"])
+        
+		#updated by NL 09-03-2010 function changeFormat() has been moved to webqtl.js and be changed to changeFormat(graphName)
+        #Javascript that selects the correct graph export file given what the user selects 
+        #from the two drop-down menus
+
+        body += ''' <td width='10'>&nbsp;</td> 
+        <TD valign="top"><p>Right-click or control-click on the following
+        links to download this graph as a <a href="%s" class="normalsize" target="_blank">GIF file</a> or
+        a <a href="%s" class="normalsize" target="_blank">PDF file</a>.</p> ''' % (imageName, pdfName)
+        
+        body += ''' <p>Initial edge lengths were computed by applying an r-to-Z transform to the correlation coefficents
+        and then inverting the results. The graph drawing algorithm
+        found a configuration that minimizes the total stretching of the edges.</p> ''' 
+        
+        body += ''' <p>This graph took %s seconds to generate with the <a href="http://www.research.att.com/sw/tools/graphviz/" class="normalsize" target="_blank">
+        GraphViz</a> visualization toolkit from <a href="http://www.research.att.com" class="normalsize" target="_blank">AT&amp;T Research</a>.</p>''' % (round(totalTime, 2))
+        
+        #Form to export graph file as either XGMML (standardized graphing format) or a
+        #plain text file with trait names/symbols and correlations
+        
+        body += '''
+        <form name="graphExport">
+        <p>Export Graph File:</p>
+        <p><select name='exportFormat' id='exportFormat' onchange='changeFormat("%s")'>
+            <option value='plain' %s>Plain Text Format</option>
+            <option value='xgmml' %s>XGMML Format</option>
+        </select>
+        &nbsp&nbsp&nbsp&nbsp&nbsp
+        <select name='traitType' id='traitType' onchange='changeFormat("%s")'>
+            <option value='symbol' %s>Trait Symbol</option>
+            <option value='name' %s>Full Trait Name</option>
+        </select></p>
+        
+        <p>
+        <input type="button" class="button" name="exportGraphFile" value="   Export Graph File   "/>
+        </p>
+        </form> 
+        ''' % (graphName, selectedExportFormat[0], selectedExportFormat[1],
+               graphName, selectedTraitType[0], selectedTraitType[1])
+
+        body += '''</Blockquote></td>
+        </TR></TABLE> 
+        <form method="get" action="http://www.google.com/search">
+        <input type="text"   name="q" size="31" maxlength="255" value="" />
+        <input type="submit" value="Google Search" />
+        <input type="radio"  name="sitesearch" value="" /> The Web
+        <input type="radio"  name="sitesearch" value="genenetwork.org" checked /> GeneNetwork <br />
+        </form>
+        ''' 
+
+        
+        self.dict["body"] = body
+
+    def writeToFile(self, filename):
+        """
+        Output the contents of this HTML page to a file.
+        """
+        handle = open(filename, "w")
+        handle.write(str(self))
+        handle.close()