Configurable Filter Debounce and Filter Form Submit Button

[moxesh-kombee]

I have been using Livewire PowerGrid extensively and have a few suggestions that could help improve its functionality and performance.

1. Configurable Filter Debounce

Currently, the filter debounce is hardcoded in the vendor files, specifically in:

vendor/power-components/livewire-powergrid/src/Components/Filters/FilterInputText.php:

public static function getWireAttributes(string $field, string $title): array
{
    return collect()
        ->put('selectAttributes', new ComponentAttributeBag([
            'wire:model'                     => 'filters.input_text_options.' . $field,
            'wire:input.live.debounce.600ms' => 'filterInputTextOptions(\'' . $field . '\', $event.target.value, \'' . $title . '\')',
        ]))
        ->put('inputAttributes', new ComponentAttributeBag([
            'wire:model'                     => 'filters.input_text.' . $field,
            'wire:input.live.debounce.600ms' => 'filterInputText(\'' . $field . '\', $event.target.value, \'' . $title . '\')',
        ]))
        ->toArray();
}

This hardcoding can lead to performance issues, especially when the debounce time is too short, causing multiple API calls and database queries in a short period. This is particularly problematic when users are typing quickly.

Suggestion:

Make the debounce timing configurable via config/livewire-powergrid.php to provide developers with the flexibility to set debounce times that suit their application's needs.

2. Submit Button for Filters Form

The current implementation automatically triggers API calls as the user types in the filter input. This can result in unnecessary API calls and database queries, especially with a short debounce time.

Suggestion:

Introduce an option to add a submit button to the filter form. This way, the API call is only made when the user clicks the submit button after typing their filter query. This change would significantly reduce the number of API calls and improve performance.

Additionally, if I have six columns and there are six filter inputs, filtering on multiple columns simultaneously can cause a significant load due to multiple API calls. Having a submit button would be very helpful in decreasing this load by consolidating the API calls.

3. Optimizing Count Query

The current count query uses the wildcard (*) to select all fields, which can be inefficient and slow, especially with large datasets.

Suggestion:
Modify the count query to select a specific column (e.g., id) instead of using *. This small change can enhance the performance of the count query, reducing the load on the database.

Current Situation:
In my application, when a user types a mobile number in the filter input, three Livewire requests are triggered due to the 600ms debounce. This results in six database queries (three count queries and three detail queries) instead of just two (one count and one detail), significantly increasing the database load.

Since the debounce code is in the vendor directory, I'm unable to modify it directly. Therefore, having these debounce times configurable and the option for a submit button would be immensely beneficial.

Conclusion
Implementing these suggestions would provide developers with greater control over the filter functionality and improve overall performance. I hope you consider these enhancements for future releases of Livewire PowerGrid.

Thank you for your time and consideration.

[edwinheij]

Is there a work around for this right now?

[luanfreitasdev]

I'm looking into this. One solution would be to put it in the config file. Do you have any other ideas?

[luanfreitasdev]

#1890