diff --git a/static/index.html b/static/index.html index 1e29833..7cf0501 100644 --- a/static/index.html +++ b/static/index.html @@ -14,7 +14,7 @@
-
+
diff --git a/static/script.js b/static/script.js index 27a1d60..ecd4550 100644 --- a/static/script.js +++ b/static/script.js @@ -40,22 +40,23 @@ function renderSourceBox(response) { } function renderAstTree(response) { - for (let list of response.lists) { - renderAstList(response.input, 0, list); - } + renderAstNode(response.input, 0, response.tree); } -function renderAstList(originalSource, depth, list) { - const listElem = document.createElement("div"); - listElem.classList.add("ast_node"); +function renderAstNode(originalSource, depth, astNode) { + const nodeElem = document.createElement("div"); + nodeElem.classList.add("ast_node"); - let sourceForList = originalSource.slice(list.position.start_character - 1, list.position.end_character - 1); + let sourceForNode = originalSource.slice(astNode.position.start_character - 1, astNode.position.end_character - 1); // Since sourceForList is a string, JSON.stringify will escape with backslashes and wrap the text in quotation marks, ensuring that the string ends up on a single line. Coincidentally, this is the behavior we want. - let escapedSource = JSON.stringify(sourceForList); + let escapedSource = JSON.stringify(sourceForNode); - listElem.innerText = `List: ${escapedSource}`; - listElem.style.marginLeft = `${depth * 20}px`; - astTreeElement.appendChild(listElem); + nodeElem.innerText = `${astNode.name}: ${escapedSource}`; + nodeElem.style.marginLeft = `${depth * 20}px`; + astTreeElement.appendChild(nodeElem); + for (let child of astNode.children) { + renderAstNode(originalSource, depth + 1, child); + } } inputElement.addEventListener("input", async () => { diff --git a/static/style.css b/static/style.css index 67ee865..7272846 100644 --- a/static/style.css +++ b/static/style.css @@ -60,9 +60,16 @@ h7 { } .output_container > * { - flex: 1 0; + flex: 1 0 0; +} + +.ast_tree { + padding: 5px; } .ast_node { background: #eeeeee; + margin-bottom: 5px; + border: 1px solid #000000; + padding: 2px; }