mirror of https://gitee.com/bigwinds/arangodb
406 lines
14 KiB
JavaScript
406 lines
14 KiB
JavaScript
/*jslint indent: 2, nomen: true, maxlen: 100, white: true plusplus: true */
|
|
/*global document, $, _ */
|
|
/*global EventDispatcherControls, NodeShaperControls, EdgeShaperControls */
|
|
/*global LayouterControls, ArangoAdapterControls*/
|
|
/*global GraphViewer, d3, window*/
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
/// @brief Graph functionality
|
|
///
|
|
/// @file
|
|
///
|
|
/// DISCLAIMER
|
|
///
|
|
/// Copyright 2010-2012 triagens GmbH, Cologne, Germany
|
|
///
|
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|
/// you may not use this file except in compliance with the License.
|
|
/// You may obtain a copy of the License at
|
|
///
|
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
|
///
|
|
/// Unless required by applicable law or agreed to in writing, software
|
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
/// See the License for the specific language governing permissions and
|
|
/// limitations under the License.
|
|
///
|
|
/// Copyright holder is triAGENS GmbH, Cologne, Germany
|
|
///
|
|
/// @author Michael Hackstein
|
|
/// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConfig, startNode) {
|
|
"use strict";
|
|
|
|
if (container === undefined) {
|
|
throw "A parent element has to be given.";
|
|
}
|
|
if (!container.id) {
|
|
throw "The parent element needs an unique id.";
|
|
}
|
|
if (adapterConfig === undefined) {
|
|
throw "An adapter configuration has to be given";
|
|
}
|
|
|
|
var graphViewer,
|
|
width = (optWidth || container.offsetWidth) - 60,
|
|
height = optHeight || container.offsetHeight,
|
|
menubar = document.createElement("ul"),
|
|
background = document.createElement("div"),
|
|
colourList,
|
|
nodeShaperUI,
|
|
adapterUI,
|
|
slider,
|
|
searchAttrField,
|
|
searchAttrExampleList,
|
|
//mousePointerBox = document.createElement("div"),
|
|
svg,
|
|
|
|
makeBootstrapDropdown = function (div, id, title) {
|
|
var btn, caret, list;
|
|
div.className = "btn-group";
|
|
btn = document.createElement("button");
|
|
btn.className = "btn btn-inverse btn-small dropdown-toggle";
|
|
btn.id = id;
|
|
btn.setAttribute("data-toggle", "dropdown");
|
|
btn.appendChild(document.createTextNode(title + " "));
|
|
caret = document.createElement("span");
|
|
caret.className = "caret";
|
|
btn.appendChild(caret);
|
|
list = document.createElement("ul");
|
|
list.className = "dropdown-menu";
|
|
div.appendChild(btn);
|
|
div.appendChild(list);
|
|
return list;
|
|
},
|
|
createSVG = function () {
|
|
return d3.select("#" + container.id + " #background")
|
|
.append("svg")
|
|
.attr("id", "graphViewerSVG")
|
|
.attr("width",width)
|
|
.attr("height",height)
|
|
.attr("class", "graphViewer pull-right")
|
|
.attr("style", "width:" + width + "px;height:" + height + "px;");
|
|
},
|
|
|
|
createZoomUIWidget = function() {
|
|
var zoomUI = document.createElement("div"),
|
|
zoomButtons = document.createElement("div"),
|
|
btnTop = document.createElement("button"),
|
|
btnLeft = document.createElement("button"),
|
|
btnRight = document.createElement("button"),
|
|
btnBottom = document.createElement("button");
|
|
zoomUI.className = "gv_zoom_widget";
|
|
zoomButtons.className = "gv_zoom_buttons_bg";
|
|
|
|
btnTop.className = "btn btn-icon btn-zoom btn-zoom-top gv-zoom-btn pan-top";
|
|
btnLeft.className = "btn btn-icon btn-zoom btn-zoom-left gv-zoom-btn pan-left";
|
|
btnRight.className = "btn btn-icon btn-zoom btn-zoom-right gv-zoom-btn pan-right";
|
|
btnBottom.className = "btn btn-icon btn-zoom btn-zoom-bottom gv-zoom-btn pan-bottom";
|
|
btnTop.onclick = function() {
|
|
graphViewer.zoomManager.triggerTranslation(0, -10);
|
|
};
|
|
btnLeft.onclick = function() {
|
|
graphViewer.zoomManager.triggerTranslation(-10, 0);
|
|
};
|
|
btnRight.onclick = function() {
|
|
graphViewer.zoomManager.triggerTranslation(10, 0);
|
|
};
|
|
btnBottom.onclick = function() {
|
|
graphViewer.zoomManager.triggerTranslation(0, 10);
|
|
};
|
|
|
|
zoomButtons.appendChild(btnTop);
|
|
zoomButtons.appendChild(btnLeft);
|
|
zoomButtons.appendChild(btnRight);
|
|
zoomButtons.appendChild(btnBottom);
|
|
|
|
slider = document.createElement("div");
|
|
slider.id = "gv_zoom_slider";
|
|
slider.className = "gv_zoom_slider";
|
|
|
|
background.appendChild(zoomUI);
|
|
zoomUI.appendChild(zoomButtons);
|
|
|
|
zoomUI.appendChild(slider);
|
|
$( "#gv_zoom_slider" ).slider({
|
|
orientation: "vertical",
|
|
min: graphViewer.zoomManager.getMinimalZoomFactor(),
|
|
max: 1,
|
|
value: 1,
|
|
step: 0.01,
|
|
slide: function( event, ui ) {
|
|
graphViewer.zoomManager.triggerScale(ui.value);
|
|
}
|
|
});
|
|
graphViewer.zoomManager.registerSlider($("#gv_zoom_slider"));
|
|
},
|
|
|
|
createToolbox = function() {
|
|
var toolbox = document.createElement("div"),
|
|
dispatcherUI = new EventDispatcherControls(
|
|
toolbox,
|
|
//mousePointerBox,
|
|
graphViewer.nodeShaper,
|
|
graphViewer.edgeShaper,
|
|
graphViewer.dispatcherConfig
|
|
);
|
|
toolbox.id = "toolbox";
|
|
toolbox.className = "btn-group btn-group-vertical pull-left toolbox";
|
|
background.appendChild(toolbox);
|
|
/*
|
|
mousePointerBox.id = "mousepointer";
|
|
mousePointerBox.className = "mousepointer";
|
|
background.appendChild(mousePointerBox);
|
|
*/
|
|
dispatcherUI.addAll();
|
|
},
|
|
|
|
updateAttributeExamples = function() {
|
|
searchAttrExampleList.innerHTML = "";
|
|
var throbber = document.createElement("li"),
|
|
throbberImg = document.createElement("img");
|
|
throbber.appendChild(throbberImg);
|
|
throbberImg.className = "gv-throbber";
|
|
searchAttrExampleList.appendChild(throbber);
|
|
graphViewer.adapter.getAttributeExamples(function(res) {
|
|
searchAttrExampleList.innerHTML = "";
|
|
_.each(res, function(r) {
|
|
var entry = document.createElement("li"),
|
|
link = document.createElement("a"),
|
|
lbl = document.createElement("label");
|
|
entry.appendChild(link);
|
|
link.appendChild(lbl);
|
|
lbl.appendChild(document.createTextNode(r));
|
|
searchAttrExampleList.appendChild(entry);
|
|
entry.onclick = function() {
|
|
searchAttrField.value = r;
|
|
};
|
|
});
|
|
});
|
|
},
|
|
|
|
createMenu = function() {
|
|
var transparentHeader = document.createElement("div"),
|
|
searchDiv = document.createElement("div"),
|
|
searchAttrDiv = document.createElement("div"),
|
|
searchAttrExampleToggle = document.createElement("button"),
|
|
searchAttrExampleCaret = document.createElement("span"),
|
|
searchValueField = document.createElement("input"),
|
|
searchStart = document.createElement("img"),
|
|
buttons = document.createElement("div"),
|
|
equalsField = document.createElement("span"),
|
|
configureDropDown = document.createElement("div"),
|
|
configureList = makeBootstrapDropdown(
|
|
configureDropDown,
|
|
"configuredropdown",
|
|
"Configure"
|
|
),
|
|
|
|
/*
|
|
nodeShaperDropDown = document.createElement("div"),
|
|
nodeShaperList = makeBootstrapDropdown(
|
|
nodeShaperDropDown,
|
|
"nodeshaperdropdown",
|
|
"Nodes"
|
|
),
|
|
edgeShaperDropDown = document.createElement("div"),
|
|
edgeShaperList = makeBootstrapDropdown(
|
|
edgeShaperDropDown,
|
|
"edgeshaperdropdown",
|
|
"Edges"
|
|
),
|
|
adapterDropDown = document.createElement("div"),
|
|
adapterList = makeBootstrapDropdown(
|
|
adapterDropDown,
|
|
"adapterdropdown",
|
|
"Connection"
|
|
),
|
|
layouterDropDown = document.createElement("div"),
|
|
layouterList = makeBootstrapDropdown(
|
|
layouterDropDown,
|
|
"layouterdropdown",
|
|
"Layout"
|
|
),
|
|
nodeShaperUI = new NodeShaperControls(
|
|
nodeShaperList,
|
|
graphViewer.nodeShaper
|
|
),
|
|
edgeShaperUI = new EdgeShaperControls(
|
|
edgeShaperList,
|
|
graphViewer.edgeShaper
|
|
),
|
|
layouterUI = new LayouterControls(
|
|
layouterList,
|
|
graphViewer.layouter
|
|
),
|
|
adapterUI = new ArangoAdapterControls(
|
|
adapterList,
|
|
graphViewer.adapter
|
|
),
|
|
*/
|
|
|
|
showSpinner = function() {
|
|
$(background).css("cursor", "progress");
|
|
},
|
|
|
|
hideSpinner = function() {
|
|
$(background).css("cursor", "");
|
|
},
|
|
|
|
alertError = function(msg) {
|
|
window.alert(msg);
|
|
},
|
|
|
|
resultCB = function(res) {
|
|
hideSpinner();
|
|
if (res && res.errorCode && res.errorCode === 404) {
|
|
alertError("Sorry could not find a matching node.");
|
|
return;
|
|
}
|
|
return;
|
|
},
|
|
|
|
searchFunction = function() {
|
|
showSpinner();
|
|
if (searchAttrField.value === ""
|
|
|| searchAttrField.value === undefined) {
|
|
graphViewer.loadGraph(
|
|
searchValueField.value,
|
|
resultCB
|
|
);
|
|
} else {
|
|
graphViewer.loadGraphWithAttributeValue(
|
|
searchAttrField.value,
|
|
searchValueField.value,
|
|
resultCB
|
|
);
|
|
}
|
|
};
|
|
|
|
nodeShaperUI = new NodeShaperControls(
|
|
configureList,
|
|
graphViewer.nodeShaper
|
|
);
|
|
adapterUI = new ArangoAdapterControls(
|
|
configureList,
|
|
graphViewer.adapter
|
|
);
|
|
|
|
searchAttrField = document.createElement("input");
|
|
searchAttrExampleList = document.createElement("ul");
|
|
|
|
menubar.id = "menubar";
|
|
menubar.className = "thumbnails2";
|
|
|
|
transparentHeader.id = "transparentHeader";
|
|
|
|
buttons.id = "modifiers";
|
|
buttons.className = "pull-right";
|
|
|
|
searchDiv.id = "transparentPlaceholder";
|
|
searchDiv.className = "pull-left";
|
|
|
|
searchAttrDiv.className = "pull-left input-append searchByAttribute";
|
|
searchAttrField.id = "attribute";
|
|
searchAttrField.className = "input";
|
|
searchAttrField.type = "text";
|
|
searchAttrField.placeholder = "Attribute";
|
|
searchAttrExampleToggle.id = "attribute_example_toggle";
|
|
searchAttrExampleToggle.className = "btn gv_example_toggle";
|
|
searchAttrExampleToggle.setAttribute("data-toggle", "dropdown");
|
|
searchAttrExampleCaret.className = "caret";
|
|
searchAttrExampleList.className = "dropdown-menu";
|
|
searchValueField.id = "value";
|
|
searchValueField.className = "input-xlarge searchInput";
|
|
searchValueField.type = "text";
|
|
searchValueField.placeholder = "Value";
|
|
searchStart.id = "loadnode";
|
|
searchStart.className = "searchSubmit";
|
|
equalsField.className = "searchEqualsLabel";
|
|
equalsField.appendChild(document.createTextNode("=="));
|
|
|
|
/*
|
|
nodeShaperDropDown.id = "nodeshapermenu";
|
|
edgeShaperDropDown.id = "edgeshapermenu";
|
|
layouterDropDown.id = "layoutermenu";
|
|
adapterDropDown.id = "adaptermenu";
|
|
*/
|
|
configureDropDown.id = "configuremenu";
|
|
|
|
|
|
searchStart.onclick = searchFunction;
|
|
$(searchValueField).keypress(function(e) {
|
|
if (e.keyCode === 13 || e.which === 13) {
|
|
searchFunction();
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
menubar.appendChild(transparentHeader);
|
|
transparentHeader.appendChild(searchDiv);
|
|
searchDiv.appendChild(searchAttrDiv);
|
|
searchAttrDiv.appendChild(searchAttrField);
|
|
searchAttrDiv.appendChild(searchAttrExampleToggle);
|
|
searchAttrDiv.appendChild(searchAttrExampleList);
|
|
searchAttrExampleToggle.appendChild(searchAttrExampleCaret);
|
|
searchDiv.appendChild(equalsField);
|
|
searchDiv.appendChild(searchValueField);
|
|
searchDiv.appendChild(searchStart);
|
|
transparentHeader.appendChild(buttons);
|
|
|
|
buttons.appendChild(configureDropDown);
|
|
|
|
adapterUI.addControlChangeCollections(updateAttributeExamples);
|
|
adapterUI.addControlChangePriority();
|
|
nodeShaperUI.addControlOpticLabelAndColour();
|
|
|
|
/*
|
|
buttons.appendChild(nodeShaperDropDown);
|
|
buttons.appendChild(edgeShaperDropDown);
|
|
buttons.appendChild(layouterDropDown);
|
|
buttons.appendChild(adapterDropDown);
|
|
|
|
nodeShaperUI.addAll();
|
|
edgeShaperUI.addAll();
|
|
layouterUI.addAll();
|
|
adapterUI.addAll();
|
|
*/
|
|
updateAttributeExamples();
|
|
},
|
|
|
|
createColourList = function() {
|
|
colourList = nodeShaperUI.createColourMappingList();
|
|
colourList.style.position = "absolute";
|
|
var intSVG = $("#graphViewerSVG");
|
|
colourList.style.top = intSVG.position().top.toFixed(1) + "px";
|
|
colourList.style.left = (intSVG.position().left + intSVG.width()).toFixed(1) + "px";
|
|
colourList.style.height = intSVG.height() + "px";
|
|
colourList.style.overflow = "auto";
|
|
container.appendChild(colourList);
|
|
};
|
|
container.appendChild(menubar);
|
|
container.appendChild(background);
|
|
background.className = "thumbnails";
|
|
background.id = "background";
|
|
|
|
viewerConfig = viewerConfig || {};
|
|
viewerConfig.zoom = true;
|
|
|
|
|
|
svg = createSVG();
|
|
graphViewer = new GraphViewer(svg, width, height, adapterConfig, viewerConfig);
|
|
|
|
createToolbox();
|
|
createZoomUIWidget();
|
|
createMenu();
|
|
createColourList();
|
|
|
|
if (startNode) {
|
|
graphViewer.loadGraph(startNode);
|
|
}
|
|
|
|
}
|