Analytics filter refinements

[tomerqodo]

Benchmark PR from qodo-benchmark#240

Summary by CodeRabbit

• New Features

  • Filters now support automatic closing after selection for more efficient workflows (configurable per filter type).

• UI/UX Improvements

  • Redesigned filter interface with new icons and improved visual layout.
  • Enhanced filter display with refined visibility of selected options.
  • Optimized header spacing for improved visual clarity.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Introduces an autoCloseOnSelect configuration option for filter dropdowns to enable automatic closing after selection. Updates filter field configurations and styling in the stats filter component. Adjusts vertical padding in the stats header layout.

Changes

Cohort / File(s)	Summary
Filter Component Enhancement apps/shade/src/components/ui/filters.tsx	Adds optional autoCloseOnSelect boolean field to FilterFieldConfig interface. Implements conditional dropdown close logic on selection. Updates search state management and popover styling with data-attribute animation controls. Modifies border classes and default i18n values for "Add filter" labels.
Filter Configuration & Styling apps/stats/src/views/Stats/components/stats-filter.tsx	Applies autoCloseOnSelect: true and hideOperatorSelect: true to audience field. Adds selectedOptionsClassName: 'hidden' to multiple UTM fields (utm_source, utm_medium, utm_campaign, utm_content, utm_term) and source field. Changes post field icon from File to PenLine with width constraints (w-80). Updates filter button UI to use FunnelPlus icon with dynamic text rendering. Modifies UTM and source option icon span styling with compact badge appearance.
Layout Spacing Adjustment apps/stats/src/views/Stats/layout/stats-header.tsx	Replaces py-8 with pb-6 pt-9 on Navbar element, adjusting vertical padding distribution.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A rabbit dances through the filters bright,
Auto-close dropdowns, oh what a sight!
Config tweaks and styling refinement,
Each selection swift with close sentiment,
The UI hops with graceful delight!

🚥 Pre-merge checks | ✅ 2 | ❌ 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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Analytics filter refinements' is directly related to the changeset, which focuses on UI and behavior improvements to analytics filter components across multiple files.

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

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between be1f819 and dc86c90.

📒 Files selected for processing (3)

• apps/shade/src/components/ui/filters.tsx
• apps/stats/src/views/Stats/components/stats-filter.tsx
• apps/stats/src/views/Stats/layout/stats-header.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

apps/stats/src/views/Stats/layout/stats-header.tsx (1)

apps/shade/src/components/ui/navbar.tsx (1)

• Navbar (46-46)

🔇 Additional comments (10)

apps/stats/src/views/Stats/layout/stats-header.tsx (1)

67-67: LGTM!

The padding adjustment from symmetric py-8 to asymmetric pb-6 pt-9 is a reasonable visual refinement that aligns with the PR's UI layout goals.

apps/shade/src/components/ui/filters.tsx (3)

239-239: Style tweaks look consistent.

The sm size variant and operator label border adjustment are straightforward.

Also applies to: 946-946

---

750-751: Auto-close wiring is consistent across select flows.

Config flag + close/reset logic cover both inline and popover selection paths.

Also applies to: 1051-1051, 1125-1137, 1271-1274, 2098-2101

---

1201-1207: Popover close-state tweaks are applied consistently.

Closed-state animation suppression and sizing defaults line up across popovers.

Also applies to: 1644-1644, 2078-2084

apps/stats/src/views/Stats/components/stats-filter.tsx (6)

93-95: Compact visit-count badges look good.

The new badge markup is clearer and lighter in the options list.

Also applies to: 159-161

---

188-214: Debounced post search flow unchanged.

No functional change spotted here; looks fine.

---

375-440: UTM field UX refinements look consistent.

Making these fields searchable and hiding selected badges aligns with the compact filter UI.

---

458-471: Post field sizing and icon update look good.

The width and popover sizing feel consistent for long titles.

---

474-485: Source field config updates look fine.

Searchable + hidden selected badges mirror the UTM fields nicely.

---

496-505: Filters control adjustments look consistent.

Small size + funnel icon align with the refined filter UI.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

apps/shade/src/components/ui/filters.tsx (1)

105-122: Provide a non-empty accessible label for the add button.

With both defaults empty, the icon-only add button can render without a usable accessible name unless every caller supplies one. Keep a non-empty title/aria-label fallback.

🛠️ Suggested fix

-    addFilterTitle: '',
+    addFilterTitle: 'Add filter',

apps/stats/src/views/Stats/components/stats-filter.tsx (1)

447-456: Use operator value is_any_of (snake_case) for multiselect defaults.

The operator definitions use {value: 'is_any_of', label: i18n.operators.isAnyOf}, where 'is any of' is only the display label. Downstream filtering logic expects the value 'is_any_of'. Using the label text will cause operator lookup failures.

🛠️ Suggested fix

-                        defaultOperator: 'is any of',
+                        defaultOperator: 'is_any_of',

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between be1f819 and dc86c90.

📒 Files selected for processing (3)

• apps/shade/src/components/ui/filters.tsx
• apps/stats/src/views/Stats/components/stats-filter.tsx
• apps/stats/src/views/Stats/layout/stats-header.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

apps/stats/src/views/Stats/layout/stats-header.tsx (1)

apps/shade/src/components/ui/navbar.tsx (1)

• Navbar (46-46)

🔇 Additional comments (10)

apps/stats/src/views/Stats/layout/stats-header.tsx (1)

67-67: LGTM!

The padding adjustment from symmetric py-8 to asymmetric pb-6 pt-9 is a reasonable visual refinement that aligns with the PR's UI layout goals.

apps/shade/src/components/ui/filters.tsx (3)

239-239: Style tweaks look consistent.

The sm size variant and operator label border adjustment are straightforward.

Also applies to: 946-946

---

750-751: Auto-close wiring is consistent across select flows.

Config flag + close/reset logic cover both inline and popover selection paths.

Also applies to: 1051-1051, 1125-1137, 1271-1274, 2098-2101

---

1201-1207: Popover close-state tweaks are applied consistently.

Closed-state animation suppression and sizing defaults line up across popovers.

Also applies to: 1644-1644, 2078-2084

apps/stats/src/views/Stats/components/stats-filter.tsx (6)

93-95: Compact visit-count badges look good.

The new badge markup is clearer and lighter in the options list.

Also applies to: 159-161

---

188-214: Debounced post search flow unchanged.

No functional change spotted here; looks fine.

---

375-440: UTM field UX refinements look consistent.

Making these fields searchable and hiding selected badges aligns with the compact filter UI.

---

458-471: Post field sizing and icon update look good.

The width and popover sizing feel consistent for long titles.

---

474-485: Source field config updates look fine.

Searchable + hidden selected badges mirror the UTM fields nicely.

---

496-505: Filters control adjustments look consistent.

Small size + funnel icon align with the refined filter UI.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}