t.showInfoSpan is showing text BELOW everything rather than next to cursor position (in a particular setup)

[sammyjava]

This is probably a general canvasXpress question but since I'm using canvasxpress-react I'll put it here. I'd like to take advantage of the info div that appears when you mouse over a point on a Manhattan scatter plot, but it doesn't appear in the browser dev inspector during rollover. I presume it's a div that appears and vanishes. What is its id? Example below.

[sammyjava]

@neuhausi any ideas on this? I'm trying to implement the event handling that I have in the plain vanilla cx implementation, but in React it always just shows the default data below the canvas. I have figured out how to grab the graph reference (using the onRef prop) - maybe I should use that in some way??

[neuhausi]

Hi Sam, Sorry I didn't see this before. Can you share some code? Would be great if you can put it in the repo you shared before. Isaac

[sammyjava]

No prob, and in fact when I try to reproduce it in that basic example, t.showInfoSpan shows in the correct place (as well as the default if I don't supply events) so I guess it's some funkiness with the divs in the production case I'm running. I'll close this and if I can reproduce it in a sensible way I'll reopen it.

[sammyjava]

Hi, Isaac, I'm reopening this as food for thought, since I've spent quite some time trying to debug it. I can't really see any difference in the CSS between my sample case that works fine and the production case that has the problem.

I believe that the main issue is that t.showInfoSpan for some reason shows the text below the entire canvas (and even outside its containing div) rather than next to the cursor position, which it does normally. I've tested that the cursor position is given correctly with e.clientX and e.clientY (by having t.showInfoSpan display those). I've tried various div display attributes (and found I have to use display: absolute in the containing div to fix a mouseover rendering issue). Nothing seems to get t.showInfoSpan to display next to the cursor rather than below everything.

I realize this is probably an edge case, but if you have any hints on where to look, let me know. It's very frustrating since I just finished implementing my CanvasXpress displayers in this newer framework (InterMine Bluegenes) but the mouseover data display function is kind of important.

I appreciate any tips!

[sammyjava]

If you're terribly curious, here's the repo that generates the problem: https://github.com/legumeinfo/lis-expression-barchart.git in the canvasxpress branch.

$ git checkout canvasxpress
$ npm i
$ npm run dev

then view localhost:3456 and mouse over one of the bars in the bar chart. You'll need to be online since this dynamically sucks data from an online resource.

[neuhausi]

I don't think that repo uses CanvasXpress

[sammyjava]

Yeah it does. You have to check out the canvasxpress branch, as I said. :)

shokin@morangie:~/bluegenes/tools/legumeinfo/lis-expression-barchart$ git status
On branch canvasxpress
Your branch is up to date with 'origin/canvasxpress'.

shokin@morangie:~/bluegenes/tools/legumeinfo/lis-expression-barchart$ grep canvasxpress package.json 
    "canvasxpress": "^41.3.4",
    "canvasxpress-react": "^41.3.4"

shokin@morangie:~/bluegenes/tools/legumeinfo/lis-expression-barchart$ grep Canvas src/RootContainer.js 
import CanvasXpressReact from 'canvasxpress-react';
        "colorScheme": "CanvasXpress",
                <CanvasXpressReact target={"canvas"} data={data} config={conf} events={evts} height={800} width={1150} onRef={onRef} />

But again, only if you've got an idea on a place for me to look, maybe you've got some browser developer mode secret sauce to reveal what's broken.