<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");
// 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"};
// 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 = {};
// call render at the end to display the whole MSA
m.render();
-
+
+toggleMenuVisibility();
+toggleMenuVisibility();
});
</script>
<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="#jalview_logo#" 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 BioJs Menu"></input>
+<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='#sequenceData#'/>
</body>
</html>
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(){
// 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['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 = {};
package jalview.io;
import jalview.datamodel.AlignmentI;
+import jalview.datamodel.SequenceFeature;
import jalview.datamodel.SequenceI;
import jalview.gui.AlignViewport;
import jalview.gui.AlignmentPanel;
import jalview.gui.FeatureRenderer;
import jalview.gui.SequenceRenderer;
import jalview.json.binding.v1.BioJsAlignmentPojo;
+import jalview.json.binding.v1.BioJsFeaturePojo;
import jalview.json.binding.v1.BioJsSeqPojo;
+import jalview.schemes.ColourSchemeProperty;
import jalview.util.MessageManager;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.URL;
+import java.util.ArrayList;
import com.json.JSONException;
this.av = ap.av;
this.fr = new FeatureRenderer(ap);
fr.transferSettings(fr1);
+
exportAsBioJsHtml();
}
throws IOException, JSONException
{
BioJsAlignmentPojo bjsAlignment = new BioJsAlignmentPojo();
+ bjsAlignment.setGlobalColorScheme(ColourSchemeProperty.getColourName(av
+ .getGlobalColourScheme()));
+
+ // av.setGlobalColourScheme(cs);
int count = 0;
for (SequenceI seq : alignment.getSequences())
{
StringBuilder name = new StringBuilder();
name.append(seq.getName()).append("/").append(seq.getStart())
.append("-").append(seq.getEnd());
- bjsAlignment.getSeqs().add(
- new BioJsSeqPojo(String.valueOf(++count), name.toString(),
- seq.getSequenceAsString()));
+ // BioJsSeqPojo seqPojo = new BioJsSeqPojo(seq.getStart(), seq.getEnd(),
+ // String.valueOf(++count),
+ // name.toString(), seq.getSequenceAsString());
+ //
+ BioJsSeqPojo seqPojo = new BioJsSeqPojo();
+ seqPojo.setId(String.valueOf(++count));
+ seqPojo.setEnd(seq.getEnd());
+ seqPojo.setStart(seq.getStart());
+ seqPojo.setName(name.toString());
+ seqPojo.setSeq(seq.getSequenceAsString());
+
+ SequenceFeature[] seqFeatures = seq.getDatasetSequence()
+ .getSequenceFeatures();
+ if (seqFeatures != null)
+ {
+
+ ArrayList<BioJsFeaturePojo> bjsSeqFeatures = new ArrayList<BioJsFeaturePojo>();
+ for (SequenceFeature sf : seqFeatures)
+ {
+
+ String featureColour = jalview.util.Format.getHexString(fr
+ .getColour(sf));
+ BioJsFeaturePojo bjsFeature = new BioJsFeaturePojo();
+ bjsFeature.setFillColor(featureColour);
+ bjsFeature.setXstart(sf.getBegin());
+ bjsFeature.setXend(sf.getEnd());
+ bjsFeature.setText(sf.getType());
+
+ bjsSeqFeatures.add(bjsFeature);
+
+ }
+
+ seqPojo.setFeatures(bjsSeqFeatures);
+ }
+ bjsAlignment.getSeqs().add(seqPojo);
}
- String seqs = new com.json.JSONObject(bjsAlignment).getString("seqs");
+ String jalviewData = new com.json.JSONObject(bjsAlignment).toString()
+ .replaceAll("xstart", "xStart").replaceAll("xend", "xEnd");
// String bioJSTemplate = new String(
// java.nio.file.Files.readAllBytes(java.nio.file.Paths
// .get("resources/templates/BioJSTemplate.txt")));
- String bioJSTemplate = getBioJsTemplateAsString(alignment);
-
- return bioJSTemplate.replaceAll("#sequenceData#", seqs).replaceAll(
- "#scheme#", "zappo");
+ String bioJSTemplate = getBioJsTemplateAsString(this);
+
+ return bioJSTemplate.replaceAll("#sequenceData#", jalviewData)
+ .replaceAll(
+ "#jalview_logo#",
+ alignment.getClass()
+ .getResource("/images/Jalview_Logo.png")
+ .toString());
}
-
- public static String getBioJsTemplateAsString(AlignmentI bio)
+ public static String getBioJsTemplateAsString(Object currentObj)
throws IOException
{
InputStreamReader isReader = null;
BufferedReader buffReader = null;
StringBuilder sb = new StringBuilder();
- URL url = bio.getClass().getResource(
+ URL url = currentObj.getClass().getResource(
"/templates/BioJSTemplate.txt");
if (url != null)
{
public AlignFrame LoadFileWaitTillLoaded(FileParse source, String format)
{
this.source = source;
+
file = source.getInFile();
protocol = source.type;
this.format = format;
{
alignFrame.setFileName(file, format);
}
+ if (source instanceof HtmlFile)
+ {
+ ((HtmlFile) source).LoadAlignmentFeatures(alignFrame
+);
+
+ }
if (raiseGUI)
{
// add the window to the GUI
package jalview.io;
import jalview.datamodel.Sequence;
+import jalview.datamodel.SequenceFeature;
+import jalview.gui.AlignFrame;
+import jalview.json.binding.v1.BioJsAlignmentPojo.JalviewBioJsColorSchemeMapper;
+import jalview.schemes.ColourSchemeI;
import java.io.IOException;
import java.util.Iterator;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
-public class HtmlFile extends AlignFile {
- public static final String FILE_EXT = "html";
-
- public static final String FILE_DESC = "HTML";
-
- public HtmlFile() {
- super();
- }
-
- public HtmlFile(FileParse source) throws IOException {
- super(source);
- }
-
- public HtmlFile(String inFile, String type) throws IOException {
- super(inFile, type);
- }
-
- @SuppressWarnings("unchecked")
- @Override
- public void parse() throws IOException {
- try {
- StringBuilder htmlData = new StringBuilder();
- String currentLine;
- while ((currentLine = nextLine()) != null) {
- htmlData.append(currentLine);
- }
-
- Document doc = Jsoup.parse(htmlData.toString());
- Element content = doc.getElementById("seqData");
-
- String alignmentJsonString = "{\"seqs\":" + content.val() + "}";
- JSONParser jsonParser = new JSONParser();
- JSONObject alignmentJsonObj = (JSONObject) jsonParser.parse(alignmentJsonString);
- JSONArray seqJsonArray = (JSONArray) alignmentJsonObj.get("seqs");
-
- for (Iterator<JSONObject> sequenceIter = seqJsonArray.iterator(); sequenceIter.hasNext();) {
- JSONObject sequence = sequenceIter.next();
- System.out.println(sequence.get("id").toString() + " " + sequence.get("name"));
- String sequcenceString = sequence.get("seq").toString();
- Sequence seq = new Sequence(sequence.get("name").toString(), sequcenceString, 0, sequcenceString.length());
- seqs.add(seq);
-
- }
- } catch (Exception e) {
- e.printStackTrace();
- }
- }
-
- @Override
- public String print() {
- throw new UnsupportedOperationException("Print method of HtmlFile not yet supported!");
- }
+public class HtmlFile extends AlignFile
+{
+ public static final String FILE_EXT = "html";
+
+ public static final String FILE_DESC = "HTML";
+
+ private ColourSchemeI cs;
+
+ public HtmlFile()
+ {
+ super();
+ }
+
+ public HtmlFile(FileParse source) throws IOException
+ {
+ super(source);
+ }
+
+ public HtmlFile(String inFile, String type) throws IOException
+ {
+ super(inFile, type);
+ }
+
+ @SuppressWarnings("unchecked")
+ @Override
+ public void parse() throws IOException
+ {
+ try
+ {
+ StringBuilder htmlData = new StringBuilder();
+ String currentLine;
+ while ((currentLine = nextLine()) != null)
+ {
+ htmlData.append(currentLine);
+ }
+
+ Document doc = Jsoup.parse(htmlData.toString());
+ Element content = doc.getElementById("seqData");
+
+ String alignmentJsonString = content.val();
+ JSONParser jsonParser = new JSONParser();
+ JSONObject alignmentJsonObj = (JSONObject) jsonParser
+ .parse(alignmentJsonString);
+ JSONArray seqJsonArray = (JSONArray) alignmentJsonObj.get("seqs");
+ String bioJsColourScheme = (String) alignmentJsonObj
+ .get("globalColorScheme");
+ cs = getJalviewColorScheme(bioJsColourScheme);
+
+ for (Iterator<JSONObject> sequenceIter = seqJsonArray.iterator(); sequenceIter
+ .hasNext();)
+ {
+ JSONObject sequence = sequenceIter.next();
+ String sequcenceString = sequence.get("seq").toString();
+ Sequence seq = new Sequence(sequence.get("name").toString(),
+ sequcenceString, 0, sequcenceString.length());
+
+ JSONArray jsonSeqArray = (JSONArray) sequence.get("features");
+ SequenceFeature[] retrievedSeqFeatures = getJalviewSequenceFeatures(jsonSeqArray);
+ if (retrievedSeqFeatures != null)
+ {
+ seq.setSequenceFeatures(retrievedSeqFeatures);
+ }
+ seqs.add(seq);
+
+ }
+ } catch (Exception e)
+ {
+ e.printStackTrace();
+ }
+ }
+
+ public SequenceFeature[] getJalviewSequenceFeatures(
+ JSONArray jsonSeqFeatures)
+ {
+ SequenceFeature[] seqFeatures = null;
+ int count = 0;
+ if (jsonSeqFeatures != null)
+ {
+ seqFeatures = new SequenceFeature[jsonSeqFeatures.size()];
+ for (Iterator<JSONObject> seqFeatureItr = jsonSeqFeatures.iterator(); seqFeatureItr
+ .hasNext();)
+ {
+
+ SequenceFeature sequenceFeature = new SequenceFeature();
+ JSONObject jsonFeature = seqFeatureItr.next();
+ Long begin = (Long) jsonFeature.get("xStart");
+ Long end = (Long) jsonFeature.get("xEnd");
+ String type = (String) jsonFeature.get("text");
+
+ String color = (String) jsonFeature.get("fillColor");
+
+ sequenceFeature.setBegin(begin.intValue());
+ sequenceFeature.setEnd(end.intValue());
+ sequenceFeature.setType(type);
+ seqFeatures[count++] = sequenceFeature;
+ }
+ }
+ return seqFeatures;
+ }
+
+ public void LoadAlignmentFeatures(AlignFrame af)
+ {
+
+ af.setShowSeqFeatures(true);
+ af.changeColour(cs);
+ af.setMenusForViewport();
+ }
+
+ private ColourSchemeI getJalviewColorScheme(String bioJsColourSchemeName)
+ {
+ ColourSchemeI jalviewColor = null;
+ for (JalviewBioJsColorSchemeMapper cs : JalviewBioJsColorSchemeMapper
+ .values())
+ {
+ if (cs.getBioJsName().equals(bioJsColourSchemeName))
+ {
+ jalviewColor = cs.getJvColourScheme();
+ break;
+ }
+ }
+ return jalviewColor;
+ }
+
+ @Override
+ public String print()
+ {
+ throw new UnsupportedOperationException(
+ "Print method of HtmlFile not yet supported!");
+ }
}
package jalview.json.binding.v1;
+import jalview.schemes.Blosum62ColourScheme;
+import jalview.schemes.BuriedColourScheme;
+import jalview.schemes.ColourSchemeI;
+import jalview.schemes.HelixColourScheme;
+import jalview.schemes.HydrophobicColourScheme;
+import jalview.schemes.NucleotideColourScheme;
+import jalview.schemes.PIDColourScheme;
+import jalview.schemes.PurinePyrimidineColourScheme;
+import jalview.schemes.RNAInteractionColourScheme;
+import jalview.schemes.StrandColourScheme;
+import jalview.schemes.TaylorColourScheme;
+import jalview.schemes.TurnColourScheme;
+import jalview.schemes.ZappoColourScheme;
+
import java.util.ArrayList;
public class BioJsAlignmentPojo
{
+ private String globalColorScheme = "none";
private ArrayList<BioJsSeqPojo> seqs = new ArrayList<BioJsSeqPojo>();
public BioJsAlignmentPojo()
{
this.seqs = seqs;
}
+ public String getGlobalColorScheme()
+ {
+ return globalColorScheme;
+ }
+ public void setGlobalColorScheme(String globalColorScheme)
+ {
+ for (JalviewBioJsColorSchemeMapper cs : JalviewBioJsColorSchemeMapper
+ .values())
+ {
+ if (cs.getJalviewName().equals(globalColorScheme))
+ {
+ this.globalColorScheme = cs.getBioJsName();
+ break;
+ }
+ }
+
+ // JALVIEW colors not in biojs
+ // Blosum62
+ // T-Coffee Scores (almost same with Blosom62
+ // RNA Interaction type - no color applied
+ // RNA Helices - missing
+
+ // BIOJS Colour not in jalview
+ // schemes.push name: "Lesk", id: "lesk"
+ // schemes.push name: "Cinema", id: "cinema"
+ // schemes.push name: "MAE", id: "mae"
+ // schemes.push name: "Clustal2", id: "clustal2"
+
+ }
+
+
+ public enum JalviewBioJsColorSchemeMapper
+ {
+ USER_DEFINED("User Defined", "user defined", null), NONE("None", "foo",
+ null), CLUSTAL("Clustal", "clustal", null), ZAPPO("Zappo",
+ "zappo", new ZappoColourScheme()), TAYLOR(
+ "Taylor", "taylor", new TaylorColourScheme()), NUCLEOTIDE(
+ "Nucleotide", "nucleotide", new NucleotideColourScheme()), PURINE_PYRIMIDINE(
+ "Purine/Pyrimidine", "purine",
+ new PurinePyrimidineColourScheme()), HELIX_PROPENCITY(
+ "Helix Propensity", "helix", new HelixColourScheme()), TURN_PROPENSITY(
+ "Turn Propensity", "turn", new TurnColourScheme()), STRAND_PROPENSITY(
+ "Strand Propensity", "strand", new StrandColourScheme()), BURIED_INDEX(
+ "Buried Index", "buried", new BuriedColourScheme()), HYDROPHOBIC(
+ "Hydrophobic", "hydro", new HydrophobicColourScheme()),
+
+ // The color types below are not yet supported by BioJs MSA viewer
+ T_COFFE_SCORES("T-Coffee Scores", "T-Coffee Scores",
+ null), RNA_INT_TYPE(
+ "RNA Interaction type", "RNA Interaction type",
+ new RNAInteractionColourScheme()), BLOSUM62("Blosum62",
+ "Blosum62", new Blosum62ColourScheme()), RNA_HELICES(
+ "RNA Helices", "RNA Helices", null), PERCENTAGE_IDENTITY(
+ "% Identity", "pid",
+ new PIDColourScheme());
+
+ private String jalviewName;
+ private String bioJsName;
+
+ private ColourSchemeI jvColourScheme;
+
+ private JalviewBioJsColorSchemeMapper(String jalviewName,
+ String bioJsName, ColourSchemeI jvColourScheme)
+ {
+ this.jalviewName = jalviewName;
+ this.bioJsName = bioJsName;
+ this.setJvColourScheme(jvColourScheme);
+ }
+
+ public String getJalviewName()
+ {
+ return jalviewName;
+ }
+
+ public String getBioJsName()
+ {
+ return bioJsName;
+ }
+
+ public ColourSchemeI getJvColourScheme()
+ {
+ return jvColourScheme;
+ }
+
+ public void setJvColourScheme(ColourSchemeI jvColourScheme)
+ {
+ this.jvColourScheme = jvColourScheme;
+ }
+
+ }
}
--- /dev/null
+package jalview.json.binding.v1;
+
+public class BioJsFeaturePojo
+{
+
+ private int xstart;
+
+ private int xend;
+
+ private String text;
+
+ private String fillColor;
+
+ public BioJsFeaturePojo()
+ {
+ }
+
+
+ public String getText()
+ {
+ return text;
+ }
+
+ public void setText(String text)
+ {
+ this.text = text;
+ }
+
+ public String getFillColor()
+ {
+ return "#" + fillColor;
+ }
+
+ public void setFillColor(String fillColor)
+ {
+ this.fillColor = fillColor;
+ }
+
+ public int getXstart()
+ {
+ return xstart;
+ }
+
+ public void setXstart(int xstart)
+ {
+ this.xstart = xstart;
+ }
+
+ public int getXend()
+ {
+ return xend;
+ }
+
+ public void setXend(int xend)
+ {
+ this.xend = xend;
+ }
+
+
+}
package jalview.json.binding.v1;
+import java.util.ArrayList;
+
public class BioJsSeqPojo
{
private String id;
+ private int start;
+
+ private int end;
+
+ private ArrayList<BioJsFeaturePojo> features = new ArrayList<BioJsFeaturePojo>();
+
public BioJsSeqPojo()
{
}
- public BioJsSeqPojo(String id, String name, String seq)
+ public BioJsSeqPojo(int start, int end, String id, String name, String seq)
{
this.id = id;
this.name = name;
{
this.id = id;
}
+
+ public int getStart()
+ {
+ return start;
+ }
+
+ public void setStart(int start)
+ {
+ this.start = start;
+ }
+
+ public int getEnd()
+ {
+ return end;
+ }
+
+ public void setEnd(int end)
+ {
+ this.end = end;
+ }
+
+ public ArrayList<BioJsFeaturePojo> getFeatures()
+ {
+ return features;
+ }
+
+ public void setFeatures(ArrayList<BioJsFeaturePojo> features)
+ {
+ this.features = features;
+ }
}
git://source.jalview.org / jalview.git / commitdiff