From 3783a78091ff7a98d92e464daefb4a16b4d48077 Mon Sep 17 00:00:00 2001 From: eharkins Date: Thu, 7 Oct 2021 12:32:33 -0700 Subject: [PATCH 1/3] 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) => ( ); +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}) => ( + + {name} + {isExpanded ? : } + +); + @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 = (
+ {t("Filter by {{filterTitle}}", {filterTitle: filterTitle})} + {this.props.activeFilters[filterName].length ? removeFiltersButton(this.props.dispatch, [filterName], "inlineRight", t("Clear {{filterName}} filter", { filterName: filterName})) : null} +
); return (
- {t("Filter by {{filterTitle}}", {filterTitle: filterTitle})} - {this.props.activeFilters[filterName].length ? removeFiltersButton(this.props.dispatch, [filterName], "inlineRight", t("Clear {{filterName}} filter", { filterName: filterName})) : null} -
- - { - Array.from(totalStateCount.keys()) - .filter((itemName) => isValueValid(itemName)) // remove invalid values present across the tree - .sort() // filters are sorted alphabetically - .map((itemName) => ( - dispatchFilter(this.props.dispatch, this.props.activeFilters, filterName, itemName)} - > - - {`${itemName} (${totalStateCount.get(itemName)})`} - - - )) - } - -
+ } + trigger={} + triggerStyle={{cursor: "pointer", textDecoration: "none"}} + transitionTime={100} + > +
+ + { + Array.from(totalStateCount.keys()) + .filter((itemName) => isValueValid(itemName)) // remove invalid values present across the tree + .sort() // filters are sorted alphabetically + .map((itemName) => ( + dispatchFilter(this.props.dispatch, this.props.activeFilters, filterName, itemName)} + > + + {`${itemName} (${totalStateCount.get(itemName)})`} + + + )) + } + +
+
); } From 1be1ec00a9417013e31ca7b08aa902bbfe3a0ac9 Mon Sep 17 00:00:00 2001 From: James Hadfield Date: Tue, 19 Oct 2021 16:16:58 +1300 Subject: [PATCH 2/3] Tweak padding in footer --- src/components/framework/footer.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js index 82d68cb6c..c93ab7d56 100644 --- a/src/components/framework/footer.js +++ b/src/components/framework/footer.js @@ -94,8 +94,8 @@ const FooterStyles = styled.div` } .line { - margin-top: 20px; - margin-bottom: 20px; + margin-top: 15px; + margin-bottom: 15px; border-bottom: 1px solid #CCC; } @@ -168,9 +168,8 @@ const removeFiltersButton = (dispatch, filterNames, outerClassName, label) => ( const TitleContainer = styled.div` display: flex; justify-content: space-between; - border-top: 1px solid #F0F0F0; margin: 0px; - padding: 15px 10px 10px 10px; + padding: 0px; `; const IconContainer = styled.span` font-size: 22px; From 6bc7f3c3422a989dad2cd66cf0366d6b10606546 Mon Sep 17 00:00:00 2001 From: James Hadfield Date: Tue, 19 Oct 2021 16:17:51 +1300 Subject: [PATCH 3/3] Add number of filter values to filter header Makes it easier to understand filters without needing to expand/contract each filter. --- src/components/framework/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js index c93ab7d56..630ffaf33 100644 --- a/src/components/framework/footer.js +++ b/src/components/framework/footer.js @@ -218,7 +218,7 @@ class Footer extends React.Component { 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 = (
- {t("Filter by {{filterTitle}}", {filterTitle: filterTitle})} + {t("Filter by {{filterTitle}}", {filterTitle: filterTitle}) + ` (n=${totalStateCount.size})`} {this.props.activeFilters[filterName].length ? removeFiltersButton(this.props.dispatch, [filterName], "inlineRight", t("Clear {{filterName}} filter", { filterName: filterName})) : null}
); return (