Merge branch '285-search' into dev

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.

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

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

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")
+  })
 })

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]
@@ -364,6 +357,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)

src/common.js

@@ -98,6 +98,7 @@ const parseLanguages = (graph) => {
  * @property {string} tokenizer
  * @property {Object} colors
  * @property {string} customDomain
+ * @property {string[]} searchableAttributes
  */
 
 /**

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>

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 {

src/queries.js

@@ -191,6 +191,9 @@ module.exports.allConceptScheme = (languages) => `
     example {
       ${[...languages].join(" ")}
     }
+    scopeNote {
+      ${[...languages].join(" ")}
+    }
     deprecated
   }
 `

src/templates/App.jsx

@@ -130,7 +130,7 @@ const App = ({ pageContext, children, location }) => {
       labels,
       data.selectedLanguage,
       setIndex,
-      config.customDomain
+      config
     )
   }, [data, language, labels])
 

src/templates/helpers.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react"
 import Document from "flexsearch/dist/module/document.js"
-import { i18n, getFilePath } from "../common"
+import { getFilePath } from "../common"
 import { withPrefix } from "gatsby"
 
 export const handleKeypresses = (labels, setLabels) => {
@@ -43,6 +43,10 @@ export const handleKeypresses = (labels, setLabels) => {
         e.preventDefault()
         Object.keys(labels).includes("hiddenLabel") &&
           setLabels({ ...labels, ["hiddenLabel"]: !labels["hiddenLabel"] })
+      } else if (e.altKey && e.which === 83) {
+        e.preventDefault()
+        Object.keys(labels).includes("scopeNote") &&
+          setLabels({ ...labels, ["scopeNote"]: !labels["scopeNote"] })
       }
     }
     document.addEventListener("keydown", handleKeyDown)
@@ -58,7 +62,7 @@ export const importIndex = async (
   labels,
   language,
   setIndex,
-  customDomain
+  config
 ) => {
   if (!conceptSchemeId) return
   const idx = new Document({
@@ -68,14 +72,7 @@ export const importIndex = async (
     document: {
       id: "id",
       // store: ["prefLabel", "altLabel"], /* not working flexsearchside  */
-      index: [
-        "notation",
-        "prefLabel",
-        "altLabel",
-        "hiddenLabel",
-        "definition",
-        "example",
-      ],
+      index: [...config.searchableAttributes],
     },
   })
   // filter from labels object the selected entries
@@ -97,7 +94,9 @@ export const importIndex = async (
     try {
       const path =
         getFilePath(conceptSchemeId) + `-cs/search/${language}/${key}`
-      data = await fetch(withPrefix(getFilePath(path, `json`, customDomain)))
+      data = await fetch(
+        withPrefix(getFilePath(path, `json`, config.customDomain))
+      )
       const jsonData = await data.json()
       idx.import(key, jsonData ?? null)
     } catch (e) {