compute: additions to run standalone notebook component (#32701)

.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

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

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.

client/web/src/notebooks/blocks/compute/component/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Compute Block</title>
+  <script src="public/dist/main.js"></script>
+  <script src="public/js/ports.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+  var app = Elm.Main.init({
+      node: document.getElementById("app"),
+      flags: {
+          sourcegraphURL: "https://sourcegraph.com",
+          computeInput: null,
+      }
+  });
+  initElmPorts(app);
+  </script>
+</body>
+</html>

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) {})
+}