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