Add legend to explain colours in the graph

MarkRobbo · Mark Robinson · commit 3bdd959e1259 · 2017-06-16T14:53:40.000+01:00
diff --git a/src/main/resources/static/css/main-20170616.css b/src/main/resources/static/css/main-20170616.css
@@ -138,6 +138,7 @@ body {
     overflow: hidden;
     padding: 0;
     height: 500px;
+    margin-bottom: 10px;
 }
 
 @media (max-width: 767px) {
@@ -180,6 +181,26 @@ body {
     color: #c30000;
 }
 
+
+.legend {
+    list-style: none;
+    height:30px;
+}
+.legend li { float: right; margin-right: 15px; }
+.legend span {
+    border: 1px solid #ccc;
+    float: left;
+    width: 20px;
+    height: 15px;
+    margin: 2px 4px 2px 2px;
+}
+
+.legend .inputoutputs { background-color: #94DDF4; }
+.legend .tools { background-color: #FAFAD2; }
+.legend .nestedworkflows { background-color: #F3CEA1; }
+.legend .defaults { background-color: #D5AEFC; }
+.legend .selectednode { background-color: #B9FFBB; }
+
 tr.selected, .table-hover tbody tr.selected:hover td, .table-hover tbody tr.selected:hover th {
     background-color: #b9ffbb !important;
 }
diff --git a/src/main/resources/templates/fragments/error.html b/src/main/resources/templates/fragments/error.html
@@ -24,7 +24,7 @@
         <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-20170517.css}" href="../static/css/main-20170517.css" />
+        <link rel="stylesheet" type="text/css" th:href="@{/css/main-20170616.css}" href="../static/css/main-20170616.css" />
         <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" href="../static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
     </head>
     <body>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
@@ -20,7 +20,7 @@
 
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170517.css" />
+    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170616.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 </head>
 <body>
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
@@ -20,7 +20,7 @@
 
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170517.css" />
+    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170616.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 </head>
 <body>
diff --git a/src/main/resources/templates/fragments/pagination.html b/src/main/resources/templates/fragments/pagination.html
@@ -20,7 +20,7 @@
 
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
-    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170517.css" />
+    <link rel="stylesheet" type="text/css" href="../../static/css/main-20170616.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 </head>
 <body>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -23,7 +23,7 @@
         <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-20170517.css}" href="../static/css/main-20170517.css" />
+        <link rel="stylesheet" type="text/css" th:href="@{/css/main-20170616.css}" href="../static/css/main-20170616.css" />
         <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" href="../static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
     </head>
     <body>
diff --git a/src/main/resources/templates/selectworkflow.html b/src/main/resources/templates/selectworkflow.html
@@ -23,7 +23,7 @@
         <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-20170517.css}" href="../static/css/main-20170517.css" />
+        <link rel="stylesheet" type="text/css" th:href="@{/css/main-20170616.css}" href="../static/css/main-20170616.css" />
         <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" href="../static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
     </head>
     <body>
diff --git a/src/main/resources/templates/workflow.html b/src/main/resources/templates/workflow.html
@@ -29,7 +29,7 @@
     <meta name="twitter:image" th:content="${appURL + '/workflows/' + workflow.id + '/graph/png'}" />
     <title>Common Workflow Language Viewer</title>
     <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-20170517.css}" href="../static/css/main-20170517.css" />
+    <link rel="stylesheet" type="text/css" th:href="@{/css/main-20170616.css}" href="../static/css/main-20170616.css" />
 </head>
 <body>
 
@@ -165,6 +165,14 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
                 <img id="selectParents" class="graphControl" th:src="@{/img/parents-logo.svg}" src="../static/img/parents-logo.svg" alt="parents" data-tooltip="true" title="Select All Parents" />
                 <div id="graph" data-th-attr="data-svgurl=@{'/workflows/' + ${workflow.id} + '/graph/svg'}"></div>
             </div>
+            <ul class="legend">
+                <li><span class="selectednode"></span> Selected</li>
+                <li class="hidden-xs">|</li>
+                <li><span class="defaults"></span> Default Values</li>
+                <li><span class="nestedworkflows"></span> Nested Workflows</li>
+                <li><span class="tools"></span> Tools</li>
+                <li><span class="inputoutputs"></span> Inputs/Outputs</li>
+            </ul>
             <div th:if="${workflow.dockerLink != null}">
                 <h2 style="float:left;">Requires: </h2>
                 <a th:unless="${workflow.dockerLink == 'true'}" th:href="${workflow.dockerLink}" rel="noopener" target="_blank">
diff --git a/src/main/resources/templates/workflows.html b/src/main/resources/templates/workflows.html
@@ -23,7 +23,7 @@
         <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-20170517.css}" href="../static/css/main-20170517.css" />
+        <link rel="stylesheet" type="text/css" th:href="@{/css/main-20170616.css}" href="../static/css/main-20170616.css" />
         <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}" href="../static/bower_components/bootstrap/dist/css/bootstrap.min.css" />
     </head>
     <body>
