WIP highlight code on hover over ast node

src/App.css

@@ -37,7 +37,12 @@ body {
   width: auto;
 }
 
-.warning {
+.warning-highlight {
     background: rgba(255, 50, 50, 0.1);
     position: absolute;
+}
+
+.ast-node-highlight {
+  background: rgba(50, 197, 255, 0.3);
+  position: absolute;
 }
\ No newline at end of file

src/App.js

@@ -57,12 +57,44 @@ class App extends React.Component {
         this.setState({
             wacc: {
                 code: newCode,
-                markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning', type: 'text'}]
+                markers: [{startRow: 0, startCol: 2, endRow: 0, endCol: 20, className: 'warning-highlight', type: 'text'}]
             },
             graphData: [{}]
         })
     }
 
+    onNodeOver = (nodeData, evt) => {
+      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}
+          }
+      })
+    }
+
+    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) => {
         console.log(test);
         // if (!window.EMULATOR_IS_INPUT) {
@@ -151,7 +183,10 @@ class App extends React.Component {
                                 <CardBody>
                                     <div style={{height: '50em'}}>
                                         <Tree
+                                            collapsible={false}
                                             data={this.state.graphData}
+                                            onMouseOver={this.onNodeOver}
+                                            onMouseOut={this.onNodeOut}
                                             orientation="vertical"/>
                                     </div>
                                 </CardBody>

src/Comm.js

@@ -20,6 +20,17 @@ export function astMetaToGraphData(astMeta) {
     return graphData
 }
 
+function generateMarkerObject(start, end) {
+    return {
+      startRow: start.lineNum,
+      startCol: start.charNum,
+      endRow: end.lineNum,
+      endCol: end.charNum,
+      className: "ast-node-highlight",
+      type: "text"
+    }
+}
+
 function createGraphNode(node, astMeta){
     let name = node.name;
     let value = node.value;
@@ -33,10 +44,15 @@ function createGraphNode(node, astMeta){
             children.push(createGraphNode(child, astMeta))
         }
     }
-    // console.log(JSON.stringify(retObj))
+    //console.log(JSON.stringify(retObj))
     return {
         name: name,
         attributes: {value: value},
+        highlighting: {
+            wacc:   generateMarkerObject(node.waccStart, node.waccEnd),
+            js:     typeof node.jsStart === "undefined" ? {} : generateMarkerObject(node.jsStart, node.jsEnd),
+            arm:    []
+        },
         children: children
     }
 

src/view/ButonStrip.js

@@ -11,8 +11,6 @@ class ButtonStrip extends React.Component {
             <div>
                 <Button onClick={this.props.onCompileClick}>▶</Button>
                 <Button onClick={this.props.onStepJsClick}>STEP JS LINE</Button>
-                <Button onClick={this.props.onStepIntoAstClick}>STEP INTO AST NODE</Button>
-                <Button onClick={this.props.onStepOverAstClick}>STEP OVER AST NODE</Button>
             </div>
         )
     }