Double click on graph goes to subworkflow if possible

Author: MarkRobbo

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

@@ -87,8 +87,8 @@ require(['jquery', 'bootstrap.modal', 'svg-pan-zoom', 'hammerjs', 'jquery.svg'],
                 this.hammer.on('pinchstart pinchmove', function(ev){
                     // On pinch start remember initial zoom
                     if (ev.type === 'pinchstart') {
-                        initialScale = instance.getZoom()
-                        instance.zoom(initialScale * ev.scale)
+                        initialScale = instance.getZoom();
+                        instance.zoom(initialScale * ev.scale);
                     }
                     instance.zoom(initialScale * ev.scale)
                 });
@@ -115,6 +115,7 @@ require(['jquery', 'bootstrap.modal', 'svg-pan-zoom', 'hammerjs', 'jquery.svg'],
         function enablePanZoom() {
             var graph = svgPanZoom('#graph svg', {
                 zoomEnabled: true,
+                dblClickZoomEnabled: false,
                 controlIconsEnabled: true,
                 customEventsHandler: eventHandler
             });
@@ -163,7 +164,7 @@ require(['jquery', 'bootstrap.modal', 'svg-pan-zoom', 'hammerjs', 'jquery.svg'],
                     });
                 }, 100);
             });
-        };
+        }
     });
 
 /**
@@ -291,7 +292,7 @@ require(['jquery', 'jquery.svg', 'jquery.svgdom'],
 
         /**
          * Gets the corresponding table row for a graph box
-         * @param trElement The graph box element
+         * @param gbElement The graph box element
          * @return The table row(s)
          */
         function getTableRow(gbElement) {
@@ -334,6 +335,14 @@ require(['jquery', 'jquery.svg', 'jquery.svgdom'],
                     thisPolygon.toggleClass("selected");
                 }
             },
+            dblclick: function() {
+                // Follow link to subworkflow if possible
+                var matchingTableRow = getTableRow(this);
+                var subworkflowLink = $(matchingTableRow).find("a.subworkflow");
+                if (subworkflowLink.length > 0) {
+                    location.href = subworkflowLink.attr("href");
+                }
+            },
             mouseenter: function() {
                 getTableRow(this).addClass("hover");
                 $(this).find("polygon").addClass("hover");

src/main/resources/templates/workflow.html

@@ -230,7 +230,7 @@ <h2>Steps</h2>
                         <td th:text="${step.key}">ID</td>
                         <td>
                             <div th:if="${step.value.runType != null}">
-                                <a th:if="${step.value.runType.name() == 'WORKFLOW'}" th:href="${step.value.run}" th:text="${step.value.run}">workflow.cwl</a>
+                                <a th:if="${step.value.runType.name() == 'WORKFLOW'}" th:href="${step.value.run}" th:text="${step.value.run}" class="subworkflow">workflow.cwl</a>
                                 <span th:unless="${step.value.runType.name() == 'WORKFLOW'}" th:text="${step.value.run}">cmdlinetool.cwl</span>
                                 (<span th:text="${step.value.runType}">Workflow</span>)
                             </div>