From d81700f177c267269afd7f83572024de359369e2 Mon Sep 17 00:00:00 2001
From: James Hadfield <hadfield.james@gmail.com>
Date: Fri, 9 Jul 2021 14:08:44 +1200
Subject: [PATCH 1/2] Allow hiding of all filters in a category

Expands the functionality of the sidebar filter badges to allow inactivation of all (active) filters in a category.

The choice was made to keep a sidebar badge "active" if any of its constituent filters was active. For example, if there were a mixture of 3 active and 2 inactive country filters (displayed at the top of the page), then the sidebar badge will be active and show "3 x country", with the option to inactivate those 3 filters, or remove all 5.

Closes https://github.com/nextstrain/auspice/issues/1358
---
 src/components/controls/filter.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/controls/filter.js b/src/components/controls/filter.js
index afeca92ef..0b8ddc789 100644
--- 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}

From f05d78fa5e876dd561c7c2042834530ff1f6b98b Mon Sep 17 00:00:00 2001
From: James Hadfield <hadfield.james@gmail.com>
Date: Fri, 9 Jul 2021 14:11:10 +1200
Subject: [PATCH 2/2] Improve styling of filter badges in sidebar

The sidebar background can change (via customisations). This forces the inactive state of a filter to have a white background. This was the expected behaviour, as previously inactive badges were only displayed on the main part of the page where the background was always white.
---
 src/components/info/filterBadge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/info/filterBadge.js b/src/components/info/filterBadge.js
index b541d0e9b..5c1e69c62 100644
--- 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;