From 3783a78091ff7a98d92e464daefb4a16b4d48077 Mon Sep 17 00:00:00 2001
From: eharkins <eli.harkins@gmail.com>
Date: Thu, 7 Oct 2021 12:32:33 -0700
Subject: [PATCH] collapsible filter lists in footer;

see https://github.com/nextstrain/ncov/pull/738#issuecomment-933749455
---
 package-lock.json                  |  7 ++-
 package.json                       |  1 +
 src/components/framework/footer.js | 74 +++++++++++++++++++++---------
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0692afacc..e768a40e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "auspice",
-  "version": "2.29.1",
+  "version": "2.31.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -15461,6 +15461,11 @@
         "react-transition-group": "^1.2.0"
       }
     },
+    "react-collapsible": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.8.4.tgz",
+      "integrity": "sha512-oG4yOk6AGKswe0OD/8t3/nf4Rgj4UhlZUUvqL5jop0/ez02B3dBDmNvs3sQz0PcTpJvt0ai8zF7Atd1SzN/UNw=="
+    },
     "react-dom": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
diff --git a/package.json b/package.json
index 7575a42c6..2d911c71b 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
     "query-string": "^4.2.3",
     "react": "^16.8.6",
     "react-addons-css-transition-group": "^15.6.0",
+    "react-collapsible": "^2.8.4",
     "react-dom": "^16.8.6",
     "react-ga": "^2.2.0",
     "react-helmet": "^5.2.1",
diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js
index c4a03c335..82d68cb6c 100644
--- a/src/components/framework/footer.js
+++ b/src/components/framework/footer.js
@@ -1,7 +1,9 @@
 import React, { Suspense, lazy } from "react";
 import { connect } from "react-redux";
 import styled from 'styled-components';
+import Collapsible from "react-collapsible";
 import { withTranslation } from "react-i18next";
+import {FaAngleUp, FaAngleDown} from "react-icons/fa";
 import { dataFont } from "../../globalStyles";
 import Flex from "./flex";
 import { applyFilter } from "../../actions/tree";
@@ -163,6 +165,25 @@ const removeFiltersButton = (dispatch, filterNames, outerClassName, label) => (
   </SimpleFilter>
 );
 
+const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #F0F0F0;
+  margin: 0px;
+  padding: 15px 10px 10px 10px;
+`;
+const IconContainer = styled.span`
+  font-size: 22px;
+  font-weight: 500;
+`;
+
+const CollapseTitle = ({name, isExpanded=false}) => (
+  <TitleContainer>
+    {name}
+    <IconContainer>{isExpanded ? <FaAngleUp /> : <FaAngleDown />}</IconContainer>
+  </TitleContainer>
+);
+
 
 @connect((state) => {
   return {
@@ -197,30 +218,39 @@ class Footer extends React.Component {
     const totalStateCount = this.props.totalStateCounts[filterName];
     const filterTitle = this.props.metadata.colorings[filterName] ? this.props.metadata.colorings[filterName].title : filterName;
     const activeFilterItems = this.props.activeFilters[filterName].filter((x) => x.active).map((x) => x.value);
+    const title = (<div>
+      {t("Filter by {{filterTitle}}", {filterTitle: filterTitle})}
+      {this.props.activeFilters[filterName].length ? removeFiltersButton(this.props.dispatch, [filterName], "inlineRight", t("Clear {{filterName}} filter", { filterName: filterName})) : null}
+    </div>);
     return (
       <div>
-        {t("Filter by {{filterTitle}}", {filterTitle: filterTitle})}
-        {this.props.activeFilters[filterName].length ? removeFiltersButton(this.props.dispatch, [filterName], "inlineRight", t("Clear {{filterName}} filter", { filterName: filterName})) : null}
-        <div className='filterList'>
-          <Flex wrap="wrap" justifyContent="flex-start" alignItems="center">
-            {
-              Array.from(totalStateCount.keys())
-                .filter((itemName) => isValueValid(itemName)) // remove invalid values present across the tree
-                .sort() // filters are sorted alphabetically
-                .map((itemName) => (
-                  <SimpleFilter
-                    key={itemName}
-                    active={activeFilterItems.indexOf(itemName) !== -1}
-                    onClick={() => dispatchFilter(this.props.dispatch, this.props.activeFilters, filterName, itemName)}
-                  >
-                    <span>
-                      {`${itemName} (${totalStateCount.get(itemName)})`}
-                    </span>
-                  </SimpleFilter>
-                ))
-            }
-          </Flex>
-        </div>
+        <Collapsible
+          triggerWhenOpen={<CollapseTitle name={title} isExpanded />}
+          trigger={<CollapseTitle name={title} />}
+          triggerStyle={{cursor: "pointer", textDecoration: "none"}}
+          transitionTime={100}
+        >
+          <div className='filterList'>
+            <Flex wrap="wrap" justifyContent="flex-start" alignItems="center">
+              {
+                Array.from(totalStateCount.keys())
+                  .filter((itemName) => isValueValid(itemName)) // remove invalid values present across the tree
+                  .sort() // filters are sorted alphabetically
+                  .map((itemName) => (
+                    <SimpleFilter
+                      key={itemName}
+                      active={activeFilterItems.indexOf(itemName) !== -1}
+                      onClick={() => dispatchFilter(this.props.dispatch, this.props.activeFilters, filterName, itemName)}
+                    >
+                      <span>
+                        {`${itemName} (${totalStateCount.get(itemName)})`}
+                      </span>
+                    </SimpleFilter>
+                  ))
+              }
+            </Flex>
+          </div>
+        </Collapsible>
       </div>
     );
   }