1 files changed, 160 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/environment.html b/gn2/wqflask/templates/environment.html
new file mode 100644
index 00000000..89e805ce
--- /dev/null
+++ b/gn2/wqflask/templates/environment.html
@@ -0,0 +1,160 @@
+{% extends "base.html" %}
+
+{% block title %}Glossary{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />
+{% endblock %}
+
+{% block content %}
+
+<div id="markdown" class="container">
+	
+   <div  class="cls-table-style">{{ rendered_markdown|safe }} </div>
+</div>
+
+{% if svg_data %}
+
+<div class="graph-legend">
+    <h1>Chord dependency Graph of Genenetwork2</h1>
+    Graph generated from <a href="http://git.genenetwork.org/guix-bioinformatics/guix-bioinformatics/src/branch/master/gn/packages/genenetwork.scm">genenetwork.scm</a>. You can zoom in and out within the bounding box.
+</div>
+
+<div id="guix-graph"></div>
+
+<!-- Display the svg graph -->
+
+<div id="guix-svg-graph">
+    <h1>The dependency graph is shown below</h1>
+
+    <p>To explore this image SVG you may want to open it in new browser page and zoom in. Or use an SVG viewing application.</p>
+
+    <img alt="Dependency graph of the tools needed to build python3-genenetwork2" src="{{url_for('environments_blueprint.svg_graph')}}"/>
+</div>
+{% endif %}
+
+{% endblock %}
+
+{% block js %}
+
+{% if svg_data %}
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='d3js/d3.min.js') }}"></script>
+<script type="text/javascript">
+ {{ svg_data|safe }}
+ // based on http://bl.ocks.org/mbostock/1046712 under GPLv3
+ // Adapted from: https://elephly.net/graph.html
+ var outerRadius = (nodeArray.length * 10) / 2,
+     innerRadius = outerRadius - 100,
+     width = outerRadius * 2,
+     height = outerRadius * 2,
+     colors = d3.scale.category20c(),
+     matrix = [];
+
+ function neighborsOf (node) {
+     return links.filter(function (e) {
+         return e.source === node;
+     }).map(function (e) {
+         return e.target;
+     });
+ }
+
+ function zoomed () {
+     zoomer.attr("transform",
+                 "translate(" + d3.event.translate + ")" +
+                 "scale(" + d3.event.scale + ")");
+ }
+
+ function fade (opacity, root) {
+     return function (g, i) {
+         root.selectAll("g path.chord")
+             .filter(function (d) {
+                 return d.source.index != i && d.target.index != i;
+             })
+             .transition()
+             .style("opacity", opacity);
+     };
+ }
+
+ // Now that we have all nodes in an object we can replace each reference
+ // with the actual node object.
+ links.forEach(function (link) {
+     link.target = nodes[link.target];
+     link.source = nodes[link.source];
+ });
+
+ // Construct a square matrix for package dependencies
+ nodeArray.forEach(function (d, index, arr) {
+     var source = index,
+         row = matrix[source];
+     if (!row) {
+         row = matrix[source] = [];
+         for (var i = -1; ++i < arr.length;) row[i] = 0;
+     }
+     neighborsOf(d).forEach(function (d) { row[d.index]++; });
+ });
+
+ // chord layout
+ var chord = d3.layout.chord()
+               .padding(0.01)
+               .sortSubgroups(d3.descending)
+               .sortChords(d3.descending)
+               .matrix(matrix);
+
+ var arc = d3.svg.arc()
+             .innerRadius(innerRadius)
+             .outerRadius(innerRadius + 20);
+
+ var zoom = d3.behavior.zoom()
+              .scaleExtent([0.1, 10])
+              .on("zoom", zoomed);
+
+ var svg = d3.select("#guix-graph").append("svg")
+             .attr("width", "100%")
+             .attr("height", "100%")
+             .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
+             .attr('preserveAspectRatio','xMinYMin')
+             .call(zoom);
+
+ var zoomer = svg.append("g");
+
+ var container = zoomer.append("g")
+                       .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
+
+ // Group for arcs and labels
+ var g = container.selectAll(".group")
+                  .data(chord.groups)
+                  .enter().append("g")
+                  .attr("class", "group")
+                  .on("mouseout", fade(1, container))
+                  .on("mouseover", fade(0.1, container));
+
+ // Draw one segment per package
+ g.append("path")
+  .style("fill",   function (d) { return colors(d.index); })
+  .style("stroke", function (d) { return colors(d.index); })
+  .attr("d", arc);
+
+ // Add circular labels
+ g.append("text")
+  .each(function (d) { d.angle = (d.startAngle + d.endAngle) / 2; })
+  .attr("dy", ".35em")
+  .attr("transform", function (d) {
+      return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+           + "translate(" + (innerRadius + 26) + ")"
+           + (d.angle > Math.PI ? "rotate(180)" : "");
+  })
+  .style("text-anchor", function (d) { return d.angle > Math.PI ? "end" : null; })
+  .text(function (d) { return nodeArray[d.index].label; });
+
+ // Draw chords from source to target; color by source.
+ container.selectAll(".chord")
+          .data(chord.chords)
+          .enter().append("path")
+          .attr("class", "chord")
+          .style("stroke", function (d) { return d3.rgb(colors(d.source.index)).darker(); })
+          .style("fill", function (d) { return colors(d.source.index); })
+          .attr("d", d3.svg.chord().radius(innerRadius));
+</script>
+{% endif %}
+
+{% endblock %}