Merge branch 'main' into 284-other-attributes-for-cs

skohub-io · Apr 24, 2024 · 180efea · 180efea
2 parents 1049a58 + cf08bc9
commit 180efea
Show file tree

Hide file tree

Showing 20 changed files with 294 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -143,6 +143,7 @@ You can configure the following settings:
     - Logo
     - Colors
     - Fonts
+- Searchable Fields
 
 The settings are explained in the following sections.
 
@@ -275,6 +276,25 @@ url: [String]
 This will add the `url` field, being an array of strings.
 For other types, compare with already existing properties and just copy as you need.
 
+## Adding Searchable Fields
+
+To add a field to be searchable you have to make the following adjustments:
+
+- Add the field in the `config.yaml` file to `searchableAttributes`, e.g. `editorialNote`
+- In `src/queries.js` add it to `ConceptFields` (around line 176):
+```graphql
+editorialNote {
+  ${[...languages].join(" ")}
+}
+```
+- Add it to the labels to be indexed. Go to `gatsby-node.js` and add it the document object around line 341. For fields being *single* language tagged labels (e.g. `skos:prefLabel`) use `prefLabel` as an example. For fields being arrays of language tagged labels (e.g. `skos:altLabel`) use `altLabel` as an example. For `skos:editorialNote` it would be:
+```js
+...(concept.editorialNote &&
+Object.hasOwn(concept.editorialNote, language) && {
+  editorialNote: i18n(language)(concept.editorialNote),
+}),
+```
+
 ## Troubleshooting
 
 Depending on special circumstances you may get errors in the log files, e.g.

diff --git a/config.default.yaml b/config.default.yaml
@@ -10,6 +10,7 @@ searchableAttributes:
   - "hiddenLabel"
   - "example"
   - "definition"
+  - "scopeNote"
 ui:
   title: "SkoHub Vocabs" # Title is mandatory
   logo: "skohub-signet-color.svg" # Path

diff --git a/cypress/config.e2e.yaml b/cypress/config.e2e.yaml
@@ -10,6 +10,7 @@ searchableAttributes:
   - "hiddenLabel"
   - "example"
   - "definition"
+  - "scopeNote"
 ui:
   title: "SkoHub Vocabs" # Title is mandatory
   logo: "skohub-signet-color.svg" # Path

diff --git a/cypress/e2e/conceptSchemeAndConcept.cy.js b/cypress/e2e/conceptSchemeAndConcept.cy.js
@@ -64,6 +64,16 @@ describe("Concept Scheme and Concept", () => {
     cy.get("h1").should("have.text", "Hash URI Konzept Schema")
   })
 
