diff --git a/01_Code/physical_computing_interface/app.js b/01_Code/physical_computing_interface/app.js
index d63db67c2e3886fe557f670bed1804fccdca53c6..2ec7b8f1a32abc164d2e51f86f930a091976ccd7 100644
--- a/01_Code/physical_computing_interface/app.js
+++ b/01_Code/physical_computing_interface/app.js
@@ -10,11 +10,6 @@ var GLOBALS=new globals(utils);
 var three=new threejs(GLOBALS,utils,'webgl','threejs1');
 three.init();
 
-var slider = document.getElementById("time");
-
-slider.oninput = function() {
-    replay(this.value);
-};
 
 initGraph();// todo enclose into class
 initEditor();// todo enclose into class
diff --git a/01_Code/physical_computing_interface/assembly/replay.js b/01_Code/physical_computing_interface/assembly/replay.js
index bc1732c4975b54492bbef0d884c5d318477ba067..90288135369533e856f78f63e4b4a7861d46f872 100644
--- a/01_Code/physical_computing_interface/assembly/replay.js
+++ b/01_Code/physical_computing_interface/assembly/replay.js
@@ -5,6 +5,12 @@
 // var timeStepOccupancy=[];
 // timeStepOccupancy.push([occupancy.slice()]);
 
+var slider = document.getElementById("time");
+
+slider.oninput = function() {
+    replay(this.value);
+};
+
 ////////////////////////
 document.addEventListener('addNode', function (e) { 
     
diff --git a/01_Code/physical_computing_interface/globals.js b/01_Code/physical_computing_interface/globals.js
index 95bec39a4440f9369ee1acee062e078cd625f5cc..e6e72541672e70b9be9b4e2ba7874ff4ac49be17 100644
--- a/01_Code/physical_computing_interface/globals.js
+++ b/01_Code/physical_computing_interface/globals.js
@@ -285,6 +285,45 @@ globals.prototype.removeNode=function (x,y,z,replay=false){
     document.dispatchEvent(removeNodeEvent);
 };
 
+globals.prototype.updateNode=function (data){
+    var updateNodeEvent = new CustomEvent('updateNode', { 
+        detail: 
+        {
+            id: data.id,
+            name: data.name,
+            parent: data.parent,
+            code: data.code,
+            state:data.state,
+            neighbors:data.neighbors,
+            inputs:data.inputs,
+            outputs:data.outputs,
+        }
+    });
+    document.dispatchEvent(updateNodeEvent);
+};
+
+globals.prototype.runNode=function (x,y,z){
+    x=parseInt(x);
+    y=parseInt(y);
+    z=parseInt(z);
+    [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=this.utils.getTransforms(this.grid,x, y,z);
+    var runNodeEvent = new CustomEvent('runNode', { 
+        detail: 
+        {
+            x:x,
+            y:y,
+            z:z,
+            id:'[' +x +"," +y+","+z+']',
+            posX:p_x,
+            posY:p_y,
+            posZ:p_z,
+            rotY:r_y,
+            replay:replay
+        }
+    });
+    document.dispatchEvent(runNodeEvent);
+};
+
 globals.prototype.adjustTimeStep=function (addRemove,x,y,z){
     var adjustTimeStepEvent = new CustomEvent('adjustTimeStep', { 
         detail: 
diff --git a/01_Code/physical_computing_interface/graph/graph.js b/01_Code/physical_computing_interface/graph/graph.js
index 84f6bf915e5cb7d3ad324dbc99d0b34ceb1ea0c1..e77185dff6c3dc085fa066daff9c3fa4665381d8 100644
--- a/01_Code/physical_computing_interface/graph/graph.js
+++ b/01_Code/physical_computing_interface/graph/graph.js
@@ -38,6 +38,7 @@ function initGraph(){
                     'background-color': color3,
                     'content': 'data(name)',
                     // 'text-valign': 'center',
+                    "text-wrap": "wrap",
                     'color': color6,
                     'font-family':font,
                     "font-size": 10
@@ -94,87 +95,18 @@ function initGraph(){
 
         elements: {
             nodes: [
-            //   {
-            //     data: { id: 'cy', name: 'DICE' }
-            //   },
-        
-            //   {
-            //     data: { id: 'core', name: 'Core', parent: 'api' },
-            //     position: { x: 0, y: 0 }
-            //   },
-        
-            //   {
-            //     data: { id: 'eles', name: 'Collection', parent: 'api' },
-            //     position: { x: 150, y: 150 }
-            //   },
-        
-            //   {
-            //     data: { id: 'style', name: 'Stylesheet', parent: 'api' },
-            //     position: { x: 0, y: 150 }
-            //   },
-        
-            //   {
-            //     data: { id: 'selector', name: 'Selector', parent: 'api' },
-            //     position: { x: -150, y: 150 }
-            //   },
-        
-            //   {
-            //     data: { id: 'ext', name: 'Extensions', parent: 'cy' }
-            //   },
-        
-            //   {
-            //     data: { id: 'corefn', name: 'Core Function', parent: 'ext' },
-            //     classes: 'ext',
-            //     position: { x: 350, y: -140 }
-            //   },
-        
-            //   {
-            //     data: { id: 'elesfn', name: 'Collection Function', parent: 'ext' },
-            //     classes: 'ext',
-            //     position: { x: 350, y: 0 }
-            //   },
-        
-            //   {
-            //     data: { id: 'layout', name: 'Layout', parent: 'ext' },
-            //     classes: 'ext',
-            //     position: { x: 350, y: 140 }
-            //   },
-        
-            //   {
-            //     data: { id: 'renderer', name: 'Renderer', parent: 'ext' },
-            //     classes: 'ext',
-            //     position: { x: 350, y: 280 }
-            //   },
-        
-            //   {
-            //     data: { id: 'api', name: 'Core API', parent: 'cy' }
-            //   },
-        
-            //   {
-            //     data: { id: 'app', name: 'Client' },
-            //     position: { x: 0, y: 480 }
-            //   }
             ],
             edges: [
-            //   { data: { source: 'core', target: 'eles' } },
-            //   { data: { source: 'core', target: 'ext' } },
-            //   { data: { source: 'core', target: 'style' } },
-            //   { data: { source: 'style', target: 'selector' } },
-            //   { data: { source: 'core', target: 'selector' } },
-            //   { data: { source: 'elesfn', target: 'eles' }, classes: 'ext' },
-            //   { data: { source: 'corefn', target: 'core' }, classes: 'ext' },
-            //   { data: { source: 'layout', target: 'api' }, classes: 'ext' },
-            //   { data: { source: 'renderer', target: 'api' }, classes: 'ext' },
-            //   { data: { source: 'app', target: 'api', name: 'use' }, classes: 'app' },
-            //   { data: { source: 'app', target: 'ext', name: 'register' }, classes: 'app' }
-            ]
+           ]
         },
         
 
                 
     });
+    var api = cy.expandCollapse('get');
     //////////////////////////
 
+    //nodes
     cy.cxtmenu({
         selector: 'node',//'node, edge',
         menuRadius: 50,
@@ -194,16 +126,23 @@ function initGraph(){
 
         commands: [
             {
+                //play //TODO change to event
                 content: '<span class="fa fa-play fa-1x"></span>',
                 select: function(ele){
-                    console.log( ele.id() );
+                    // 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);
+                    GLOBALS.runNode(pos.x,pos.y,pos.z);
+                    
                 }
             },
 
-            {
+            {   //todo remove clutter and put into function
                 content: '<span class="fa fa-trash fa-1x"></span>',
                 select: function(ele){
-                    console.log( ele.data('name') );
+                    // console.log( ele.data('name') );
                     var tgt = ele; 
                     // console.log(tgt._private.data.id);
                     var pos=utils.getXYZfromName(tgt._private.data.id);
@@ -221,15 +160,15 @@ function initGraph(){
                 // content: 'Select',
                 content: '<span class="fa fa-mouse-pointer fa-1x"></span>',
                 select: function(ele){
-                    console.log( ele.id());
-                    // var nodes = this;
-                    // ele.trigger('tap');//TODO FIX SELECT
+                    var pos=utils.getXYZfromName(ele.data('id'));
+                    GLOBALS.selectNode(pos.x,pos.y,pos.z);
                     
                 }
             }
         ]
     });
 
+    //expand and collapse
     cy.cxtmenu({
         selector: 'core',
         menuRadius: 50,
@@ -252,7 +191,6 @@ function initGraph(){
             {
                 content: '<span class="fa fa-expand-arrows-alt fa-1.5x"></span>',
                 select: function(){
-                    // console.log( 'bg1' );
                     api.expandAll();
                 }
             },
@@ -304,15 +242,17 @@ function initGraph(){
     //TODO: HIGHLIGHT NODE IN THREEJS
     cy.on('tap', 'node', function(){
         // var nodes = this;
-        GLOBALS.selectedjson=this._private.data.data;
-
-        var pos=utils.getXYZfromName(this._private.data.id);
+        // GLOBALS.selectedjson=this._private.data.data;
+        var pos=utils.getXYZfromName(this.data('id'));
         GLOBALS.selectNode(pos.x,pos.y,pos.z);
-        this.trigger('blaa');
+        // this.trigger('blaa');
     });
 
     document.addEventListener('selectNode', function (e) { 
+        
         var tgt=cy.$id(e.detail.id);
+        cy.nodes().unselect();//unselect the rest
+        tgt.select();
         GLOBALS.selectedjson=tgt._private.data.data;
         var neigh=tgt.neighborhood(function( ele ){
             return ele.isNode();
@@ -320,7 +260,7 @@ function initGraph(){
         neigh=tgt.connectedEdges();
         // console.log(tgt.edgesTo());
         for(var i=0;i<neigh.length;i++){
-            console.log(neigh[i].id());
+            // console.log(neigh[i].id());
         }
         
         
@@ -331,19 +271,19 @@ function initGraph(){
     //TODO: FIX
     cy.on('tap', 'edge', function(){
         var nodes = this;
+        var pos=utils.getXYZfromName(this.data('id'));
         GLOBALS.selectNode();
         GLOBALS.selectedjson=this._private.data;
         
 
     });
 
-
     //TODO: fix add node to random location threejs
     cy.on('tap', function( evt ){
         var tgt = evt.target || evt.cyTarget; // 3.x || 2.x
 
         if( tgt === cy ){
-            console.log( evt.position.x+" "+evt.position.y);
+            // console.log( evt.position.x+" "+evt.position.y);
             cy.add({
                 classes: 'automove-viewport',
                 data: { 
@@ -369,13 +309,14 @@ function initGraph(){
             // data: { id: 'new' + Math.round( Math.random() * 100 ) },
             data: { 
                 id: e.detail.id,
-                name: 0,
+                name: '[' +e.detail.x +"," +e.detail.y+']\n'+0,
                 parent: ''+e.detail.z,
                 data:{
                     id: e.detail.id,
                     name: '[' +e.detail.x +"," +e.detail.y+']',
                     parent: ''+e.detail.z,
-                    code: "sum(x+y/2)",
+                    code: "2*2*5",
+                    state:0,
                     neighbors:[],
                     inputs:[],
                     outputs:[],
@@ -469,42 +410,40 @@ function initGraph(){
 
     ////////
 
-    var api = cy.expandCollapse('get');
-    var elements = null;
-
-    // document.getElementById("collapseRecursively").addEventListener("click", function () {
-    //     api.collapseRecursively(cy.$(":selected"));
-    // });
-
-    // document.getElementById("expandRecursively").addEventListener("click", function () {
-    //     api.expandRecursively(cy.$(":selected"));
-    // });
-
-    // document.getElementById("expandAllAndRemove").addEventListener("click", function () {
-    //     api.expandAll();
-    //     elements = cy.elements().remove();
-    // });
-
-    // document.getElementById("loadInCollapsedState").addEventListener("click", function () {
-    //     if (elements){
-    //         cy.add(elements);
-    //         api.collapseAll();
-    //         elements = null;
-    //     }
-    //     else{
-    //         console.warn("Remove elements first by clicking on 'Expand all and remove' button.");
-    //     }
-    // });
-
-    // document.getElementById("collapseAll").addEventListener("click", function () {
-    //     api.collapseAll();
-    // });
-
-    // document.getElementById("expandAll").addEventListener("click", function () {
-    //     api.expandAll();
-    // });
-
-    // });
+    //////////UPDATE NODE JSON AND RUN
+
+    document.addEventListener('updateNode', function (e) { 
+        var tgt=cy.$id(e.detail.id);
+        var data=e.detail;
+        tgt.data('data',data);
+
+        runNode(tgt); //todo: call event instead??
+    
+    }, false);
+
+    ////////RUN NODE
+    document.addEventListener('runNode', function (e) { 
+        var tgt=cy.$id(e.detail.id);
+        runNode(tgt); //local run node //TODO CHANGE ADD CLOSURE
+    
+    }, false);
+
+    function runNode(node){
+        // node.data('state',eval(node._private.data.data.code))
+        node._private.data.data.state=eval(node._private.data.data.code);
+        updateName(node);
+
+
+        //select
+        GLOBALS.selectedjson=node.data('data');
+        var pos=utils.getXYZfromName(node.data('id'));
+        GLOBALS.selectNode(pos.x,pos.y,pos.z);
+    }
+
+    function updateName(node){
+        node.data('name', node._private.data.data.name+'\n'+node._private.data.data.state);
+        // node._private.data.name= node._private.data.data.name+'\n'+node._private.data.data.state;
+    }
 
     ////////try custom events////
     cy.on('blaa', 'node', function(evt) { 
diff --git a/01_Code/physical_computing_interface/index.html b/01_Code/physical_computing_interface/index.html
index 4d1aafa0fbdefa10de6924088a716fed7e4c2a3f..dd8ba46a0af72ba0b83a7b40a4b011464110fd2f 100644
--- a/01_Code/physical_computing_interface/index.html
+++ b/01_Code/physical_computing_interface/index.html
@@ -62,10 +62,11 @@
             
             <div id=jsondiveditor>
                     
-                    <p>
+                <br></br>
+                    <!-- <p>
                         <button class="button" id="setJSON">Get Info</button>
                         <button class="button" id="getJSON">Set Info</button>
-                    </p>
+                    </p> -->
                 
                     <div id="jsoneditor"></div>
             </div>
diff --git a/01_Code/physical_computing_interface/json/json.js b/01_Code/physical_computing_interface/json/json.js
index fbffac210868fbfb79a37e7d9f444ddf5a28b968..cb31dcd6c3e3a9306f8d013cf3f081a5ead7fbf1 100644
--- a/01_Code/physical_computing_interface/json/json.js
+++ b/01_Code/physical_computing_interface/json/json.js
@@ -1,31 +1,53 @@
 function initEditor(){
     // create the editor
-    const container = document.getElementById('jsoneditor');
-    const options = {};
-    const editor = new JSONEditor(container, options);
-
-    // set json
-    document.getElementById('setJSON').onclick = function () {
-        const json = {
-            'array': [1, 2, 3],
-            'boolean': true,
-            'color': '#82b92c',
-            'null': null,
-            'number': 123,
-            'object': {'a': 'b', 'c': 'd'},
-            'string': 'Hello World'
-        };
-        editor.set(GLOBALS.selectedjson);
+    var container = document.getElementById('jsoneditor');
+    var options = {
+        onChangeText: function (jsonString) {
+            // console.log(jsonString);
+            // const json = editor.get();
+            var json=JSON.parse(jsonString);
+            GLOBALS.updateNode(json);
+        }
     };
+    var editor = new JSONEditor(container, options);
+
+    // set json //get info
+    // document.getElementById('setJSON').onclick = function () {
+    //     const json = {
+    //         'array': [1, 2, 3],
+    //         'boolean': true,
+    //         'color': '#82b92c',
+    //         'null': null,
+    //         'number': 123,
+    //         'object': {'a': 'b', 'c': 'd'},
+    //         'string': 'Hello World'
+    //     };
+    //     editor.set(GLOBALS.selectedjson);
+    // };
+
     document.addEventListener('selectNode', function (e) { 
         editor.set(GLOBALS.selectedjson);
     }, false);
 
-    // get json
-    document.getElementById('getJSON').onclick = function () {
-        const json = editor.get();
-        alert(JSON.stringify(json, null, 2));
-    };
+    // get json //set info
+    // document.getElementById('getJSON').onclick = function () {
+    //     var json = editor.get();
+    //     // alert(JSON.stringify(json, null, 2));
+    //     GLOBALS.updateNode(json);
+    // };
+
+    // editor.on('onChangeJson',function() {
+    //     console.log("hiii");
+    // });
+
+    // editor.onChangeJson= function(json){
+    //     // console.log(json);
+    //     console.log("hiii");
+    // };
+
+    // document.addEventListener('onChangeJson', function (e) { 
+    //     console.log("hissssii");
+    // }, false);
 
 }
 
diff --git a/01_Code/physical_computing_interface/threejs/grid.js b/01_Code/physical_computing_interface/threejs/grid.js
index 7e8689417efba7748953dddc143ee5563dc28df3..919a23211bf6027bccb612850ceec4737b2ce979 100644
--- a/01_Code/physical_computing_interface/threejs/grid.js
+++ b/01_Code/physical_computing_interface/threejs/grid.js
@@ -31,7 +31,9 @@ function threejs(GLOBALS,utils,containerName,container1Name){
     this.occupancy=GLOBALS.occupancy;
     this.selectedNodeID;
     this.menu;
+    this.highlight;
 
+    //TODO: REMOVE FROM HERE TO GLOBALS
     var color1= "#ffffff"; //white
     var color11= "#ffffff8c"; //white transparent
     var color2= "#020227";  //dark blue
@@ -80,15 +82,18 @@ function threejs(GLOBALS,utils,containerName,container1Name){
         // atMouse: false // draw menu at mouse position
         commands: [
             {
+                //RUN/PLAY NODE
                 content: '<span class="fa fa-play fa-1x"></span>',
                 select: function(){
-                    console.log( "play");//todo move to globals
+                    // console.log( "play");//todo move to globals
+                    GLOBALS.runNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
                 }
             },
 
             {
                 content: '<span class="fa fa-trash fa-1x"></span>',
                 select: function(){
+                    GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
                     GLOBALS.removeNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
                     
                 },
@@ -99,7 +104,9 @@ function threejs(GLOBALS,utils,containerName,container1Name){
                 // content: 'Select',
                 content: '<span class="fa fa-mouse-pointer fa-1x"></span>',
                 select: function(){
-                    console.log( "Select");//todo move to globals
+                    // console.log( "Select");//todo move to globals
+                    GLOBALS.selectNode(three.selectedNodeID.x,three.selectedNodeID.y,three.selectedNodeID.z);
+
                 }
             }
         ]
@@ -117,6 +124,8 @@ threejs.prototype.init=function() {
     this.scene.background = new THREE.Color( 0xffffff );
 
     this.cubeGeo = new THREE.BoxBufferGeometry( this.voxelSpacing, this.voxelSpacing, this.voxelSpacing );
+    
+
     this.sphereGeo = new THREE.SphereGeometry( this.voxelSpacing/2, 32, 32 );
     this.cubeMaterial = new THREE.MeshPhongMaterial( { color: 0x1c5c61 } );
 
@@ -140,6 +149,12 @@ threejs.prototype.init=function() {
     this.rollOverMesh.scale.x=this.grid.voxelScaleX;
     this.rollOverMesh.scale.z=this.grid.voxelScaleY;
     this.rollOverMesh.scale.y=this.grid.voxelScaleZ;
+    var edges = new THREE.EdgesGeometry( rollOverGeo );
+    this.highlight = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: this.color4,linewidth: 4} ) );
+    this.highlight.scale.x=this.grid.voxelScaleX*1.1;
+    this.highlight.scale.z=this.grid.voxelScaleY*1.1;
+    this.highlight.scale.y=this.grid.voxelScaleZ*1.1;
+    this.scene.add(this.highlight);
     this.scene.add( this.rollOverMesh );
 
     this.raycaster = new THREE.Raycaster();
@@ -460,6 +475,22 @@ function onDocumentMouseDownThree( event ) {
                 var obj=utils.getXYZfromName(intersect.object.name);
                 three.selectedNodeID=obj;
                 three.menu=three.cy.cxtmenu( three.cxtdefaults );
+
+
+                [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
+        
+                
+                three.highlight.name="h["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]";
+                three.highlight.position.x=0;
+                three.highlight.position.y=0;
+                three.highlight.position.z=0;
+        
+                three.highlight.rotation.y=r_y;
+        
+                
+                three.highlight.position.x=p_x;
+                three.highlight.position.y=p_y;
+                three.highlight.position.z=p_z;
                 
                 
                 
@@ -484,7 +515,14 @@ document.addEventListener('removeNode', function (e) {
     var object = three.scene.getObjectByName( name );
     three.scene.remove( object );
     three.voxels.splice( three.voxels.indexOf( object ), 1 );
-    three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z);    
+    three.updateHelperMeshesAfterRemove(three.grid,e.detail.x,e.detail.y,e.detail.z);   
+    if(three.highlight.name=== 'h'+name) {
+        three.highlight.name="h["+0+","+0 +","+0 +"]";
+        three.highlight.position.x=0;
+        three.highlight.position.y=0;
+        three.highlight.position.z=0;
+
+    }
     
 }, false);
 
@@ -505,6 +543,26 @@ document.addEventListener('addNode', function (e) {
     
 }, false);
 
+document.addEventListener('selectNode', function (e) { 
+     var obj=e.detail;
+     [p_x ,p_y ,p_z ,s_x ,s_y,s_z,r_y]=utils.getTransforms(three.grid,obj.x, obj.y,obj.z);
+        
+                
+    three.highlight.name="h["+parseInt(obj.x) +","+parseInt(obj.y) +","+parseInt(obj.z) +"]";
+    three.highlight.position.x=0;
+    three.highlight.position.y=0;
+    three.highlight.position.z=0;
+
+    three.highlight.rotation.y=r_y;
+
+    
+    three.highlight.position.x=p_x;
+    three.highlight.position.y=p_y;
+    three.highlight.position.z=p_z;
+
+    
+}, false);
+
 
 /////////////////////
 
diff --git a/README.md b/README.md
index b7d538f3222d3170e2c2983537f1171f942e08e0..86b92067a6e6ef6d6c92a3983d03e5e2a2eae30d 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,8 @@ Topics include:
 - [x] Import cad models
 - [ ] Add NN code/interactions
 - [ ] Reset All function
+- [ ] documentation
+- [ ] simulation portal