An exploration of dynamic reactivity at the template level within the Meteor

Question

An exploration of dynamic reactivity at the template level within the Meteor

In my current project, I am facing a challenge where I need to present data in a dashboard both as a chart using the perak:c3 package and as a table using the aslagle:reactive-table package. The issue arises because the data is retrieved from a MongoDB collection in a format that works well with c3 for plotting but needs to be converted into a local collection for use with reactive-table, as mentioned in this previous question's answer.

Whenever I update the dataset to be displayed, I expect both the chart and the table to reflect these changes. However, altering the values in the local collection causes a delay, resulting in a freeze on the page before the updated data is shown.

To easily replicate the problem, I have set up a sample project on GitHub here. By selecting a dataset in your browser, you can experience firsthand what I am describing.

https://i.sstatic.net/BgxTY.png

To observe the desired reactive behavior in the chart, visit client/templates/dashboard/dashboard.html and comment out the table template {{> dashboardTable}}

https://i.sstatic.net/XFdLU.png

Then, switch the dataset to witness how the chart smoothly updates without any freezing. My goal is to ensure that both templates, dashboardChart and dashboardTable, render independently of each other.

UPDATE

After taking Michael Floyd’s advice to introduce a timeout, there was some improvement, observed via the following code snippet:

Meteor.setTimeout(function(){createLocalCollection(data)},200);

However, while the chart redraws smoothly, once the table population completes, the chart undergoes another drawing process. It seems like it transitions to an intermediate state that is unclear to me. A video showcasing this phenomenon can be viewed here.

javascript meteor d3.js meteor-blaze meteor-helper

Answer 1

Answer №1

Here is a different perspective that I wanted to share as a separate answer.

Implement the onRendered callback in d3 to trigger the local collection update.

Instead of just having:

chart = c3.generate({
  bindto: '#dataset-chart',

inside dashboard_chart.js, modify it to include:

chart = c3.generate({
  onrendered: createLocalCollection(),
  bindto: '#dataset-chart',

Remember to remove createLocalCollection(data) from your event handler.

To simplify passing data context through the onrendered handler in d3, update your createLocalCollection function to utilize the reactive variable

datasetID</code defined earlier for identifying the current dataset:</p>

<pre><code>var createLocalCollection = function() {
    var values = My_First_Collection.find({datasetID: datasetID.get()}).fetch();
    var tempDoc = {};
    local.remove({});
    tempDoc = {};
    for (var i in values[0].value) {
      tempDoc.value = values[0].value[i];
      tempDoc.date = values[0].date[i];
      local.insert(tempDoc);
    }
};

This approach allows D3 to signal when chart rendering completes, enabling instant chart updates followed by table population without dealing with timeouts.

Answer 2

Here is a different perspective that I wanted to share as a separate answer.

Implement the onRendered callback in d3 to trigger the local collection update.

Instead of just having:

chart = c3.generate({
  bindto: '#dataset-chart',

inside dashboard_chart.js, modify it to include:

chart = c3.generate({
  onrendered: createLocalCollection(),
  bindto: '#dataset-chart',

Remember to remove createLocalCollection(data) from your event handler.

To simplify passing data context through the onrendered handler in d3, update your createLocalCollection function to utilize the reactive variable

datasetID</code defined earlier for identifying the current dataset:</p>

<pre><code>var createLocalCollection = function() {
    var values = My_First_Collection.find({datasetID: datasetID.get()}).fetch();
    var tempDoc = {};
    local.remove({});
    tempDoc = {};
    for (var i in values[0].value) {
      tempDoc.value = values[0].value[i];
      tempDoc.date = values[0].date[i];
      local.insert(tempDoc);
    }
};

This approach allows D3 to signal when chart rendering completes, enabling instant chart updates followed by table population without dealing with timeouts.

Answer 3

Answer №2

In the world of JavaScript, it's important to remember that it operates on a single thread. This means that tasks will be executed sequentially. To overcome this limitation, consider using defer and delaying the code responsible for updating your local collection with Meteor.setTimeout(). By doing so, you can ensure that the chart updates first before the table is updated. This approach helps avoid situations where rendering functions such as d3 may cause delays in screen updates due to lengthy JavaScript processes.

I personally tested this method and found that it significantly improved the performance of my charts.

Meteor.setTimeout(function(){createLocalCollection(data)},500);

Reducing the delay time to 100 milliseconds allowed the chart to update smoothly, although I encountered an issue where the menu did not fully fade out until the local collection had finished updating.

Another useful tip when dealing with tables and local collections is to update the local collection only when the corresponding non-local document needs to be displayed on the screen. This approach ensures that the reactive table loads lazily, enhancing overall performance.

Answer 4

In the world of JavaScript, it's important to remember that it operates on a single thread. This means that tasks will be executed sequentially. To overcome this limitation, consider using defer and delaying the code responsible for updating your local collection with Meteor.setTimeout(). By doing so, you can ensure that the chart updates first before the table is updated. This approach helps avoid situations where rendering functions such as d3 may cause delays in screen updates due to lengthy JavaScript processes.

I personally tested this method and found that it significantly improved the performance of my charts.

Meteor.setTimeout(function(){createLocalCollection(data)},500);

Reducing the delay time to 100 milliseconds allowed the chart to update smoothly, although I encountered an issue where the menu did not fully fade out until the local collection had finished updating.

Another useful tip when dealing with tables and local collections is to update the local collection only when the corresponding non-local document needs to be displayed on the screen. This approach ensures that the reactive table loads lazily, enhancing overall performance.

An exploration of dynamic reactivity at the template level within the Meteor

UPDATE

Answer №1

Answer №2

Similar questions

Javascript code to eliminate the final appearance of a comma within a span element

Wordpress problem with Bootstrap JavaScript code involving data-toggle="collapse"

Transform Array into JSON using AngularJS

Link to Reply Comment Feature in Wordpress

Storing data in MongoDB using JavaScript on a web platform

"MongoDB fails to save changes when attempting to remove an item from an updated

Troubleshooting: Bootstrap 4 Flexbox demos failing to function

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

Update the color of buttons after being clicked - Bootstrap

Real-world demonstration of multiple screens using three.js for an immersive virtual experience

Transforming a two-digit year into a four-digit year

Exploring different techniques to display images in React JS using mapping or looping?

Selecting items from a list at random using the power of math.random() and math.floor()

Incorporating isotope with the stylish fancybox

Error: The 'document' object is not recognized in this context (React)

Creating promises using the latest Breeze Angular Service: A comprehensive guide

Secure access to an API using a certificate within a Vue.js application running on localhost

The inserted button's click event does not trigger the contentEditable DIV

The combination of Three.js and React

Troubleshooting: WordPress integration with PhoneGap not processing JSON data