[filters] minor fixes

nextstrain · Nov 18, 2020 · b6a6920 · b6a6920
1 parent 49895ac
commit b6a6920
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/src/components/controls/filter.js b/src/components/controls/filter.js
@@ -77,7 +77,7 @@ class FilterData extends React.Component {
       const n = this.props.activeFilters[filterName].filter((f) => f.active).length;
       return {
         filterName,
-        displayName: (filterName===strainSymbol ? "samples" : filterName) + ` (n=${n})`,
+        displayName: `${n} x ${filterName===strainSymbol ? "samples" : filterName}`,
         remove: () => {this.props.dispatch(applyFilter("set", filterName, []));}
       };
     });
@@ -102,12 +102,14 @@ class FilterData extends React.Component {
         {inUseFilters.length ? (
           <>
             <SidebarSubtitle spaceAbove>
-              {`${inUseFilters.length} type${inUseFilters.length===1?'':'s'} of filter${inUseFilters.length===1?'':'s'} currently active:`}
+              {`Currently selected filter categories:`}
             </SidebarSubtitle>
             {inUseFilters.map((filter) => (
-              <FilterBadge active key={filter.displayName} id={filter.displayName} remove={filter.remove}>
-                {filter.displayName}
-              </FilterBadge>
+              <div style={{display: 'inline-block', margin: '2px'}} key={filter.displayName}>
+                <FilterBadge active id={filter.displayName} remove={filter.remove}>
+                  {filter.displayName}
+                </FilterBadge>
+              </div>
             ))}
           </>
         ) : null}

diff --git a/src/components/info/info.js b/src/components/info/info.js
@@ -176,20 +176,22 @@ class Info extends React.Component {
   }
 
   makeFilteredDatesButton() {
-    return (
+    return ([
+      'timeFilter',
       <FilterBadge
         key="timefilter"
         id="timefilter"
         remove={() => this.props.dispatch(changeDateFilter({newMin: this.props.absoluteDateMin, newMax: this.props.absoluteDateMax}))}
       >
         {`${styliseDateRange(this.props.dateMin)} to ${styliseDateRange(this.props.dateMax)}`}
       </FilterBadge>
-    );
+    ]);
   }
   createFilterBadges(filterName) {
     return this.props.filters[filterName]
       .sort((a, b) => a.value < b.value ? -1 : a.value > b.value ? 1 : 0)
-      .map((item) => (
+      .map((item) => ([
+        item.value,
         <FilterBadge
           key={item.value}
           id={item.value}
@@ -204,7 +206,7 @@ class Info extends React.Component {
             {filterName!==strainSymbol && ` (${this.props.totalStateCounts[filterName].get(item.value)})`}
           </span>
         </FilterBadge>
-      ));
+      ]));
   }
   clearFilterButton(field) {
     return (
@@ -261,10 +263,10 @@ class Info extends React.Component {
     Reflect.ownKeys(this.props.filters)
       .filter((filterName) => this.props.filters[filterName].length > 0)
       .forEach((filterName) => {
-        filtersByCategory.push(this.createFilterBadges(filterName));
+        filtersByCategory.push({name: filterName===strainSymbol?'strain':filterName, badges: this.createFilterBadges(filterName)});
       });
     if (!datesMaxed) {
-      filtersByCategory.push([this.makeFilteredDatesButton()]);
+      filtersByCategory.push({name: 'temporal', badges: [this.makeFilteredDatesButton()]});
     }
 
     return (
@@ -280,8 +282,8 @@ class Info extends React.Component {
             {showExtended && filtersByCategory.length ? (
               <>
                 {t("Filtered to") + " "}
-                {filtersByCategory.map((filters, idx) => (
-                  <Brackets idx={idx} badges={filters}/>
+                {filtersByCategory.map((filter, idx) => (
+                  <Brackets idx={idx} badges={filter.badges} key={filter.name}/>
                 ))}
                 {". "}
               </>
@@ -304,11 +306,11 @@ const Brackets = ({badges, idx}) => (
   <span style={{fontSize: "2rem", padding: "0px 2px"}}>
     {idx!==0 && <Intersect id={'intersect'+idx}/>}
     {badges.length === 1 ? null : `{`}
-    {badges.map((b, i) => (
-      <>
-        {b}
+    {badges.map(([name, badge], i) => (
+      <span key={name}>
+        {badge}
         {i!==badges.length-1 ? ", " : null}
-      </>
+      </span>
     ))}
     {badges.length === 1 ? null : `}`}
   </span>