Merge pull request #30 from biojs/visualization-frontend

Megh-Thakkar · web-flow · commit 85a24d1b8e25 · 2018-07-13T18:36:14.000+05:30
Visualization frontend
diff --git a/main/templates/main/visualizations.html b/main/templates/main/visualizations.html
@@ -1,4 +1,6 @@
 {% comment %}
+!!ADD VERSION TO WZRD!! 
+
 
 Template for rendering visualizations.
 
@@ -13,9 +15,79 @@
 6. no_browserify : {{sniper_data.no_browserify}}
 {% endcomment %}
 
+<!DOCTYPE html>
 <html>
-<body>
-    Hello World!
-    You requested {{snippet.name}} snippet of {{component.name}}. Wzrd URL is {{sniper_data.wzrd_url}}.
-</body>
+    <head>
+        <meta charset="UTF-8">
+        {% for dependency in css_dependencies %}
+            <link rel="stylesheet" type="text/css" href="{{dependency.css_url}}" />
+        {% endfor %}
+        {% for dependency in js_dependencies %}
+            <script src="{{dependency.js_url}}"></script>
+        {% endfor %}
+        <script src="{{sniper_data.wzrd_url}}"></script>
+    </head>
+    <body>
+        <div id="placeholderDiv" style="display: none">
+            {{snippet_script}}
+        </div>
+        </div>
+        <div id='snippetDiv'></div>
+    </body>
+    <script>
+        // 
+        String.prototype.replaceAll = function(search, replacement) {
+            var target = this;
+            return target.replace(new RegExp(search, 'g'), replacement);
+        };
+
+        // find main element variable
+        findMainVar = function(content) {
+            var tags = ["yourDiv", "mainDiv", "rootDiv", "masterDiv", "biojsDiv"];
+            var defaultDiv = tags[0];
+            tags.forEach(function(tag) {
+                if (content.indexOf(tag) >= 0) {
+                defaultDiv = tag;
+                }
+            });
+            return defaultDiv;
+        }; 
+
+        // translate relative paths
+        translateRelative = function(body, baseLocal, path) {
+            if (body.indexOf("./") >= 0) {
+                var htmlUrl = baseLocal + "/" + path + "/";
+                body = body.replace(/\.\.\//g, baseLocal + "/");
+                body = body.replace(/\.\//g, htmlUrl);
+            }
+            return body;
+        };
+        
+
+        var script = document.getElementById("placeholderDiv").innerHTML;
+        script = script.replaceAll("&lt;", "<");
+        script = script.replaceAll("&gt;", ">");
+
+        var githubURL = "{{component.github_url}}";
+        var lastCommitHash = "{{component.latest_commit_hash}}";
+        
+        var div = findMainVar(script);
+        var mainDiv = "var "+div+" = document.getElementById('snippetDiv');"
+
+        // get rawgit base URL
+        var rawgitURL = githubURL.replace("github.com", "cdn.rawgit.com");
+        if(rawgitURL.substr(rawgitURL.length - 1) === '/') {
+            rawgitURL = rawgitURL + '' + lastCommitHash;
+        } else {
+            rawgitURL = rawgitURL + '/' + lastCommitHash;
+        }
+
+        // change relative paths in script
+        script = translateRelative(script, rawgitURL, "snippets");
+
+        // complete script and evaluate the script
+        script = mainDiv + script;
+        eval(script);
+    
+    </script>
 </html>
diff --git a/main/views.py b/main/views.py
@@ -67,7 +67,7 @@ def render_visualization(request, url_name, visualization_name):
     snippet = Snippet.objects.get(sniperData=sniper_data, name=visualization_name)
     data = urllib.urlopen(snippet.url).read()
     context = {
-        'component' : component,
+        'component' : DetailComponentSerializer(component).data,
         'js_dependencies' : js_dependencies,
         'css_dependencies' : css_dependencies,
         'snippet' : snippet,
