Add selection and hover highlighting when clicking the graph nodes

Author: Mark Robinson

src/main/resources/static/css/main.css

@@ -21,10 +21,6 @@ body {
     padding-top: 61px;
 }
 
-.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
-    background-color: rgba(0, 255, 0, 0.11);
-}
-
 .hide {
     display: none;
 }
@@ -72,6 +68,18 @@ body {
     stroke-width: 0;
 }
 
+#graph svg text {
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#graph svg text::selection {
+    background: none;
+}
+
 #loading {
     width: 150px;
     margin: 0 auto;
@@ -81,6 +89,22 @@ body {
     margin-bottom: 5px;
 }
 
+tr.selected, .table-hover tbody tr.selected:hover td, .table-hover tbody tr.selected:hover th {
+    background-color: #adffaf !important;
+}
+
+tr.hover, .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
+    background-color: #c9ffcb !important;
+}
+
+path.selected, path.hover.selected {
+    fill: #adffaf;
+}
+
+path.hover {
+    fill: #c9ffcb;
+}
+
 #footer {
     text-align: center;
     font-style: italic;

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

@@ -61,7 +61,8 @@ require(['jquery', 'bootstrap.modal', 'renderer', 'svg-pan-zoom'],
             setTimeout(function() {
                 svgPanZoom('svg', {
                     zoomEnabled: true,
-                    controlIconsEnabled: true
+                    controlIconsEnabled: true,
+                    preventMouseEventsDefault: false
                 });
             }, 1000);
         });
@@ -171,15 +172,49 @@ require(['jquery'],
             }).siblings("path");
         }
 
-        // When a table row is selected
-        $( "tr" ).hover(function() {
-            // Highlight, keeping previous in an attribute
-            var graphBox = getGraphBox(this);
-            graphBox.attr("data-prevfill", graphBox.css("fill"));
-            graphBox.css("fill", "rgba(0, 255, 0, 0.11)");
+        // When a table row is hovered over, highlight
+        var tableBodyRow = $("tr").not('thead tr');
+        tableBodyRow.hover(function() {
+            getGraphBox(this).addClass("hover");
         }, function() {
-            // Unhighlight
-            var graphBox = getGraphBox(this);
-            graphBox.css("fill", graphBox.attr("data-prevfill"));
+            getGraphBox(this).removeClass("hover");
+        });
+
+        // When a table row is selected
+        tableBodyRow.click(function() {
+            getGraphBox(this).toggleClass("selected");
+            $(this).toggleClass("selected");
         });
+
+        /**
+         * Gets the corresponding table row for a graph box
+         * @param trElement The graph box element
+         * @return The table row(s)
+         */
+        function getTableRow(gbElement) {
+            // Title of the CWL element
+            var elementTitle = $(gbElement).find("title").html();
+
+            // Find corresponding table row and return
+            return $("tr").filter(function() {
+                return $(this).find("td:first").html() == elementTitle;
+            });
+        }
+
+        // When a graph box is hovered over or clicked, highlight
+        $(document).on({
+            click: function() {
+                getTableRow(this).toggleClass("selected");
+                $(this).find("path").toggleClass("selected");
+            },
+            mouseenter: function() {
+                getTableRow(this).addClass("hover");
+                $(this).find("path").addClass("hover");
+            },
+            mouseleave: function() {
+                getTableRow(this).removeClass("hover");
+                $(this).find("path").removeClass("hover");
+            }
+        }, ".node");
+
     });

src/main/resources/templates/workflow.html

@@ -23,8 +23,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Common Workflow Language Viewer</title>
-    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css" />
     <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" href="../static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
+    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css" />
 </head>
 <body>