clean up and add comments

grafana · Dec 30, 2024 · de29b98 · de29b98
1 parent 233ce9d
commit de29b98
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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;