Skip to content

refactor: remove lodash from ui#2069

Merged
yottahmd merged 1 commit intomainfrom
refactor/remove-ui-lodash
Apr 30, 2026
Merged

refactor: remove lodash from ui#2069
yottahmd merged 1 commit intomainfrom
refactor/remove-ui-lodash

Conversation

@yottahmd
Copy link
Copy Markdown
Collaborator

@yottahmd yottahmd commented Apr 30, 2026

Summary

Remove the UI's direct lodash and lodash-es dependencies.

What Changed

  • replace the DAG definitions page's lodash.debounce usage with the existing local useDebouncedValue hook
  • remove the unused useMutate export path that was only keeping lodash-es in ui/src/hooks/api.ts
  • drop lodash, lodash-es, and their type packages from ui/package.json

Why

The UI only had two direct lodash call sites left:

  • lodash.debounce on the DAG definitions page
  • lodash-es/isMatch for an exported mutate helper that is not used anywhere in ui/src

This keeps the existing behavior while removing dead dependencies and reducing package surface area.

Validation

  • cd ui && pnpm test
  • cd ui && pnpm typecheck
  • cd ui && pnpm build

Summary by CodeRabbit

  • Refactor
    • Removed unused library dependencies to reduce application bundle size and enhance loading performance.
    • Refined search functionality on the DAGs page through improved internal state management. Search behavior, responsiveness, and debounce timing remain unchanged.
    • Removed deprecated API utilities to streamline component architecture.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 30, 2026

📝 Walkthrough

Walkthrough

This 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

Cohort / File(s) Summary
Dependency Cleanup
ui/package.json
Removes lodash-related packages (@types/lodash, @types/lodash-es, lodash, lodash-es) from dependencies and devDependencies. Reorders @playwright/test in devDependencies without version change.
Hook Removal
ui/src/hooks/api.ts
Removes the useMutate hook export by deleting createMutateHook and isMatch imports. Retains useQuery, useImmutable, and useInfinite exports.
Search Refactoring
ui/src/pages/dags/index.tsx
Replaces debounced search state (apiSearchText, apiSearchLabels) with useDebouncedValue hook (500ms delay). Query parameters now use debounced values directly; input handlers updated to modify immediate state and URL params without manual debounce invocation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'refactor: remove lodash from ui' is fully related to the main changeset, clearly summarizing the primary objective of removing lodash dependencies from the UI codebase.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch refactor/remove-ui-lodash

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.

❤️ Share
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between f79990e and 67d26df.

⛔ Files ignored due to path filters (1)
  • ui/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (3)
  • ui/package.json
  • ui/src/hooks/api.ts
  • ui/src/pages/dags/index.tsx
💤 Files with no reviewable changes (1)
  • ui/src/hooks/api.ts

Comment on lines +102 to +103
const debouncedSearchText = useDebouncedValue(searchText, 500);
const debouncedSearchLabels = useDebouncedValue(searchLabels, 500);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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).

@yottahmd yottahmd merged commit 0c107d3 into main Apr 30, 2026
9 checks passed
@yottahmd yottahmd deleted the refactor/remove-ui-lodash branch April 30, 2026 02:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant