Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GraphViewer it is now possible to define a list of label attributes and colour attributes

This commit is contained in:
Michael Hackstein 2013-12-17 23:25:06 +01:00
parent d3be3c37b8
commit bf520f652f
4 changed files with 261 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerUI.js
View File

@ -454,7 +454,8 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
graphViewer.start();
});
adapterUI.addControlChangePriority();
nodeShaperUI.addControlOpticLabelAndColour(graphViewer.adapter);
// nodeShaperUI.addControlOpticLabelAndColour(graphViewer.adapter);
nodeShaperUI.addControlOpticLabelAndColourList(graphViewer.adapter);
/*
buttons.appendChild(nodeShaperDropDown);

14
js/apps/system/aardvark/frontend/js/graphViewer/ui/modalDialogHelper.js
View File

@ -196,9 +196,9 @@ var modalDialogHelper = modalDialogHelper || {};
},
displayDecissionRowsOfGroup = function(group) {
var rows = $(".decission_" + group),
var options = $(".decission_" + group),
selected = $("input[type='radio'][name='" + group + "']:checked").attr("id");
rows.each(function() {
options.each(function() {
if ($(this).attr("decider") === selected) {
$(this).css("display", "");
} else {
@ -213,7 +213,8 @@ var modalDialogHelper = modalDialogHelper || {};
text, isDefault, interior, contentTh, table) {
var input = document.createElement("input"),
id = idPre + idPost,
lbl = document.createElement("label");
lbl = document.createElement("label"),
tBody = document.createElement("tbody");
input.id = id;
input.type = "radio";
input.name = group;
@ -222,10 +223,11 @@ var modalDialogHelper = modalDialogHelper || {};
contentTh.appendChild(lbl);
lbl.appendChild(input);
lbl.appendChild(document.createTextNode(text));
table.appendChild(tBody);
$(tBody).toggleClass("decission_" + group, true);
$(tBody).attr("decider", id);
_.each(interior, function(o) {
var row = $(insertModalRow(table, idPre, o));
row.toggleClass("decission_" + group, true);
row.attr("decider", id);
insertModalRow(tBody, idPre, o);
});
if (isDefault) {
input.checked = true;

66
js/apps/system/aardvark/frontend/js/graphViewer/ui/nodeShaperControls.js
View File

@ -269,6 +269,72 @@ function NodeShaperControls(list, shaper) {
);
});
};
this.addControlOpticLabelAndColourList = function(adapter) {
var prefix = "control_node_labelandcolourlist",
idprefix = prefix + "_";
uiComponentsHelper.createButton(list, "Label", prefix, function() {
modalDialogHelper.createModalChangeDialog("Change label attribute",
idprefix, [{
type: "extendable",
id: "label",
text: "Vertex label attribute",
objects: shaper.getLabel()
},{
type: "decission",
id: "samecolour",
group: "colour",
text: "Use this attribute for coloring, too",
isDefault: (shaper.getLabel() === shaper.getColor())
},{
type: "decission",
id: "othercolour",
group: "colour",
text: "Use different attribute for coloring",
isDefault: (shaper.getLabel() !== shaper.getColor()),
interior: [
{
type: "extendable",
id: "colour",
text: "Color attribute",
objects: shaper.getColor() || ""
}
]
}], function () {
var lblList = $("input[id^=" + idprefix + "label_]"),
colList = $("input[id^=" + idprefix + "colour_]"),
selected = $("input[type='radio'][name='colour']:checked").attr("id"),
labels = [], colours = [];
lblList.each(function(i, t) {
var val = $(t).attr("value");
if (val !== "") {
labels.push(val);
}
});
colList.each(function(i, t) {
var val = $(t).attr("value");
if (val !== "") {
colours.push(val);
}
});
if (selected === idprefix + "samecolour") {
colours = labels;
}
shaper.changeTo({
label: labels,
color: {
type: "attribute",
key: colours
}
});
if (colourDiv === undefined) {
colourDiv = self.createColourMappingList();
}
}
);
});
};
//////////////////////////////////////////////////////////////////
// Multiple Buttons

185
js/apps/system/aardvark/test/specs/graphViewer/specNodeShaper/nodeShaperUISpec.js
View File

@ -343,6 +343,191 @@
});
describe('checking to change colour and label at once with a list', function() {
var listId, idPrefix, idOnly, modalId, colAttrPrefix, lblAttrPrefix,
submitId, checkBoxSelector, addColourLineId, addLabelLineId;
beforeEach(function() {
listId = "#control_node_list";
idPrefix = "#control_node_labelandcolourlist";
lblAttrPrefix = idPrefix + "_label_";
colAttrPrefix = idPrefix + "_colour_";
modalId = idPrefix + "_modal";
idOnly = idPrefix.substr(1);
submitId = idOnly + "_submit";
addLabelLineId = lblAttrPrefix.substr(1) + "addLine";
addColourLineId = colAttrPrefix.substr(1) + "addLine";
checkBoxSelector = "input[type='radio'][name='colour']";
shaperUI.addControlOpticLabelAndColourList();
expect($(idPrefix, $(listId)).length).toEqual(1);
expect($(idPrefix, $(listId))[0]).toConformToListCSS();
helper.simulateMouseEvent("click", idOnly + "_button");
expect($(modalId).length).toEqual(1);
});
afterEach(function() {
waitsFor(function() {
return $(modalId).length === 0;
}, 2000, "The modal dialog should disappear.");
});
it('should be added to the list', function() {
runs(function() {
var val = "foo";
$(lblAttrPrefix + "1").attr("value", val);
helper.simulateMouseEvent("click", submitId);
expect(shaper.changeTo).toHaveBeenCalledWith({
label: [val],
color: {
type: "attribute",
key: [val]
}
});
});
});
it('should not add empty attributes for label', function() {
runs(function() {
$(lblAttrPrefix + "1").attr("value", "");
helper.simulateMouseEvent("click", submitId);
expect(shaper.changeTo).toHaveBeenCalledWith({
label: [],
color: {
type: "attribute",
key: []
}
});
});
});
it('should add a new line to both on demand', function() {
runs(function() {
var lbl1 = "lbl1", lbl2 = "lbl2", col1 = "col1", col2 = "col2";
helper.simulateMouseEvent("click", addLabelLineId);
expect($(lblAttrPrefix + "1").length).toEqual(1);
expect($(lblAttrPrefix + "2").length).toEqual(1);
expect($("#" + addLabelLineId).length).toEqual(1);
$(lblAttrPrefix + "1").attr("value", lbl1);
$(lblAttrPrefix + "2").attr("value", lbl2);
$(checkBoxSelector).prop("checked", true);
helper.simulateMouseEvent("click", addColourLineId);
expect($(colAttrPrefix + "1").length).toEqual(1);
expect($(colAttrPrefix + "2").length).toEqual(1);
expect($("#" + addColourLineId).length).toEqual(1);
$(colAttrPrefix + "1").attr("value", col1);
$(colAttrPrefix + "2").attr("value", col2);
helper.simulateMouseEvent("click", submitId);
expect(shaper.changeTo).toHaveBeenCalledWith({
label: [lbl1, lbl2],
color: {
type: "attribute",
key: [col1, col2]
}
});
});
});
it('should add many new lines to label on demand', function() {
runs(function() {
var lbl1 = "foo", lbl2 = "baz", lbl3 = "bar", lbl4 = "foxx";
helper.simulateMouseEvent("click", addLabelLineId);
helper.simulateMouseEvent("click", addLabelLineId);
helper.simulateMouseEvent("click", addLabelLineId);
helper.simulateMouseEvent("click", addLabelLineId);
expect($(lblAttrPrefix + "1").length).toEqual(1);
expect($(lblAttrPrefix + "2").length).toEqual(1);
expect($(lblAttrPrefix + "3").length).toEqual(1);
expect($(lblAttrPrefix + "4").length).toEqual(1);
expect($(lblAttrPrefix + "5").length).toEqual(1);
expect($(lblAttrPrefix + "1").attr("value")).toEqual("");
expect($(lblAttrPrefix + "2").attr("value")).toEqual("");
expect($(lblAttrPrefix + "3").attr("value")).toEqual("");
expect($(lblAttrPrefix + "4").attr("value")).toEqual("");
expect($(lblAttrPrefix + "5").attr("value")).toEqual("");
expect($("#" + addLabelLineId).length).toEqual(1);
$(lblAttrPrefix + "1").attr("value", lbl1);
$(lblAttrPrefix + "2").attr("value", lbl2);
$(lblAttrPrefix + "3").attr("value", "");
$(lblAttrPrefix + "4").attr("value", lbl3);
$(lblAttrPrefix + "5").attr("value", lbl4);
helper.simulateMouseEvent("click", submitId);
expect(shaper.changeTo).toHaveBeenCalledWith({
label: [lbl1, lbl2, lbl3, lbl4],
color: {
type: "attribute",
key: [lbl1, lbl2, lbl3, lbl4]
}
});
});
});
it('should remove all but the first line', function() {
runs(function() {
var lbl1 = "foo";
helper.simulateMouseEvent("click", addLabelLineId);
expect($(lblAttrPrefix + "1_remove").length).toEqual(0);
expect($(lblAttrPrefix + "2_remove").length).toEqual(1);
helper.simulateMouseEvent("click", lblAttrPrefix.substr(1) + "2_remove");
expect($("#" + addLabelLineId).length).toEqual(1);
expect($(lblAttrPrefix + "2_remove").length).toEqual(0);
expect($(lblAttrPrefix + "2").length).toEqual(0);
$(lblAttrPrefix + "1").attr("value", lbl1);
helper.simulateMouseEvent("click", submitId);
expect(shaper.changeTo).toHaveBeenCalledWith({
label: [lbl1],
color: {
type: "attribute",
key: [lbl1]
}
});
});
});
/* TO_DO
it('should load the current prioList from the adapter', function() {
runs(function() {
helper.simulateMouseEvent("click", "control_adapter_priority_cancel");
});
waitsFor(function() {
return $("#control_adapter_priority_modal").length === 0;
}, 2000, "The modal dialog should disappear.");
runs(function() {
expect($("#control_adapter_priority_cancel").length).toEqual(0);
prioList.push("foo");
prioList.push("bar");
prioList.push("baz");
helper.simulateMouseEvent("click", "control_adapter_priority");
expect(adapter.getPrioList).wasCalled();
var idPrefix = "#control_adapter_priority_attribute_";
expect($(idPrefix + "1").length).toEqual(1);
expect($(idPrefix + "2").length).toEqual(1);
expect($(idPrefix + "3").length).toEqual(1);
expect($(idPrefix + "4").length).toEqual(0);
expect($(idPrefix + "addLine").length).toEqual(1);
expect($(idPrefix + "1_remove").length).toEqual(0);
expect($(idPrefix + "2_remove").length).toEqual(1);
expect($(idPrefix + "3_remove").length).toEqual(1);
expect($(idPrefix + "1").attr("value")).toEqual("foo");
expect($(idPrefix + "2").attr("value")).toEqual("bar");
expect($(idPrefix + "3").attr("value")).toEqual("baz");
expect($("#control_adapter_priority_modal").length).toEqual(1);
expect($("#control_adapter_priority_cancel").length).toEqual(1);
helper.simulateMouseEvent("click", "control_adapter_priority_cancel");
});
});
*/
});
describe('checking to change colour and label at once', function() {
it('should be able to add the control and create the mapping list', function() {