Selected element disappear when navigator zoom level isn't 100%

[chb-dlght]

🐛 Bug report

I notice that when my navigator zoom level isn't at 100%, any graphs selection at the first click disappear

Steps to Reproduce

1. Change zoom level
2. Click on a graph to select something
3. No more selection

Expected behavior

Keep the selection at any zoom level

Actual behavior

Enregistrement.de.l.ecran.2024-09-12.a.18.43.09.mov

Versions

• nebula.js: 5.3
• Platform: MacOS / Window
• Browser: Opera / Chrome / Firefox

[Caele]

We are not sure exactly whats wrong, the video isn't entirely clear. Tried a few things with browser zoom but haven't been able to reproduce this, please provide an example

[chb-dlght]

Sorry if I wasn't clear.

In the video:

1. from 0 to 6 seconds :

• I'm a navigator zoom level 100 %
• I do a selection on the graph and I have a black border around my selected bar with the others who are almost transparent.
• This is what I expect, so cool.

2. from 6s to 13s:

• I've changed the navigator zoom level to 110%
• I do the same selection on the graph, but the black border disappear an all bars are almost transparent.
• Even the filter is applied at the bottom of my page, it's seem to not be selected in the graph. That's the point.

3. from 13s to 18s

• I've changed the navigator zoom level to 100 % again, and everything works like I expected.

4. from 18s to the end

• I've changed the navigator zoom level to 90%
• Same visual problem, my bar in chart seems to not be selected.

So I can deduce that the expected behavior of the selected chart works only at zoom level 100%.

But some of ours customers (and maybe not just ours) doesn't work that way. They increase or decrease zoom level. They are confused when they click on a bar who doesn't seem to be selected

I hope this is more clear and helpful.

[Caele]

I tried it in a simple setup, can't really replicate the issue. From your video it seems like it flickers in first, but to dissapear quickly. Could there be some other click event used in the mashup that fails to align as zoom is applied?

[chb-dlght]

There is no click event to interfere, sorry.
But you right, it flickers, and we provide a hack to avoid it in our code.
We have added a MutationObserver on the chart to get the #actions-toolbar height and set a margin-top with negative value this height.
It seems we have to do this because the Promise is resolved before the graphic is fully rendered.

I hope it's help. Thanks.

[Caele]

Can you elaborate a bit on It seems we have to do this because the Promise is resolved before the graphic is fully rendered. and why you need that? I would guess that your observer changes the size of the chart, causing it to re-render and mess with the selections.

The const viz = await emebed.render(..) Promise doesn't actually resovle when the chart is done, it resolves when it is mounted and returns the Viz API. But there are ways to get a correct render done callback:

We recently simplified this in the latest release, but its possible in older versions as well:
Post 5.8.1:

  const viz = await emebed.render({
    element: chartRef.current,
    //id: objectId,
    type: 'barchart',
    fields: ['[10k Five Length Dimension]', '=rand()'],
    onRender:: () => {
        // do whatever is needed when rendering is done
      },    
})

Pre-5.8.1:

  const viz = await emebed.render({
    element: chartRef.current,
    //id: objectId,
    type: 'barchart',
    fields: ['[10k Five Length Dimension]', '=rand()'],
    options: {
      onInitialRender: () => {
        // do whatever is needed when rendering is done
      },
    }
})