Merge pull request #8 from maxplanck-ie/jmv_dev

Added missing changes to app templates

Author: fidelram

hicbrowser/client/README.md

@@ -1,2 +1,19 @@
-# HiCBrowser-web-client
-A web client for HiCBrowser
+# HiCBrowser web client
+
+This project aims to visualize gene expression profiles in the context of mitochondrial processes. See a working demo [here](http://jmvillaveces.github.io/mito_models_visualization/dist/).
+
+## Getting Started
+
+1. Clone the project
+`git clone https://github.com/maxplanck-ie/HiCBrowser`
+2. Install dependencies
+`npm i`
+3. Compile the project
+`grunt dist`
+
+## Built With
+
+* [NPM](https://www.npmjs.com/) - Dependency Management
+* [GRUNT](http://gruntjs.com/) - Task Runner
+* [Backbone](http://backbonejs.org/) -  model–view–presenter (MVP) application design paradigm
+* [Handlebars](http://handlebarsjs.com/) - HTML templating

hicbrowser/client/js/templates.js

@@ -1,10 +1,10 @@
 <div class="container-fixed">
     <div class="row">
         {{#each tracks}}
-            <div class="col-xs-4 img_wrapper">
+            <div class="col-xs-12 img_wrapper">
                 <img class="lazy" data-original="{{this}}">
                 <!--<img src="{{this}}" onload="imgLoaded(this)">-->
             </div>
         {{/each}}
     </div>
-</div>
+</div>

hicbrowser/client/templates/browser.hbs

@@ -1,18 +1,21 @@
 <div class="col-lg-12">
-    
+
     {{#if name}}
         <h1 class="page-header">
             {{name}}
-            <small> 
+            <small>
                  chromosome {{chromosome}} (start: {{start}}, end: {{end}})
             </small>
         </h1>
         <div style="width: 900px;" id="{{feature_viewer}}"></div>
-        <a href="/#/browser/{{chromosome}}:{{start}}-{{end}}">
-            <img class="img-responsive" src="{{img}}" alt="" data-toggle="tooltip" title="Click image to explore region in browser">
-        </a>
+
+        <ul class="nav nav-pills">
+          <li class="active">
+            <a href="/#/browser/{{chromosome}}:{{start}}-{{end}}">Explore region in browser</a>
+          </li>
+        </ul>
     {{/if}}
-    
+
     {{#if error}}
         <div style="height:55%">
             <div class="alert alert-danger" role="alert">
@@ -23,4 +26,4 @@
         </div>
     {{/if}}
     <hr>
-</div>
+</div>

hicbrowser/client/templates/gene.hbs

@@ -248,31 +248,29 @@ this["Templates"]["browser"] = Handlebars.template({"1":function(container,depth
 
   return "<div class=\"container-fixed\">\n    <div class=\"row\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.tracks : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    </div>\n</div>";
+    + "    </div>\n</div>\n";
 },"useData":true});
 
 this["Templates"]["gene"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "        <h1 class=\"page-header\">\n            "
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
-    + "\n            <small> \n                 chromosome "
+    + "\n            <small>\n                 chromosome "
     + alias4(((helper = (helper = helpers.chromosome || (depth0 != null ? depth0.chromosome : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"chromosome","hash":{},"data":data}) : helper)))
     + " (start: "
     + alias4(((helper = (helper = helpers.start || (depth0 != null ? depth0.start : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"start","hash":{},"data":data}) : helper)))
     + ", end: "
     + alias4(((helper = (helper = helpers.end || (depth0 != null ? depth0.end : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"end","hash":{},"data":data}) : helper)))
     + ")\n            </small>\n        </h1>\n        <div style=\"width: 900px;\" id=\""
     + alias4(((helper = (helper = helpers.feature_viewer || (depth0 != null ? depth0.feature_viewer : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"feature_viewer","hash":{},"data":data}) : helper)))
-    + "\"></div>\n        <a href=\"/#/browser/"
+    + "\"></div>\n\n        <ul class=\"nav nav-pills\">\n          <li class=\"active\">\n            <a href=\"/#/browser/"
     + alias4(((helper = (helper = helpers.chromosome || (depth0 != null ? depth0.chromosome : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"chromosome","hash":{},"data":data}) : helper)))
     + ":"
     + alias4(((helper = (helper = helpers.start || (depth0 != null ? depth0.start : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"start","hash":{},"data":data}) : helper)))
     + "-"
     + alias4(((helper = (helper = helpers.end || (depth0 != null ? depth0.end : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"end","hash":{},"data":data}) : helper)))
-    + "\">\n            <img class=\"img-responsive\" src=\""
-    + alias4(((helper = (helper = helpers.img || (depth0 != null ? depth0.img : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"img","hash":{},"data":data}) : helper)))
-    + "\" alt=\"\" data-toggle=\"tooltip\" title=\"Click image to explore region in browser\">\n        </a>\n";
+    + "\">Explore region in browser</a>\n          </li>\n        </ul>\n";
 },"3":function(container,depth0,helpers,partials,data) {
     var helper;
 
@@ -282,11 +280,11 @@ this["Templates"]["gene"] = Handlebars.template({"1":function(container,depth0,h
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : {};
 
-  return "<div class=\"col-lg-12\">\n    \n"
+  return "<div class=\"col-lg-12\">\n\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.name : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    \n"
+    + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.error : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "    <hr>\n</div>";
+    + "    <hr>\n</div>\n";
 },"useData":true});
 
 this["Templates"]["index"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {