Merge pull request #7 from daveseah/dev-bl/edge-entry

Edge Entry Prototype

Author: daveseah

build/app/assets/htmldemos/d3forcedemo/data.reducedlinks.json

@@ -75,8 +75,17 @@ svg {
   flex-basis: 100%;
   min-width: 200px;
 }
+/* D3SimpleNetGraph redo removes links group...
 svg .links line {
   stroke: #aaa;
+} 
+... and replaces with .edge */
+svg .edge {
+  stroke: #aaa;
+}
+svg .edge.selected {
+  stroke: #f00;
+  stroke-width: 5px;
 }
 svg .nodes circle {
   pointer-events: all;
@@ -86,3 +95,6 @@ svg .nodes text {
   stroke: #666;
   stroke-width: 0px;
 }
+.noselect {
+  user-select: none;
+}

build/app/view/autocompletedemo/AutoCompleteDemo.jsx

@@ -6,14 +6,40 @@ const Autosuggest = require('react-autosuggest');
 /******************************************************************************/
 /*/
 
+      AutoComplete is the text input field for entering node labels to:
+      * search for nodes, 
+      * edit existing nodes, 
+      * and add new nodes.  
+
+      Main features:
+
+      * It interactively provides a list of suggestions that match the current 
+        input, e.g. typing "ah" will display a list of suggestions including "Ah 
+        Long", "Ah Seung", and "Oahu Railroad Station".
+
+      * Users can highlight suggestions (via mouseover or with keyboard arrows)
+
+      * Users can select a suggestion (via clicking or hitting return)
+
+      AutoComplete is a wrapper class for the open source AutoSuggest component, 
+      which handles the actual rendering of the suggestions list.  AutoComplete 
+      provides an interface to NodeSelector and EdgeEntry.  AutoComplete also 
+      provides the handler routines for generating the suggestions list and 
+      handling highlights and selections.
+
+
+
       This relies on the react-autosuggest component.
       See documentation:  https://github.com/moroshko/react-autosuggest
 
 
       To Use:
           <AutoComplete 
+
             data={this.state.data}
+            value={label}
             disableSuggestions={this.state.canEdit}
+          
             onInputChange={this.handleInputChange}
             onSelection={this.handleNodeSelection}
             onHighlight={this.handleSuggestionHighlight}
@@ -26,8 +52,8 @@ const Autosuggest = require('react-autosuggest');
       data is mapped to this.props.data
             This is how graph data is passed to the AutoComplete component.
 
-      requestClearValue is mapped to this.props.clearValue
-            Parent component can call this to clear the input field.
+      value is mapped to this.props.setValue
+            Use this to set the autocomplete value externally.
 
       disableSuggesions is mapped to this.props.disabled
             Set to true to stop making suggestions
@@ -171,7 +197,7 @@ class AutoComplete extends React.Component {
   onSuggestionSelected (event, { suggestion }) {
     // call parent handler
     if (suggestion.isAddNew) {
-      console.log('Add new:', this.state.value, 'suggestion',suggestion);
+      // console.log('Add new:', this.state.value, 'suggestion',suggestion);
       this.props.onSelection( this.state.value )
     } else {
       this.props.onSelection( suggestion )
@@ -186,13 +212,17 @@ class AutoComplete extends React.Component {
     return this.props.disableSuggestions
   }
 
+  setValue ( value ) {
+    // console.log('...AutoComplete.setValue to',value)
+    this.setState({value: value})
+  }
   clearValue () {
     this.setState({value:''})
   }
 
   componentWillReceiveProps (nextProps) {
     // console.log('AutoComplete: componentWillReceiveProps',nextProps)
-    if (nextProps.requestClearValue) this.clearValue()
+    if (nextProps.value!==undefined) this.setValue( nextProps.value )
   }
 
   render() {

build/app/view/autocompletedemo/components/AutoComplete.css

@@ -8,6 +8,14 @@
     NetGraph calls SetData whenever it receives an updated data object.
     This triggers D3NetGraph to redraw itself.
 
+    DEPRECATED
+    This implementation was problematic because newly-added links would not be
+    properly updated.  The problem likely had to do with:
+    *   Not using a proper link id based on source.id + target.id
+    *   Using saved references to objects that could get outdated with
+        data joins/merges/updates.
+    Use `D3SimpleNetGraph.js` instead.
+
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
 
@@ -152,12 +160,13 @@ class D3NetGraph {
           .on("end",   (d) => { this._Dragended(d, this) }))
 
     // UPDATE SELECTION
+    //   If a node is not selected, its d.selected value is ''.
     this.node.merge(nodeRoot).selectAll("circle")
-        .attr("stroke",       function(d) { if (d.selected) return '#000'; })
+        .attr("stroke",       function(d) { if (d.selected) return d.selected; })
         .attr("stroke-width", function(d) { if (d.selected) return '5px'; })
     this.node.merge(nodeRoot).selectAll("text")
+        .attr("color",        function(d) { if (d.selected) return d.selected; })
         .attr("font-weight",  function(d) { if (d.selected) return 'bold'; })
-        .attr("color",        function(d) { if (d.selected) return '#000'; })
 
     // ENTER Add Group Items
     this.node.append("circle")