Highlighting and more action buttons

src/App.js

@@ -68,32 +68,15 @@ class App extends React.Component {
       let hl = nodeData.highlighting;
 
       this.setState((state, props) => {
-          let armMarkers = state.arm.markers;
-          hl.arm.array.forEach(element => armMarkers.append(element))
-
           return {
-            wacc: {markers: state.wacc.markers.append(hl.wacc)},
-            js: {markers: state.js.markers.append(hl.js)},
-            arm: {markers: armMarkers}
+            wacc: {code: state.wacc.code, markers: hl.wacc},
+            js: {code: state.js.code, markers: hl.js},
+            arm: {code: state.arm.code, markers: hl.arm}
           }
       })
     }
 
     onNodeOut = (nodeData, evt) => {
-      let hl = nodeData.highlighting;
-
-      this.setState((state, props) => {
-          let waccMarkerIdx = state.wacc.markers.indexOf(hl.wacc);
-          let jsMarkerIdx = state.js.markers.indexOf(hl.js)
-
-          let armMarkers = [];
-
-          return {
-            wacc: {markers: state.wacc.markers.splice(waccMarkerIdx, 1)},
-            js: {markers: state.js.markers.splice(jsMarkerIdx, 1)},
-            arm: {markers: armMarkers}
-          }
-      })
     }
 
     readInputCallBack = (codeToEval) => {

src/Comm.js

@@ -22,10 +22,10 @@ export function astMetaToGraphData(astMeta) {
 
 function generateMarkerObject(start, end) {
     return {
-      startRow: start.lineNum,
+      startRow: start.lineNum - 1,
       startCol: start.charNum,
-      endRow: end.lineNum,
-      endCol: end.charNum,
+      endRow: end.lineNum - 1,
+      endCol: end.charNum - 1,
       className: "ast-node-highlight",
       type: "text"
     }
@@ -49,8 +49,8 @@ function createGraphNode(node, astMeta){
         name: name,
         attributes: {value: value},
         highlighting: {
-            wacc:   generateMarkerObject(node.waccStart, node.waccEnd),
-            js:     typeof node.jsStart === "undefined" ? {} : generateMarkerObject(node.jsStart, node.jsEnd),
+            wacc:   [generateMarkerObject(node.waccStart, node.waccEnd)],
+            js:     typeof node.jsStart === "undefined" ? [{}] : [generateMarkerObject(node.jsStart, node.jsEnd)],
             arm:    []
         },
         children: children

src/view/ButonStrip.js

@@ -9,8 +9,9 @@ class ButtonStrip extends React.Component {
     render() {
         return (
             <div>
-                <Button onClick={this.props.onCompileClick}>▶</Button>
-                <Button onClick={this.props.onStepJsClick}>STEP JS LINE</Button>
+                <Button onClick={this.props.onCompileClick}>COMPILE</Button>
+                <Button onClick={this.props.onExecuteClick}>EXECUTE</Button>
+                <Button onClick={this.props.onStepWaccClick}>STEP WACC LINE</Button>
             </div>
         )
     }

src/view/CodeEditor.js

@@ -20,6 +20,9 @@ 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"