src/components/type/type.js
/**
   * Render a single type
   *
   * @returns {React.Component}   A react component for a single type,
   * possibly with subtypes included for Array type.
   */
Render a single type
@returns {React.Component}   A react component for a single type,
possibly with subtypes included for Array type.
Render a single type @returns { React . Component } A react component for a single type possibly with subtypes included for Array type .
render() {
    const type = this.props.name.toLowerCase();
    let cls = `${TYPE_CLASS} schema-field-type-${type}`;
    if (this.props.activeType === this.props.self) {
      cls += ' active';
    }
    const handleClick = type === 'undefined' ? null : this.typeClicked.bind(this);
    const percentage = (this.props.probability * 100) + '%';
    const style = {
      width: percentage
    };
    const subtypes = this._getArraySubTypes();
    const label = <span className="schema-field-type-label">{this.props.name}</span>;
    const format = (this.props.probability > 0.99 && this.props.probability < 1.0)
      || (this.props.probability > 0 && this.props.probability < 0.01) ? '0.0%' : '0%';
    const tooltipText = `${this.props.name} (${numeral(this.props.probability).format(format)})`;
    const tooltipOptions = {
      'data-for': TOOLTIP_IDS.SCHEMA_PROBABILITY_PERCENT,
      'data-tip': tooltipText,
      'data-effect': 'solid',
      'data-border': true
    };
    tooltipOptions['data-offset'] = this.props.showSubTypes ?
      '{"top": -25, "left": 0}' : '{"top": 10, "left": 0}';
    return (
      <div {...tooltipOptions} className={cls} style={style} onClick={handleClick}>
        <ReactTooltip id={TOOLTIP_IDS.SCHEMA_PROBABILITY_PERCENT}/>
        {this.props.showSubTypes ? label : null}
        <div className="schema-field-type"></div>
        {subtypes}
        {this.props.showSubTypes ? null : label}
      </div>
    );
  }
render ( ) { const type = this . props . name . toLowerCase ( ) ; let cls = ` ${ TYPE_CLASS } ${ type } ` ; if ( this . props . activeType === this . props . self ) { cls += ' active' ; } const handleClick = type === 'undefined' ? null : this . typeClicked . bind ( this ) ; const percentage = ( this . props . probability * 100 ) + '%' ; const style = { width : percentage } ; const subtypes = this . _getArraySubTypes ( ) ; const label = < span className = "schema-field-type-label" > { this . props . name } < / span > ; const format = ( this . props . probability > 0.99 && this . props . probability < 1.0 ) || ( this . props . probability > 0 && this . props . probability < 0.01 ) ? '0.0%' : '0%' ; const tooltipText = ` ${ this . props . name } ${ numeral ( this . props . probability ) . format ( format ) } ` ; const tooltipOptions = { 'data-for' : TOOLTIP_IDS . SCHEMA_PROBABILITY_PERCENT , 'data-tip' : tooltipText , 'data-effect' : 'solid' , 'data-border' : true } ; tooltipOptions [ 'data-offset' ] = this . props . showSubTypes ? '{"top": -25, "left": 0}' : '{"top": 10, "left": 0}' ; return ( < div { ... tooltipOptions } className = { cls } style = { style } onClick = { handleClick } > < ReactTooltip id = { TOOLTIP_IDS . SCHEMA_PROBABILITY_PERCENT } / > { this . props . showSubTypes ? label : null } < div className = "schema-field-type" > < / div > { subtypes } { this . props . showSubTypes ? null : label } < / div > ) ; }
Render a single type
 @returns {React.Component}   A react component for a single type,
 possibly with subtypes included for Array type.
Render a single type @returns { React . Component } A react component for a single type possibly with subtypes included for Array type .
// show integer accuracy by default, but show one decimal point accuracy // when less than 1% or greater than 99% but no 0% or 100%