seach field

botapadapp.py

@@ -358,6 +358,8 @@ def botimport(repo, padurl, gid, content_type):
             'el': "#viz",
             'background_color' : color,
             'initial_size' : 16,
+            'user_font_size' : 2,
+            'user_vtx_size' : 3,
             'vtx_size' : args.get("vertex_size", 2 ),
             'show_text'  : 0 if args.get("no_text"  , None ) else 1,     # removes vertex text 
             'show_nodes' : 0 if args.get("no_nodes" , None ) else 1,   # removes vertex only 

static/padagraph-gviz-min.html

@@ -8268,7 +8268,198 @@ this._children = Polymer.TreeApi.arrayCopyChildNodes(this.root);
 this._insertChildren();
 this.fire('dom-change');
 }
-});</script><dom-module id="padagraph-keb-sample" assetpath="./"><style></style><template><template is="dom-if" if="{{ locutions.length }}"><template is="dom-repeat" items="[[locutions]]">{{item}}</template></template></template><script>'use strict';
+});</script><dom-module id="padagraph-node-completion-card" assetpath=""><template><style>:host {
+    width: 100%;
+}
+
+.content .actions {
+    margin-top: 3px;
+    cursor: link;
+}
+span.nodetype{
+    color: #333;
+    font-size:24px;
+}
+
+.metadata .nodetype{
+    font-size: 16px !important;
+    margin-left: 24px !important;
+}
+
+    </style><div class="content"><template is="dom-if" if="{{ actionmap.select }}"><i class="circle thin icon"></i><a on-click="handleSelect" class="author">{{model.label}}</a><div class="metadata"><div class="rating">{{model.nodetype}}</div></div></template><template is="dom-if" if="{{ !actionmap.select }}"><i class="circle thin icon nodetype"></i><span class="nodetype">{{model.label}}</span><template is="dom-if" if="{{ notext }}"><div class="text"></div></template><div class="metadata"><div class="nodetype">{{model.nodetype}}</div></div></template><template is="dom-if" if="{{actions}}"><div class="actions"><template is="dom-if" if="{{actionmap.add}}"><a on-click="handleAdd"><i class="plus icon"></i> Add to view</a></template><template is="dom-if" if="{{actionmap.explore}}"><a on-click="handleExplore"><i class="bullseye icon"></i> Explore</a></template><template is="dom-if" if="{{actionmap.remove}}"><a on-click="handleRemove"><i class="remove icon"></i> Remove</a></template></div></template></div></template><script>'use strict';
+
+require(['backbone', 'underscore'], function (Backbone, _) {
+  Polymer({
+    is: "padagraph-node-completion-card",
+    properties: {
+      model: Object,
+
+      actions: {
+        type: Object,
+        observer: '_updateActions'
+      },
+
+      actionmap: Object,
+      options: String,
+
+      notext: {
+        type: Number,
+        computed: "has_hext(options)"
+      }
+    },
+
+    _updateActions: function _updateActions() {
+
+      var actions = _.isNull(this.actions) ? [] : this.actions;
+      actions = _.isString(actions) ? actions.split(',') : actions;
+      actions = _.isArray(actions) ? actions : [actions];
+
+      this.actionmap = {
+        'add': _.indexOf(actions, "add") > -1,
+        'explore': _.indexOf(actions, "explore") > -1,
+        'select': _.indexOf(actions, "select") > -1,
+        'remove': _.indexOf(actions, "remove") > -1
+      };
+
+      this.notifyPath('actionmap', this.actionmap);
+    },
+
+    has_text: function has_text() {
+      return options != "notext";
+    },
+
+    handleSelect: function handleSelect() {
+      this.fire('completion-select', this.model);
+      this.fire('completion-close');
+    },
+
+    handleRemove: function handleRemove() {
+      this.fire('completion-remove', this.model);
+      this.fire('completion-close');
+    },
+
+    handleAdd: function handleAdd() {
+      Backbone.trigger('engine:additive_nodes', [this.model.uuid]);
+      this.fire('completion-close');
+    },
+
+    handleExplore: function handleExplore() {
+      var params = { graph: this.graph, query: this.model.uuid };
+      Backbone.trigger('engine:explore', params);
+      this.fire('completion-close');
+    }
+  });
+});</script></dom-module><dom-module id="padagraph-node-search" assetpath="./"><template><style>.scrollable {
+  min-width:400px !important;
+  max-height:400px;
+  overflow:auto;
+  text-align:left !important;
+}
+
+</style><div class="ui icon input"><input id="search" name="search" type="text" autocomplete="off" value="{{value::input}}" placeholder="{{placeholder}}" on-keyup="keyHandler"><i class="search icon"></i></div><div class="ui fluid popup bottom left transition"><div class="ui left aligned column"><div class="ui scrollable comments"><template is="dom-repeat" items="[[completions]]"><padagraph-node-completion-card option="notext" actions="{{actions}}" model="{{item}}" on-completion-close="handleClose" class="comment"></padagraph-node-completion-card><div class="ui divider"></div></template></div></div></div></template><script>'use strict';
+
+require(['jquery', 'backbone', 'semantic'], function ($, Backbone) {
+  Polymer({
+
+    is: "padagraph-node-search",
+
+    properties: {
+      placeholder: String,
+      graph: Object,
+      actions: String,
+      value: String
+    },
+
+    attached: function attached() {
+      var _this = this;
+
+      this.completions = [];
+
+      this.async(function () {
+        var $popup = $('.input', Polymer.dom(_this).node);
+        $popup.popup({
+          on: 'click',
+          onShow: (function () {
+            return _this.completions.length > 0;
+          }).bind(_this),
+          inline: true,
+          hoverable: true,
+          position: 'bottom left',
+          delay: {
+            show: 0,
+            hide: 100
+          }
+        });
+        var oldSearchValue = "";
+        window.setInterval(function () {
+          var currentSearchValue = _this.value;
+          if (oldSearchValue != currentSearchValue) {
+            if (currentSearchValue && currentSearchValue.length > 0) _this.complete();
+            oldSearchValue = currentSearchValue;
+          }
+        }, 1000);
+      });
+    },
+
+    hide: function hide() {
+      $('.input', Polymer.dom(this).node).popup('hide');
+    },
+
+    show: function show() {
+
+      $('.input', Polymer.dom(this).node).popup('show');
+    },
+
+    handleClose: function handleClose() {
+      this.completions = [];
+      this.value = "";
+      this.hide();
+    },
+
+    keyHandler: function keyHandler(e) {
+
+      if (!this.value || !this.value.length) return;
+
+      if (e.keyCode == 13) {
+
+        // add first node to the view
+        if (this.completions.length) {
+          var model = this.completions[0];
+          Backbone.trigger('engine:additive_nodes', [model.uuid]);
+          this.handleClose();
+        }
+      }
+      //else
+      //    this.complete();
+    },
+
+    complete: function complete() {
+
+      var self = this;
+      var url_root = this.graph.url();
+
+      $.ajax({
+        url: url_root + '/complete',
+        type: "POST",
+        data: JSON.stringify({
+          obj_type: "node",
+          prefix: this.value,
+          start: 0
+        }),
+        contentType: "application/json; charset=utf-8",
+        dataType: "json",
+        success: function success(data) {
+          self.completions = data.complete;
+          self.show();
+        },
+        error: function error() {
+          Backbone.trigger('complete:error'); // our custom event
+        }
+      });
+    }
+
+  });
+});</script></dom-module><dom-module id="padagraph-keb-sample" assetpath="./"><style></style><template><template is="dom-if" if="{{ locutions.length }}"><template is="dom-repeat" items="[[locutions]]">{{item}}</template></template></template><script>'use strict';
 
 require(['backbone', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbone, Cello, Gviz, Materials, Const) {
   Polymer({
@@ -9603,6 +9794,12 @@ require(['backbone', 'cello', 'gviz', 'materials', 'pdgconst'], function (Backbo
                 });
             });
 
+            var search = $("padagraph-node-search");
+            if (search.length) {
+                search = search[0];
+                search.graph = graph;
+            }
+
             var popup = $("padagraph-model-popup", this);
             if (popup.length) {
                 popup = popup[0];

templates/botapadapp.html

@@ -46,6 +46,10 @@
           bottom: 22px;
       }
       
+      padagraph-node-search {
+          position: absolute;
+          bottom: 22px;
+      }
       
       .masthead.segment {
         min-height: 700px;
@@ -386,7 +390,8 @@
                   })
               
             </script>
-          </div>{% if graphurl %}   <a href="{{graphurl}}" class="ui active refresh button">refresh</a>
+          </div>
+          <padagraph-node-search actions="add,explore"></padagraph-node-search>{% if graphurl %}   <a href="{{graphurl}}" class="ui active refresh button">refresh</a>
           <!--a.ui.active.primary.button(href="{{padurl}}") edit-->{% endif %}
         </div>{% elif error %}
         <div class="ui text container">