Add download link and svg image to page

Author: Mark Robinson

src/main/resources/static/js/workflow.js

@@ -40,7 +40,7 @@ requirejs.config({
 require(['jquery', 'bootstrap.modal', 'svg-pan-zoom'],
     function ($, modal, svgPanZoom) {
         // Enable svg-pan-zoom on the graph
-        svgPanZoom('svg', {
+        svgPanZoom('#graph', {
             zoomEnabled: true,
             controlIconsEnabled: true
         });

src/main/resources/templates/workflow.html

@@ -121,16 +121,17 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
                 <a id="download-link-graph" href="" download="workflow.png"></a>
                 <strong>Graph: </strong>
                 <button id="view-dot" class="btn btn-primary" type="button" data-toggle="modal" data-target="#dotGraph">View DOT</button>
-                <button id="download-graph" class="btn btn-primary" type="button">Download Image</button>
+                <a id="download-graph" class="btn btn-primary" type="button" th:href="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" download="graph.svg">Download Image</a>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-12">
             <div id="visualisation" class="jumbotron">
                 <div id="loading">
-                    <img src="../static/img/loading.svg" th:src="@{/img/loading.svg}" />
-                    <span>Drawing Workflow...</span>
+                    <object id="graph" th:data="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" type="image/svg+xml">
+                        <img th:src="@{'/workflows/' + ${workflow.id} + '/graph/png'}" alt="workflow graph" />
+                    </object>
                 </div>
                 <div id="graph"></div>
             </div>