Add scopeNote as searchable field. #285

Added test for scopeNote.
Added documentation on how to add searchable fields.

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.

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,15 +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",
-                  "scopeNote"
-                ],
+                index: [...config.searchableAttributes],
               },
             })
             return [l, index]

src/common.js

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

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/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) => {
@@ -62,7 +62,7 @@ export const importIndex = async (
   labels,
   language,
   setIndex,
-  customDomain
+  config
 ) => {
   if (!conceptSchemeId) return
   const idx = new Document({
@@ -72,15 +72,7 @@ export const importIndex = async (
     document: {
       id: "id",
       // store: ["prefLabel", "altLabel"], /* not working flexsearchside  */
-      index: [
-        "notation",
-        "prefLabel",
-        "altLabel",
-        "hiddenLabel",
-        "definition",
-        "example",
-        "scopeNote"
-      ],
+      index: [...config.searchableAttributes],
     },
   })
   // filter from labels object the selected entries
@@ -102,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) {