From 79d8a457153e5c7c835073622bd4271ec921a302 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Tue, 10 Dec 2024 13:49:33 +0200 Subject: [PATCH 01/14] typo fix in twig template --- src/view/concept-card.inc.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index 4275539c..244e004d 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -133,7 +133,7 @@ RDF/XML
  • - TURTLE + TURTLE
  • JSON-LD From 721260e9f0c5a3da574add8844eced75c9660cd9 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Tue, 10 Dec 2024 15:27:36 +0200 Subject: [PATCH 02/14] basic CSS tooltips showing SKOS XL info for terms in other languages --- resource/css/skosmos.css | 76 ++++++++++++++++++++++++++++++++++ src/view/concept-card.inc.twig | 21 +++++++--- 2 files changed, 92 insertions(+), 5 deletions(-) diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css index 00463e2f..e9e1e90d 100644 --- a/resource/css/skosmos.css +++ b/resource/css/skosmos.css @@ -30,6 +30,9 @@ --vocab-table-border: var(--medium-color); --vocab-link: var(--secondary-dark-color); --vocab-box-text: var(--dark-color); + --tooltip-fg-color: var(--light-color); + --tooltip-bg-color: var(--dark-color); + --tooltip-border-color: var(--secondary-medium-color); /* Font definitions */ --font-size: 14px; @@ -951,3 +954,76 @@ body { font-size: 20px !important; } +/* Tooltips */ + +.tooltip-html { + position: relative; + display: inline-block; + cursor: pointer; +} + +.tooltip-html button { + line-height: 1.0; +} + +.tooltip-html button:focus { + border: 1px solid var(--vocab-text); + border-radius: 0; +} + +.tooltip-html:hover .tooltip-html-content, .tooltip-html:focus-within .tooltip-html-content { + visibility: visible; + opacity: 1; +} + +.tooltip-html-content { + box-sizing: border-box; + position: absolute; + top: 20px; + left: 0; + display: block; + cursor: text; + width: 400px; + color: var(--tooltip-fg-color); + background-color: var(--tooltip-bg-color); + border: 3px solid var(--tooltip-border-color); + z-index: 9001; + visibility: hidden; + opacity: 0; + padding: 0.25rem 0.5rem; +} + +/* The triangle that appears near the element that triggered it. */ +.tooltip-html-content:after { + position: absolute; + content: ''; + width: 10px; + height: 10px; + transform: rotate(45deg); + top: -7px; + left: 0; + margin-left: 2px; + color: var(--tooltip-fg-color); + border-top: 6px solid var(--tooltip-border-color); + border-right: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid var(--tooltip-border-color); + z-index: 9002; +} + +/* Definition lists used in tooltips. */ + +dl.tooltip-html-content dt { + display: block; + float: left; + font-weight: bold; + margin-right: 0.4em; +} + +dl.tooltip-html-content dt::after { + content: ":"; +} + +dl.tooltip-html-content dd { + display: block; +} diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index 244e004d..f8129a57 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -96,14 +96,25 @@
      {% for value in labels.prefLabel|default([])|merge(labels.altLabel|default([])) %} - {% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %}
    • - {{ value.label }} -
      • + {% if value.hasXlProperties %} +
      + +
      + {% for key, val in value.xlLabel.properties %} +
      {{ key|trans }}
      +
      {{ val }}
      + {% endfor %} +
      +
      + {% endif %} + {% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %} + {{ value.label }} {% else %} -
    • {{ value.label }}
      • + {{ value.label }} {% endif %} + {% endfor %}
    From a3af35bf2e22a7bc723ed45af3ebe9ced8729283 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Wed, 11 Dec 2024 10:30:45 +0200 Subject: [PATCH 03/14] initial Cypress test for SKOS XL popup --- tests/cypress/template/concept.cy.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index 0038d6d6..b120caf0 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -399,6 +399,18 @@ describe('Concept page', () => { // check that we have the correct number of languages cy.get('#concept-other-languages').find('.row').should('have.length', 3) }) + it('contains SKOS XL information for terms in other languages', () => { + cy.visit('/yso/en/page/p4625') // go to "Bronze Age" concept page + + // the tooltip should originally be invisible + cy.get('#concept-other-languages').find('.row').eq(1).find('.tooltip-html-content').should('not.be.visible') + + // click the button to trigger the tooltip + cy.get('#concept-other-languages').find('.row').eq(1).find('.tooltip-html button').click() + + // the tooltip should now be visible + cy.get('#concept-other-languages').find('.row').eq(1).find('.tooltip-html-content').should('be.visible') + }) it('contains created & modified times (English)', () => { cy.visit('/yso/en/page/p21685') // go to "music research" concept page (English) From 2ec9ad27d1b34c3375b96bab2dfd7b6ccf6917a2 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 11:20:44 +0200 Subject: [PATCH 04/14] extract xl-label into separate twig template file so it can be reused --- src/view/concept-card.inc.twig | 10 +--------- src/view/xl-label.inc.twig | 9 +++++++++ 2 files changed, 10 insertions(+), 9 deletions(-) create mode 100644 src/view/xl-label.inc.twig diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index f8129a57..20540fa9 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -98,15 +98,7 @@ {% for value in labels.prefLabel|default([])|merge(labels.altLabel|default([])) %}
  • {% if value.hasXlProperties %} -
    - -
    - {% for key, val in value.xlLabel.properties %} -
    {{ key|trans }}
    -
    {{ val }}
    - {% endfor %} -
    -
    + {{ include('xl-label.inc.twig', {xlLabel: value.xlLabel}) }} {% endif %} {% if value.type == "skos:prefLabel" and value.lang in request.vocab.config.languages %} + +
    + {% for key, val in xlLabel.properties %} +
    {{ key|trans }}
    +
    {{ val }}
    + {% endfor %} +
    + From 8f2add15c89d3a4585279f8355e164286c46fd5a Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 11:27:04 +0200 Subject: [PATCH 05/14] SKOS XL tooltips for concept prefLabel shown as heading --- resource/css/skosmos.css | 4 ++++ src/view/concept-card.inc.twig | 3 +++ 2 files changed, 7 insertions(+) diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css index e9e1e90d..1ae2b006 100644 --- a/resource/css/skosmos.css +++ b/resource/css/skosmos.css @@ -962,6 +962,10 @@ body { cursor: pointer; } +#concept-label .tooltip-html { + bottom: 4px; +} + .tooltip-html button { line-height: 1.0; } diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index 20540fa9..a3b024fe 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -36,6 +36,9 @@ {%- endif -%}
    • {% else %} {# literals, e.g. altLabels #} -
  • {% if propval.containsHtml %}{{ propval.label|raw }}{% else %}{{ propval.label }}{% endif %}
    • +
  • + {% if propval.hasXlProperties %} + {{ include('xl-label.inc.twig', {xlLabel: propval.xlLabel}) }} + {% endif %} + {% if propval.containsHtml %}{{ propval.label|raw }}{% else %}{{ propval.label }}{% endif %} +
    • {% endif %} {% endfor %} From 27f6dc3921fe3fa4ba2aa3c647e73a538f1d3da8 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 12:35:05 +0200 Subject: [PATCH 07/14] prevent extra whitespace in HTML that broke some Cypress tests --- src/view/concept-card.inc.twig | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index 2571518b..9bcc816d 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -82,10 +82,12 @@ {% else %} {# literals, e.g. altLabels #}
  • + {%- apply spaceless %} {% if propval.hasXlProperties %} {{ include('xl-label.inc.twig', {xlLabel: propval.xlLabel}) }} {% endif %} {% if propval.containsHtml %}{{ propval.label|raw }}{% else %}{{ propval.label }}{% endif %} + {% endapply -%}
    • {% endif %} {% endfor %} From e3e06ed69a5bfa9f6d487fc3eb8992ee34e8701f Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 12:35:55 +0200 Subject: [PATCH 08/14] split off full vs. partial page load tests from concept.cy.js, for easier maintenance and faster test cycles --- .../template/concept-full-vs-partial.cy.js | 131 +++++++++++++++++ tests/cypress/template/concept.cy.js | 132 ------------------ 2 files changed, 131 insertions(+), 132 deletions(-) create mode 100644 tests/cypress/template/concept-full-vs-partial.cy.js diff --git a/tests/cypress/template/concept-full-vs-partial.cy.js b/tests/cypress/template/concept-full-vs-partial.cy.js new file mode 100644 index 00000000..3f681b88 --- /dev/null +++ b/tests/cypress/template/concept-full-vs-partial.cy.js @@ -0,0 +1,131 @@ +describe('Concept page, full vs. partial page loads', () => { + const pageLoadTypes = ["full", "partial"] + + // tests that should be executed both with and without partial page load + pageLoadTypes.forEach((pageLoadType) => { + it('contains concept preflabel / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page + } else { + cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page + // click on the link to "burial mounds" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() + } + + // check that the vocabulary title is correct + cy.get('#vocab-title > a').invoke('text').should('equal', 'YSO - General Finnish ontology (archaeology)') + + // check the concept prefLabel + cy.get('#concept-heading h1').invoke('text').should('equal', 'burial mounds') + }) + it('concept preflabel can be copied to clipboard / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page + } else { + cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page + // click on the link to "burial mounds" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() + } + + // click the copy to clipboard button next to the prefLabel + cy.get('#copy-preflabel').click() + + // check that the clipboard now contains "music pyramids" + // NOTE: This test may fail when running Cypress interactively in a browser. + // The reason is browser security policies for accessing the clipboard. + // If that happens, make sure the browser window has focus and re-run the test. + cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'burial mounds'); + }) + it('contains concept URI / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page + } else { + cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page + // click on the link to "burial mounds" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() + } + + // check the property name + cy.get('.prop-uri .property-label').invoke('text').should('equal', 'URI') + + // check the concept URI + cy.get('#concept-uri').invoke('text').should('equal', 'http://www.yso.fi/onto/yso/p39473') + }) + it('concept URI can be copied to clipboard / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page + } else { + cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page + // click on the link to "burial mounds" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() + } + + // click the copy to clipboard button next to the URI + cy.get('#copy-uri').click() + + // check that the clipboard now contains "http://www.yso.fi/onto/yso/p39473" + // NOTE: This test may fail when running Cypress interactively in a browser. + // The reason is browser security policies for accessing the clipboard. + // If that happens, make sure the browser window has focus and re-run the test. + cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'http://www.yso.fi/onto/yso/p39473'); + }) + it('concept notation can be copied to clipboard / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0115') // go to "Eel" concept page + } else { + cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0114') // go to "Buri" concept page + // click on the link to "Eel" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'Eel').click() + } + + // click the copy to clipboard button next to the URI + cy.get('#copy-notation').click() + + // check that the clipboard now contains "33.2" + // NOTE: This test may fail when running Cypress interactively in a browser. + // The reason is browser security policies for accessing the clipboard. + // If that happens, make sure the browser window has focus and re-run the test. + cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', '33.2'); + }) + it('contains mappings / ' + pageLoadType, () => { + if (pageLoadType == "full") { + cy.visit('/yso/en/page/p14174') // go to "labyrinths" concept page + } else { + cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page + // click on the link to "labyrinths" to trigger partial page load + cy.get('#tab-hierarchy').contains('a', 'labyrinths').click() + } + + // check that we have some mappings + cy.get('#concept-mappings').should('not.be.empty') + // check that spinner does not exist after load + cy.get('#concept-mappings i.fa-spinner', {'timeout': 15000}).should('not.exist') + + // check the first mapping property name + // NOTE: we need to increase the timeout as the mappings can take a long time to load + cy.get('.prop-mapping h2', {'timeout': 20000}).eq(0).contains('Closely matching concepts') + // check the first mapping property values + cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).contains('Labyrinths') + cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://id.loc.gov/authorities/subjects/sh85073793') + cy.get('.prop-mapping').eq(0).find('.prop-mapping-vocab').eq(0).contains('Library of Congress Subject Headings') + // check that the first mapping property has the right number of entries + cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').should('have.length', 1) + + // check the second mapping property name + cy.get('.prop-mapping h2').eq(1).contains('Exactly matching concepts') + // check the second mapping property values + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).contains('labyrinter (sv)') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').invoke('text').should('equal', 'labyrinter') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/allars/Y21700') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(0).contains('Allärs - General thesaurus in Swedish') + // skipping the middle one (mapping to KOKO concept) as it's similar to the others + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).contains('labyrintit (fi)') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').invoke('text').should('equal', 'labyrintit') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/ysa/Y108389') + cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(2).contains('YSA - Yleinen suomalainen asiasanasto') + // check that the second mapping property has the right number of entries + cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').should('have.length', 3) + }) + + }); +}) diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index b120caf0..91914218 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -1,136 +1,4 @@ describe('Concept page', () => { - const pageLoadTypes = ["full", "partial"] - - // tests that should be executed both with and without partial page load - pageLoadTypes.forEach((pageLoadType) => { - it('contains concept preflabel / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page - } else { - cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page - // click on the link to "burial mounds" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() - } - - // check that the vocabulary title is correct - cy.get('#vocab-title > a').invoke('text').should('equal', 'YSO - General Finnish ontology (archaeology)') - - // check the concept prefLabel - cy.get('#concept-heading h1').invoke('text').should('equal', 'burial mounds') - }) - it('concept preflabel can be copied to clipboard / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page - } else { - cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page - // click on the link to "burial mounds" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() - } - - // click the copy to clipboard button next to the prefLabel - cy.get('#copy-preflabel').click() - - // check that the clipboard now contains "music pyramids" - // NOTE: This test may fail when running Cypress interactively in a browser. - // The reason is browser security policies for accessing the clipboard. - // If that happens, make sure the browser window has focus and re-run the test. - cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'burial mounds'); - }) - it('contains concept URI / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page - } else { - cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page - // click on the link to "burial mounds" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() - } - - // check the property name - cy.get('.prop-uri .property-label').invoke('text').should('equal', 'URI') - - // check the concept URI - cy.get('#concept-uri').invoke('text').should('equal', 'http://www.yso.fi/onto/yso/p39473') - }) - it('concept URI can be copied to clipboard / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/yso/en/page/p39473') // go to "burial mounds" concept page - } else { - cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page - // click on the link to "burial mounds" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'burial mounds').click() - } - - // click the copy to clipboard button next to the URI - cy.get('#copy-uri').click() - - // check that the clipboard now contains "http://www.yso.fi/onto/yso/p39473" - // NOTE: This test may fail when running Cypress interactively in a browser. - // The reason is browser security policies for accessing the clipboard. - // If that happens, make sure the browser window has focus and re-run the test. - cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', 'http://www.yso.fi/onto/yso/p39473'); - }) - it('concept notation can be copied to clipboard / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0115') // go to "Eel" concept page - } else { - cy.visit('/test-notation-sort/en/page/?uri=http%3A%2F%2Fwww.skosmos.skos%2Ftest%2Fta0114') // go to "Buri" concept page - // click on the link to "Eel" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'Eel').click() - } - - // click the copy to clipboard button next to the URI - cy.get('#copy-notation').click() - - // check that the clipboard now contains "33.2" - // NOTE: This test may fail when running Cypress interactively in a browser. - // The reason is browser security policies for accessing the clipboard. - // If that happens, make sure the browser window has focus and re-run the test. - cy.window().its('navigator.clipboard').invoke('readText').then((result) => {}).should('equal', '33.2'); - }) - it('contains mappings / ' + pageLoadType, () => { - if (pageLoadType == "full") { - cy.visit('/yso/en/page/p14174') // go to "labyrinths" concept page - } else { - cy.visit('/yso/en/page/p5714') // go to "prehistoric graves" concept page - // click on the link to "labyrinths" to trigger partial page load - cy.get('#tab-hierarchy').contains('a', 'labyrinths').click() - } - - // check that we have some mappings - cy.get('#concept-mappings').should('not.be.empty') - // check that spinner does not exist after load - cy.get('#concept-mappings i.fa-spinner', {'timeout': 15000}).should('not.exist') - - // check the first mapping property name - // NOTE: we need to increase the timeout as the mappings can take a long time to load - cy.get('.prop-mapping h2', {'timeout': 20000}).eq(0).contains('Closely matching concepts') - // check the first mapping property values - cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).contains('Labyrinths') - cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://id.loc.gov/authorities/subjects/sh85073793') - cy.get('.prop-mapping').eq(0).find('.prop-mapping-vocab').eq(0).contains('Library of Congress Subject Headings') - // check that the first mapping property has the right number of entries - cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').should('have.length', 1) - - // check the second mapping property name - cy.get('.prop-mapping h2').eq(1).contains('Exactly matching concepts') - // check the second mapping property values - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).contains('labyrinter (sv)') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').invoke('text').should('equal', 'labyrinter') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(0).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/allars/Y21700') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(0).contains('Allärs - General thesaurus in Swedish') - // skipping the middle one (mapping to KOKO concept) as it's similar to the others - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).contains('labyrintit (fi)') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').invoke('text').should('equal', 'labyrintit') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').eq(2).find('a').should('have.attr', 'href', 'http://www.yso.fi/onto/ysa/Y108389') - cy.get('.prop-mapping').eq(1).find('.prop-mapping-vocab').eq(2).contains('YSA - Yleinen suomalainen asiasanasto') - // check that the second mapping property has the right number of entries - cy.get('.prop-mapping').eq(1).find('.prop-mapping-label').should('have.length', 3) - }) - - }); - - // tests that only need to be executed with full page load - it('Contains title and title metadata', () => { cy.visit('/yso/en/page/p1265') // go to "archaeology" concept page From fee97ff7eb02c358681cd750f5529fc70714d60e Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 12:37:36 +0200 Subject: [PATCH 09/14] add Cypress test for SKOS XL tooltip on concept prefLabel --- tests/cypress/template/concept.cy.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index 91914218..ad3ca40f 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -141,6 +141,18 @@ describe('Concept page', () => { // Check that mapping property title is overridden correctly cy.get('.prop-mapping .property-label').eq(0).should('have.attr', 'title').and('contain', 'Exactly matching classes in another vocabulary.') }) + it('contains SKOS XL information for concept prefLabel', () => { + cy.visit('/yso/en/page/p4625?clang=se') // go to "bronsaáigi" concept page ('Bronze Age' in Northern Sami) + + // the tooltip should originally be invisible + cy.get('#concept-label .tooltip-html-content').should('not.be.visible') + + // click the button to trigger the tooltip + cy.get('#concept-label .tooltip-html button').click() + + // the tooltip should now be visible + cy.get('#concept-label .tooltip-html-content').should('be.visible') + }) it('contains concept type', () => { cy.visit('/yso/en/page/p21685') // go to "music research" concept page From 4e27299f7719913cfda5887490ac195ae71ec0d2 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 12:54:44 +0200 Subject: [PATCH 10/14] add Cypress test for SKOS XL popups on altLabels --- tests/cypress/template/concept.cy.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index ad3ca40f..5c315cb4 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -236,6 +236,18 @@ describe('Concept page', () => { // check the altLabel value cy.get('.prop-skos_altLabel .property-value li').invoke('text').should('equal', 'musicology (research activity)') }) + it('contains SKOS XL information for altLabel', () => { + cy.visit('/xl/en/page/c1') // go to "Concept" concept page in 'xl' test vocabulary + + // the tooltip should originally be invisible + cy.get('.prop-skos_altLabel .tooltip-html-content').should('not.be.visible') + + // focus on the button to trigger the tooltip + cy.get('.prop-skos_altLabel .tooltip-html button').focus() + + // the tooltip should now be visible + cy.get('.prop-skos_altLabel .tooltip-html-content').should('be.visible') + }) it('contains scope notes, with HTML links', () => { cy.visit('/yso/fi/page/p39138') // go to "ukonvaajat" concept page (in Finnish) From faa8fe7ac5e645ebf6ad5ecac5d7ca7aec94bd71 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 15:14:28 +0200 Subject: [PATCH 11/14] cypress test for altLabel tooltip also verifies hiding of tooltip --- tests/cypress/template/concept.cy.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tests/cypress/template/concept.cy.js b/tests/cypress/template/concept.cy.js index 5c315cb4..2233732a 100644 --- a/tests/cypress/template/concept.cy.js +++ b/tests/cypress/template/concept.cy.js @@ -247,6 +247,12 @@ describe('Concept page', () => { // the tooltip should now be visible cy.get('.prop-skos_altLabel .tooltip-html-content').should('be.visible') + + // lose the focus on the button to hide the tooltip + cy.get('.prop-skos_altLabel .tooltip-html button').blur() + + // the tooltip should now be invisible again + cy.get('.prop-skos_altLabel .tooltip-html-content').should('not.be.visible') }) it('contains scope notes, with HTML links', () => { cy.visit('/yso/fi/page/p39138') // go to "ukonvaajat" concept page (in Finnish) From 8beb86e52d3829f5b8f14c4a9c7c0cf033584df9 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 15:52:22 +0200 Subject: [PATCH 12/14] add aria-describedby attributes that link to tooltips --- src/view/concept-card.inc.twig | 22 ++++++++++++++++------ src/view/xl-label.inc.twig | 2 +- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/view/concept-card.inc.twig b/src/view/concept-card.inc.twig index 9bcc816d..c452d800 100644 --- a/src/view/concept-card.inc.twig +++ b/src/view/concept-card.inc.twig @@ -37,10 +37,12 @@
    {% if concept.hasXlLabel %} - {{ include('xl-label.inc.twig', {xlLabel: concept.xlLabel}) }} + {% set descriptionId = 'concept-preflabel-xl' %} + {{ include('xl-label.inc.twig', {xlLabel: concept.xlLabel, xlDescriptionId: descriptionId}) }} {% endif %} {% if concept.notation %}

    {{ concept.notation }} {{ concept.label }}

    -
    +
    {% for key, val in xlLabel.properties %}
    {{ key|trans }}
    {{ val }}
    From c3247e085344bff087cc659066a267ca60f38afd Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 15:55:31 +0200 Subject: [PATCH 13/14] add aria-label and aria-controls attributes to button that triggers XL tooltip --- src/view/xl-label.inc.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/xl-label.inc.twig b/src/view/xl-label.inc.twig index 80d2a242..caaa14c1 100644 --- a/src/view/xl-label.inc.twig +++ b/src/view/xl-label.inc.twig @@ -1,5 +1,5 @@
    - +
    {% for key, val in xlLabel.properties %}
    {{ key|trans }}
    From 402487353f95ff8e88b454feeb2c079ebbf5cfd2 Mon Sep 17 00:00:00 2001 From: Osma Suominen Date: Thu, 12 Dec 2024 15:58:13 +0200 Subject: [PATCH 14/14] made the clickable area larger for XL info icons --- resource/css/skosmos.css | 4 +++- src/view/xl-label.inc.twig | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css index 1ae2b006..0f7c641b 100644 --- a/resource/css/skosmos.css +++ b/resource/css/skosmos.css @@ -968,10 +968,12 @@ body { .tooltip-html button { line-height: 1.0; + padding: 3px; + margin: -3px; } .tooltip-html button:focus { - border: 1px solid var(--vocab-text); + border: 2px solid var(--vocab-text); border-radius: 0; } diff --git a/src/view/xl-label.inc.twig b/src/view/xl-label.inc.twig index caaa14c1..b69be323 100644 --- a/src/view/xl-label.inc.twig +++ b/src/view/xl-label.inc.twig @@ -1,5 +1,5 @@
    - +
    {% for key, val in xlLabel.properties %}
    {{ key|trans }}