Highcharts stocks rendering issues in demo and selfhosted

[R2boot3r]

Dear,

I've been playing around a bit with highcharts for python and the demos available.
I'm currently having two issues with the demos and the selfhosted jupyterlab version i'm running locally. Everything is exactly the same except the python3 version I'm running on. I'm on python 3.10.13. I've tried it on python 3.11 and I have the exact same issues. I'll try reverting back to 3.10.10 later in the day to test things out. The demo used here is the following stock-tools-gui.ipynb but I have had the issue on any other demo or own notebook that i created.

The first issue I'm having is that I'm not able to render the chart context menu that is on the top right of the charts in my own selfhost version of the demo repository. On the Binder projects

The second issue I'm having is, the stocktools is not rendering in the binder version but it is on my selfthosted one but very badly. The bar is halfly rendered and the buttons doesn't seem to respond correctly. For instance I'm not able to put the charts in full screen. This issue happens on any screen sizes , even very large ones. Of course I have the following options enabled:

'stockTools': {
'gui': {
'enabled': True
}

Here are two screenshots illustrating the two issues.

Binder demo without the stocktools and with the chart context menu:

My selfhosted demo with the badly rendered stocktools and with the chart context menu missing:

I don't know if I'm missing anything, but it doesn't to be the case according to what i have read in the documentation.

Thanks in advance for any response,
KR,
R2boot3r

[hcpchris]

Hi @R2boot3r - Thanks for the question, and I'm sorry you're having some trouble!

So things "not appearing" (like the Stock Tools or the Context Menu not appearing) when running inside a Binder may be a network connectivity issue tied to delaying / downloading some of the Highcharts (JS) issues. That's unfortunately an issue that arises sometimes when running the demos in a Binder. However, the fact that you are having trouble in the self-hosted context as well suggests that there are other things going on.

Several questions to make sure I'm correctly understanding the behavior that you are seeing, and some more diagnostic questions that may help me reproduce the issue in my environment. I'll split it up into two separate topics:

General Question
I am assuming you are running the demos "as-is", i.e. no modifications to the Python code, the options configured for the chart, etc.? Or have you introduced any modifications into the chart options / configuration?

Context Menu Issue

1. Do I understand correctly that the context menu is not rendering? The "hamburger icon" renders, as in your screenshot, but when you click that icon the context menu does not appear? Is this happening only when run in a Binder, or does it also happen when run locally?
2. Does this only happen when using Stock Tools, or does it happen when not using Stock Tools also?

Stock Tools Issue
This looks to be likely a rendering issue. Can you share two pieces of information: what is your screen resolution? And presumably you are leaving the Notebook pane size at its default, or are you adjusting the notebook pane size in any way? (I'm trying to get a sense of the rendering resolution and pixel width of the rendering area in your environment, as that may impact Highcharts JS responsive design)

[R2boot3r]

Hi @hcpchris,
Thanks for your quick response.

Here are my answers to your questions:

General Question
Yes i'm running the demo "as-is" with no modification to any of the code whether it is the options of configurations of the charts or any other things.

Context Menu Issue

1. There is simply no "hamburger icon" and not even the option to click on it as it is not present. The charts are also slightly more to the right then the ones rendered on binder. This issue only happens on my local instance. On Binder it does work correctly
2. I've tried it out on other charts such as highcharts-core/basic-line or highcharts-core/time-with-intervals or even highcharts-map/heatmap-charts and i get the same result.

Stock Tools Issue:
For the screen resolution I've tried on both 1920x1080p and 2560x1080p and it doesn't change anything. I've used the default notebook pane size, but i've tried several different sizes and it is just the same from the minial size to the maximun one possible.

If you need anything else don't hesitate to ask.
I could potentially make a few videos if needed.

Thanks

[R2boot3r]

Ok I've got some more information for you concerning the Context Menu Issue:

I was randomly trying it on a different tab and it renders in one tab but not the other. It doesn't want to render in the first one but randomly does on the second one. also I've tried on firefox and chrome and I have the samekind of behavior where the context menu randomly shows up.

Edit: I've tried a bit more afterwards and now it simply does not want to render anymore on any tabs or browser ^^

[hcpchris]

Awesome - thank you for this additional context / feedback. The weirdness with it rendering sometimes and not rendering other times is very strange.

Would you be able to open your browser's Developer Tools and look at the "Sources" tab and share a list of the modules that are loaded from highcharts.com? I'd like to rule out that the issue has to do with the loading of Highcharts (JS) modules into your browser window / context, so it would be helpful to double-check which modules are loaded / available. You should be able to open Developer Tools from your browser's menu, and then navigate to the "Sources" tab or section in the panel that opens.

[R2boot3r]

Anything more precise you would like me to provide you then the following ?

[hcpchris]

Nope - that provides plenty of info, thank you. Let me take a deeper dive into this and see if I can reproduce the behavior. The fact that the context menu shows up "sometimes" is the strangest part, because I'm trying to determine what might cause it to only appear some of the time.

Just to recap, there's no pattern that you see which causes the context menu to appear / not appear - just sometimes it appears, and sometimes it does not appear?

[R2boot3r]

No i haven't notice any pattern. The only thing I would say is that it fails to appear way more then it appears. I've tried a lot of times and only got to render it around 3 times. At first I thought it might be appearing more with fresh windows but haven't been succesfull after the previous message to make it appear further times.

I'll try to see If i manage to find any pattern

[hcpchris]

Okay, thanks - let me see if I can recreate this behavior / identify a pattern for the context menu issue.

In the meantime, I'll also be looking into the rendering issue on the Stock Tools UI as well, though there I've got a suspicion as to what is happening and I should have enough details to re-create the behavior (and then diagnose it).

Hopefully I'll have some feedback for you soon.

[R2boot3r]

Thanks a lot Chris !
If I see anything else on my side I'll provide it to you

[R2boot3r]

Hello @hcpchris wanted to know if you had been able to find the cause of the issue is coming from. I've checked the lastest push and updates to the stocks repository I didn't anything in relation to those issues. I also tried with all the latest verions and i still get the exact same behaviour.

Thanks in advance,
R2boot3r

[hcpchris]

Hi @R2boot3r : Unfortunately, no updates on this front yet. I'm having difficulty getting the behavior you are reproducing (either on the context menu issue or the stock tools issue) to reproduce reliably. The stock tools issue has happened a couple of times to me in my testing, but it was typically a panel size issue which you have said doesn't seem to be driving the behavior that you are seeing.

In general, I have not been able to isolate a pattern or determine what was behaving differently every time I have tried it. One more thing that might help: Can you share the output you get for pip list to list out the libraries that are in your self hosted environment? It's a long shot at this point, but it may be some very atypical version conflict somewhere with something, because the inconsistency of this is producing a real head scratcher.

[R2boot3r]

Hello @hcpchris,
This is really strange as I have tried very different scenario possible, older Jupyter lab releases, older highcharts stock releases, on the different with navigators, resinstalling everything from scratch etc etc;

One thing I can point out also but that might be a total different problem but when I specify options or modify them they are taken into account sporadically.

Also if it is okay for you I would like to reopen this issue in the actual library github and not here in the demo one. I know you are the person responsible for that to but maybeother people might be experiencing it to and could have more insights.

I can also propose you have some time to check it on my system. I really don't think it is something I'm doing not correctly on my side since even with the demos this behaviour happens. I can share you access to a live Jupyter Lab environenement running on a rasp that has the exact issues I'm experiencing.

The work you've done here is so amazing porting the library to Jupyter Lab. Getting those few bugs fixed will make it the best charting python library :)

And thanks again for taking the time chris

Here is one of the dependencies list i can produce:

aiosqlite 0.19.0
anyio 4.0.0
argon2-cffi 23.1.0
argon2-cffi-bindings 21.2.0
arrow 1.3.0
asttokens 2.4.1
async-lru 2.0.4
attrs 23.1.0
Babel 2.13.1
beautifulsoup4 4.12.2
bleach 6.1.0
certifi 2023.11.17
cffi 1.16.0
charset-normalizer 3.3.2
comm 0.2.0
contourpy 1.2.0
cycler 0.12.1
debugpy 1.8.0
decorator 5.1.1
defusedxml 0.7.1
entrypoints 0.4
esprima 4.0.1
executing 2.0.1
fake-useragent 1.3.0
fastjsonschema 2.19.0
fonttools 4.44.3
fqdn 1.5.1
h11 0.14.0
hide-code 0.7.0
highcharts-core 1.5.1
highcharts-stock 1.5.0
httpcore 1.0.2
httpx 0.25.1
idna 3.4
ipykernel 6.26.0
ipython 8.17.2
ipython-genutils 0.2.0
ipyvue 1.10.1
ipyvuetify 1.8.10
ipywidgets 8.1.1
isoduration 20.11.0
jedi 0.19.1
Jinja2 3.1.2
json5 0.9.14
jsonpointer 2.4
jsonschema 4.20.0
jsonschema-specifications 2023.11.1
jupyter 1.0.0
jupyter_client 7.4.9
jupyter-console 6.6.3
jupyter_core 5.5.0
jupyter-events 0.9.0
jupyter-lsp 2.2.0
jupyter_server 2.10.1
jupyter_server_terminals 0.4.4
jupyterlab 4.0.9
jupyterlab-pygments 0.2.2
jupyterlab_server 2.25.2
jupyterlab-widgets 3.0.9
kiwisolver 1.4.5
lab 8.0
loguru 0.7.2
MarkupSafe 2.1.3
matplotlib 3.8.2
matplotlib-inline 0.1.6
mistune 3.0.2
nbclassic 1.0.0
nbclient 0.9.0
nbconvert 7.11.0
nbformat 5.9.2
nest-asyncio 1.5.8
notebook 6.5.6
notebook_shim 0.2.3
numpy 1.26.2
overrides 7.4.0
packaging 23.2
pandas 2.1.3
pandocfilters 1.5.0
parso 0.8.3
pdfkit 1.0.0
pexpect 4.8.0
Pillow 10.1.0
pip 23.0.1
platformdirs 4.0.0
prometheus-client 0.18.0
prompt-toolkit 3.0.41
psutil 5.9.6
ptyprocess 0.7.0
pure-eval 0.2.2
pycparser 2.21
Pygments 2.17.1
pyparsing 3.1.1
python-dateutil 2.8.2
python-json-logger 2.0.7
pytz 2023.3.post1
PyYAML 6.0.1
pyzmq 24.0.1
qtconsole 5.5.1
QtPy 2.4.1
referencing 0.31.0
requests 2.31.0
rfc3339-validator 0.1.4
rfc3986-validator 0.1.1
rpds-py 0.13.0
Send2Trash 1.8.2
setuptools 66.1.1
simplejson 3.19.2
six 1.16.0
sniffio 1.3.0
soupsieve 2.5
stack-data 0.6.3
terminado 0.18.0
tinycss2 1.2.1
tornado 6.3.3
traitlets 5.13.0
twscrape 0.9.0
txt2tags 3.9
types-python-dateutil 2.8.19.14
tzdata 2023.3
uri-template 1.3.0
urllib3 2.1.0
validator-collection 1.5.0
wcwidth 0.2.10
webcolors 1.13
webencodings 0.5.1
websocket-client 1.6.4
wheel 0.38.4
widgetsnbextension 4.0.9

[R2boot3r]

I tried to look a bit more, concerning the stock tools issue.
There seems to be 2 issues :

1: The display of the stock tool gui does not seem correctly displayed in regarders to the chart background containing the chart. Place behind + don't have enough space

2: There seems to be definetly an issue in the event handler and the code execution after the click event is trigger when clicking on the stock tools. None of them end up excuting the code and displaying what was asked. I tried debugging a bit and some functions are triggered but i guess the code doesn't finish correctly. I haven't found any error raised for now but I'm quite a noob in front-end debugging