Adding filter bar

Issue-ID: AAI-543
Change-Id: I18ec69f4585a9f01feafd009fcd30493a039b064
Signed-off-by: Shawn Severin <shawn.severin@amdocs.com>

4 files changed, 674 insertions, 120 deletions

diff --git a/src/generic-components/graph/ForceDirectedGraph.jsx b/src/generic-components/graph/ForceDirectedGraph.jsx
index 872b2d5..00c2575 100644
--- a/src/generic-components/graph/ForceDirectedGraph.jsx
+++ b/src/generic-components/graph/ForceDirectedGraph.jsx
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *       http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ============LICENSE_END=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import {drag} from 'd3-drag';
 import {forceSimulation, forceLink, forceManyBody, forceCenter} from 'd3-force';
 import {interpolateNumber} from 'd3-interpolate';
@@ -44,7 +47,7 @@ class ForceDirectedGraph extends Component {
     nodeButtonSelectedCallback: PropTypes.func,
     currentlySelectedNodeView: PropTypes.string
   };
-  
+
   static defaultProps = {
     viewWidth: 0,
     viewHeight: 0,
@@ -57,16 +60,16 @@ class ForceDirectedGraph extends Component {
     nodeButtonSelectedCallback: undefined,
     currentlySelectedNodeView: ''
   };
-  
+
   constructor(props) {
     super(props);
-    
+
     this.state = {
       nodes: [], links: [], mainGroupTransform: zoomIdentity
     };
-    
+
     this.updateSimulationForce = this.updateSimulationForce.bind(this);
-    this.resetTransform = this.resetTransform.bind(this);
+    this.resetState = this.resetState.bind(this);
     this.applyBufferDataToState = this.applyBufferDataToState.bind(this);
     this.createNodePropForState = this.createNodePropForState.bind(this);
     this.createLinkPropForState = this.createLinkPropForState.bind(this);
@@ -74,118 +77,138 @@ class ForceDirectedGraph extends Component {
     this.simulationComplete = this.simulationComplete.bind(this);
     this.simulationTick = this.simulationTick.bind(this);
     this.nodeSelected = this.nodeSelected.bind(this);
+    this.nodeButtonSelected = this.nodeButtonSelected.bind(this);
     this.onZoom = this.onZoom.bind(this);
     this.onGraphDrag = this.onGraphDrag.bind(this);
     this.onNodeDrag = this.onNodeDrag.bind(this);
     this.addNodeInterpolator = this.addNodeInterpolator.bind(this);
     this.runInterpolators = this.runInterpolators.bind(this);
-    
+
     this.nodeBuffer = [];
     this.linkBuffer = [];
     this.nodeDatum = [];
     this.nodeButtonDatum = [];
     this.nodeFactory = new NodeFactory();
     this.visualElementFactory = new NodeVisualElementFactory();
-    
+
     this.isGraphMounted = false;
-    
+
     this.listenerGraphCounter = -1;
     this.nodeIndexTracker = new Map();
     this.interpolators = new Map();
     this.areInterpolationsRunning = false;
-    
+
     this.newNodeSelected = true;
     this.currentlySelectedNodeButton = undefined;
-    
+
     this.intervalTimer = interval(this.applyBufferDataToState, simulationKeys.DATA_COPY_INTERVAL);
     this.intervalTimer.stop();
-    
+
     this.interpolationTimer = interval(this.runInterpolators, simulationKeys.DATA_COPY_INTERVAL);
     this.interpolationTimer.stop();
-    
+
     this.simulation = forceSimulation();
     this.simulation.on('end', this.simulationComplete);
     this.simulation.stop();
-    
+
     this.svgZoom =
       zoom().scaleExtent([NodeConstants.SCALE_EXTENT_MIN, NodeConstants.SACEL_EXTENT_MAX]);
     this.svgZoom.clickDistance(2);
     this.nodeDrag = drag().clickDistance(2);
-    
+
     this.updateSimulationForce();
-    
+    // Temporary code until backend supports NOT displaying the button in the response.
+    if(props.dataOverlayButtons.length === 1) {
+      this.hideButton = true;
+    } else {
+      this.hideButton  = false;
+    }
     if (props.graphData) {
       if (props.graphData.graphCounter !== -1) {
-        this.startSimulation(props.graphData);
+        this.startSimulation(props.graphData, props.currentlySelectedNodeView, props.dataOverlayButtons);
       }
     }
   }
-  
+
   componentDidMount() {
     this.isGraphMounted = true;
   }
-  
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.graphData.graphCounter !== this.props.graphData.graphCounter) {
       this.listenerGraphCounter = this.props.graphData.graphCounter;
       this.newNodeSelected = true;
-      this.resetTransform();
-      this.startSimulation(nextProps.graphData);
+      this.resetState();
+      this.startSimulation(nextProps.graphData, nextProps.currentlySelectedNodeView, nextProps.dataOverlayButtons);
     }
   }
