Commits

Anonymous committed 93897f9

Fixed delete confirm box and upload files now correctly reset to original state after upload.

  • Participants
  • Parent commits cd5b8d2

Comments (0)

Files changed (3)

File fileupload.php

 	$filename = substr($allfile1, strlen($username) + 11);
 	$histScript .= "<option value='$allfile1'>$filename</option>";
 }
-echo "<tr><td colspan = 8 align = \"center\"><button id=\"deleteFiles\" type=\"button\" onclick=\"Javascript: $('#idForm').ajaxSubmit({url:'delFiles.php', type:'post', target: '#delete_div'});\">Delete checked files</button>";
 echo "</table>";
 if(empty($heatmapFiles)) {
 	$heatmapScript .= "<option value='' selected='selected'>No files available</option>";
 $script .="	var scripts = new Array(\"$heatmapScript\", \"$histogramScript\", \"$lineScatScript\", \"$tileScript\");
 		var username = document.getElementById('userID').value;
 		dis = document.getElementById('user_div');
-		dis.innerHTML =  username;
+		dis.innerHTML = 'Your session ID: <a title=\"Your session ID allows you to access the files you have uploaded and the plots you have made from any computer. Just save the ID and enter it next time you visit the site\">' + username + '</a>';
 		$('#username').val(username);
 
 	$(document).ready(function() {
 			target:			'#delete_div',
 			url: 'delFiles.php',
 	};
-	/* when the user clicks the delete files button the form is submited to
-		a file which handles the server side deletions and hiding the
-		row elements that were deleted*/
-	$('#deleteFiles').click(function() {
-		$('#idForm').ajaxSubmit(deloptions);
-	});
 	/* when the user clicks the start button it hides the data upload form 
 		and displays the plot making form */
 	$('#start').click(function() {
 		var control2 = $("#file2");
 		control2.val("");
 	    control2.replaceWith( control2 = control2.clone( true ) );
+	    document.getElementById('track2row').style.display='none';
 		var control3 = $("#file3");
 		control3.val("");
 	    control3.replaceWith( control3 = control3.clone( true ) );
+	    document.getElementById('track3row').style.display='none';
 		var control4 = $("#file4");
 		control4.val("");
 	    control4.replaceWith( control4 = control4.clone( true ) );
+	    document.getElementById('track4row').style.display='none';
 		var control5 = $("#file5");
 		control5.val("");
 	    control5.replaceWith( control5 = control5.clone( true ) );
+	    document.getElementById('track5row').style.display='none';
 		var control6 = $("#file6");
 		control6.val("");
 	    control6.replaceWith( control6 = control6.clone( true ) );
+	    document.getElementById('track6row').style.display='none';
 		var control7 = $("#file7");
 		control7.val("");
 	    control7.replaceWith( control7 = control7.clone( true ) );
-	    return false; 
+	    document.getElementById('track7row').style.display='none';
+	    return false;
 	});
     var options = { 
         target:        '#circos_div',   // target element to be updated with server response 
  * the selected type of track.
  */
 function trackDownload(num) {
-	"use strict";
 	var trackType = 'trackType' + num;
-	var trackDiv = "track" + num +"_div";
+	var trackA = "track" + num +"_a";
 	var doc = document.getElementById(trackType);
 	var type = doc.options[doc.selectedIndex].value;
-	var newDownload = "<a href = \"rcircos_help.html\" onclick=\"Javascript: return popitup('rcircos_help.html#" + type + "')\">?&nbsp;</a>";
-	document.getElementById(trackDiv).innerHTML = newDownload;
+	document.getElementById(trackA).onclick = function(){ return popitup("rcircos_help.html#" + type); } ;
 }
 /* This function makes sure that the entered track height does not exceed 3
  * since the plot does not come out correctly if it does
 <![endif]-->
 <div id='delete_div'></div>
 <div align="center">
-<h1> Circos Plot Generator</h1> <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">A web interface for the RCircos r package</a><br>
-Questions? Comments? Contact peter.hansen.nih@gmail.com
-<br><a href="rcircos_workflow.html" target="_blank">Instructions</a>
-</div>
+<h1> Circos Plot Generator</h1> A web interface for <a href="http://cran.r-project.org/web/packages/RCircos/index.html" target="_blank">the RCircos r package</a><br><strong>
+<a onclick="Javascript: 	var optionsinit = {target: '#seed_div', url: 'fileupload.php',};  $('#idForm').ajaxSubmit(optionsinit);  $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">File Manager</a> | <a href="rcircos_workflow.html" target="_blank"> Help</a> | <a href="rcircos_help.html" target="_blank">File Format</a> </strong></div>
 <div id="user_div" name="user_div" align=center></div>
 <form id ="idForm" name="idForm" method="post" style="display: block" enctype="multipart/form-data">
-<table width="600" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
-  	<tr> <td></td>
-  		<td colspan='6'><strong>Step 1: Select Session.</strong> If you already have a user ID enter it and select "Upload Data".</td>
-  	</tr>
-  	<tr>
+<table width="700" align="center" cellpadding='3' cellspacing='2' style='border: 1px solid #CCCCCC;background-color:#DEEBDC; '>
+  	  	<tr>
     	<td width="1">&nbsp;</td>
     	<td width="159">&nbsp;</td>
-    	<td width="184"><button type=button id="session" onclick="Javascript: startNewSession(); var dis = document.getElementById('session'); dis.style.display = 'none';">Start New Session</button></td>
+    	<td width="184"><button type=button id="session" onclick="Javascript: startNewSession(); var dis = document.getElementById('session'); dis.style.display = 'none';">Start New Session</button>
+    	<INPUT type="Submit" Name=Submit VALUE="Submit session ID" id="mySubmit"></td>
     	<td width="131">&nbsp;</td>
     	<td width="7">&nbsp;</td>
   	</tr>
 	<tr>
 		<td>&nbsp;</td>
 		<td><div align="right">
-				<strong>User ID:</strong>
+				<strong>Your session ID:</strong>
 			</div>
 		</td>
 		<td><input name="userID" type="text" id="userID" onchange="Javascript: $('#username').val($('#userID').val());"><div id="ID"></div></td>
 		<td id="cookie"><button type='button' onclick='Javascript: saveCookie();'>Save as Cookie</button></td>
 	</tr>
- 			<tr><td>&nbsp;</td> <td></td> </tr>
-			<tr>
-				<td>&nbsp;</td>
+
+		<tr id='step2' style='display:none;'>
+		  <td nowrap='nowrap'><strong>Files Uploaded:</strong></td><td colspan=8>&nbsp;</td></tr>
+		<tr><td></td><td colspan=8><div id="seed_div"></div></td></tr>
+        			<tr><td></td>
+				<td nowrap='nowrap' align='right'><strong>Upload Files:</strong></td>
 				<td colspan=6 align="center"><input type="file" name="file1" id="file1" onchange="Javascript: dis=document.getElementById('track2row'); dis.style.display='table-row';">
 				<td>&nbsp;</td>
 			</tr>
 	 		<tr id="track2row" style="display: none">
 				<td>&nbsp;</td>
 				<td colspan=6 align="center"><input type="file" value='' name="file2" id="file2" onchange="Javascript: dis=document.getElementById('track3row'); dis.style.display='table-row';">
-				<td>&nbsp;</td>
+				<td align="left"><INPUT type="Submit" Name=Submit VALUE="Upload" id="mySubmit"></td>
 			</tr>	
 	 	 	<tr id="track3row" style="display:none">
 				<td>&nbsp;</td>
 				<td>&nbsp;</td>
 			</tr>
 			<tr>
-		<td colspan=6 align=center><INPUT type="Submit" Name=Submit VALUE="Upload data" id="mySubmit"></td></tr>
-		<tr id='step2' style='display:none;'><td></td><td colspan=8><strong>Step 2: Manage Files.</strong> Only checked files will be used by the program.</td></tr>
-		<tr><td></td><td colspan=8><div id="seed_div"></div></td></tr>
-		<tr id='step3' style='display:none;'><td></td><td colspan=8><strong>Step 3: Customize.</strong></td></tr>
-		<tr> <td colspan=6 align=center>
-		<button type='button' id='start' style="display: none">Start</button>
+		<td colspan=6 align=center></td></tr>
+		<tr id='step3' style='display:none;'>
+		  <td><strong>Selected Files:</strong></td><td colspan=8>&nbsp;</td></tr>
+		<tr> <td colspan=8 align=center>
+		<button type='button' id='start' style="display: none">Go RCircos</button><button id="deleteFiles" type="button" onclick="Javascript: var answer = confirm('Are you sure you want to delete the selected files?'); if(answer){ $('#idForm').ajaxSubmit({url:'delFiles.php', type:'post', target: '#delete_div'});} return false;">Delete</button>
   	</td>
 	</tr>
 </table>
     <td width="80">&nbsp;</td>
     <td width="7">&nbsp;</td>
   </tr>
-  <tr><td colspan=8 align="center"><button type="button" onclick="Javascript: 	var optionsinit = {target: '#seed_div', url: 'fileupload.php',};  $('#idForm').ajaxSubmit(optionsinit);  $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">Upload More Files</button></td></tr>
+  <tr><td colspan=8 align="center"></td></tr>
  <!-- 
  Species data input
   -->
 						<option value="Mouse">Mouse (mm9)</option>
 						<option value="Rat">Rat (rn4)</option>
 				</select></td>
-				<td><a href="rcircos_help.html" target="_blank">How to format your data</a> </td>
-				<td><button type="button" onclick="Javascript:document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />'; window.setTimeout(function() { document.getElementById('circos_div').innerHTML = '<img src=\'images/example.png\' height=\'800\' width=\'800\' />'}, 15000);">Run Demo</button></td>
+				<td></td>
+				<td></td>
 				<td>&nbsp;</td>
 				<td>&nbsp;</td>
 				</tr>
 						<option value="Scatter">Scatter Plot</option>
 						<option value="Tile">Tile Plot</option>
 				</select>
-				<div id="track1_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Heatmap')">?&nbsp;&nbsp;</a></div></td>
+				<a id='track1_a' href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Heatmap')"> ? </a></td>
 				<td name="ph1">placeholder
 				</td>
 				<td align="center"></td>
 				<td><div align="right">
 						<strong>Track 2:</strong>
 					</div></td>
-				<td><select name='trackType2' id='trackType2' onchange="Javascript: trackDownload('2'); connectPlotType('2');">
+				<td nowrap="nowrap"><select name='trackType2' id='trackType2' onchange="Javascript: trackDownload('2'); connectPlotType('2');">
 						<option value="NONE" >No track</option>
 						<option value="Heatmap">Heatmap</option>
 						<option value="Histogram" selected='selected'>Histogram</option>
 						<option value="Scatter">Scatter Plot</option>
 						<option value="Tile">Tile Plot</option>
 				</select>
-				&nbsp; <div id="track2_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Histogram')">?&nbsp;&nbsp;</a></div>
+				<a id='track2_a' href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Histogram')">?</a>
 				</td>
 				
 				<td name="ph2">placeholder</td>
 				<td><div align="right">
 						<strong>Track 3:</strong>
 					</div></td>
-				<td><select name='trackType3' id='trackType3' onchange = "Javascript: trackDownload('3'); connectPlotType('3');">
+				<td nowrap="nowrap"><select name='trackType3' id='trackType3' onchange = "Javascript: trackDownload('3'); connectPlotType('3');">
 						<option value="NONE" >No track</option>
 						<option value="Heatmap">Heatmap</option>
 						<option value="Histogram">Histogram</option>
 						<option value="Scatter">Scatter Plot</option>
 						<option value="Tile">Tile Plot</option>
 				</select>
-				<div id="track3_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Line')">?&nbsp;&nbsp;</a></div>
+				<a id='track3_a' href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Line')">?</a>
 				</td>
 				<td name="ph3">placeholder</td>
 				<td>&nbsp;</td>
 				<td><div align="right">
 						<strong>Track 4:</strong>
 					</div></td>
-				<td><select name='trackType4' id='trackType4' onchange="Javascript: trackDownload('4'); connectPlotType('4');">
+				<td nowrap="nowrap"><select name='trackType4' id='trackType4' onchange="Javascript: trackDownload('4'); connectPlotType('4');">
 						<option value="NONE" >No track</option>
 						<option value="Heatmap">Heatmap</option>
 						<option value="Histogram">Histogram</option>
 						<option value="Scatter" selected ='selected'>Scatter Plot</option>
 						<option value="Tile">Tile Plot</option>
 				</select>
-				<div id="track4_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Scatter')">?&nbsp;&nbsp;</a></div>
+				<a id='track4_a' href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Scatter')">?</a>
 				</td>
 				<td name="ph4">placeholder</td>
 				<td>&nbsp;</td>
 				<td><div align="right">
 						<strong>Track 5:</strong>
 					</div></td>
-				<td><select name='trackType5' id='trackType5' onchange="Javascript: trackDownload('5'); connectPlotType('5');">
+				<td nowrap="nowrap"><select name='trackType5' id='trackType5' onchange="Javascript: trackDownload('5'); connectPlotType('5');">
 						<option value="NONE" >No track</option>
 						<option value="Heatmap" >Heatmap</option>
 						<option value="Histogram">Histogram</option>
 						<option value="Scatter">Scatter Plot</option>
 						<option value="Tile" selected ='selected'>Tile Plot</option>
 				</select>
-				<div id="track5_div"><a href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Tile')">?&nbsp;&nbsp;</a></div>
+				<a id='track5_a' href = "rcircos_help.html" onclick="Javascript: return popitup('rcircos_help.html#Tile')">?</a>
 				</td>
 				<td name="ph5">placeholder</td>
 				<td>&nbsp;</td>
 				<td>&nbsp;</td>
 			</tr>
 			<tr> <td colspan="6" align="center">
-			<INPUT type="Submit" Name=Submit VALUE="Start" id="mySubmit">
-          <input type="reset" value="Reset" onclick="Javascript: speciesReset()"/>        </td>
+			<INPUT type="Submit" Name=Submit VALUE="Plot Data" id="mySubmit">
+          <input type="reset" value="Reset" onclick="Javascript: speciesReset()"/>  <a onclick="Javascript:document.getElementById('circos_div').innerHTML = '<img src=\'images/spinner2-greenie.gif\'   style=\'position:relative; left:0px;\' height=\'30\' width=\'30\' />'; window.setTimeout(function() { document.getElementById('circos_div').innerHTML = '<img src=\'images/example.png\' height=\'800\' width=\'800\' />'}, 15000);">Run Demo</a>  | 
+          
+          <a onclick="Javascript: 	var optionsinit = {target: '#seed_div', url: 'fileupload.php',};  $('#idForm').ajaxSubmit(optionsinit);  $('#idForm').css('display', 'inline'); $('#circosForm').css('display', 'none');">Upload Files</a> 
+          
+              </td>
     </tr>
 		</table>
 
 </form>
 <div id='circos_div' align='center'></div>
 <div id='stop_div'><a style="display:none">huehuehue</a></div>
+
+<div align="center">
+Questions? Comments? Contact peter.hansen.nih@gmail.com
+</div>
 </body>
 </html>

File rcircos_action.php

 FileTypes <- c("$track1FileType", "$track2FileType", "$track3FileType", "$track4FileType", "$track5FileType");
 out.file <- "temp/$username/hist/$fileName.$fileType";
 if('$fileType' == 'pdf') {
-	pdf(file = out.file, width=$width, height=$width, compress=TRUE);
+	pdf(file = out.file, width=$width, height=$width);
 } else {
 	$fileType(filename = out.file, width=$width, height=$width, units="in", res=300, 	type="cairo");
 }