[Bug]: Huge number of views recorded by Debugbar

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.
Did you read the documentation?

Yes, I did not find it.
Have you tried to publish the views?

Yes - I didn't work.
Is there an error in the console?

PowerGrid

3.5
Laravel

9.x
Livewire

2.x
Alpine JS

3.x
Theme

Tailwind 3.x
Describe the bug.

[Bug]: Huge number of views recorded by Debugbar
To Reproduce...

[Bug]: Huge number of views recorded by Debugbar
Extra information

<?php

namespace App\Http\Livewire;

use App\Models\Link;
use App\Models\Country;
use App\Models\Wishlist;
use Illuminate\Support\{Carbon, Collection};
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Blade;
use Illuminate\Database\QueryException;
use Gloudemans\Shoppingcart\Facades\Cart;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Cache;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\Rules\Rule;
use PowerComponents\LivewirePowerGrid\PowerGridEloquent;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;
use PowerComponents\LivewirePowerGrid\{Detail, Header, Footer};
use CountryFlag;

final class CustomerLinksTable extends PowerGridComponent
{
    use ActionButton;

    //Messages informing success/error data is updated.
    public bool $showUpdateMessages = true;
    public string $latest;
    public string $sortField = 'price';

    public string $sortDirection = 'asc';

    /*
    |--------------------------------------------------------------------------
    |  Features Setup
    |--------------------------------------------------------------------------
    | Setup Table's general features
    |
    */
    public function setUp(): array
    {
        $this->persist(['columns', 'filters']);
        return [
            Header::make()
                ->showToggleColumns()
                ->showSearchInput(),
            Footer::make()
                ->showPerPage(50, [50, 100, 200, 500, 1000])
                ->showRecordCount('full'),
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Event listeners
    |--------------------------------------------------------------------------
    | Add custom events to DishesTable
    |
    */
    protected function getListeners(): array
    {
        return array_merge(
            parent::getListeners(),
            [
                'bulkAddCart',
            ]
        );
    }

    /*
    |--------------------------------------------------------------------------
    |  Bulk Delete Button
    |--------------------------------------------------------------------------
    */

    public function bulkAddCart(): void
    {
        if ($this->checkboxValues) {
            set_time_limit(0);
            $links = Link::query()->whereIn('id', $this->checkboxValues)->get();
            foreach ($links as $link) {
                Cart::add(
                    $link->id,
                    $link->site,
                    1,
                    marginCustomerPrice($link->price, $link->currency),
                );
                //reset cart quantity to 1 even after multiple clicks
                Cart::search(function ($cartItem, $rowId) use ($link) {
                    if ($cartItem->id === $link->id) {
                        Cart::update($rowId, 1);
                    };
                });
            }
        } else {
            $this->dispatchBrowserEvent('error', ['message' => '<strong>Please Check At Least One Link</strong> !']);
            return;
        }
        $this->dispatchBrowserEvent('status', [
            'message' => 'Successfully Added <strong>' . count($this->checkboxValues) . '</strong> Links To Cart.  <br> Open Your Cart to Check Them Out.',
        ]);
        //refresh table
        $this->emit('bulk-add-to-cart');
        $this->emit('link-added-to-cart');
        // $this->emit('pg:eventRefresh-default');
    }

    public function header(): array
    {
        return [];
    }

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */

    /**
     * PowerGrid datasource.
     *
     */
    public function datasource(): ?Builder
    {

        if (!empty($this->latest)) {
            return Link::query()
                ->whereShowToCustomers(1)
                ->where('created_at', '>=', Carbon::now()->subDays(7))
                ->with('orders', 'orders.projects')
                ->orderBy('price', 'asc')
                ->groupBy('site');
        }
        return Link::whereShowToCustomers(1)
            ->with('orders', 'orders.projects')
            // ->orderBy('price', 'asc')
            ->groupBy('site');
    }

    /*
    |--------------------------------------------------------------------------
    |  Relationship Search
    |--------------------------------------------------------------------------
    | Configure here relationships to be used by the Search and Table Filters.
    |
    */

    /**
     * Relationship search.
     *
     * @return array<string, array<int, string>>
     */
    public function relationSearch(): array
    {
        return [
            'orders' => [
                'projects' => [
                    'project_name',
                ],
            ],
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    */

    public function addColumns(): PowerGridEloquent
    {
        $cart = Cart::content();
        return PowerGrid::eloquent()
            ->addColumn('is_on_order')
            ->addColumn('add_to_cart', function (Link $model) use ($cart) {
                if (!$cart->where('id', $model->id)->count()) {
                    return '<div class="flex items-center justify-center"><svg wire:click="$emit(\'addToCart\', {link:' . $model->id . '})" width="24" height="24" class="cursor-pointer" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_695_5142)"><path d="M4 16V4H2V2H5C5.26522 2 5.51957 2.10536 5.70711 2.29289C5.89464 2.48043 6 2.73478 6 3V15H18.438L20.438 7H8V5H21.72C21.872 5 22.022 5.03466 22.1586 5.10134C22.2952 5.16801 22.4148 5.26495 22.5083 5.38479C22.6019 5.50462 22.6668 5.6442 22.6983 5.79291C22.7298 5.94162 22.7269 6.09555 22.69 6.243L20.19 16.243C20.1358 16.4592 20.011 16.6512 19.8352 16.7883C19.6595 16.9255 19.4429 17 19.22 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16ZM6 23C5.46957 23 4.96086 22.7893 4.58579 22.4142C4.21071 22.0391 4 21.5304 4 21C4 20.4696 4.21071 19.9609 4.58579 19.5858C4.96086 19.2107 5.46957 19 6 19C6.53043 19 7.03914 19.2107 7.41421 19.5858C7.78929 19.9609 8 20.4696 8 21C8 21.5304 7.78929 22.0391 7.41421 22.4142C7.03914 22.7893 6.53043 23 6 23ZM18 23C17.4696 23 16.9609 22.7893 16.5858 22.4142C16.2107 22.0391 16 21.5304 16 21C16 20.4696 16.2107 19.9609 16.5858 19.5858C16.9609 19.2107 17.4696 19 18 19C18.5304 19 19.0391 19.2107 19.4142 19.5858C19.7893 19.9609 20 20.4696 20 21C20 21.5304 19.7893 22.0391 19.4142 22.4142C19.0391 22.7893 18.5304 23 18 23Z" fill="#2E65F3"/></g><defs><clipPath id="clip0_695_5142"><rect width="24" height="24" fill="white"/></clipPath></defs></svg></div>';
                } else {
                    return '<div class="flex items-center justify-center"><svg class="text-gray-300 cursor-not-allowed" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" /></svg></div>';
                }
            })
            ->addColumn('site', function (Link $model) {
                return '<div class="text-sm font-bold">' . getSiteDropdown($model->site) . '</div>';
            })
            ->addColumn('price_formatted', function (Link $model) {
                return '<span class="flex items-center justify-center text-sm font-[400]">' . marginCustomerPrice($model->price, $model->currency) . ' €</span>';
            })
            ->addColumn('country_field', function (Link $model) {
                if (!$model->country) return '-';
                if ($model->country == 'Arabic') return Blade::render('<span class="flex items-center justify-center text-sm font-[400]"><x-flag-country-sa class="w-5 h-5 mr-1" /> Arabic</span>');
                if ($model->country == 'Worldwide') return Blade::render('<span class="flex items-center justify-center text-sm font-[400]"><svg class="w-5 h-5 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M20.893 13.393l-1.135-1.135a2.252 2.252 0 01-.421-.585l-1.08-2.16a.414.414 0 00-.663-.107.827.827 0 01-.812.21l-1.273-.363a.89.89 0 00-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 01-1.81 1.025 1.055 1.055 0 01-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 01-1.383-2.46l.007-.042a2.25 2.25 0 01.29-.787l.09-.15a2.25 2.25 0 012.37-1.048l1.178.236a1.125 1.125 0 001.302-.795l.208-.73a1.125 1.125 0 00-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 01-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 01-1.458-1.137l1.411-2.353a2.25 2.25 0 00.286-.76m11.928 9.869A9 9 0 008.965 3.525m11.928 9.868A9 9 0 118.965 3.525" /></svg> Worldwide</span>');
                // get country code from country name
                $countryCode = strtolower(
                    array_search($model->country, config('countries')) ? array_search($model->country, config('countries'))  : 'us'
                );
                return Blade::render('<span class="flex items-center justify-center text-sm font-[400]">
                    <x-dynamic-component component="flag-country-' . $countryCode . '" class="w-5 h-5 mr-1"></x-dynamic-component>
                    ' . $model->country . '
                </span>');
            })
            ->addColumn('country')
            ->addColumn('authority_score')
            ->addColumn('organic_search_traffic')
            ->addColumn('margined_price')
            ->addColumn('industry', function (Link $model) {
                return '<span class="text-xs">' . $model->industry . '</span>';
            })
            ->addColumn('purchased_before_field', function (Link $model) {

                if (!$model->orders->where('customer_id', auth()->id())->isEmpty()) {
                    $list =  collect();
                    $model->orders
                        ->where('customer_id', auth()->id())
                        ->each(
                            fn ($item) => $list->push(
                                !is_null($item->projects->first())  ?
                                    str_replace(' ', '&nbsp;', $item->project) : ''
                            )
                        );

                    $stringList = $list->unique()->implode('&nbsp;|&nbsp;');

                    return '<p x-tooltip.raw=' . $stringList . ' class="flex items-center justify-center text-[#04CE00] cursor-pointer group hover:underine"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_749_8161)"><path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11.003 16L6.76 11.757L8.174 10.343L11.003 13.172L16.659 7.515L18.074 8.929L11.003 16Z" fill="#04CE00"/></g><defs><clipPath id="clip0_749_8161"><rect width="24" height="24" fill="white"/></clipPath></defs></svg></p>';
                    return;
                } else {
                    return '<p class="flex items-center justify-center text-[#FF4848]"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_749_8117)"><path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 10.586L14.828 7.757L16.243 9.172L13.414 12L16.243 14.828L14.828 16.243L12 13.414L9.172 16.243L7.757 14.828L10.586 12L7.757 9.172L9.172 7.757L12 10.586Z" fill="#FF4848"/></g><defs><clipPath id="clip0_749_8117"><rect width="24" height="24" fill="white"/></clipPath></defs></svg></p>';
                };
            })
            ->addColumn('created_at_formatted', function (Link $model) {
                return '<span class="flex items-center justify-center text-sm font-medium">' . Carbon::parse($model->created_at)->format('d.m.Y') . '</span>';
            });
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |
    */

    /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [
            Column::add()
                ->title('Add cart')
                ->field('add_to_cart')
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),

            Column::add()
                ->title('Website')
                ->field('site')
                ->sortable()
                ->searchable()
                ->makeInputText(),

            // Column::add()
            //     ->title('WISHLIST')
            //     ->field('wishlist'),

            Column::add()
                ->title('Price')
                ->field('price_formatted', 'margined_price')
                ->searchable()
                ->sortable()
                ->makeInputRange()
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),

            Column::add()
                ->title('Authority Score')
                ->field('authority_score')
                ->sortable()
                ->makeInputRange()
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),

            Column::add()
                ->title('Organic Search Traffic')
                ->field('organic_search_traffic')
                ->sortable()
                ->makeInputRange()
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),

            Column::add()
                ->title('Country')
                ->field('country_field', 'country')
                ->sortable()
                ->searchable()
                // ->makeInputSelect(Link::countrySelect(), 'country')
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center ', '')
                ->makeInputMultiSelect(Link::countryMultiSelect(), 'label', 'country', 'country'),

            Column::add()
                ->title('Purchased Before')
                ->field('purchased_before_field', 'is_on_order')
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),
            // ->makeBooleanFilter('is_on_order', 'No', 'Yes'),

            Column::add()
                ->title('Date Added')
                ->field('created_at_formatted', 'created_at')
                ->searchable()
                ->sortable()
                ->makeInputDatePicker('created_at')
                ->bodyAttribute('text-center text-sm font-[400]', '')
                ->headerAttribute('text-center', ''),

            Column::add()
                ->title('Industry')
                ->field('industry')
                ->sortable()
                ->searchable()
                ->makeInputText(),

        ];
    }

    /*
    |--------------------------------------------------------------------------
    | Actions Method
    |--------------------------------------------------------------------------
    | Enable the method below only if the Routes below are defined in your app.
    |
    */

    /**
     * PowerGrid Link Action Buttons.
     *
     * @return array<int, \PowerComponents\LivewirePowerGrid\Button>
     */

    // public function actions(): array
    // {
    //     return [];
    // }

    /*
    |--------------------------------------------------------------------------
    | Actions Rules
    |--------------------------------------------------------------------------
    | Enable the method below to configure Rules for your Table and Action Buttons.
    |
    */

    /**
     * PowerGrid Link Action Rules.
     *
     * @return array<int, \PowerComponents\LivewirePowerGrid\Rules\RuleActions>
     */

    // public function actionRules(): array
    // {
    //     return [];
    // }
}
Power-Components / livewire-powergrid

[Bug]: Huge number of views recorded by Debugbar #822

Have you searched through other issues to see if your problem is already reported or has been fixed?

Did you read the documentation?

Have you tried to publish the views?

Is there an error in the console?

PowerGrid

Laravel

Livewire

Alpine JS

Theme

Describe the bug.

To Reproduce...

Extra information
