search

NatLibFi / Skosmos

Thesaurus and controlled vocabulary browser using SKOS and SPARQL
Other
218 stars 94 forks source link

Vocab search field in header bar #1514

Open joelit opened 9 months ago

joelit commented 9 months ago

Description of the enhancement

PR #1470 contains the first implementation of vocabulary search results page. This needst to be built upon, before we have a demo-ready feature for the search in whole.

Who are the users that would benefit from the enhancement and how?

Getting this ready would be one of the first Skosmos demos, so the users would be testers and the audiences interested in Skosmos 3.0 development

What new functionalities would the enhancement make possible?

Vocabulary search field specification

  1. General functionality

    • [x] 1.1 Twig-templates, Bootstrap-layout and CSS
    • [x] 1.2 Search field can be emptied by clicking X
    • [x] 1.3 Search can be executed with a chosen content language, or with all languages (cypress tests for this)
    • [x] 1.4 Dropdown menu styling should match design expectations (Bootstrap, if possible)
    • [ ] 1.4.1 Dropdown menu scroll bar can be styled to colour scheme?
    • [ ] 1.4.2 Menu item highlight elements should be designed according to unified scheme
    • [x] 1.5 Once user has stopped typing after 300 ms, submit the search
    • [x] 1.5.1 Process the search results into a stored object that facilitates caching and interrupting
    • [x] 1.6 Append an asterix after the search term, if the search term does not contain an asterix at some point
    • [x] 1.7 Once the search results are calculated, dispaly the dropdown menu
    • [x] 1.7.1 If there are no results, show the dropdown with no results -message
    • [x] 1.7.2 If the user writes more text in addition to previously given input, show the result of the latest input
    • [x] 1.8 Hide the dropdown list, if the user:
    • [x] 1.8.1 Clears the text box from the clear-button
    • [x] 1.8.2 Deletes the contentents of the input field
    • [x] 1.8.3 Clicks on somewhere outside of the search result dropdown

  2. Language options

    • [x] 2.1 Default language is chosen from a cookie (cypress tests for this)
    • [x] 2.2 Changing the search language changes the content language
    • [x] 2.2.1 Udpating the content language updates the cookie (cypress tests for this)
    • [x] 2.2.2 Updating the content language executes a partial page load (cypress tests for this)
    • [x] 2.2 Contents for the language menu are defined in the SKOSMOS JS-object (cypress tests for this)
    • [x] 2.3 All UI text is in English (in the form of translation message IDs)
    • [x] 2.4 Dropdown menu language codes should be translated to the UI language
    • [ ] 2.5 The translation component provides the translated UI messages (cypress tests for this)
    • [x] 2.6 Language option should perform the autocomplete search in chosen language
    • [x] 2.6.1 If the autocomplete search is performed in all languages, display the foreign language hits with the language in parenthesis

  3. Autocomplete

    • [x] 3.1 Matches prefLabes (cypress tests for this)
    • [x] 3.2 Matches altLabels (cypress tests for this)
    • [x] 3.2.1 AltLabels should be in cursive
    • [x] 3.3 Matches hiddenLabels (cypress tests for this)
    • [x] 3.3.1 HiddenLabel hits that are duplicate results to other labels are filtered out with search parameter
    • [x] 3.4 Matches notation codes (cypress tests for this)
    • [x] 3.4.1 The notation code can be hidden with a configuration parameter
    • [x] 3.4.2 The configuration for this is read from the vocabulary config (cypress tests for this)
    • [x] 3.5 Shows the concept types (cypress tests for this)
    • [ ] 3.6 Additional information for each search result can be shown according to vocab config
    • [ ] 3.6.1 Labels for search result types should be provided by the backend in the SKOSMOS object and displayed in search results
    • [x] 3.7 The matching part of the text is highlighted for each search result (cypress tests for this)
    • [x] 3.8 Autocomplete should fire if there is at least two characters in the input string
    • [ ] 3.9 Caching
    • [ ] 3.9.1 When a search result is recieved, it is cached with the search string to a dictionary
    • [ ] 3.9.2 When a multipage result is recieved, it should be flagged as not-to-filter further
      • [ ] 3.9.2.1 Alternative option would be to load the rest of the pages of the result in asynchronous manner
    • [ ] 3.9.3 When more characters are added to a search string (no delay), apply a new filter to the raw result data
    • [ ] 3.9.4 When characters are erased from the search string (no delay), apply a new filter to the raw result data

  4. Accessibility

    • [ ] 4.2 HTML-content shown in other languages are tagged with lang-attribute
    • [x] 4.3 Language menu, search field, autocomplete list and search button are structured together
    • [ ] 4.4 Screen reader needs to be tested
    • [ ] 4.5 HTML element structure should be semantically meaningful for the menus (e.g. Bootstrap list-group)
    • [ ] 4.1 Search bar can be operated with keyboard, which key can be used for each sub-element
    • [x] 4.1.1 Language can be chosen with keyboard
    • [x] 4.1.2 Search input field can be operated with keyboard (and enter goes to search result page)
    • [x] 4.1.3 Autocomplete list can be operated with keyboard (and enter goes to the chosen search result)
    • [x] 4.1.4 Clear button can be operated with keyboard
    • [ ] 4.1.5 Search button can be operated with keyboard

  5. Additional menus

    • [x] 5.1 The maximum length of the language dropdown and the autocomplete list is limited to set element height (in rems)
    • [x] 5.2 Lists longer than the maximum element height get a scroll bar
    • [ ] 5.3 'Search tips' menu in similar manner to Skosmos 2.x
joelit commented 5 months ago

The choice of the autocomplete component can be a ready component that fills our requirements, one written from the scratch, or a vue component that has some of the functionalities ready but can be expanded to meet our needs:

Short requirement list:

  1. Autocomplete matches search terms as you type
  2. Additional information for each search result can be shown according to vocab config
  3. The matching part of the text is highlighted for each search result
  4. Autocomplete should chache initial results and filter the result list when more text is typed

Found solutions: