Start adding context-sensitive checkboxes

sjd210 · sjd210 · commit 22ad0ba2ee18 · 2025-02-07T17:09:43.000Z
diff --git a/public/assets/phy/icons/redesign/icon-checkbox-partial-alt.svg b/public/assets/phy/icons/redesign/icon-checkbox-partial-alt.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="1.5" fill="white" stroke="#6F6F78"/>
+<path d="M11.2929 3.70711L3.70711 11.2929C3.07714 11.9229 3.52331 13 4.41421 13H12C12.5523 13 13 12.5523 13 12V4.41421C13 3.52331 11.9229 3.07714 11.2929 3.70711Z" fill="#3A8621"/>
+</svg>
diff --git a/public/assets/phy/icons/redesign/icon-checkbox-partial.svg b/public/assets/phy/icons/redesign/icon-checkbox-partial.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="1.5" fill="white" stroke="#6F6F78"/>
+<rect x="4" y="4" width="8" height="8" rx="1" fill="#BEBEBE"/>
+</svg>
diff --git a/src/app/components/elements/panels/QuestionFinderFilterPanel.tsx b/src/app/components/elements/panels/QuestionFinderFilterPanel.tsx
@@ -145,8 +145,8 @@ export interface QuestionFinderFilterPanelProps {
     searchStatuses: QuestionStatus, setSearchStatuses: Dispatch<SetStateAction<QuestionStatus>>;
     searchBooks: string[], setSearchBooks: Dispatch<SetStateAction<string[]>>;
     excludeBooks: boolean, setExcludeBooks: Dispatch<SetStateAction<boolean>>;
-    tiers: Tier[], choices: ChoiceTree[]; selections: ChoiceTree[]; 
-    setTierSelection: (tierIndex: number) => React.Dispatch<React.SetStateAction<ChoiceTree>>
+    tiers: Tier[], choices: ChoiceTree[]; 
+    selections: ChoiceTree[], setSelections: Dispatch<SetStateAction<ChoiceTree[]>>;
     applyFilters: () => void; clearFilters: () => void;
     validFiltersSelected: boolean; 
     searchDisabled: boolean;
@@ -161,7 +161,7 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
         searchStatuses, setSearchStatuses,
         searchBooks, setSearchBooks,
         excludeBooks, setExcludeBooks,
-        tiers, choices, selections, setTierSelection,
+        tiers, choices, selections, setSelections,
         applyFilters, clearFilters, validFiltersSelected, 
         searchDisabled, setSearchDisabled
     } = props;
