Question Finders

[sjd210]

Adds new question finder page layouts and styling.

I'm still not entirely happy with the actual filter panel specifics - we probably ought to change some font size/spacing/animation/etc. still to bring them more in-line with the designs - however I've been working on this for far too long without anyone else's eyes on it so I won't mess with these quite yet.

Probably the most significant implication of this branch for the redesign outside the QF pages themselves is that I've changed StyledCheckbox logic to use the new Figma iconset for Phy. Some of it is still probably quite messy (e.g. I've used an icon-checkbox-bg element to colour the background of an empty box, but the background property to do so on a partial box)

Points to note:

• This required rewriting the Topics search structure from a 2D array to a tree. Since depth matters for determining Subject/Field/Topic, and to better fit the existing code/site, this is in the form of an array of dictionaries. This is the example I wrote while developing:

When a user has selected both Maths as a subject and Biology > Ecology > Ecosystems as a topic:

-----------------------------------------------------------------------------
CHOICES (all of which are now visible simultaneously)
[
	{
		"Subject": ["Biology", "Chemistry", "Physics", "Maths"]
	},
	{
		"Biology": ["Cell Biology", "Biochemistry", "Genetics", "Physiology", "Ecology", "Evolution"], 
		"Maths": ["Number", "Algebra", "Geometry", "Functions", "Calculus", "Statistics"]
	}, 
	{
		"Ecology": ["Populations", "Ecosystems", "Nutrient Cycles", "Biodiversity"]
	}
]


-----------------------------------------------------------------------------

SELECTIONS (the checked boxes)
[
	{
		"Subject": ["Biology", "Maths"]
	},
	{
		"Biology": ["Ecology"], 
	}, 
	{
		"Ecology": ["Ecosystems"]
	}
]

-----------------------------------------------------------------------------

• The backend will need an update at some point in the future to be able to search across subject/field/topic lines. In this example case, anything from Maths OR Ecosystems as these are the leaf nodes. They are currently being sent to the API in the same 2D array format as before, but this can change fairly easily depending on how we implement it.

• The books on a QF page are filtered depending on page context. I've manually labelled them here, but we might want a universal constant for these instead EDIT: This has been done on the teacher dashboard branch. Shouldn't be hard to copy it over.

• Question finder filters are stored in the URL (so it can be linked to, maintained on a hard reload, etc). Right now this includes the subject and stage for the current page context. I've left this as-is for now, but we could probably rewrite some of that logic to remove the page-inherent filters from the URL but still maintain the current behaviour.

[codecov]

Codecov Report

Attention: Patch coverage is 17.44186% with 142 lines in your changes missing coverage. Please review.

Project coverage is 36.66%. Comparing base (5aee6ba) to head (7b65254).

Files with missing lines	Patch %	Lines
src/app/components/pages/QuestionFinder.tsx	5.68%	83 Missing ⚠️
...ents/elements/panels/QuestionFinderFilterPanel.tsx	11.42%	31 Missing ⚠️
...rc/app/components/elements/svg/HierarchyFilter.tsx	24.00%	19 Missing ⚠️
...c/app/components/elements/layout/SidebarLayout.tsx	33.33%	6 Missing ⚠️
src/app/components/elements/PageTitle.tsx	66.66%	2 Missing ⚠️
src/app/components/pages/GameboardFilter.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@                Coverage Diff                @@
##           redesign-2024    #1305      +/-   ##
=================================================
+ Coverage          36.53%   36.66%   +0.12%     
=================================================
  Files                472      472              
  Lines              20724    20587     -137     
  Branches            6795     6765      -30     
=================================================
- Hits                7572     7548      -24     
+ Misses             13114    13001     -113     
  Partials              38       38              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.