A cool linechart of the involvement

src/LineChart/RosLineChart.js

@@ -11,15 +11,14 @@ class RosLineChart extends Component {
         this.state = {
             data: {"" : []},
             topic: {
-                name: "/random/trace",
-                messageType: "april_messages/trace",
+                name: "/predictions/interaction_involvement",
+                messageType: "april_messages/head_orientation_prediction",
                 fields: [
-                    "enacted.valence",
-                    "enacted.occurence",
+                    "prediction_of_head_orientation.list[0].values[1]",
                 ]
             },
-            // xLabel: "x label",
-            // yLabel: "y label"
+            // xLabel: "Count",
+            yLabel: "Involvement",
         };
     }
 
@@ -42,6 +41,8 @@ class RosLineChart extends Component {
                         if (!(field in new_data)) {
                             new_data[field] = []
                         }
+                        console.debug("Raw message: ", message);
+                        console.debug("Selected field: ", property(field)(message));
                         new_data[field] = this.state.data[field].concat([{"y": property(field)(message)}])
                     })
                     return {
@@ -63,14 +64,16 @@ class RosLineChart extends Component {
     render () {
         const config = this.props.node.getConfig()
 
-        if (config.displayMode === "readme") {
-            return <p className="about">This <b>linechart</b> represents a <b>measure</b> evolving over time.</p>;
-        }
+        if (config && 'displayMode' in config) {
+            if (config.displayMode === "readme") {
+                return <p className="about">This <b>linechart</b> represents a <b>measure</b> evolving over time.</p>;
+            }
 
-        if (config.displayMode === "settings") {
-            return <div>
-                <p>config panel</p>
-            </div>;
+            if (config.displayMode === "settings") {
+                return <div>
+                    <p>config panel</p>
+                </div>;
+            }
         }
 
         return <SizedLineChart data={this.state.data} xLabel={this.state.xLabel} yLabel={this.state.yLabel} {...this.props}/>

src/devel-config.js

@@ -48,6 +48,7 @@ export const flexlayout_json = {
           {
             "type": "tabset",
             "name": "Robot's memory",
+            "enableTabStrip": true,
             "weight": 65,
             "selected": 0,
             "children": [
@@ -58,6 +59,11 @@ export const flexlayout_json = {
                   "hasReadme": true
                 },
               },
+              {
+                "type": "tab",
+                "component": "line-chart",
+                "name": "involvement",
+              }
             ]
           },
           {

src/index.js

@@ -51,4 +51,4 @@ class Main extends React.Component {
   }
 }
 
-ReactDOM.render(<Main ros={false}/>, document.getElementById("container"));
\ No newline at end of file
+ReactDOM.render(<Main ros={true}/>, document.getElementById("container"));
\ No newline at end of file