Modified biojs exporter/importer to preserve SequenceFeatures during a write/read...
[jalview.git] / examples / example_biojs.html
index 1d602d6..5b0d71e 100644 (file)
@@ -1,117 +1,4 @@
 <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="menuDiv"></div>
-<div id="yourDiv">press "Run with JS"</div>
-<input type='hidden' id='seqData' name='seqData' value='[{"id":"1","name":"FER_CAPAA/1-97","seq":"----------------------------------------------------------ASYKVKLITPDGPIEFDCPDDVYILDQAEEAGHDLPYSCRAGSCSSCAGKIAGGAVDQTDGNFLDDDQLEEGWVLTCVAYPQSDVTIETHKEAELVG-"},{"id":"2","name":"FER_CAPAN/1-144","seq":"------MASVSATMISTSFMPRKPAVTSLKPIP-NVG-EALFGLKS---ANGGKVTCMASYKVKLITPDGPIEFDCPDNVYILDQAEEAGHDLPYSCRAGSCSSCAGKIAGGAVDQTDGNFLDDDQLEEGWVLTCVAYPQSDVTIETHKEAELVG-"},{"id":"3","name":"FER1_SOLLC/1-144","seq":"------MASISGTMISTSFLPRKPAVTSLKAIS-NVG-EALFGLKS---GRNGRITCMASYKVKLITPEGPIEFECPDDVYILDQAEEEGHDLPYSCRAGSCSSCAGKVTAGSVDQSDGNFLDEDQEAAGFVLTCVAYPKGDVTIETHKEEELTA-"},{"id":"4","name":"Q93XJ9_SOLTU/1-144","seq":"------MASISGTMISTSFLPRKPVVTSLKAIS-NVG-EALFGLKS---GRNGRITCMASYKVKLITPDGPIEFECPDDVYILDQAEEEGHDLPYSCRAGSCSSCAGKVTAGTVDQSDGKFLDDDQEAAGFVLTCVAYPKCDVTIETHKEEELTA-"},{"id":"5","name":"FER1_PEA/1-149","seq":"---MATTPALYGTAVSTSFLRTQPMPMSVTTTKAFSN--GFLGLKT-SLKRGDLAVAMASYKVKLVTPDGTQEFECPSDVYILDHAEEVGIDLPYSCRAGSCSSCAGKVVGGEVDQSDGSFLDDEQIEAGFVLTCVAYPTSDVVIETHKEEDLTA-"},{"id":"6","name":"Q7XA98_TRIPR/1-152","seq":"---MATTPALYGTAVSTSFMRRQPVPMSVATTTTTKAFPSGFGLKSVSTKRGDLAVAMATYKVKLITPEGPQEFDCPDDVYILDHAEEVGIELPYSCRAGSCSSCAGKVVNGNVNQEDGSFLDDEQIEGGWVLTCVAFPTSDVTIETHKEEELTA-"},{"id":"7","name":"FER1_MESCR/1-148","seq":"--MAATTAALSGATMSTAFAPKT--PPMTAALPTNVG-RALFGLKS--SASRGRVTAMAAYKVTLVTPEGKQELECPDDVYILDAAEEAGIDLPYSCRAGSCSSCAGKVTSGSVNQDDGSFLDDDQIKEGWVLTCVAYPTGDVTIETHKEEELTA-"},{"id":"8","name":"FER1_SPIOL/1-147","seq":"----MAATTTTMMGMATTFVPKPQAPPMMAALPSNTG-RSLFGLKT--GSRGGRMT-MAAYKVTLVTPTGNVEFQCPDDVYILDAAEEEGIDLPYSCRAGSCSSCAGKLKTGSLNQDDQSFLDDDQIDEGWVLTCAAYPVSDVTIETHKEEELTA-"},{"id":"9","name":"FER3_RAPSA/1-96","seq":"----------------------------------------------------------ATYKVKFITPEGEQEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSFLDDDQIAEGFVLTCAAYPTSDVTIETHREEDMV--"},{"id":"10","name":"FER1_ARATH/1-148","seq":"----MASTALSSAIVGTSFIRRSPAPISLRSLPSANT-QSLFGLKS-GTARGGRVTAMATYKVKFITPEGELEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSFLDDEQIGEGFVLTCAAYPTSDVTIETHKEEDIV--"},{"id":"11","name":"FER_BRANA/1-96","seq":"----------------------------------------------------------ATYKVKFITPEGEQEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGFVDQSDESFLDDDQIAEGFVLTCAAYPTSDVTIETHKEEELV--"},{"id":"12","name":"FER2_ARATH/1-148","seq":"----MASTALSSAIVSTSFLRRQQTPISLRSLPFANT-QSLFGLKS-STARGGRVTAMATYKVKFITPEGEQEVECEEDVYVLDAAEEAGLDLPYSCRAGSCSSCAGKVVSGSIDQSDQSFLDDEQMSEGYVLTCVAYPTSDVVIETHKEEAIM--"},{"id":"13","name":"Q93Z60_ARATH/1-118","seq":"----MASTALSSAIVSTSFLRRQQTPISLRSLPFANT-QSLFGLKS-STARGGRVTAMATYKVKFITPEGEQEVECEEDVYVLDAAEEAGLDLPYSCRAGSCSSCAGKVVSGSIDQSDQSFLDD--------------------------------"},{"id":"14","name":"FER1_MAIZE/1-150","seq":"MATVLGSPRAPAFFFSSSSLRAAPAPTAVALPAAKVG---IMGRSA---SSRRRLRAQATYNVKLITPEGEVELQVPDDVYILDQAEEDGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSYLDDGQIADGWVLTCHAYPTSDVVIETHKEEELTGA"},{"id":"15","name":"O80429_MAIZE/1-140","seq":"---------MAATALSMSILRAPP-PCFSSPLRLRVAVAKPLAAPM----RRQLLRAQATYNVKLITPEGEVELQVPDDVYILDFAEEEGIDLPFSCRAGSCSSCAGKVVSGSVDQSDQSFLNDNQVADGWVLTCAAYPTSDVVIETHKEDDLL--"}]'/>
-</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="file:/Users/tcnofoegbu/Documents/workspace/java/dev/jalview/classes/images/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>
 
 <button onclick="javascipt:openJalviewUsingCurrentUrl();">Launch in Jalview</button>
