Redrawing Results Incorrect

[utkonos]

Description

When using the progress meter tqdm and using the parameter leave, meters should be redrawn in the location of a completed meter. There appears to be whitespace left behind when this redraw occurs. There has been a bug open in tqdm for a few years now. There is a comment by the author of that package that this bug is a problem in the upstream project, Jupyter / Jupyter Lab. I can verify that this bug still exists now. Screenshot is attached.

Reproduce

import time
import tqdm
for _ in tqdm.tqdm_notebook(range(10)):
    for _ in tqdm.tqdm_notebook(range(10000000), leave=False):
        pass

Expected behavior

No extra accumulated white space.

Context

• Operating System and version: macOS 10.15 (19A583)
• Browser and version: 77.0.3865.120 (Official Build) (64-bit)
• JupyterLab version: 1.1.4

Command Line Output

jupyter lab

Browser Output

react-dom.development.js:21258 Download the React DevTools for a better development experience: https://fb.me/react-devtools
index.js:42 Starting application in workspace: "/lab"
default.js:56 Starting WebSocket: ws://localhost:8888/api/kernels/0a0fe54b-ceea-4c29-a433-fb1dbedb5d40
default.js:56 Starting WebSocket: ws://localhost:8888/api/kernels/0a0fe54b-ceea-4c29-a433-fb1dbedb5d40
default.js:1496 Kernel: connected (0a0fe54b-ceea-4c29-a433-fb1dbedb5d40)
default.js:1496 Kernel: connected (0a0fe54b-ceea-4c29-a433-fb1dbedb5d40)
default.js:56 Starting WebSocket: ws://localhost:8888/api/kernels/6d8f9f06-a228-4e4d-a1a8-3d5def999167
default.js:1496 Kernel: connected (6d8f9f06-a228-4e4d-a1a8-3d5def999167)
default.js:56 Starting WebSocket: ws://localhost:8888/api/kernels/087bbaf6-9342-4cc3-b4d1-7a26853762b7
default.js:1496 Kernel: connected (087bbaf6-9342-4cc3-b4d1-7a26853762b7)
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
renderer.js:45 Error: widget model not found
    at WidgetManager.get_model (manager.js:300)
    at WidgetRenderer.renderModel (renderer.js:38)
renderModel @ renderer.js:45
default.js:56 Starting WebSocket: ws://localhost:8888/api/kernels/a258a6cc-666b-445c-8183-b081981c3113
default.js:1496 Kernel: connected (a258a6cc-666b-445c-8183-b081981c3113)

[jasongrout]

Yes, if I recall what the underlying issue is, this is a known issue with widgets and Jupyter - closing a widget does not actually remove the underlying DOM node or message from the notebook outputs. The key issue here is that a notebook output cannot delete itself, only the user can delete a notebook output by clearing the output. Some would consider that a feature...

[vidartf]

One thing is that a DOM node remains, a separate issue is that such empty nodes take up space. A possible solution is to add a CSS rule using e.g.:empty to ensure such empty outputs are hidden properly.

[jasongrout]

This is also discussed at jupyter-widgets/ipywidgets#1845

[thomasaarholt]

I'm in favour of @vidartf's suggestion followed by the creation of an issue to discuss whether to deal with it in a more proper manner. This would remove the annoyance that several users are experiencing, while not just shoving it under the carpet.

[tangbinh]

While we're still waiting for a code change, is there a temporary solution to fix the problem? I tried to add a CSS rule as suggested in bstriner/keras-tqdm#21 and all similar approaches, but none of them work with jupyterlab. I figured out that the div names are indeed different for jupyterlab, and the culpable one here is .p-Widget.jp-RenderedText.jp-mod-trusted.jp-OutputArea-output. Indeed, including display: none for this one remove the annoying spaces left by leave=False, but it also hides all other text output. I tried to use :empty selector, but it didn't work. Can you please let me know how to check against empty div in this case?

[jasongrout]

I just checked. In JLab, the output area after a widget is closed is not actually an empty div, just a hidden div, and there are several layers of padding. I didn't see an obvious selector. In general, there are no CSS selectors for parents of items having particular properties.

[vidartf]

In JLab, the output area after a widget is closed is not actually an empty div, just a hidden div

Are there any steps we can reasonably take to make it "more empty", or maybe add a CSS class to indicate a closed widget? If that is the case, then maybe someone could do a PR adding such a class?

