Spaces:
Sleeping
Sleeping
File size: 2,296 Bytes
44e5f85 f839bd4 44e5f85 f839bd4 44e5f85 f839bd4 44e5f85 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React from "react";
import AxisItemRow from "./AxisItemRow";
import axisDefinitions from "../data/axisDefinitions";
// One event's applicable A/V/AVB/TC_COUNT rows, grouped together - mirrors the
// guideline's "recommended order per video" (identify events -> judge A/V per
// event -> AVB -> TC_COUNT), instead of the old axis-major layout.
export default function EventCard({ event, annotations, onChangeField, isPractice = false, grading }) {
const eventAnnotations = annotations.events[event.id];
const rows = [];
if (event.axes.a) rows.push("a");
if (event.axes.v) rows.push("v");
if (event.axes.avb) rows.push("avb");
return (
<section className="event-card">
<header className="event-card-header">
<span className="event-modality">{event.modalityLabel}</span>
<h4>{event.label}</h4>
<p className="muted event-definition">{event.definition}</p>
</header>
<div className="event-axis-rows">
{rows.map((axisId) => {
const def = axisDefinitions[axisId];
const field = eventAnnotations[axisId];
return (
<AxisItemRow
key={axisId}
axisKey={def.key}
title={def.title}
summary={def.summary}
kind="verdict"
value={field.label}
rationale={field.rationale}
onChangeValue={(value) => onChangeField(event.id, axisId, "label", value)}
onChangeRationale={(value) => onChangeField(event.id, axisId, "rationale", value)}
isPractice={isPractice}
grading={grading && grading[axisId]}
/>
);
})}
<AxisItemRow
axisKey={axisDefinitions.tcCount.key}
title={axisDefinitions.tcCount.title}
summary={axisDefinitions.tcCount.summary}
kind="count"
value={eventAnnotations.tcCount.value}
rationale={eventAnnotations.tcCount.rationale}
onChangeValue={(value) => onChangeField(event.id, "tcCount", "value", value)}
onChangeRationale={(value) => onChangeField(event.id, "tcCount", "rationale", value)}
isPractice={isPractice}
grading={grading && grading.tcCount}
/>
</div>
</section>
);
}
|