Display latest interaction in a table

src/LatestInteraction/LatestInteraction.css

@@ -17,3 +17,7 @@
   font-size: 18px;
   font-weight: bold;
 }
+
+.latest-interaction th {
+  margin: 0px 5px 0px 5px;
+}
\ No newline at end of file

src/LatestInteraction/index.js

@@ -17,31 +17,50 @@ function LatestInteraction(props) {
     intended = props.intended;
     enacted = props.enacted;
   }
-  // Convert the actions and valences to arrays of spans that show each action with a color matching its valence
-  const intendedText = intended.action_names.map(
-    (action, i) => (
-      <span key={i} className={actionClassName(intended.primitive_valences[i])}>{action}</span>
-    )
-  )
-  const enactedText = enacted.action_names.map(
-    (action, i) => (
-      <span key={i} className={actionClassName(enacted.primitive_valences[i])}>{action}</span>
-    )
-  )
+
+  /**
+   * 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}
-      <div id="intended">
-        <span className="label">Intended</span><br/>
-        <span className="interaction">{intendedText}</span>
-      </div>
-      <hr/>
-      <div id="enacted">
-        <span className="label">Enacted</span><br/>
-        <span className="interaction">{enactedText}</span>
-      </div>
-      </div>
+      <table>
+        <thead>
+          <tr>
+            <th className="label">Intended</th>
+            <th className="label">Enacted</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows}
+        </tbody>
+      </table>
+    </div>
   );
 }
 )