mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 11:55:22 +02:00
perf: make filter dropdowns feel instant with useDeferredValue
Use React's useDeferredValue to decouple UI responsiveness from expensive data reprocessing. Checkboxes now update immediately on click; filterData/filterAdsData/filterBsrData and all downstream useMemos run as a low-priority background pass. Added local optimistic state in MultiSelectDropdown as a belt-and-suspenders layer. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
8e907f1dff
commit
dcf77cad2d
@@ -1,5 +1,5 @@
|
||||
|
||||
import React, { useState, useMemo, useEffect, useCallback, Suspense, lazy } from 'react';
|
||||
import React, { useState, useMemo, useEffect, useCallback, Suspense, lazy, useDeferredValue } from 'react';
|
||||
import FileUpload from './components/FileUpload';
|
||||
import Dashboard from './components/Dashboard';
|
||||
import FilterBar from './components/FilterBar';
|
||||
@@ -82,6 +82,7 @@ const App: React.FC = () => {
|
||||
woc: [],
|
||||
bulkSearch: '',
|
||||
});
|
||||
const deferredFilters = useDeferredValue(filters);
|
||||
|
||||
const top50Mode = useMemo(() => {
|
||||
const hasUK = filters.customer.includes('Amazon UK');
|
||||
@@ -525,8 +526,8 @@ const App: React.FC = () => {
|
||||
return metaMap;
|
||||
}, [rawData]);
|
||||
|
||||
const filteredData = useMemo(() => filterData(rawData, filters, stockMap, vendorStockMap, top50Mode), [rawData, filters, stockMap, vendorStockMap, top50Mode]);
|
||||
const filteredAdsData = useMemo(() => filterAdsData(adsData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
|
||||
const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
|
||||
const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
|
||||
const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]);
|
||||
|
||||
// Calculate country-aware Top 50 Best Sellers for 2025
|
||||
@@ -565,8 +566,8 @@ const App: React.FC = () => {
|
||||
|
||||
// Derived Data for Vendor (BSR)
|
||||
const filteredBsrData = useMemo(() => {
|
||||
return filterBsrData(bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
|
||||
}, [bsrData, filters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
|
||||
return filterBsrData(bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
|
||||
}, [bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
|
||||
|
||||
// Combine Sales & Ads Data dynamically based on current filters
|
||||
const combinedAdsData = useMemo(() => {
|
||||
@@ -595,7 +596,7 @@ const App: React.FC = () => {
|
||||
// Only apply the "Max Week" cutoff if the user has NOT explicitly selected a specific time period.
|
||||
// If Month or Week filters are active, we show exactly what was asked (e.g., Full Year 2024).
|
||||
// If no time filters are active, we default to YTD (Like-for-Like) comparison.
|
||||
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
|
||||
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
|
||||
|
||||
if (!combinedAdsData) return [];
|
||||
|
||||
@@ -607,25 +608,25 @@ const App: React.FC = () => {
|
||||
if (!item.week) return true;
|
||||
return item.week <= gridContext.maxWeek;
|
||||
});
|
||||
}, [combinedAdsData, gridContext.maxWeek, filters.month, filters.week]);
|
||||
}, [combinedAdsData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
|
||||
|
||||
// Derived Data for Dashboard (YTD Filtered - Isolated)
|
||||
// Dashboard needs aggregated data respecting the max week limit of current year.
|
||||
// Dashboard needs aggregated data respecting the max week limit of current year...
|
||||
// UNLESS the user explicitly filters for a period.
|
||||
const ytdFilteredData = useMemo(() => {
|
||||
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
|
||||
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
|
||||
if (isTimeFilterActive) return filteredData;
|
||||
|
||||
return filteredData.filter(r => r.week <= gridContext.maxWeek);
|
||||
}, [filteredData, gridContext.maxWeek, filters.month, filters.week]);
|
||||
}, [filteredData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
|
||||
|
||||
const ytdFilteredAdsData = useMemo(() => {
|
||||
const isTimeFilterActive = filters.month.length > 0 || filters.week.length > 0;
|
||||
const isTimeFilterActive = deferredFilters.month.length > 0 || deferredFilters.week.length > 0;
|
||||
if (isTimeFilterActive) return filteredAdsData;
|
||||
|
||||
return filteredAdsData.filter(r => r.week <= gridContext.maxWeek);
|
||||
}, [filteredAdsData, gridContext.maxWeek, filters.month, filters.week]);
|
||||
}, [filteredAdsData, gridContext.maxWeek, deferredFilters.month, deferredFilters.week]);
|
||||
|
||||
const ytdAggregatedData = useMemo(() => {
|
||||
return aggregateData(ytdFilteredData);
|
||||
@@ -637,7 +638,7 @@ const App: React.FC = () => {
|
||||
// Derive Context Data (Product Line Context when drilling down)
|
||||
const contextAggregatedData = useMemo(() => {
|
||||
// Check if we are filtering by specific items (SKU, ASIN, Title)
|
||||
const hasItemFilters = filters.sku.length > 0 || filters.asin.length > 0 || filters.title.length > 0;
|
||||
const hasItemFilters = deferredFilters.sku.length > 0 || deferredFilters.asin.length > 0 || deferredFilters.title.length > 0;
|
||||
|
||||
if (!hasItemFilters || filteredData.length === 0) {
|
||||
return null;
|
||||
@@ -648,7 +649,7 @@ const App: React.FC = () => {
|
||||
|
||||
// 2. Create a "broad" filter: Keep Year/Customer/Month, but CLEAR Item filters, and restrict to these Lines
|
||||
const contextFilters: FilterState = {
|
||||
...filters,
|
||||
...deferredFilters,
|
||||
line: activeLines, // Force these lines
|
||||
sku: [], // Clear specific item filters
|
||||
asin: [],
|
||||
@@ -660,7 +661,7 @@ const App: React.FC = () => {
|
||||
const broadData = filterData(rawData, contextFilters);
|
||||
return aggregateData(broadData);
|
||||
|
||||
}, [rawData, filters, filteredData]);
|
||||
}, [rawData, deferredFilters, filteredData]);
|
||||
|
||||
|
||||
// Derive Options for Filter Dropdowns
|
||||
|
||||
@@ -15,9 +15,16 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [rangeInput, setRangeInput] = useState('');
|
||||
// Local optimistic state so checkboxes respond instantly on click
|
||||
const [localSelected, setLocalSelected] = useState(selected);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Sync local state when committed prop changes (after deferred update settles)
|
||||
useEffect(() => {
|
||||
setLocalSelected(selected);
|
||||
}, [selected]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
@@ -52,36 +59,29 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
}, [options, searchTerm]);
|
||||
|
||||
const toggleOption = (option: string) => {
|
||||
if (selected.includes(option)) {
|
||||
onChange(selected.filter((item) => item !== option));
|
||||
} else {
|
||||
onChange([...selected, option]);
|
||||
}
|
||||
const next = localSelected.includes(option)
|
||||
? localSelected.filter((item) => item !== option)
|
||||
: [...localSelected, option];
|
||||
setLocalSelected(next);
|
||||
onChange(next);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
// If searching, only select/deselect visible options
|
||||
let next: string[];
|
||||
if (searchTerm) {
|
||||
const allFilteredSelected = filteredOptions.every(opt => selected.includes(opt));
|
||||
if (allFilteredSelected) {
|
||||
// Deselect all filtered options
|
||||
onChange(selected.filter(item => !filteredOptions.includes(item)));
|
||||
} else {
|
||||
// Select all filtered options (add unique ones)
|
||||
const newSelected = Array.from(new Set([...selected, ...filteredOptions]));
|
||||
onChange(newSelected);
|
||||
}
|
||||
const allFilteredSelected = filteredOptions.every(opt => localSelected.includes(opt));
|
||||
next = allFilteredSelected
|
||||
? localSelected.filter(item => !filteredOptions.includes(item))
|
||||
: Array.from(new Set([...localSelected, ...filteredOptions]));
|
||||
} else {
|
||||
// Standard behavior
|
||||
if (selected.length === options.length) {
|
||||
onChange([]); // Deselect all
|
||||
} else {
|
||||
onChange([...options]); // Select all
|
||||
}
|
||||
next = localSelected.length === options.length ? [] : [...options];
|
||||
}
|
||||
setLocalSelected(next);
|
||||
onChange(next);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setLocalSelected([]);
|
||||
onChange([]);
|
||||
};
|
||||
|
||||
@@ -135,12 +135,12 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`w-full text-left bg-surface border border-border hover:border-slate-600 text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors flex justify-between items-center
|
||||
${selected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
|
||||
${localSelected.length > 0 ? 'text-white font-medium border-primary/50' : 'text-slate-400'}`}
|
||||
>
|
||||
<span className="truncate">
|
||||
{selected.length === 0
|
||||
{localSelected.length === 0
|
||||
? (label === 'Customer' ? 'All Customers' : `All ${label}s`)
|
||||
: `${selected.length} selected`}
|
||||
: `${localSelected.length} selected`}
|
||||
</span>
|
||||
<svg className={`fill-current h-4 w-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
@@ -190,19 +190,22 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
termsLower.some(t => opt.toLowerCase() === t || opt.toLowerCase().includes(t))
|
||||
);
|
||||
if (matched.length > 0) {
|
||||
onChange(Array.from(new Set([...selected, ...matched])));
|
||||
const next = Array.from(new Set([...localSelected, ...matched]));
|
||||
setLocalSelected(next);
|
||||
onChange(next);
|
||||
}
|
||||
setIsOpen(false);
|
||||
setSearchTerm('');
|
||||
} else if (filteredOptions.length > 0) {
|
||||
const allSelected = filteredOptions.every(opt => selected.includes(opt));
|
||||
const allSelected = filteredOptions.every(opt => localSelected.includes(opt));
|
||||
let next: string[];
|
||||
if (allSelected) {
|
||||
// Deselect all filtered
|
||||
onChange(selected.filter(item => !filteredOptions.includes(item)));
|
||||
next = localSelected.filter(item => !filteredOptions.includes(item));
|
||||
} else {
|
||||
// Select all filtered
|
||||
onChange(Array.from(new Set([...selected, ...filteredOptions])));
|
||||
next = Array.from(new Set([...localSelected, ...filteredOptions]));
|
||||
}
|
||||
setLocalSelected(next);
|
||||
onChange(next);
|
||||
setIsOpen(false);
|
||||
setSearchTerm('');
|
||||
}
|
||||
@@ -236,8 +239,8 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
<div className="flex justify-between py-2 px-2 border-b border-slate-800 bg-slate-900/50">
|
||||
<button onClick={handleSelectAll} className="text-xs text-primary hover:text-indigo-400 font-medium px-2">
|
||||
{searchTerm
|
||||
? (filteredOptions.every(opt => selected.includes(opt)) ? 'Unselect Results' : 'Select Results')
|
||||
: (selected.length === options.length ? 'Unselect All' : 'Select All')
|
||||
? (filteredOptions.every(opt => localSelected.includes(opt)) ? 'Unselect Results' : 'Select Results')
|
||||
: (localSelected.length === options.length ? 'Unselect All' : 'Select All')
|
||||
}
|
||||
</button>
|
||||
<button onClick={handleClear} className="text-xs text-slate-400 hover:text-white px-2">
|
||||
@@ -250,11 +253,11 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({ label, select
|
||||
<label key={opt} className="flex items-center space-x-3 p-2.5 md:p-2 rounded hover:bg-slate-800 active:bg-slate-700 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(opt)}
|
||||
checked={localSelected.includes(opt)}
|
||||
onChange={() => toggleOption(opt)}
|
||||
className="form-checkbox h-5 w-5 md:h-4 md:w-4 text-primary rounded border-slate-600 bg-slate-800 focus:ring-primary focus:ring-offset-slate-900 transition duration-150 ease-in-out"
|
||||
/>
|
||||
<span className={`text-sm break-all group-hover:text-white ${selected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
|
||||
<span className={`text-sm break-all group-hover:text-white ${localSelected.includes(opt) ? 'text-white' : 'text-slate-400'}`}>
|
||||
{opt}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user