1+ import React , { Component , ReactNode } from "react" ;
2+ import { Automata , StateEquivalenceTable as StateEquivalenceTableType } from "auto-automata" ;
3+ import { StateEquivalenceTable } from "../components/StateEquivalenceTable" ;
4+ import { TableAutomata } from "../components/TableAutomata" ;
5+
6+ interface State {
7+ automata :Automata ;
8+ isValid :boolean ;
9+ steps :Array < [ string , StateEquivalenceTableType ] > ;
10+ }
11+
12+ export class AutomataStateEquivalence extends Component < { } , State > {
13+ public constructor ( props :{ } ) {
14+ super ( props ) ;
15+
16+ this . state = {
17+ automata :{
18+ starting :null ,
19+ accepting :new Set < string > ( ) ,
20+ states :{ } ,
21+ alphabet :new Set < string > ( ) ,
22+ } ,
23+ isValid :false ,
24+ steps :null ,
25+ } ;
26+
27+ this . updateAutomata = this . updateAutomata . bind ( this ) ;
28+ this . makeTable = this . makeTable . bind ( this ) ;
29+ }
30+
31+ private updateAutomata ( automata :Automata ) :void {
32+ this . setState ( {
33+ automata,
34+ isValid :Automata . validate ( automata ) === true ,
35+ } ) ;
36+ }
37+
38+ private makeTable ( ) :void {
39+ const steps = new Array < [ string , StateEquivalenceTableType ] > ( ) ;
40+ Automata . stateEquivalenceTable ( this . state . automata , ( t , desc ) => steps . push ( [ desc , t ] ) ) ;
41+ this . setState ( {
42+ steps,
43+ } ) ;
44+ }
45+
46+ public render ( ) :ReactNode {
47+ return (
48+ < >
49+ < section >
50+ < h2 > Automata State Equivalence Table</ h2 >
51+ < p > Enter a DFA and compute its state equivalence table.</ p >
52+ < TableAutomata
53+ automata = { this . state . automata }
54+ onChange = { this . updateAutomata }
55+ />
56+ < br />
57+ < button
58+ className = "primary"
59+ onClick = { this . makeTable }
60+ disabled = { ! this . state . isValid }
61+ > Compute Table</ button >
62+ </ section >
63+ {
64+ this . state . steps == null ?null :
65+ < section >
66+ < h2 > Equivalence Table</ h2 >
67+ {
68+ this . state . steps . map ( ( [ desc , t ] , i ) =>
69+ < div key = { i } >
70+ < p > { desc } </ p >
71+ < StateEquivalenceTable table = { t } />
72+ </ div >
73+ )
74+ }
75+ </ section >
76+ }
77+ </ >
78+ ) ;
79+ }
80+ }