CODEWITHSUNDEEP
javascriptvue.jsperformancewebdatarocks
Jamshid
Jamshid

Reputation: 1

WebDataRocks setReport Blocking Main Thread with Large Datasets

I'm using WebDataRocks in my Vue 3 project to handle large datasets. My implementation works fine with smaller datasets, but when the data size increases, the setReport method blocks the main thread, causing performance issues. Here is a simplified version of my code:

<template>
  <div>
    <webdatarocks ref="pivot"></webdatarocks>
  </div>
</template>

<script>
import WebDataRocks from "webdatarocks";

export default {
  props: {
    dataSource: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    this.$refs.pivot.webdatarocks.on("reportcomplete", () => {
      this.$refs.pivot.webdatarocks.off("reportcomplete");
      this.$refs.pivot.webdatarocks.setReport(this.report);
    });
  },
  watch: {
    dataSource: {
      handler(newValue) {
        this.setReport();
      },
      deep: true,
    },
  },
  methods: {
    setReport() {
      const report = {
        dataSource: {
          data: this.dataSource,
        },
      };
      this.$refs.pivot.webdatarocks.setReport(report);
    },
  },
};
</script>

Questions: How can I prevent setReport from blocking the main thread when dealing with large datasets? Are there any recommended practices or alternative approaches to handle large datasets efficiently in WebDataRocks? Additional Information: Vue.js version: 3.x WebDataRocks version: last version Operating System: Windows 10 Browser: last version

I tried the following approaches to prevent setReport from blocking the main thread:

import { debounce } from 'lodash';

methods: {
  setReport: debounce(function () {
    const report = {
      dataSource: {
        data: this.dataSource,
      },
    };
    this.$refs.pivot.webdatarocks.setReport(report);
  }, 300),
},

Upvotes: 0

Views: 65

Answers (1)

Maxym Diachenko
Maxym Diachenko

Reputation: 21

On the WebDataRocks website, they state that the data limit for the component is 1 MB. Theoretically, such an amount of data should not cause performance issues. However, if the Vue watcher receives too many updates simultaneously or runs recursively, the page can freeze due to many setReport calls. You can print some debug messages into the console inside the methods.setReport function to check this hypothesis. If this is the case, either fix the recursive calls or reduce the number of times the report is reset.

Upvotes: 0

Related Questions