Skip to content

Commit

Permalink
Updated action shortcuts as in develop: Updated action shortcuts to b…
Browse files Browse the repository at this point in the history 
…ehave upon keypress for selected nodes. Select nodes with a simple left click and press 'p' or 's' to highlight predecessor or successor nodes and 'c' or 'e' to collapse or expand. This fix addresses #460.
  • Loading branch information
@sluger
sluger committed Oct 27, 2014
1 parent 7baad5a commit 873b53b
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 50 deletions.
8 changes: 4 additions & 4 deletions refinery/ui/src/js/provvis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,10 +262,10 @@ var provvis = function () {
"html": "<h3>Command Shortcut List</h3>" +
"<ul><li><div class=\"refinery-subheader\"><h4>Node and path specific:</h4></div></li>" +
"<ul><li>(Un)Select: Left click</li>" +
"<li>Highlight predecessors: SHIFT + Left click</li>" +
"<li>Highlight successors: CTRL + Left click</li>" +
"<li>Collapse Node: SHIFT + Left double click</li>" +
"<li>Expand Node: CTRL + Left double click</li></ul><br>" +
"<li>Highlight predecessors: 'p'</li>" +
"<li>Highlight successors: 's'</li>" +
"<li>Collapse Node: 'c'</li>" +
"<li>Expand Node: 'e'</li></ul><br>" +
"<li><div class=\"refinery-subheader\"><h4>Global:</h4></div></li>" +
"<ul><li>Clear highlighting: Left click on background</li>" +
"<li>Fit graph to screen: Left double click on background</li></ul></ul>"
Expand Down
89 changes: 43 additions & 46 deletions refinery/ui/src/js/provvis_render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ var provvisRender = function () {

var lastSolrResponse = Object.create(null);

var selectedNodeSet = d3.map();

/* Simple tooltips by NG. */
var tooltip = d3.select("body")
.append("div")
Expand Down Expand Up @@ -205,31 +207,23 @@ var provvisRender = function () {

/* On analysis doi. */
d3.selectAll(".aNode").each(function (an) {
var keyStroke;

if (an.doi.doiWeightedSum >= (1 / 3)) {
/* Expand. */
keyStroke = {ctrl: true, shift: false};
handleCollapseExpandNode(an, keyStroke);
handleCollapseExpandNode(an, "e");
} else if (an.doi.doiWeightedSum < (1 / 3)) {
/* Collapse. */
keyStroke = {ctrl: false, shift: true};
handleCollapseExpandNode(an, keyStroke);
handleCollapseExpandNode(an, "c");
}
});

/* On subanalysis doi. */
d3.selectAll(".saNode").each(function (san) {
var keyStroke;

if (san.doi.doiWeightedSum >= (2 / 3)) {
/* Expand. */
keyStroke = {ctrl: true, shift: false};
handleCollapseExpandNode(san, keyStroke);
handleCollapseExpandNode(san, "e");
} else if (san.doi.doiWeightedSum < (1 / 3)) {
/* Collapse. */
keyStroke = {ctrl: false, shift: true};
handleCollapseExpandNode(san, keyStroke);
handleCollapseExpandNode(san, "c");
}
});
};
Expand Down Expand Up @@ -885,7 +879,7 @@ var provvisRender = function () {
};

/* Expand. */
if (keyStroke.ctrl && (d.nodeType === "analysis" || d.nodeType === "subanalysis")) {
if (keyStroke === "e" && (d.nodeType === "analysis" || d.nodeType === "subanalysis")) {

/* Set node visibility. */
d3.select("#nodeId-" + d.autoId).classed("hiddenNode", true);
Expand Down Expand Up @@ -945,7 +939,7 @@ var provvisRender = function () {
updateLink(cn, cn.x, cn.y);
});

} else if (keyStroke.shift && d.nodeType !== "analysis") {
} else if (keyStroke === "c" && d.nodeType !== "analysis") {
/* Collapse. */

/* Set node visibility. */
Expand Down Expand Up @@ -993,11 +987,11 @@ var provvisRender = function () {
/* Clear any highlighting. */
clearHighlighting(links);

if (keyStroke.ctrl) {
if (keyStroke === "s") {

/* Highlight path. */
highlightSuccPath(d);
} else if (keyStroke.shift) {
} else if (keyStroke === "p") {

/* Highlight path. */
highlightPredPath(d);
Expand Down Expand Up @@ -1071,6 +1065,8 @@ var provvisRender = function () {

vis.nodeTable.select("#nodeTitle").html("<b>" + "Node: " + "<b>" + " - ");
vis.nodeTable.select("#provenance-table-content").html("");

selectedNodeSet = d3.map();
};

/**
Expand All @@ -1084,10 +1080,12 @@ var provvisRender = function () {
d.selected = false;
d3.select("#nodeId-" + d.autoId).classed("selectedNode", false);
d.doi.selectedChanged();
selectedNodeSet.remove(d.autoId);
} else {
d.selected = true;
d3.select("#nodeId-" + d.autoId).classed("selectedNode", true);
d.doi.selectedChanged();
selectedNodeSet.set(d.autoId, d);
}

updateNodeDoi();
Expand Down Expand Up @@ -1822,34 +1820,11 @@ var provvisRender = function () {

handleToolbar(graph);

var keyEvent = Object.create(null),
nodeClickTimeout;

d3.selectAll(".node, .saNode, .aNode").on("click", function (d) {
if (d3.event.defaultPrevented) return;
clearTimeout(nodeClickTimeout);

keyEvent = {"alt": d3.event.altKey, "shift": d3.event.shiftKey, "ctrl": d3.event.ctrlKey};
nodeClickTimeout = setTimeout(function () {
if (keyEvent.ctrl || keyEvent.shift) {
handlePathHighlighting(d, keyEvent, graph.links);
} else {
// TODO: Temporarily disabled.
//handleNodeSelection(d, keyEvent);
updateTableContent(d);
}
}, 200);
});

d3.selectAll(".node, .saNode, .aNode").on("dblclick", function (d) {
if (d3.event.defaultPrevented) return;
clearTimeout(nodeClickTimeout);

/* Fire double click event. */
keyEvent = {"alt": d3.event.altKey, "shift": d3.event.shiftKey, "ctrl": d3.event.ctrlKey};
if (keyEvent.ctrl || keyEvent.shift) {
handleCollapseExpandNode(d, keyEvent);
}
handleNodeSelection(d);
updateTableContent(d);
});

var bRectClickTimeout;
Expand Down Expand Up @@ -1880,11 +1855,7 @@ var provvisRender = function () {

/* Collapse on bounding box click.*/
saBBox.on("click", function (d) {
if (d3.event.defaultPrevented) return;

var keyStroke;
keyStroke = {ctrl: false, shift: true};
handleCollapseExpandNode(vis.graph.saNodes[d].children.values()[0], keyStroke);
handleCollapseExpandNode(vis.graph.saNodes[d].children.values()[0], "c");

/* Deselect. */
vis.graph.saNodes[d].selected = false;
Expand All @@ -1906,6 +1877,32 @@ var provvisRender = function () {
/* Update node doi. */
updateNodeDoi();
});

var keydown = function () {
d3.event.preventDefault();

if (selectedNodeSet.empty()) return;

selectedNodeSet.values().forEach(function (d) {
switch (d3.event.keyCode) {

case 67: /* c => collapse*/
handleCollapseExpandNode(d, "c");
break;
case 69: /* e => expand*/
handleCollapseExpandNode(d, "e");
break;
case 80: /* l => highlight predecessors */
handlePathHighlighting(d, "p", graph.links);
break;
case 83: /* r => highlight successors */
handlePathHighlighting(d, "s", graph.links);
break;
}
});
};

d3.select("body").on("keydown", keydown);
};

/**
Expand Down

0 comments on commit 873b53b

Please sign in to comment.