GraphNode: make jobs click-able

* Allow job nodes to be clicked on in the Graph view.

Author: oliver-sanders

src/components/cylc/GraphNode.vue

@@ -77,9 +77,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           scale(${ (index === 0) ? mostRecentJobScale : '1' })
         `"
       >
-        <job
-          :svg="true"
-          :status="job.node.state"
+        <symbol
+          :id="`${nodeID}-${index}`"
+          viewBox="0 0 100 100"
+          :class="`job_theme--${jobTheme}`"
+        >
+          <!--
+            Use a "symbol" for job nodes in order to make them clickable.
+            The job theme must be set on the "symbol" for styling to work.
+          -->
+          <job
+            :svg="true"
+            :status="job.node.state"
+          />
+        </symbol>
+        <use
+          :href="`#${nodeID}-${index}`"
+          width="100" height="100"
+          v-cylc-object="job"
         />
       </g>
       <!-- overflow indicator if there are surplus jobs -->
@@ -130,6 +145,9 @@ export default {
       // the size of the most recent job icon relative to any previos jobs
       default: 1.2,
       required: false
+    },
+    jobTheme: {
+      required: true
     }
   },
   computed: {

src/styles/cylc/_job.scss

@@ -150,14 +150,14 @@ $cjob: ".c-job .job rect";
 
 // if overridden elsewhere the new value should take priority
 // (this allows us to override the theme in the user-profile
-#app .job_theme--default {
+.job_theme--default {
     @include job_theme_default
 }
 
-#app .job_theme--greyscale {
+.job_theme--greyscale {
     @include job_theme_greyscale
 }
 
-#app .job_theme--colour_blind {
+.job_theme--colour_blind {
     @include job_theme_colour_blind
 }

src/views/Graph.vue

@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       width="100%"
       height="100%"
       ref="graph"
-      class="graph"
+      class="graph job_theme--default"
     >
       <defs>
         <marker
@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </marker>
       </defs>
       <g
-        class="svg-pan-zoom_viewport"
+        class="svg-pan-zoom_viewport job_theme--default"
       >
         <!-- the nodes -->
         <g
@@ -58,6 +58,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <GraphNode
             :task="node"
             :jobs="node.children"
+            :jobTheme="jobTheme"
           />
         </g>
         <!-- the edges
@@ -93,7 +94,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Vue from 'vue'
 import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import pageMixin from '@/mixins/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -303,6 +304,7 @@ export default {
     clearInterval(this.refreshTimer)
   },
   computed: {
+    ...mapState('app', ['jobTheme']),
     ...mapGetters('workflows', ['getNodes']),
     query () {
       return new SubscriptionQuery(