Merge pull request #71 from daveseah/dev-bl/edit-source-target

Allow edit target when source and target share the same parent node.

Author: benloh

build/app/view/netcreate/components/AutoComplete.jsx

@@ -336,6 +336,9 @@ class AutoComplete extends UNISYS.Component {
     Check to see if it references a valid node, if so, select it
 /*/ onBlur (value) {
       // User selected an existing node in the suggestion list
+      // or User clicked on d3 graph
+      // or User clicked outside of field
+      if (DBG) console.log('AutoComplete.onBlur',value);
       this.AppCall('SOURCE_SEARCH_AND_SELECT', { searchString: this.state.value } );
     }
 
@@ -364,7 +367,7 @@ class AutoComplete extends UNISYS.Component {
 /*/ render () {
       const { value, suggestions } = this.state;
       const inputProps = {
-        placeholder : "Type node name...",
+        placeholder : this.props.placeholder || 'Type node name...',
         value       : value,
         onChange    : this.onInputChange,
         onBlur      : this.onBlur

build/app/view/netcreate/components/EdgeEditor.jsx

@@ -232,7 +232,8 @@ class EdgeEditor extends UNISYS.Component {
         sourceIsEditable:false,      // Source ndoe field is only editable when source is not parent
         hasValidSource:  false,      // Used by SwapSourceAndTarget and the Change Source button
         targetIsEditable:false,      // Target ndoe field is only editable when target is not parent
-        hasValidTarget:  false       // Used by SwapSourceAndTarget and the Change Target button
+        hasValidTarget:  false,      // Used by SwapSourceAndTarget and the Change Target button
+        placeholder:     undefined
       };
 
       /// Initialize UNISYS DATA LINK for REACT
@@ -653,22 +654,26 @@ class EdgeEditor extends UNISYS.Component {
 /*/ onChangeSource () {
       this.setState({
         sourceIsEditable: true,
-        hasValidSource: false
+        hasValidSource: false,
+        placeholder: this.state.sourceNode.label
       });
       this.AppCall('AUTOCOMPLETE_SELECT',{id:'edge'+this.props.edgeID+'source'});
       // Whenever we set the autocomplete to source, we have to update the label
-      this.AppCall('SOURCE_SEARCH', { searchString: this.state.sourceNode.label });
+      // Clear the AutoComplete field so that onBlur does not select the same node
+      this.AppCall('SOURCE_SEARCH', { searchString: '' });
     }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
 /*/ onChangeTarget () {
       this.setState({
         targetIsEditable: true,
-        hasValidTarget: false
+        hasValidTarget: false,
+        placeholder: this.state.targetNode.label
       });
       this.AppCall('AUTOCOMPLETE_SELECT',{id:'edge'+this.props.edgeID+'target'});
       // Whenever we set the autocomplete to target, we have to update the label
-      this.AppCall('SOURCE_SEARCH', { searchString: this.state.targetNode.label });
+      // Clear the AutoComplete field so that onBlur does not select the same node
+      this.AppCall('SOURCE_SEARCH', { searchString: '' });
     }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
@@ -753,7 +758,10 @@ class EdgeEditor extends UNISYS.Component {
 /*/ render () {
       const { edgeID, parentNodeLabel } = this.props;
       const { formData, sourceNode, targetNode, edgePrompts } = this.state;
-      const me = <span style={{color:"rgba(0,0,0,0.2)",fontStyle:"italic"}}>this node</span>;
+      const me = <span style={{ color: "rgba(0,0,0,0.2)", fontStyle: "italic" }}>this node</span>;
+      // special override to allow editing an edge that has the same parent node for both source and target
+      let sameSourceAndTarget = (sourceNode.label === this.props.parentNodeLabel) &&
+        (targetNode.label === this.props.parentNodeLabel);
       return (
         <div>
 
@@ -782,6 +790,7 @@ class EdgeEditor extends UNISYS.Component {
                     disabledValue={sourceNode.label}
                     inactiveMode={parentNodeLabel===sourceNode.label ? 'static' : 'disabled'}
                     shouldIgnoreSelection={!this.state.sourceIsEditable}
+                    placeholder={this.state.placeholder}
                   />
                   <Button outline size="sm" className="float-right"
                     hidden={ !(this.state.isEditable &&
@@ -816,13 +825,17 @@ class EdgeEditor extends UNISYS.Component {
                   <AutoComplete
                     identifier={'edge'+edgeID+'target'}
                     disabledValue={targetNode.label}
-                    inactiveMode={parentNodeLabel===targetNode.label ? 'static' : 'disabled'}
+                    inactiveMode={ ( parentNodeLabel===targetNode.label && !sameSourceAndTarget ) ? 'static' : 'disabled'}
                     shouldIgnoreSelection={!this.state.targetIsEditable}
+                    placeholder={this.state.placeholder}
                   />
                   <Button outline size="sm" className="float-right"
                     hidden={ !(this.state.isEditable &&
                                this.state.hasValidTarget &&
-                               (targetNode.label!==this.props.parentNodeLabel)) }
+                               ( (targetNode.label !== this.props.parentNodeLabel) ||
+                                 sameSourceAndTarget )
+                              )
+                            }
                     onClick={this.onChangeTarget}
                     title="Select a different target node"
                   >Change Target</Button>

build/app/view/netcreate/components/NodeSelector.jsx

@@ -217,7 +217,10 @@ class NodeSelector extends UNISYS.Component {
         this.state.edges.forEach(edge => {
           if ((edge.source.id === updatedNodeID) || (edge.target.id === updatedNodeID)) needsUpdate = true;
         })
-        if (needsUpdate) UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [currentNodeID] });
+        if (needsUpdate) {
+          if (DBG) console.log('NodeSelector.SOURCE_UPDATE triggering SOURCE_SELECT with', currentNodeID)
+          UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [currentNodeID] });
+        }
       });
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /*/ NODE_EDIT is usually requested by NodeTable.
@@ -364,7 +367,7 @@ class NodeSelector extends UNISYS.Component {
       if ( (activeAutoCompleteId!==thisIdentifier) &&
            (activeAutoCompleteId!=='search')          ) return;
 
-      if (!this.state.isEditable) {
+      if (!this.state.isEditable && !this.state.edgesAreLocked) {
         if (data.nodes && data.nodes.length>0) {
 
           // A node was selected, so load it
@@ -730,6 +733,7 @@ class NodeSelector extends UNISYS.Component {
       isDuplicateNodeLabel: false
     }, () => {
         // Wait for the edit state to clear, then open up the original node
+        if (DBG) console.log('NodeSelector.onEditOriginal triggering SOURCE_SELECT with', duplicateNodeID)
         UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [duplicateNodeID] });
     });
     this.AppCall('AUTOCOMPLETE_SELECT', { id: 'search' });

build/app/view/netcreate/nc-logic.js

@@ -376,10 +376,13 @@ MOD.Hook("INITIALIZE", () => {
 
     if (nodeID) {
       node = m_FindNodeById(nodeID); // Node IDs should be integers, not strings
+      if (DBG) console.log(PR, "SOURCE_SELECT found by nodeID", nodeID, 'node:', node);
     } else if (nodeLabel) {
       node = m_FindMatchingNodesByLabel(nodeLabel).shift();
+      if (DBG) console.log(PR, "SOURCE_SELECT found by nodeLabel", nodeLabel, "node:", node);
     } else {
       // No node selected, so deselect
+      if (DBG) console.log(PR, "SOURCE_SELECT found no node", node);
     }
 
     if (DBG) console.log(PR, "SOURCE_SELECT found", node);
@@ -435,7 +438,7 @@ MOD.Hook("INITIALIZE", () => {
   });
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - inside hook
-  /*/ SOURCE_SEARCH_AND_SELECT first searches for an exact mathcing node
+  /*/ SOURCE_SEARCH_AND_SELECT first searches for an exact matching node
       and if found, selects it.
       This is called by AutoComplete onBlur in case we need to make an
       implicit selection.
@@ -444,6 +447,7 @@ MOD.Hook("INITIALIZE", () => {
     let { searchString } = data;
     let node = m_FindMatchingNodesByLabel(searchString).shift();
     if (node && (node.label === searchString)) {
+      console.log(PR,'SOURCE_SEARCH_AND_SELECT about to trigger SOURCE_SELECT data was',data);
       m_sourceSelect({ nodeIDs: [node.id] });
     }
   });