Fix vertical alignment

apache · Feb 23, 2023 · 78f9771 · 78f9771
1 parent fa029d5
commit 78f9771
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 40 deletions.
diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
@@ -37,12 +37,15 @@ const StyledCrossFilterTitle = styled.div`
 
 const StyledIconSearch = styled(Icons.SearchOutlined)`
   ${({ theme }) => `
-    color: ${theme.colors.grayscale.light1};
-    margin-left: ${theme.gridUnit}px;
-    transition: 0.3s;
-    vertical-align: middle;
-    &:hover {
-      color: ${theme.colors.grayscale.base};
+    & > span.anticon.anticon-search {
+      color: ${theme.colors.grayscale.light1};
+      margin-left: ${theme.gridUnit}px;
+      transition: 0.3s;
+      vertical-align: middle;
+      line-height: 0;
+      &:hover {
+        color: ${theme.colors.grayscale.base};
+      }
     }
   `}
 `;

diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -143,20 +143,6 @@ const FilterControls: FC<FilterControlsProps> = ({
     [filtersWithValues, portalNodes],
   );
 
-  const rendererCrossFilter = useCallback(
-    (crossFilter, orientation, last) => (
-      <CrossFilter
-        filter={crossFilter}
-        orientation={orientation}
-        last={
-          `${last.name}${last.emitterId}` ===
-          `${crossFilter.name}${crossFilter.emitterId}`
-        }
-      />
-    ),
-    [],
-  );
-
   const renderVerticalContent = () => (
     <>
       {filtersInScope.map(renderer)}
@@ -170,6 +156,41 @@ const FilterControls: FC<FilterControlsProps> = ({
     </>
   );
 
+  const overflowedFiltersInScope = useMemo(
+    () => filtersInScope.filter(({ id }) => overflowedIds?.includes(id)),
+    [filtersInScope, overflowedIds],
+  );
+
+  const overflowedCrossFilters = useMemo(
+    () =>
+      selectedCrossFilters.filter(({ emitterId, name }) =>
+        overflowedIds?.includes(`${name}${emitterId}`),
+      ),
+    [overflowedIds, selectedCrossFilters],
+  );
+
+  const activeOverflowedFiltersInScope = useMemo(() => {
+    const activeOverflowedFilters = overflowedFiltersInScope.filter(filter =>
+      isNativeFilterWithDataMask(filter),
+    );
+    return [...activeOverflowedFilters, ...overflowedCrossFilters];
+  }, [overflowedCrossFilters, overflowedFiltersInScope]);
+
+  const rendererCrossFilter = useCallback(
+    (crossFilter, orientation, last) => (
+      <CrossFilter
+        filter={crossFilter}
+        orientation={orientation}
+        last={
+          filtersInScope.length > 0 &&
+          `${last.name}${last.emitterId}` ===
+            `${crossFilter.name}${crossFilter.emitterId}`
+        }
+      />
+    ),
+    [filtersInScope.length],
+  );
+
   const items = useMemo(() => {
     const crossFilters = selectedCrossFilters.map(c => ({
       // a combination of filter name and chart id to account
@@ -197,26 +218,6 @@ const FilterControls: FC<FilterControlsProps> = ({
     return [...crossFilters, ...nativeFiltersInScope];
   }, [filtersInScope, renderer, rendererCrossFilter, selectedCrossFilters]);
 
-  const overflowedFiltersInScope = useMemo(
-    () => filtersInScope.filter(({ id }) => overflowedIds?.includes(id)),
-    [filtersInScope, overflowedIds],
-  );
-
-  const overflowedCrossFilters = useMemo(
-    () =>
-      selectedCrossFilters.filter(({ emitterId, name }) =>
-        overflowedIds?.includes(`${name}${emitterId}`),
-      ),
-    [overflowedIds, selectedCrossFilters],
-  );
-
-  const activeOverflowedFiltersInScope = useMemo(() => {
-    const activeOverflowedFilters = overflowedFiltersInScope.filter(filter =>
-      isNativeFilterWithDataMask(filter),
-    );
-    return [...activeOverflowedFilters, ...overflowedCrossFilters];
-  }, [overflowedCrossFilters, overflowedFiltersInScope]);
-
   const renderHorizontalContent = () => (
     <div
       css={(theme: SupersetTheme) =>
@@ -253,6 +254,7 @@ const FilterControls: FC<FilterControlsProps> = ({
         }
         dropdownContent={
           overflowedFiltersInScope.length ||
+          overflowedCrossFilters.length ||
           (filtersOutOfScope.length && showCollapsePanel)
             ? () => (
                 <FiltersDropdownContent