cells not rendering sometimes, possibly related to HTL

[stephanietuerk]

Hi All,

I’ve had some troubling behavior a few times tonight and I cannot figure out what is going on, though I suspect it may be related to recently adding HTL to the notebook. Basically, sometimes without even making changes aside from switching back from safe mode, many of my notebook cells will fail to render and instead just appear white, with no error messages in the notebook or the console.

I have been working in this notebook for months without issues. Admittedly this notebook has a LOT of cells. I exported to VSCode once and there were over 6k lines of code – I am sure there are more now. (There is a reason we have so much code in an Observable Notebook though I’d be happy to put some functions into a second notebook and import, just haven’t had any down time to do that) Recently, I decided I wanted to start using Hypertext Literal in the notebook because I love being able to write event listeners inline with the HTML. Given the size of the notebook though, I couldn’t just switch all of the regular html already written over to HTL, so I brought the HTL module in namespaced as htl so that I could still have traditional html<> blocks along with htl.html<> blocks.

All three times the white cells appeared, I was working on the cell in which I’m using HTL. The first time I resolved it by reverting to an earlier version I found that worked using history. The second time I tried history again to no avail, and ultimately solved it by removing the HTL import and converting the HTL in that cell to HTML. I was then able to add the HTL back without problems. (The first revert did not go so far back that the HTL module was no longer in the notebook.) The third time the white cells occurred after switching back from safe mode in the same browser tab when I hadn’t touched any code in safe more – I had just searched. (I may have had safe mode open in other browser tabs when the first two instances occurred, also dev tools was likely open). I tried the fix from the second time which didn’t work, but once I commented out the code in the cell entirely and just returned true in its place (i.e. went from viewof myCell = {//code with HTML or HTL here} to myCell = true then things returned to normal and I was once again able to add the HTL import and HTL code in the cell and things work find again.

Does anyone have any ideas about what may be causing this?

Unfortunately I can’t share the notebook but I’m attaching some screenshots of the problem and normal behavior as well as of the cell with the HTL content

[asg017]

I’m not 100% sure if this is the problem, but when you are creating custom viewof cells, if a .value property doesn’t exist on the viewof DOM cell, then the “value” cell will never resolve. In your “Problem” screenshot, the blank white cells have the gray “running” bar on the left hand side, meaning that the cell is waiting for a dependent cell to be resolved, causing it to just show a white blank space.

Say you have:

viewof x = {
  const container = html`<div>I'm a div, not an input!`;
  // container.value is undefined!
  return container;
}

In this case, viewof x returns the div and can be seen like normal, but since viewof x.value is undefined, then the Observable runtime will never resolve the “value” cell, x, meaning any other cell that depends on x will be forever “running” , waiting for x to resolve. You can see more about this here custom viewof debugging / Alex Garcia / Observable

In your case, in viewof compareMeasuresViewsPHE, inside the if(!noPHEMode) block, it seems like there is no checkbox.value = true (if that’s what’s supposed to be there), which cause the compareMeasuresViewsPHE cell to never resolve, which causes other dependent cells to never resolve (causing the white blank cells).

Again, not 100% sure if that’s the case, but that’s what I notice! It’s weird if htl has something to do with it, but I’d imagine that if you were refactoring a bunch of code it’s easy to forget a .value inside of a branch

[stephanietuerk]

Thanks for this! I just did add a line to set div.value to true and tested a bunch of different things, and this seems to have been the problem.

I guess I was getting away with it occasionally because the eventListener would update the value, and this cell was not getting re-evaluated very frequently so once I got the eventListener to fire once, I have a value value for the cell for a long time.