Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[JS] Error when comparing with invalid locale (Incorrect locale information provided) #1204

Closed
kinow opened this issue Sep 14, 2021 · 11 comments · May be fixed by #1206
Closed

[JS] Error when comparing with invalid locale (Incorrect locale information provided) #1204

kinow opened this issue Sep 14, 2021 · 11 comments · May be fixed by #1206

Comments

@kinow
Copy link
Collaborator

kinow commented Sep 14, 2021

At which URL did you encounter the problem?

Running Skosmos locally, with the locale en_US. In JavaScript, the locale needs - I think - to be replaced by en-US or en, otherwise we get a Incorrect locale information provided from String.localeCompare.

scripts.js:339 Uncaught RangeError: Incorrect locale information provided
    at String.localeCompare (<anonymous>)
    at naturalCompare (scripts.js:339)
    at a.jstree.plugins.sort.sort (hierarchy.js:534)
    at Array.sort (<anonymous>)
    at a.jstree.plugins.sort.sort (jstree.min.js:5)
    at a.jstree.plugins.sort.sort (jstree.min.js:5)
    at a.jstree.plugins.sort.<anonymous> (jstree.min.js:5)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    at Object.trigger (jquery.min.js:4)
naturalCompare @ scripts.js:339
sort @ hierarchy.js:534
sort @ jstree.min.js:5
sort @ jstree.min.js:5
(anonymous) @ jstree.min.js:5
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
trigger @ jquery.min.js:4
triggerHandler @ jquery.min.js:4
trigger @ jstree.min.js:2
k @ jstree.min.js:2
(anonymous) @ jstree.min.js:2

What steps will reproduce the problem?

  1. Visit any concept of STW, for example
  2. Switch to a locale with underscore (e.g. en_US, de_DE [is this correct?], etc)
  3. Open browser console

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

No errors, String.localeCompare uses a valid locale.

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

Firefox & Chromium, Ubuntu LTS.

@osma osma added the bug label Sep 14, 2021
@osma
Copy link
Member

osma commented Sep 14, 2021

Thanks for reporting @kinow! How do you change the locale in step 2?

@kinow
Copy link
Collaborator Author

kinow commented Sep 14, 2021

Thanks for reporting @kinow! How do you change the locale in step 2?

Changed the interface language. Here's my configuration for languages (the dockerfiles files are installing multiple locales):

    skosmos:languages (
        [ rdfs:label "ar" ; rdf:value "ar_AE.utf8" ]
        [ rdfs:label "da" ; rdf:value "da_DK.utf8" ]
        [ rdfs:label "de" ; rdf:value "de_DE.utf8" ]
        [ rdfs:label "en" ; rdf:value "en_GB.utf8" ]
        [ rdfs:label "en_US" ; rdf:value "en_US.utf8" ]
        [ rdfs:label "es" ; rdf:value "es_ES.utf8" ]
        [ rdfs:label "fa" ; rdf:value "fa_IR.utf8" ]
        [ rdfs:label "fi" ; rdf:value "fi_FI.utf8" ]
        [ rdfs:label "fr" ; rdf:value "fr_FR.utf8" ]
        [ rdfs:label "it" ; rdf:value "it_IT.utf8" ]
        [ rdfs:label "nb" ; rdf:value "nb_NO.utf8" ]
        [ rdfs:label "nl" ; rdf:value "nl_NL.utf8" ]
        [ rdfs:label "nn" ; rdf:value "nn_NO.utf8" ]
        [ rdfs:label "pl" ; rdf:value "pl_PL.utf8" ]
        [ rdfs:label "pt" ; rdf:value "pt_PT.utf8" ]
        [ rdfs:label "pt_BR" ; rdf:value "pt_BR.utf8" ]
        [ rdfs:label "ru" ; rdf:value "ru_RU.utf8" ]
        [ rdfs:label "sv" ; rdf:value "sv_SE.utf8" ]
        [ rdfs:label "zh" ; rdf:value "zh_CN.utf8" ]
    ) ;

GIFrecord_2021-09-14_230621

And the search bar shows German too, which is strange I think?

@osma
Copy link
Member

