Annotate HTML alignment broken in JupyterLab

[cdeil]

While trying out Numba Annotate (and after fixing #4063) I noticed that the alignment is broken in JupyterLab. It is right-aligned, but should be left-aligned. (I didn't try in Jupyter notebook)

See screenshot below.

@Carreau - Do you know what's wrong?

---

Another usability issue is that executing the cell with the example multiple times makes the HTML output grow and grow, showing the same annotated output multiple times. This looks like a bug, no? When re-executing a def statement with numba.jit decorator, a new numba.targets.registry.CPUDispatcher object should be created, and nothing should accumulate, no?

---

[Carreau]

That is likely an issue in JupyterLab itself; and diverging CSS with classic notebook; do you know with which version of JupyterLab. cc @jasongrout

[cdeil]

I have JupyterLab version 0.35.5 and Numba git master (but probably the same as the last release, you should see this issue with Numba 0.43.1 as well).

[Carreau]

you may want to try with Jupyterlab 1.0-alpha, using pip install --pre, I know the CSS was updated; but havent' been involved much.

[cdeil]

I tried pip install -U --pre jupyterlab and got jupyterlab-1.0.0a3-py2.py3-none-any.whl. Still the same issue.

In Jupyter notebook the output looks fine.

If someone has time to try and reproduce and pinpoint the issue, here's the code snippet to copy & paste to reproduce the issue:

import numba
from numba.pretty_annotate import Annotate
@numba.jit
def test(q):
    res = 0
    for i in range(q):
        res += i
    return res
     
test(10)
Annotate(test)

[jasongrout]

Here is the classic notebook css:

Here it is in JLab. You'll notice that there is some jlab css that is overriding the align left. The joys of the global css namespace!

[jasongrout]

Looks like the striping also is a difference. Here is classic notebook:

Here is JLab:

[jasongrout]

(perhaps the striping should be with --jp-layout-color1 instead of --jp-layout-color0)

[cdeil]

@jasongrout - Thanks for having a look!

What does it mean? Will something be changed to fix this on the JupyterLab side, or is a fix in the numba repo needed?

I see there's CSS with a comment "override JupyterLab style" here:

numba/numba/pretty_annotate.py

Lines 100 to 117 in 4214708

	/* override JupyterLab style */
	.annotation_table td {
	text-align: left;
	background-color: transparent;
	padding: 1px;
	}
	.annotation_table tbody tr:nth-child(even) {
	background: white;
	}
	.annotation_table code
	{
	background-color: transparent;
	white-space: normal;
	}
	/* End override JupyterLab style */

[jasongrout]

Will something be changed to fix this on the JupyterLab side, or is a fix in the numba repo needed?

Good question. It's not clear to me which should change to make the annotation table css have higher precedence. I mean, in general we'd like to not cause users work, but custom css relies heavily on the dom and css structure, and that's not something we preserved from the classic notebook (and never really was a public api for users).

It's probably easiest to make the change in numba, as in there are far fewer moving parts that are all interconnected. It's not very clear if we change jlab to have less specific css for those tables how those changes will ripple through the jlab styling.

[jasongrout]

If you wanted to make sure your styling took precedence, you could hardcode style attributes in the tr and td elements. Those take precedence over the <style> tags you are embedding.

[esc]

@cdeil hi! It has been over a year since the last activity on this ticket and I was wondering if this issue is perhaps resolved by now? Or perhaps you managed to discover a workaround?

[guilhermeleobas]

Hi all, I can still reproduce the error using latest Numba and Jupyterlab.