Add filter clear-ing context-dependently

Author: sjd210

src/app/components/elements/panels/QuestionFinderFilterPanel.tsx

@@ -229,7 +229,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
             {(isAda || !pageContext.stage) && <CollapsibleList
                 title={listTitles.stage} expanded={listState.stage.state}
                 toggle={() => listStateDispatch({type: "toggle", id: "stage", focus: below["md"](deviceSize)})}
-                numberSelected={(isAda && searchStages.includes(STAGE.ALL)) ? searchStages.length - 1 : searchStages.length}
+                numberSelected={(isAda && searchStages.includes(STAGE.ALL)) ? searchStages.length - 1 : searchStages.filter(s => s !== pageContext.stage).length}
             >
                 {getFilteredStageOptions().map((stage, index) => (
                     <div className={classNames("w-100 ps-3 py-1", {"bg-white": isAda, "ms-2": isPhy, "bg-grey": isPhy && searchStages.includes(stage.value)})} key={index}>
@@ -261,7 +261,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
             <CollapsibleList
                 title={listTitles.topics} expanded={listState.topics.state}
                 toggle={() => listStateDispatch({type: "toggle", id: "topics", focus: below["md"](deviceSize)})}
-                numberSelected={siteSpecific(getChoiceTreeLeaves(selections).length, searchTopics.length)}
+                numberSelected={siteSpecific(getChoiceTreeLeaves(selections).filter(l => l.value !== pageContext.subject).length, searchTopics.length)}
             >
                 {siteSpecific(
                     <div>

src/app/components/elements/svg/HierarchyFilter.tsx

@@ -64,15 +64,15 @@ export function HierarchyFilterHexagonal({tier, index, tiers, choices, selection
                 }
             };
 
-            return <div key={choice.value} className={classNames("ps-3 ms-2", {"ms-3": tier===1, "ms-4 search-field": tier===2, "bg-white": tier===0 && isSelected, "bg-light": tier===1 && isSelected})}>
+            return <div key={choice.value} className={classNames("ps-3 ms-2", {"ms-3": tier===1, "ms-4 search-field": tier===2, "bg-white": tier===0 && isSelected, "bg-grey": tier===1 && isSelected})}>
                 <StyledCheckbox
                     color="primary"
                     checked={isSelected}
                     onChange={selectValue}
                     label={<span>{choice.label}</span>}
                 />
                 {tier < 2 && choices[tier+1] && choice.value in choices[tier+1] && 
-                    <HierarchyFilterHexagonal {...{tier: tier+1, index: choice.value, tiers, choices, selections, questionFinderFilter, setTierSelection}} className={classNames({"bg-white": tier===0, "bg-light": tier===1})}/>
+                    <HierarchyFilterHexagonal {...{tier: tier+1, index: choice.value, tiers, choices, selections, questionFinderFilter, setTierSelection}} className={classNames({"bg-white": tier===0})}/>
                 }
             </div>;
         }

src/app/components/pages/QuestionFinder.tsx

@@ -385,10 +385,10 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
         setSearchDifficulties([]);
         setSearchTopics([]);
         setSearchExamBoards([]);
-        setSearchStages([]);
+        setSearchStages(pageContext.stage ? [pageContext.stage as STAGE] : []);
         setSearchBooks([]);
         setExcludeBooks(false);
-        setSelections([{}, {}, {}]);
+        setSelections([pageContext.subject ? {"subject": [itemiseTag(tags.getById(pageContext.subject as TAG_ID))]} : {}, {}, {}]);
         setSearchStatuses(
             {
                 notAttempted: false,
@@ -429,19 +429,27 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
 
     const FilterTag = ({name}: {name: string}) => {
         return (
-            <div className="tag">
+            <div className="quiz-level-1-tag me-2">
                 {name}
             </div>
         );
     };
 
     const FilterSummary = () => {
-        const selectionList: string[] = getChoiceTreeLeaves(selections).map(leaf => leaf.label);
+        const stageList: string[] = searchStages.filter(stage => stage !== pageContext.stage);
+        const selectionList: string[] = getChoiceTreeLeaves(selections).filter(leaf => leaf.value !== pageContext.subject).map(leaf => leaf.label);
         const statusList: string[] = Object.keys(searchStatuses).filter(status => searchStatuses[status as keyof QuestionStatus]);
 
-        const categories = [searchDifficulties, searchTopics, searchStages, searchExamBoards, statusList, searchBooks, selectionList];
+        const categories = [searchDifficulties, searchTopics, stageList, searchExamBoards, statusList, searchBooks, selectionList].flat();
 
-        return <div> {categories.map(c => c.map(c2 => <FilterTag key={c2} name={c2}/>))} </div>;
+        return <div className="d-flex"> 
+            {categories.map(c => <FilterTag key={c} name={c}/>)}
+            {categories.length > 0 ? 
+                <button className="text-black py-0 btn-link bg-transparent" onClick={(e) => { e.stopPropagation(); clearFilters(); }}>
+                    clear all filters
+                </button> 
+                : <div/>}
+        </div>;
     };
 
     return <Container id="finder-page" className={classNames("mb-5")} { ...(pageContext?.subject && { "data-bs-theme" : pageContext.subject })}>
@@ -498,7 +506,7 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
                     </Col>
                 </Row>}
 
-                <FilterSummary />
+                {isPhy && <FilterSummary/>}
 
                 <Row className="mt-4 position-relative finder-panel">
                     <Col lg={siteSpecific(4, 3)} md={12} xs={12} className={classNames("text-wrap my-2", {"d-none": isPhy})} data-testid="question-finder-filters">