Alex Garcia

💻 Introducing observable-prerender - Pre-render Observable notebooks with Puppeteer!

Introduction to the new observable-prerender CLI

observable-prerender

This is a very cool idea, Alex.  I was looking at using this for an ETL job that I run manually on a notebook through clicking a button.  However, I was not sure how I would go about 'clicking' the button through the API.  I can fill in the text boxes on the page, but do you have any suggestions for 'clicking a button'?  Alternatively (even better...) calling a function through the API?

Cobus Theunissen

Hey thanks for the comment! For your case, I'd look into the page.click Puppeteer API[0]. To access that from this library, once you have the loaded notebook, you can 1) add a unique id to the button like html`<button id="some-id">Start</button>`, then 2) Use code like notebook.page.click('#some-id') to trigger the click. Then, you can use `notebook.waitFor('some_cell')` [1] on the downstream cell to wait for it to be fulfilled (to wait for your ETL process to finish after clicking the button)

If you can't add a unique id to the button (e.g. using a @jashkenas/inputs form), every cell that gets passed into `.load()`'s 2nd argument gets rendered onto the page in a div container with an id that looks like "notebook-cellName". Right now there's a bug with viewof cells so its a little awkward, but if you have a "viewof submit" cell, then you can find it with document.getElementById("notebook-viewof submit"). So, in theory, you could get the button from inside a specific viewof form with code that looks like document.getElementById("notebook-viewof submit").querySelector('button'). 

HMU if you run into any errors with the library or if you have more questions!

[0] https://pptr.dev/#?product=Puppeteer&version=v5.1.0&show=api-pageclickselector-options
[1] https://github.com/asg017/observable-prerender#notebookwaitforcell-status

Awesome.  Thanks for the advice, Alex.  I think this will work.  Puppeteer is cool.

Purpose-built for displays of data