-  
+
+
   componentDidUpdate(prevProps) {
     let hasNewGraphDataRendered = (prevProps.graphData.graphCounter ===
     this.props.graphData.graphCounter);
     let shouldAttachListeners = (this.listenerGraphCounter !== this.props.graphData.graphCounter);
     let nodeCount = this.state.nodes.length;
-    
+
     if (nodeCount > 0) {
       if (hasNewGraphDataRendered && shouldAttachListeners) {
-        
         let nodes = select('.fdgMainSvg').select('.fdgMainG')
                                          .selectAll('.aai-entity-node')
                                          .data(this.nodeDatum);
-        
         nodes.on('click', (d) => {
           this.nodeSelected(d);
         });
-        
+
         nodes.call(this.nodeDrag.on('drag', (d) => {
           let xAndY = [currentEvent.x, currentEvent.y];
           this.onNodeDrag(d, xAndY);
         }));
-        
+
         let mainSVG = select('.fdgMainSvg');
         let mainView = mainSVG.select('.fdgMainView');
         this.svgZoom.transform(mainSVG, zoomIdentity);
         this.svgZoom.transform(mainView, zoomIdentity);
-        
+
         mainSVG.call(this.svgZoom.on('zoom', () => { // D3 Zoom also handles panning
           this.onZoom(currentEvent.transform);
         })).on('dblclick.zoom', null); // Ignore the double-click zoom event
-        
+
         this.listenerGraphCounter = this.props.graphData.graphCounter;
       }
+
+      if (this.newNodeSelected) {
+        let nodeButtons = select('.fdgMainSvg').select('.fdgMainG')
+                                               .selectAll('.aai-entity-node')
+                                               .selectAll('.node-button')
+                                               .data(this.nodeButtonDatum);
+        if (!nodeButtons.empty()) {
+          nodeButtons.on('click', (d) => {
+            this.nodeButtonSelected(d);
+          });
+          if (hasNewGraphDataRendered && shouldAttachListeners) {
+            this.newNodeSelected = false;
+          }
+        }
+      }
     }
   }
-  
+
   componentWillUnmount() {
     this.isGraphMounted = false;
-    
+
     let nodes = select('.fdgMainSvg').select('.fdgMainG')
                                      .selectAll('.aai-entity-node');
     let nodeButtons = nodes.selectAll('.node-button');
-    
+
     nodes.on('click', null);
     nodeButtons.on('click', null);
-    
+
     let mainSVG = select('.fdgMainSvg');
-    
+
     mainSVG.call(this.svgZoom.on('zoom', null)).on('dblclick.zoom', null);
     mainSVG.call(drag().on('drag', null));
   }
