1 files changed, 53 insertions, 17 deletions

diff --git a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
index 063ec091e4d..d12baa9617e 100644
--- a/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
+++ b/app/assets/javascripts/pipelines/components/dag/dag_graph.vue
@@ -1,8 +1,17 @@
 <script>
 import * as d3 from 'd3';
 import { uniqueId } from 'lodash';
-import { LINK_SELECTOR, NODE_SELECTOR, PARSE_FAILURE } from './constants';
 import {
+  LINK_SELECTOR,
+  NODE_SELECTOR,
+  PARSE_FAILURE,
+  ADD_NOTE,
+  REMOVE_NOTE,
+  REPLACE_NOTES,
+} from './constants';
+import {
+  currentIsLive,
+  getLiveLinksAsDict,
   highlightLinks,
   restoreLinks,
   toggleLinkHighlight,
@@ -25,6 +34,11 @@ export default {
     containerClasses: ['dag-graph-container', 'gl-display-flex', 'gl-flex-direction-column'].join(
       ' ',
     ),
+    hoverFadeClasses: [
+      'gl-cursor-pointer',
+      'gl-transition-duration-slow',
+      'gl-transition-timing-function-ease',
+    ].join(' '),
   },
   gitLabColorRotation: [
     '#e17223',
@@ -50,8 +64,8 @@ export default {
   data() {
     return {
       color: () => {},
-      width: 0,
       height: 0,
+      width: 0,
     };
   },
   mounted() {
@@ -60,7 +74,7 @@ export default {
     try {
       countedAndTransformed = this.transformData(this.graphData);
     } catch {
-      this.$emit('onFailure', PARSE_FAILURE);
+      this.$emit('on-failure', PARSE_FAILURE);
       return;
     }
 
@@ -90,17 +104,33 @@ export default {
     },
 
     appendLinkInteractions(link) {
+      const { baseOpacity } = this.$options.viewOptions;
       return link
-        .on('mouseover', highlightLinks)
-        .on('mouseout', restoreLinks.bind(null, this.$options.viewOptions.baseOpacity))
-        .on('click', toggleLinkHighlight.bind(null, this.$options.viewOptions.baseOpacity));
+        .on('mouseover', (d, idx, collection) => {
+          if (currentIsLive(idx, collection)) {
+            return;
+          }
+          this.$emit('update-annotation', { type: ADD_NOTE, data: d });
+          highlightLinks(d, idx, collection);
+        })
+        .on('mouseout', (d, idx, collection) => {
+          if (currentIsLive(idx, collection)) {
+            return;
+          }
+          this.$emit('update-annotation', { type: REMOVE_NOTE, data: d });
+          restoreLinks(baseOpacity);
+        })
+        .on('click', (d, idx, collection) => {
+          toggleLinkHighlight(baseOpacity, d, idx, collection);
+          this.$emit('update-annotation', { type: REPLACE_NOTES, data: getLiveLinksAsDict() });
+        });
     },
 
     appendNodeInteractions(node) {
-      return node.on(
-        'click',
-        togglePathHighlights.bind(null, this.$options.viewOptions.baseOpacity),
-      );
+      return node.on('click', (d, idx, collection) => {
+        togglePathHighlights(this.$options.viewOptions.baseOpacity, d, idx, collection);
+        this.$emit('update-annotation', { type: REPLACE_NOTES, data: getLiveLinksAsDict() });
+      });
     },
 
     appendLabelAsForeignObject(d, i, n) {
@@ -230,7 +260,10 @@ export default {
         .attr('id', d => {
           return this.createAndAssignId(d, 'uid', LINK_SELECTOR);
         })
-        .classed(`${LINK_SELECTOR} gl-cursor-pointer`, true);
+        .classed(
+          `${LINK_SELECTOR} gl-transition-property-stroke-opacity ${this.$options.viewOptions.hoverFadeClasses}`,
+          true,
+        );
     },
 
     generateNodes(svg, nodeData) {
@@ -242,7 +275,10 @@ export default {
         .data(nodeData)
         .enter()
         .append('line')
-        .classed(`${NODE_SELECTOR} gl-cursor-pointer`, true)
+        .classed(
+          `${NODE_SELECTOR} gl-transition-property-stroke ${this.$options.viewOptions.hoverFadeClasses}`,
+          true,
+        )
         .attr('id', d => {
           return this.createAndAssignId(d, 'uid', NODE_SELECTOR);
         })
@@ -260,6 +296,11 @@ export default {
         .attr('y2', d => d.y1 - 4);
     },
 
+    initColors() {
+      const colorFn = d3.scaleOrdinal(this.$options.gitLabColorRotation);
+      return ({ name }) => colorFn(name);
+    },
+
     labelNodes(svg, nodeData) {
       return svg
         .append('g')
@@ -271,11 +312,6 @@ export default {
         .each(this.appendLabelAsForeignObject);
     },
 
-    initColors() {
-      const colorFn = d3.scaleOrdinal(this.$options.gitLabColorRotation);
-      return ({ name }) => colorFn(name);
-    },
-
     transformData(parsed) {
       const baseLayout = createSankey()(parsed);
       const cleanedNodes = removeOrphanNodes(baseLayout.nodes);