Commit 35a878d1 authored by Dorian Goepp's avatar Dorian Goepp
Browse files

Display latest interaction in a table

parent 23afd8f8
...@@ -17,3 +17,7 @@ ...@@ -17,3 +17,7 @@
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.latest-interaction th {
margin: 0px 5px 0px 5px;
}
\ No newline at end of file
...@@ -17,31 +17,50 @@ function LatestInteraction(props) { ...@@ -17,31 +17,50 @@ function LatestInteraction(props) {
intended = props.intended; intended = props.intended;
enacted = props.enacted; 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) => ( * Return the
<span key={i} className={actionClassName(intended.primitive_valences[i])}>{action}</span> * @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
) */
const enactedText = enacted.action_names.map( function inter2row(inter, length, i) {
(action, i) => ( if (i < length) {
<span key={i} className={actionClassName(enacted.primitive_valences[i])}>{action}</span> 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 ( return (
<div className="latest-interaction"> <div className="latest-interaction">
{iteration} {iteration}
<div id="intended"> <table>
<span className="label">Intended</span><br/> <thead>
<span className="interaction">{intendedText}</span> <tr>
</div> <th className="label">Intended</th>
<hr/> <th className="label">Enacted</th>
<div id="enacted"> </tr>
<span className="label">Enacted</span><br/> </thead>
<span className="interaction">{enactedText}</span> <tbody>
</div> {rows}
</div> </tbody>
</table>
</div>
); );
} }
) )
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment