compute: add notebook block component
Created by: rvantonder
This PR adds the basic Compute block in demos to notebooks, as seen in demos. It's a react component that wraps a self-contained Elm app. Using Elm in our webapp is experimental. Currently it serves well to prototype with quickly for myself and other engineers who may want to experiment this framework. I've taken care to minimize footprint/impact to our app (e.g., if we'd remove it later, or for others to try). The interop is minimal, see inline comments. Here are some notes about the build:
-
uses a webpack loader for Elm files that's compiled to JS and bundled like usual. the loader pays attention to
production
vsdevelopment
builds and will optimizie/minimize JS accordingly. -
Webpack bundles and size changes (production). Before size is just a placeholder component introduced in https://github.com/sourcegraph/sourcegraph/pull/32119
file | Before | After |
---|---|---|
7945-39256c872e6454c7fe18.chunk.js | 36K | 160K |
7945-39256c872e6454c7fe18.chunk.js.map | 140K | 1.0M |
I checked this by running rg 'NotebookComputeBlock' --no-ignore -l | xargs du -hs
in ui/assets/scripts
. The entire ui/assets/scripts
size goes from 43M
-> 44M
. There are likely more ways to minimize but since this ought to be restricted to loading on Notebook pages, I'm not going to look further into it right now.
- Webpack build time. I didn't go overboard to get exact numbers here. I just ran one dry run of the build (dev and prod) and then took the time of the second run.
Kind | Before | After |
---|---|---|
dev | 59.80s | 60.98s |
prod | 170s | 174s |
On my laptop there's quite a bit of jitter (up to 5 seconds for prod build) so the margin of error here is large enough that the Before/After
difference is likely smaller in practice.
-
I verified that the notebook cell works as expected by building a single server image and running Sourcegraph from scratch
-
I added storybook support to gauge how well that would work (after all, it's just a React app). It works well and the main change here is to just add the elm loader to the storybuild webpack config:
What happens next
-
This functionality is dead, it cannot be run yet with this PR, because we want to feature flag this functionality. I will add a
+ Compute
notebook button in a follow up PR with the feature flag to toggle it. -
I'll be holding a workshop on Elm that does a code walkthrough of this PR so that there's lots of visibility into how I'm prototyping with it, and to enable interested devs to try it themselves (dev setup, etc.). So feel free to look at the core app
Main.elm
and ask questions, but for review it's OK to skip and if you don't yet understand this (experimental!) code. I will be doing a walkthrough.
Test plan
No test, still unused. Storybook support added.