Move LatestInteraction to its own file (cleaning refactor)

src/LatestInteraction/DemoLatestInteraction.js

 import React from 'react'
-import {LatestInteraction} from './index'
+import {LatestInteraction} from './LatestInteraction'
 
 export function DemoLatestInteraction(props) {
   const intended = {action_names: ["A", "A", "B", "C"], primitive_valences:[1, 2, 3, 4]};

src/LatestInteraction/LatestInteraction.js

+import React from 'react'
+import {observer} from 'mobx-react'
+
+import { actionClassName } from '../utils/valenceColours';
+
+export const LatestInteraction = observer(
+  function LatestInteraction(props) {
+    let intended, enacted;
+    let iteration = null;
+    if ('int-trace' in props.store.components && props.store.components['int-trace'].showInteraction) {
+      intended = props.store.components['int-trace'].currentInteraction.intended;
+      enacted = props.store.components['int-trace'].currentInteraction.enacted;
+      const iteration_id = props.store.components['int-trace'].currentInteraction.id;
+    iteration = [<p key="first"><span className="label">Iteration:</span> {iteration_id}</p>, <hr key="last"/>];
+    } else {
+      intended = props.intended;
+      enacted = props.enacted;
+    }
+  
+    /**
+     * Return the 
+     * @param {Object} inter object representing the interaction to display (either intended or enacted)
+     * @param {Number} i index of primitive action which row this is makeing
+     */
+    function inter2row(inter, length, i) {
+      if (i < length) {
+        return (
+        <td className={actionClassName(inter.primitive_valences[i])}>
+          {inter.action_names[i]} ({inter.primitive_valences[i]})
+        </td>); 
+      } else {
+        return null;
+      }
+    }
+  
+    const length_i = intended.action_names.length,
+          length_e = enacted.action_names.length;
+    let rows = [];
+    for (let i=0; i<Math.max(length_i, length_e); i++) {
+      rows.push(
+        <tr key={i}>
+          {inter2row(intended, length_i, i)}
+          {inter2row(enacted, length_e, i)}
+        </tr>
+      );
+    }
+  
+    return (
+      <div className="latest-interaction">
+        {iteration}
+        <table>
+          <thead>
+            <tr>
+              <th className="label">Intended</th>
+              <th className="label">Enacted</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+  )
\ No newline at end of file

src/LatestInteraction/RosLastestInteraction.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react'
 import RosLib from 'roslib'
 
 import {Modal} from '../utils/modeHandler'
-import {LatestInteraction} from './index'
+import {LatestInteraction} from './LatestInteraction'
 
 class RosLatestInteraction extends Component {
   constructor(props) {

src/LatestInteraction/index.js

-import React from 'react'
-import {observer} from 'mobx-react'
-
 import './LatestInteraction.css'
-import { actionClassName } from '../utils/valenceColours';
-
-export const LatestInteraction = observer(
-function LatestInteraction(props) {
-  let intended, enacted;
-  let iteration = null;
-  if ('int-trace' in props.store.components && props.store.components['int-trace'].showInteraction) {
-    intended = props.store.components['int-trace'].currentInteraction.intended;
-    enacted = props.store.components['int-trace'].currentInteraction.enacted;
-    const iteration_id = props.store.components['int-trace'].currentInteraction.id;
-  iteration = [<p key="first"><span className="label">Iteration:</span> {iteration_id}</p>, <hr key="last"/>];
-  } else {
-    intended = props.intended;
-    enacted = props.enacted;
-  }
-
-  /**
-   * Return the 
-   * @param {Object} inter object representing the interaction to display (either intended or enacted)
-   * @param {Number} i index of primitive action which row this is makeing
-   */
-  function inter2row(inter, length, i) {
-    if (i < length) {
-      return (
-      <td className={actionClassName(inter.primitive_valences[i])}>
-        {inter.action_names[i]} ({inter.primitive_valences[i]})
-      </td>); 
-    } else {
-      return null;
-    }
-  }
-
-  const length_i = intended.action_names.length,
-        length_e = enacted.action_names.length;
-  let rows = [];
-  for (let i=0; i<Math.max(length_i, length_e); i++) {
-    rows.push(
-      <tr key={i}>
-        {inter2row(intended, length_i, i)}
-        {inter2row(enacted, length_e, i)}
-      </tr>
-    );
-  }
-
-  return (
-    <div className="latest-interaction">
-      {iteration}
-      <table>
-        <thead>
-          <tr>
-            <th className="label">Intended</th>
-            <th className="label">Enacted</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-)
 
 export { DemoLatestInteraction } from './DemoLatestInteraction'
 export { RosLatestInteraction } from './RosLastestInteraction'
\ No newline at end of file