app/src/components/TermVis.js
// separate from the timeline rect so that the circles appear above the lines
separate from the timeline rect so that the circles appear above the lines
separate from the timeline rect so that the circles appear above the lines
_renderTimelineMarkers(visComponents) {
    const { timelineHeight, xTimelineScale } = visComponents;
    const { focusedTerm, focusedTimestamp } = this.state;
    let timestamps;
    if (focusedTerm) {
      timestamps = focusedTerm.timestamps;
    } else {
      return null;
    }
    const timestampMarkerRadius = Math.round(0.6 * timelineHeight / 2);
    const timeWidth = 35;
    const timeHeight = 12;
    return (
      <g className='timeline-markers'>
        {timestamps && timestamps.map((time, i) => {
          const cx = xTimelineScale(time);
          const cy = timelineHeight / 2;
          let focusedTimestampTime;
          if (focusedTimestamp === time) {
            focusedTimestampTime = (
              <g className='time-group focused' transform={`translate(0 ${timelineHeight + 15})`}>
                <rect x={-timeWidth / 2} y={0} width={timeWidth} height={timeHeight} />
                <text x={0} y={0} textAnchor={'middle'} dy={10}>{Util.timeFormat(time)}</text>
              </g>
            );
          }
          return (
            <g key={i} transform={`translate(${cx} 0)`}>
              <circle key={i} cx={0} cy={cy} r={timestampMarkerRadius}
                className='timestamp-marker'
                onMouseEnter={this._handleHoverTimestamp.bind(this, time)}
                onMouseLeave={this._handleHoverTimestamp.bind(this, null)}
                onClick={this._handleClickTimestamp.bind(this, time)}
                onTouchEnd={this._handleClickTimestamp.bind(this, time)} />
              {focusedTimestampTime}
            </g>
          );
        })}
      </g>
    );
  }
_renderTimelineMarkers ( visComponents ) { const { timelineHeight , xTimelineScale } = visComponents ; const { focusedTerm , focusedTimestamp } = this . state ; let timestamps ; if ( focusedTerm ) { timestamps = focusedTerm . timestamps ; } else { return null ; } const timestampMarkerRadius = Math . round ( 0.6 * timelineHeight / 2 ) ; const timeWidth = 35 ; const timeHeight = 12 ; return ( < g className = 'timeline-markers' > { timestamps && timestamps . map ( ( time , i ) => { const cx = xTimelineScale ( time ) ; const cy = timelineHeight / 2 ; let focusedTimestampTime ; if ( focusedTimestamp === time ) { focusedTimestampTime = ( < g className = 'time-group focused' transform = { ` ${ timelineHeight + 15 } ` } > < rect x = { - timeWidth / 2 } y = { 0 } width = { timeWidth } height = { timeHeight } / > < text x = { 0 } y = { 0 } textAnchor = { 'middle' } dy = { 10 } > { Util . timeFormat ( time ) } < / text > < / g > ) ; } return ( < g key = { i } transform = { ` ${ cx } ` } > < circle key = { i } cx = { 0 } cy = { cy } r = { timestampMarkerRadius } className = 'timestamp-marker' onMouseEnter = { this . _handleHoverTimestamp . bind ( this , time ) } onMouseLeave = { this . _handleHoverTimestamp . bind ( this , null ) } onClick = { this . _handleClickTimestamp . bind ( this , time ) } onTouchEnd = { this . _handleClickTimestamp . bind ( this , time ) } / > { focusedTimestampTime } < / g > ) ; } ) } < / g > ) ; }
separate from the timeline rect so that the circles appear above the lines
separate from the timeline rect so that the circles appear above the lines