render() {
    const {id, color, candidates, selected, onSelect} = this.props;

    return (
      <Container>
        <SegmentButtonGroupPanel key={id}>
          <GroupTitle>
            <ColorLegend color={color} /> {`Group ${id}`}
          </GroupTitle>
          <div>
            {candidates.map(candidate => {
              const isSelected = selected.includes(candidate);
              return (
                <CircleButton
                  key={candidate}
                  selected={isSelected}
                  onClick={() => onSelect({groupId: id, segmentId: candidate})}
                >
                  {candidate}
                </CircleButton>
              );
            })}
          </div>
        </SegmentButtonGroupPanel>
      </Container>
    );
  }
callback function to surface which segemnt has been updated