From a8ab032c1495d8c963d4ca08e9008fc17993fe73 Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Thu, 25 Jul 2013 10:06:11 +0200 Subject: [PATCH] GraphViewer: The Node-search now offers example attributes from the collections defined in the adapter --- html/admin/css/graphlayout.css | 14 +++++ .../js/graphViewer/graph/arangoAdapter.js | 49 ++++++++++++++++- .../graphViewer/ui/arangoAdapterControls.js | 5 +- html/admin/js/graphViewer/ui/graphViewerUI.js | 54 ++++++++++++++++--- 4 files changed, 113 insertions(+), 9 deletions(-) diff --git a/html/admin/css/graphlayout.css b/html/admin/css/graphlayout.css index 844a0dfe40..7fa9401f81 100644 --- a/html/admin/css/graphlayout.css +++ b/html/admin/css/graphlayout.css @@ -238,6 +238,11 @@ img.gv-zoom-btn.pan-bottom{ content:url("../img/gv_arrow_bottom.png"); } + +img.gv-throbber { + content:url("../img/swagger/throbber.gif"); +} + pre.gv_object_view { text-align: left; white-space: pre; @@ -265,4 +270,13 @@ pre.gv_object_view { outline-color: #333333; border-color: #686766; background: white; +} + +.gv_example_toggle { + background-color:white; + height: 30px; +} + +.gv_example_toggle:hover { + background-color:white; } \ No newline at end of file diff --git a/html/admin/js/graphViewer/graph/arangoAdapter.js b/html/admin/js/graphViewer/graph/arangoAdapter.js index 91f85095ad..f8430f0d28 100644 --- a/html/admin/js/graphViewer/graph/arangoAdapter.js +++ b/html/admin/js/graphViewer/graph/arangoAdapter.js @@ -86,10 +86,13 @@ function ArangoAdapter(nodes, edges, config) { if (query !== queries.connectedEdges) { bindVars["@nodes"] = nodeCollection; } - if (query !== queries.childrenCentrality) { + if (query !== queries.childrenCentrality + && query !== queries.randomDocuments) { bindVars.dir = direction; } - bindVars["@edges"] = edgeCollection; + if (query !== queries.randomDocuments) { + bindVars["@edges"] = edgeCollection; + } var data = { query: query, bindVars: bindVars @@ -117,6 +120,28 @@ function ArangoAdapter(nodes, edges, config) { }); }, + getNRandom = function(n, callback) { + var list = [], + i = 0; + for (i = 0; i < n; i++) { + $.ajax({ + cache: false, + type: 'PUT', + url: api.any, + data: JSON.stringify({ + collection: nodeCollection + }), + contentType: "application/json", + success: function(data) { + list.push(data.document); + if (list.length === n) { + callback(list); + } + } + }); + } + }, + parseResultOfTraversal = function (result, callback) { if (result.length === 0) { if (callback) { @@ -215,9 +240,14 @@ function ArangoAdapter(nodes, edges, config) { api.cursor = api.base + "cursor"; api.collection = api.base + "collection/"; api.document = api.base + "document/"; + api.any = api.base + "simple/any"; api.node = api.base + "document?collection=" + nodeCollection; api.edge = api.base + "edge?collection=" + edgeCollection; + queries.randomDocuments = "FOR u IN @@nodes" + + " sort rand()" + + " limit 10" + + " return u"; queries.nodeById = "FOR n IN @@nodes" + " FILTER n._id == @id" + " LET links = (" @@ -501,6 +531,21 @@ function ArangoAdapter(nodes, edges, config) { } }; + self.getAttributeExamples = function(callback) { + if (callback && callback.length >= 1) { + getNRandom(10, function(l) { + var ret = _.uniq( + _.flatten( + _.map(l, function(o) { + return _.keys(o); + }) + ) + ); + callback(ret); + }); + } + }; + self.changeTo = absAdapter.changeTo; self.getPrioList = absAdapter.getPrioList; } \ No newline at end of file diff --git a/html/admin/js/graphViewer/ui/arangoAdapterControls.js b/html/admin/js/graphViewer/ui/arangoAdapterControls.js index e1eac009ca..f4249d4b9c 100644 --- a/html/admin/js/graphViewer/ui/arangoAdapterControls.js +++ b/html/admin/js/graphViewer/ui/arangoAdapterControls.js @@ -40,7 +40,7 @@ function ArangoAdapterControls(list, adapter) { var self = this, baseClass = "adapter"; - this.addControlChangeCollections = function() { + this.addControlChangeCollections = function(callback) { var prefix = "control_adapter_collections", idprefix = prefix + "_"; adapter.getCollections(function(nodeCols, edgeCols) { @@ -62,6 +62,9 @@ function ArangoAdapterControls(list, adapter) { edges = $("#" + idprefix + "edgecollection").attr("value"), undirected = !!$("#" + idprefix + "undirected").attr("checked"); adapter.changeToCollections(nodes, edges, undirected); + if (_.isFunction(callback)) { + callback(); + } } ); }); diff --git a/html/admin/js/graphViewer/ui/graphViewerUI.js b/html/admin/js/graphViewer/ui/graphViewerUI.js index ec0c708451..1681827544 100644 --- a/html/admin/js/graphViewer/ui/graphViewerUI.js +++ b/html/admin/js/graphViewer/ui/graphViewerUI.js @@ -52,6 +52,8 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf nodeShaperUI, adapterUI, slider, + searchAttrField, + searchAttrExampleList, //mousePointerBox = document.createElement("div"), svg, @@ -170,10 +172,37 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf */ 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"), - searchAttrField = document.createElement("input"), + searchAttrDiv = document.createElement("div"), + searchAttrExampleToggle = document.createElement("button"), + searchAttrExampleCaret = document.createElement("span"), searchValueField = document.createElement("input"), searchStart = document.createElement("img"), buttons = document.createElement("div"), @@ -274,7 +303,10 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf configureList, graphViewer.adapter ); - + + searchAttrField = document.createElement("input"); + searchAttrExampleList = document.createElement("ul"); + menubar.id = "menubar"; menubar.className = "thumbnails2"; @@ -286,10 +318,16 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf searchDiv.id = "transparentPlaceholder"; searchDiv.className = "pull-left"; + searchAttrDiv.className = "pull-left input-append searchByAttribute"; searchAttrField.id = "attribute"; - searchAttrField.className = "input searchByAttribute"; + 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"; @@ -319,7 +357,11 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf menubar.appendChild(transparentHeader); transparentHeader.appendChild(searchDiv); - searchDiv.appendChild(searchAttrField); + searchDiv.appendChild(searchAttrDiv); + searchAttrDiv.appendChild(searchAttrField); + searchAttrDiv.appendChild(searchAttrExampleToggle); + searchAttrDiv.appendChild(searchAttrExampleList); + searchAttrExampleToggle.appendChild(searchAttrExampleCaret); searchDiv.appendChild(equalsField); searchDiv.appendChild(searchValueField); searchDiv.appendChild(searchStart); @@ -327,7 +369,7 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf buttons.appendChild(configureDropDown); - adapterUI.addControlChangeCollections(); + adapterUI.addControlChangeCollections(updateAttributeExamples); adapterUI.addControlChangePriority(); nodeShaperUI.addControlOpticLabelAndColour(); @@ -342,7 +384,7 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf layouterUI.addAll(); adapterUI.addAll(); */ - + updateAttributeExamples(); }, createColourList = function() {