import React from 'react' ; import { Highlight , HighlightColor , HighlightContainer , Output , FormattedToken , formatTokens , } from '@allenai/tugboat/components' ; import { Model } from '@allenai/tugboat/lib' ; import { Input , Prediction } from './types' ; import { DebugInfo } from '../../components' ; interface Props { input : Input ; model : Model ; output : Prediction ; } export const Predictions = ( { input , model , output } ) => { return ( < Output . Section > < Output . SubSection title = "Entities" > < HighlightContainer centerLabels = { false } > { formatTokens ( output . tags , output . words ) . map ( ( token , i ) => ( < TokenSpan key = { i } id = { i } token = { token } / > ) ) } < /HighlightContainer> < /Output.SubSection> < DebugInfo input = { input } output = { output } model = { model } / > < /Output.Section>); } ; const TokenSpan = ( { token , id } ) => { if ( token . entity === undefined ) { return < span > { `${ token . text }${ ' ' }` } < /span>; } return ( < Highlight id = { id } label = { token . entity } color = { entityLookup [ token . entity ] . color } tooltip = { entityLookup [ token . entity ] . tooltip } > { token . text } { ' ' } < /Highlight>); } ; const entityLookup = { PER : { tooltip : 'Person' , color : 'M' , } , LOC : { tooltip : 'Location' , color : 'G' , } , ORG : { tooltip : 'Organization' , color : 'B' , } , MISC : { tooltip : 'Miscellaneous' , color : 'A' , } , PERSON : { tooltip : 'Person' , color : 'M' , } , CARDINAL : { tooltip : 'Cardinal Number' , color : 'O' , } , EVENT : { tooltip : 'Event' , color : 'G' , } , DATE : { tooltip : 'Date' , color : 'P' , } , FAC : { tooltip : 'Facility' , color : 'A' , } , GPE : { tooltip : 'Country/City/State' , color : 'T' , } , LANGUAGE : { tooltip : 'Language' , color : 'R' , } , LAW : { tooltip : 'Law' , color : 'O' , } , MONEY : { tooltip : 'Monetary Value' , color : 'O' , } , NORP : { tooltip : 'Nationalities, Religious/Political Groups' , color : 'G' , } , ORDINAL : { tooltip : 'Ordinal Value' , color : 'O' , } , PERCENT : { tooltip : 'Percentage' , color : 'O' , } , PRODUCT : { tooltip : 'Product' , color : 'P' , } , QUANTITY : { tooltip : 'Quantity' , color : 'O' , } , TIME : { tooltip : 'Time' , color : 'M' , } , WORK_OF_ART : { tooltip : 'Work of Art/Media' , color : 'A' , } , } ;