# Blank thumbnails

**URL:** https://talk.observablehq.com/t/blank-thumbnails/1551
**Category:** Uncategorized
**Created:** [January 5, 2019, 4:51pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551 "2019-01-05T16:51:28Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 5, 2019, 4:51pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/1 "2019-01-05T16:51:28Z")

</div>

Some of my notebooks do not render a thumbnail.

Running time too long? How do I check that? How can I fix it?

Can I render them myself and have them cached by Observable?

Notebooks in question:

- [https://beta.observablehq.com/@martien/flower](https://beta.observablehq.com/@martien/flower)
- [https://beta.observablehq.com/@martien/grid](https://beta.observablehq.com/@martien/grid)
- [https://beta.observablehq.com/@martien/x-matrix](https://beta.observablehq.com/@martien/x-matrix)

---

<div class="post-metadata">

### Author: ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [January 5, 2019, 11:46pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/2 "2019-01-05T23:46:20Z")

</div>

The limit is 30s of runtime on the server instance, according to [this post](https://talk.observablehq.com/t/white-thumbnail-problem/1233/2). I don’t know how to check it in advance, but one thing that I’ve been doing is placing userAgent guards like this:

```auto
if (navigator.userAgent.match('HeadlessChrome')) 
  return;
// rest of cell follows...

```

at the beginning of long-running cells. I got the idea from @mootari’s notebook:

> **[Custom Notebook Thumbnail](https://beta.observablehq.com/@mootari/custom-notebook-thumbnail)**
>
> An Observable notebook by Fabian Iwand.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 6, 2019, 1:22pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/3 "2019-01-06T13:22:32Z")

</div>

Thanks.

I’ve:

- added a elapsed render timer in the footer in `show()`; and
- disabled blur filters when `navigator.userAgent.match('HeadlessChrome')`.

Let’s see what happens.

Still curious, because I find it hard to believe that it takes more than 30s to render.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 6, 2019, 4:35pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/4 "2019-01-06T16:35:26Z")

</div>

Wonderful! I’ve got a thumbnail on [https://beta.observablehq.com/@martien/flower](https://beta.observablehq.com/@martien/flower).

It says the render time equals 4 ms…

The thumbnail’s got no blur, as expected. Maybe that’s the culprit?

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 6, 2019, 7:27pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/5 "2019-01-06T19:27:29Z")

</div>

And it’s gone again. Baffled.

---

<div class="post-metadata">

### Author: ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [January 6, 2019, 9:43pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/6 "2019-01-06T21:43:09Z")

</div>

Yeah, I’ve noticed that with my notebooks as well. The only thing I can think of is that it may depend on things like the overall server load when the thumbnail maker runs the notebook.

Apparently [the Observable team has other plans for the thumbnails](https://talk.observablehq.com/t/feature-request-supply-a-fixed-thumbnail/248/12), so at some point in the future we won’t have to worry about this sort of thing anymore.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 7, 2019, 10:12am UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/7 "2019-01-07T10:12:25Z")

</div>

Okay, I’ll just wait for that then. I dislike creating my own static heroes, though.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 11, 2019, 1:19pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/8 "2019-01-11T13:19:34Z")

</div>

Hmmm… forking the notebook:

1. Renders the new (forked) notebook faster.
2. Brings back the thumbnail for the new notebook.

Seems like a large edit history slows down the thumbnailer process.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 11, 2019, 2:35pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/9 "2019-01-11T14:35:01Z")

</div>

> [@Martien](#):
>
> Seems like a large edit history slows down the thumbnailer process.

Not necessarily. Could be that the load on the instance is lower at the moment, and updating your original notebook would have yielded the same result (note: cell content or positions need to change for the thumbnail to update).

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 11, 2019, 5:09pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/10 "2019-01-11T17:09:54Z")

</div>

The actual timeout appears to be somewhere around the 12s mark. I’ve created two notebooks to test thumbnail generation for:

- a single image, moved bottom to top with increasing delays,
- multiple images, created bottom to top with increasing delays.

The tumbnails and notebooks can be reviewed here:

> **[Observable Tests](https://beta.observablehq.com/collection/@mootari/observable-tests)**
>
> / An Observable collection by Fabian Iwand

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 17, 2019, 12:00pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/11 "2019-01-17T12:00:08Z")

</div>

Hey Fabian,

Apologies for the late reply. Enjoyed a couple of busy days.

Thanks for this nice approach to test this. And yes, I can see the 12s mark.

Then again, I cannot imagine that my little notebook takes more than 12s to render, not even on the thumbnailer.

When I time it, it’s under 2ms.

If you take a look at my overview page on [https://beta.observablehq.com/@martien](https://beta.observablehq.com/@martien) and zoom in using your browser, you can see in the footer of _Flower_—a simple fork of _Flower (old)_— a render time in ms of 0, 1, 2 max.

_Flower (old)_ fails to show a thumbnail, despite being the same code. I cannot figure out why that may be.

Puzzled as ever 🙂

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 17, 2019, 12:28pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/12 "2019-01-17T12:28:05Z")

</div>

> [@Martien](#):
>
> When I time it, it’s under 2ms.

Your timing only accounts for the evalutation of the `show` function. You’ll want to start your timer from the moment the notebook loads: [https://beta.observablehq.com/compare/64effbd662037e97...8156160658b490e0](https://beta.observablehq.com/compare/64effbd662037e97...8156160658b490e0)

In the case of my fork the thumbnail generated without problems. Try adding a whitespace somewhere in your “Flower (old)” notebook and check the thumbnail again. I’m fairly certain it will generate properly right now.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 17, 2019, 1:00pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/13 "2019-01-17T13:00:25Z")

</div>

How do you mean, “add white space”? In the code? In the chart?

My experience is similar to yours. When I forked Flower, it renders the thumbnail correctly.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 17, 2019, 1:06pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/14 "2019-01-17T13:06:00Z")

</div>

> [@Martien](#):
>
> How do you mean, “add white space”? In the code? In the chart?

In any cell. It’s just to change the notebook content and force a new thumbnail to be generated.

> [@Martien](#):
>
> My experience is similar to yours. When I forked Flower, it renders the thumbnail correctly.

From what I’ve gathered it really for the most part depends on external factors, like overall load on the server that’s responsible for thumbnail generation, and response times from external sources (e.g. [unpkg.com](http://unpkg.com)).

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 17, 2019, 1:13pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/15 "2019-01-17T13:13:31Z")

</div>

Ah, clear. Thanks.

Re unpkg, I assume that’s run under the hood. Is it run for the notebook itself, too? How does the revision history influence the unpkg time?

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 17, 2019, 1:35pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/16 "2019-01-17T13:35:17Z")

</div>

> [@Martien](#):
>
> Re unpkg, I assume that’s run under the hood. Is it run for the notebook itself, too? How does the revision history influence the unpkg time?

As far as I can tell there’s really nothing special going on. The headless Chrome instance just accesses notebooks like you in your browser would. The only difference is [the URL it uses](https://beta.observablehq.com/thumbnail/64effbd662037e97@6017), which seems to render just the notebook without any Observable UI.

I also still don’t believe that the revision history affects the load time. Again, try changing your notebook content (so that its hash changes) to force a new revision, and in turn force the thumbnail to be regenerated.

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 17, 2019, 1:47pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/17 "2019-01-17T13:47:51Z")

</div>

I’ve tried forcing regeneration repeatedly, without success.

I’ll let it go for now. Thanks for your lasting support.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 17, 2019, 1:54pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/18 "2019-01-17T13:54:49Z")

</div>

As far as I can tell forks keep the revision history. Would you humor me and republish [Flower (old)](https://beta.observablehq.com/@martien/flower) so that its update date (mouseover on publish date) shows today?

---

<div class="post-metadata">

### Author: ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)
#### Post date: [January 17, 2019, 2:13pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/20 "2019-01-17T14:13:01Z")

</div>

I just humoured you.

---

<div class="post-metadata">

### Author: ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)
#### Post date: [January 17, 2019, 3:30pm UTC](https://talk.observablehq.com/t/blank-thumbnails/1551/21 "2019-01-17T15:30:57Z")

</div>

Thanks! And again, a fork’s thumbnail appears almost immediately. …

@mbostock @tom Possible bug in thumbnail generation, tldr:

- Thumbnail for [https://beta.observablehq.com/@martien/flower](https://beta.observablehq.com/@martien/flower) does not generate despite multiple updates,
- thumbnails for vanilla forks of the notebook generate almost immediately.

[Next page](https://talk.observablehq.com/t/blank-thumbnails/1551.md?page=2)
