import React from 'react' ; import { RedToken , TransparentToken , BlankToken } from './Tokens' ; /**
 * Takes in the input before and after input reduction and highlights
 * the words that were removed in red with strikeout. The reducedInput
 * will have a less than or equal to length than the originalInput.
 */ const highlightRemovedTokens = ( originalInput , reducedInput ) => { const originalStringColorized = [ ] ; const reducedStringColorized = [ ] ; let originalIdx = 0 ; let reducedIdx = 0 ; while ( reducedIdx <= reducedInput . length ) { if ( originalInput [ originalIdx ] === reducedInput [ reducedIdx ] ) { originalStringColorized . push ( < TransparentToken key = { originalIdx } > { originalInput [ originalIdx ] } < /TransparentToken>); reducedStringColorized . push ( < TransparentToken key = { originalIdx } > { reducedInput [ reducedIdx ] } < /TransparentToken>); originalIdx ++ ; reducedIdx ++ ; } else { while ( originalIdx <= originalInput . length && originalInput [ originalIdx ] !== reducedInput [ reducedIdx ] ) { originalStringColorized . push ( < RedToken key = { originalIdx } > < s > { originalInput [ originalIdx ] } < /s> < /RedToken>); reducedStringColorized . push ( < BlankToken color = "transparent" key = { originalIdx } > { originalInput [ originalIdx ] } < /BlankToken>); originalIdx ++ ; } } } return [ originalStringColorized , reducedStringColorized ] ; } ; export interface InputReductionAttackOutput { original : string [ ] ; final : string [ ] [ ] ; formattedOriginal ? : string ; formattedReduced ? : string [ ] ; context ? : string ; } export const InputReduction = ( { original , final , formattedOriginal , formattedReduced , } ) => { return ( < div > { formattedOriginal ? < span > { formattedOriginal } < /span> : null} { formattedReduced ? ( < PreformatedOutput original = { original } formattedOriginal = { formattedOriginal } formattedReduced = { formattedReduced } / > ) : ( < DefaultOutput original = { original } final = { final } formattedOriginal = { formattedOriginal } / > ) } < /div>); } ; const PreformatedOutput = ( { original , formattedOriginal , formattedReduced , } ) => { return ( < > { ! formattedOriginal ? ( < p > < h6 > Original Input : < /h6> {original} < /p>) : null} { formattedReduced . map ( ( formattedReduced ) => ( < span key = { formattedReduced } > { formattedReduced } < /span>))} < />); } ; const DefaultOutput = ( { original , final , formattedOriginal , } ) => { return ( < > { final . map ( ( reduced ) => { const [ originalColored , reducedColored ] = highlightRemovedTokens ( original , reduced ) ; return ( < > { ! formattedOriginal ? ( < > < h6 > Original Input : < /h6> <span>{originalColored}</span > < />) : null} < h6 > Reduced Input : < /h6> {reducedColored} { original . length === reduced . length ? ( < span > ( No reduction was possible ) < /span>) : null} < />); } ) } < />); } ;