NIFI-3301: Provenance UI Cursor Styling

- Addressing inconsistent cursor styling and drag behavior in lineage graph.

This closes #1430.

Signed-off-by: James Wing <jvwing@gmail.com>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css

@@ -473,12 +473,19 @@ path.link.selected {
     stroke: #ba554a;
 }
 
+g.event {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 g.event circle.selected {
     fill: #ba554a;
 }
 
 text.event-type {
-    cursor: pointer;
     font-family: Roboto;
     font-size: 11px;
     font-style: normal;
@@ -492,6 +499,14 @@ text.event-type.expand-parents, text.event-type.expand-children {
     font-size: 13px;
 }
 
+g.flowfile {
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 g.flowfile circle.context, g.event circle.context {
     stroke: #004849;
     stroke-width: 1.5px;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js

@@ -553,6 +553,9 @@
                     // hide the context menu if necessary
                     d3.selectAll('circle.context').classed('context', false);
                     $('#provenance-lineage-context-menu').hide().empty();
+
+                    // prevents browser from using text cursor
+                    d3.event.preventDefault();
                 })
                 .on('contextmenu', function () {
                     var contextMenu = $('#provenance-lineage-context-menu');
@@ -672,7 +675,11 @@
 
             // renders flowfile nodes
             var renderFlowFile = function (flowfiles) {
-                flowfiles.classed('flowfile', true);
+                flowfiles
+                    .classed('flowfile', true)
+                    .on('mousedown', function (d) {
+                        d3.event.stopPropagation();
+                    });
 
                 // node
                 flowfiles.append('circle')
@@ -682,16 +689,6 @@
                         'stroke': '#000',
                         'stroke-width': 1.0
                     })
-                    .on('mousedown', function (d) {
-                        // empty context menu if necessary
-                        $('#provenance-lineage-context-menu').hide().empty();
-
-                        // prevents the drag event when something other than the
-                        // left button is clicked
-                        if (d3.event.button !== 0) {
-                            d3.event.stopPropagation();
-                        }
-                    }, true)
                     .on('mouseover', function (d) {
                         links.filter(function (linkDatum) {
                             return d.id === linkDatum.flowFileUuid;
@@ -725,16 +722,6 @@
                             return 'translate(0,15)';
                         }
                     })
-                    .on('mousedown', function (d) {
-                        // empty context menu if necessary
-                        $('#provenance-lineage-context-menu').hide().empty();
-
-                        // prevents the drag event when something other than the
-                        // left button is clicked
-                        if (d3.event.button !== 0) {
-                            d3.event.stopPropagation();
-                        }
-                    }, true)
                     .on('mouseover', function (d) {
                         links.filter(function (linkDatum) {
                             return d.id === linkDatum.flowFileUuid;
@@ -753,31 +740,11 @@
                             });
                     })
                     .text(function (d) {
-                        return '\ue808'
+                        return '\ue808';
                     });
             };
 
-            // renders event nodes
+            var showContextMenu = function (d, provenanceTableCtrl) {
-            var renderEvent = function (events, provenanceTableCtrl) {
-                events
-                    .classed('event', true)
-                    .append('circle')
-                    .classed('selected', function (d) {
-                        return d.id === eventId;
-                    })
-                    .attr({
-                        'r': 8,
-                        'fill': '#aabbc3',
-                        'stroke': '#000',
-                        'stroke-width': 1.0,
-                        'id': function (d) {
-                            return 'event-node-' + d.id;
-                        }
-                    })
-                    .on('contextmenu', function (d) {
-                        // select the current node for a visible cue
-                        d3.select(this).classed('context', true);
-
                 // empty an previous contents - in case they right click on the
                 // node twice without closing the previous context menu
                 $('#provenance-lineage-context-menu').hide().empty();
@@ -1034,6 +1001,36 @@
 
                 // show the context menu for an event
                 addContextMenuItems(menuItems);
+            };
+
+            // renders event nodes
+            var renderEvent = function (events, provenanceTableCtrl) {
+                events
+                    .on('contextmenu', function (d) {
+                        // select the current node for a visible cue
+                        d3.select('#event-node-' + d.id).classed('context', true);
+
+                        // show the context menu
+                        showContextMenu(d, provenanceTableCtrl);
+                    })
+                    .on('mousedown', function (d) {
+                        d3.event.stopPropagation();
+                    });
+
+                events
+                    .classed('event', true)
+                    .append('circle')
+                    .classed('selected', function (d) {
+                        return d.id === eventId;
+                    })
+                    .attr({
+                        'r': 8,
+                        'fill': '#aabbc3',
+                        'stroke': '#000',
+                        'stroke-width': 1.0,
+                        'id': function (d) {
+                            return 'event-node-' + d.id;
+                        }
                     });
 
                 events