The "Basic demo" done in React doesn't work.

[SukantGujar]

Hi,

I have created a very simple React app here which is basically a (visjs setup-wise) clone of the Basic demo available on visjs documentation site.

However for some reason, the items are not displayed in the React app. I compared the DOM and noticed that there are differences in the vis-group and vis-content nodes - Both are empty in the React app while they contain child nodes in the demo page.

The "Basic demo" looks like this -

And the React test app looks like this -

Any ideas?

I created this small app as a testbed to isolate rendering issues we faced while integrating react-visjs-timeline component in a larger React app.

Note that both the React app and the Basic demo use the same version of visjs library (4.18.0).

Thanks

[SukantGujar]

After noticing the PR to lockdown vis version to 4.16.1, I ran the code again after downgrading from 4.18.0 to 4.16.1. Now the React app renders like this -

And there's an error in console -

[SukantGujar]

Would appreciate if @willmcclellan or any other contributors can take a look. Thanks.

[SukantGujar]

@jonathanchrisp or @crewmoss , could you please respond? Thanks.

[mx781]

It seems that a recent PR merge seems to have broken my code as well. Not sure if it is related to the version lockdown, but I suggest trying if a previous version (e.g. 1.2.0) works for you while this is being investigated.

npm remove react-visjs-timeline
npm install react-visjs-timeline@1.2.0

Update: my guess it's related to no groups being passed. Created a PR to fix this: #10

[jwarykowski]

@SukantGujar - apologies for the delay in getting back to you. After checking the steps that @mx781 has covered it does appear that if there are no groups (even though a vis.DataSet instance is passed into the timeline) the error occurs. The most recent update only added vis as a peer dependency so a user could use any version of vis.

I believe this issue has always existed but has only been brought to light recently. I've checked @mx781 PR #10 and raised a few comments and can't see why this couldn't be merged once ready. I'll speak to @willmcclellan tomorrow just to make sure we're happy with the changes.

[jwarykowski]

@yotamberk / @mojoaxel - just thinking is there any reason why the vis package doesn't handle this potential issue? I can see from your latest documentation that you clearly state to not pass groups when not using them, e.g.

var timeline = new vis.Timeline(container, items, options);

I imagine this is quite rare but wondered what your thoughts on this would be... ❓

[jwarykowski]

@SukantGujar / @mx781 just to note after some further research this issue doesn't appear when using vis version 4.18.0 (so this must have been refactored to handle this issue potentially). However, this does cause the same problem with 4.17.0. So the quick fix for your own project would be to upgrade if you can.

[SukantGujar]

Thanks for taking it up guys. @JonathanCrisp, I first reported this issue for 4.18.0, then downgraded the lib to 4.16.1 and it still occurred. I will recheck once I can though.

[mojoaxel]

Issue almende/vis#2585 is already fix and awaiting release.

[andrew-c-tran]

This still appears to be broken correct? 1.3.1 with any version of vis appears to not render any events. Tested with 4.16.0, 4.16.1, 4.18.1

[jwarykowski]

@andrew-c-tran were you testing with @SukantGujar test repo?

[phil-kt]

I am also not rendering any events, vis 4.19.1 and vis-react-timeline 1.3.1

[prabuvenkat]

I tried with 1.3.1 and also after downgrading to 1.2.0. Same result.

However, I notice that when I specify type: 'background', the boxes appear. but not for anything else.

Nor do selectable and editable have any effect. In essence, I am able to render a static box with no interactions.

[prabuvenkat]

Events are not working here too. When I double-click on a block I see this error: Error: Property "end" missing in item 5f5e5e6a-f977-45a8-bdcd-bc50c543f16c, in spite of providing the end field in both data items.

[jwarykowski]

@prabuvenkat thanks for updating the issue, we'll try and take a look this week.

[phil-kt]

Any updates?

[bkeating]

type: 'box' is showing up for me with the following versions:

"react-visjs-timeline": "1.2.0",
"vis": "4.19.1"