Thumbnail daemon fails to detect WebGL canvas

The current thumbnail of https://beta.observablehq.com/@mootari/orientation contains a snapshot of the notebook, with part of a WebGL canvas (600x600) visible.

During my edits I noticed that occasionally the canvas would be detected and directly used as thumbnail. I’m guessing this is some timing issue that depends on the load of the server running headless Chrome?

I did some more tests, yielding an image with a tracking URL as src that contained the time since load:

  • The first time I delayed each yield by 1000ms and observed a timeout of around 3s.
  • The second time I decreased the delay to 500ms and noticed a timeout of >30s in my logs.

Looks like the fetch script exits early under certain (external?) conditions. Or is there some notion of “inactivity” that determines when a notebook is considered fully loaded?

The thumbnail daemon tries to wait until the page has loaded and is idle, yes.

WebGL is unfortunately somewhat unreliable on our current headless Chrome renderer. We’d like to overhaul our process for generating screenshots with something that is both more reliable, offers higher fidelity, and allows the author more control over the result, but I can’t say yet when that will happen.

1 Like

It sounds like you already have a strategy laid out. I’d love to learn more about your approach - can you share some details?

1 Like

.@mbostock as you are looking to retrofit this notebook preview feature, might I suggest you allow notebook devs to plop gifs of their works for preview?

P.S.: posted it here for the ruckus rumble :slight_smile:

on a related note: is there a runtime notebook API we could use to create a grid view of a collection of notebook thumbnails in notebooks that just have links to other notebooks on some subject until Collections feature is available for everyone?

All I am looking for is given a notebook url, get notebook title, preview thumbnail img url, created/update date, author, and number of likes to gen a nice looking notebook list or grid view.

Specific use case: I’d like to create one ‘landing page’ notebook for the Chicago Crimes EDA I’ve done with Apache Arrow data and various charting and mapping libs to showcase my work with one link I can send to prospect clients that looks similar to:

and have them bundled in this notebook, as a workaround till you make creating Collections available to general public: https://beta.observablehq.com/@randomfractals/chicagocrimes

I can reverse engineer the layout and html code from that list view, but was wondering if there is a good way to get latest thumbnail urls for the referenced notebooks and associated info and stats.

so, I’ve updated my Chicago Crimes series notebook:

would love to find a better way to present that list with thumbnails via some notebook or observablehq api if possible.

and now I think your thumbnail daemon just died completely.

could it be a sign from above to rework it?

There was a bug preventing the thumbnail daemon from taking screenshots earlier today, but we fixed it and worked through the backlog, so your thumbnails should be back again. Sorry about that!

1 Like

.@mbostock thanks for the quick fix!

should I log this notebook thumbnail api feature request separately, so you can close this one?

found the solution to what I wanted to do for my master notebook and getting notebooks info in @Fil’s post here:

see my observablehq notebooks inception code bit here :slight_smile: with total, original, forked and total liked notebooks count breakdown

Just plugin your observablehq userName if you want to see your stats…

@tom & @mbostock can we use your api endpoint freely, or do you want to add some user keys for that later?

also, can we use this solution for creating custom user notebooks collections we can link to for now?

I know it’s a bit hacky, or hacky AF, but I’d like to use it to replace this master notebook bit :slight_smile:

loopback! :slight_smile:

would be cool if your thumbnailer process in this forum could take ‘deep links’ into account and snap the part of the doc, graph, or diagram linked to…

see this post for refs: