Merge branch 'release-1.0'

ViennaRNA · Apr 14, 2015 · 4e156b4 · 4e156b4
2 parents 73cf697 + 796181b
commit 4e156b4
Show file tree

Hide file tree

Showing 16 changed files with 382 additions and 227 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "closure-compiler"]
+	path = closure-compiler
+	url = https://github.com/google/closure-compiler.git
diff --git a/Makefile b/Makefile
@@ -0,0 +1,17 @@
+all: closure-compiler/build/compiler.jar js/fornac.js
+
+js/fornac.js: src/*.js
+	java -jar closure-compiler/build/compiler.jar --compilation_level=SIMPLE_OPTIMIZATIONS --js_output_file=js/fornac.js src/*.js
+
+closure-compiler/build/compiler.jar: closure-compiler/*
+	git submodule init closure-compiler
+	git submodule update closure-compiler
+	cd closure-compiler; ant jar
+
+release: js/fornac.js
+	zip fornac-release.zip js/fornac.js css/fornac.css example.html README.md
+
+clean:
+	rm -f closure-compiler/build/compiler.jar js/fornac.js fornac-release.zip
+
+.PHONY: all
diff --git a/README.md b/README.md
@@ -0,0 +1,57 @@
+# FornaContainer
+
+In many situations, the user interaction is superfluous and the desired goal is to simply display a secondary structure on a web page. This is a common scenario in, for example, servers that predict a secondary structure. The output, a dot-bracket string can simply be added to a `FornaContainer` object to display.
+
+## Trivial Example
+
+Below is an example of a simple web page which uses a `FornaContainer` to show a simple RNA molecule:
+
+![blah blah](https://raw.githubusercontent.com/pkerpedjiev/fornac/develop/doc/img/forna-container-screenshot.png "An example of the FornaContainer")
+
+The code for creating this web page is rather straightforward. After importing some necessary javascript files, we create a container using `new FornaContainer("#rna_ss", {'applyForce': false})`, passing in `#rna_ss` as the id of the `div` which will hold the container and then populate it with a structure and sequence using `container.addRNA`:
+
+```html
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+This is an RNA container.
+<div id='rna_ss'> </div>
+This after the RNA container.
+
+    <link rel='stylesheet' type='text/css' href='css/fornac.css' />
+    <script type='text/javascript' src='js/jquery.js'></script>
+    <script type='text/javascript' src='js/d3.js'></script>
+    <script type='text/javascript' src='js/fornac.js'></script>
+    <script type='text/javascript'>
+        var container = new FornaContainer("#rna_ss", {'applyForce': false});
+
+        var options = {'structure': '((..((....)).(((....))).))',
+                        'sequence': 'CGCUUCAUAUAAUCCUAAUGACCUAU'
+        };
+
+        container.addRNA(options.structure, options);
+    </script>
+```
+## Options
+
+The `FornaContainer` supports a number of options to allow users to customize how the RNA will be presented.
+
+### applyForce
+
+Indicate whether the force-directed layout will be applied to the displayed molecule. Enabling this option allows users to change the layout of the molecule by selecting and dragging the individual nucleotide nodes
+
+### allowPanningAndZooming
+
+Allow users to zoom in and pan the display. If this is enabled then pressing the 'c' key on the keyboard will center the view.
+
+### Installation
+
+You need [ANT](http://ant.apache.org/), [Java](http://java.com) and [GNU Make](https://www.gnu.org/software/make/) installed if you want to produce a release javascript file (compressed and optimized). Then just type:
+```sh
+$ make
+```
+Optionally, you can just cat all javascript files into one file:
+```sh
+$ cat src/*.js > js/fornac.js
+```
+Do not forget to run the unit tests in `test.html` to check for regressions!
diff --git a/closure-compiler b/closure-compiler
diff --git a/css/fornac.css b/css/fornac.css
@@ -0,0 +1,125 @@
+svg {
+  display: block;
+  min-width: 100%;
+  width: 100%;
+  min-height: 100%;
+}
+
+circle.node {
+  stroke: #ccc;
+  stroke-width: 1px;
+  opacity: 1;
+  fill: white;
+}
+
+circle.node.label {
+    stroke: transparent;
+    stroke-width: 0;
+    fill: white;
+}
+
+circle.outline_node {
+    stroke-width: 1px;
+    fill: red;
+}
+
+circle.protein {
+    fill: gray;
+    fill-opacity: 0.5;
+    stroke-width: 4;
+}
+
+circle.hidden_outline {
+    stroke-width: 0px;
+}
+
+
+line.link {
+  stroke: #999;
+  stroke-opacity: 0.8;
+  stroke-width: 2;
+}
+
+line.basepair {
+  stroke: red;
+}
+
+line.intermolecule {
+  stroke: blue;
+}
+
+line.chain_chain {
+  stroke-dasharray: 3,3;
+}
+
+line.fake {
+  stroke: green;
+}
+
+.transparent {
+    fill: transparent;
+    stroke-width: 0;
+    stroke-opacity: 0;
+    opacity: 0;
+    visibility: hidden;
+}
+
+.drag_line {
+  stroke: #999;
+  stroke-width: 2;
+  pointer-events: none;
+}
+
+.drag_line_hidden {
+  stroke: #999;
+  stroke-width: 0;
+  pointer-events: none;
+}
+
+.d3-tip {
+    line-height: 1;
+    font-weight: bold;
+    padding: 6px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    border-radius: 4px;
+    pointer-events: none;
+          }
+
+text.node-label {
+    font-weight: bold;
+    font-family: Tahoma, Geneva, sans-serif;
+    color: rgb(100,100,100);
+    pointer-events: none;
+}
+
+text {
+    pointer-events: none;
+}
+
+g.gnode {
+
+}
+
+circle.outline_node.selected {
+    visibility: visible;
+}
+
+circle.outline_node {
+    visibility: hidden;
+}
+
+.brush .extent {
+  fill-opacity: .1;
+  stroke: #fff;
+  shape-rendering: crispEdges;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
diff --git a/doc/img/forna-container-screenshot.png b/doc/img/forna-container-screenshot.png
diff --git a/example.html b/example.html
@@ -1,26 +1,22 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<link rel="stylesheet" type="text/css" href="fornaf.css" media="screen" />
-This is an RNA container.
 
+This is an RNA container.
 <div id='rna_ss'> </div>
-
 This after the RNA container.
 
-    <script type='text/javascript' src='jquery.js'></script> 
-    <script type='text/javascript' src='d3.js'></script>                                                                
-    <script type='text/javascript' src='rnautils.js'></script>                                                          
-    <script type='text/javascript' src='rnagraph.js'></script>                                                          
-    <script type='text/javascript' src='simplernaplot.js'></script> 
-    <script type='text/javascript' src='fornaf.js'></script>                                                            
-
-    <script type='text/javascript'>                                                                                         
-var container = new FornaContainer("#rna_ss", {'applyForce': false, 'allowPanningAndZooming': true}); 
+    <link rel='stylesheet' type='text/css' href='css/fornac.css' />
+    <script type='text/javascript' src='js/jquery.js'></script>
+    <script type='text/javascript' src='js/d3.js'></script>
+    <script type='text/javascript' src='js/fornac.js'></script>
 
-var options = {'structure': '((..((....)).(((....))).))',              
-    'sequence':             'CGCUUCAUAUAAUCCUAAUGACCUAU'               
-};  
+    <script type='text/javascript'>
+        var container = new FornaContainer("#rna_ss",
+            {'applyForce': false, 'allowPanningAndZooming': true});
 
+        var options = {'structure': '((..((....)).(((....))).))',
+                        'sequence': 'CGCUUCAUAUAAUCCUAAUGACCUAU'
+        };
 
-container.addRNA(options.structure, options);                                                                                          
-</script>
+        container.addRNA(options.structure, options);
+    </script>
diff --git a/example_transition.html b/example_transition.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="fornaf.css" media="screen" />
+This is an RNA container.
+
+<div id='rna_ss'> </div>
+
+This after the RNA container.
+
+    <script type='text/javascript' src='js/jquery.js'></script> 
+    <script type='text/javascript' src='js/d3.js'></script>                                                                
+    <script type='text/javascript' src='js/fornac.js'></script>                                                            
+    <script type='text/javascript' src='src/fornaf.js'></script>                                                            
+
+    <script type='text/javascript'>                                                                                         
+var container = new FornaContainer("#rna_ss", {'applyForce': false, 'allowPanningAndZooming': true}); 
+
+/*
+rna1 = container.addRNA('...............');
+container.transitionRNA(rna1, '(.............)')
+*/
+
+rna1 = container.addRNA('...');
+container.transitionRNA(rna1, '(.)');
+
+//rna2 = container.addRNA('(.)');
+
+//newRNA = container.transitionTo('...............')
+
+</script>
diff --git a/d3.js → js/d3.js b/d3.js → js/d3.js
diff --git a/jquery.js → js/jquery.js b/jquery.js → js/jquery.js
diff --git a/tests.js → js/tests.js b/tests.js → js/tests.js