CaptionGroup:React.SFC<CaptionGroupProps> = observer((props: CaptionGroupProps) => {let cur_time = new Bounds(props.time_state.time);let selected = props.label_state.captions_selected;/* Find which caption groups contain a flagged caption */let flags: boolean[] =props.group.map((intvl, i) => (Object.keys(_.filter(intvl.data.metadata, (v) => v instanceof Metadata_Flag)).length > 0 ||(selected !== undefined && selected.has(props.reverse_index[i]))));return <div className='caption-group'>{props.group.map((intvl, i) => {let overlaps = intvl.bounds.time_overlaps(cur_time);let flag = flags[i];/* TODO: handle Metadata_CaptionMeta */return <span key={i}><span className={classNames({caption: true, active: overlaps, flag: flag})}data-group={props.group_index} data-interval={i}style={(intvl.data.spatial_type as SpatialType_Caption).style}>{(intvl.data.spatial_type as SpatialType_Caption).text}</span>{/* To avoid discontinuously highlighting individual words, we also highlight the spacing* if the next caption is also supposed to be highlighted. */}<span className={classNames({spacing: true, flag: flag && i < props.group.length -1 && flags[i + 1]})}> </span></span>})}</div>;})