GraphViewer: The Node-search now offers example attributes from the collections defined in the adapter

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

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

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();
+            }
           }
         );
       });

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() {