From 35a878d1e429e49f327d07946e1207a8bb8b8505 Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Mon, 8 Apr 2019 11:26:31 +0200
Subject: [PATCH] Display latest interaction in a table
---
src/LatestInteraction/LatestInteraction.css | 4 ++
src/LatestInteraction/index.js | 61 ++++++++++++++-------
2 files changed, 44 insertions(+), 21 deletions(-)
diff --git a/src/LatestInteraction/LatestInteraction.css b/src/LatestInteraction/LatestInteraction.css
index 23ba8cf..576d079 100644
--- a/src/LatestInteraction/LatestInteraction.css
+++ b/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
diff --git a/src/LatestInteraction/index.js b/src/LatestInteraction/index.js
index bc0138b..c0567d0 100644
--- a/src/LatestInteraction/index.js
+++ b/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>
);
}
)
--
GitLab