diff --git a/src/LatestInteraction/LatestInteraction.css b/src/LatestInteraction/LatestInteraction.css index 23ba8cf0b461c8ee975a6535141354fdd571ac9e..576d079966edc9c6d4b42a2963aa13545a668f00 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 bc0138bc2db940366cbb0c65be58e3fec0d2f4d9..c0567d016977ce470182c4ddf882cf4fa2c4e62e 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> ); } )