181 def __init__(self, store_arrays_with_dependencies_JSON):
182 """Create a new dependency viewer."""
183
184 self.store_arrays_with_dependencies_JSON = store_arrays_with_dependencies_JSON
185
186
187 self.random_name = ''.join(random.choice(string.ascii_letters) for _ in range(10))
188
189 self.element_name = "dependencies_" + self.random_name
190
191
192 self.d3_include_string = """<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>"""
193
194
195 self.d3_element_string = f"""<div id="{self.element_name}"></div>"""
196
197
198 self.style_template = """<style>
199 /* d3 related settings */
200 .node {
201 font: 300 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
202 fill:
203 cursor: pointer;
204 }
205
206 .node:hover {
207 fill:
208 }
209
210 .link {
211 stroke: rgba(20, 166, 255, 0.3);
212 stroke-width: 2px;
213 fill: none;
214 pointer-events: none;
215 }
216
217 .node:hover,
218 .node--source,
219 .node--target {
220 font-weight: 700;
221 }
222
223 .node--source {
224 fill:
225 }
226
227 .node--target {
228 fill:
229 }
230
231 .link--source,
232 .link--target {
233 stroke-opacity: 1;
234 stroke-width: 4px;
235 }
236
237 .link--source {
238 stroke:
239 }
240
241 .link--target {
242 stroke:
243 }
244 </style>"""
245
246
247 self.nodes_template = f"""<script>var test_nodes = JSON.parse('{self.store_arrays_with_dependencies_JSON}');</script>"""
248
249
250 self.viewer_template = self.d3_include_string + self.nodes_template + self.d3_element_string + self.style_template + """
251 <script>
252 var diameter = 960;
253 var radius = diameter / 2;
254 var innerRadius = radius - 120;
255
256 var cluster = d3.layout.cluster()
257 .size([360, innerRadius])
258 .sort(null)
259 .value(function(d) { return d.size; });
260
261 var bundle = d3.layout.bundle();
262
263 var line = d3.svg.line.radial()
264 .interpolate("bundle")
265 .tension(.85)
266 .radius(function(d) { return d.y; })
267 .angle(function(d) { return d.x / 180 * Math.PI; });
268
269 var svg = d3.select("#""" + self.element_name + """").append("svg")
270 .attr("width", diameter)
271 .attr("height", diameter)
272 .append("g")
273 .attr("transform", "translate(" + radius + "," + radius + ")");
274
275 var link = svg.append("g").selectAll(".link");
276 var node = svg.append("g").selectAll(".node");
277
278 var nodes = cluster.nodes(test_nodes);
280
281 link = link
282 .data(bundle(links))
283 .enter()
284 .append("path")
285 .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
286 .attr("class", "link")
287 .attr("d", line);
288
289 node = node
290 .data(nodes.filter(function(n) { return !n.children; }))
291 .enter()
292 .append("text")
293 .attr("class", "node")
294 .attr("dy", ".31em")
295 .attr("transform", function(d) {
296 return "rotate(" + (d.x - 90) +
297 ")translate(" + (d.y + 8) + ",0)"
298 + (d.x < 180 ? "" : "rotate(180)");})
299 .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
300 .text(function(d) { return d.key; })
301 .on("mouseover", mouseovered)
302 .on("mouseout", mouseouted);
303
304 function mouseovered(d) {
305 node.each(function(n) { n.target = n.source = false; });
306
307 link.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
308 .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
309 .filter(function(l) { return l.target === d || l.source === d; })
310 .each(function() { this.parentNode.appendChild(this); });
311
312 node.classed("node--target", function(n) { return n.target; })
313 .classed("node--source", function(n) { return n.source; });
314 }
315
316 function mouseouted(d) {
317 link.classed("link--target", false)
318 .classed("link--source", false);
319
320 node.classed("node--target", false)
321 .classed("node--source", false);
322 }
323
324 d3.select(self.frameElement).style("height", diameter + "px");
325
326 // Return a list of imports for the given array of nodes.
328 var map = {},
329 relation = [];
330
331 // Compute a map from name to node.
332 nodes.forEach(function(d) {
333 map[d.name] = d;
334 });
335
336 // For each import, construct a link from the source to target node.
337 nodes.forEach(function(d) {
338 if (d.relation) d.relation.forEach(function(i) {
339 relation.push({source: map[d.name], target: map[i]});
340 });
341 });
342
343 return relation;
344 }
345 </script>
346 """
347
1.9.6