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

[hcpchris]

Thanks, @R2boot3r , and apologies for the delay circling back: With the Thanksgiving holiday here in the US last week, I'm afraid I'm still getting caught up. However, the detailed environment list you shared will help me re-create your exact environment and continue my tests. Give me a day or two to recreate that environment and run some tests to see if I can consistently reproduce the behavior you are seeing - if that doesn't work, then could we schedule a screenshare to try and do a bit more hands-on debugging in your environment? I'll keep you posted here on my progress in the coming day or two.

[R2boot3r]

Hey Chris,

No worries holidays are important, hope you had some good rest time. Take your time on the matter. just wanted to bring it back up because it really doesn't seem to be coming from my side so i guess more people will experience it. But I hope i'm not waisting to much of your time.

Yeah definitly I'd be happy to have the call and debug with you in my environement. I can also share it to you beforehand if you'd like. As you prefer.

Thanks for all your time chris. have a good rest of day

[R2boot3r]

Hey @hcpchris , Happy new year and hope you had some good vacations. I wanted to come back to you and ask you if you were able to identify anything and if not if you would have some time for us to debug the issue :) I should be able to make myself fairly available.

Thanks and have a good day

[R2boot3r]

Hello @hcpchris I've was playing around with the highcharts options for a bit and I came accross something that could potentially help you solve the issue n°1.

Indeed, the hamburger Icon has never reappeared since It randomnly appeared on the 6th of september (I've must have displayed thousands of chart since this fall) except for tonight.

I was playing with the exporting options to add and button to the top left and it made the hamburger button reapper. Here is a screenshot :

once it has appeared it will stay there even though the exporting options is removed.

To keep things simple I have used the tutorial stock-gui notebook.

Here are the options:

options = { 'yAxis': [{ 'labels': { 'align': 'left' }, 'height': '80%', 'resize': { 'enabled': True } }, { 'labels': { 'align': 'left' }, 'top': '80%', 'height': '20%', 'offset': 0 }], 'tooltip': { 'shape': 'rect', 'headerShape': 'callout', 'borderWidth': 0, 'shadow': False, 'positioner': """function (width, height, point) { var chart = this.chart, position;

        `if (point.isHeader) {
            position = {
                x: Math.max(
                    // Left side limit
                    chart.plotLeft,
                    Math.min(
                        point.plotX + chart.plotLeft - width / 2,
                        // Right side limit
                        chart.chartWidth - width - chart.marginRight
                    )
                ),
                y: point.plotY
            };
        } else {
            position = {
                x: point.series.chart.plotLeft,
                y: point.series.yAxis.top - chart.plotTop
            };
        }

        return position;
    }"""
},

'responsive': {
    'rules': [{
        'condition': {
            'maxWidth': 800
        },
        'chartOptions': {
            'rangeSelector': {
                'inputEnabled': False
            }
        }
    }]
},
'chart': {
        'zoomType': 'y',
        'height':900,

    },

'stockTools': {
    'gui': {
        'enabled': True
    }
},
'exporting': {
  'buttons': {
    'customButton': {
      'text': 'Button',
      'onclick': '''function() {
        alert('You pressed the button!');
      }'''
    }
  }
}

}`

I tried before forcing the button to appear with: 'navigation': { 'buttonOptions': { 'enabled': True } } But this has not made the button appear only adding the exporting button even without the navigation option makes the hamburger appear.

I'll provide additional details tomorrow on how I can reset so it doesn't appear anymore.

This looks really more like something is not loading corectly. As before I have the exact same behaviour wether in on safari, chrome, firefox and if I have different version of jupyter lab, python, operating system and any other variable I have tried. I really don't see how I could be the only one experiencing this set of issues given that I have tried so many setups and experience the same bug. I really think it would be a good idea to move this to the main repository I'm sure other people will experience it. Hoping to get this sorted out with you @hcpchris :)

Thanks !

[BFAGIT]

Hello @hcpchris , I'm having the same issue on the stock tools gui not doing anythign when any of the buttons are clicked. I tried debugging a bit and it seems the event is correctly triggered, the following is executed ()=>this.eraseActiveButtons(r,n.buttonWrapper)

but then gets stopped at the CreateHTML stack on t=>t.stopPropagation() The normal js highcart continue after this. I haven't been able to see where the issue come from yet.

Hopping to get this fixed.

Thanks