From 00c2a345a207432db74e28a8ccd695f73296d8b7 Mon Sep 17 00:00:00 2001 From: phischdev Date: Fri, 21 Jun 2024 00:46:41 +0200 Subject: [PATCH] SQUASHED: SQUASHED-SQUASHED-SQUASHED-AUTO-COMMIT-src-components-tools-astro-view.html-AUTO-COMMIT-src-components-tools-astro-view.js-AUTO-COMMIT-src-components-tools-astro-view.js.l4a, --- src/components/tools/astro-view.html | 11 ++++++++--- src/components/tools/astro-view.js | 10 +++++++++- src/components/tools/astro-view.js.l4a | 2 +- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/tools/astro-view.html b/src/components/tools/astro-view.html index 9cc3d5603..daec452a6 100644 --- a/src/components/tools/astro-view.html +++ b/src/components/tools/astro-view.html @@ -131,9 +131,16 @@
-
diff --git a/src/components/tools/astro-view.js b/src/components/tools/astro-view.js index 4d9781185..4d33ff92b 100644 --- a/src/components/tools/astro-view.js +++ b/src/components/tools/astro-view.js @@ -35,6 +35,10 @@ export default class AstroView extends Morph { set sourceURL(urlString) { this.sourcePath.value = urlString; } onSourcePathEntered(urlString) { this.loadSourceFile(urlString); } + // Project Name + get projectNameInput() { return this.get('#projectName'); } + get projectName() { return this.projectNameInput.value; } + set projectName(text) { this.projectNameInput.value = text; } // Transformer Code get transformerSourceEditor() { return this.get("#transformerSource"); } @@ -144,6 +148,8 @@ export default class AstroView extends Morph { const transformerSource = this.getAttribute("transformerSource"); if (transformerSource) this.loadTransformerSourceFile(transformerSource); + this.projectName = this.getAttribute("projectName") || ""; + this.autoUpdate = true; this.dispatchEvent(new CustomEvent("initialize")); @@ -304,7 +310,9 @@ export default class AstroView extends Morph { livelyPrepareSave() { this.setAttribute('source', this.sourceURL); - this.setAttribute('transformerSource', this.transformerSourceURL) + this.setAttribute('transformerSource', this.transformerSourceURL); + this.setAttribute('projectName', this.projectName); + console.log("PREPARE SAVE (AST Explorer)"); } diff --git a/src/components/tools/astro-view.js.l4a b/src/components/tools/astro-view.js.l4a index f329f85b3..312a73d39 100644 --- a/src/components/tools/astro-view.js.l4a +++ b/src/components/tools/astro-view.js.l4a @@ -1 +1 @@ -{"type":"Reference","version":"2ea547b09643842243339bed02f9ca8b6798ee9c","content":"/*MD # Astro View - AST Token View spelled wrong\n\nMD*/\n\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport SyntaxChecker from 'src/client/syntax.js'\n\nimport { uuid as generateUUID, debounce, flatmap, executeAllTestRunners, promisedEvent, loc, range } from 'utils';\n\nexport default class AstroView extends Morph {\n\n static get defaultSourceURL() { return lively4url + \"/src/components/tools/astro-view-example-source.js\"; }\n static get defaultTransformerSourceURL() { return lively4url + \"/src/components/tools/astro-view-example-transformer.py\"; }\n static get defaultWorkspaceURL() { return lively4url + \"/src/components/tools/astro-view-example-workspace.js\"; }\n \n \n\n /*MD ## UI Accessing MD*/\n get container() { return this.get(\"#content\"); }\n \n // Status Text\n get statusLine() { return this.get(\"#status\"); }\n set status(text) { this.statusLine.innerText = text; }\n \n // Source\n get sourceEditor() { return this.get(\"#source\"); } \n get sourceLCM() { return this.sourceEditor.livelyCodeMirror(); }\n get sourceCM() { return this.sourceEditor.currentEditor(); }\n get source() { return this.sourceCM.getValue(); }\n \n // Source Path\n get sourcePath() { return this.get(\"#sourcePath\"); }\n get sourceURL() { return this.sourcePath.value; }\n set sourceURL(urlString) { this.sourcePath.value = urlString; }\n onSourcePathEntered(urlString) { this.loadSourceFile(urlString); }\n \n \n // Transformer Code\n get transformerSourceEditor() { return this.get(\"#transformerSource\"); } \n get transformerSourceLCM() { return this.transformerSourceEditor.livelyCodeMirror(); }\n get transformerSourceCM() { return this.transformerSourceEditor.currentEditor(); }\n get transformerSource() { return this.transformerSourceCM.getValue(); }\n \n // Transformer Code Path\n get transformerSourcePath() { return this.get(\"#transformerSourcePath\"); }\n get transformerSourceURL() { return this.transformerSourcePath.value; }\n set transformerSourceURL(urlString) { this.transformerSourcePath.value = urlString; }\n onTransformerSourcePathEntered(urlString) { this.loadTransformerSourceFile(urlString); }\n \n \n get astInspector() { return this.get(\"#ast\"); }\n \n get updateButton() { return this.get(\"#update\"); }\n \n get autoUpdate() { return this._autoUpdate; }\n set autoUpdate(bool) {\n this.updateButton.classList.toggle(\"on\", bool);\n this.updateButton.querySelector(\"i\").classList.toggle(\"fa-spin\", bool);\n this._autoUpdate = bool;\n }\n onUpdate(evt) {\n if (evt.button === 2) this.autoUpdate = !this.autoUpdate;\n this.update();\n }\n \n log(s) {\n console.log(s)\n }\n\n /*MD ## Initialization MD*/\n\n async loadSourceFile(urlString) {\n console.log(\"LOAD \", urlString);\n this.sourceURL = urlString;\n this.sourceEditor.setURL(lively.paths.normalizePath(urlString, \"\"));\n await this.sourceEditor.loadFile();\n await this.update(); \n }\n \n async loadTransformerSourceFile(urlString) {\n console.log(\"LOAD \", urlString);\n this.transformerSourceURL = urlString;\n this.transformerSourceEditor.setURL(lively.paths.normalizePath(urlString, \"\"));\n await this.transformerSourceEditor.loadFile();\n await this.update(); \n }\n \n async initialize() {\n this.windowTitle = \"Astro View\";\n this.registerButtons();\n\n this.getAllSubmorphs(\"button\").forEach(button => {\n button.addEventListener('contextmenu', e => {\n e.preventDefault();\n e.stopPropagation();\n e.currentTarget.dispatchEvent(new MouseEvent(\"click\", {button: 2}));\n });\n });\n \n await this.sourceEditor.awaitEditor();\n await this.transformerSourceEditor.awaitEditor();\n \n this.sourceEditor.hideToolbar();\n this.astInspector.connectEditor(this.sourceEditor);\n this.sourceLCM.doSave = async () => {\n this.save();\n };\n this.transformerSourceLCM.doSave = async () => {\n this.save();\n };\n \n this.sourceEditor.livelyCodeMirror().editor.on(\"cursorActivity\", (cm) => {\n // #TODO continue here....\n console.log(cm)\n // this.selectPath(pathKeys);\n })\n \n this.debouncedUpdate = this.update::debounce(500);\n this.sourceLCM.addEventListener(\"change\", (() =>\n SyntaxChecker.checkForSyntaxErrors(this.sourceCM))::debounce(200));\n this.sourceLCM.addEventListener(\"change\", () => {\n if (this.autoUpdate) this.debouncedUpdate()\n });\n \n this.debouncedUpdateTransformer = this.updateTransformer::debounce(500);\n this.transformerSourceLCM.addEventListener(\"change\", (() => {\n // SyntaxChecker.checkForSyntaxErrors(this.transformerSourceCM))::debounce(200) \n }));\n this.transformerSourceLCM.addEventListener(\"change\", () => {\n if (this.autoUpdate) this.debouncedUpdateTransformer()\n });\n \n this.sourcePath.addEventListener(\"keyup\", evt => {\n if (evt.code == \"Enter\") this.onSourcePathEntered(this.sourcePath.value);\n });\n this.transformerSourcePath.addEventListener(\"keyup\", evt => {\n if (evt.code == \"Enter\") this.onTransformerSourcePathEntered(this.transformerSourcePath.value);\n });\n\n const source = this.getAttribute(\"source\");\n if (source) this.loadSourceFile(source);\n \n const transformerSource = this.getAttribute(\"transformerSource\");\n if (transformerSource) this.loadTransformerSourceFile(transformerSource);\n \n this.autoUpdate = true;\n\n this.dispatchEvent(new CustomEvent(\"initialize\"));\n }\n\n onEditorCursorActivity(cm) {\n var from = cm.getCursor(true)\n var to = cm.getCursor(false)\n \n this.get(\"#editorInfo\").textContent = `${cm.indexFromPos(from)}-${cm.indexFromPos(to)}`\n }\n \n async updateTokens() { \n let api = \"http://127.0.0.1:5000\";\n let dataset = \"d3-force-main\";\n \n this.status = \"source updated: fetching...\"\n \n try {\n this.tokens = null;\n \n let response = await fetch(`${api}/tokenize`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n text: this.source\n })\n })\n \n let tokens = await response.json();\n // filter new-lines\n tokens = tokens.filter(ea => !ea.value.match(/^[ \\n]+$/));\n \n this.tokens = tokens;\n } catch (e) {\n this.status = `error fetching tokens: ${e}`;\n this.log(`error fetching tokens: ${e}`);\n }\n \n try {\n let response = await fetch(`${api}/dataset/${dataset}/embedding`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n text: this.source\n }),\n })\n \n let embedding = await response.json()\n this.embedding = embedding;\n } catch (e) {\n this.log(`error fetching embedding: ${e}`);\n this.status = `error fetching embedding: ${e}`;\n }\n \n if (this.embedding) {\n let formatted = JSON.stringify(this.embedding)\n this.get('#pool_embedding').innerText = formatted\n this.get('#astro-plot').showFeature(this.embedding)\n }\n\n this.log('fetched tokens', this.tokens)\n \n if (this.tokens) {\n this.get(\"#tokens\").innerHTML = \"\"\n this.tokens.forEach((token) => {\n let tokenView = \n
\n
{token.id}
\n
this.selectToken(tokenView, token)}\n pointerenter={() => this.hoverToken(tokenView, token, true)}\n pointerleave={() => this.hoverToken(tokenView, token, false)}\n >{token.value}
\n
{token.start}-{token.end}
\n
\n this.get(\"#tokens\").appendChild(tokenView)\n })\n } else {\n this.get(\"#tokens\").innerHTML = \"Error fetching tokens\"\n this.status = `error fetching tokens`;\n }\n }\n \n selectToken(view, token) {\n if (this.selectedTokenView) this.selectedTokenView.classList.remove(\"selected\")\n view.classList.add(\"selected\")\n this.selectedTokenView = view\n \n this.get(\"#embeddings\").innerHTML = \"\"\n let rows = []\n \n let tds = Array.from(token.value)\n .map(ea => ea.charCodeAt(0))\n .map(ea => {ea})\n \n rows.push({...tds})\n \n let table = {...rows}
\n \n this.get(\"#embeddings\").appendChild(table)\n \n }\n \n \n hoverToken(view, token, active) {\n if (active) {\n const start = loc(this.sourceCM.posFromIndex(token.start));\n const end = loc(this.sourceCM.posFromIndex(token.end));\n this.hoverMarker = this.sourceCM.markText(start.asCM(), end.asCM(), {css: \"background-color: #fe3\"});\n } else {\n this.hoverMarker.clear();\n this.hoverMarker = null;\n }\n }\n \n /*MD ## Execution MD*/\n \n async update() {\n this.lastSource = this.source\n this.log(\"source code changed, length: \" + this.source.length + \"\")\n \n try {\n var node = await this.astInspector.treeSitterParse(this.source)\n this.treeSitterRootNode = node.rootNode\n this.astInspector.inspect(this.treeSitterRootNode);\n } catch (e) {\n this.astInspector.inspect({Error: e.message});\n }\n \n this.updateTokens();\n }\n \n async updateTransformer() {\n this.status = \"transformer updated: sending...\"\n try {\n \n } catch (e) {\n \n }\n }\n\n async save() {\n if (this.sourceURL) {\n await this.sourceEditor.saveFile();\n }\n if (this.transformerSourceURL) {\n await this.transformerSourceEditor.saveFile();\n }\n this.update();\n }\n\n /*MD ## Lively Integration MD*/\n\n livelyPrepareSave() {\n this.setAttribute('source', this.sourceURL);\n this.setAttribute('transformerSource', this.transformerSourceURL)\n console.log(\"PREPARE SAVE (AST Explorer)\");\n }\n \n livelyMigrate(other) {\n }\n\n async livelyExample() {\n await this.loadSourceFile(AstroView.defaultSourceURL);\n await this.loadTransformerSourceFile(AstroView.defaultTransformerSourceURL)\n }\n}"} \ No newline at end of file +{"type":"Reference","version":"1e3139ef77e234fa325aa955a04fb8daa1c0fc7e","content":"/*MD # Astro View - AST Token View spelled wrong\n\nMD*/\n\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport SyntaxChecker from 'src/client/syntax.js'\n\nimport { uuid as generateUUID, debounce, flatmap, executeAllTestRunners, promisedEvent, loc, range } from 'utils';\n\nexport default class AstroView extends Morph {\n\n static get defaultSourceURL() { return lively4url + \"/src/components/tools/astro-view-example-source.js\"; }\n static get defaultTransformerSourceURL() { return lively4url + \"/src/components/tools/astro-view-example-transformer.py\"; }\n static get defaultWorkspaceURL() { return lively4url + \"/src/components/tools/astro-view-example-workspace.js\"; }\n \n \n\n /*MD ## UI Accessing MD*/\n get container() { return this.get(\"#content\"); }\n \n // Status Text\n get statusLine() { return this.get(\"#status\"); }\n set status(text) { this.statusLine.innerText = text; }\n \n // Source\n get sourceEditor() { return this.get(\"#source\"); } \n get sourceLCM() { return this.sourceEditor.livelyCodeMirror(); }\n get sourceCM() { return this.sourceEditor.currentEditor(); }\n get source() { return this.sourceCM.getValue(); }\n \n // Source Path\n get sourcePath() { return this.get(\"#sourcePath\"); }\n get sourceURL() { return this.sourcePath.value; }\n set sourceURL(urlString) { this.sourcePath.value = urlString; }\n onSourcePathEntered(urlString) { this.loadSourceFile(urlString); }\n \n // Project Name\n get projectNameInput() { return this.get('#projectName'); }\n get projectName() { return this.projectNameInput.value; }\n set projectName(text) { this.projectNameInput.value = text; }\n \n // Transformer Code\n get transformerSourceEditor() { return this.get(\"#transformerSource\"); } \n get transformerSourceLCM() { return this.transformerSourceEditor.livelyCodeMirror(); }\n get transformerSourceCM() { return this.transformerSourceEditor.currentEditor(); }\n get transformerSource() { return this.transformerSourceCM.getValue(); }\n \n // Transformer Code Path\n get transformerSourcePath() { return this.get(\"#transformerSourcePath\"); }\n get transformerSourceURL() { return this.transformerSourcePath.value; }\n set transformerSourceURL(urlString) { this.transformerSourcePath.value = urlString; }\n onTransformerSourcePathEntered(urlString) { this.loadTransformerSourceFile(urlString); }\n \n \n get astInspector() { return this.get(\"#ast\"); }\n \n get updateButton() { return this.get(\"#update\"); }\n \n get autoUpdate() { return this._autoUpdate; }\n set autoUpdate(bool) {\n this.updateButton.classList.toggle(\"on\", bool);\n this.updateButton.querySelector(\"i\").classList.toggle(\"fa-spin\", bool);\n this._autoUpdate = bool;\n }\n onUpdate(evt) {\n if (evt.button === 2) this.autoUpdate = !this.autoUpdate;\n this.update();\n }\n \n log(s) {\n console.log(s)\n }\n\n /*MD ## Initialization MD*/\n\n async loadSourceFile(urlString) {\n console.log(\"LOAD \", urlString);\n this.sourceURL = urlString;\n this.sourceEditor.setURL(lively.paths.normalizePath(urlString, \"\"));\n await this.sourceEditor.loadFile();\n await this.update(); \n }\n \n async loadTransformerSourceFile(urlString) {\n console.log(\"LOAD \", urlString);\n this.transformerSourceURL = urlString;\n this.transformerSourceEditor.setURL(lively.paths.normalizePath(urlString, \"\"));\n await this.transformerSourceEditor.loadFile();\n await this.update(); \n }\n \n async initialize() {\n this.windowTitle = \"Astro View\";\n this.registerButtons();\n\n this.getAllSubmorphs(\"button\").forEach(button => {\n button.addEventListener('contextmenu', e => {\n e.preventDefault();\n e.stopPropagation();\n e.currentTarget.dispatchEvent(new MouseEvent(\"click\", {button: 2}));\n });\n });\n \n await this.sourceEditor.awaitEditor();\n await this.transformerSourceEditor.awaitEditor();\n \n this.sourceEditor.hideToolbar();\n this.astInspector.connectEditor(this.sourceEditor);\n this.sourceLCM.doSave = async () => {\n this.save();\n };\n this.transformerSourceLCM.doSave = async () => {\n this.save();\n };\n \n this.sourceEditor.livelyCodeMirror().editor.on(\"cursorActivity\", (cm) => {\n // #TODO continue here....\n console.log(cm)\n // this.selectPath(pathKeys);\n })\n \n this.debouncedUpdate = this.update::debounce(500);\n this.sourceLCM.addEventListener(\"change\", (() =>\n SyntaxChecker.checkForSyntaxErrors(this.sourceCM))::debounce(200));\n this.sourceLCM.addEventListener(\"change\", () => {\n if (this.autoUpdate) this.debouncedUpdate()\n });\n \n this.debouncedUpdateTransformer = this.updateTransformer::debounce(500);\n this.transformerSourceLCM.addEventListener(\"change\", (() => {\n // SyntaxChecker.checkForSyntaxErrors(this.transformerSourceCM))::debounce(200) \n }));\n this.transformerSourceLCM.addEventListener(\"change\", () => {\n if (this.autoUpdate) this.debouncedUpdateTransformer()\n });\n \n this.sourcePath.addEventListener(\"keyup\", evt => {\n if (evt.code == \"Enter\") this.onSourcePathEntered(this.sourcePath.value);\n });\n this.transformerSourcePath.addEventListener(\"keyup\", evt => {\n if (evt.code == \"Enter\") this.onTransformerSourcePathEntered(this.transformerSourcePath.value);\n });\n\n const source = this.getAttribute(\"source\");\n if (source) this.loadSourceFile(source);\n \n const transformerSource = this.getAttribute(\"transformerSource\");\n if (transformerSource) this.loadTransformerSourceFile(transformerSource);\n \n this.projectName = this.getAttribute(\"projectName\") || \"\";\n \n this.autoUpdate = true;\n\n this.dispatchEvent(new CustomEvent(\"initialize\"));\n }\n\n onEditorCursorActivity(cm) {\n var from = cm.getCursor(true)\n var to = cm.getCursor(false)\n \n this.get(\"#editorInfo\").textContent = `${cm.indexFromPos(from)}-${cm.indexFromPos(to)}`\n }\n \n async updateTokens() { \n let api = \"http://127.0.0.1:5000\";\n let dataset = \"d3-force-main\";\n \n this.status = \"source updated: fetching...\"\n \n try {\n this.tokens = null;\n \n let response = await fetch(`${api}/tokenize`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n text: this.source\n })\n })\n \n let tokens = await response.json();\n // filter new-lines\n tokens = tokens.filter(ea => !ea.value.match(/^[ \\n]+$/));\n \n this.tokens = tokens;\n } catch (e) {\n this.status = `error fetching tokens: ${e}`;\n this.log(`error fetching tokens: ${e}`);\n }\n \n try {\n let response = await fetch(`${api}/dataset/${dataset}/embedding`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n text: this.source\n }),\n })\n \n let embedding = await response.json()\n this.embedding = embedding;\n } catch (e) {\n this.log(`error fetching embedding: ${e}`);\n this.status = `error fetching embedding: ${e}`;\n }\n \n if (this.embedding) {\n let formatted = JSON.stringify(this.embedding)\n this.get('#pool_embedding').innerText = formatted\n this.get('#astro-plot').showFeature(this.embedding)\n }\n\n this.log('fetched tokens', this.tokens)\n \n if (this.tokens) {\n this.get(\"#tokens\").innerHTML = \"\"\n this.tokens.forEach((token) => {\n let tokenView = \n
\n
{token.id}
\n
this.selectToken(tokenView, token)}\n pointerenter={() => this.hoverToken(tokenView, token, true)}\n pointerleave={() => this.hoverToken(tokenView, token, false)}\n >{token.value}
\n
{token.start}-{token.end}
\n
\n this.get(\"#tokens\").appendChild(tokenView)\n })\n } else {\n this.get(\"#tokens\").innerHTML = \"Error fetching tokens\"\n this.status = `error fetching tokens`;\n }\n }\n \n selectToken(view, token) {\n if (this.selectedTokenView) this.selectedTokenView.classList.remove(\"selected\")\n view.classList.add(\"selected\")\n this.selectedTokenView = view\n \n this.get(\"#embeddings\").innerHTML = \"\"\n let rows = []\n \n let tds = Array.from(token.value)\n .map(ea => ea.charCodeAt(0))\n .map(ea => {ea})\n \n rows.push({...tds})\n \n let table = {...rows}
\n \n this.get(\"#embeddings\").appendChild(table)\n \n }\n \n \n hoverToken(view, token, active) {\n if (active) {\n const start = loc(this.sourceCM.posFromIndex(token.start));\n const end = loc(this.sourceCM.posFromIndex(token.end));\n this.hoverMarker = this.sourceCM.markText(start.asCM(), end.asCM(), {css: \"background-color: #fe3\"});\n } else {\n this.hoverMarker.clear();\n this.hoverMarker = null;\n }\n }\n \n /*MD ## Execution MD*/\n \n async update() {\n this.lastSource = this.source\n this.log(\"source code changed, length: \" + this.source.length + \"\")\n \n try {\n var node = await this.astInspector.treeSitterParse(this.source)\n this.treeSitterRootNode = node.rootNode\n this.astInspector.inspect(this.treeSitterRootNode);\n } catch (e) {\n this.astInspector.inspect({Error: e.message});\n }\n \n this.updateTokens();\n }\n \n async updateTransformer() {\n this.status = \"transformer updated: sending...\"\n try {\n \n } catch (e) {\n \n }\n }\n\n async save() {\n if (this.sourceURL) {\n await this.sourceEditor.saveFile();\n }\n if (this.transformerSourceURL) {\n await this.transformerSourceEditor.saveFile();\n }\n this.update();\n }\n\n /*MD ## Lively Integration MD*/\n\n livelyPrepareSave() {\n this.setAttribute('source', this.sourceURL);\n this.setAttribute('transformerSource', this.transformerSourceURL);\n this.setAttribute('projectName', this.projectName);\n \n console.log(\"PREPARE SAVE (AST Explorer)\");\n }\n \n livelyMigrate(other) {\n }\n\n async livelyExample() {\n await this.loadSourceFile(AstroView.defaultSourceURL);\n await this.loadTransformerSourceFile(AstroView.defaultTransformerSourceURL)\n }\n}"} \ No newline at end of file