Add faceted type-ahead search capability to CSET web interface

[jfrost-mo]

CSET output interface improvements developed during my MSc project.

Additional work will be required before merging; see the "Future Work" chapter of my dissertation. This branch will also need a good rebase, as the commit history is a mess, and there were large test files added during development that have been removed, and we don't want to pull them into the project history permanently.

GitHub Copilot was used for review and fix suggestions for the prototype python parser, which was then hand ported to JavaScript. That code has been rebased away.

TODO

1. Fix bugs in parser/web interface. - Done, though probably wants more testing.
2. Introduce a three column layout, as it is commonly requested. Pushed out to Three column layout for web interface #1870.
3. Tweak the CSS to make it look pretty. - No longer absolutely horrendous.
4. Add query help text and examples to the UI.

Contribution checklist

Aim to have all relevant checks ticked off before merging. See the developer's guide for more detail.

• Documentation has been updated to reflect change.
• New code has tests, and affected old tests have been updated.
• All tests and CI checks pass.
• Ensured the pull request title is descriptive.
• Conda lock files have been updated if dependencies have changed.
• Attributed any Generative AI, such as GitHub Copilot, used in this PR.
• Marked the PR as ready to review.

[github-actions]

[jfrost-mo]

Current web UI. Will need some CSS prettification before merging.

[Pierre-siddall]

This looks really good James, you've definitely had a good understanding of the lexer and have implemented clever regex to match the different range of search queries a user may input. Equally, you clearly have demonstrated that you know how the DOM functions by construing HTML elements being added to or removed from the DOM via javascript. I only have a couple of tiny improvements here regarding informative variable names in order to help future developers understand the control flow of your javascript by knowing what is being operated on. However, overall I think this is a well justified piece of work, great job :) .

[jfrost-mo]

@daflack @Sylviabohnenstengel I've tagged you for reviewing this PR, however rather than the code (which Pierre kindly reviewed for me) I'd be especially interested in your thoughts on the web interface produced by running this branch. Any things that you especially like/dislike?

[daflack]

I've been trying out the new functionality for a couple of hours to really stress test it. Overall, it's a great change and I really like it. The drop down menus make it really easy to use, and the pop-outs are great for organising plots how I want to see them.

I have a couple of very minor niggles:

1. sometimes the filtering functionality doesn't work - see as an example. I can't find a consistent way of breaking it the same way though, or at least haven't noticed any patterns. After a bit more exploration it seems to be linked to whether date or plot category is selected - you can't appear to select both using the dropdowns.
2. when the drop down help, and drop down menus it does create a very long menu bar so it is then hard to find the search bar so is there a possibility of keeping the search bar in a fixed location/putting a scroll in for different sections?

Otherwise it looks and works great, and I know through regular use I'll get use to it really quickly.

[Sylviabohnenstengel]

testing the existing output from you and the stress test with a large number of data from David. The website is intuitive to navigate and the drop down menues with tickboxes work very well and make it much easier to navigate. You have clearly turned the brief from all the interviews into a very useful website layout. The popout window functionality is very useful to arrange several windows next to each other in a custom way. :-)

I am adding a running commentary below with things I notice in no particular order:

• this is an extra feature beyond this PR. What would need to be implemented to enable saving a request or several so that the user can switch forth and back between filter choices?
• Is the website displaying the correct plots? choosing MODEL_NAME:"5 km,10 km" VARNAME:"temperature_at_screen_level" METHOD:"SEQ" also lists "MEAN" plots such as mean histogram. The method section is only allowing "SEQ" in this case. Tested with David's CSET_Global_5km_trailblazer_reduced_region... CSET run.
  Then trying to switch manually from "SEQ" to "MEAN" with MODEL_NAME:"5 km,10 km" VARNAME:"temperature_at_screen_level" METHOD: "MEAN" does not show the correct plots, but still the "SEQ" plots.
• I can filter for mean using the title: "mean". But would it not be more logical to filter for mean by method?
• title: "mean" VARNAME:"temperature_at_screen_level" BASE_MODEL:"5 km" OTHER_MODEL:"10 km". Is it confusing that the options do not allow to swap BASE_MODEL and OTHER_MODEL? I know we fix them when setting up CSET. Does this require an explanation somewhere?