osma commented Sep 14, 2021

Ah, right - I think this is caused by the value of the lang variable that is passed from PHP to JS here:

var lang = "{{ request.lang }}";

It is passed to localeCompare within the naturalCompare function:

var nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1], lang);

I think the underscore-style locale should be converted to what JS code expects somewhere - the best place to do that would probably be in the scripts.twig template or nearby (perhaps adding a new method to Request that returns the language in a JS-friendly format, which the template then calls instead of just {{ request.lang }})

Would you like to try to fix this @kinow? :)

@osma
Copy link
Member

osma commented Sep 14, 2021

Regarding the search bar: that's probably a different issue altogether. It could be that it reverts to the default language of STW (German) because of some language comparison mismatch (e.g. "en_US" != "en"). I suggest fixing the main issue first, then looking at this later on.

@kinow
Copy link
Collaborator Author

kinow commented Sep 14, 2021

I think the underscore-style locale should be converted to what JS code expects somewhere - the best place to do that would probably be in the scripts.twig template or nearby (perhaps adding a new method to Request that returns the language in a JS-friendly format, which the template then calls instead of just {{ request.lang }})

+1 sounds like a plan!

Would you like to try to fix this @kinow? :)

Yup, I always use localeCompare when sorting JS arrays, but I never thought about what values are valid for the locale (always used en). Good opportunity to learn while fixing the issue.

Writing a test might be a bit harder, but I'll try too. Thanks @osma!

@kinow
Copy link
Collaborator Author

kinow commented Sep 15, 2021

Under the hood, looks like String.localeCompare uses Intl.Collator. To reproduce the bug:

new Intl.Collator('en_us') # error
new Intl.Collator('en-us') # ok

@kinow
Copy link
Collaborator Author

kinow commented Sep 15, 2021

In the ECMAScript document https://tc39.es/ecma402/#intl-object, it says the locale is a valid BCP47 tag, so en-us or en-US, not en_US. I tested in the browser values like pt-BR, en-US, and en-GB. So the simplest fix appears to be to simply replace _ by a - 👍

@osma
Copy link
Member

osma commented Sep 15, 2021

Excellent digging @kinow!

This sort of begs the question why language tags with underscores are even used in config.ttl - BCP47 is also used for RDF language tags and web technologies in general, including HTML. Would the issue be resolved simply by using en-US instead of en_US as the rdfs:label value in your configuration file, or would that create new problems?

Underscores are used in locale names like en_US.UTF8 but that's a different system anyway.

@kinow
Copy link
Collaborator Author

kinow commented Sep 15, 2021

Oh, excellent question @osma.

We have values like

[ rdfs:label "pt_BR" ; rdf:value "pt_BR.utf8" ]

The label is used internally to match the JS selected values, and the configuration values. Then I guess it's used to submit queries to Jena, e.g.

$labelcondLabel = ($lang) ? "FILTER( langMatches(lang(?label), '$lang') )" : "";

From what I remember, I added pt_BR and not pt-BR because of the Linux locale format: https://man7.org/linux/man-pages/man1/locale.1.html#EXAMPLES

I think we use the locale code (with underscore) also because somewhere we use... a get---- function to load i18n strings, no? (Can't recall the name of the function, nor find it in the IDE).

@kinow
Copy link
Collaborator Author

kinow commented Sep 15, 2021

(just saw your comment in the PR, sorry, was searching in the IDE and writing here 👍 but agree with you that that's strange to have _ (especially if the value in Jena might differ?)

@joelit joelit added this to Proposed product backlog items in Sprint Backlog IV/2021 via automation Oct 25, 2021
@osma
Copy link
Member

osma commented Mar 6, 2023

It seems to me that this was a user error - BCP47 language tags should be used for rdfs:label values in config.ttl - with dashes, not underscores, as the separator.

I'm closing this issue, but feel free to reopen if you disagree.

@osma osma closed this as completed Mar 6, 2023
Sprint Backlog IV/2021 automation moved this from Proposed product backlog items to Issue/PR closed Mar 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Sprint Backlog IV/2021
  
Issue/PR closed
Development

Successfully merging a pull request may close this issue.

2 participants