Redesign: concept finder improvements

[axlewin]

• Add stage filtering to main concept finder
• Don’t automatically deselect subject when fields are deselected (concept finder behaviour should match QF behaviour here)
• Move “these concepts have been filtered…” message out of sidebar

[axlewin]

@barna-isaac Thanks for looking at this! The latest batch of commits should address all of your comments, plus a few other inconsistencies I found; there's justification for some choices in the commit messages, but let me know if you have any more questions/suggestions.

[barna-isaac]

@jacbn , can you please look at this? I've been trying to get these alginments right, but I just hate how unevenly and how much white space we waste. Does "Search and Filter" really need these huge margins? I'd be happiest just removing them, but this is what it looks like on every other page too, and I don't want to introduce inconsistencies.

[axlewin]

@barna-isaac : Whilst I agree the inline style wasn't the ideal solution, I'm not sure that this is either. It still looks strange on certain screen widths, just differently:

[barna-isaac]

@axlewin, do you mean it's looking weird because the text is now three lines? Maybe we keep encountering these issues because the button text is just too long? Maybe we could just change the button text so it's to just "All questions" and "All concepts"?

[axlewin]

do you mean it's looking weird because the text is now three lines?

Yeah - compared to before, where this was 2 lines of text & 2 lines for the button. I'm not sure it makes a big difference though, if you prefer it this way.

I'm still not sure I understand your changes though. Does the mb-3 on the <p> do anything?

[barna-isaac]

@axlewin: no, I just put the mb-3 on <p> because there also needs to be an mb-3 on the button, and this highlights the symmetry. But <p> gets mb-3 by default. What do you think should we do to make it look better? Or should we maybe just leave it as is?

[barna-isaac]

However, I think this is a valid issue: if a selected filter becomes empty, it remains applied but disappears from the screen. This leads to invalid screens, where "Physics" is partially selected but doesn't actually show any selected descendants, or the final screen of the attached recording, where it looks like only the Biology filter is selected but we don't show any results.

I think the easiest solution would be if we always showed empty filters.

Screen.Recording.2025-05-23.at.10.55.45.mov

[axlewin]

@axlewin: no, I just put the mb-3 on <p> because there also needs to be an mb-3 on the button, and this highlights the symmetry. But <p> gets mb-3 by default. What do you think should we do to make it look better? Or should we maybe just leave it as is?

It's not the neatest solution, but we could just remove the hardcoded style and then change the classes on the outermost div to allow the button to wrap below the text on the problematic screen widths:
<div className="d-flex align-items-baseline flex-wrap flex-md-nowrap flex-lg-wrap flex-xl-nowrap ">

This at least stops either element wrapping to 3 lines, and avoids complicating the DOM by adding another wrapper div around the AffixButton.

There are a handful of screen sizes where it will look strange either way though, so we can leave it as-is if you prefer.

[axlewin]

However, I think this is a valid issue: if a selected filter becomes empty, it remains applied but disappears from the screen. This leads to invalid screens, where "Physics" is partially selected but doesn't actually show any selected descendants, or the final screen of the attached recording, where it looks like only the Biology filter is selected but we don't show any results.

I think the easiest solution would be if we always showed empty filters.

As discussed, always showing empty stage filters isn't ideal because it leads to cases where you can't deselect a field (try selecting physics > thermal > year 7 & 8). We could show empty field filters too, but this might be confusing for students (e.g. if they've selected year 7 & 8, and calculus is showing up as an option). I also worry that when only published content is shown, this problem would be worse, because there would be more stage/field combinations with no results.

My proposal here is to always show selected stage filters, even if there are no results. From a quick test this seems to avoid any cases where users can get 'stuck' and unable to deselect a selected filter.

It's worth noting that this is different from the implementation discussed on /practice_tests, but I think it's clearer.

(As always, please see if you can find any more cases that still don't work!)

[barna-isaac]

@axlewin I like the idea of always showing selected stage filters, and propose that we extend it to always show selected field filters as well.

[axlewin]

I'm not concerned about the whitespace issues you mentioned (as you said, the spacing matches other pages). Up to you if you'd like to address those before merging.