@@ -268,8 +268,8 @@ export function QuestionFinderFilterPanel(props: QuestionFinderFilterPanelProps)
                         <HierarchyFilterHexagonal {...{
                             tier: pageContext.subject ? 1 : 0,
                             index: pageContext.subject as TAG_ID ?? TAG_LEVEL.subject,
-                            tiers, choices, selections,
-                            questionFinderFilter: true, setTierSelection
+                            tiers, choices, selections, setSelections,
+                            questionFinderFilter: true
                         }}/>
                     </div>,
                     groupBaseTagOptions.map((tag, index) => (
diff --git a/src/app/components/elements/svg/HierarchyFilter.tsx b/src/app/components/elements/svg/HierarchyFilter.tsx
@@ -21,6 +21,7 @@ import {StyledSelect} from "../inputs/StyledSelect";
 import { Label } from "reactstrap";
 import { StyledCheckbox } from "../inputs/StyledCheckbox";
 import { ChoiceTree } from "../panels/QuestionFinderFilterPanel";
+import { pruneTreeNode } from "../../pages/QuestionFinder";
 
 export type TierID = "subjects" | "fields" | "topics";
 export interface Tier {id: TierID; name: string; for: string}
@@ -35,7 +36,7 @@ interface HierarchySummaryProps {
 
 interface HierarchyFilterProps extends HierarchySummaryProps {
     questionFinderFilter?: boolean;
-    setTierSelection: (tierIndex: number) => React.Dispatch<React.SetStateAction<ChoiceTree>>;
+    setSelections: (selections: ChoiceTree[]) => void;
     tier: number;
     index: TAG_ID | TAG_LEVEL;
     className?: string;
@@ -49,38 +50,42 @@ function naturalLanguageList(list: string[]) {
     return `${lowerCaseList.slice(0, lastIndex).join(", ")} and ${lowerCaseList[lastIndex]}`;
 }
 
-export function HierarchyFilterHexagonal({tier, index, tiers, choices, selections, questionFinderFilter, setTierSelection, className}: HierarchyFilterProps) {  
-    return <div className={className}>
+export function HierarchyFilterHexagonal({tier, index, tiers, choices, selections, questionFinderFilter, className, setSelections}: HierarchyFilterProps) {  
+    return <div className={classNames("ms-3", className)}>
         {choices[tier] && choices[tier][index] && choices[tier][index].map((choice) => {
             const isSelected = selections[tier] && selections[tier][index]?.map(s => s.value).includes(choice.value);
             function selectValue() {
+                let newSelections = [...selections];
                 if (selections[tier] && selections[tier][index]) {
-                    setTierSelection(tier)({...selections[tier], [index]: isSelected ? 
-                        selections[tier][index].filter(s => s.value !== choice.value) :
-                        [...selections[tier][index], choice]});
+                    if (isSelected) {
+                        newSelections = pruneTreeNode(newSelections, choice.value);
+                    } else {
+                        newSelections[tier][index]?.push(choice);
+                    }
                 }
                 else {
-                    setTierSelection(tier)({...selections[tier], [index]: [choice]});
+                    newSelections[tier] = {...selections[tier], [index]: [choice]};
                 }
+                setSelections(newSelections);
             };
 
-            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})}>
+            return <div key={choice.value} className={classNames("ps-3", {"ms-2": tier===0, "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})}/>
+                    <HierarchyFilterHexagonal {...{tier: tier+1, index: choice.value, tiers, choices, selections, questionFinderFilter, setSelections}} className={classNames({"bg-white": tier===0})}/>
                 }
             </div>;
         }
         )}
     </div>;
 }
 
-export function HierarchyFilterSummary({tiers, choices, selections}: HierarchySummaryProps) {
+/* export function HierarchyFilterSummary({tiers, choices, selections}: HierarchySummaryProps) {
     const hexagon = calculateHexagonProportions(10, 2);
     const hexKeyPoints = addHexagonKeyPoints(hexagon);
     const connection = {length: 60};
@@ -104,7 +109,7 @@ export function HierarchyFilterSummary({tiers, choices, selections}: HierarchySu
             {`${naturalLanguageList(selectionSummary)} filter${selectionSummary.length != 1 || selections[0]?.length != 1 ? "s" : ""} selected`}
         </title>
         <g id="hexagonal-filter-summary" transform={`translate(1,1)`}>
-            {/* Connection & Hexagon */}
+            
             <g transform={`translate(${connection.length / 2 - hexKeyPoints.x.center}, 0)`}>
                 {selectionSummary.map((selection, i) => {
                     const yCenter = hexKeyPoints.y.center;
@@ -120,7 +125,7 @@ export function HierarchyFilterSummary({tiers, choices, selections}: HierarchySu
                 })}
             </g>
 
-            {/* Text */}
+           
             {selectionSummary.map((selection, i) => {
                 return <g key={selection} transform={`translate(${((hexagon.halfWidth + hexagon.padding) * 2 + connection.length) * i}, 0)`}>
                     <g transform={`translate(0, ${hexagon.quarterHeight * 4 + hexagon.padding})`}>
@@ -143,4 +148,4 @@ export function HierarchyFilterSelects({tiers, choices, selections, setTierSelec
             <StyledSelect name={tier.for} onChange={selectOnChange(setTierSelection(i), false)} isMulti options={choices[i]} value={selections[i]} />
         </React.Fragment>)}
     </React.Fragment>;
-}
+} */
diff --git a/src/app/components/pages/QuestionFinder.tsx b/src/app/components/pages/QuestionFinder.tsx
@@ -48,6 +48,7 @@ import { ShareLink } from "../elements/ShareLink";
 import { Spacer } from "../elements/Spacer";
 import { ListView } from "../elements/list-groups/ListView";
 import { ContentTypeVisibility, LinkToContentSummaryList } from "../elements/list-groups/ContentSummaryListGroupItem";
+import { get, set } from "lodash";
 
 // Type is used to ensure that we check all query params if a new one is added in the future
 const FILTER_PARAMS = ["query", "topics", "fields", "subjects", "stages", "difficulties", "examBoards", "book", "excludeBooks", "statuses"] as const;
@@ -85,7 +86,7 @@ function processTagHierarchy(subjects: string[], fields: string[], topics: strin
             if (index === 0)
                 selectionItems.push({[TAG_LEVEL.subject]: validTierTags.map(itemiseTag)} as ChoiceTree);
             else {
-                const parents =  Object.values(selectionItems[index-1]).flat();
+                const parents = selectionItems[index-1] ? Object.values(selectionItems[index-1]).flat() : [];
                 const validChildren = parents.map(p => tags.getChildren(p.value).filter(c => tier.includes(c.id)).map(itemiseTag));
 
                 const currentLayer: ChoiceTree = {};
@@ -100,6 +101,28 @@ function processTagHierarchy(subjects: string[], fields: string[], topics: strin
     return selectionItems;
 }
 
+export function pruneTreeNode(tree: ChoiceTree[], filter: string, recursive?: boolean): ChoiceTree[] {
+    let newTree = [...tree];
+    newTree.forEach((tier, i) => {
+        if (tier[filter as TAG_ID]) { // removing children of node
+            Object.values(tier[filter as TAG_ID] || {}).forEach(v => pruneTreeNode(newTree, v.value, recursive));
+            delete newTree[i][filter as TAG_ID];
+        } else { // removing node itself
+            const parents = Object.keys(tier);
+            parents.forEach(parent => {
+                if (newTree[i][parent as TAG_ID]?.some(c => c.value === filter)) {
+                    newTree[i][parent as TAG_ID] = newTree[i][parent as TAG_ID]?.filter(c => c.value !== filter);
+                    if (recursive && newTree[i][parent as TAG_ID]?.length === 0) {
+                        newTree = pruneTreeNode(newTree, parent, true);
+                    }
+                }
+            });
+        }
+    });
+
+    return newTree;
+}
+
 function getInitialQuestionStatuses(params: ListParams<FilterParams>): QuestionStatus {
     const statuses = arrayFromPossibleCsv(params.statuses);
     if (statuses.length < 1) {
@@ -171,8 +194,7 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
         processTagHierarchy(
             arrayFromPossibleCsv(pageContext.subject ? [pageContext.subject] : params.subjects), 
             arrayFromPossibleCsv(params.fields), 
-            arrayFromPossibleCsv(params.topics)
-        )
+            arrayFromPossibleCsv(params.topics))  
     );
 
     const choices: ChoiceTree[] = [];
@@ -199,14 +221,6 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
         {id: "topics" as TierID, name: "Topic"}
     ].map(tier => ({...tier, for: "for_" + tier.id}));
 
-    const setTierSelection = (tierIndex: number) => {
-        return ((values: ChoiceTree) => {
-            const newSelections = selections.slice(0, 3);
-            newSelections[tierIndex] = values;
-            setSelections(newSelections);
-        }) as React.Dispatch<React.SetStateAction<ChoiceTree>>;
-    };
-
     const {results: questions, totalResults: totalQuestions, nextSearchOffset} = useAppSelector((state: AppState) => state && state.questionSearchResult) || {};
     const nothingToSearchFor =
         [searchQuery, searchTopics, searchBooks, searchStages, searchDifficulties, searchExamBoards].every(v => v.length === 0) &&
@@ -376,7 +390,7 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
             || searchStages.length > 0
             || searchBooks.length > 0
             || excludeBooks
-            || selections.some(tier => Object.keys(tier).length > 0)
+            || selections.some(tier => Object.values(tier).flat().length > 0)
             || Object.entries(searchStatuses).some(e => e[1]));
         if (isPhy) applyFilters();
     }, [searchDifficulties, searchTopics, searchExamBoards, searchStages, searchBooks, excludeBooks, selections, searchStatuses]);
@@ -427,27 +441,44 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
         <IsaacSpinner />
     </div>;
 
+    function removeFilterTag(filter: string) {
+        if (searchStages.includes(filter as STAGE)) {
+            setSearchStages(searchStages.filter(f => f !== filter));
+        } else if (getChoiceTreeLeaves(selections).some(leaf => leaf.value === filter)) {
+            setSelections(pruneTreeNode(selections, filter, true));
+        } else if (searchDifficulties.includes(filter as Difficulty)) {
+            setSearchDifficulties(searchDifficulties.filter(f => f !== filter));
+        } else if (searchExamBoards.includes(filter as ExamBoard)) {
+            setSearchExamBoards(searchExamBoards.filter(f => f !== filter));
+        } else if (searchBooks.includes(filter)) {
+            setSearchBooks(searchBooks.filter(f => f !== filter));
+        } else if (searchStatuses[filter as keyof QuestionStatus]) {
+            setSearchStatuses({...searchStatuses, [filter as keyof QuestionStatus]: false});
+        }
+    };
+
     const FilterTag = ({name}: {name: string}) => {
         return (
-            <div className="quiz-level-1-tag me-2">
+            <div data-bs-theme="neutral" className="filter-tag me-2 d-flex align-items-center">
                 {name}
+                <button className="icon icon-close" onClick={() => removeFilterTag(name)} aria-label="Close"/>
             </div>
         );
     };
 
     const FilterSummary = () => {
         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 selectionList: string[] = getChoiceTreeLeaves(selections).filter(leaf => leaf.value !== pageContext.subject).map(leaf => leaf.value); // value for now???
         const statusList: string[] = Object.keys(searchStatuses).filter(status => searchStatuses[status as keyof QuestionStatus]);
 
-        const categories = [searchDifficulties, searchTopics, stageList, searchExamBoards, statusList, searchBooks, selectionList].flat();
+        const categories = [searchDifficulties, stageList, searchExamBoards, statusList, searchBooks, selectionList].flat();
 
         return <div className="d-flex"> 
             {categories.map(c => <FilterTag key={c} name={c}/>)}
-            {categories.length > 0 ? 
+            {categories.length > 0 ?
                 <button className="text-black py-0 btn-link bg-transparent" onClick={(e) => { e.stopPropagation(); clearFilters(); }}>
                     clear all filters
-                </button> 
+                </button>
                 : <div/>}
         </div>;
     };
@@ -482,7 +513,8 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
                 searchStatuses, setSearchStatuses,
                 searchBooks, setSearchBooks,
                 excludeBooks, setExcludeBooks,
-                tiers, choices, selections, setTierSelection,
+                tiers, choices, 
+                selections, setSelections,
                 applyFilters, clearFilters,
                 validFiltersSelected, searchDisabled, setSearchDisabled
             }} />
@@ -518,7 +550,8 @@ export const QuestionFinder = withRouter(({location}: RouteComponentProps) => {
                             searchStatuses, setSearchStatuses,
                             searchBooks, setSearchBooks,
                             excludeBooks, setExcludeBooks,
-                            tiers, choices, selections, setTierSelection,
+                            tiers, choices, 
+                            selections, setSelections,
                             applyFilters, clearFilters,
                             validFiltersSelected, searchDisabled, setSearchDisabled
                         }} /> {/* Temporarily disabled at >=lg to test list view until this filter is moved into the sidebar */}
diff --git a/src/scss/common/checkbox.scss b/src/scss/common/checkbox.scss
@@ -31,12 +31,12 @@
           }
 
           &[color="primary"] {
-            background: $primary;
-            border-color: $primary;
+            background: $color-brand-500;
+            border-color: $color-brand-500;
 
             &:hover, &:disabled {
-              background: darken($primary, 10%);
-              border-color: darken($primary, 10%);
+              background: darken($color-brand-500, 10%);
+              border-color: darken($color-brand-500, 10%);
             }
           }
 
diff --git a/src/scss/phy/list-groups.scss b/src/scss/phy/list-groups.scss
@@ -75,6 +75,16 @@
   font-weight: bold;
 }
 
+.filter-tag {
+  @include pill-tag($color-neutral-900, $color-neutral-100, $color-neutral-200);
+  border-width: 2px;
+
+  .icon {
+    background-color: var(--buttons-light-icon);
+    margin-left: 0.25rem;
+  }
+}
+
 .list-group-links li a.card-tag {
   @include pill-tag($color-neutral-900, var(--subject-color-50), var(--subject-color-100));
   font-family: $secondary-font;

Original file line number	Diff line number	Diff line change
`@@ -31,12 +31,12 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`&[color="primary"] {`
`34`		`- background: $primary;`
`35`		`- border-color: $primary;`
	`34`	`+ background: $color-brand-500;`
	`35`	`+ border-color: $color-brand-500;`
`36`	`36`
`37`	`37`	`&:hover, &:disabled {`
`38`		`- background: darken($primary, 10%);`
`39`		`- border-color: darken($primary, 10%);`
	`38`	`+ background: darken($color-brand-500, 10%);`
	`39`	`+ border-color: darken($color-brand-500, 10%);`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`