Bug in tip mark when using Bootstrap tabs

[Hvass-Labs]

There is a strange bug in the tip mark. I can reproduce it on my web-page but not in a HQ Notebook. I don't know if this is perhaps because I am still using a custom build of v0.6.11 with the brushing feature (which is essential to me).

It doesn't seem to matter which data I am plotting. In the first plot I make, the tip mark is fine. But in the second plot the tip mark doesn't enclose the text. I wonder if perhaps there's a global variable that isn't being reset properly?

This is essentially what I am doing:

function plotTest({plot_id}) {
    // Generate plot.
    var plot = Plot.plot({
        marks: [
            Plot.areaY(data, {x: 'Date', y: 'Value', fill: 'blue', fillOpacity: 0.5}),
            Plot.tip(['foo'], {anchor: 'bottom', frameAnchor: 'bottom'}),
        ]
    });

    // Add plot to web-page.
    var elm = document.getElementById(plot_id);
    if (elm) {
        elm.append(plot);
    }
}

plotTest({plot_id: 'plot1'});
plotTest({plot_id: 'plot2'});

It is quite a hassle to extract this data, and I have the same problem with different data, so it doesn't seem to matter. I appreciate this may be hard for you to debug. If you cannot reproduce this problem, then let me know what you need from me, or what I could try instead.

Thanks!

[Fil]

I've put your code into a web page (almost exactly, just substituting aapl to data and "Close" to "Value"), and it worked perfectly.

So it's probably coming from something else that is in the environment.

[Hvass-Labs]

I just assumed it was a problem with Obs.Plot. I didn't know it was possible for Java-script libraries to interfere with each other like this, before you mentioned it. Then I had to isolate which import was causing the problem and I found out it was the Bootstrap style-sheet, and then I found that it was when plots are inserted into tabs.

It looks like it is an "incompatibility" between Bootstrap and Obs.Plot.

Being able to place plots inside tabs is a crucial feature for me, e.g. one of my web-pages has nearly 20 (!) plots, that are organized in tabs and sub-tabs.

I tried the hack you suggested by adding the plot-object to the DOM using the following code I found on StackOverflow, so my Java-script in the HTML-file from above becomes:

// Add object(s) to DOM. Code from StackOverflow.
function addToDOM(obj) {
    var temp = document.createElement('prop');
    document.body.appendChild(temp);
    for (var p in obj) {
        temp[p] = obj[p];
    }
    obj.myDOMElement = temp;
}

// Plotting code from HTML-file above.
function plotTest({plot_id}) {
    // Generate plot.
    var plot = Plot.plot({
        marks: [
            Plot.areaY(data, {x: 'Date', y: 'Value', fill: 'blue', fillOpacity: 0.5}),
            Plot.tip(['foo'], {anchor: 'bottom', frameAnchor: 'bottom'}),
        ]
    });

    // Add plot to DOM.
    addToDOM(plot);

    // Add plot to web-page.
    var elm = document.getElementById(plot_id);
    if (elm) {
        elm.append(plot);
    }
}

plotTest({plot_id: 'plot_one'});
plotTest({plot_id: 'plot_two'});

This shows the two plots at the bottom of the web-page without any tip-marks at all! And the plots shown inside the tabs still have the problem with the second tip-mark.

I browsed the source-code for the tip-mark, and I noticed a comment that says: "Wait until the plot is inserted into the page so that we can use getBBox to compute the exact text dimensions." So I wonder if this is perhaps interfering with Bootstrap?

[Hvass-Labs]

@Fil what is your problem? You are being rude to me in another post, and you are down-voting this? Would you like me to have a word with your VC funders?

[Fil]

It was not a downvote it's a "no" answer to your question "perhaps interfering with Bootstrap?". As I explained above the issue is that we need to attach the chart to the DOM so that Plot can measure the dimensions of the tooltip. This takes a few milliseconds, so unfortunately you cannot just attach it and detach it immediately.

[Hvass-Labs]

I perceived your comment in another thread to be very rude, and down-votes are generally considered to be a slap in the face - not a "no" answer. I often get the impression that you get annoyed when you have to explain something that you think is trivial. If that is the case, then you shouldn't do user-support. I am trying my best to be polite and constructive. But when I have to ask you 2-3-4 times because you don't give a complete answer the first time, you seem to get annoyed and quite frankly arrogant, and that creates an unpleasant atmosphere. It may be a cultural difference, but it is still unacceptable. In fact, it is a violation of your own Code of Conduct!

But let's try and put that behind us and move forward.

---

Regarding this particular problem, isn't it related to the comment I located in your code?

How exactly would you render the plot, attach it to the DOM, and remove it again? You could e.g. modify the HTML-file I attached above to show how it should be done.

Or perhaps a better solution would be if I hard-code the size of the tip-box? Or would that be unreliable cross-browser? What if I use a mono-space font in the tip?

If those can't work, then perhaps a solution is to first generate the plot when the tab is shown e.g. using IntersectionObserver? Would that work? I've done that for something else, so perhaps I can get it working for this as well.

What would be the best and most elegant way to solve this?

Thanks.

[Hvass-Labs]

@mbostock I just told you that a down-vote is considered a slap in the face, so that must be what you intended with these multiple down-votes.

Let me refer both of you to your own Code of Conduct:

Examples of behavior that contributes to creating a positive environment include:

• Using welcoming and inclusive language
• Being respectful of differing viewpoints and experiences
• Gracefully accepting constructive criticism
• Focusing on what is best for the community
• Showing empathy towards other community members

Do you think you are upholding these principles yourself?