clickToUse error?

[mgobishop]

Hi - I'm using v5.4.1. I'm using timeline and network in the same UI. When I set clickToUse to true I get the following error on first click... Any ideas? Thanks.

bundle.js:91678 Uncaught TypeError: e.stopPropagation is not a function
    at no._onTapOverlay (bundle.js:91678)
    at le.emit (bundle.js:91708)
    at re.emit (bundle.js:91708)
    at re.tryEmit (bundle.js:91708)
    at recognize (bundle.js:91708)
    at le.recognize (bundle.js:91708)
    at F.C [as callback] (bundle.js:91708)
    at F.handler (bundle.js:91708)
    at domHandler (bundle.js:91708)
no._onTapOverlay @ bundle.js:91678
emit @ bundle.js:91708
emit @ bundle.js:91708
tryEmit @ bundle.js:91708
recognize @ bundle.js:91708
recognize @ bundle.js:91708
C @ bundle.js:91708
handler @ bundle.js:91708
domHandler @ bundle.js:91708
bundle.js:91678 Uncaught TypeError: e.stopPropagation is not a function
    at Array.<anonymous> (bundle.js:91678)
    at le.emit (bundle.js:91708)
    at ie.emit (bundle.js:91708)
    at ie.tryEmit (bundle.js:91708)
    at ie.<anonymous> (bundle.js:91708)
    at bundle.js:91708

[Thomaash]

Hi @mgobishop,

I'm sorry but without an MWE I have absolutely no idea what's going on.

[r3code]

@mgobishop provide an example, actions how to reproduce it.

[mgobishop]

I'm still investigating... I'm finding it hard to track down the cause but the error is thrown in this code... Any suggestions?

Activator.prototype._onTapOverlay = function (event) {
// activate the container
this.activate();
event.stopPropagation();
};

[mgobishop]

I have multiple visjs components (timeline, graph and network) on the same page i.e. multiple vis-overlay divs. Could it be something to do with that?

[Thomaash]

Definitely, that's broken at the moment see #85. At the moment it is best to just use vis-charts as it works these issues around by building everything from sources.

[Thomaash]

With timeline and network in the same page I can't get them to work at all. Whichever is loaded last works and the other either does nothing or throws errors.

[mgobishop]

Great thanks. I commented out the vis-timeline css and html and I now don't get the error on the network. However, clickToUse seems to be not happening even though I set it as true. I made a little network html page standalone and it doesn't work there either... it only works when I include vis-timeline... Am I doing something wrong?

var options = {
	layout:{ 
		randomSeed: 2
	},
	physics: {
		enabled: true,
		barnesHut: {
			avoidOverlap: 1,
			gravitationalConstant: -10000,
			damping: 0.5,
		}
	},
	autoResize: true,
	height: "100%",
	width: "100%",
	clickToUse: true,
	interaction: {
		navigationButtons: false,
		zoomView: true
	}
};

[mgobishop]

I'm using vuejs as a front-end framework and everything has been fine other than this. Each visjs component is handled by it's own vuejs component so maybe that's why it has been working for me. I'm guessing the problem is because there are multiple elements in the dom with the same id?

[Thomaash]

The fact that you bundle it makes a huge difference. Things are a bit broken when bundling but as long as you don't import DataSet from timeline and try to use it in network or something like that, everything should work just fine. Using vis-charts shouldn't make much of a difference here except that vis-charts is a bit outdated (it provides network 5.2.4).

[Thomaash]

Click to use indeed seems broken: https://jsfiddle.net/thomaash/2dr8hLy7/.

I don't get any errors though.

[mgobishop]

Correct. So for me... 1) clickToUse isn't working in vis-network - it doesn't throw an error 2) I get an e.stopPropogation error when setting clickToUse to true on a vis-network when it's bundled with vis-timeline.

I'm guessing that if clickToUse is fixed then it might all start working again :-)

[whme]

With timeline and network in the same page I can't get them to work at all. Whichever is loaded last works and the other either does nothing or throws errors.

If the goal is to use both timeline and network on the same page, this can be achieved by using vuejs and splitting timeline and network in 2 different vue components. It then works perfectly fine.

[mgobishop]

Hi. Yes it does, it's great! UNLESS, as far as I can see when using the latest version of vis-network, you set both to be clickToUse:true. Then I get the error described above.

[whme]

when using the latest version of vis-network, you set both to be clickToUse:true. Then I get the error described above.

You are right. So something broke between the current version and the one before ^^

[whme]

Hi @Thomaash thank you for fixing it!
Can you update https://raw.githack.com/Thomaash/vis-network/issues/4/dist/vis-network.js to include the fix? (Or post a new one including the fix) So we can use it?

[Thomaash]

Hi @UnicornDeluxe and anyone else who's interested,

until @mojoaxel reviews #77 and #132 you can get fix for both from https://github.com/Thomaash/vis-network/tree/issues/4and121 trough GitHack for example https://rawcdn.githack.com/Thomaash/vis-network/issues/4and121/dist/vis-network.js.

[vis-bot]

🎉 This issue has been resolved in version 6.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