Towards HiGlass UI (#1509)

* Towards HiGlass UI * Plug in the higlass js * higlass versioning
refinery-platform · Nov 8, 2016 · 691fbe3 · 691fbe3
1 parent 46ef86a
commit 691fbe3
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/refinery/core/urls.py b/refinery/core/urls.py
@@ -70,6 +70,8 @@
         'workflow_engine', name="workflow_engine"),
     url(r'^fastqc_viewer/$', 'fastqc_viewer', name='fastqc_viewer'),
     url(r'^visualize/genome/$', 'visualize_genome', name='visualize_genome'),
+    url(r'^visualizations/higlass', 'visualizations_higlass',
+        name='visualizations_higlass'),
     url(r'^solr/igv/$', 'solr_igv'),
     url(r'^solr/core/select/$', 'solr_core_search', name="solr_core_search"),
     url(r'^solr/(?P<core>.+)/select/$', 'solr_select', name="solr_select"),

diff --git a/refinery/core/views.py b/refinery/core/views.py
@@ -622,6 +622,20 @@ def visualize_genome(request):
           context_instance=RequestContext(request))
 
 
+def visualizations_higlass(request):
+    """Provide HiGlass visualization of requested nodes
+    """
+    uuids = request.GET.getlist('uuids')
+    uuids_json = json.dumps(uuids)
+
+    return render_to_response(
+        'core/visualizations/higlass.html',
+        {
+            'uuids_json': uuids_json
+        },
+        context_instance=RequestContext(request))
+
+
 def solr_core_search(request):
     """Query Solr's core index for search.
 

diff --git a/refinery/templates/core/visualizations/higlass.html b/refinery/templates/core/visualizations/higlass.html
@@ -0,0 +1,60 @@
+{% extends "plain.html" %}
+
+{% block title %}
+    {{ block.super }} - Visualization
+{% endblock %}
+
+{% block head %}
+    <!-- HiGlass CSS -->
+    <link rel="stylesheet" type="text/css" href="TODO">
+
+    <!-- HiGlass JS-->
+    <script type="text/javascript" src="https://rawgit.com/hms-dbmi/higlass/v0.2.0/dist/scripts/higlass.js"></script>
+{% endblock %}
+
+{% block content %}
+
+    <div id="higlass-component" style="width: 400px;"></div>
+
+    <script type="text/javascript">
+
+            var uuids = {{ uuids_json|safe }};
+            var promises = uuids.map(function(uuid) {
+                return Promise.resolve($.getJSON('/api/v2/nodes/' + uuid + '/?format=json'));
+            });
+
+            Promise.all(promises).then(function(promises) {
+                var tracks = $.map(promises, function(promise){
+                    return  {
+                      source: promise.relative_file_store_item_url,
+                      type: 'heatmap',
+                      height: 300
+                    };
+                });
+
+                var rectangularOneWindow =
+                    {"views":
+                        [
+                          {
+                            "chromInfoPath": "//s3.amazonaws.com/pkerp/data/hg19/chromInfo.txt",
+                            "domain": [
+                              0,
+                              3000000000
+                            ],
+                            "viewStyle": {
+                              "float": "left",
+                              "padding": "5px",
+                              "width": "100%"
+                            },
+                            "tracks": tracks
+                          }
+                        ],
+                        "editable": true
+                    };
+
+                higlass.HiGlassContainer('higlass-component', JSON.stringify(rectangularOneWindow));
+        });
+
+    </script>
+
+{% endblock %}