+<input type="button" name="divToggleButton" id="divToggleButton" onclick="javascipt:toggleMenuVisibility();" value="Show Menu"></input>
+
+</br>
+</br> 
+  
+<div id="yourDiv">press "Run with JS"</div>
+<input type='hidden' id='seqData' name='seqData' value='{"globalColorScheme":"zappo","seqs":[{"id":"1","start":1,"name":"FER_CAPAA/1-97","seq":"----------------------------------------------------------ASYKVKLITPDGPIEFDCPDDVYILDQAEEAGHDLPYSCRAGSCSSCAGKIAGGAVDQTDGNFLDDDQLEEGWVLTCVAYPQSDVTIETHKEAELVG-","features":[],"end":97},{"id":"2","start":1,"name":"FER_CAPAN/1-144","seq":"------MASVSATMISTSFMPRKPAVTSLKPIP-NVG-EALFGLKS---ANGGKVTCMASYKVKLITPDGPIEFDCPDNVYILDQAEEAGHDLPYSCRAGSCSSCAGKIAGGAVDQTDGNFLDDDQLEEGWVLTCVAYPQSDVTIETHKEAELVG-","features":[{"xEnd":22,"text":"feature_1","fillColor":"#8c25cd","xStart":2}],"end":144},{"id":"3","start":1,"name":"FER1_SOLLC/1-144","seq":"------MASISGTMISTSFLPRKPAVTSLKAIS-NVG-EALFGLKS---GRNGRITCMASYKVKLITPEGPIEFECPDDVYILDQAEEEGHDLPYSCRAGSCSSCAGKVTAGSVDQSDGNFLDEDQEAAGFVLTCVAYPKGDVTIETHKEEELTA-","features":[],"end":144},{"id":"4","start":1,"name":"Q93XJ9_SOLTU/1-144","seq":"------MASISGTMISTSFLPRKPVVTSLKAIS-NVG-EALFGLKS---GRNGRITCMASYKVKLITPDGPIEFECPDDVYILDQAEEEGHDLPYSCRAGSCSSCAGKVTAGTVDQSDGKFLDDDQEAAGFVLTCVAYPKCDVTIETHKEEELTA-","features":[],"end":144},{"id":"5","start":1,"name":"FER1_PEA/1-149","seq":"---MATTPALYGTAVSTSFLRTQPMPMSVTTTKAFSN--GFLGLKT-SLKRGDLAVAMASYKVKLVTPDGTQEFECPSDVYILDHAEEVGIDLPYSCRAGSCSSCAGKVVGGEVDQSDGSFLDDEQIEAGFVLTCVAYPTSDVVIETHKEEDLTA-","features":[],"end":149},{"id":"6","start":1,"name":"Q7XA98_TRIPR/1-152","seq":"---MATTPALYGTAVSTSFMRRQPVPMSVATTTTTKAFPSGFGLKSVSTKRGDLAVAMATYKVKLITPEGPQEFDCPDDVYILDHAEEVGIELPYSCRAGSCSSCAGKVVNGNVNQEDGSFLDDEQIEGGWVLTCVAFPTSDVTIETHKEEELTA-","features":[],"end":152},{"id":"7","start":1,"name":"FER1_MESCR/1-148","seq":"--MAATTAALSGATMSTAFAPKT--PPMTAALPTNVG-RALFGLKS--SASRGRVTAMAAYKVTLVTPEGKQELECPDDVYILDAAEEAGIDLPYSCRAGSCSSCAGKVTSGSVNQDDGSFLDDDQIKEGWVLTCVAYPTGDVTIETHKEEELTA-","features":[],"end":148},{"id":"8","start":1,"name":"FER1_SPIOL/1-147","seq":"----MAATTTTMMGMATTFVPKPQAPPMMAALPSNTG-RSLFGLKT--GSRGGRMT-MAAYKVTLVTPTGNVEFQCPDDVYILDAAEEEGIDLPYSCRAGSCSSCAGKLKTGSLNQDDQSFLDDDQIDEGWVLTCAAYPVSDVTIETHKEEELTA-","features":[],"end":147},{"id":"9","start":1,"name":"FER3_RAPSA/1-96","seq":"----------------------------------------------------------ATYKVKFITPEGEQEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSFLDDDQIAEGFVLTCAAYPTSDVTIETHREEDMV--","features":[],"end":96},{"id":"10","start":1,"name":"FER1_ARATH/1-148","seq":"----MASTALSSAIVGTSFIRRSPAPISLRSLPSANT-QSLFGLKS-GTARGGRVTAMATYKVKFITPEGELEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSFLDDEQIGEGFVLTCAAYPTSDVTIETHKEEDIV--","features":[],"end":148},{"id":"11","start":1,"name":"FER_BRANA/1-96","seq":"----------------------------------------------------------ATYKVKFITPEGEQEVECDDDVYVLDAAEEAGIDLPYSCRAGSCSSCAGKVVSGFVDQSDESFLDDDQIAEGFVLTCAAYPTSDVTIETHKEEELV--","features":[],"end":96},{"id":"12","start":1,"name":"FER2_ARATH/1-148","seq":"----MASTALSSAIVSTSFLRRQQTPISLRSLPFANT-QSLFGLKS-STARGGRVTAMATYKVKFITPEGEQEVECEEDVYVLDAAEEAGLDLPYSCRAGSCSSCAGKVVSGSIDQSDQSFLDDEQMSEGYVLTCVAYPTSDVVIETHKEEAIM--","features":[],"end":148},{"id":"13","start":1,"name":"Q93Z60_ARATH/1-118","seq":"----MASTALSSAIVSTSFLRRQQTPISLRSLPFANT-QSLFGLKS-STARGGRVTAMATYKVKFITPEGEQEVECEEDVYVLDAAEEAGLDLPYSCRAGSCSSCAGKVVSGSIDQSDQSFLDD--------------------------------","features":[],"end":118},{"id":"14","start":1,"name":"FER1_MAIZE/1-150","seq":"MATVLGSPRAPAFFFSSSSLRAAPAPTAVALPAAKVG---IMGRSA---SSRRRLRAQATYNVKLITPEGEVELQVPDDVYILDQAEEDGIDLPYSCRAGSCSSCAGKVVSGSVDQSDQSYLDDGQIADGWVLTCHAYPTSDVVIETHKEEELTGA","features":[],"end":150},{"id":"15","start":1,"name":"O80429_MAIZE/1-140","seq":"---------MAATALSMSILRAPP-PCFSSPLRLRVAVAKPLAAPM----RRQLLRAQATYNVKLITPEGEVELQVPDDVYILDFAEEEGIDLPFSCRAGSCSSCAGKVVSGSVDQSDQSFLNDNQVADGWVLTCAAYPTSDVVIETHKEDDLL--","features":[],"end":140}]}'/>
 
 </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 Menu";
+       }else{
+          menu[0].style.display = 'block'; 
+          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 myForm = document.createElement("form");
@@ -9082,16 +9017,16 @@ function Nets(uri, opts, cb) {
 
 // this is a way how you use a bundled file parser
 biojs.io.clustal.read("#", function(seqs){
-
 var opts = {};
 
 // 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};
+opts.vis = {conserv: false, overviewbox: false, labelId: false};
 opts.zoomer = {alignmentHeight: 225, labelWidth: 130,labelFontsize: "13px",labelIdLength: 20,   menuFontsize: "12px",menuMarginLeft: "3px", menuPadding: "3px 4px 3px 4px", menuItemFontsize: "14px", menuItemLineHeight: "14px"};
 
 
@@ -9099,7 +9034,13 @@ opts.zoomer = {alignmentHeight: 225, labelWidth: 130,labelFontsize: "13px",label
 // init msa
 var m = new msa.msa(opts);
 
-m.g.colorscheme.set("scheme", "zappo");
+m.g.colorscheme.set("scheme", jalviewData['globalColorScheme']);
+
+var x = 0;
+jalviewData.seqs.forEach( function (seq)
+{
+m.seqs.at(x++).set("features", new msa.model.featurecol(seq.features));
+});
 
 // the menu is independent to the MSA container
 var menuOpts = {};
@@ -9110,6 +9051,8 @@ m.addView("menu", defMenu);
 
 // call render at the end to display the whole MSA
 m.render();
-  
+toggleMenuVisibility(); 
+toggleMenuVisibility(); 
 });
 </script>