Add faceted type-ahead search capability to CSET web interface #1713
Conversation
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
from
dcb8464 to
281677c
Compare
|
|
jfrost-mo
changed the title
jfrost-mo
changed the title
This comment was marked as resolved.
This comment was marked as resolved.
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
4 times, most recently
from
06d6e99 to
47e766b
Compare
This comment was marked as outdated.
This comment was marked as outdated.
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
4 times, most recently
from
4edac77 to
7ed878c
Compare
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
2 times, most recently
from
25f9105 to
dff23c5
Compare
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
from
3a00a7b to
e5c20e5
Compare
Current web UI. Will need some CSS prettification before merging.
|
Additionally included is a conversion of the index to JSON Lines (In theory it should be more efficient, but in practice we still load the whole string first. At least it looks nicer in the index file.) Non-useful entries are removed from the index before it is written, so it only contains information the client will need.
Removes redundant negative operators and allows facets to be any literal. Comparisons are now case insensitive.
jfrost-mo
force-pushed
the
MSc_ui_improvements
branch
from
e5c20e5 to
bc07f67
Compare
Pierre-siddall
left a comment
Pierre-siddall
left a comment
There was a problem hiding this comment.
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 :) .
| let cond_func; | ||
| switch (operator) { | ||
| case Operator.IN: | ||
| cond_func = function cond_in(d) { |
There was a problem hiding this comment.
Just a small thing here in term of making it easier to understand the javascript, I reckon this class would be easier to read if d had a slightly more informative name for the data being passed to the function.
| function updateFacetQuery(e) { | ||
| const facet = e.target.name; | ||
| const value = e.target.value; |
There was a problem hiding this comment.
Similarly to the previous comment I reckon that the e variable could have a slightly more informative name to make it crystal clear what is being operated on.
| // responsiveness immediately perform the search if a space is typed, as that | ||
| // indicates a completed search term. | ||
| let searchTimeoutID = undefined; | ||
| function debounce(e) { |
There was a problem hiding this comment.
Similarly here e could be better named.
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
Fix bugs in parser/web interface.- Done, though probably wants more testing.Introduce a three column layout, as it is commonly requested.Pushed out to Three column layout for web interface #1870.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.