2c:null 2d:["$","title",null,{"children":"State Machine Simulator | Joseph Lewkovich | Observable"}] 32:T5209,class App extends pr.Component { constructor() { super(); this.initialState = { fsa: null, states: [], startState: "", currentState: "", gNodes: {}, gEdges: {}, recentEdge: "", acceptStates: [], alph: [], input: "", tfunc: "", det: "determ", hidden: true, generated: false, running: false, stepping: false, completed: false, statesError: false, alphError: false, generateError: false, inputError: false, gErrorMsg: "", processingCounter: 0, result: "" }; this.state = this.cloneDeep(this.initialState); } applyStates() { //Set states & alphabet this.setState({states: [...new Set(document.getElementById("states").value.split(','))], statesError: false}); this.setState({alph: [...new Set(document.getElementById("alphabet").value.split(','))], alphError: false}); this.setState({tfunc: ""}); //Check for empty inputs if(this.state.states.length === 1 && !this.state.states[0]) { this.state.statesError = true; return; } if((this.state.alph.length === 1 && !this.state.alph[0]) || (this.state.alph.includes("") && this.state.det === "determ")) { this.state.alphError = true; return; } //Check for multi-char symbols for(const a of this.state.alph) { if(a.length > 1) { this.state.alphError = true; return; } } //Populate TFunc textarea (only for DFA) if(this.state.det === "determ") { for(const s of this.state.states) { for(const c of this.state.alph) { const insert = s + "," + c + ",\n"; this.setState({tfunc: this.state.tfunc.concat(insert)}); } } } this.state.hidden = false; } clear() { document.getElementById("graph").remove(); this.setState({}, function() { this.setState(this.cloneDeep(this.initialState), function() {}); }); } createGraph() { return htm`

`; } cloneDeep(obj) { return JSON.parse(JSON.stringify(obj)); } createStateSelects(inStates) { const self = this; const selectArray = inStates.map(function(inState) { const id = "btn-" + inState; return htm`

`; }); return htm` `; } handleKeyPress(e) { if (e.key === 'Enter') { this.applyStates(); } } handleRadioChange(e) { this.state.det = e.currentTarget.value; } toggleButton(event) { const background = document.getElementById(event.target.id).style.backgroundColor; const stateName = event.target.id.split("-")[1]; if(!background) { if(!this.state.startState) { document.getElementById(event.target.id).style.backgroundColor = "rgb(93, 109, 126)"; document.getElementById(event.target.id).style.borderColor = "rgb(93, 109, 126)"; this.state.startState = stateName; } else { document.getElementById(event.target.id).style.backgroundColor = "rgb(82, 190, 128)"; document.getElementById(event.target.id).style.borderColor = "rgb(82, 190, 128)"; this.state.acceptStates.push(stateName); } } else if(background == "rgb(93, 109, 126)") { if(this.state.startState === stateName) { document.getElementById(event.target.id).style.backgroundColor = "rgb(108, 52, 131)"; document.getElementById(event.target.id).style.borderColor = "rgb(108, 52, 131)"; this.state.acceptStates.push(stateName); } else { document.getElementById(event.target.id).style.backgroundColor = "rgb(82, 190, 128)"; document.getElementById(event.target.id).style.borderColor = "rgb(82, 190, 128)"; this.state.acceptStates.push(stateName); } } else if(background == "rgb(108, 52, 131)") { document.getElementById(event.target.id).style.backgroundColor = "rgb(82, 190, 128)"; document.getElementById(event.target.id).style.borderColor = "rgb(82, 190, 128)"; if(this.state.acceptStates.indexOf(stateName) === -1) this.state.acceptStates.push(stateName); this.state.startState = ""; } else { this.state.acceptStates = this.state.acceptStates.filter(function(value, index, arr){ return value !== stateName; }); document.getElementById(event.target.id).style.backgroundColor = ""; document.getElementById(event.target.id).style.borderColor = ""; } } convertTFunc(tfText) { let retArr = []; const strArr = this.cloneDeep(this.state.tfunc).split('\n'); for(const str of strArr) { if(str) { const tr = str.split(","); if(this.state.det === "ndeterm") { tr[2] = tr[2].replaceAll("|",","); tr[2] = tr[2].replaceAll("[",""); tr[2] = tr[2].replaceAll("]",""); } retArr.push({from: tr[0], to: tr[2], input: tr[1]}); } } return retArr; } start() { try { this.state.generateError = false; this.state.fsa = fas_js.createFSA(this.cloneDeep(this.state.states), this.cloneDeep(this.state.alph), this.convertTFunc(), this.cloneDeep(this.state.startState), this.cloneDeep(this.state.acceptStates)); d3_graph.graphviz("#graph").zoom(false); d3_graph.graphviz("#graph").dot(this.state.fsa.generateDigraph()).render(); this.setState({generated: true}); } catch(err) { if(err.message === "E-008") this.state.gErrorMsg = "Missing required transition (additional information in browser console output)"; else if(err.message === "E-004") this.state.gErrorMsg = "Please select a start state"; else if(err.message === "E-007" || err.message === "E-006") this.state.gErrorMsg = "Transition Function can only contain defined states: " + this.state.states; else if(err.message === "E-011") this.state.gErrorMsg = "Invalid Transition Object. Please make sure to follow transition format defined above"; else this.state.gErrorMsg = err.message; this.setState({generateError: true}, function() { return; }); } } handleInputChange(event) { if(event.target.id === "tfuncText") this.setState({tfunc: event.target.value}); else if(event.target.id === "graphInput") this.setState({input: event.target.value}); } generateGraphStates() { let _nodes = {}; let _edges = {}; for(const data of d3.select("#graph svg").selectAll("g")._groups[0]) { if(data.classList.contains("node")) { _nodes[data["__data__"].key] = data; } else if(data.classList.contains("edge")) { let setKey = data["textContent"].slice(1); setKey = setKey.split("\n"); let setVals = data["textContent"].replace(/\n/g, ""); setVals = setVals.replace(setKey[0],""); _edges[setKey[0]+"|"+setVals] = data; } } this.setState({gNodes: _nodes, gEdges: _edges}); } timeout(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async progressFSA(c, state, timer) { await this.timeout(timer); if(this.state.stepping) d3.select("#currentInput").html("Processed symbol #" + (this.state.processingCounter+1) + ": " + this.state.input.charAt(this.state.processingCounter) + ""); else d3.select("#currentInput").html("Processing symbol #" + (this.state.processingCounter+1) + ": " + this.state.input.charAt(this.state.processingCounter) + ""); if(typeof c === 'number') c = "" + c; this.state.currentState = fas_js.stepOnceFSA(c,state,this.state.fsa); //Deselect previous edges if(this.state.recentEdge !== "") { if(Array.isArray(this.state.recentEdge)) { for(const _edge of this.state.recentEdge) { if(this.state.gEdges[_edge]) d3.select("#" + this.state.gEdges[_edge].id) .select("path").style("stroke-width", 1); else this.state.recentEdge = this.state.recentEdge.filter(item => item !== _edge); } } else { d3.select("#" + this.state.gEdges[this.state.recentEdge].id) .select("path").style("stroke-width", 1); } } //Deselect previous nodes and select new nodes if(!Array.isArray(state)) { state = [state]; } if(!Array.isArray(this.state.currentState)) { this.state.currentState = [this.state.currentState]; } for(const [_nKey, _nVal] of Object.entries(this.state.gNodes)) { if(this.state.currentState.includes(_nKey)) d3.select("#" + _nVal.id) .select("ellipse").style("fill", "rgb(208, 211, 212)"); else d3.select("#" + _nVal.id).select("ellipse").style("fill", "none"); } //Collect all pairs of origin/dest states this.state.recentEdge = []; const self = this; const pairs = []; if(this.state.fsa.getType() === "NFA") { this.populateEpisilons(this); } for(const _s of state) { for(const _state of this.state.currentState) { const _key = _s + "->" + _state; pairs.push(_key); } } // Cycle through edges, filling each pair + input combo Object.keys(this.state.gEdges).forEach(function(key,index) { for(const _p of pairs) { if(key.includes(_p)) { const _vals = key.split("|")[1].split(","); if(_vals.includes(c) || _vals.includes("ε")) { d3.select("#" + self.state.gEdges[key].id) .select("path").style("stroke-width", 3); self.state.recentEdge.push(key); } } } }); this.state.processingCounter++; } populateEpisilons(self) { Object.keys(this.state.gEdges).forEach(function(key,index) { const _split = key.split("->"); for(const _s of self.state.currentState) { if(self.state.currentState.includes(_split[0]) && _split[1].split("|")[0] === _s && _split[1].includes("ε")) { self.state.recentEdge.push(key); d3.select("#" + self.state.gEdges[key].id) .select("path").style("stroke-width", 3); } } }); } validateInput() { let retVal = true; for(const c of this.cloneDeep(this.state.input).split("")) { if(this.state.alph.indexOf(c) === -1) { retVal = false } } if(retVal) { return true; } else { this.setState({inputError: true}, function() { return false; }); } } initFSA() { d3_graph.graphviz("#graph").dot(this.state.fsa.generateDigraph()).render(); this.setState({running: true, completed: false, processingCounter: 0, inputError: false, result: ""}); if(Object.entries(this.state.gNodes).length === 0 && Object.entries(this.state.gEdges).length === 0) { this.generateGraphStates(); } d3.select("#" + this.state.gNodes[this.state.startState].id).select("ellipse").style("fill", "rgb(208, 211, 212)"); this.setState({running: true}); this.state.currentState = this.state.startState; } finishSimulation() { if(!Array.isArray(this.state.currentState)) this.state.currentState = [this.state.currentState]; for(const _end of this.state.currentState) { if(this.state.acceptStates.indexOf(_end) !== -1) { this.state.result = "Accepted ✓"; document.getElementById("resultMsg").style.color = "rgb(24, 106, 59)"; } } if(!this.state.result) { this.state.result = "Rejected ✘"; document.getElementById("resultMsg").style.color = "rgb(192, 57, 43)"; } if(!this.state.stepping) d3.select("#currentInput").html(""); this.setState({running: false, completed: true}); } async stepAllFSA() { if(this.validateInput()) { let wIn = this.cloneDeep(this.state.input).split("").reverse(); while(wIn.length > 0) { if(!this.state.running) { this.initFSA(); d3.select("#currentInput").html("FSA Initialized on start state: "+(this.state.currentState)+""); await this.timeout(1500); } else { await this.progressFSA(wIn.pop(), this.state.currentState, 1500); } } this.finishSimulation(); } } async simulateOneStepFSA() { if(this.validateInput()) { if(!this.state.running) { this.state.stepping = true; this.initFSA(); d3.select("#currentInput").html("FSA Initialized on start state: "+(this.state.currentState)+""); } else { if(this.state.input.length !== 0) await this.progressFSA(this.state.input.charAt(this.state.processingCounter), this.state.currentState, 0); if(this.state.input.length === this.state.processingCounter) { this.finishSimulation(); this.state.stepping = false; } } } } runFSA() { if(this.validateInput()) { this.initFSA(); let wIn = this.cloneDeep(this.state.input).split(""); this.state.currentState = fas_js.simulateFSA(wIn, this.state.fsa, false, true); d3.select("#" + this.state.gNodes[this.state.startState].id).select("ellipse").style("fill", "none"); if(Array.isArray(this.state.currentState)) { for(const _cState of this.state.currentState) d3.select("#" + this.state.gNodes[_cState].id) .select("ellipse").style("fill", "rgb(208, 211, 212)"); } else { if(this.state.currentState) d3.select("#" + this.state.gNodes[this.state.currentState].id) .select("ellipse").style("fill", "rgb(208, 211, 212)"); } this.finishSimulation(); } } reset() { d3_graph.graphviz("#graph").dot(this.state.fsa.generateDigraph()).render(); this.setState({running: false, completed: false, processingCounter: 0, input: "", inputError: false, recentEdge: ""}); } render() { return htm`

States

Provide a comma separated list of state names.

Alphabet

Provide a comma separated list of strings to serve as the input alphabet.
Each symbol must be exactly one character. For NFAs, ε symbol is already included.

Deterministic Non-Deterministic

${this.createStateSelects(this.state.states)}

`; } }33:[] 30:{"id":"5c8765a6ed2efa6c","slug":"state-machine-simulator","title":"State Machine Simulator","thumbnail":"16df7578c963a058fcb357ad53450d0096f9d41cae46de9a97b033c03605e514","access_level":"public","create_time":"$D2019-01-22T02:36:13.279Z","update_time":"$D2020-11-03T16:04:39.038Z","view_time":null,"first_public_time":"$D2019-02-03T04:48:23.495Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"929822ef1014d5fb","login":"jml6m","name":"Joseph Lewkovich","avatar_url":"https://avatars-next.observableusercontent.com/cbcdfebdb931f3197e3338391dfbd8add6958e08449d78c72123960294d0e545","tier":"starter_2024"},"version":1202,"publish_version":1202,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c55db3d17ae0514","login":"jml6m","name":"Joseph Lewkovich","avatar_url":"https://avatars-next.observableusercontent.com/cbcdfebdb931f3197e3338391dfbd8add6958e08449d78c72123960294d0e545","tier":null}],"members":[{"type":"individual","id":"5c55db3d17ae0514","login":"jml6m","name":"Joseph Lewkovich","avatar_url":"https://avatars-next.observableusercontent.com/cbcdfebdb931f3197e3338391dfbd8add6958e08449d78c72123960294d0e545","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"State Machine Simulator","cells":[{"id":0,"value":"md`# State Machine Simulator\nShowcasing a state machine simulator library [fas-js](https://github.com/jml6m/fas-js). Check it out!
\nDemo created using [preact](https://github.com/developit/preact) and [D3.js](https://github.com/d3/d3)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"pr.render(htm`<${App} />`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"fas_js = require('fas-js@1.3.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"d3_graph = require('d3-graphviz@2.6.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"pr = require(\"preact@8.4.2/dist/preact.min.js\").catch(() => window.preact)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(pr.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"

Start & Accept States

States

Alphabet

Transition Function