diff --git a/01_Code/physical_computing_interface/graph/graph.js b/01_Code/physical_computing_interface/graph/graph.js
index 0136d6c4c476340e60c84f2a58e72a56e2f49b75..ba46d6a8abfee6ffbe5cda84d6e71a643257fcff 100644
--- a/01_Code/physical_computing_interface/graph/graph.js
+++ b/01_Code/physical_computing_interface/graph/graph.js
@@ -12,6 +12,7 @@ function initGraph(){
     var color6="#696767"; //grey
     var font= "consolas";//'font-family'
 
+
     var cy = window.cy = cytoscape({
         container: document.getElementById('cy'),
 
@@ -40,7 +41,7 @@ function initGraph(){
                     "text-wrap": "wrap",
                     'color': color6,
                     'font-family':font,
-                    "font-size": 10
+                    "font-size": 8
                     
                 }
             },
@@ -102,6 +103,7 @@ function initGraph(){
 
                 
     });
+
     var api = cy.expandCollapse('get');
     //////////////////////////
 
@@ -128,8 +130,6 @@ function initGraph(){
                 //play //TODO change to event
                 content: '<span class="fa fa-play fa-1x"></span>',
                 select: function(ele){
-                    // console.log( ele._private.data.data.code);
-                    // console.log( eval(ele._private.data.data.code));
                     // runNode(ele);
                     var pos=utils.getXYZfromName(ele.data('id'));
                     GLOBALS.selectNode(pos.x,pos.y,pos.z);
@@ -141,9 +141,7 @@ function initGraph(){
             {   //todo remove clutter and put into function
                 content: '<span class="fa fa-trash fa-1x"></span>',
                 select: function(ele){
-                    // console.log( ele.data('name') );
                     var tgt = ele; 
-                    // console.log(tgt._private.data.id);
                     var pos=utils.getXYZfromName(tgt._private.data.id);
                     if(tgt._private.data.name=="N/A"){
                         tgt.remove();
@@ -204,9 +202,8 @@ function initGraph(){
     });
     /////////////////////////
 
-    addLayerNodes(GLOBALS.gridSize/2);
-
-
+    // addLayerNodes(GLOBALS.gridSize/2);
+    // addNeighborhood();
     function addLayerNodes(n){
         for(var i=0;i<n;i++){
             cy.add({
@@ -237,6 +234,133 @@ function initGraph(){
 
     }
 
+    function addNeighborhood(){
+        // var i=cy.nodes('[isNeighborhood > 0]').length;
+        var i=0;
+        while(cy.$id(''+i).length!=0){
+            i++;
+        }
+        cy.add({
+            classes: 'automove-viewport',
+            // data: { id: 'new' + Math.round( Math.random() * 100 ) },
+            data: { 
+                id: ''+i,
+                name: 'Neighborhood \n' +i,
+                isNeighborhood :1,
+                data:{
+                    id: ''+i,
+                    name: 'Neighborhood ' +i,
+                }
+                
+            },
+            position: {
+                x: i*GLOBALS.voxelSpacing,
+                y: i*GLOBALS.voxelSpacing
+            }
+        });
+        return i;
+
+    }
+
+
+    function findNeighborhood(node){//when add new node
+        var neigh=node.neighborhood(function( ele ){
+            return ele.isNode();
+        });
+        // console.log(neigh.length);
+        //if no neighbors then add new neighborhood and return its num
+        if(neigh.length==0){
+            var n=addNeighborhood();
+            return n;
+        }else if(neigh.length==1){ //if only one just return its num
+            return neigh[0]._private.data.data.parent;
+        }else {//if multiple
+            //look at smallest and return it's num
+            var neighValues=[];
+            for (var i=0;i<neigh.length;i++){
+                neighValues.push(neigh[i]._private.data.data.parent);
+            }
+            var minNeighValue=Math.min(...neighValues);
+            
+            //for each of the other neighborhoods
+            for (var i=0;i<neigh.length;i++){
+                var val=neigh[i]._private.data.data.parent;
+                if(val!=minNeighValue){
+                    //find successors/connected nodes
+                    var successors=neigh[i].successors(function( ele ){
+                        return ele.isNode();
+                    });
+                    //change their parent to the smallest
+                    neigh[i].move({parent: ''+minNeighValue});
+                    neigh[i]._private.data.data.parent=minNeighValue;//don't need just make sure in case not in successor
+
+                    successors.move({parent: ''+minNeighValue});
+                    for (var j=0;j<successors.length;j++){
+                        successors[i]._private.data.data.parent=minNeighValue;
+                    }
+                    //delete the group
+                    var tgt=cy.$id(''+val);
+                    tgt.remove();
+                }
+            }
+            return minNeighValue;
+        }
+
+    }
+
+    function updateNeighborhood(node){//when delete node
+        var neigh=node.neighborhood(function( ele ){
+            return ele.isNode();
+        });
+        var val=node._private.data.data.parent;
+        node.remove();
+        if(neigh.length==0){//if no neighbors 
+            //delete neighborhood
+            var tgt=cy.$id(''+val);
+            tgt.remove();
+        } else if(neigh.length>1){ //if one neighbor do nothing
+            //if more than one
+            //check for each two
+            for (var i=0;i<neigh.length;i++){
+                for (var j=i+1;j<neigh.length;j++){
+                    //if not the same
+                    if(neigh[i].id()!==neigh[j].id()){
+                        var id=neigh[j].id();
+                        var successors=neigh[i].successors(function( ele ){
+                            return ele.isNode();
+                        });
+                        var f=successors.$id(neigh[j].id());
+                        if(f.length==0) {//if not connected //if connected do nothing
+                            //one part do nothing (j do noting)
+                            //other part create new neighborhood and add them to it
+                            var n=addNeighborhood();
+                            neigh[i].move({parent: ''+n});
+                            neigh[i]._private.data.data.parent=n;
+                            
+                            successors.move({parent: ''+n});
+                            for (var k=0;k<successors.length;k++){
+                                successors[k]._private.data.data.parent=n;
+                            }
+                        }                            
+                    }
+                }
+            }
+        }
+    }
+
+    //todo: fix updateNeighborhood so I don't need this
+    function pruneNeighborhoods(){
+        var neighborhoods=cy.nodes('[isNeighborhood > 0]');
+        for (var i=0;i<neighborhoods.length;i++){
+            // console.log(neighborhoods[i].children().length);
+            if(neighborhoods[i].children().length==0){
+                neighborhoods[i].remove();
+            }
+        }
+    }
+    
+
+    
     //select node
     //TODO: HIGHLIGHT NODE IN THREEJS
     cy.on('tap', 'node', function(){
@@ -292,18 +416,20 @@ function initGraph(){
     });
 
     document.addEventListener('addNode', function (e) { 
+        var neighborhood=0;
         
         cy.add({
             classes: 'automove-viewport',
             // data: { id: 'new' + Math.round( Math.random() * 100 ) },
             data: { 
                 id: e.detail.id,
-                name: '[' +e.detail.x +"," +e.detail.y+']\n'+0,
+                name: '[' +e.detail.x +"," +e.detail.y+"," +e.detail.z+']\n'+0,
                 parent: ''+e.detail.z,
+                isNeighborhood :0,
                 data:{
                     id: e.detail.id,
-                    name: '[' +e.detail.x +"," +e.detail.y+']',
-                    parent: ''+e.detail.z,
+                    name: '[' +e.detail.x +"," +e.detail.y+"," +e.detail.z+']',
+                    parent: neighborhood,
                     code: "Math.max(...inValues)",
                     state:Math.floor(Math.random() * 100),
                     locked:false,
@@ -330,8 +456,12 @@ function initGraph(){
         var tgt=cy.$id('[' +e.detail.x +"," +e.detail.y+","+e.detail.z+']');
         updateName(tgt);
 
-        // addEvents(e.detail.x,e.detail.y,e.detail.z);
-        // api.expandAll();
+        neighborhood=findNeighborhood(tgt);
+
+        tgt.move({parent: ''+neighborhood});
+        tgt._private.data.data.parent= neighborhood;
+
+        api.expandAll();
         
     }, false);
 
@@ -384,8 +514,12 @@ function initGraph(){
         // console.log("Remove:"+e.detail.x+" "+e.detail.y+" "+e.detail.z);
         removeNeighborsGraph(e.detail.x,e.detail.y,e.detail.z);
         var tgt=cy.$id(e.detail.id);
+        updateNeighborhood(tgt);
+        //prune neighborhoods
+        pruneNeighborhoods();
+        api.expandAll();
         //remove from Neighbor's graph
-        tgt.remove();
+        // tgt.remove();//removed in updateNeighborhood
         
     }, false);