Epic: Implement hierarchical view in sidebar using Vue

[UnniKohonen]

Description of the enhancement

Adding a Vue component for vocabulary hierarchy in the sidebar.

Initial plan is to implement the component from the ground up (possibly something like this). If this doesn't work, it's also possible to use an external library like PrimeVue and its Tree component.

What new functionalities would the enhancement make possible?

• 1. Basic functionality (loading correct hierarchical view, loading and showing child nodes etc)
• 2. Partial page load
  • a. Partial page load when clicking on concepts in hierarchy
  • b. Moving partial page load functionality outside of alphabetical tab component
• 3. CSS
  • a. Correct height of sidebar
  • b. Scroll bar visibility and styling
  • c. Icons (arrows should be re-implemented using e.g. background-image)
  • d. Highlighting current concept
  • e. Highlighting concepts coming from outside the vocabulary
  • f. Colors etc
  • g. Correct borders
    • border should be removed from the children of the last concept on a level
    • last class should be set correctly on concepts with no children
  • h. Correct width of concepts in hierarchy (list items become narrower the deeper in the hierarchy they are, probably
    due to incorrect padding)
  • i. Resizing browser window breaks width
  • j. Loading spinner and correct message
  • k. Scrollbar visibility (in some browsers, scrollbar is shown in the middle of the sidebar before the component is loaded fully)
• 4. Automatic scroll to open concept on page load
• 5. Correct URLs for concepts coming from outside the vocabulary
• 6. Configuration of hierarchy
  • a. showTopConcepts, disabling hierarchy tab (not loading top concepts unnecessarily)
  • b. conceptSchemesInHierarchy (Showing concept schemes instead of top concepts)
  • c. showNotation (Showing notation codes next to concepts)
  • d. sortByNotation (Sorting concepts by notation according to notation sorting style)
  • e. showTopConcepts, rendering hierarchy without top concepts
• 7. Cypress tests
• 8. Concepts that are too low in hierarchy might not be visible even after automatic scrolling, this should be addressed in some way
• 9. Sorting concepts by label according to localization
• 10. Deprecated concepts shouldn't be shown in the hierarchy (see Deprecated concept shown on hierarchy even though no skosmos:showDeprecated is set #1143) - may require backend changes
• 11. Make sure collation works correctly in Northern Sámi (see Collation doesn't work in Northern Sámi in all environments #1420)

[joelit]

Saimme palautteena, että hierarkian selaaminen IPTC NewsCodesin tapauksessa on buginen Skosmos 2.17:ssa. IPTC lienee hyvä 3.0-testitapaus sanastosta, joka ei noudata tyypillistä topConcept-rakennetta.