Integrating and updating data with "non reactive" external library


I’ve been trying to develop an app that uses vis.js. It is a javascript library for creating timelines, and other interactive visualizations. Some of the things you can make with it are similar to d3.js however, for my purposes, the timeline functionality from vis.js is powerful and quite what I need.

My backend was done with node/express, before I learnt Meteor, but now I really want to rebuild everything with Meteor. It’s simpler, faster, just plain fun.

This demo page shows the timeline, were you have direct manipulation of the data (click, drag, resize, reposition). When you modify things, a callback is triggered. In my current setup, every mod changes an object where I hold all the info for my timeline, and thus I have to manually “save” if I want to retain changes.

So, here are some general questions to be enlightened by your developer experience and wit!!

  • Is it possible to integrate something like this into Meteor?
  • Does having zillions of callbacks triggered go against the DDP idea?
  • Updating the db on each callback would save the whole object every time and would that make sense, instead just granular bit sized changes?
  • The library isn’t reactive, so for some of the changes in the data I would have to trigger a render method, and with my inexperience developing apps, I see that might be an issue.

One of the issues I faced while starting to test this, is that the JS tried to render the timeline before I could get all the data. So I just came across a onRendered() method in Meteor, where maybe I can also call the library’s own render method so I’ll be sure the data was already present?

Instead of giving you the ready to use code, I lay out the things for you that you need to learn in order to solve your problem.

Then you can combine those three things to render the visualization when your data is available.

Thanks! that’s the kind of pointer I needed
I guess I have to dive into the docs more often :smile: