- use css stylesheets instead of hardcoding to color the alignments (…

…enables different stylesheeets for proteins and nucleotides) - add demos - improve "Identities" to avoid misunderstandings, see opengenomebrowser/opengenomebrowser#29 - export tsv instead of semicolon-csv - improve code: var -> let/const, use for..of-loops - update dependencies
MrTomRod · Aug 9, 2022 · 20ad5fd · 20ad5fd
1 parent 3178dc3
commit 20ad5fd
Show file tree

Hide file tree

Showing 14 changed files with 9,790 additions and 635 deletions.
diff --git a/README.md b/README.md
@@ -2,92 +2,116 @@ biojs-vis-blasterjs
 =====
 
 ## Authors
+
 * Aitor Blanco Míguez ([email protected])
 * Dr. Florentino Fernández Riverola ([email protected])
 * Dr. Anália Maria Garcia Lourenço ([email protected])
 * Dr. Borja Sánchez García ([email protected])
+* Thomas Roder ([email protected])
+
+## Description
 
-## Description 
-[![NPM version](http://img.shields.io/npm/v/biojs-vis-blasterjs.svg)](https://www.npmjs.org/package/biojs-vis-blasterjs) 
+[![NPM version](http://img.shields.io/npm/v/biojs-vis-blasterjs.svg)](https://www.npmjs.org/package/biojs-vis-blasterjs)
 
 > A free to use, open source Javascript BLAST alignments viewer library created by SING group.
 
 ## How to cite
-Blanco-Míguez A, Fdez-Riverola F, SánchezB, Lourenço A (2018) BlasterJS: A novel interactive JavaScript visualisation component for BLAST alignment results. PLoS ONE 13(10): e0205286. https://doi.org/10.1371/journal.pone.0205286
+
+Blanco-Míguez A, Fdez-Riverola F, SánchezB, Lourenço A (2018) BlasterJS: A novel interactive JavaScript visualisation
+component for BLAST alignment results. PLoS ONE 13(10): e0205286. https://doi.org/10.1371/journal.pone.0205286
 
 ## Requeriments
+
 * Bootstrap 3 ([http://getbootstrap.com/])
 * HTML2CANVAS ([http://html2canvas.hertzen.com/])
 
 ## Accepted files
-BLAST text and XML output files (-outfmt 0 and 5)   
+
+BLAST text and XML output files (-outfmt 0 and 5)
 > You can check [NCBI BLAST user manual].
 
 ## Getting Started
+
 Install the module with: `npm install biojs-vis-blasterjs`
 
 ```html
+
 <head>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
+          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
+    <link rel="stylesheet" type="text/css" href="css/blasterjs-colors-nucleotides.css"
+          id="stylesheet-blasterjs-nucleotides"/>
+    <link rel="stylesheet" type="text/css" href="css/blasterjs-colors-proteins.css"
+          id="stylesheet-blasterjs-proteins"/>
     ...
 </head>
 <body>
-    ...
-    <input type="file" id="blastinput" />
-    <div id="blast-multiple-alignments"></div>
-    <div id="blast-alignments-table"></div>
-    <div id="blast-single-alignment"></div>
-    ...
-    <script type="text/javascript" src="js/html2canvas.js"></script>  
-    <script type="text/javascript" src="js/blaster.js"></script>   
-    <script type="text/javascript">
-      var blasterjs = require("biojs-vis-blasterjs");
-      var instance = new blasterjs({
-         input: "blastinput",
-         multipleAlignments: "blast-multiple-alignments",
-         alignmentsTable: "blast-alignments-table",
-         singleAlignment: "blast-single-alignment"
-      });
-    </script>
+...
+<input type="file" id="blastinput"/>
+<div id="blast-multiple-alignments"></div>
+<div id="blast-alignments-table"></div>
+<div id="blast-single-alignment"></div>
+...
+<script type="text/javascript" src="js/html2canvas.js"></script>
+<script type="text/javascript" src="js/blaster.js"></script>
+<script type="text/javascript">
+
+    // activate the appropriate stylesheet
+    document.getElementById('stylesheet-blasterjs-nucleotides').disabled = true
+    document.getElementById('stylesheet-blasterjs-proteins').disabled = false
+
+    // start blasterjs
+    let blasterjs = require("biojs-vis-blasterjs")
+    let instance = new blasterjs({
+        input: "blastinput",
+        multipleAlignments: "blast-multiple-alignments",
+        alignmentsTable: "blast-alignments-table",
+        singleAlignment: "blast-single-alignment"
+    })
+</script>
 </body>
 ```
 
 ### Custom options:
+
 Get alignments via String instead of input form:
+
 ```html
 ...
 <script type="text/javascript">
-  var alignments = "...";
-
-  var blasterjs = require("biojs-vis-blasterjs");
-  var instance = new blasterjs({
-     string: alignments,
-     multipleAlignments: "blast-multiple-alignments",
-     alignmentsTable: "blast-alignments-table",
-     singleAlignment: "blast-single-alignment",
-  });
+    var alignments = "...";
+
+    var blasterjs = require("biojs-vis-blasterjs");
+    var instance = new blasterjs({
+        string: alignments,
+        multipleAlignments: "blast-multiple-alignments",
+        alignmentsTable: "blast-alignments-table",
+        singleAlignment: "blast-single-alignment",
+    });
 </script>
 ...
 ```
 
 Define a custom callback on alignment table item click event:
+
 ```html
 ...
 <script type="text/javascript">
-  var blasterjs = require("biojs-vis-blasterjs");
-  var instance = new blasterjs({
-     input: "blastinput",
-     multipleAlignments: "blast-multiple-alignments",
-     alignmentsTable: "blast-alignments-table",
-     singleAlignment: "blast-single-alignment",
-     callback: function(alignment) { ... }
-  });
+    var blasterjs = require("biojs-vis-blasterjs");
+    var instance = new blasterjs({
+        input: "blastinput",
+        multipleAlignments: "blast-multiple-alignments",
+        alignmentsTable: "blast-alignments-table",
+        singleAlignment: "blast-single-alignment",
+        callback: function (alignment) { ...
+        }
+    });
 </script>
 ...
 ```
 
-
 ## Institution
+
 [© SING - Sistemas Informáticos de Nueva Generación 2015]    
 Department of Computer Science, University of Vigo    
 ESEI - Escuela Superior de Ingeniería Informática Edificio politécnico    
@@ -97,16 +121,20 @@ Tel: +34 988 387 013
 Fax: +34 988 387 001
 
 ## Contributing
+
 All contributions are welcome.
 
 ## Support
-If you have any problem or suggestion please open an issue [here](https://github.com/sing-group/biojs-vis-blasterjs/issues).
 
-## License 
+If you have any problem or suggestion please open an
+issue [here](https://github.com/sing-group/biojs-vis-blasterjs/issues).
+
+## License
+
 [GNU General Public License v3]
 
 BlasterJS is a free to use, open source JS library created by SING Group.
-Copyright (C) 2019  SING - Sistemas Informaticos de Nueva Generacion
+Copyright (C) 2019 SING - Sistemas Informaticos de Nueva Generacion
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ -115,15 +143,19 @@ the Free Software Foundation, either version 3 of the License, or
 
 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
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+
+[http://getbootstrap.com/]: <http://getbootstrap.com/>
+
+[https://html2canvas.hertzen.com/]: <https://html2canvas.hertzen.com/>
+
+[© SING - Sistemas Informáticos de Nueva Generación 2019]: <http://sing.ei.uvigo.es/>
 
+[NCBI BLAST user manual]: <http://www.ncbi.nlm.nih.gov/books/NBK279675/>
 
-   [http://getbootstrap.com/]: <http://getbootstrap.com/>
-   [https://html2canvas.hertzen.com/]: <https://html2canvas.hertzen.com/>
-   [© SING - Sistemas Informáticos de Nueva Generación 2019]: <http://sing.ei.uvigo.es/>
-   [NCBI BLAST user manual]: <http://www.ncbi.nlm.nih.gov/books/NBK279675/>
-   [GNU General Public License v3]: <https://github.com/sing-group/biojs-vis-blasterjs/blob/master/LICENSE>
+[GNU General Public License v3]: <https://github.com/sing-group/biojs-vis-blasterjs/blob/master/LICENSE>
diff --git a/css/blasterjs-colors-nucleotides.css b/css/blasterjs-colors-nucleotides.css
@@ -0,0 +1,11 @@
+.blasterjs-alignment {
+    font-weight: bold;
+    width: 18px;
+    text-align: center;
+    display: inline-block;
+    background-color: #FFFFFF;
+}
+.blasterjs-A { background-color: #FFA563 }
+.blasterjs-C { background-color: #609DF9 }
+.blasterjs-G { background-color: #F9FA60 }
+.blasterjs-T { background-color: #7EF960 }
diff --git a/css/blasterjs-colors-proteins.css b/css/blasterjs-colors-proteins.css
@@ -0,0 +1,27 @@
+.blasterjs-alignment {
+    font-weight: bold;
+    width: 18px;
+    text-align: center;
+    display: inline-block;
+    background-color: #FFFFFF;
+}
+.blasterjs-A { background-color: #DBFA60 }
+.blasterjs-C { background-color: #F9FA60 }
+.blasterjs-D { background-color: #F9605F }
+.blasterjs-E { background-color: #F9609C }
+.blasterjs-F { background-color: #5FF99D }
+.blasterjs-G { background-color: #F9BC5F }
+.blasterjs-H { background-color: #609DF9 }
+.blasterjs-I { background-color: #99F95A }
+.blasterjs-K { background-color: #A062FF }
+.blasterjs-L { background-color: #7EF960 }
+.blasterjs-M { background-color: #63FF63 }
+.blasterjs-N { background-color: #D95DF9 }
+.blasterjs-P { background-color: #F9DA60 }
+.blasterjs-Q { background-color: #F955D8 }
+.blasterjs-R { background-color: #5360FB }
+.blasterjs-S { background-color: #F97E60 }
+.blasterjs-T { background-color: #FFA563 }
+.blasterjs-V { background-color: #C0F86B }
+.blasterjs-W { background-color: #FDD9F9 }
+.blasterjs-Y { background-color: #60F9DA }
diff --git a/examples/demo_nucleotides.html b/examples/demo_nucleotides.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Blasterjs demo: Amino acid alignments</title>
+    <link rel="icon" href="data:,">
+
+    <!-- blasterjs -->
+    <script src="../lib/html2canvas.js"></script>
+    <script src="../build/blasterjs.js"></script>
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
+    <link rel="stylesheet" type="text/css" href="../css/blasterjs-colors-nucleotides.css"/>
+    <link rel="stylesheet" type="text/css" href="example.css"/>
+</head>
+<body>
+
+<div id="blast-multiple-alignments"></div>
+<div id="blast-alignments-table"></div>
+<div id="blast-single-alignment"></div>
+
+</body>
+
+<script>
+    "use strict"
+
+    const blasterjs = require("biojs-vis-blasterjs")
+
+    function blast() {
+        fetch('demo_nucleotides.xml')
+            .then((response) => response.text())
+            .then((data) => {
+                let instance = new blasterjs({
+                    string: data,
+                    multipleAlignments: "blast-multiple-alignments",
+                    alignmentsTable: "blast-alignments-table",
+                    singleAlignment: "blast-single-alignment",
+                })
+            })
+
+    }
+
+    blast()
+</script>
+</html>