Skip to content

compute: add notebook block component

Warren Gifford requested to merge main-dry-run/compute-block-build-clean into main

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 vs development 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:

Screen Shot 2022-03-08 at 2 17 22 PM

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.

Merge request reports

Loading