From de29b98beb78cf90949eb4a841bd06405530b13c Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <sergej.s.vlasov@gmail.com>
Date: Mon, 30 Dec 2024 10:01:57 +0000
Subject: [PATCH] clean up and add comments

---
 .../AdHocFiltersComboboxRenderer.tsx                  | 11 +++++++----
 .../src/variables/adhoc/AdHocFiltersCombobox/utils.ts |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
index 0462a03b8..5c5aa709e 100644
--- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
+++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/AdHocFiltersComboboxRenderer.tsx
@@ -45,8 +45,10 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe
   );
 
   useLayoutEffect(() => {
-    // updateCollapseThreshold(!!model.state.collapseFilters ? true : false, filters.length);
-    updateCollapseThreshold(true, filters.length);
+    updateCollapseThreshold(!!model.state.collapseFilters ? true : false, filters.length);
+    // TODO: remove below before merging
+    // updateCollapseThreshold(true, filters.length); // for testing locally
+
     // needs to run only on first render
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -59,8 +61,9 @@ export const AdHocFiltersComboboxRenderer = memo(function AdHocFiltersComboboxRe
       }}
       ref={wrapperRef}
       onFocusCapture={handleFilterCollapse(false, filters.length)}
-      // onBlurCapture={handleFilterCollapse(!!model.state.collapseFilters ? true : false, filters.length}
-      onBlurCapture={handleFilterCollapse(true, filters.length)}
+      // TODO: remove below before merging
+      // onBlurCapture={handleFilterCollapse(true, filters.length)} // for testing locally
+      onBlurCapture={handleFilterCollapse(!!model.state.collapseFilters ? true : false, filters.length)}
     >
       <Icon name="filter" className={styles.filterIcon} size="lg" />
 
diff --git a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.ts b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.ts
index 8f2f65e19..327b5bb5a 100644
--- a/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.ts
+++ b/packages/scenes/src/variables/adhoc/AdHocFiltersCombobox/utils.ts
@@ -223,8 +223,12 @@ export const calculateCollapseThreshold = (
 
   const rect = wrapperRef.current.getBoundingClientRect();
 
+  // without paddings variable wrapper height is 26px
+  //   therefore trigger only when higher than that
   if (rect.height - 6 > 26) {
     const componentLineSpan = (rect.height - 6) / 26;
+    // magic number but dividing filters by line span +1 should yield
+    //   number of filters that will fit in 1 line
     const filterCutOff = Math.max(1, Math.floor(filtersLength / (componentLineSpan + 1)));
 
     return filterCutOff;