Merge pull request #1371 from nextstrain/filters

Allow hiding of all filters in a category
nextstrain · Jul 15, 2021 · c0ff4e4 · c0ff4e4
2 parents 35d90f1 + f05d78f
commit c0ff4e4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/controls/filter.js b/src/components/controls/filter.js
@@ -98,7 +98,10 @@ class FilterData extends React.Component {
       return {
         filterName,
         displayName: filterBadgeDisplayName(n, this.getFilterTitle(filterName)),
-        remove: () => {this.props.dispatch(applyFilter("set", filterName, []));}
+        anyFiltersActive: () => this.props.activeFilters[filterName].filter((f) => f.active).length>0,
+        remove: () => {this.props.dispatch(applyFilter("set", filterName, []));},
+        activate: () => {this.props.dispatch(applyFilter("add", filterName, this.props.activeFilters[filterName].map((f) => f.value)));},
+        inactivate: () => {this.props.dispatch(applyFilter("inactivate", filterName, this.props.activeFilters[filterName].map((f) => f.value)));}
       };
     });
   }
@@ -138,9 +141,12 @@ class FilterData extends React.Component {
             {inUseFilters.map((filter) => (
               <div style={{display: 'inline-block', margin: '2px'}} key={filter.displayName}>
                 <FilterBadge
-                  active
+                  active={filter.anyFiltersActive()}
+                  canMakeInactive
                   id={filter.displayName}
                   remove={filter.remove}
+                  activate={filter.activate}
+                  inactivate={filter.inactivate}
                   onHoverMessage={`Data is currently filtered by ${filter.displayName}`}
                 >
                   {filter.displayName}

diff --git a/src/components/info/filterBadge.js b/src/components/info/filterBadge.js
@@ -64,7 +64,7 @@ const SelectedFilterTextContainer = styled(BaseContainer)`
 
 const BadgeContainer = styled.div`
   background-color: #E9F2F6;
-  ${(props) => props.striped ? 'background: repeating-linear-gradient(135deg, #E9F2F6, #E9F2F6 5px, transparent 5px, transparent 10px);' : ''};
+  ${(props) => props.striped ? 'background: repeating-linear-gradient(135deg, #E9F2F6, #E9F2F6 5px, #FFFFFF 5px, #FFFFFF 10px);' : ''};
   display: inline-block;
   font-size: 14px;
   border-radius: 2px;