[thomasaarholt]

There are two aspects at play here, from what I can see with my rudimentary HTML/CSS knowledge.

1. The .jp-OutputArea-prompt has padding, which leads to apparent whitespace when the OutputArea is empty.
2. Some cells, like the result of print("") contain an empty <pre></pre> HTML tag that have a set line-height of 1. For some reason, I'm unable to target these empty tags using the :empty selector (i.e. pre:empty {line-height: 0;}. Testing it manually with the pre tag works in a separate html file.

Fixing 1 should be easy:
Add the following after this css style:

jp-OutputArea-prompt:empty {
  padding: 0;
  border: 0;
}

I played around with this in jupyterlab by calling the following in a markdown cell, and couldn't find any problems with it.

from IPython import HTML
HTML("""
<style>
.jp-OutputArea-prompt:empty {
  padding: 0;
  border: 0;
}
</style>
""")

I'm happy to submit a PR on this, but I tried installing a developer version of jupyterlab, and I'm currently getting a error when running lab which I think is due to webpack. Happy to try again in a few days time.

[guillochon]

@thomasaarholt would you mind PR'ing the fix? The extra whitespace is killing me...

[krin-san]

This issue is 2 years old now 🎂

Jupyter-Lab v3.2.1 still has this issue.
Is there a plan to open a PR and fix it or is there any workaround?

[randolf-scholz]

@thom Thank you, this partial workaround is still possible with

from IPython.core.display import HTML
HTML("<style>.jp-OutputArea-prompt:empty {padding: 0; border: 0;}</style>")

However, after some point Jupyter cuts the output (it seems to think too many lines have been drawn), and it doesn't recover the nested bar when clicking on the message.

[tasansal]

@thom Thank you, this partial workaround is still possible with

from IPython.core.display import HTML
HTML("<style>.jp-OutputArea-prompt:empty {padding: 0; border: 0;}</style>")

However, after some point Jupyter cuts the output (it seems to think too many lines have been drawn), and it doesn't recover the nested bar when clicking on the message.

This did help with the issue but on Jupyterlab it still moves the inner progress bar, even though it is much less.

Here is my code

import time

from IPython.core.display import HTML
from tqdm.auto import tqdm


HTML("<style>.jp-OutputArea-prompt:empty {padding: 0; border: 0;}</style>")

outer = range(5)
inner = range(5)

for var1 in tqdm(outer, desc="outer", position=0):
    for var2 in tqdm(inner, desc="inner", position=1, leave=False):
        time.sleep(0.5)

[thomasaarholt]

I have submitted a PR in #12838.

[fcollonval]

Re-opening the issue to keep track of the edge case found by Jason Grout:

However, if there is only one output, we still end up with a minimum height of the output even with this PR. In stock JupyterLab, this means that closing a single displayed widget will still show a 20px blank space. Here's an example:

import ipywidgets
x = ipywidgets.IntSlider()
display(x)

x.close()

The problem appears to be the collapser minimum height if there is any output (and in this case, there is, according to jlab, and single empty output):

jupyterlab/packages/cells/style/widget.css

Lines 59 to 61 in f573c4a

	.jp-Cell:not(.jp-mod-noOutputs) .jp-Cell-outputCollapser {
	min-height: var(--jp-cell-collapser-min-height);
	}

Originally posted by @jasongrout in #12838 (comment)

[tommedema]

After much trial and error this is the only workaround that worked for me in JupyterLab:

from IPython.core.display import HTML

# See https://github.com/bstriner/keras-tqdm/issues/21#issuecomment-443019223
display(HTML("""
    <style>
        .jp-OutputArea-child:has(.jp-OutputArea-prompt:empty) {
              padding: 0 !important;
        }
    </style>
"""))

[utkonos]

I have not encountered this problem for quite a while. It appears that it has been fixed either downstream with tqdm or upstream somewhere. If someone encounters it again, please reopen or open a new issue.

[Royal-lobster]

Can still reproduce it on vs code jupyter notebook :/

[krassowski]

@Royal-lobster this is not a VSCode repository but JupyterLab repository. You may want to raise an issue with https://github.com/microsoft/vscode-jupyter.

[Royal-lobster]

I see, looks like there is a open issue there. microsoft/vscode-jupyter#9397 would be waiting for it to get fixed