+  it("Visting a hash URI Concept Scheme with hash uri in URL works", () => {
+    cy.visit("/example.org/hashURIConceptScheme.html#scheme", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.get(".conceptScheme > a").should("have.text", "Hash URI Konzept Schema")
+    cy.get("h1").should("have.text", "Hash URI Konzept Schema")
+  })
+
   it("Visting a hash URI Concept works", () => {
     cy.visit("/example.org/hashURIConceptScheme.html#concept1", {
       onBeforeLoad(win) {

diff --git a/cypress/e2e/searchAndFilter.cy.js b/cypress/e2e/searchAndFilter.cy.js
@@ -151,4 +151,18 @@ describe("search and filter", () => {
     cy.get("#closeModal").click()
     cy.get("span").contains("Konzept 1").should("exist")
   })
+
+  it("turning on scopeNote checkbox returns scopeNote matches", () => {
+    cy.visit("/w3id.org/index.html", {
+      onBeforeLoad(win) {
+        Object.defineProperty(win.navigator, "language", { value: "de-DE" })
+      },
+    })
+    cy.findByRole("textbox").type("Scope")
+    cy.get("p").contains("Nothing found").should("exist")
+    cy.get("#settings").click()
+    cy.get("#scopeNoteCheckBox").click()
+    cy.get("#closeModal").click()
+    cy.get("span").contains("Konzept 1").should("exist")
+  })
 })
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -289,14 +289,7 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
               document: {
                 id: "id",
                 // store: ["prefLabel", "altLabel"], /*  not working when importing, bug in flexsearch */
-                index: [
-                  "notation",
-                  "prefLabel",
-                  "altLabel",
-                  "hiddenLabel",
-                  "definition",
-                  "example",
-                ],
+                index: [...config.searchableAttributes],
               },
             })
             return [l, index]
@@ -306,7 +299,14 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
         const conceptsInScheme = await graphql(
           queries.allConcept(conceptScheme.id, languages)
         )
-        const embeddedConcepts = []
+        // embed concept scheme data
+        const embeddedConcepts = [
+          {
+            json: omitEmpty(Object.assign({}, conceptScheme, context.jsonld)),
+            jsonld: omitEmpty(Object.assign({}, conceptScheme, context.jsonld)),
+          },
+        ]
+
         conceptsInScheme.data.allConcept.edges.forEach(({ node: concept }) => {
           const json = omitEmpty(Object.assign({}, concept, context.jsonld))
           const jsonld = omitEmpty(Object.assign({}, concept, context.jsonld))
@@ -364,6 +364,10 @@ exports.createPages = async ({ graphql, actions: { createPage } }) => {
                 Object.hasOwn(concept.example, language) && {
                   example: i18n(language)(concept.example),
                 }),
+              ...(concept.scopeNote &&
+                Object.hasOwn(concept.scopeNote, language) && {
+                  scopeNote: i18n(language)(concept.scopeNote),
+                }),
               notation: concept.notation,
             }
             indexes[language].add(document)

diff --git a/shapes/skohub.shacl.ttl b/shapes/skohub.shacl.ttl
@@ -43,7 +43,6 @@
       sh:severity sh:Violation ;
       rdfs:comment "Tested with 01_cs_no_title.ttl" ;
     ] 
-
   );
   sh:property [
     sh:path skos:hasTopConcept ;
@@ -60,15 +59,26 @@
     sh:message "The target class for hasTopConcept should be skos:Concept" ;
     rdfs:comment "Tested with 03_cs_target_class_hasTopConcept.ttl" ;
   ] ;
-  sh:property [
-    sh:path dct:description ;
-    sh:datatype rdf:langString ;
-    sh:severity sh:Warning ;
-    sh:minCount 1 ;
-    sh:message: "A description of the Concept Scheme should be provided." ;
-    rdfs:comment "Tested with 04_cs_no_description.ttl" ;
-    rdfs:comment "Tested with 05_cs_description_no_langstring.ttl" ;
-  ] ;
+  sh:or (
+    [
+      sh:path dct:description ;
+      sh:datatype rdf:langString ;
+      sh:severity sh:Warning ;
+      sh:minCount 1 ;
+      sh:message: "A description of the Concept Scheme should be provided." ;
+      rdfs:comment "Tested with 04_cs_no_description.ttl" ;
+      rdfs:comment "Tested with 05_cs_description_no_langstring.ttl" ;
+    ]
+    [
+      sh:path dc:description ;
+      sh:datatype rdf:langString ;
+      sh:severity sh:Warning ;
+      sh:minCount 1 ;
+      sh:message: "A description of the Concept Scheme should be provided." ;
+      rdfs:comment "Tested with 04_cs_no_description.ttl" ;
+      rdfs:comment "Tested with 05_cs_description_no_langstring.ttl" ;
+    ]
+  ) ;
   sh:property [
     sh:path dct:license ;
     sh:minCount 1 ;

diff --git a/src/common.js b/src/common.js
@@ -98,6 +98,7 @@ const parseLanguages = (graph) => {
  * @property {string} tokenizer
  * @property {Object} colors
  * @property {string} customDomain
+ * @property {string[]} searchableAttributes
  */
 
 /**

diff --git a/src/components/Collection.jsx b/src/components/Collection.jsx
@@ -15,7 +15,7 @@ const Collection = ({ pageContext: { node: collection, customDomain } }) => {
   }, [data?.selectedLanguage])
 
   return (
-    <div className="content block main-block">
+    <div>
       <h1>{i18n(language)(collection.prefLabel)}</h1>
       <h2>{collection.id}</h2>
       <JsonLink to={getFilePath(collection.id, "json", customDomain)} />

diff --git a/src/components/Concept.jsx b/src/components/Concept.jsx
@@ -19,13 +19,14 @@ const Concept = ({
   }, [data?.selectedLanguage])
 
   return (
-    <div className="content block main-block" id={getDomId(concept.id)}>
+    <div id={getDomId(concept.id)}>
       <h1 style={{ color: config.colors.skoHubAction }}>
         {concept.deprecated ? "Deprecated" : ""}
       </h1>
       <h1>
         {concept.notation && <span>{concept.notation.join(",")}&nbsp;</span>}
-        {i18n(language)(concept.prefLabel)}
+        {(concept?.prefLabel && i18n(language)(concept.prefLabel)) ||
+          (concept?.title && i18n(language)(concept.title))}
       </h1>
       <ConceptURI id={concept.id} />
       <JsonLink to={getFilePath(concept.id, "json", customDomain)} />
@@ -52,22 +53,55 @@ const Concept = ({
           </Markdown>
         </div>
       )}
-      {concept.scopeNote && (
+      {concept.note && i18n(language)(concept.note) !== "" && (
         <div className="markdown">
-          <h3>Scope Note</h3>
-          <Markdown>
-            {i18n(language)(concept.scopeNote) ||
-              `*No scope note in language "${language}" provided.*`}
-          </Markdown>
+          <h3 id="note">Note</h3>
+          <ul aria-labelledby="note">
+            {i18n(language)(concept.note).map((note, i) => (
+              <li key={i}>{note}</li>
+            ))}
+          </ul>
         </div>
       )}
-      {concept.note && (
+      {concept.changeNote && i18n(language)(concept.changeNote) !== "" && (
         <div className="markdown">
-          <h3>Note</h3>
-          <Markdown>
-            {i18n(language)(concept.note) ||
-              `*No note in language "${language}" provided.*`}
-          </Markdown>
+          <h3 id="changenote">ChangeNote</h3>
+          <ul aria-labelledby="changenote">
+            {i18n(language)(concept.changeNote).map((changeNote, i) => (
+              <li key={i}>{changeNote}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {concept.editorialNote &&
+        i18n(language)(concept.editorialNote) !== "" && (
+          <div className="markdown">
+            <h3 id="editorialnote">EditorialNote</h3>
+            <ul aria-labelledby="editorialnote">
+              {i18n(language)(concept.editorialNote).map((editorialNote, i) => (
+                <li key={i}>{editorialNote}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      {concept.historyNote && i18n(language)(concept.historyNote) !== "" && (
+        <div className="markdown">
+          <h3 id="historynote">HistoryNote</h3>
+          <ul aria-labelledby="historynote">
+            {i18n(language)(concept.historyNote).map((historyNote, i) => (
+              <li key={i}>{historyNote}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {concept.scopeNote && i18n(language)(concept.scopeNote) !== "" && (
+        <div className="markdown">
+          <h3 id="scopenote">ScopeNote</h3>
+          <ul aria-labelledby="scopenote">
+            {i18n(language)(concept.scopeNote).map((scopeNote, i) => (
+              <li key={i}>{scopeNote}</li>
+            ))}
+          </ul>
         </div>
       )}
       {concept.altLabel && i18n(language)(concept.altLabel) !== "" && (

diff --git a/src/components/ConceptScheme.jsx b/src/components/ConceptScheme.jsx
@@ -22,19 +22,13 @@ const ConceptScheme = ({
   if (pathname.hash) {
     const filtered = embed.filter((c) => c.json.id.endsWith(pathname.hash))
     return (
-      <div
-        className="content concept block main-block"
-        id={getDomId(conceptScheme.id)}
-      >
+      <div id={getDomId(conceptScheme.id)}>
         <Concept pageContext={{ node: filtered[0].json, language }} />
       </div>
     )
   } else {
     return (
-      <div
-        className="content concept block main-block"
-        id={getDomId(conceptScheme.id)}
-      >
+      <div id={getDomId(conceptScheme.id)}>
         <div>
           <h1>
             {(conceptScheme?.title && i18n(language)(conceptScheme.title)) ||

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -53,7 +53,7 @@ const Search = ({ handleQueryInput, labels, onLabelClick }) => {
           closeModal={() => setModal(false)}
           id="settingsModal"
         >
-          <p>Which labels do you want to include in the search?</p>
+          <p>Which fields do you want to include in the search?</p>
           <LabelFilter labels={labels} toggleClick={onLabelClick} />
         </Modal>
       </div>

diff --git a/src/context.js b/src/context.js
@@ -52,11 +52,20 @@ const jsonld = {
     definition: {
       "@container": "@language",
     },
-    scopeNote: {
-      "@container": "@language",
-    },
     note: {
-      "@container": "@language",
+      "@container": ["@language", "@set"],
+    },
+    changeNote: {
+      "@container": ["@language", "@set"],
+    },
+    editorialNote: {
+      "@container": ["@language", "@set"],
+    },
+    historyNote: {
+      "@container": ["@language", "@set"],
+    },
+    scopeNote: {
+      "@container": ["@language", "@set"],
     },
     notation: {
       "@container": "@set",

diff --git a/src/hooks/configAndConceptSchemes.js b/src/hooks/configAndConceptSchemes.js
@@ -1,5 +1,45 @@
 import { useStaticQuery, graphql } from "gatsby"
 
+/**
+ * @returns {{
+ *   config: {
+ *     colors: {
+ *       skoHubWhite: string,
+ *       skoHubDarkColor: string,
+ *       skoHubMiddleColor: string,
+ *       skoHubLightColor: string,
+ *       skoHubThinColor: string,
+ *       skoHubBlackColor: string,
+ *       skoHubAction: string,
+ *       skoHubNotice: string,
+ *       skoHubDarkGrey: string,
+ *       skoHubMiddleGrey: string,
+ *       skoHubLightGrey: string
+ *     },
+ *     logo: string,
+ *     title: string,
+ *     fonts: {
+ *       bold: {
+ *         font_family: string,
+ *         font_style: string,
+ *         font_weight: string,
+ *         name: string
+ *       },
+ *       regular: {
+ *         font_family: string,
+ *         font_style: string,
+ *         font_weight: string,
+ *         name: string
+ *       }
+ *     },
+ *     searchableAttributes: string[],
+ *     customDomain: string,
+ *     failOnValidation: boolean
+ *   },
+ *   conceptSchemes: Object<string, { languages: string[] }>
+ * }} An object containing `config` and `conceptSchemes`
+ *
+ */
 export const getConfigAndConceptSchemes = () => {
   const { site, allConceptScheme } = useStaticQuery(graphql`
     query Colors {