Highlighting code works

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;
 }
 

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>

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
     }

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"