Skip to content

Commit 927ee05

Browse files
sarthak-sehgalsarthak-sehgal
committed
Initiated frontend for visualizations
1 parent a334360 commit 927ee05

File tree

1 file changed

+166
-4
lines changed

1 file changed

+166
-4
lines changed

‎main/templates/main/visualizations.html

Lines changed: 166 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,170 @@
1414
{% endcomment %}
1515

1616
<html>
17-
<body>
18-
Hello World!
19-
You requested {{snippet.name}} snippet of {{component.name}}. Wzrd URL is {{sniper_data.wzrd_url}}.
20-
</body>
17+
<head>
18+
{% for dependency in css_dependencies %}
19+
<link rel="stylesheet" type="text/css" href="{{dependency.css_url}}" />
20+
{% endfor %}
21+
{% for dependency in js_dependencies %}
22+
<script src="{{dependency.js_url}}"></script>
23+
{% endfor %}
24+
<script src={{sniper_data.wzrd_url}}@{{component.version}}></script>
25+
</head>
26+
<body>
27+
<div id='snippetDiv'></div>
28+
</body>
29+
<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
179+
</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> -->
21183
</html>

0 commit comments

Comments
 (0)