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

Display latest interaction in a table

parent 23afd8f8
......@@ -17,3 +17,7 @@
font-size: 18px;
font-weight: bold;
}
.latest-interaction th {
margin: 0px 5px 0px 5px;
}
\ No newline at end of file
......@@ -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>
);
}
)
......
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