Conversation
📝 WalkthroughWalkthroughThis change removes lodash dependencies from the project and refactors search debouncing. The package.json removes lodash-related packages. The api.ts hook removes the useMutate export. The dags component replaces lodash debounce with a useDebouncedValue hook approach. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@ui/src/pages/dags/index.tsx`:
- Around line 102-103: The current debounced values (debouncedSearchText,
debouncedSearchLabels) cause URL/state-driven filters restored during initial
hydration to be delayed, so the first API call uses empty/default filters; to
fix, avoid using useDebouncedValue for the initial hydrated sync: introduce an
"isHydrated" flag (or reuse the existing hydration effect) and only apply
debounce after hydration completes—use raw searchText/searchLabels for building
queryParams during the hydration phase and switch to
debouncedSearchText/debouncedSearchLabels thereafter (update references to
debouncedSearchText, debouncedSearchLabels, and where queryParams are
constructed/used such as in the hydration effect and the API fetch logic around
lines ~102 and ~227-231).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 23666a5c-af79-4f45-9fdd-c19fa549c64d
⛔ Files ignored due to path filters (1)
ui/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
ui/package.jsonui/src/hooks/api.tsui/src/pages/dags/index.tsx
💤 Files with no reviewable changes (1)
- ui/src/hooks/api.ts
| const debouncedSearchText = useDebouncedValue(searchText, 500); | ||
| const debouncedSearchLabels = useDebouncedValue(searchLabels, 500); |
There was a problem hiding this comment.
Debouncing now delays initial URL/state-driven filtering.
Because queryParams read debounced values, filters restored in the hydration effect are not applied to the API request immediately; the page first fetches with empty/default filters, then refetches ~500ms later.
Suggested fix (apply debounce after initial hydration only)
@@
const [sortField, setSortField] = React.useState(defaultFilters.sortField);
const [sortOrder, setSortOrder] = React.useState(defaultFilters.sortOrder);
+ const [filtersHydrated, setFiltersHydrated] = React.useState(false);
const debouncedSearchText = useDebouncedValue(searchText, 500);
const debouncedSearchLabels = useDebouncedValue(searchLabels, 500);
@@
if (current && areDAGDefinitionsFiltersEqual(current, next)) {
+ setFiltersHydrated(true);
if (hasUrlFilters) {
lastPersistedFiltersRef.current = next;
searchState.writeState('dagDefinitions', searchStateScope, next);
}
return;
@@
lastPersistedFiltersRef.current = next;
searchState.writeState('dagDefinitions', searchStateScope, next);
+ setFiltersHydrated(true);
}, [defaultFilters, location.search, searchState, searchStateScope]);
@@
+ const effectiveSearchText = filtersHydrated
+ ? debouncedSearchText
+ : searchText;
+ const effectiveSearchLabels = filtersHydrated
+ ? debouncedSearchLabels
+ : searchLabels;
+
const queryParams = React.useMemo(
() => ({
remoteNode,
page,
perPage: preferences.pageLimit || 200,
- name: debouncedSearchText || undefined,
+ name: effectiveSearchText || undefined,
labels:
- debouncedSearchLabels.length > 0
- ? debouncedSearchLabels.join(',')
+ effectiveSearchLabels.length > 0
+ ? effectiveSearchLabels.join(',')
: undefined,
@@
- debouncedSearchText,
- debouncedSearchLabels,
+ effectiveSearchText,
+ effectiveSearchLabels,Also applies to: 227-231
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@ui/src/pages/dags/index.tsx` around lines 102 - 103, The current debounced
values (debouncedSearchText, debouncedSearchLabels) cause URL/state-driven
filters restored during initial hydration to be delayed, so the first API call
uses empty/default filters; to fix, avoid using useDebouncedValue for the
initial hydrated sync: introduce an "isHydrated" flag (or reuse the existing
hydration effect) and only apply debounce after hydration completes—use raw
searchText/searchLabels for building queryParams during the hydration phase and
switch to debouncedSearchText/debouncedSearchLabels thereafter (update
references to debouncedSearchText, debouncedSearchLabels, and where queryParams
are constructed/used such as in the hydration effect and the API fetch logic
around lines ~102 and ~227-231).
Summary
Remove the UI's direct
lodashandlodash-esdependencies.What Changed
lodash.debounceusage with the existing localuseDebouncedValuehookuseMutateexport path that was only keepinglodash-esinui/src/hooks/api.tslodash,lodash-es, and their type packages fromui/package.jsonWhy
The UI only had two direct lodash call sites left:
lodash.debounceon the DAG definitions pagelodash-es/isMatchfor an exported mutate helper that is not used anywhere inui/srcThis keeps the existing behavior while removing dead dependencies and reducing package surface area.
Validation
cd ui && pnpm testcd ui && pnpm typecheckcd ui && pnpm buildSummary by CodeRabbit