Skip to content

Commit 1967592

Browse files
sarthak-sehgalsarthak-sehgal
committed
Visualization static page made, version to be added
1 parent 5c9d3c7 commit 1967592

File tree

2 files changed

+64
-154
lines changed

2 files changed

+64
-154
lines changed

‎main/templates/main/visualizations.html

Lines changed: 63 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{% comment %}
2+
!!ADD VERSION TO WZRD!!
3+
24

35
Template for rendering visualizations.
46

@@ -13,171 +15,79 @@
1315
6. no_browserify : {{sniper_data.no_browserify}}
1416
{% endcomment %}
1517

18+
<!DOCTYPE html>
1619
<html>
1720
<head>
21+
<meta charset="UTF-8">
1822
{% for dependency in css_dependencies %}
1923
<link rel="stylesheet" type="text/css" href="{{dependency.css_url}}" />
2024
{% endfor %}
2125
{% for dependency in js_dependencies %}
2226
<script src="{{dependency.js_url}}"></script>
2327
{% endfor %}
24-
<script src={{sniper_data.wzrd_url}}@{{component.version}}></script>
28+
<script src="{{sniper_data.wzrd_url}}"></script>
2529
</head>
2630
<body>
31+
<div id="placeholderDiv" style="display: none">
32+
{{snippet_script}}
33+
</div>
34+
</div>
2735
<div id='snippetDiv'></div>
2836
</body>
2937
<script>
30-
var yourDiv = document.getElementById('snippetDiv');
31-
yourDiv.style.left = 0;
32-
yourDiv.style.top = 0;
33-
yourDiv.style.width = "100%";
34-
yourDiv.style.height = "100%";
35-
yourDiv.style.position = "absolute";
36-
37-
var cytoscape = require("cytoscape");
38-
39-
var cy = cytoscape({
40-
container: yourDiv,
41-
42-
style: cytoscape.stylesheet()
43-
.selector('node')
44-
.style({
45-
'height': 80,
46-
'width': 80,
47-
'background-fit': 'cover',
48-
'border-color': '#000',
49-
'border-width': 3,
50-
'border-opacity': 0.5
51-
})
52-
.selector('.eating')
53-
.style({
54-
'border-color': 'red'
55-
})
56-
.selector('.eater')
57-
.style({
58-
'border-width': 9
59-
})
60-
.selector('edge')
61-
.style({
62-
'width': 6,
63-
'target-arrow-shape': 'triangle',
64-
'line-color': '#ffaaaa',
65-
'target-arrow-color': '#ffaaaa'
66-
})
67-
.selector('#bird')
68-
.style({
69-
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
70-
})
71-
.selector('#cat')
72-
.style({
73-
'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
74-
})
75-
.selector('#ladybug')
76-
.style({
77-
'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
78-
})
79-
.selector('#aphid')
80-
.style({
81-
'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
82-
})
83-
.selector('#rose')
84-
.style({
85-
'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
86-
})
87-
.selector('#grasshopper')
88-
.style({
89-
'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
90-
})
91-
.selector('#plant')
92-
.style({
93-
'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
94-
})
95-
.selector('#wheat')
96-
.style({
97-
'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
98-
}),
99-
100-
elements: {
101-
nodes: [
102-
{ data: { id: 'cat' } },
103-
{ data: { id: 'bird' } },
104-
{ data: { id: 'ladybug' } },
105-
{ data: { id: 'aphid' } },
106-
{ data: { id: 'rose' } },
107-
{ data: { id: 'grasshopper' } },
108-
{ data: { id: 'plant' } },
109-
{ data: { id: 'wheat' } }
110-
],
111-
edges: [
112-
{ data: { source: 'cat', target: 'bird' } },
113-
{ data: { source: 'bird', target: 'ladybug' } },
114-
{ data: { source: 'bird', target: 'grasshopper' } },
115-
{ data: { source: 'grasshopper', target: 'plant' } },
116-
{ data: { source: 'grasshopper', target: 'wheat' } },
117-
{ data: { source: 'ladybug', target: 'aphid' } },
118-
{ data: { source: 'aphid', target: 'rose' } }
119-
]
120-
},
121-
122-
layout: {
123-
name: 'breadthfirst',
124-
directed: true,
125-
padding: 10
126-
}
127-
}); // cy init
128-
129-
cy.on('tap', 'node', function(){
130-
var nodes = this;
131-
var tapped = nodes;
132-
var food = [];
133-
134-
nodes.addClass('eater');
135-
136-
for(;;){
137-
var connectedEdges = nodes.connectedEdges(function( edge ){
138-
return !edge.target().anySame( nodes );
139-
});
140-
141-
var connectedNodes = connectedEdges.targets();
142-
143-
Array.prototype.push.apply( food, connectedNodes );
144-
145-
nodes = connectedNodes;
146-
147-
if( nodes.empty() ){ break; }
148-
}
149-
150-
var delay = 0;
151-
var duration = 500;
152-
for( var i = food.length - 1; i >= 0; i-- ){ (function(){
153-
var thisFood = food[i];
154-
var eater = thisFood.connectedEdges(function( edge ){
155-
return edge.target().same(thisFood);
156-
}).source();
157-
158-
thisFood.delay( delay, function(){
159-
eater.addClass('eating');
160-
} ).animate({
161-
position: eater.position(),
162-
css: {
163-
'width': 10,
164-
'height': 10,
165-
'border-width': 0,
166-
'opacity': 0
167-
}
168-
}, {
169-
duration: duration,
170-
complete: function(){
171-
thisFood.remove();
172-
}
173-
});
174-
175-
delay += duration;
176-
})(); } // for
177-
178-
}); // on tap
38+
//
39+
String.prototype.replaceAll = function(search, replacement) {
40+
var target = this;
41+
return target.replace(new RegExp(search, 'g'), replacement);
42+
};
43+
44+
// find main element variable
45+
findMainVar = function(content) {
46+
var tags = ["yourDiv", "mainDiv", "rootDiv", "masterDiv", "biojsDiv"];
47+
var defaultDiv = tags[0];
48+
tags.forEach(function(tag) {
49+
if (content.indexOf(tag) >= 0) {
50+
defaultDiv = tag;
51+
}
52+
});
53+
return defaultDiv;
54+
};
55+
56+
// translate relative paths
57+
translateRelative = function(body, baseLocal, path) {
58+
if (body.indexOf("./") >= 0) {
59+
var htmlUrl = baseLocal + "/" + path + "/";
60+
body = body.replace(/\.\.\//g, baseLocal + "/");
61+
body = body.replace(/\.\//g, htmlUrl);
62+
}
63+
return body;
64+
};
65+
66+
67+
var script = document.getElementById("placeholderDiv").innerHTML;
68+
script = script.replaceAll("&lt;", "<");
69+
script = script.replaceAll("&gt;", ">");
70+
71+
var githubURL = "{{component.github_url}}";
72+
var lastCommitHash = "{{component.latest_commit_hash}}";
73+
74+
var div = findMainVar(script);
75+
var mainDiv = "var "+div+" = document.getElementById('snippetDiv');"
76+
77+
// get rawgit base URL
78+
var rawgitURL = githubURL.replace("github.com", "cdn.rawgit.com");
79+
if(rawgitURL.substr(rawgitURL.length - 1) === '/') {
80+
rawgitURL = rawgitURL + '' + lastCommitHash;
81+
} else {
82+
rawgitURL = rawgitURL + '/' + lastCommitHash;
83+
}
84+
85+
// change relative paths in script
86+
script = translateRelative(script, rawgitURL, "snippets");
87+
88+
// complete script and evaluate the script
89+
script = mainDiv + script;
90+
eval(script);
91+
17992
</script>
180-
<!-- <script src="https://ajax.cloudflare.com/cdn-cgi/scripts/4f936b58/cloudflare-static/rocket-loader.min.js" data-cf-nonce="" defer=""></script> -->
181-
182-
<!-- <script src={{snippet.url}} ></script> -->
18393
</html>

‎main/views.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ def render_visualization(request, url_name, visualization_name):
6767
snippet = Snippet.objects.get(sniperData=sniper_data, name=visualization_name)
6868
data = urllib.urlopen(snippet.url).read()
6969
context = {
70-
'component' : component,
70+
'component' : DetailComponentSerializer(component).data,
7171
'js_dependencies' : js_dependencies,
7272
'css_dependencies' : css_dependencies,
7373
'snippet' : snippet,

0 commit comments

Comments
 (0)