package Ġtech . k zen . auto . client . objects . document . script . step . display . control Ċ Ċ import Ġkotlinx . css .* Ċ import Ġkotlinx . html . js . on Mouse Out Function Ċ import Ġkotlinx . html . js . on Mouse Over Function Ċ import Ġorg . w 3 c . dom . events . Event Ċ import Ġreact .* Ċ import Ġreact . dom . attrs Ċ import Ġreact . dom . br Ċ import Ġreact . dom . td Ċ import Ġstyled .* Ċ import Ġtech . k zen . auto . client . objects . document . common . Attribute Controller Ċ import Ġtech . k zen . auto . client . objects . document . script . command . Script Command er Ċ import Ġtech . k zen . auto . client . objects . document . script . step . Step Controller Ċ import Ġtech . k zen . auto . client . objects . document . script . step . display . Step Display Props Ċ import Ġtech . k zen . auto . client . objects . document . script . step . display . Step Display Wrapper Ċ import Ġtech . k zen . auto . client . objects . document . script . step . header . Step Header Ċ import Ġtech . k zen . auto . client . wrap . material . Arrow Forward Icon Ċ import Ġtech . k zen . auto . client . wrap . react Style Ċ import Ġtech . k zen . auto . common . par adig m . common . model . Execution Success Ċ import Ġtech . k zen . auto . common . par adig m . imp er ative . model . Imp er ative State Ċ import Ġtech . k zen . auto . common . par adig m . imp er ative . model . control . Internal Control State Ċ import Ġtech . k zen . auto . common . par adig m . imp er ative . util . Imp er ative Utils Ċ import Ġtech . k zen . lib . common . model . attribute . AttributeName Ċ import Ġtech . k zen . lib . common . model . attribute . Attribute Path Ċ import Ġtech . k zen . lib . common . model . locate . Object Location Ċ import Ġtech . k zen . lib . common . reflect . Reflect ĊĊ Ċ @ Suppress (" unused ") Ċ class ĠConditional Step Display ( ĊĠĠĠĠĠĠĠ Ġprops : ĠProps Ċ ): ĊĠĠĠĠĠĠĠ ĠRP ure Component < Conditional Step Display . Props , Ġreact . State >( props ) Ċ { ĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġcompanion Ġobject Ġ{ ĊĠĠĠĠĠĠĠ Ġprivate Ġval Ġcondition AttributeName Ġ= ĠAttribute Name (" condition ") ĊĠĠĠĠĠĠĠ Ġprivate Ġval Ġthen AttributeName Ġ= ĠAttribute Name (" then ") ĊĠĠĠĠĠĠĠ Ġprivate Ġval Ġelse AttributeName Ġ= ĠAttribute Name (" else ") ĊĠĠĠĠĠĠĠ Ġprivate Ġval Ġstep Width Ġ= ĠStep Controller . width . minus ( 2 . em ) ĊĠĠĠĠĠĠĠ Ġprivate Ġval Ġoverlap Top Ġ= Ġ 4 . px Ċ Ċ // ĠĠĠĠĠĠĠ Ġprivate Ġconst Ġval Ġtable B orders Ġ= Ġtrue ĊĠĠĠĠĠĠĠ Ġprivate Ġconst Ġval Ġtable B orders Ġ= Ġfalse ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġclass ĠProps ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvar Ġattribute Controller : ĠAttribute Controller . Wrapper , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvar Ġscript Command er : ĠScript Command er , ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġvar Ġstep Controller Handle : ĠStep Controller . Handle , ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġcommon : ĠCommon ĊĠĠĠ Ġ): ĠStep Display Props ( common ) ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġ@ Reflect ĊĠĠĠ Ġclass ĠWrapper ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġobject Location : ĠObject Location , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġprivate Ġval Ġattribute Controller : ĠAttribute Controller . Wrapper , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġprivate Ġval Ġscript Command er : ĠScript Command er , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġprivate Ġval Ġstep Controller Handle : ĠStep Controller . Handle ĊĠĠĠ Ġ): ĊĠĠĠĠĠĠĠĠĠĠĠ ĠStep Display Wrapper ( object Location ) ĊĠĠĠ Ġ{ ĊĠĠĠĠĠĠĠ Ġoverride Ġfun Ġchild ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġinput : ĠR Builder , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhandler : ĠR Handler < Step Display Props > ĊĠĠĠĠĠĠĠ Ġ) /* : ĠReact Element */ Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput . child ( Conditional Step Display :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattribute Controller Ġ= Ġthis @ Wrapper . attribute Controller ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġscript Command er Ġ= Ġthis @ Wrapper . script Command er ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstep Controller Handle Ġ= Ġthis @ Wrapper . step Controller Handle ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhandler () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġprivate Ġvar Ġhover Signal Ġ= ĠStep Header . Hover Signal () ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġ@ Suppress (" UNUSED _ PARAMETER ") ĊĠĠĠ Ġprivate Ġfun ĠonMouse Over ( event : ĠEvent ) Ġ{ ĊĠĠĠĠĠĠĠ Ġhover Signal . trigger Mouse Over () ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ@ Suppress (" UNUSED _ PARAMETER ") ĊĠĠĠ Ġprivate Ġfun ĠonMouse Out ( event : ĠEvent ) Ġ{ ĊĠĠĠĠĠĠĠ Ġhover Signal . trigger Mouse Out () ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġimper ative State Ġ= Ġprops ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. common ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. imp er ative Model ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. frames ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. last OrNull () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ? . states ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ? . get ( props . common . object Location . object Path ) ĊĠĠĠĠĠĠĠ Ġval Ġis Running Ġ= Ġprops . common . isRunning () ĊĊĠĠĠĠĠĠĠ Ġval Ġnext To Run Ġ= ĠImp er ative Utils . next ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . common . client State . graph Structure (), Ġprops . common . imp er ative Model ) ĊĊĠĠĠĠĠĠĠ Ġval Ġis Next To Run Ġ= Ġnext To Run Ġ== Ġprops . common . object Location ĊĊĠĠĠĠĠĠĠ Ġstyled Table Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// Ġhttps :// stackoverflow . com / a / 2 4 5 9 4 8 1 1 / 1 9 4 1 3 5 9 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 . pct ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( table B orders ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠborderWidth Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Style Ġ= ĠBorder Style . solid ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Collapse Ġ= ĠBorder Collapse . collapse ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled T body Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( table B orders ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠborderWidth Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Style Ġ= ĠBorder Style . solid ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Tr Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Td Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( 0 . px ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonMouse Over Function Ġ= Ġ:: on Mouse Over ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonMouse Out Function Ġ= Ġ:: on Mouse Out ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Header ( is Next To Run , Ġimper ative State , Ġis Running ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtd Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Tr Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Td Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvertical Align Ġ= ĠVertical Align . top ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( 0 . px ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Condition ( is Next To Run , Ġimper ative State , Ġis Running ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Td Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( table B orders ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠborderWidth Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Style Ġ= ĠBorder Style . solid ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Then Branch () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Tr Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Td Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvertical Align Ġ= ĠVertical Align . top ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( 0 . px ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( table B orders ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠborderWidth Ġ= Ġ 1 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Style Ġ= ĠBorder Style . solid ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Else Segment ( is Next To Run , Ġimper ative State , Ġis Running ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtd Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Else Branch () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Header ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Next To Run : ĠBoolean , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State : ĠImp er ative State ?, ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Running : ĠBoolean ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġstep Width ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( 1 6 . px , Ġ 1 6 . px , Ġ 0 . px , Ġ 1 6 . px ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Top Left Radius Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Top Right Radius Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfilter Ġ= Ġ" drop - shadow ( 0 Ġ 1 px Ġ 1 px Ġgray )" ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġwhen Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State ?. previous Ġis ĠExecution Success Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor ("# 0 0 b 4 6 7 ") ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġis Next To Run Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . gold . light en ( 5 0 ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelse Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . white ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Step Header :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhover Signal Ġ= Ġthis @ Conditional Step Display . hover Signal ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattribute N esting Ġ= Ġprops . common . attribute N esting ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġobject Location Ġ= Ġprops . common . object Location ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġgraph Structure Ġ= Ġprops . common . client State . graph Structure () ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . imp er ative State Ġ= Ġimper ative State ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . isRunning Ġ= Ġis Running ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Condition ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Next To Run : ĠBoolean , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State : ĠImp er ative State ?, ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Running : ĠBoolean ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġin Then Branch Ġ= Ġ! Ġis Next To Run Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ! Ġis Running Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State ?. control State Ġis ĠInternal Control State Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ( imp er ative State . control State Ġas ĠInternal Control State ). branch Index Ġ== Ġ 0 ĊĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġstep Width ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( left Ġ= Ġ 1 . em , Ġright Ġ= Ġ 1 . em ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfilter Ġ= Ġ" drop - shadow ( 0 Ġ 1 px Ġ 1 px Ġgray )" ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 . pct ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġwhen Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State ?. previous Ġis ĠExecution Success Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor ("# 0 0 b 4 6 7 ") ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġin Then Branch Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . gold . light en ( 7 5 ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelse Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . white ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġprops . attribute Controller . child ( this ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . client State Ġ= Ġprops . common . client State ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . object Location Ġ= Ġprops . common . object Location ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . attribute Name Ġ= Ġcondition AttributeName ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Then Branch ( Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State : ĠImp er ative State ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginBottom Ġ= Ġoverlap Top ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginLeft Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Then " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbr Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Arrow Forward Icon :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġreact Style Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠfontSize Ġ= Ġ 3 . em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct . minus ( 3 . em ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginTop Ġ= Ġ(- 4 . 5 ). em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Conditional Branch Display :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbranch Attribute Path Ġ= ĠAttribute Path . of Name ( then AttributeName ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . step Controller Ġ= Ġprops . step Controller Handle . wrapper !! ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . script Command er Ġ= Ġprops . script Command er ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . client State Ġ= Ġprops . common . client State ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . object Location Ġ= Ġprops . common . object Location ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . imp er ative Model Ġ= Ġprops . common . imp er ative Model ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Else Segment ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Next To Run : ĠBoolean , ĊĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State : ĠImp er ative State ?, ĊĠĠĠĠĠĠĠĠĠĠĠ Ġis Running : ĠBoolean ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġin Else Branch Ġ= Ġ! Ġis Next To Run Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ! Ġis Running Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State ?. control State Ġis ĠInternal Control State Ġ&& ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ( imp er ative State . control State Ġas ĠInternal Control State ). branch Index Ġ== Ġ 1 ĊĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġpadding ( left Ġ= Ġ 1 . em , Ġright Ġ= Ġ 1 . em ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Bottom Left Radius Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġborder Bottom Right Radius Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfilter Ġ= Ġ" drop - shadow ( 0 Ġ 1 px Ġ 1 px Ġgray )" ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= Ġwhen Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State ?. previous Ġis ĠExecution Success Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor ("# 0 0 b 4 6 7 ") ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġin Else Branch Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . gold . light en ( 7 5 ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelse Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠColor . white ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġheight Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Other wise " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Else Branch ( Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġimper ative State : ĠImp er ative State ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginBottom Ġ= Ġoverlap Top . times ( 2 ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginLeft Ġ= Ġ 3 . px ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Else " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbr Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Arrow Forward Icon :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġreact Style Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠfontSize Ġ= Ġ 3 . em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginTop Ġ= Ġ(- 4 . 5 ). em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 0 0 . pct . minus ( 3 . em ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Conditional Branch Display :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbranch Attribute Path Ġ= ĠAttribute Path . of Name ( else AttributeName ) ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . step Controller Ġ= Ġprops . step Controller Handle . wrapper !! ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . script Command er Ġ= Ġprops . script Command er Ċ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . graph Structure Ġ= Ġprops . common . graph Structure ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . client State Ġ= Ġprops . common . client State ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . object Location Ġ= Ġprops . common . object Location ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġthis . imp er ative Model Ġ= Ġprops . common . imp er ative Model ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ }