Merge pull request #1501 from jay-hodgson/SWC-7225

SWC-7225
Sage-Bionetworks · Jan 15, 2025 · 972bd75 · 972bd75
2 parents e877c04 + cb878a7
commit 972bd75
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/apps/portals-e2e/src/explore.spec.ts b/apps/portals-e2e/src/explore.spec.ts
@@ -115,7 +115,7 @@ const getFacetFilterControls = (page: Page) => {
 const getAvailableFacetsDiv = (page: Page) => {
   return getFacetFilterControlsPanel(page)
     .locator('> div')
-    .filter({ hasText: 'Available Facets' })
+    .filter({ hasText: 'Available Filters' })
 }
 
 const countVisibleElements = async (allCells: Locator) => {

diff --git a/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx b/packages/synapse-react-client/src/components/widgets/query-filter/FacetFilterControls.tsx
@@ -221,6 +221,25 @@ function FacetFilterControls(props: FacetFilterControlsProps) {
 
   return (
     <div className={`FacetFilterControls`}>
+      <div>
+        <FacetFilterHeader
+          label={'Available Filters'}
+          hideCollapsible
+          isCollapsed={false}
+          onClick={noop}
+        />
+        {sortBy(allFacetColumns).map(columnName => {
+          return (
+            <FacetChip
+              key={columnName}
+              onClick={() => toggleShowFacetFilter(columnName)}
+              isChecked={facetColumnsShown.has(columnName)}
+            >
+              {getColumnDisplayName(columnName)}
+            </FacetChip>
+          )
+        })}
+      </div>
       {combineRangeFacetConfig && combinedRangeFacets.length >= 2 && (
         <CombinedRangeFacetFilter
           facetResults={combinedRangeFacets as FacetColumnResultRange[]}
@@ -262,25 +281,6 @@ function FacetFilterControls(props: FacetFilterControlsProps) {
           )
         )
       })}
-      <div>
-        <FacetFilterHeader
-          label={'Available Facets'}
-          hideCollapsible
-          isCollapsed={false}
-          onClick={noop}
-        />
-        {sortBy(allFacetColumns).map(columnName => {
-          return (
-            <FacetChip
-              key={columnName}
-              onClick={() => toggleShowFacetFilter(columnName)}
-              isChecked={facetColumnsShown.has(columnName)}
-            >
-              {getColumnDisplayName(columnName)}
-            </FacetChip>
-          )
-        })}
-      </div>
     </div>
   )
 }

diff --git a/packages/synapse-react-client/src/style/components/query_filter/_facet-filter-header.scss b/packages/synapse-react-client/src/style/components/query_filter/_facet-filter-header.scss
@@ -7,6 +7,7 @@ $icon-size: 14px; // component-specific variable
   justify-content: space-between;
   border-bottom: 1px solid $border-color-gray;
   margin-bottom: 8px;
+  margin-top: 20px;
 
   &__label {
     font-weight: bold;