<html>
-<head>
-<style>
-.biojs_msa_stage {
- cursor: default;
- line-height: normal; }
-
-.biojs_msa_labels {
- color: black;
- display: inline-block;
- white-space: nowrap;
- cursor: pointer;
- vertical-align: top; }
-
-.biojs_msa_seqblock {
- cursor: move; }
-
-.biojs_msa_layer {
- display: block;
- white-space: nowrap; }
-
-.biojs_msa_labelblock::-webkit-scrollbar, .biojs_msa_header::-webkit-scrollbar {
- -webkit-appearance: none;
- width: 7px;
- height: 7px; }
-
-.biojs_msa_labelblock::-webkit-scrollbar-thumb, .biojs_msa_header::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: rgba(0, 0, 0, 0.5);
- box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
-
-.biojs_msa_marker {
- color: grey;
- white-space: nowrap;
- cursor: pointer; }
-
-.biojs_msa_marker span {
- text-align: center; }
-
-.biojs_msa_menubar .biojs_msa_menubar_alink {
- background: #3498db;
- background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
- background-image: -moz-linear-gradient(top, #3498db, #2980b9);
- background-image: -ms-linear-gradient(top, #3498db, #2980b9);
- background-image: -o-linear-gradient(top, #3498db, #2980b9);
- background-image: linear-gradient(to bottom, #3498db, #2980b9);
- -webkit-border-radius: 28;
- -moz-border-radius: 28;
- border-radius: 28px;
- font-family: Arial;
- color: #ffffff;
- padding: 3px 10px 3px 10px;
- margin-left: 10px;
- text-decoration: none; }
-
-.biojs_msa_menubar .biojs_msa_menubar_alink:hover {
- cursor: pointer; }
-
-/* jquery dropdown CSS */
-.dropdown {
- position: absolute;
- z-index: 9999999;
- display: none; }
-
-.dropdown .dropdown-menu,
-.dropdown .dropdown-panel {
- min-width: 160px;
- max-width: 360px;
- list-style: none;
- background: #FFF;
- border: solid 1px #DDD;
- border: solid 1px rgba(0, 0, 0, 0.2);
- border-radius: 6px;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- overflow: visible;
- padding: 4px 0;
- margin: 0; }
-
-.dropdown .dropdown-panel {
- padding: 10px; }
-
-.dropdown.dropdown-scroll .dropdown-menu,
-.dropdown.dropdown-scroll .dropdown-panel {
- max-height: 358px;
- overflow: auto; }
-
-.dropdown .dropdown-menu LI {
- list-style: none;
- padding: 0 0;
- margin: 0;
- line-height: 18px; }
-
-.dropdown .dropdown-menu LI,
-.dropdown .dropdown-menu LABEL {
- display: block;
- color: #555;
- text-decoration: none;
- line-height: 18px;
- padding: 3px 15px;
- white-space: nowrap; }
-
-.dropdown .dropdown-menu LI:hover,
-.dropdown .dropdown-menu LABEL:hover {
- background-color: #08C;
- color: #FFF;
- cursor: pointer; }
-
-.dropdown .dropdown-menu .dropdown-divider {
- font-size: 1px;
- border-top: solid 1px #E5E5E5;
- padding: 0;
- margin: 5px 0; }
-</style>
-</head>
<header><title>BioJS viewer</title></header>
<body>
<!-- include MSA js + css -->
<!-- <script src="https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.js"></script> -->
<!-- <link type=text/css rel=stylesheet href=https://s3-eu-west-1.amazonaws.com/biojs/msa/latest/msa.css /> -->
-
-
-<div id="yourDiv">press "Run with JS"</div>
-<input type='hidden' id='seqData' name='seqData' value='#sequenceData#'/>
-</br>
-</br>
-<div> This html page was generated from Jalview, to import the data back to Jalview, please drag the generated html file and drop it unto the Jalview workbench.<div>
-</br>
-<div> Alternatively, you could copy the url from the address bar and use Jalview's url importer (main menu-> File-> Input Alignment-> from URL) to import back the alignment jalview.
+
+ <img src="http://www.jalview.org/help/html/Jalview_Logo.png" alt="Jalview Logo" title="This html page was generated from Jalview, to import the data back to Jalview, please drag the generated html file and drop it unto the Jalview workbench.
+
+ Alternatively, you could copy the url from the address bar and use Jalview's url importer (main menu-> File-> Input Alignment-> from URL) to import back the alignment jalview." >
+
</br>
</br>
+<input type="button" name="divToggleButton" id="divToggleButton" onclick="javascipt:toggleMenuVisibility();" value="Show Menu"></input>
<button onclick="javascipt:openJalviewUsingCurrentUrl();">Launch in Jalview</button>
-<input type="button" name="divToggleButton" id="divToggleButton" onclick="javascipt:toggleMenuVisibility();" value="Show BioJs Menu"></input>
+
+</br>
+</br>
+
+<div id="yourDiv">press "Run with JS"</div>
+<input type='hidden' id='seqData' name='seqData' value='#sequenceData#'/>
</body>
</html>
<script>
function toggleMenuVisibility(){
- //alert("toggleMenuVisibility called!");
-
var menu = document.getElementsByClassName("biojs_msa_menubar");
var divToggleButton = document.getElementById("divToggleButton");
if(menu[0].style.display == 'block'){
menu[0].style.display = 'none';
- divToggleButton.value="Show BioJs Menu";
+ divToggleButton.value="Show Menu";
}else{
menu[0].style.display = 'block';
- divToggleButton.value="Hide BioJs Menu";
+ divToggleButton.value="Hide Menu";
}
}
-function openJalviewUsingCurrentUrl2(){
-var jnpl = "<!--"+
-"Hi!"+
-"If you have downloaded this file after pressing \"Launch Full Application\" from Jalview on a web page and you don't know what to do with this file, you must install Java from http://www.java.sun.com then try opening this file again."+
-" \n"+
-" JNLP generated by /jalviewServlet/services/launchAppDev"+
-" JNLP generated from http://www.jalview.org/builds/develop/webstart/jalview.jnlp"+
-"Available servlet parameters (please URLEncode):"+
-" open=<alignment file URL>"+
-" jvm-max-heap=heap size in M or G"+
-" features maps to '-features'"+
-" treeFile maps to '-tree'"+
-" tree maps to '-tree'"+
-" annotations maps to '-annotations'"+
-" colour maps to '-colour'"+
-" "+
-"-->"+
-"<?xml version=\"1.0\" encoding=\"UTF-8\"?><jnlp spec=\"1.0+\" codebase=\"http://www.jalview.org/builds/develop/webstart\"> <information> <title>Jalview</title> <vendor>The Barton Group</vendor> <homepage href=\"http://www.jalview.org\"/> <description>Jalview Multiple Alignment Editor</description> <description kind=\"short\">Jalview</description> <icon href=\"JalviewLogo_big.png\"/> <offline-allowed/> </information> <security> <all-permissions/> </security> <resources> <j2se version=\"1.7+\" initial-heap-size=\"10M\" max-heap-size=\"2G\"/> <jar href=\"jalview.jar\"/> <jar href=\"JGoogleAnalytics_0.3.jar\"/> <jar href=\"Jmol-12.2.4.jar\"/> <jar href=\"VARNAv3-91.jar\"/> <jar href=\"activation.jar\"/> <jar href=\"apache-mime4j-0.6.jar\"/> <jar href=\"axis.jar\"/> <jar href=\"castor-1.1-cycle-xml.jar\"/> <jar href=\"commons-codec-1.3.jar\"/> <jar href=\"commons-discovery.jar\"/> <jar href=\"commons-logging-1.1.1.jar\"/> <jar href=\"groovy-all-1.8.2.jar\"/> <jar href=\"httpclient-4.0.3.jar\"/> <jar href=\"httpcore-4.0.1.jar\"/> <jar href=\"httpmime-4.0.3.jar\"/> <jar href=\"jalview_jnlp_vm.jar\"/> <jar href=\"jaxrpc.jar\"/> <jar href=\"jdas-1.0.4.jar\"/> <jar href=\"jhall.jar\"/> <jar href=\"json_simple-1.1.jar\"/> <jar href=\"jsoup-1.8.1.jar\"/> <jar href=\"jswingreader-0.3.jar\"/> <jar href=\"log4j-to-slf4j-2.0-rc2.jar\"/> <jar href=\"mail.jar\"/> <jar href=\"miglayout-4.0-swing.jar\"/> <jar href=\"min-jabaws-client-2.1.0.jar\"/> <jar href=\"regex.jar\"/> <jar href=\"saaj.jar\"/> <jar href=\"slf4j-api-1.7.7.jar\"/> <jar href=\"slf4j-log4j12-1.7.7.jar\"/> <jar href=\"spring-core-3.0.5.RELEASE.jar\"/> <jar href=\"spring-web-3.0.5.RELEASE.jar\"/> <jar href=\"vamsas-client.jar\"/> <jar href=\"wsdl4j.jar\"/> <jar href=\"xercesImpl.jar\"/> <jar href=\"xml-apis.jar\"/> <property name=\"jalview.version\" value=\"Development Branch Build\"/> </resources>"+
-"<application-desc main-class=\"jalview.bin.Jalview\">"+
-"<argument>-open</argument>"+
-"<argument>file:///Users/tcnofoegbu/Documents/workspace/java/dev/jalview/examples/example_biojs.html</argument>"+
-"</application-desc>"+
-" <security>"+
-" <all-permissions/>"+
-" </security>"+
-"</jnlp>"
-
-var encodedUri = encodeURI(jnpl);
-window.open(encodedUri)
-//alert(jnpl)
-}
+
function openJalviewUsingCurrentUrl(){
- var url = "http://webservices.compbio.dundee.ac.uk:38080/jalviewServlet/services/launchAppDev";
+ var json = JSON.parse(document.getElementById("seqData").value)
+ var jalviewVersion = json['jalviewSettings'].jalviewVersion;
+ var url = json['jalviewSettings'].webStartUrl;
var myForm = document.createElement("form");
myForm.action = url;
- var myInput = document.createElement("input") ;
- myInput.setAttribute("name", "jvm-max-heap") ;
- myInput.setAttribute("value", "2G");
- myForm.appendChild(myInput) ;
+ var heap = document.createElement("input") ;
+ heap.setAttribute("name", "jvm-max-heap") ;
+ heap.setAttribute("value", "2G");
+ myForm.appendChild(heap) ;
+
+ var target = document.createElement("input") ;
+ target.setAttribute("name", "open") ;
+ target.setAttribute("value", document.URL);
+ myForm.appendChild(target) ;
- var myInput1 = document.createElement("input") ;
- myInput1.setAttribute("name", "open") ;
- myInput1.setAttribute("value", document.URL);
- myForm.appendChild(myInput1) ;
+ var jvVersion = document.createElement("input") ;
+ jvVersion.setAttribute("name", "version") ;
+ jvVersion.setAttribute("value", jalviewVersion);
+ myForm.appendChild(jvVersion) ;
document.body.appendChild(myForm) ;
// set your custom properties
// @see: https://github.com/greenify/biojs-vis-msa/tree/master/src/g
-opts.seqs = JSON.parse(document.getElementById("seqData").value);
+var jalviewData = JSON.parse(document.getElementById("seqData").value);
+opts.seqs = jalviewData['seqs'];
opts.el = document.getElementById("yourDiv");
opts.vis = {conserv: false, overviewbox: false, labelId: false};
// init msa
var m = new msa.msa(opts);
-m.g.colorscheme.set("scheme", "#scheme#");
+m.g.colorscheme.set("scheme", jalviewData['jalviewSettings'].globalColorScheme);
+
+var x = 0;
+//jalviewData.seqs.forEach( function (seq)
+//{
+//m.seqs.at(x++).set("features", new msa.model.featurecol(seq.features));
+//});
+
+//console.debug(">>>>>>>>>>>>>" + m.seqs.length);
+//console.debug(">>>>>>>>>>>>> Found features : " + jalviewData.seqFeatures.length);
+m.seqs.forEach( function (seq )
+{
+ var seqFeats = [];
+ for (i = 0; i < jalviewData.seqFeatures.length; i++) {
+ console.debug('comparing >>>>>>>> '+ seq.id)
+ if(jalviewData.seqFeatures[i].sequenceRef === seq.id){
+ // console.debug('>>>>>>>> '+jalviewData.seqFeatures[i].sequenceRef+' | '+ seq.id)
+ seqFeats.push(jalviewData.seqFeatures[i]);
+ }
+ }
+console.debug('matched features count : '+seqFeats.length);
+seq.set("features", new msa.model.featurecol(seqFeats));
+});
// the menu is independent to the MSA container
var menuOpts = {};
// call render at the end to display the whole MSA
m.render();
-
toggleMenuVisibility();
toggleMenuVisibility();
});