-  
+
   updateSimulationForce() {
     this.simulation.force('link', forceLink());
     this.simulation.force('link').id((d) => {
@@ -193,55 +216,65 @@ class ForceDirectedGraph extends Component {
     });
     this.simulation.force('link').strength(0.3);
     this.simulation.force('link').distance(100);
-    
+
     this.simulation.force('charge', forceManyBody());
     this.simulation.force('charge').strength(-1250);
     this.simulation.alpha(1);
-    
+
     this.simulation.force('center',
       forceCenter(this.props.viewWidth / 2, this.props.viewHeight / 2));
   }
-  
-  resetTransform() {
+
+  resetState() {
     if (this.isGraphMounted) {
       this.setState(() => {
         return {
-          mainGroupTransform: zoomIdentity
+          mainGroupTransform: zoomIdentity,
+          nodes: [], links: []
         };
       });
     }
   }
-  
+
   applyBufferDataToState() {
     this.nodeIndexTracker.clear();
-    
+
     let newNodes = [];
     this.nodeBuffer.map((node, i) => {
       let nodeProps = this.createNodePropForState(node);
-      
-      if (nodeProps.meta.nodeMeta.className === NodeConstants.SELECTED_NODE_CLASS_NAME ||
-        nodeProps.meta.nodeMeta.className === NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME) {
-        
+
+      if (nodeProps.meta.nodeMeta.className ===
+        NodeConstants.SELECTED_NODE_CLASS_NAME ||
+        nodeProps.meta.nodeMeta.className ===
+        NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME) {
+
         this.nodeButtonDatum[0].data = nodeProps.meta;
-        
-        nodeProps = {
-          ...nodeProps,
-          buttons: [this.nodeButtonDatum[0].isSelected]
-        };
+        if(this.nodeButtonDatum.length > 1) {
+          this.nodeButtonDatum[1].data = nodeProps.meta;
+          nodeProps = {
+            ...nodeProps,
+            buttons: [this.nodeButtonDatum[0].isSelected, this.nodeButtonDatum[1].isSelected]
+          };
+        } else {
+          nodeProps = {
+            ...nodeProps,
+            buttons: [this.nodeButtonDatum[0].isSelected]
+          };
+        }
       }
-      
-      newNodes.push(this.nodeFactory.buildNode(nodeProps.meta.nodeMeta.className, nodeProps));
-      
+
+      newNodes.push(this.nodeFactory.buildNode(nodeProps.meta.nodeMeta.className, nodeProps, this.hideButton));
+
       this.nodeIndexTracker.set(node.id, i);
     });
-    
+
     let newLinks = [];
     this.linkBuffer.map((link) => {
       let key = link.id;
       let linkProps = this.createLinkPropForState(link);
       newLinks.push(this.visualElementFactory.createSvgLine(linkProps, key));
     });
-    
+
     if (this.isGraphMounted) {
       this.setState(() => {
         return {
@@ -250,7 +283,7 @@ class ForceDirectedGraph extends Component {
       });
     }
   }
-  
+
   createNodePropForState(nodeData) {
     return {
       renderProps: {
@@ -260,7 +293,7 @@ class ForceDirectedGraph extends Component {
       }
     };
   }
-  
+
   createLinkPropForState(linkData) {
     return {
       className: 'aai-entity-link',
@@ -270,10 +303,10 @@ class ForceDirectedGraph extends Component {
       y2: linkData.target.y
     };
   }
-  
-  startSimulation(graphData) {
+
+  startSimulation(graphData, currentView, overlayButtons) {
     this.nodeFactory.setNodeMeta(graphData.graphMeta);
-    
+
     // Experiment with removing length = 0... might not be needed as new array
     // assignment will likely destroy old reference
     this.nodeBuffer.length = 0;
@@ -282,45 +315,60 @@ class ForceDirectedGraph extends Component {
     this.linkBuffer = Array.from(graphData.linkDataArray);
     this.nodeDatum.length = 0;
     this.nodeDatum = Array.from(graphData.nodeDataArray);
-    
+
     this.nodeButtonDatum.length = 0;
-    
-    let isNodeDetailsSelected = true;
+
+    let isNodeDetailsSelected = (currentView ===
+    overlayButtons[0] ||
+    currentView ===
+    '');
     this.nodeButtonDatum.push({
-      name: NodeConstants.ICON_ELLIPSES, isSelected: isNodeDetailsSelected
+      name: NodeConstants.ICON_ELLIPSES, isSelected: isNodeDetailsSelected, overlayName: overlayButtons[0]
     });
-    
+
+
+    if(overlayButtons.length > 1 ) {
+      let isSecondButtonSelected = (currentView === overlayButtons[1]);
+
+      this.nodeButtonDatum.push({
+        name: NodeConstants.ICON_TRIANGLE_WARNING, isSelected: isSecondButtonSelected, overlayName: overlayButtons[1]
+      });
+    }
+
+
     if (isNodeDetailsSelected) {
       this.currentlySelectedNodeButton = NodeConstants.ICON_ELLIPSES;
+    } else {
+      this.currentlySelectedNodeButton = NodeConstants.ICON_TRIANGLE_WARNING;
     }
-    
+
     this.updateSimulationForce();
-    
+
     this.simulation.nodes(this.nodeBuffer);
     this.simulation.force('link').links(this.linkBuffer);
     this.simulation.on('tick', this.simulationTick);
     this.simulation.restart();
   }
-  
+
   simulationComplete() {
     this.intervalTimer.stop();
     this.applyBufferDataToState();
   }
-  
+
   simulationTick() {
     this.intervalTimer.restart(this.applyBufferDataToState, simulationKeys.DATA_COPY_INTERVAL);
     this.simulation.on('tick', null);
   }
-  
+
   nodeSelected(datum) {
     if (this.props.nodeSelectedCallback) {
       this.props.nodeSelectedCallback(datum);
     }
-    
+
     let didUpdateNew = false;
     let didUpdatePrevious = false;
     let isSameNodeSelected = true;
-    
+
     // Check to see if a default node was previously selected
     let selectedDefaultNode = select('.fdgMainSvg').select('.fdgMainG')
                                                    .selectAll('.aai-entity-node')
@@ -333,7 +381,7 @@ class ForceDirectedGraph extends Component {
         isSameNodeSelected = false;
       }
     }
-    
+
     // Check to see if a searched node was previously selected
     let selectedSearchedNode = select('.fdgMainSvg').select('.fdgMainG')
                                                     .selectAll('.aai-entity-node')
@@ -346,7 +394,7 @@ class ForceDirectedGraph extends Component {
         isSameNodeSelected = false;
       }
     }
-    
+
     if (!isSameNodeSelected) {
       let newlySelectedNode = select('.fdgMainSvg').select('.fdgMainG')
                                                    .selectAll('.aai-entity-node')
@@ -354,7 +402,7 @@ class ForceDirectedGraph extends Component {
                                                      return (datum.id === d.id);
                                                    });
       if (!newlySelectedNode.empty()) {
-        
+
         if (newlySelectedNode.datum().nodeMeta.searchTarget) {
           this.nodeBuffer[newlySelectedNode.datum().index].nodeMeta.className =
             NodeConstants.SELECTED_SEARCHED_NODE_CLASS_NAME;
@@ -365,13 +413,35 @@ class ForceDirectedGraph extends Component {
         didUpdateNew = true;
       }
     }
-    
+
     if (didUpdatePrevious && didUpdateNew) {
       this.newNodeSelected = true;
       this.applyBufferDataToState();
     }
   }
 
+  nodeButtonSelected(datum) {
+    if (this.props.nodeButtonSelectedCallback) {
+      let buttonClickEvent = {
+        buttonId: datum.overlayName
+      };
+      this.props.nodeButtonSelectedCallback(buttonClickEvent);
+    }
+
+    if (this.currentlySelectedNodeButton !== datum.name) {
+      if (datum.name === this.nodeButtonDatum[0].name) {
+        this.nodeButtonDatum[0].isSelected = true;
+        this.nodeButtonDatum[1].isSelected = false;
+      }
+      if (datum.name === this.nodeButtonDatum[1].name) {
+        this.nodeButtonDatum[0].isSelected = false;
+        this.nodeButtonDatum[1].isSelected = true;
+      }
+      this.currentlySelectedNodeButton = datum.name;
+      this.applyBufferDataToState();
+    }
+  }
+
   onZoom(eventTransform) {
     if (this.isGraphMounted) {
       this.setState(() => {
@@ -381,7 +451,7 @@ class ForceDirectedGraph extends Component {
       });
     }
   }
-  
+
   onGraphDrag(xAndYCoords) {
     let translate = `translate(${xAndYCoords.x}, ${xAndYCoords.y})`;
     let oldTransform = this.state.mainGroupTransform;
@@ -393,7 +463,7 @@ class ForceDirectedGraph extends Component {
       });
     }
   }
-  
+
   onNodeDrag(datum, xAndYCoords) {
     let nodeIndex = this.nodeIndexTracker.get(datum.id);
     if (this.nodeBuffer[nodeIndex]) {
@@ -402,7 +472,7 @@ class ForceDirectedGraph extends Component {
       this.applyBufferDataToState();
     }
   }
-  
+
   addNodeInterpolator(nodeId, key, startingValue, endingValue, duration) {
     let numberInterpolator = interpolateNumber(startingValue, endingValue);
     let timeNow = now();
@@ -410,20 +480,20 @@ class ForceDirectedGraph extends Component {
       nodeId: nodeId, key: key, duration: duration, timeCreated: timeNow, method: numberInterpolator
     };
     this.interpolators.set(nodeId, interpolationObject);
-    
+
     if (!this.areInterpolationsRunning) {
       this.interpolationTimer.restart(this.runInterpolators, simulationKeys.DATA_COPY_INTERVAL);
       this.areInterpolationsRunning = true;
     }
   }
-  
+
   runInterpolators() {
     // If we have no more interpolators to run then shut'r down!
     if (this.interpolators.size === 0) {
       this.interpolationTimer.stop();
       this.areInterpolationsRunning = false;
     }
-    
+
     let iterpolatorsComplete = [];
     // Apply interpolation values
     this.interpolators.forEach((interpolator) => {
@@ -439,22 +509,22 @@ class ForceDirectedGraph extends Component {
         this.nodeBuffer[nodeIndex][interpolator.key] = interpolator.method(t);
       }
     });
-    
+
     // Remove any interpolators that are complete
     if (iterpolatorsComplete.length > 0) {
       for (let i = 0; i < iterpolatorsComplete.length; i++) {
         this.interpolators.delete(iterpolatorsComplete[i]);
       }
     }
-    
+
     this.applyBufferDataToState();
   }
-  
+
   render() {
     // We will be using these values veru shortly, commenting out for eslint
     // reasons so we can build for PV let {viewWidth, viewHeight} = this.props;
     let {nodes, links, mainGroupTransform} = this.state;
-    
+
     return (
       <div className='ts-force-selected-graph'>
         <svg className={'fdgMainSvg'} width='100%' height='100%'>
@@ -478,9 +548,9 @@ class ForceDirectedGraph extends Component {
       </div>
     );
   }
-  
+
   static graphCounter = 0;
-  
+
   static generateNewProps(nodeArray, linkArray, metaData) {
     ForceDirectedGraph.graphCounter += 1;
     return {
diff --git a/src/generic-components/graph/NodeFactory.js b/src/generic-components/graph/NodeFactory.js
index da57ffb..abfd73b 100644
--- a/src/generic-components/graph/NodeFactory.js
+++ b/src/generic-components/graph/NodeFactory.js
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *       http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ============LICENSE_END=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 import React from 'react';
 
 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
@@ -38,11 +41,11 @@ class NodeFactory {
     this.graphMeta = metaObject;
     this.visualElementFactory.setVisualElementMeta(metaObject);
   }
-
-  buildNode(nodeType, nodeProps) {
+ // hideButton a temporary solution to not display the button.
+  buildNode(nodeType, nodeProps, hideButton) {
 
     let translate = `translate(
-                              ${nodeProps.renderProps.x},
+                              ${nodeProps.renderProps.x}, 
                               ${nodeProps.renderProps.y})`;
     let finalProps = {
       ...nodeProps.renderProps,
@@ -51,14 +54,20 @@ class NodeFactory {
     };
 
     let nodeVisualElementsData = this.extractVisualElementArrayFromMeta(
-      nodeType);
+      nodeType, hideButton);
     let nodeVisualElements = undefined;
     if (nodeVisualElementsData) {
       nodeVisualElements = [];
       nodeVisualElementsData.map((elementData, index) => {
         if (elementData.type === NodeVisualElementConstants.BUTTON) {
           if (nodeProps.buttons) {
-            let isButtonSelected = true;
+            let isButtonSelected = false;
+            if (index === 4) {
+              isButtonSelected = nodeProps.buttons[0];
+            }
+            if (index === 5) {
+              isButtonSelected = nodeProps.buttons[1];
+            }
             elementData = {
               ...elementData,
               isSelected: isButtonSelected
@@ -99,11 +108,20 @@ class NodeFactory {
     return React.createElement('g', finalProps);
   }
 
-  extractVisualElementArrayFromMeta(nodeClassName) {
+  extractVisualElementArrayFromMeta(nodeClassName, hideButton) {
     let nodeVisualElements = undefined;
     if (this.graphMeta.aaiEntityNodeDescriptors) {
       nodeVisualElements =
         this.graphMeta.aaiEntityNodeDescriptors[nodeClassName].visualElements;
+      if(hideButton) {
+         // temp, until BE not sent the triangle button
+        for (var i = 0; i < nodeVisualElements.length; i++) {
+          if (nodeVisualElements[i].type === 'button' && nodeVisualElements[i].name === 'icon_triangle_warning') {
+            nodeVisualElements.splice(i, 1);
+            return;
+          }
+        }
+      }
     }
     return nodeVisualElements;
   }
diff --git a/src/generic-components/graph/NodeVisualElementConstants.js b/src/generic-components/graph/NodeVisualElementConstants.js
index 11d9f7d..aeeedf7 100644
--- a/src/generic-components/graph/NodeVisualElementConstants.js
+++ b/src/generic-components/graph/NodeVisualElementConstants.js
@@ -1,25 +1,28 @@
 /*
- * ============LICENSE_START=======================================================
- * org.onap.aai
- * ================================================================================
- * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
  * Copyright © 2017 Amdocs
- * ================================================================================
+ * All rights reserved.
+ * ============================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- *       http://www.apache.org/licenses/LICENSE-2.0
+ *      http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * ============LICENSE_END=========================================================
+ * ============LICENSE_END=====================================================
  *
- * ECOMP is a trademark and service mark of AT&T Intellectual Property.
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
  */
+
 export default {
   SVG_CIRCLE: 'circle',
   SVG_LINE: 'line',
@@ -41,6 +44,5 @@ export default {
   ICON_ELLIPSES: 'icon_ellipses',
   ICON_TRIANGLE_WARNING: 'icon_triangle_warning',
   ICON_TICK: 'icon_tick',
-  ICON_WARNING: 'icon_warning',
-  BUTTON_CLICK_NODE_DETAILS: 'NODE_DETAILS'
+  ICON_WARNING: 'icon_warning'
 };
diff --git a/src/generic-components/graph/TempCreateAttributes.js b/src/generic-components/graph/TempCreateAttributes.js
new file mode 100644
index 0000000..fac32ba
--- /dev/null
+++ b/src/generic-components/graph/TempCreateAttributes.js
@@ -0,0 +1,464 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React from 'react';
+
+
+export default {
+  createNodeAttributes: () => {
+    return {
+      className: 'node'
+    };
+  },
+  createShapeAttributes: () => {
+    return {
+      r: 3
+    };
+  },
+  createCircleStyle: () => {
+    return {
+      fill: 'rgb(98, 102, 104)',
+      stroke: 'rgb(78, 82, 84)',
+      strokeWidth: 1
+    };
+  },
+  createLinkAttributes: () => {
+    return {
+      className: 'link',
+      x1: 50,
+      y1: 50,
+      x2: 100,
+      y2: 500,
+    };
+  },
+  createLineStyle: () => {
+    return {
+      stroke: 'rgb(217, 218, 218)',
+      strokeWidth: 1
+    };
+  },
+  createTestCircle: () => {
+    return React.createElement('circle', {
+      cx: '100',
+      cy: '100',
+      r: '15',
+      fill: 'rgb(255, 255, 255)',
+      stroke: 'rgb(98, 102, 104)',
+      strokeWidth: '3'
+    });
+  },
+  getNodeLinkArray: () => {
+    return {
+      'graphMeta': {
+        'aaiEntityNodeDescriptors': {
+          'generalNodeClass': {
+            'class': 'aai-entity-node general-node',
+            'visualElements': [
+              {
+                'type': 'circle',
+                'class': 'outer',
+                'svgAttributes': {
+                  'r': '16'
+                }
+              },
+              {
+                'type': 'circle',
+                'class': 'inner',
+                'svgAttributes': {
+                  'r': '10'
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-type-label',
+                'displayKey': 'itemType',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '33'
+                  }
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-value-label',
+                'displayKey': 'itemNameValue',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '48'
+                  }
+                }
+              }
+            ]
+          },
+          'searchedNodeClass': {
+            'class': 'aai-entity-node search-node',
+            'visualElements': [
+              {
+                'type': 'circle',
+                'class': 'outer',
+                'svgAttributes': {
+                  'r': '16'
+                }
+              },
+              {
+                'type': 'circle',
+                'class': 'inner',
+                'svgAttributes': {
+                  'r': '10'
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-type-label',
+                'displayKey': 'itemType',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '33'
+                  }
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-value-label',
+                'displayKey': 'itemNameValue',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '48'
+                  }
+                }
+              }
+            ]
+          },
+          'selectedSearchedNodeClass': {
+            'class': 'aai-entity-node selected-search-node',
+            'visualElements': [
+              {
+                'type': 'circle',
+                'class': 'outer',
+                'svgAttributes': {
+                  'r': '31'
+                }
+              },
+              {
+                'type': 'circle',
+                'class': 'inner',
+                'svgAttributes': {
+                  'r': '20'
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-type-label',
+                'displayKey': 'itemType',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '48'
+                  }
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-value-label',
+                'displayKey': 'itemNameValue',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '63'
+                  }
+                }
+              },
+              {
+                'type': 'button',
+                'name': 'icon_ellipses',
+                'class': 'node-button',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '33',
+                    'y': '-35'
+                  }
+                },
+                'svgAttributes': {
+                  'className': 'node-button',
+                  'r': '10'
+                }
+              },
+              {
+                'type': 'button',
+                'name': 'icon_triangle_warning',
+                'class': 'node-button',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '46',
+                    'y': '-12'
+                  }
+                },
+                'svgAttributes': {
+                  'className': 'node-button',
+                  'r': '10'
+                }
+              }
+            ]
+          },
+          'selectedNodeClass': {
+            'class': 'aai-entity-node selected-node',
+            'visualElements': [
+              {
+                'type': 'circle',
+                'class': 'outer',
+                'svgAttributes': {
+                  'r': '31'
+                }
+              },
+              {
+                'type': 'circle',
+                'class': 'inner',
+                'svgAttributes': {
+                  'r': '20'
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-type-label',
+                'displayKey': 'itemType',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '48'
+                  }
+                }
+              },
+              {
+                'type': 'text',
+                'class': 'id-value-label',
+                'displayKey': 'itemNameValue',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '0',
+                    'y': '63'
+                  }
+                }
+              },
+              {
+                'type': 'button',
+                'name': 'icon_ellipses',
+                'class': 'node-button',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '33',
+                    'y': '-35'
+                  }
+                },
+                'svgAttributes': {
+                  'className': 'node-button',
+                  'r': '10'
+                }
+              },
+              {
+                'type': 'button',
+                'name': 'icon_triangle_warning',
+                'class': 'node-button',
+                'shapeAttributes': {
+                  'offset': {
+                    'x': '46',
+                    'y': '-12'
+                  }
+                },
+                'svgAttributes': {
+                  'className': 'node-button',
+                  'r': '10'
+                }
+              }
+            ]
+          }
+        },
+        'numNodes': 6,
+        'numLinks': 5,
+        'renderTimeInMs': 4550,
+        'numLinksResolvedSuccessfullyFromCache': 0,
+        'numLinksResolvedSuccessfullyFromServer': 7,
+        'numLinkResolveFailed': 0
+      },
+      'nodes': [{
+        'id': 'TRINITY-PSERVER',
+        'itemType': 'pserver',
+        'itemNameKey': 'pserver.TRINITY-PSERVER',
+        'itemNameValue': 'TRINITY-PSERVER',
+        'itemProperties': {
+          'hostname': 'TRINITY-PSERVER',
+          'in-maint': 'false',
+          'resource-version': '1455590484'
+        },
+        'nodeMeta': {
+          'className': 'selectedSearchedNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 628,
+          'relationshipNode': false,
+          'searchTarget': true,
+          'enrichableNode': false,
+          'nodeValidated': true,
+          'nodeIssue': true
+        }
+      }, {
+        'id': 'TRINITYSIL',
+        'itemType': 'complex',
+        'itemNameKey': 'complex.TRINITYSIL',
+        'itemNameValue': 'TRINITYSIL',
+        'itemProperties': {
+          'country': 'USA',
+          'postal-code': '07748',
+          'city': 'Middletown',
+          'physical-location-id': 'TRINITYSIL',
+          'resource-version': '1459957457',
+          'street1': 'Trinity',
+          'state': 'NJ',
+          'physical-location-type': 'Trinity',
+          'region': 'US'
+        },
+        'nodeMeta': {
+          'className': 'generalNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 644,
+          'relationshipNode': false,
+          'searchTarget': false,
+          'enrichableNode': false,
+          'nodeValidated': true,
+          'nodeIssue': false
+        }
+      }, {
+        'id': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50',
+        'itemType': 'vserver',
+        'itemNameKey': 'vserver.c385bb3e-6ebd-4898-bc92-792e0ac2db50',
+        'itemNameValue': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50',
+        'itemProperties': {
+          'in-maint': 'false',
+          'resource-version': '1475160142',
+          'vserver-name': 'bems0001vm001',
+          'prov-status': 'ACTIVE',
+          'vserver-id': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50',
+          'vserver-name2': 'bems0001vm001bem001-1452',
+          'vserver-selflink': 'TRINITY vserverLink',
+          'is-closed-loop-disabled': 'false'
+        },
+        'nodeMeta': {
+          'className': 'generalNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 2633,
+          'relationshipNode': false,
+          'searchTarget': false,
+          'enrichableNode': false
+        }
+      }, {
+        'id': '7c73d776-001d-4042-a958-37f2e419ed10',
+        'itemType': 'vserver',
+        'itemNameKey': 'vserver.7c73d776-001d-4042-a958-37f2e419ed10',
+        'itemNameValue': '7c73d776-001d-4042-a958-37f2e419ed10',
+        'itemProperties': {
+          'resource-version': '1477075390',
+          'vserver-name': 'nsbg0001vm002',
+          'prov-status': 'NVTPROV',
+          'vserver-id': '7c73d776-001d-4042-a958-37f2e419ed10',
+          'vserver-name2': 'VM-19631',
+          'vserver-selflink': 'TRINITY vserverLink'
+        },
+        'nodeMeta': {
+          'className': 'generalNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 2368,
+          'relationshipNode': false,
+          'searchTarget': false,
+          'enrichableNode': false
+        }
+      }, {
+        'id': 'fc6be93d-915e-4034-a8f9-463b70130614',
+        'itemType': 'vserver',
+        'itemNameKey': 'vserver.fc6be93d-915e-4034-a8f9-463b70130614',
+        'itemNameValue': 'fc6be93d-915e-4034-a8f9-463b70130614',
+        'itemProperties': {
+          'resource-version': '1477075398',
+          'vserver-name': 'nsbg0001vm004',
+          'prov-status': 'NVTPROV',
+          'vserver-id': 'fc6be93d-915e-4034-a8f9-463b70130614',
+          'vserver-name2': 'VM-19630',
+          'vserver-selflink': 'TRINITY vserverLink'
+        },
+        'nodeMeta': {
+          'className': 'generalNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 2621,
+          'relationshipNode': false,
+          'searchTarget': false,
+          'enrichableNode': false
+        }
+      }, {
+        'id': '8555c2ed-6818-43c5-8cf5-cd36b0169031',
+        'itemType': 'vserver',
+        'itemNameKey': 'vserver.8555c2ed-6818-43c5-8cf5-cd36b0169031',
+        'itemNameValue': '8555c2ed-6818-43c5-8cf5-cd36b0169031',
+        'itemProperties': {
+          'resource-version': '1477075396',
+          'vserver-name': 'nsbg0001vm003',
+          'prov-status': 'NVTPROV',
+          'vserver-id': '8555c2ed-6818-43c5-8cf5-cd36b0169031',
+          'vserver-name2': 'VM-19629',
+          'vserver-selflink': 'TRINITY vserverLink'
+        },
+        'nodeMeta': {
+          'className': 'generalNodeClass',
+          'nodeDebug': null,
+          'selfLinkResponseTimeInMs': 2663,
+          'relationshipNode': false,
+          'searchTarget': false,
+          'enrichableNode': false
+        }
+      }],
+      'links': [{
+        'id': 'TRINITY-PSERVER_TRINITYSIL',
+        'source': 'TRINITY-PSERVER',
+        'target': 'TRINITYSIL'
+      }, {
+        'id': 'TRINITY-PSERVER_c385bb3e-6ebd-4898-bc92-792e0ac2db50',
+        'source': 'TRINITY-PSERVER',
+        'target': 'c385bb3e-6ebd-4898-bc92-792e0ac2db50'
+      }, {
+        'id': 'TRINITY-PSERVER_7c73d776-001d-4042-a958-37f2e419ed10',
+        'source': 'TRINITY-PSERVER',
+        'target': '7c73d776-001d-4042-a958-37f2e419ed10'
+      }, {
+        'id': 'TRINITY-PSERVER_fc6be93d-915e-4034-a8f9-463b70130614',
+        'source': 'TRINITY-PSERVER',
+        'target': 'fc6be93d-915e-4034-a8f9-463b70130614'
+      }, {
+        'id': 'TRINITY-PSERVER_8555c2ed-6818-43c5-8cf5-cd36b0169031',
+        'source': 'TRINITY-PSERVER',
+        'target': '8555c2ed-6818-43c5-8cf5-cd36b0169031'
+      }]
+    };
+  }
+};