Prevent reloading embedded notebook cell on resize

Community Help
1

Hi!

I have a webpage where I’ve embedded several cells from a notebook. One of the cells returns is the date range from a brush. Here is the embed code for that cell.

  if (name === "dateRange") {
        
        return {
            pending() {},
            fulfilled(value) {

                endDate = value[1]
                startDate = value[0]

loadImagesToAnimate(startDate, endDate)


            },
            rejected(error) {
                node.textContent = error.message;
            }
        }
    }

In my webpage I then use these date values to load a bunch of images to render in three.js. By default the brush is set to a year, so 365 images are loaded.

My issue is that whenever the window is resizes the embed code is rerun several times (as the window is moving from one size to another). I understand why this is desirable so that a visualization adjusts with the screen width, but in this case it ends up loading a huge number of files.

Is it possible to not have a cell run when the window resizes?

Hope that makes sense.

2

It’s a good question. There are a couple of possible approaches here, one of which is to store the previous start and end dates, and only re-fetch the data when they change. This could be done in the cell that defines loadImagesToAnimate – could you share that definition here?

It also sounds like the new requests are re-requesting the same files – is that right? The browser generally does caching of file contents, so I don’t think they would need to be re-loaded from scratch, though they would need to be re-processed and that can be expensive.

1 Like
3

Hi and thanks for your response yurivish. Yes, I ended up checking if the dates had changed, and only run my function if they do. That does the trick! Good point about the requests. Yes, the images were cached it was the processing that was causing the problems.
cheers and thanks again

1 Like
4

It seems that your cell references Observable’s width variable, which produces a new value whenever the viewport width changes. If you can’t figure out the dependency right away, have a look at the minimap.

Since you (probably?) only need the width for your WebGL canvas, I recommend to listen directly to resize events in that cell and update your renderer accordingly. You can read more about it in three.js - Responsive Design.

You may also want to have a look at Efficient Responsiveness / Fabian Iwand | Observable.

3 Likes