diff --git a/src/App.css b/src/App.css
index b5600596dae3cf7da89fbd5d93db2cf000399403..140904e0e0be44338f995517a7017b4d5ab22f28 100644
--- a/src/App.css
+++ b/src/App.css
@@ -38,7 +38,7 @@ body {
 }
 
 .warning-highlight {
-    background: rgba(255, 50, 50, 0.1);
+    background: rgba(255, 50, 50, 1);
     position: absolute;
 }
 
diff --git a/src/App.js b/src/App.js
index f45001151df0de618e3494ad3164898b53efbb57..53006219288332422e2f3b3ed509efb2a1b2b374 100644
--- a/src/App.js
+++ b/src/App.js
@@ -56,10 +56,9 @@ class App extends React.Component {
 
     onWaccCodeChange = (newCode) => {
         this.setState({
-            wacc: {
-                code: newCode,
-                markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning-highlight', type: 'text'}]
-            },
+            wacc: {code: newCode, markers: []},
+            js: {code: "", markers: []},
+            arm: {code: "", markers: []},
             graphData: [{}],
         })
     }
@@ -68,11 +67,11 @@ class App extends React.Component {
       let hl = nodeData.highlighting;
 
       this.setState((state, props) => {
-          return {
-            wacc: {code: state.wacc.code, markers: hl.wacc},
-            js: {code: state.js.code, markers: hl.js},
-            arm: {code: state.arm.code, markers: hl.arm}
-          }
+          state.wacc.markers = hl.wacc;
+          state.js.markers = hl.js;
+          state.arm.markers = hl.arm;
+
+          return state
       })
     }
 
@@ -174,6 +173,7 @@ class App extends React.Component {
                                             data={this.state.graphData}
                                             onMouseOver={this.onNodeOver}
                                             onMouseOut={this.onNodeOut}
+                                            onClick={(n,e) => console.log(n)}
                                             orientation="vertical"/>
                                     </div>
                                 </CardBody>
diff --git a/src/Comm.js b/src/Comm.js
index b229c0ac81d58a8b8ad4103ba5d4b656e6f18775..dc337a9ae0a481f7e71acdaa8946a9300625098e 100644
--- a/src/Comm.js
+++ b/src/Comm.js
@@ -25,12 +25,16 @@ function generateMarkerObject(start, end) {
       startRow: start.lineNum - 1,
       startCol: start.charNum,
       endRow: end.lineNum - 1,
-      endCol: end.charNum - 1,
+      endCol: end.charNum,
       className: "ast-node-highlight",
       type: "text"
     }
 }
 
+function generateArmMarkers(lineNums) {
+    return lineNums.map(ln => ({startRow: ln - 1, className: "ast-node-highlight", type: "background"}))
+}
+
 function createGraphNode(node, astMeta){
     let name = node.name;
     let value = node.value;
@@ -44,14 +48,14 @@ function createGraphNode(node, astMeta){
             children.push(createGraphNode(child, astMeta))
         }
     }
-    //console.log(JSON.stringify(retObj))
+    console.log(node)
     return {
         name: name,
         attributes: {value: value},
         highlighting: {
             wacc:   [generateMarkerObject(node.waccStart, node.waccEnd)],
             js:     typeof node.jsStart === "undefined" ? [{}] : [generateMarkerObject(node.jsStart, node.jsEnd)],
-            arm:    []
+            arm:    generateArmMarkers(node.armLineNums)
         },
         children: children
     }
diff --git a/src/view/CodeEditor.js b/src/view/CodeEditor.js
index bf9e68344fa6da321c861780a5074f9f9391fcbe..fdb9bc310f15e0abb7ed70c0310ed7a7e7d3b0ec 100644
--- a/src/view/CodeEditor.js
+++ b/src/view/CodeEditor.js
@@ -20,9 +20,6 @@ class CodeEditor extends React.Component {
         return (
             <div className="ace-editor">
                 {this.heading()}
-                <p>
-                    Highlighting {JSON.stringify(this.props.markers)}
-                </p>
                 <AceEditor
                     mode="java"
                     theme="github"