[JS] jstree error when top concept's preLabel contains special characters

[schlawiner]

At which URL did you encounter the problem?

Locally (I use the docker-compose version)

What steps will reproduce the problem?

1. Load a vocabulary with Concepts whose prefLabel contains "()". Example:

    skos:inScheme patype:; skos:topConceptOf patype:;
    skos:notation "723";
    skos:prefLabel "Thesis (Bachelor)"@en, "Abschlussarbeit (Bachelor)"@de;
    skos:altLabel "bachelor's thesis"@en, "bachelor thesis"@en, "bachelor dissertation"@en, "Bachelor-Arbeit"@de;
    skos:scopeNote "theses to earn a bachelor's degree or equivalent"@en;
    skos:exactMatch fabio:BachelorsThesis, crt:c_7a1f;
    skos:broadMatch fabio:Thesis, eprint:Thesis, schema:Thesis
.

2. Start on the Vocabulary overview page (for me: http://localhost:9090/de/)
3. Click the offending vocabulary and wait for it to open. This specific vocab is set to display "Hierarchy" view by default.

What is the expected output? What do you see instead?

Expected: the hierarchy view of my vocabulary, listing all the concepts.
Instead: A "loading" spinner in the sidebar that never finished.

In the console:

Uncaught Error: Syntax error, unrecognized expression: thesis (bachelor)
    at Function.fa.error (jquery.min.js:2)
    at fa.tokenize (jquery.min.js:2)
    at fa.select (jquery.min.js:2)
    at Function.fa [as find] (jquery.min.js:2)
    at n.fn.init.find (jquery.min.js:2)
    at new n.fn.init (jquery.min.js:2)
    at n (jquery.min.js:2)
    at nodeLabelSortKey (hierarchy.js:437)
    at a.jstree.plugins.sort.sort (hierarchy.js:550)
    at Array.sort (<anonymous>)

However, when I remove the parentheses from the specific concept that is listed in the console error message, the error message instead complains about the next concept that also has parentheses, in alphabetical order. In my case: "thesis (doctoral)". If I remove the parenthesis in that, it complains about "thesis (master)".

Helpful additional info

1. Interestingly, when switching to the German interface (not vocab German language!), JS stops complaining about "thesis (doctoral)" and instead is offended by "abschlussarbeit (master)" (with the same error content otherwise), which is the (lowercased) prefLabel of another Concept, namely the one that would come next when listing the German prefLabels alphabetically - remember: I am not looking at the vocabulary in German, but have only switched the UI language to German.

2. When going to the "Alphabetical" tab and selecting any one of the concepts listed, and then going back to the "Hierarchy" tab, the error is not triggered and the hierarchy of terms is displayed as expected.

What browser did you use? (eg. Firefox, Chrome, Safari, Internet explorer)

Happens in all browsers I have access to on this machine:

• Chrome
• Edge
• Firefox
• Safari

[schlawiner]

Here is the configuration of that vocabulary:

:patypes a skosmos:Vocabulary, void:Dataset ;
    dc:title "PsychArchives Resource Types"@en, "PsychArchives Ressourcen-Typen" ;
    skosmos:shortName "PAT";
    dc:subject :cat_general ;
    void:uriSpace "https://psyndex.de/vocab/psycharchives-types/";
    skosmos:language "en", "de";
    skosmos:defaultLanguage "en";
    skosmos:fullAlphabeticalIndex true ;
    skosmos:showTopConcepts true ;
    skosmos:showNotation false ;
    skosmos:defaultSidebarView "hierarchy" ; 
    void:sparqlEndpoint <http://fuseki-cache:80/skosmos/sparql> ;
    skosmos:sparqlGraph <https://psyndex.de/vocab/psycharchives-types/> .

Note: when switching to skosmos:showNotation true ; (or just commenting out this setting), the error disappears.

[schlawiner]

On closer examination, I think the error might be introduced in function nodeLabelSortKeyin hiearchy.js. It seems the labels are "toLowerCase"ed there, but not escaped for nonletter symbols. (I'm not familiar enough with JS to suggest a fix, sorry.)

 var label = $(node.text.toLowerCase()).filter('.tree-label').text();
 return domain + " " + label;

[osma]

Thanks for the report and the thorough digging of the cause!

I assume you are running the most recent release 2.12? It seems so, because the nodeLabelSortKey function is quite new.

[schlawiner]

Yes, this is version 2.12.

[schlawiner]

Additional weird behavior that only happens in this specific vocabulary (with notations and with labels that have parentheses):

When setting sortByNotation to false (while still showing the notations in the tree), the concepts are ordered in a strange way that doesn't seem to be any of the documented ones.

    skosmos:showNotation true ;
    skosmos:sortByNotation false ;

They are neither ordered by prefLabel or altLabel in any of the two languages (as per the documentation, it should be the prefLabel of the selected language), nor by notation (either lexical or natural).

See screenshot, where "Article" with a notation of 6 comes last, and "Book" comes third to last, while those two should be first and second if the sorting would indeed be by label as documented.

Trying to force the bug in an otherwise working vocabulary, I added parentheses to one of its preflabels, going for one inside the hierarchy (level 2, "Thirties").

It looks like any concept whose prefLabel contains parentheses "bubbles" upward in the hierarchy sorting, or rather, its parent/broader concept does. In the following screenshot, sortByNotation is false, so "Adolescence" should be the first concept, yet instead, "Adulthood" is first, presumably because its narrower concept "Thirties" has parentheses in the label.

Interestingly, when the label containing the offending parentheses characters is not a top concept (as it is here with "Thirties") the hierarchy view works as expected and doesn't throw the javascript error I reported up top. The error in the hierarchy display only occurs if the offending label is part of a top concept and existing notations are turned off with showNotation false.

[schlawiner]

After combing through the JS in Firefox debugger, I think I found the bug!
If no notation exists or no sorting by notation is requested (sortByNotation false), the naturalCompare is called with the arguments nodeLabelSortKey(aNode) and nodeLabelSortKey(bNode). However, nodeLabelSortKey always returns a 1 or 0 followed by a space, not, as expected by the naturalCompare function, a string "1 some label name". That's because the label variable in nodeLabelSortKey is never filled - it contains an unnecessary filter for a class in html that is never found - because it is never passed html in the first place with node.text - node.text already contains the clean label string and needs no further filtering.

I'm not sure why the problem only occurred when there are special symbols in the label (check it in action on finto, too: https://skosmos.dev.finto.fi/unesco/en/ - select Hierarchy, then wait for the spinner to never stop loading).

However, when removing the class filter, from var label = $(node.text.toLowerCase()).filter('.tree-label').text(); to var label = node.text.toLowerCase(); the whole thing works as expected.

I think I can prepare a pull request with the fix, although be warned: I have no real idea why this actually works.

[osma]

Fixed by PR #1227 - thanks @schlawiner for reporting and providing a PR!