Merge pull request #504 from BonfaceKilz/feature/display-svg-graph-of-deps

Feature/display svg graph of deps

3 files changed, 24 insertions, 1 deletions

diff --git a/wqflask/wqflask/markdown_routes.py b/wqflask/wqflask/markdown_routes.py
index 3b60bc96..ebf75807 100644
--- a/wqflask/wqflask/markdown_routes.py
+++ b/wqflask/wqflask/markdown_routes.py
@@ -9,6 +9,7 @@ import sys
 
 from bs4 import BeautifulSoup
 
+from flask import send_from_directory
 from flask import Blueprint
 from flask import render_template
 
@@ -99,6 +100,13 @@ def environments():
             200)
 
 
+@environments_blueprint.route('/svg-dependency-graph')
+def svg_graph():
+    directory, file_name, _ = get_file_from_python_search_path(
+            "wqflask/dependency-graph.svg").partition("dependency-graph.svg")
+    return send_from_directory(directory, file_name)
+
+
 @links_blueprint.route("/")
 def links():
     return render_template(
diff --git a/wqflask/wqflask/static/new/css/markdown.css b/wqflask/wqflask/static/new/css/markdown.css
index 38d664e2..859fe7fc 100644
--- a/wqflask/wqflask/static/new/css/markdown.css
+++ b/wqflask/wqflask/static/new/css/markdown.css
@@ -62,7 +62,8 @@
 }
 
 .graph-legend,
-#guix-graph {
+#guix-graph,
+#guix-svg-graph{
     width: 90%;
     margin: 10px auto;
 }
@@ -71,6 +72,10 @@
     border: solid 2px black;
 }
 
+#guix-svg-graph img {
+    width: 100%;
+}
+
 #markdown table {
     width: 100%;
 }
diff --git a/wqflask/wqflask/templates/environment.html b/wqflask/wqflask/templates/environment.html
index 5fe01dad..89e805ce 100644
--- a/wqflask/wqflask/templates/environment.html
+++ b/wqflask/wqflask/templates/environment.html
@@ -21,6 +21,16 @@
 </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 %}