From 6d4ebc96af6251fd8e97a250ba95f1239c3c31fd Mon Sep 17 00:00:00 2001 From: Rijnard van Tonder Date: Thu, 24 Mar 2022 09:57:07 -0700 Subject: [PATCH] compute: additions to run standalone notebook component (#32701) --- .gitignore | 3 + .../blocks/compute/component/Makefile | 7 ++ .../blocks/compute/component/README.md | 108 ++++++++++++++++++ .../blocks/compute/component/index.html | 22 ++++ .../compute/component/public/js/ports.js | 53 +++++++++ 5 files changed, 193 insertions(+) create mode 100644 client/web/src/notebooks/blocks/compute/component/Makefile create mode 100644 client/web/src/notebooks/blocks/compute/component/README.md create mode 100644 client/web/src/notebooks/blocks/compute/component/index.html create mode 100644 client/web/src/notebooks/blocks/compute/component/public/js/ports.js diff --git a/.gitignore b/.gitignore index 3a006f6d647..38f5856cb71 100644 --- a/.gitignore +++ b/.gitignore @@ -122,6 +122,9 @@ elm-stuff # Extensions /client/extension-api/dist +# Compute Component +/client/web/src/notebooks/blocks/compute/component/public/dist + # Direnv .envrc .direnv diff --git a/client/web/src/notebooks/blocks/compute/component/Makefile b/client/web/src/notebooks/blocks/compute/component/Makefile new file mode 100644 index 00000000000..4675aa5bac0 --- /dev/null +++ b/client/web/src/notebooks/blocks/compute/component/Makefile @@ -0,0 +1,7 @@ +all: + npx elm-live src/Main.elm -- --output=public/dist/main.js + +standalone: + npx elm-live src/Main.elm --start-page=index.html -- --output=public/dist/main.js + +.PHONY: all standalone diff --git a/client/web/src/notebooks/blocks/compute/component/README.md b/client/web/src/notebooks/blocks/compute/component/README.md new file mode 100644 index 00000000000..645a143fc47 --- /dev/null +++ b/client/web/src/notebooks/blocks/compute/component/README.md @@ -0,0 +1,108 @@ +## Dev setup + +Install the formatter (all editors). + +``` +npm install -g elm-format +``` + +### Editor setup + +To get the best development experience, you really should take the time to just set up a couple of key things which is (a) format-on-save (b) diagnostics/annotations. +The below instructions are for VS Code. You'll have to configure other editors on your own (I give some hints below, but haven't configure tested on other editors). +If you want to try things out all noncommital but want to use Vim/Emacs, then I recommend just getting Vim/[Emacs](https://marketplace.visualstudio.com/items?itemName=lfs.vscode-emacs-friendly) bindings in VS Code because the instructions here will nsure you get a nice dev environment (format-on-save, diagnostics, etc). + +**VS Code** + +Install: + +- [Elm extension](https://marketplace.visualstudio.com/items?itemName=Elmtooling.elm-ls-vscode) for VS Code. +- [Download FiraCode font](https://github.com/tonsky/FiraCode/releases/download/5.2/Fira_Code_v5.2.zip). Optional, but recommended because it's a nice font for rendering some syntactic operators like `|>`. To install, unzip. Then double click all the files in `ttf` and click "Install font". + +Optional: If you chose to add the font, add to in VS Code in `settings.json`: Press `command+shift+P`, type `settings.json`, click `Open settings.json` (not the Default settings) one, then add this: + +```json + "editor.fontFamily": "Fira Code", + "terminal.integrated.fontFamily": "Fira Code", + "editor.fontLigatures": true, +``` + +Required: Add these editor settings: + +```json + "editor.formatOnSave": true, + "elmLS.onlyUpdateDiagnosticsOnSave": true, +``` + +In total your `settings.json` should look like this: + +```json +{ + // ... your other junk + + // optional font things + "editor.fontFamily": "Fira Code", + "terminal.integrated.fontFamily": "Fira Code", + "editor.fontLigatures": true, + + // required editor things + "editor.formatOnSave": true, + "elmLS.onlyUpdateDiagnosticsOnSave": true +} +``` + +- Optional: if you want to feel like a superhero bind `Show Hover` to a good shortcut command. Click the gear in the bottom left of VS Code, go `Keyboard Shortcuts` search for `showHover` and edit the key binding for `editor.action.showHover` + +- Optional: if you want to feel like a ninja too, search for `next problem` in `Keyboard Shortcuts` and bind that to something convenient. + +**IntelliJ** + +There's a plugin: https://plugins.jetbrains.com/plugin/10268-elm + +**Vim** + +Untested, but you want to install and configure Elm language server. You need to install at least: + +``` +npm install -g elm elm-test elm-format @elm-tooling/elm-language-server +``` + +And then look at `elm-vim`: https://github.com/elm-tooling/elm-vim and go from there. + +**Emacs** + +See elm-mode: https://github.com/jcollard/elm-mode + +### Running + +Let's make sure things worked. You need `npx` installed (probably it is, but you can check with `which npx`). Then, in this directory (`client/web/src/notebooks/blocks/compute/component`), run: + +``` +make standalone +``` + +This starts a live server that watches for changes and spits out errors if the +program doesn't compile. It can be useful to run this in a separate terminal +(or in a terminal in VS Code) because the errors are helpful when hacking +(especially to see the build succeeds). You'll get similar errors with +diagnostics too, so you don't strictly need to care about the terminal output +if your editor integration works. + +Visit http://localhost:8000 in your browser. You should see a purple bar chart load. If not, DM @rijnard in slack. + +Next, to make sure your development setup is working, open `src/Main.elm` and delete the text that says: + +``` +| RunCompute +``` + +Formatting should work on save (deletes an empty line if you left an empty +line), and your editor should now give a couple of diagnostics like: + +``` + I cannot find a `RunCompute` variant:... +``` + +You'll also see similar error messages in the terminal where we started the live server. + +Things work! Undo your change to fix the app again. diff --git a/client/web/src/notebooks/blocks/compute/component/index.html b/client/web/src/notebooks/blocks/compute/component/index.html new file mode 100644 index 00000000000..484e93786d9 --- /dev/null +++ b/client/web/src/notebooks/blocks/compute/component/index.html @@ -0,0 +1,22 @@ + + + + + Compute Block + + + + +
+ + + diff --git a/client/web/src/notebooks/blocks/compute/component/public/js/ports.js b/client/web/src/notebooks/blocks/compute/component/public/js/ports.js new file mode 100644 index 00000000000..02fe550334e --- /dev/null +++ b/client/web/src/notebooks/blocks/compute/component/public/js/ports.js @@ -0,0 +1,53 @@ +/* eslint-disable unicorn/no-abusive-eslint-disable */ +/* eslint-disable */ + +function initElmPorts(app) { + // Compute streaming + var sources = {} + + function sendEventToElm(event) { + app.ports.receiveEvent.send({ + data: event.data, // Can't be null according to spec + eventType: event.type || null, + id: event.id || null, + }) + } + + function newEventSource(address) { + sources[address] = new EventSource(address) + return sources[address] + } + + function deleteAllEventSources() { + for (const [key] of Object.entries(sources)) { + deleteEventSource(key) + } + } + + function deleteEventSource(address) { + sources[address].close() + delete sources[address] + } + + app.ports.openStream.subscribe(function (args) { + deleteAllEventSources() // Pre-emptively close any open streams if we receive a request to open a new stream before seeing 'done'. + console.log(`stream: ${args[0]}`) + var address = args[0] + + var eventSource = newEventSource(address) + eventSource.onerror = function (err) { + console.log(`EventSource failed: ${JSON.stringify(err)}`) + } + eventSource.addEventListener('results', sendEventToElm) + eventSource.addEventListener('alert', sendEventToElm) + eventSource.addEventListener('error', sendEventToElm) + eventSource.addEventListener('done', function (event) { + console.log('Done') + deleteEventSource(address) + // Note: 'done:true' is sent in progress too. But we want a 'done' for the entire stream in case we don't see it. + sendEventToElm({ type: 'done', data: '' }) + }) + }) + + app.ports.emitInput.subscribe(function (args) {}) +}