Multiple tableData fetching due to changed watched params

[robbykrlos]

This is a possible improvement.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

We have an implementation where the primary table, has a call to open a second table, just beneath it (same page).
In this implementation the first table, decides, and sets the call for the second table initialization.

In this part, we need to set filters and params, like so:

<enso-table v-if="showSecond"
                    class="box is-paddingless raises-on-hover"
                    ...
                    :filters="secondTableFilters"
                    ...
                    :params="secondTableParams"
                    ....>

Unfortunately, these parameters that are changed one after the other (when the click on the first table is made), are watched:

tables/src/renderless/CoreTable.vue

Lines 192 to 214 in f3f99b5

	watch: {
	filters: {
	handler: 'filterUpdate',
	deep: true,
	},
	internalFilters: {
	handler: 'filterUpdate',
	deep: true,
	},
	intervals: {
	handler: 'filterUpdate',
	deep: true,
	},
	length: 'filterUpdate',
	params: {
	handler: 'filterUpdate',
	deep: true,
	},
	preferences: {
	handler: 'savePreferences',
	deep: true,
	},
	search: 'filterUpdate',

Which calls filterUpdate and ultimately fetch().

This results in a double API call for tableData, which doubles the time and slows the performance.

I'm not sure how you would have this fixed but in my case I used a debounce:

 filterUpdate() {
            _.debounce(function (e) {
                if (this.state.ready) {
                    this.meta.start = 0;
                    this.fetch();
                }
            }, 100);
        },

To wait for any fast changes on watched params.

I did a patch on my side, but if you consider this a change you like, I can PR it.

I hope this helps!
Thanks,

LATER EDIT: My workaround is NOT OK. First, fetch() has already a debounce set:

client/node_modules/@enso-ui/tables/src/renderless/CoreTable.vue

created() {
        this.fetch = debounce(this.fetch, this.template.debounce);
        this.init();
    },

and second of all, the table filters are not triggered anymore. Not yet sure why. I have to manually hit refresh table in order to apply the filters.

I have to revert and try to understand better the issue and how to properly fix it.

I'll keep updating this when I have something.

Any hints are welcomed:)

[robbykrlos]

I understood the issue and it is not related to Enso's implementation.

the double tableData call was made because of our second table compoenentKey update, which generated another initTable - and this initTable was the one calling the second fetch (tableData). It was not a problem of timing (debounce) or watched properties.

I'll close this mistake:)