Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Matt Gilman 2017-01-20 16:46:12 -05:00 committed by James Wing
parent dc934cbb8e
commit 79ca30be4a
2 changed files with 296 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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 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);
var showContextMenu = function (d, provenanceTableCtrl) {
// 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